@dryui/ui 0.2.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -216,6 +216,11 @@
       "svelte": "./dist/description-list/index.js",
       "default": "./dist/description-list/index.js"
     },
+    "./diagram": {
+      "types": "./dist/diagram/index.d.ts",
+      "svelte": "./dist/diagram/index.js",
+      "default": "./dist/diagram/index.js"
+    },
     "./dialog": {
       "types": "./dist/dialog/index.d.ts",
       "svelte": "./dist/dialog/index.js",
@@ -626,11 +631,6 @@
       "svelte": "./dist/svg/index.js",
       "default": "./dist/svg/index.js"
     },
-    "./system-map": {
-      "types": "./dist/system-map/index.d.ts",
-      "svelte": "./dist/system-map/index.js",
-      "default": "./dist/system-map/index.js"
-    },
     "./table": {
       "types": "./dist/table/index.d.ts",
       "svelte": "./dist/table/index.js",
@@ -666,11 +666,6 @@
       "svelte": "./dist/textarea/index.js",
       "default": "./dist/textarea/index.js"
     },
-    "./thumbnail": {
-      "types": "./dist/thumbnail/index.d.ts",
-      "svelte": "./dist/thumbnail/index.js",
-      "default": "./dist/thumbnail/index.js"
-    },
     "./time-input": {
       "types": "./dist/time-input/index.d.ts",
       "svelte": "./dist/time-input/index.js",
@@ -753,8 +748,11 @@
     },
     "./*/*": null,
     "./internal/*": null,
+    "./themes/aurora.css": "./dist/themes/aurora.css",
     "./themes/dark.css": "./dist/themes/dark.css",
-    "./themes/default.css": "./dist/themes/default.css"
+    "./themes/default.css": "./dist/themes/default.css",
+    "./themes/midnight.css": "./dist/themes/midnight.css",
+    "./themes/terminal.css": "./dist/themes/terminal.css"
   },
   "publishConfig": {
     "access": "public",
@@ -961,6 +959,11 @@
         "svelte": "./dist/description-list/index.js",
         "default": "./dist/description-list/index.js"
       },
+      "./diagram": {
+        "types": "./dist/diagram/index.d.ts",
+        "svelte": "./dist/diagram/index.js",
+        "default": "./dist/diagram/index.js"
+      },
       "./dialog": {
         "types": "./dist/dialog/index.d.ts",
         "svelte": "./dist/dialog/index.js",
@@ -1371,11 +1374,6 @@
         "svelte": "./dist/svg/index.js",
         "default": "./dist/svg/index.js"
       },
-      "./system-map": {
-        "types": "./dist/system-map/index.d.ts",
-        "svelte": "./dist/system-map/index.js",
-        "default": "./dist/system-map/index.js"
-      },
       "./table": {
         "types": "./dist/table/index.d.ts",
         "svelte": "./dist/table/index.js",
@@ -1411,11 +1409,6 @@
         "svelte": "./dist/textarea/index.js",
         "default": "./dist/textarea/index.js"
       },
-      "./thumbnail": {
-        "types": "./dist/thumbnail/index.d.ts",
-        "svelte": "./dist/thumbnail/index.js",
-        "default": "./dist/thumbnail/index.js"
-      },
       "./time-input": {
         "types": "./dist/time-input/index.d.ts",
         "svelte": "./dist/time-input/index.js",
@@ -1498,8 +1491,11 @@
       },
       "./*/*": null,
       "./internal/*": null,
+      "./themes/aurora.css": "./dist/themes/aurora.css",
       "./themes/dark.css": "./dist/themes/dark.css",
