@dryui/ui 1.7.4 → 1.8.0

package/dist/button/button.svelte

@@ -26,11 +26,15 @@
 			| 'pill';
 		size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
 		// Autocomplete still suggests the canonical values via the literal union.
-		color?: 'primary' | 'danger' | (string & {}) | null;
+		// 'ink' renders a solid near-black editorial CTA in light theme that auto-inverts
+		// (light bg, dark text) in dark theme, using --dry-color-{bg,text}-inverse tokens.
+		color?: 'primary' | 'danger' | 'ink' | (string & {}) | null;
 		href?: string;
 		rel?: string;
 		target?: string;
 		download?: boolean | string;
+		/** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
+		className?: HTMLButtonAttributes['class'];
 		/** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
 		ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
 		children: Snippet;
@@ -52,7 +56,8 @@
 		download,
 		type = 'button',
 		onclick,
-		class: className,
+		class: classAttr,
+		className = classAttr,
 		ref,
 		children,
 		...rest
@@ -451,6 +456,30 @@
 		--_dry-btn-on-accent: var(--dry-btn-on-accent, var(--dry-color-on-error));
 	}
 
+	/* ── Ink: editorial "download / primary CTA" preset.
+	   Uses the semantic `inverse` tokens so the surface flips between themes:
+	   light theme → near-black bg + white text; dark theme → white bg + near-black
+	   text. Any consumer token override (--dry-btn-bg etc.) still wins because the
+	   variant styles read from the public layer first. */
+	:is(a, button)[data-color='ink'] {
+		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-bg-inverse));
+		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-inverse));
+		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-strong));
+		--_dry-btn-accent-weak: var(
+			--dry-btn-accent-weak,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 10%, transparent)
+		);
+		--_dry-btn-accent-hover: var(
+			--dry-btn-accent-hover,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 85%, transparent)
+		);
+		--_dry-btn-accent-active: var(
+			--dry-btn-accent-active,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 75%, transparent)
+		);
+		--_dry-btn-on-accent: var(--dry-btn-on-accent, var(--dry-color-text-inverse));
+	}
+
 	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
 
 	:is(a, button)[data-size='sm'] {

package/dist/button/button.svelte.d.ts

@@ -3,11 +3,13 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'color'> {
     variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare' | 'trigger' | 'nav' | 'tab' | 'toggle' | 'pill';
     size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
-    color?: 'primary' | 'danger' | (string & {}) | null;
+    color?: 'primary' | 'danger' | 'ink' | (string & {}) | null;
     href?: string;
     rel?: string;
     target?: string;
     download?: boolean | string;
+    /** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
+    className?: HTMLButtonAttributes['class'];
     /** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
     ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
     children: Snippet;

package/dist/button/index.d.ts

@@ -1,10 +1,12 @@
 import type { ButtonProps as PrimitiveButtonProps } from '@dryui/primitives';
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare' | 'trigger' | 'nav' | 'tab' | 'toggle' | 'pill';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
-export type ButtonColor = 'primary' | 'danger' | (string & {}) | null;
+export type ButtonColor = 'primary' | 'danger' | 'ink' | (string & {}) | null;
 export interface ButtonProps extends Omit<PrimitiveButtonProps, 'color'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     color?: ButtonColor;
+    /** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
+    className?: string;
 }
 export { default as Button } from './button.svelte';

package/dist/chip-group/chip-group-label.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<span data-chip-group-label class={className} {...rest}>
+	{@render children()}
+</span>
+
+<style>
+	[data-chip-group-label] {
+		display: inline-block;
+		font-size: var(--dry-chip-group-label-size, var(--dry-type-tiny-size, var(--dry-text-xs-size)));
+		font-weight: var(--dry-chip-group-label-weight, 600);
+		letter-spacing: var(--dry-chip-group-label-tracking, 0.1em);
+		line-height: var(--dry-chip-group-label-leading, 1.2);
+		text-transform: uppercase;
+		color: var(--dry-chip-group-label-color, var(--dry-color-text-weak));
+	}
+</style>

package/dist/chip-group/chip-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    children: Snippet;
+}
+declare const ChipGroupLabel: import("svelte").Component<Props, {}, "">;
+type ChipGroupLabel = ReturnType<typeof ChipGroupLabel>;
+export default ChipGroupLabel;

package/dist/chip-group/chip-group-root.svelte

@@ -10,6 +10,8 @@
 		disabled?: boolean;
 		orientation?: 'horizontal' | 'vertical';
 		size?: 'sm' | 'md';
+		gap?: 'sm' | 'md' | 'lg';
+		justify?: 'start' | 'center' | 'end' | 'between';
 		children: Snippet;
 	}
 
@@ -19,6 +21,8 @@
 		disabled = false,
 		orientation = 'horizontal',
 		size = 'sm',
+		gap = 'md',
+		justify = 'start',
 		class: className,
 		children,
 		...rest
@@ -52,7 +56,7 @@
 <div
 	role="group"
 	data-chip-group
-	{...variantAttrs({ orientation, size })}
+	{...variantAttrs({ orientation, size, gap, justify })}
 	class={className}
 	{...rest}
 >
@@ -60,21 +64,55 @@
 </div>
 
 <style>
+	/*
+	 * ChipGroup wraps tag/chip clusters with content-driven flow.
+	 * This is the sanctioned home for flex-wrap: the `[data-chip-group]`
+	 * attribute is carved out of `dryui/no-flex` so chip/tag wrapping
+	 * reads naturally without grid hacks.
+	 */
 	[data-chip-group] {
-		display: inline-grid;
-		grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
-		gap: var(--dry-space-2);
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--dry-chip-group-gap, var(--dry-space-2));
 	}
 
-	[data-chip-group][data-orientation='horizontal'] {
-		grid-auto-flow: column;
+	[data-chip-group][data-orientation='vertical'] {
+		flex-direction: column;
+		align-items: flex-start;
 	}
 
-	[data-chip-group][data-orientation='vertical'] {
-		grid-template-columns: 1fr;
-		justify-items: start;
+	/* Gap presets — map onto --dry-space tokens. */
+	[data-chip-group][data-gap='sm'] {
+		--dry-chip-group-gap: var(--dry-space-1);
+	}
+
+	[data-chip-group][data-gap='md'] {
+		--dry-chip-group-gap: var(--dry-space-2);
+	}
+
+	[data-chip-group][data-gap='lg'] {
+		--dry-chip-group-gap: var(--dry-space-3);
+	}
+
+	/* Justify presets. */
+	[data-chip-group][data-justify='start'] {
+		justify-content: flex-start;
+	}
+
+	[data-chip-group][data-justify='center'] {
+		justify-content: center;
+	}
+
+	[data-chip-group][data-justify='end'] {
+		justify-content: flex-end;
+	}
+
+	[data-chip-group][data-justify='between'] {
+		justify-content: space-between;
 	}
 
+	/* Size presets retained for backward-compatible Item styling. */
 	[data-chip-group][data-size='sm'] {
 		--dry-chip-group-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
 		--dry-chip-group-padding-x: var(--dry-space-2_5);

package/dist/chip-group/chip-group-root.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
     size?: 'sm' | 'md';
+    gap?: 'sm' | 'md' | 'lg';
+    justify?: 'start' | 'center' | 'end' | 'between';
     children: Snippet;
 }
 declare const ChipGroupRoot: import("svelte").Component<Props, {}, "value">;

package/dist/chip-group/index.d.ts

@@ -1,11 +1,14 @@
-import type { ChipGroupRootProps as PrimitiveChipGroupRootProps } from '@dryui/primitives';
+import type { ChipGroupRootProps as PrimitiveChipGroupRootProps, ChipGroupLabelProps as PrimitiveChipGroupLabelProps } from '@dryui/primitives';
 export type { ChipGroupItemProps } from '@dryui/primitives';
 export interface ChipGroupRootProps extends PrimitiveChipGroupRootProps {
     size?: 'sm' | 'md';
 }
+export type ChipGroupLabelProps = PrimitiveChipGroupLabelProps;
 import ChipGroupRoot from './chip-group-root.svelte';
 import ChipGroupItem from './chip-group-button-item.svelte';
+import ChipGroupLabel from './chip-group-label.svelte';
 export declare const ChipGroup: {
     Root: typeof ChipGroupRoot;
     Item: typeof ChipGroupItem;
+    Label: typeof ChipGroupLabel;
 };

package/dist/chip-group/index.js

@@ -1,6 +1,8 @@
 import ChipGroupRoot from './chip-group-root.svelte';
 import ChipGroupItem from './chip-group-button-item.svelte';
+import ChipGroupLabel from './chip-group-label.svelte';
 export const ChipGroup = {
     Root: ChipGroupRoot,
-    Item: ChipGroupItem
+    Item: ChipGroupItem,
+    Label: ChipGroupLabel
 };

package/dist/heading/heading.svelte

@@ -6,6 +6,7 @@
 	interface Props extends HTMLAttributes<HTMLHeadingElement> {
 		level?: 1 | 2 | 3 | 4 | 5 | 6;
 		variant?: 'default' | 'display';
+		maxMeasure?: 'narrow' | 'default' | 'wide' | false;
 		className?: HTMLAttributes<HTMLHeadingElement>['class'];
 		children: Snippet;
 	}
@@ -13,35 +14,40 @@
 	let {
 		level = 2,
 		variant = 'default',
+		maxMeasure = false,
 		class: classAttr,
 		className = classAttr,
 		children,
 		...rest
 	}: Props = $props();
+
+	let measure: 'narrow' | 'default' | 'wide' | undefined = $derived(
+		maxMeasure === false ? undefined : maxMeasure
+	);
 </script>
 
 {#if level === 1}
-	<h1 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h1 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
-	<h2 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h2 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
-	<h3 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h3 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
-	<h4 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h4 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
-	<h5 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h5 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
-	<h6 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h6 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h6>
 {/if}
@@ -93,8 +99,24 @@
 	}
 
 	[data-variant='display'] {
+		font-family: var(--dry-font-display, var(--dry-font-sans));
 		font-size: var(--dry-type-display-size, var(--dry-text-4xl-size, 2.25rem));
 		line-height: var(--dry-type-display-leading, 4rem);
 		letter-spacing: -0.04em;
 	}
+
+	/* ── Measure (max-inline-size) ─────────────────────────────────────────────
+	   ch-unit measure tracks text content, not viewport layout. Editorial
+	   headlines wrap at narrow widths (~22ch) for rhythm. */
+	[data-measure='narrow'] {
+		max-inline-size: 22ch;
+	}
+
+	[data-measure='default'] {
+		max-inline-size: 45ch;
+	}
+
+	[data-measure='wide'] {
+		max-inline-size: 65ch;
+	}
 </style>

package/dist/heading/heading.svelte.d.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: 'default' | 'display';
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLHeadingElement>['class'];
     children: Snippet;
 }

package/dist/heading/index.d.ts

@@ -3,6 +3,12 @@ import type { HTMLAttributes } from 'svelte/elements';
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: 'default' | 'display';
+    /**
+     * Caps the rendered inline size in ch units so editorial headlines wrap on
+     * ergonomic measure. `false` (default) keeps the existing behaviour of no
+     * cap. `narrow` ≈ 22ch, `default` ≈ 45ch, `wide` ≈ 65ch.
+     */
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLHeadingElement>['class'];
     children: Snippet;
 }

package/dist/index.d.ts

@@ -221,7 +221,7 @@ export type { ButtonGroupProps } from './button-group/index.js';
 export { Chip } from './chip/index.js';
 export type { ChipProps, ChipColor } from './chip/index.js';
 export { ChipGroup } from './chip-group/index.js';
-export type { ChipGroupRootProps, ChipGroupItemProps } from './chip-group/index.js';
+export type { ChipGroupRootProps, ChipGroupItemProps, ChipGroupLabelProps } from './chip-group/index.js';
 export { Carousel } from './carousel/index.js';
 export type { CarouselRootProps, CarouselViewportProps, CarouselSlideProps, CarouselPrevProps, CarouselNextProps, CarouselDotsProps } from './carousel/index.js';
 export { FormatBytes } from './format-bytes/index.js';

package/dist/text/index.d.ts

@@ -7,6 +7,12 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     font?: 'sans' | 'mono';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     variant?: 'default' | 'label';
+    /**
+     * Caps the rendered inline size in ch units so body copy wraps on ergonomic
+     * measure. `false` (default) keeps the existing behaviour of no cap.
+     * `narrow` ≈ 48ch, `default` ≈ 65ch, `wide` ≈ 80ch.
+     */
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLElement>['class'];
     children: Snippet;
 }

