@dryui/ui 1.5.1 → 1.7.0

package/dist/typography/heading.svelte

@@ -1,92 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { variantAttrs } from '@dryui/primitives';
-
-	interface Props extends HTMLAttributes<HTMLHeadingElement> {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-		variant?: 'default' | 'display';
-		children: Snippet;
-	}
-
-	let { level = 2, variant = 'default', class: className, children, ...rest }: Props = $props();
+	import type { HeadingProps } from './index.js';
+	import Heading from '../heading/heading.svelte';
+
+	let {
+		level = 2,
+		variant = 'default',
+		class: className,
+		children,
+		...rest
+	}: HeadingProps = $props();
 </script>
 
-{#if level === 1}
-	<h1 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h1>
-{:else if level === 2}
-	<h2 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h2>
-{:else if level === 3}
-	<h3 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h3>
-{:else if level === 4}
-	<h4 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h4>
-{:else if level === 5}
-	<h5 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h5>
-{:else}
-	<h6 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h6>
-{/if}
-
-<style>
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		margin: 0;
-		color: var(--dry-typography-heading-color, var(--dry-color-text-strong));
-		font-family: var(--dry-font-sans);
-		font-weight: 700;
-		line-height: var(--dry-type-heading-2-leading, 2.5rem);
-		letter-spacing: -0.03em;
-		text-wrap: balance;
-	}
-
-	[data-level='1'] {
-		font-size: var(--dry-type-heading-1-size, var(--dry-text-4xl-size, 2.25rem));
-		line-height: var(--dry-type-heading-1-leading, 3rem);
-	}
-
-	[data-level='2'] {
-		font-size: var(--dry-type-heading-2-size, var(--dry-text-3xl-size, 1.875rem));
-		line-height: var(--dry-type-heading-2-leading, 2.5rem);
-	}
-
-	[data-level='3'] {
-		font-size: var(--dry-type-heading-3-size, var(--dry-text-2xl-size, 1.5rem));
-		line-height: var(--dry-type-heading-3-leading, 2rem);
-	}
-
-	[data-level='4'] {
-		font-size: var(--dry-type-heading-4-size, var(--dry-text-xl-size, 1.25rem));
-		line-height: var(--dry-type-heading-4-leading, 1.75rem);
-	}
-
-	[data-level='5'] {
-		font-size: var(--dry-type-small-size, var(--dry-text-lg-size, 1.125rem));
-		line-height: var(--dry-type-small-leading, 1.5rem);
-	}
-
-	[data-level='6'] {
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		line-height: var(--dry-type-tiny-leading, 1.25rem);
-	}
-
-	[data-variant='display'] {
-		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;
-	}
-</style>
+<Heading {level} {variant} {className} {...rest}>
+	{@render children()}
+</Heading>

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

@@ -1,10 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLHeadingElement> {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    variant?: 'default' | 'display';
-    children: Snippet;
-}
-declare const Heading: import("svelte").Component<Props, {}, "">;
+import type { HeadingProps } from './index.js';
+import Heading from '../heading/heading.svelte';
+declare const Heading: import("svelte").Component<HeadingProps, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

package/dist/typography/index.d.ts

@@ -1,12 +1,13 @@
-import type { HeadingProps as PrimitiveHeadingProps, TextProps as PrimitiveTextProps } from '@dryui/primitives';
-export interface HeadingProps extends PrimitiveHeadingProps {
-    variant?: 'default' | 'display';
-}
+import type { TextProps as SharedTextProps } from '../text/index.js';
+export type { HeadingProps } from '../heading/index.js';
 export type { CodeProps, BlockquoteProps } from '@dryui/primitives';
-export interface TextProps extends PrimitiveTextProps {
+export interface TextProps extends Omit<SharedTextProps, 'color' | 'variant'> {
     color?: 'default' | 'muted' | 'secondary';
-    variant?: 'default' | 'muted' | 'secondary';
-    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'muted' | 'secondary' | 'label';
+    size?: SharedTextProps['size'];
+    font?: SharedTextProps['font'];
+    weight?: SharedTextProps['weight'];
+    className?: SharedTextProps['className'];
 }
 import TypographyHeading from './heading.svelte';
 import TypographyText from './text.svelte';

package/dist/typography/text.svelte

@@ -1,97 +1,25 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { variantAttrs } from '@dryui/primitives';
-
-	interface Props extends HTMLAttributes<HTMLElement> {
-		as?: 'p' | 'span' | 'div';
-		color?: 'default' | 'muted' | 'secondary';
-		variant?: 'default' | 'muted' | 'secondary';
-		size?: 'sm' | 'md' | 'lg';
-		children: Snippet;
-	}
+	import type { TextProps } from './index.js';
+	import Text from '../text/text.svelte';
 
 	let {
 		as = 'p',
 		color,
 		variant,
 		size = 'md',
+		font = 'sans',
+		weight,
 		class: className,
 		children,
 		...rest
-	}: Props = $props();
+	}: TextProps = $props();
 