-      "./themes/default.css": "./dist/themes/default.css"
+      "./themes/default.css": "./dist/themes/default.css",
+      "./themes/midnight.css": "./dist/themes/midnight.css",
+      "./themes/terminal.css": "./dist/themes/terminal.css"
     }
   },
   "files": [
@@ -1510,17 +1506,16 @@
     "build": "svelte-package -i src",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "prepack": "bun ../../scripts/prepack-exports.ts",
-    "postpack": "bun ../../scripts/postpack-exports.ts",
-    "thumbnail:create": "bun scripts/create-thumbnail.ts"
+    "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^0.2.0"
+    "@dryui/primitives": "^0.4.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"
   },
   "devDependencies": {
-    "svelte": "^5.55.1",
+    "svelte": "^5.55.3",
     "@sveltejs/package": "^2.5.7",
     "svelte-check": "^4.4.6",
     "typescript": "^6.0.2"

package/skills/dryui/SKILL.md

@@ -212,6 +212,7 @@ Read these when you need deeper guidance:
 - **`rules/accessibility.md`** — Field.Root, ARIA, focus management, pre-ship checklist
 - **`rules/svelte.md`** — Runes, snippets, native browser APIs, styling rules
 - **`rules/design.md`** — Minimal code, no premature abstraction, naming conventions
+- **`rules/visual-effects-performance.md`** — Tiered budgets and implementation rules for shader, blur, glass, and pointer-reactive effects
 - **`rules/native-web-transitions.md`** — View Transition API, scroll animations, reduced-motion
 
 ---

package/dist/accordion/accordion-trigger.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getAccordionCtx, getAccordionItemCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getAccordionCtx();
-	const itemCtx = getAccordionItemCtx();
-</script>
-
-<button
-	type="button"
-	aria-expanded={itemCtx.open}
-	aria-controls={itemCtx.contentId}
-	data-state={itemCtx.open ? 'open' : 'closed'}
-	data-disabled={itemCtx.disabled || undefined}
-	data-accordion-trigger
-	disabled={itemCtx.disabled}
-	class={className}
-	onclick={() => ctx.toggle(itemCtx.value)}
-	{...rest}
->
-	{@render children()}
-	<svg
-		data-indicator
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
-	>
-</button>
-
-<style>
-	[data-accordion-trigger] {
-		display: grid;
-		grid-template-columns: 1fr 1rem;
-		align-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-4);
-		background: none;
-		border: none;
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-weight: 600;
-		font-family: var(--dry-font-sans);
-		cursor: pointer;
-		color: var(--dry-color-text-strong);
-		text-align: left;
-		min-height: var(--dry-space-12);
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([data-disabled]) {
-			background: color-mix(in srgb, var(--dry-color-fill-brand) 5%, transparent);
-		}
-
-		&:active:not([data-disabled]) {
-			transform: translateY(1px);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: -2px;
-		}
-
-		&[data-disabled] {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-
-		&[data-state='open'] [data-indicator] {
-			transform: rotate(180deg);
-		}
-
-		& [data-indicator] {
-			height: 1rem;
-			aspect-ratio: 1;
-			opacity: 0.5;
-			transition: transform var(--dry-duration-fast) var(--dry-ease-default);
-		}
-	}
-</style>

package/dist/accordion/accordion-trigger.svelte.d.ts

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

package/dist/alert/alert-close.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getAlertCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getAlertCtx();
-</script>
-
-<button
-	type="button"
-	aria-label="Dismiss alert"
-	data-alert-close
-	class={className}
-	onclick={() => ctx.dismiss()}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<span aria-hidden="true">&times;</span>
-	{/if}
-</button>
-
-<style>
-	[data-alert-close] {
-		grid-column: -2 / -1;
-		grid-row: 1 / 3;
-		align-self: start;
-		display: grid;
-		place-items: center;
-		height: var(--dry-space-11);
-		aspect-ratio: 1;
-		padding-block: 0;
-		padding-inline: var(--dry-alert-gap, var(--dry-space-3)) 0;
-		border: none;
-		border-radius: var(--dry-radius-sm);
-		background: transparent;
-		color: var(--dry-color-text-weak);
-		cursor: pointer;
-		font-size: var(--dry-type-heading-4-size);
-		line-height: 1;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-alert-close]:hover {
-		background: var(--dry-color-fill);
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-alert-close]:active {
-		background: var(--dry-color-fill-hover);
-		transform: translateY(1px);
-	}
-
-	[data-alert-close]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -2px;
-	}
-</style>

