@placeholderco/placeholder-ui 2.2.0 → 2.2.2

package/dist/app.css

@@ -46,16 +46,6 @@
 	--ui-link-color: var(--ui-tertiary-dark);
 	--ui-link-hover-color: var(--ui-accent-dark);
 
-	/* ---- Legacy aliases (deprecated, kept for backwards compatibility) ---- */
-	--midnight-rgb: var(--ui-primary-rgb);
-	--midnight-rgbc: var(--ui-primary-rgbc);
-	--midnight: var(--ui-primary);
-	--pistachio-rgb: var(--ui-accent-rgb);
-	--pistachio-rgbc: var(--ui-accent-rgbc);
-	--pistachio: var(--ui-accent);
-	--pistachio-dark: var(--ui-accent-dark);
-	--turquoise: var(--ui-tertiary);
-	--turquoise-dark: var(--ui-tertiary-dark);
 
 	/* ---- Surfaces and text (light mode) ---- */
 	--off-white: rgb(221, 221, 221);

package/dist/editors/tiptap/TipTap.svelte

@@ -748,7 +748,7 @@
 		line-height: 1.5;
 	}
 
-	/* Default variant - use pistachio theme */
+	/* Default variant - accent tint */
 	.editor-content :global(.ProseMirror .alert-default) {
 		background: rgba(var(--ui-accent-rgbc), 0.3);
 		border: 1px solid var(--ui-accent);

package/dist/editors/tiptap/toolbar/ToolbarButton.svelte

@@ -72,7 +72,7 @@
 		cursor: not-allowed;
 	}
 
-	.toolbar-button :global(.cu-icon) {
+	.toolbar-button :global(.pui-icon) {
 		height: 19px;
 	}
 </style>

package/dist/form/SelectMulti.svelte

@@ -316,22 +316,6 @@
 								}}>{value.label}</Badge
 							>
 						{/if}
-						<!-- <span class="inline-flex items-center bg-midnight text-white rounded-md px-2">
-						{value.label}
-						<button
-							class="leading-0 ml-1 size-4 rounded hover:bg-neutral-400/25"
-							{disabled}
-							onclick={(e) => {
-								if (disabled) return;
-
-								value.selected = !value.selected;
-								onSelection(value);
-								open = false;
-								e.stopPropagation();
-							}}
-							>×
-						</button>
-					</span> -->
 					{/each}
 				</div>
 			{/if}

package/dist/icon/Icon.svelte

@@ -29,24 +29,24 @@
 <span
 	style="--svg-stroke: {stroke}; --svg-fill: {fill}; {sizeStyle}"
 	class:flip
-	class="cu-icon {classes}"
+	class="pui-icon {classes}"
 >
 	{@html svg}
 </span>
 
 <style>
