@placeholderco/placeholder-ui 2.2.0 → 2.2.1

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

@@ -34,7 +34,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) */
@@ -142,12 +142,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 +182,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>
@@ -260,7 +261,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.
@@ -294,36 +295,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,33 +377,22 @@
 		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-no-paper {
+		border-radius: 0.25rem;
+		background-color: var(--paper-body-bg);
 	}
 
 	dialog::backdrop {
 		background-color: #0008;
 	}
 
-	.dialog.sm {
-		width: 20rem;
-	}
-
 	.dialog.md {
 		width: 30rem;
 	}

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.1",
   "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",