package/dist/alert/alert-close.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-action.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<button type="button" data-alert-dialog-action class={className} {...rest}>
-	{@render children()}
-</button>
-
-<style>
-	[data-alert-dialog-action] {
-		--dry-btn-accent: var(--dry-color-fill-error);
-		--dry-btn-accent-hover: var(--dry-color-fill-error-hover);
-		--dry-btn-accent-active: var(--dry-color-fill-error-hover);
-		--dry-btn-on-accent: var(--dry-color-on-error);
-		--dry-btn-border: transparent;
-
-		cursor: pointer;
-		background: var(--dry-btn-accent);
-		color: var(--dry-btn-on-accent);
-		border: 1px solid var(--dry-btn-border);
-		padding: var(--dry-space-2_5) var(--dry-space-4);
-		border-radius: var(--dry-radius-md);
-		box-shadow: var(--dry-shadow-raised);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-weight: 500;
-		line-height: 1.25;
-		letter-spacing: -0.01em;
-		min-height: var(--dry-space-12);
-		display: inline-grid;
-		grid-auto-flow: column;
-		place-items: center;
-		gap: var(--dry-space-2);
-		text-decoration: none;
-		white-space: nowrap;
-		user-select: none;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			opacity var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-alert-dialog-action]:hover {
-		background: var(--dry-btn-accent-hover);
-	}
-
-	[data-alert-dialog-action]:active:not(:disabled) {
-		background: var(--dry-btn-accent-active);
-		transform: translateY(1px);
-	}
-
-	[data-alert-dialog-action]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
-	}
-
-	[data-alert-dialog-action]:disabled {
-		background: var(--dry-color-fill-disabled);
-		color: var(--dry-color-text-disabled);
-		border-color: var(--dry-color-stroke-disabled);
-		cursor: not-allowed;
-		box-shadow: none;
-	}
-</style>

package/dist/alert-dialog/alert-dialog-action.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-cancel.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getAlertDialogCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getAlertDialogCtx();
-</script>
-
-<button
-	type="button"
-	data-alert-dialog-cancel
-	onclick={() => ctx.close()}
-	class={className}
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-alert-dialog-cancel] {
-		--dry-btn-accent-fg: var(--dry-color-text-brand);
-		--dry-btn-accent-stroke: var(--dry-color-stroke-brand);
-
-		cursor: pointer;
-		background: transparent;
-		border: 1px solid var(--dry-btn-accent-stroke);
-		padding: var(--dry-space-2_5) var(--dry-space-4);
-		color: var(--dry-btn-accent-fg);
-		border-radius: var(--dry-radius-sm);
-		box-shadow: var(--dry-shadow-raised);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-weight: 500;
-		line-height: 1.25;
-		letter-spacing: -0.01em;
-		min-height: var(--dry-space-12);
-		display: inline-grid;
-		grid-auto-flow: column;
-		place-items: center;
-		gap: var(--dry-space-2);
-		text-decoration: none;
-		white-space: nowrap;
-		user-select: none;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			opacity var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-alert-dialog-cancel]:hover {
-		background: var(--dry-color-bg-alternate);
-		border-color: var(--dry-color-stroke-strong);
-		color: var(--dry-color-text-strong);
-		box-shadow: var(--dry-shadow-sm);
-	}
-
-	[data-alert-dialog-cancel]:active:not(:disabled) {
-		background: var(--dry-color-fill);
-		border-color: var(--dry-color-stroke-strong);
-		color: var(--dry-color-text-strong);
-		transform: translateY(1px);
-	}
-
-	[data-alert-dialog-cancel]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
-	}
-
-	[data-alert-dialog-cancel]:disabled {
-		background: var(--dry-color-fill-disabled);
-		color: var(--dry-color-text-disabled);
-		border-color: var(--dry-color-stroke-disabled);
-		cursor: not-allowed;
-		box-shadow: none;
-	}
-</style>

package/dist/alert-dialog/alert-dialog-cancel.svelte.d.ts

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

package/dist/alpha-slider/alpha-slider.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
-	value?: number;
-	color?: string;
-	min?: number;
-	max?: number;
-	step?: number;
-	onchange?: (value: number) => void;
-}
-declare const AlphaSlider: import('svelte').Component<Props, {}, 'value'>;
-type AlphaSlider = ReturnType<typeof AlphaSlider>;
-export default AlphaSlider;