-	.cu-icon {
+	.pui-icon {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 	}
 
-	.cu-icon :global(svg) {
+	.pui-icon :global(svg) {
 		width: 100%;
 		height: 100%;
 	}
 
-	.cu-icon :global(svg:not(.icons-tabler-filled)) {
+	.pui-icon :global(svg:not(.icons-tabler-filled)) {
 		stroke: var(--svg-stroke);
 		fill: var(--svg-fill);
 	}

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export { default as ContextMenu } from './ui/ContextMenu.svelte';
 export type { ContextMenuProps, ContextMenuItem } from './ui/ContextMenu.svelte';
 export { default as ProgressBar } from './ui/ProgressBar.svelte';
 export type { ProgressBarProps, ProgressBarSegment } from './ui/ProgressBar.svelte';
-export type { ProgressBarVariant, LegacyProgressBarVariant } from './ui/ProgressBarVariant.js';
+export type { ProgressBarVariant } from './ui/ProgressBarVariant.js';
 export { default as Tabs } from './ui/Tabs.svelte';
 export type { TabsProps } from './ui/Tabs.svelte';
 export { default as Table } from './ui/Table.svelte';
@@ -123,7 +123,7 @@ export { default as GitCard } from './cards/GitCard.svelte';
 export type { GitCardProps } from './cards/GitCard.svelte';
 export * from './icon/index.js';
 export type { IconProps } from './icon/Icon.svelte';
-export type { ButtonVariant, LegacyButtonVariant } from './ui/ButtonVariant.js';
+export type { ButtonVariant } from './ui/ButtonVariant.js';
 export type { ButtonSize } from './ui/ButtonSize.js';
 export type { Hyperlink } from './models/Hyperlink.js';
 export type { LinkCollectionItem } from './models/LinkCollectionItem.js';

package/dist/layout/Navbar.svelte

@@ -12,8 +12,7 @@
 	import Logo from '../ui/Logo.svelte';
 	import type { Snippet } from 'svelte';
 
-	/** `midnight` is a legacy alias for `primary`. */
-	export type NavbarVariant = 'default' | 'primary' | 'midnight';
+	export type NavbarVariant = 'default' | 'primary';
 
 	export interface NavbarProps {
 		/** Visual variant. `primary` uses the primary brand colour as the background across all themes */
@@ -67,7 +66,7 @@
 		onDrawerButtonClick = undefined
 	}: NavbarProps = $props();
 
-	const isPrimary = $derived(variant === 'primary' || variant === 'midnight');
+	const isPrimary = $derived(variant === 'primary');
 </script>
 
 <header class={isPrimary ? 'primary' : ''}>
@@ -254,7 +253,7 @@
 		height: 1.5rem;
 	}
 
-	.inner-navbar :global(.cu-icon) {
+	.inner-navbar :global(.pui-icon) {
 		display: flex;
 	}
 

package/dist/layout/Navbar.svelte.d.ts

@@ -1,8 +1,7 @@
 import type { NavbarItem } from '../models/NavbarItem.js';
 import { type Hyperlink } from '../index.js';
 import type { Snippet } from 'svelte';
-/** `midnight` is a legacy alias for `primary`. */
-export type NavbarVariant = 'default' | 'primary' | 'midnight';
+export type NavbarVariant = 'default' | 'primary';
 export interface NavbarProps {
     /** Visual variant. `primary` uses the primary brand colour as the background across all themes */
     variant?: NavbarVariant;

package/dist/ui/AccordionItem.svelte

@@ -219,52 +219,44 @@
 		--accordion-open-color: var(--danger-text);
 	}
 
-	.variant-accent,
-	.variant-pistachio {
+	.variant-accent {
 		--accordion-open-bg: var(--ui-accent);
 		--accordion-open-color: var(--ui-primary);
 	}
 
-	.variant-accent-subtle,
-	.variant-pistachio-subtle {
+	.variant-accent-subtle {
 		--accordion-open-bg: rgba(var(--ui-accent-rgbc), 0.15);
 		--accordion-open-color: var(--text-color);
 	}
 
-	.variant-accent-outline,
-	.variant-pistachio-outline {
+	.variant-accent-outline {
 		--accordion-open-bg: transparent;
 		--accordion-open-color: var(--ui-accent);
 		--accordion-open-border-color: var(--ui-accent);
 	}
 
-	.variant-primary,
-	.variant-midnight {
+	.variant-primary {
 		--accordion-open-bg: var(--ui-primary);
 		--accordion-open-color: white;
 	}
 
-	.variant-primary-subtle,
-	.variant-midnight-subtle {
+	.variant-primary-subtle {
 		--accordion-open-bg: rgba(var(--ui-primary-rgbc), 0.1);
 		--accordion-open-color: var(--text-color);
 	}
 
-	.variant-primary-outline,
-	.variant-midnight-outline {
+	.variant-primary-outline {
 		--accordion-open-bg: transparent;
 		--accordion-open-color: var(--ui-primary);
 		--accordion-open-border-color: var(--ui-primary);
 	}
 
-	.variant-tertiary,
-	.variant-turquoise {
+	.variant-tertiary {
 		--accordion-open-bg: var(--ui-tertiary);
 		--accordion-open-color: var(--ui-primary);
 	}
 
-	.variant-tertiary-subtle,
-	.variant-turquoise-subtle {
+	.variant-tertiary-subtle {
 		--accordion-open-bg: rgba(var(--ui-tertiary-dark-rgbc), 0.25);
 		--accordion-open-color: var(--ui-tertiary-dark);
 	}

package/dist/ui/Badge.svelte

@@ -122,8 +122,7 @@
 		color: var(--badge-text-color) !important;
 	}
 
-	.accent,
-	.pistachio {
+	.accent {
 		--badge-bg-color: var(--ui-accent);
 		--badge-text-color: var(--ui-primary);
 		--badge-hover-bg-color: var(--ui-tertiary);
@@ -131,13 +130,11 @@
 		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.accent :global(.loader),
-	.pistachio :global(.loader) {
+	.accent :global(.loader) {
 		color: var(--ui-primary);
 	}
 
-	.primary,
-	.midnight {
+	.primary {
 		--badge-bg-color: var(--ui-primary);
 		--badge-text-color: #fff;
 		--badge-hover-bg-color: var(--ui-accent-dark);
@@ -145,8 +142,7 @@
 		--badge-outline-color: var(--ui-accent-dark);
 	}
 
-	.primary :global(.loader),
-	.midnight :global(.loader) {
+	.primary :global(.loader) {
 		color: var(--ui-accent);
 	}
 
@@ -213,8 +209,7 @@
 		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.accent-outline,
-	.pistachio-outline {
+	.accent-outline {
 		--badge-text-color: var(--ui-accent);
 		--badge-bg-color: initial;
 		--badge-border: 1px solid var(--ui-accent);
@@ -224,8 +219,7 @@
 		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.primary-outline,
-	.midnight-outline {
+	.primary-outline {
 		--badge-text-color: var(--ui-primary);
 		--badge-bg-color: initial;
 		--badge-border: 1px solid var(--ui-primary);
@@ -235,8 +229,7 @@
 		--badge-outline-color: var(--ui-accent-dark);
 	}
 
-	.tertiary,
-	.turquoise {
+	.tertiary {
 		--badge-text-color: black;
 		--badge-bg-color: var(--ui-tertiary);
 		--badge-hover-bg-color: var(--ui-tertiary-dark);

package/dist/ui/Button.svelte

@@ -217,8 +217,7 @@
 		}
 	}
 
-	.accent,
-	.pistachio {
+	.accent {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: var(--ui-accent);
 		--button-hover-bg-color: var(--ui-tertiary);
@@ -226,8 +225,7 @@
 		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.accent-outline,
-	.pistachio-outline {
+	.accent-outline {
 		--button-text-color: var(--ui-accent);
 		--button-bg-color: initial;
 		--button-border: 1px solid var(--ui-accent);
@@ -238,8 +236,7 @@
 		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.accent-subtle,
-	.pistachio-subtle {
+	.accent-subtle {
 		--button-text-color: var(--ui-accent);
 		--button-bg-color: initial;
 		--button-hover-text-color: var(--ui-primary);
@@ -249,16 +246,14 @@
 		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.primary,
-	.midnight {
+	.primary {
 		--button-bg-color: var(--ui-primary);
 		--button-text-color: white;
 		--button-hover-bg-color: var(--ui-accent-dark);
 		--button-active-bg-color: var(--ui-primary-dark);
 	}
 
-	.primary-outline,
-	.midnight-outline {
+	.primary-outline {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: initial;
 		--button-border: 1px solid var(--ui-primary);
@@ -268,8 +263,7 @@
 		--button-active-border: 1px solid var(--ui-primary-dark);
 	}
 
-	.primary-subtle,
-	.midnight-subtle {
+	.primary-subtle {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: initial;
 		--button-hover-text-color: white;
@@ -278,8 +272,7 @@
 		--button-active-bg-color: var(--ui-primary-dark);
 	}
 
-	.tertiary,
-	.turquoise {
+	.tertiary {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: var(--ui-tertiary);
 		--button-hover-bg-color: var(--ui-accent);
@@ -287,8 +280,7 @@
 		--button-outline-color: var(--ui-accent);
 	}
 
-	.tertiary-subtle,
-	.turquoise-subtle {
+	.tertiary-subtle {
 		background-color: initial;
 		color: var(--ui-tertiary-dark);
 

package/dist/ui/ButtonVariant.d.ts

@@ -5,11 +5,5 @@
  *   - `primary`   → `--ui-primary`   (dark brand colour)
  *   - `accent`    → `--ui-accent`    (light brand colour)
  *   - `tertiary`  → `--ui-tertiary`  (supporting colour)
- *
- * The `midnight`, `pistachio` and `turquoise` names are legacy aliases for
- * `primary`, `accent` and `tertiary` respectively. They keep working but new code
- * should use the semantic names.
  */
-export type ButtonVariant = 'white' | 'secondary' | 'secondary-subtle' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-outline' | 'accent-subtle' | 'tertiary' | 'tertiary-subtle' | 'shaded' | LegacyButtonVariant;
-/** @deprecated Use `primary`, `accent` and `tertiary` instead. */
-export type LegacyButtonVariant = 'pistachio' | 'pistachio-outline' | 'pistachio-subtle' | 'midnight' | 'midnight-outline' | 'midnight-subtle' | 'turquoise' | 'turquoise-subtle';
+export type ButtonVariant = 'white' | 'secondary' | 'secondary-subtle' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-outline' | 'accent-subtle' | 'tertiary' | 'tertiary-subtle' | 'shaded';

package/dist/ui/Dialog.svelte

@@ -1,3 +1,32 @@
+<script lang="ts" module>
+	// One lock shared by every instance so a nested dialog closing does not
+	// hand the page its scrollbar back while the parent is still open
+	let lockCount = 0;
+	let savedOverflow = '';
+	let savedPaddingRight = '';
+
+	function lockBodyScroll() {
+		if (lockCount++ > 0) return;
+		const body = document.body;
+		savedOverflow = body.style.overflow;
+		savedPaddingRight = body.style.paddingRight;
+		// Hiding the scrollbar widens the page and shifts everything sideways,
+		// which reads as a flicker behind the backdrop; pad by its width instead
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		if (scrollbarWidth > 0) {
+			const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+			body.style.paddingRight = `${current + scrollbarWidth}px`;
+		}
+		body.style.overflow = 'hidden';
+	}
+
+	function unlockBodyScroll() {
+		if (--lockCount > 0) return;
+		document.body.style.overflow = savedOverflow;
+		document.body.style.paddingRight = savedPaddingRight;
+	}
+</script>
+
 <script lang="ts">
 	import Paper from '../display/Paper.svelte';
 	import { iconX } from '../icon/index.js';
@@ -34,7 +63,7 @@
 		/** @deprecated Scrolling is now the default; use `allowOverflow` to opt out. */
 		preventOverflow?: boolean;
 		/** Size preset for the dialog width */
-		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+		size?: 'md' | 'lg' | 'xl' | 'full';
 		/** Additional CSS classes */
 		class?: string;
 		/** Footer content (typically action buttons) */
@@ -110,10 +139,8 @@
 	// Lock body scroll while open; effects only run in the browser, so this is SSR-safe
 	$effect(() => {
 		if (show) {
-			document.body.style.overflow = 'hidden';
-			return () => {
-				document.body.style.overflow = '';
-			};
+			lockBodyScroll();
+			return unlockBodyScroll;
 		}
 	});
 
@@ -142,12 +169,12 @@
 {#snippet DialogInner()}
 	{#if title}
 		<div class="dialog-title">
-			<span id={titleId} class="font-bold">{title}</span>
+			<span id={titleId} class="dialog-title-text">{title}</span>
 			{#if allowImplicitClose}
 				<ActionIcon
 					onclick={() => (show = false)}
 					variant="secondary-subtle"
-					class="flex !p-[0.3rem] mr-1 !leading-0"
+					class="dialog-close"
 					svg={iconX}
 					size="1rem"
 					ariaLabel="Close dialog"
@@ -182,8 +209,9 @@
 		{#if noPaper}
 			{@render DialogInner()}
 		{:else}
-			<div class="dialog-paper {overflowClass}">
-				<Paper containerClass={classes}>
+			<div class="dialog-paper">
+				<!-- Dialog owns the section padding so header and footer dividers span the card -->
+				<Paper containerClass={classes} noPadding noGap>
 					{@render DialogInner()}
 				</Paper>
 			</div>
@@ -192,66 +220,21 @@
 </dialog>
 
 <style>
-	/* Animate transform, not margin — the native dialog centers itself via
-	   `margin: auto`, and a margin animation with `forwards` fill would
-	   permanently override it and pin the dialog to the top of the viewport */
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: translateY(-0.5rem);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-	@keyframes fadeOut {
-		from {
-			opacity: 1;
-			transform: translateY(0);
-		}
-		to {
-			opacity: 0;
-			transform: translateY(-0.5rem);
-		}
-	}
-
-	@keyframes fadeInFull {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-	@keyframes fadeOutFull {
-		from {
-			opacity: 1;
-		}
-		to {
-			opacity: 0;
-		}
-	}
-
-	/* Keyframes for the backdrop pseudo-element */
-	@keyframes backdropFadeIn {
-		from {
-			background: hsl(0 0% 0% / 0%);
-		}
-		to {
-			background: hsl(0 0% 0% / 65%);
-		}
-	}
-	@keyframes backdropFadeOut {
-		from {
-			background: hsl(0 0% 0% / 65%);
-		}
-		to {
-			background: hsl(0 0% 0% / 0%);
-		}
-	}
-
+	/* Open/close is a transition driven by [open] plus @starting-style, not a
+	   keyframe animation. Keyframes with a `forwards` fill kept a transform
+	   applied while open, and the backdrop's static colour could paint for a
+	   frame before its animation took over, showing as a flash on open.
+	   Transitions have no fill state: the closed values are the base rule, the
+	   open values live on [open], and @starting-style supplies the from-values
+	   for the first frame after display switches on */
 	dialog {
+		/* Everything that shapes the box lives here, not on [open]: the close
+		   transition runs after [open] is removed, so rules scoped to it would
+		   drop out while the dialog is still fading. That includes the browser's
+		   own :modal positioning, which stops applying the moment close() runs */
+		position: fixed;
+		inset: 0;
+		flex-direction: column;
 		color: var(--text-color);
 		border: none;
 		/* The dialog element itself is focused by showModal(); don't draw a
@@ -260,7 +243,7 @@
 		background-color: transparent;
 		overflow: visible;
 		margin: auto;
-		max-width: min(calc(100vw - 2rem), calc(100% - 6px));
+		max-width: calc(100% - 2rem);
 		/* Cap to the visible viewport with equal margins; the flex chain below
 		   (dialog > inner > paper > body, each min-height: 0) passes this limit
 		   down so the body shrinks instead of spilling past the bottom edge.
@@ -269,22 +252,56 @@
 		max-height: calc(100vh - 2rem);
 		max-height: calc(100dvh - 2rem);
 
-		animation: fadeOut 0.2s forwards;
+		opacity: 0;
+		/* Animate transform, not margin: the native dialog centres itself via
+		   `margin: auto` */
+		transform: translateY(-0.5rem);
+		transition:
+			opacity 0.2s ease,
+			transform 0.2s ease,
+			display 0.2s allow-discrete,
+			overlay 0.2s allow-discrete;
+	}
+
+	dialog[open] {
+		/* Only when [open] — an unconditional author display would override
+		   the UA's display: none on closed dialogs and make them visible */
+		display: flex;
+		opacity: 1;
+		/* `none`, not translateY(0): a transform of any value makes the dialog
+		   the containing block for position: fixed descendants */
+		transform: none;
+	}
+
+	@starting-style {
+		dialog[open] {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+	}
+
+	dialog::backdrop {
+		background-color: rgb(0 0 0 / 0);
 		transition:
+			background-color 0.2s ease,
 			display 0.2s allow-discrete,
 			overlay 0.2s allow-discrete;
-		&::backdrop {
-			animation: backdropFadeOut 0.2s forwards;
+	}
+
+	dialog[open]::backdrop {
+		background-color: rgb(0 0 0 / 0.65);
+	}
+
+	@starting-style {
+		dialog[open]::backdrop {
+			background-color: rgb(0 0 0 / 0);
 		}
-		&[open] {
-			/* Only when [open] — an unconditional author display would override
-			   the UA's display: none on closed dialogs and make them visible */
-			display: flex;
-			flex-direction: column;
-			animation: fadeIn 0.2s forwards;
-			&::backdrop {
-				animation: backdropFadeIn 0.2s forwards;
-			}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		dialog,
+		dialog::backdrop {
+			transition-duration: 0.01ms;
 		}
 	}
 
@@ -294,36 +311,77 @@
 		min-height: 0;
 	}
 
-	/* Paper sits inside the height chain; .paper-body already has an inline
-	   min-height: 0, so only .paper needs the shrink link */
-	.dialog :global(.paper) {
+	/* Paper sits inside the height chain. Without a gap its body is a plain
+	   block, so make it a shrinkable flex column here; the sections below rely
+	   on that to give the body the leftover height */
+	.dialog :global(.paper),
+	.dialog :global(.paper-body) {
+		display: flex;
+		flex-direction: column;
 		min-height: 0;
 	}
 
+	/* Section padding: 1rem inset, 0.75rem vertical for the header and footer,
+	   1rem for the body. Dividers run edge to edge */
 	.dialog-title {
 		display: flex;
+		align-items: center;
 		justify-content: space-between;
-		margin-bottom: 0.5rem;
-		padding-bottom: 0.25rem;
+		gap: 0.75rem;
+		padding: 0.75rem 1rem;
 		border-bottom: 1px solid var(--border-color);
+		flex-shrink: 0;
+	}
+
+	.dialog-title-text {
+		font-size: 1.0625rem;
 		font-weight: 600;
+		line-height: 1.4;
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+
+	/* Keep the close button from setting the header height: its hit area
+	   overhangs the text line and the right inset instead */
+	.dialog-title :global(button.dialog-close) {
 		flex-shrink: 0;
+		padding: 0.25rem;
+		margin: -0.25rem -0.5rem -0.25rem 0;
+		line-height: 0;
 	}
 
+	/* The only scroll container. Padding lives inside it so focus rings and
+	   negative-margin rows are not clipped, and the scrollbar hugs the edge */
 	.dialog-body {
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
 		min-height: 0;
 		flex-shrink: 1;
+		padding: 1rem;
 	}
 
+	/* The body padding is the spacing; don't let the first and last elements
+	   (or a wrapper's first and last) add their own margins on top of it */
+	.dialog-body > :global(:first-child),
+	.dialog-body > :global(:first-child > :first-child) {
+		margin-top: 0;
+	}
+
+	.dialog-body > :global(:last-child),
+	.dialog-body > :global(:last-child > :last-child) {
+		margin-bottom: 0;
+	}
+
+	/* Actions align right. A secondary action can sit on the left with
+	   `margin-right: auto` */
 	.dialog-footer {
 		display: flex;
-		justify-content: space-between;
-		padding-top: 0.5rem;
-		border-top: 1px solid var(--border-color);
+		align-items: center;
+		justify-content: flex-end;
 		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border-top: 1px solid var(--border-color);
 		flex-shrink: 0;
 	}
 
@@ -335,31 +393,16 @@
 		overflow-y: auto;
 	}
 
-	.dialog-no-paper {
-		padding: 1rem;
-	}
-
 	.dialog-paper,
 	.dialog-no-paper {
 		display: flex;
 		flex-direction: column;
-		box-sizing: border-box;
-		border-radius: 0.25rem;
-		background: #f1f3f5;
 		min-height: 0;
 	}
 
-	:global(.dark .dialog-paper),
-	:global(.dark .dialog-no-paper) {
-		background-color: rgb(33, 34, 38);
-	}
-
-	dialog::backdrop {
-		background-color: #0008;
-	}
-
-	.dialog.sm {
-		width: 20rem;
+	.dialog-no-paper {
+		border-radius: 0.25rem;
+		background-color: var(--paper-body-bg);
 	}
 
 	.dialog.md {
@@ -379,11 +422,9 @@
 		max-width: 100%;
 		max-height: 100%;
 		margin-top: auto;
-		animation: fadeOutFull 0.2s forwards;
-
-		&[open] {
-			animation: fadeInFull 0.2s forwards;
-		}
+		/* Full-screen fades in place; more specific than the @starting-style
+		   rule above, so it wins for both the starting and the open state */
+		transform: none;
 	}
 
 	.dialog.full,

package/dist/ui/Dialog.svelte.d.ts

@@ -27,7 +27,7 @@ export interface DialogProps {
     /** @deprecated Scrolling is now the default; use `allowOverflow` to opt out. */
     preventOverflow?: boolean;
     /** Size preset for the dialog width */
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    size?: 'md' | 'lg' | 'xl' | 'full';
     /** Additional CSS classes */
     class?: string;
     /** Footer content (typically action buttons) */

package/dist/ui/ProgressBar.svelte

@@ -132,20 +132,17 @@
 	}
 
 	/* Variant colors */
-	.primary,
-	.midnight {
+	.primary {
 		background-color: var(--ui-primary);
 		color: #fff;
 	}
 
-	.accent,
-	.pistachio {
+	.accent {
 		background-color: var(--ui-accent);
 		color: var(--ui-primary);
 	}
 
-	.tertiary,
-	.turquoise {
+	.tertiary {
 		background-color: var(--ui-tertiary);
 		color: var(--ui-primary);
 	}

package/dist/ui/ProgressBarVariant.d.ts

@@ -1,7 +1,2 @@
-/**
- * Colour variants for ProgressBar. `midnight`, `pistachio` and `turquoise` are
- * legacy aliases for `primary`, `accent` and `tertiary`.
- */
-export type ProgressBarVariant = 'primary' | 'accent' | 'tertiary' | 'danger' | 'secondary' | LegacyProgressBarVariant;
-/** @deprecated Use `primary`, `accent` and `tertiary` instead. */
-export type LegacyProgressBarVariant = 'midnight' | 'pistachio' | 'turquoise';
+/** Colour variants for ProgressBar, named after the `--ui-*` tokens. */
+export type ProgressBarVariant = 'primary' | 'accent' | 'tertiary' | 'danger' | 'secondary';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",