-	let tone = $derived(color ?? variant ?? 'default');
+	let tone: TextProps['color'] = $derived(
+		color ?? (variant === 'muted' || variant === 'secondary' ? variant : 'default')
+	);
+	let textVariant: 'default' | 'label' = $derived(variant === 'label' ? 'label' : 'default');
 </script>
 
-{#if as === 'span'}
-	<span class={className} {...variantAttrs({ as, color: tone, size })} {...rest}
-		>{@render children()}</span
-	>
-{:else if as === 'div'}
-	<div class={className} {...variantAttrs({ as, color: tone, size })} {...rest}>
-		{@render children()}
-	</div>
-{:else}
-	<p class={className} {...variantAttrs({ as, color: tone, size })} {...rest}>
-		{@render children()}
-	</p>
-{/if}
-
-<style>
-	p,
-	span,
-	div {
-		margin: 0;
-		color: var(--dry-typography-text-color, var(--dry-color-text-strong));
-		font-family: var(--dry-font-sans);
-		line-height: 1.7;
-	}
-
-	[data-color='muted'] {
-		--dry-typography-text-color: var(--dry-color-text-weak);
-	}
-
-	[data-color='secondary'] {
-		--dry-typography-text-color: var(--dry-color-text-weak);
-	}
-
-	[data-size='xs'] {
-		font-size: var(--dry-type-xs-size);
-	}
-
-	[data-size='sm'] {
-		font-size: var(--dry-type-ui-control-size, var(--dry-type-tiny-size, var(--dry-text-sm-size)));
-		line-height: var(
-			--dry-type-ui-control-leading,
-			var(--dry-type-tiny-leading, var(--dry-text-sm-leading))
-		);
-	}
-
-	[data-size='md'] {
-		font-size: var(--dry-type-ui-body-size, var(--dry-type-small-size, var(--dry-text-base-size)));
-		line-height: var(
-			--dry-type-ui-body-leading,
-			var(--dry-type-small-leading, var(--dry-text-base-leading))
-		);
-	}
-
-	[data-size='lg'] {
-		font-size: var(
-			--dry-type-ui-title-size,
-			var(--dry-type-heading-4-size, var(--dry-text-lg-size))
-		);
-		line-height: var(
-			--dry-type-ui-title-leading,
-			var(--dry-type-heading-4-leading, var(--dry-text-lg-leading))
-		);
-	}
-
-	[data-as='span'] {
-		display: inline;
-	}
-
-	[data-as='div'] {
-		display: block;
-	}
-</style>
+<Text {as} color={tone} {size} {font} {weight} variant={textVariant} {className} {...rest}>
+	{@render children()}
+</Text>

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

@@ -1,12 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLElement> {
-    as?: 'p' | 'span' | 'div';
-    color?: 'default' | 'muted' | 'secondary';
-    variant?: 'default' | 'muted' | 'secondary';
-    size?: 'sm' | 'md' | 'lg';
-    children: Snippet;
-}
-declare const Text: import("svelte").Component<Props, {}, "">;
+import type { TextProps } from './index.js';
+import Text from '../text/text.svelte';
+declare const Text: import("svelte").Component<TextProps, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/video-embed/video-embed-button.svelte

@@ -166,10 +166,11 @@
 		height: var(--dry-video-embed-play-size);
 		aspect-ratio: 1;
 		filter: drop-shadow(0 2px 8px rgb(15 23 42 / 0.3));
+		transform: translateX(1px);
 		transition: transform var(--dry-duration-normal) var(--dry-ease-default);
 	}
 
 	.play-btn-slot:hover [data-part='play-icon'] {
-		transform: scale(1.1);
+		transform: translateX(1px) scale(1.1);
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -680,6 +680,11 @@
       "svelte": "./dist/textarea/index.js",
       "default": "./dist/textarea/index.js"
     },