package/dist/text/text.svelte

@@ -10,6 +10,7 @@
 		font?: 'sans' | 'mono';
 		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
 		variant?: 'default' | 'label';
+		maxMeasure?: 'narrow' | 'default' | 'wide' | false;
 		className?: HTMLAttributes<HTMLElement>['class'];
 		children: Snippet;
 	}
@@ -21,23 +22,28 @@
 		font = 'sans',
 		weight,
 		variant = 'default',
+		maxMeasure = false,
 		class: classAttr,
 		className = classAttr,
 		children,
 		...rest
 	}: Props = $props();
+
+	let measure: 'narrow' | 'default' | 'wide' | undefined = $derived(
+		maxMeasure === false ? undefined : maxMeasure
+	);
 </script>
 
 {#if as === 'span'}
 	<span
 		class={className}
-		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}>{@render children()}</span
 	>
 {:else if as === 'div'}
 	<div
 		class={className}
-		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}
 	>
 		{@render children()}
@@ -45,7 +51,7 @@
 {:else}
 	<p
 		class={className}
-		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}
 	>
 		{@render children()}
@@ -132,4 +138,19 @@
 		letter-spacing: 0.05em;
 		font-weight: 600;
 	}
+
+	/* ── Measure (max-inline-size) ─────────────────────────────────────────────
+	   Body copy gets wider presets than Heading so paragraphs read well
+	   without feeling cramped. */
+	[data-measure='narrow'] {
+		max-inline-size: 48ch;
+	}
+
+	[data-measure='default'] {
+		max-inline-size: 65ch;
+	}
+
+	[data-measure='wide'] {
+		max-inline-size: 80ch;
+	}
 </style>

