@dryui/ui 1.5.1 → 1.6.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.5.1",
+  "version": "1.6.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.6.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
 ```