+    "./theme-toggle": {
+      "types": "./dist/theme-toggle/index.d.ts",
+      "svelte": "./dist/theme-toggle/index.js",
+      "default": "./dist/theme-toggle/index.js"
+    },
     "./time-input": {
       "types": "./dist/time-input/index.d.ts",
       "svelte": "./dist/time-input/index.js",
@@ -779,7 +784,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.5.1"
+    "@dryui/primitives": "^1.7.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"

package/skills/dryui/SKILL.md

@@ -85,6 +85,19 @@ The test: does your CSS contain zero hex colors, zero `rgb()` values, and zero i
 
 The test: grep your output for `display: flex`, `style=`, `@media` — all should return nothing.
 
+## 4A. Escape Hatches Mean Stop.
+
+**If lint or the compiler pushes you toward an escape hatch, the structure is usually wrong.**
+
+- Never add `:global()`, `!important`, `all: unset`, `<svelte:element>`, or `<!-- svelte-ignore ... -->` just to make a selector or warning go away
+- Never add `width`, `min-width`, `max-width`, `inline-size`, `min-inline-size`, or `max-inline-size` to solve layout pressure
+- Never use raw native elements outside their canonical DryUI component directories just because composition feels inconvenient
+- Never pass `class=` to DryUI components expecting it to style their internals; use wrapper elements, component props, `data-*` attributes, or `--dry-*` tokens instead
+- When blocked, restructure the markup instead: add a local wrapper, split explicit `{#if}` branches, move sizing to parent grid tracks, or promote the pattern into the canonical component where the raw element belongs
+- Treat `dryui/no-global`, `dryui/no-important`, `dryui/no-width`, `dryui/no-raw-native-element`, `dryui/no-css-ignore`, and `dryui/no-svelte-element` as design feedback, not obstacles to suppress
+
+The test: grep your output for `:global(`, `!important`, `all: unset`, `svelte-ignore`, `svelte:element`, raw `<button`, raw `<input`, raw `<select`, raw `<dialog`, raw `<hr`, raw `<table`, and `width:` — all should return nothing unless you are editing the canonical component that owns that native element.
+
 ## 5. Every Input Gets a Field.Root
 
 **Accessibility isn't optional.**
@@ -215,7 +228,7 @@ Use these to look up APIs, discover components, plan setup, and validate code.
 
 1. `dryui info <Component>` or `dryui compose "<query>"` before writing so you confirm kind, required parts, bindables, and canonical usage. If MCP is available, `ask --scope component` and `ask --scope recipe` are the equivalent surface.
 2. Build the route or component with raw CSS grid, `Container` for constrained width, and `@container` for responsive layout.
-3. `dryui review`, `dryui diagnose`, or `dryui doctor` after implementation to catch composition drift, layout violations, and accessibility regressions. If MCP is available, `check` is the equivalent surface.
+3. Run `check` if DryUI MCP is available after implementation to catch composition drift, layout violations, and accessibility regressions. Without MCP, rely on the `@dryui/lint` preprocessor plus the project's normal build and test commands.
 4. Never guess component shape from memory. DryUI is intentionally strict, and the lookup cost is lower than rework.
 
 ### CLI (default entry point)
@@ -230,11 +243,11 @@ dryui info <component>          # Look up component API
 dryui compose "date input"      # Composition guidance
 dryui detect [path]             # Check project setup
 dryui install [path]            # Print install plan
-dryui review <file.svelte>      # Validate component
-dryui diagnose <file.css>       # Validate theme CSS
-dryui doctor [path]             # Audit workspace
-dryui lint [path]               # Deterministic findings
 dryui list                      # List components
+dryui tokens --category color   # Browse design tokens
+dryui ambient                   # SessionStart context
+dryui install-hook --dry-run    # Preview Claude hook wiring
+dryui feedback init             # Feedback tooling setup
 ```
 
 Without a global install, prefix any command with `bunx @dryui/cli …` or `npx -y @dryui/cli …` — same behaviour, just slower (re-fetches on each call).

package/skills/dryui/rules/composition.md

@@ -457,7 +457,7 @@ DryUI is a presentation and accessibility system, not a workflow engine. For dep
 - Normalize route/session state in script before rendering DryUI inputs.
 - Reset dependent `Select.Root` values when their parent choice changes; do not rely on stale child state surviving domain changes.
 - Use raw CSS grid to lay out planner sections, and keep orchestration logic in route-level stores or derived state.
-- Run `dryui info <Component>` or `dryui compose "<pattern>"` before introducing a new field shape, then run `dryui review` or `dryui doctor` after the flow is wired. If MCP is available, `ask` / `check` are equivalent.
+- Run `dryui info <Component>` or `dryui compose "<pattern>"` before introducing a new field shape, then use MCP `check` if it is available after the flow is wired. Without MCP, rely on the `@dryui/lint` preprocessor plus the project's normal build and test commands.
 
 ```svelte
 <script lang="ts">

package/skills/dryui/rules/theming.md

@@ -268,10 +268,9 @@ Ensure sufficient contrast between text and background.
 
 ## Validating Theme CSS
 
-Run `dryui diagnose <theme.css>` to catch theme issues. If MCP is available, `check <theme.css>` is equivalent:
+Use `check <theme.css>` when DryUI MCP is available to catch theme issues. Without MCP, validate by rebuilding the app with `@dryui/lint` wired and checking the resulting diagnostics:
 
 ```bash
-dryui diagnose src/styles/global.css
 check src/styles/global.css
 ```