package/dist/text/text.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     font?: 'sans' | 'mono';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     variant?: 'default' | 'label';
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLElement>['class'];
     children: Snippet;
 }

package/dist/themes/dark.css

@@ -217,7 +217,15 @@
 	--dry-grain-blend: soft-light;
 }
 
-.theme-auto {
+/* When `.theme-auto` is combined with `data-theme="light"`, the explicit
+   `data-theme` wins — do NOT apply dark tokens under that combo, even on a
+   dark-preferring OS. Without this guard, `<html class="theme-auto" data-theme="light">`
+   on a dark OS would still resolve to dark tokens because the media query
+   below fires regardless of the attribute. Explicit `data-theme="dark"` is
+   already handled by the rule above; this class only drives the system-aware
+   auto behaviour when no explicit override is present (or when the override is
+   explicitly dark). */
+.theme-auto:not([data-theme='light']) {
 	@media (prefers-color-scheme: dark) {
 		& {
 			/* ─── Neutral ─────────────────────────────────────────────────── */

package/dist/typography/heading.svelte

@@ -5,12 +5,13 @@
 	let {
 		level = 2,
 		variant = 'default',
+		maxMeasure = false,
 		class: className,
 		children,
 		...rest
 	}: HeadingProps = $props();
 </script>
 
-<Heading {level} {variant} {className} {...rest}>
+<Heading {level} {variant} {maxMeasure} {className} {...rest}>
 	{@render children()}
 </Heading>

package/dist/typography/text.svelte

@@ -9,6 +9,7 @@
 		size = 'md',
 		font = 'sans',
 		weight,
+		maxMeasure = false,
 		class: className,
 		children,
 		...rest
@@ -20,6 +21,16 @@
 	let textVariant: 'default' | 'label' = $derived(variant === 'label' ? 'label' : 'default');
 </script>
 
-<Text {as} color={tone} {size} {font} {weight} variant={textVariant} {className} {...rest}>
+<Text
+	{as}
+	color={tone}
+	{size}
+	{font}
+	{weight}
+	variant={textVariant}
+	{maxMeasure}
+	{className}
+	{...rest}
+>
 	{@render children()}
 </Text>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -784,13 +784,13 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.7.4"
+    "@dryui/primitives": "^1.8.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.4"
   },
   "devDependencies": {
-    "@dryui/lint": "^0.4.3",
+    "@dryui/lint": "^0.5.0",
     "svelte": "^5.55.4",
     "@sveltejs/package": "^2.5.7",
     "svelte-check": "^4.4.6",

package/skills/dryui/rules/theming.md

@@ -159,6 +159,26 @@ Force a specific theme:
 
 Use `data-theme="light"` for the inverse.
 
+### Option B.1: Light-only sites
+
+For a site that should always render light (brand / marketing / docs), combine
+both attributes on `<html>`:
+
+```html
+<html class="theme-auto" data-theme="light"></html>
+```
+
+- `data-theme="light"` pins the page to light tokens even on a dark-preferring
+  OS. The `.theme-auto` dark block is guarded with
+  `:not([data-theme='light'])`, so a dark OS cannot silently override your
+  light design.
+- `class="theme-auto"` stays so an opt-in dark toggle (flipping `data-theme`
+  to `"dark"`) keeps working. Drop `theme-auto` entirely only if you never
+  want a dark pathway, and the explicit `data-theme='dark']` rule is enough
+  on its own.
+
+Use `ask --scope recipe "light only"` for the full scaffold.
+
 ### Option C: Persisted theme toggle
 
 If you add a theme switcher, keep system mode as the default and only store explicit user choices: