@dryui/ui 1.1.4 → 1.2.0

package/dist/border-beam/border-beam.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import {
+		BorderBeam as BorderBeamPrimitive,
+		type BorderBeamProps
+	} from '@dryui/primitives/border-beam';
+
+	let {
+		size,
+		colorVariant,
+		theme,
+		staticColors,
+		duration,
+		active,
+		borderRadius,
+		brightness,
+		saturation,
+		hueRange,
+		strength,
+		onActivate,
+		onDeactivate,
+		children,
+		...rest
+	}: BorderBeamProps = $props();
+</script>
+
+<BorderBeamPrimitive
+	{size}
+	{colorVariant}
+	{theme}
+	{staticColors}
+	{duration}
+	{active}
+	{borderRadius}
+	{brightness}
+	{saturation}
+	{hueRange}
+	{strength}
+	{onActivate}
+	{onDeactivate}
+	{children}
+	{...rest}
+/>

package/dist/border-beam/border-beam.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type BorderBeamProps } from '@dryui/primitives/border-beam';
+declare const BorderBeam: import("svelte").Component<BorderBeamProps, {}, "">;
+type BorderBeam = ReturnType<typeof BorderBeam>;
+export default BorderBeam;

package/dist/border-beam/index.d.ts

@@ -0,0 +1,3 @@
+import type { BorderBeamProps, BorderBeamColorVariant, BorderBeamSize, BorderBeamTheme } from '@dryui/primitives/border-beam';
+export type { BorderBeamProps, BorderBeamColorVariant, BorderBeamSize, BorderBeamTheme };
+export { default as BorderBeam } from './border-beam.svelte';

package/dist/border-beam/index.js

@@ -0,0 +1 @@
+export { default as BorderBeam } from './border-beam.svelte';

package/dist/button/button.svelte

@@ -410,7 +410,8 @@
 			--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-strong));
 		}
 
-		&[aria-pressed='true'] {
+		&[aria-pressed='true'],
+		&[aria-pressed='true']:hover:not([data-disabled]) {
 			--_dry-btn-bg: var(--dry-btn-bg, var(--dry-color-fill-brand));
 			--_dry-btn-color: var(--dry-btn-color, var(--dry-color-on-brand));
 		}

package/dist/dialog/dialog-content.svelte

@@ -46,6 +46,10 @@
 	[data-dialog-content] {
 		position: fixed;
 		inset: 0;
+		/* dryui-allow width */
+		width: 100vw;
+		/* dryui-allow width */
+		max-width: none;
 		height: 100vh;
 		height: 100dvh;
 		max-height: none;

package/dist/drawer/drawer-body.svelte

@@ -16,6 +16,7 @@
 
 <style>
 	[data-drawer-body] {
+		grid-row: 2;
 		padding: var(--dry-space-12) var(--dry-space-8);
 		overflow-y: auto;
 		min-height: 0;

package/dist/drawer/drawer-dialog-content.svelte

@@ -106,6 +106,8 @@
 		--dry-drawer-bg: var(--dry-color-bg-overlay);
 		--dry-drawer-border: var(--dry-color-stroke-weak);
 		--dry-drawer-size: 25rem;
+		--_drawer-rest-transform: translateX(0);
+		--_drawer-enter-transform: translateX(100%);
 
 		background: var(--dry-drawer-bg);
 		color: var(--dry-color-text-strong);
@@ -114,6 +116,9 @@
 		display: grid;
 		grid-template-rows: max-content minmax(0, 1fr) max-content;
 		overflow: hidden;
+		opacity: 1;
+		transform: var(--_drawer-rest-transform);
+		will-change: transform, opacity;
 
 		transition:
 			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),
@@ -127,44 +132,37 @@
 	}
 
 	[data-drawer-content][data-side='left'] [data-drawer-panel] {
+		--_drawer-enter-transform: translateX(-100%);
 		grid-column: 1;
 		height: 100%;
 		border-right: 1px solid var(--dry-drawer-border);
 	}
 
 	[data-drawer-content][data-side='top'] [data-drawer-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(-100%);
 		grid-row: 1;
 		height: var(--dry-drawer-size);
 		border-bottom: 1px solid var(--dry-drawer-border);
 	}
 
 	[data-drawer-content][data-side='bottom'] [data-drawer-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(100%);
 		grid-row: 2;
 		height: var(--dry-drawer-size);
 		border-top: 1px solid var(--dry-drawer-border);
 	}
 
 	@starting-style {
-		[data-drawer-content][data-side='right'][open] [data-drawer-panel] {
-			opacity: 0;
-			transform: translateX(100%);
-		}
-		[data-drawer-content][data-side='left'][open] [data-drawer-panel] {
-			opacity: 0;
-			transform: translateX(-100%);
-		}
-		[data-drawer-content][data-side='top'][open] [data-drawer-panel] {
-			opacity: 0;
-			transform: translateY(-100%);
-		}
-		[data-drawer-content][data-side='bottom'][open] [data-drawer-panel] {
+		[data-drawer-content][open] [data-drawer-panel] {
 			opacity: 0;
-			transform: translateY(100%);
+			transform: var(--_drawer-enter-transform);
 		}
 	}
 
 	[data-drawer-content][data-state='open'] [data-drawer-panel] {
 		opacity: 1;
-		transform: translate(0);
+		transform: var(--_drawer-rest-transform);
 	}
 </style>

package/dist/drawer/drawer-footer.svelte

@@ -15,6 +15,7 @@
 
 <style>
 	[data-drawer-footer] {
+		grid-row: 3;
 		padding: var(--dry-space-6) var(--dry-space-8);
 		border-top: 1px solid var(--dry-drawer-border);
 		display: grid;

package/dist/drawer/drawer-header.svelte

@@ -18,6 +18,7 @@
 
 <style>
 	[data-drawer-header] {
+		grid-row: 1;
 		padding: var(--dry-space-6) var(--dry-space-8);
 		border-bottom: 1px solid var(--dry-drawer-border);
 	}

package/dist/index.d.ts

@@ -47,7 +47,7 @@ export type { MultiSelectComboboxRootProps, MultiSelectComboboxInputProps, Multi
 export { SegmentedControl } from './segmented-control/index.js';
 export type { SegmentedControlRootProps, SegmentedControlItemProps } from './segmented-control/index.js';
 export { Slider } from './slider/index.js';
-export type { SliderProps } from './slider/index.js';
+export type { SliderProps, SliderVariant } from './slider/index.js';
 export { Toggle } from './toggle/index.js';
 export type { ToggleProps } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
@@ -270,6 +270,8 @@ export { AlphaSlider } from './alpha-slider/index.js';
 export type { AlphaSliderProps } from './alpha-slider/index.js';
 export { Beam } from './beam/index.js';
 export type { BeamProps } from './beam/index.js';
+export { BorderBeam } from './border-beam/index.js';
+export type { BorderBeamProps } from './border-beam/index.js';
 export { Shimmer } from './shimmer/index.js';
 export type { ShimmerProps } from './shimmer/index.js';
 export { Glass } from './glass/index.js';

package/dist/index.js

@@ -139,6 +139,7 @@ export { Glow } from './glow/index.js';
 export { Adjust } from './adjust/index.js';
 export { AlphaSlider } from './alpha-slider/index.js';
 export { Beam } from './beam/index.js';
+export { BorderBeam } from './border-beam/index.js';
 export { Shimmer } from './shimmer/index.js';
 export { Glass } from './glass/index.js';
 export { GodRays } from './god-rays/index.js';

package/dist/slider/index.d.ts

@@ -1,5 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { SliderProps as PrimitiveSliderProps } from '@dryui/primitives';
+export type SliderVariant = 'default' | 'pill';
 export interface SliderProps extends Omit<PrimitiveSliderProps, 'size'> {
     size?: 'sm' | 'md' | 'lg';
+    variant?: SliderVariant;
+    valueLabel?: Snippet<[{
+        value: number;
+        percentage: number;
+    }]>;
 }
 export { default as Slider } from './slider-input.svelte';

package/dist/slider/slider-input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getFormControlCtx } from '@dryui/primitives';
 
@@ -8,8 +9,10 @@
 		max?: number;
 		step?: number;
 		size?: 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'pill';
 		disabled?: boolean;
 		orientation?: 'horizontal' | 'vertical';
+		valueLabel?: Snippet<[{ value: number; percentage: number }]>;
 	}
 
 	let {
@@ -18,8 +21,10 @@
 		max = 100,
 		step = 1,
 		size = 'md',
+		variant = 'default',
 		disabled = false,
 		orientation = 'horizontal',
+		valueLabel,
 		class: className,
 		...rest
 	}: Props = $props();
@@ -28,6 +33,7 @@
 	const isDisabled = $derived(disabled || ctx?.disabled || false);
 
 	let progress = $derived(((value - min) / (max - min)) * 100);
+	let isPill = $derived(variant === 'pill');
 
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
@@ -36,7 +42,7 @@
 	}
 </script>
 
-<span class="wrapper">
+<span class="wrapper" data-variant={variant} data-size={size} use:applyStyles>
 	<input
 		type="range"
 		bind:value
@@ -51,11 +57,20 @@
 		aria-errormessage={ctx?.errorMessageId}
 		data-disabled={isDisabled || undefined}
 		data-orientation={orientation}
+		data-variant={variant}
 		data-size={size}
 		class={className}
-		use:applyStyles
 		{...rest}
 	/>
+	{#if isPill}
+		<span data-part="value-label" aria-hidden="true">
+			{#if valueLabel}
+				{@render valueLabel({ value, percentage: progress })}
+			{:else}
+				{Math.round(progress)}%
+			{/if}
+		</span>
+	{/if}
 </span>
 
 <style>
@@ -181,4 +196,81 @@
 		--dry-slider-track-height: 8px;
 		--dry-slider-thumb-size: 28px;
 	}
+
+	/* ── Pill variant ── */
+
+	.wrapper[data-variant='pill'] input,
+	.wrapper[data-variant='pill'] [data-part='value-label'] {
+		grid-area: 1 / 1;
+	}
+
+	input[data-variant='pill'][data-size='sm'] {
+		--dry-slider-track-height: 32px;
+		--dry-slider-thumb-size: 32px;
+	}
+
+	input[data-variant='pill'][data-size='md'] {
+		--dry-slider-track-height: 40px;
+		--dry-slider-thumb-size: 40px;
+	}
+
+	input[data-variant='pill'][data-size='lg'] {
+		--dry-slider-track-height: 48px;
+		--dry-slider-thumb-size: 48px;
+	}
+
+	input[data-variant='pill']::-webkit-slider-thumb {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+		margin-top: 0;
+	}
+
+	input[data-variant='pill']::-moz-range-thumb {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
+
+	input[data-variant='pill']:hover:not([data-disabled])::-webkit-slider-thumb,
+	input[data-variant='pill']:active:not([data-disabled])::-webkit-slider-thumb {
+		transform: none;
+	}
+
+	input[data-variant='pill']:hover:not([data-disabled])::-moz-range-thumb,
+	input[data-variant='pill']:active:not([data-disabled])::-moz-range-thumb {
+		transform: none;
+	}
+
+	/* Pill value label */
+	.wrapper[data-variant='pill'] [data-part='value-label'] {
+		pointer-events: none;
+		display: grid;
+		align-items: center;
+		padding-inline: var(--dry-space-4);
+		font-size: var(--dry-text-sm-size, 0.875rem);
+		font-weight: 600;
+		color: var(--dry-color-text);
+		clip-path: inset(
+			0 calc(100% - var(--dry-slider-progress, 50%)) 0 0 round var(--dry-radius-full)
+		);
+		transition: clip-path var(--dry-duration-fast) var(--dry-ease-default);
+		z-index: 1;
+	}
+
+	.wrapper[data-variant='pill'][data-size='sm'] [data-part='value-label'] {
+		font-size: var(--dry-text-xs-size, 0.75rem);
+		padding-inline: var(--dry-space-3);
+	}
+
+	.wrapper[data-variant='pill'][data-size='lg'] [data-part='value-label'] {
+		font-size: var(--dry-text-base-size, 1rem);
+		padding-inline: var(--dry-space-5);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wrapper[data-variant='pill'] [data-part='value-label'] {
+			transition: none;
+		}
+	}
 </style>

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLInputAttributes, 'size'> {
     value?: number;
@@ -5,8 +6,13 @@ interface Props extends Omit<HTMLInputAttributes, 'size'> {
     max?: number;
     step?: number;
     size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'pill';
     disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
+    valueLabel?: Snippet<[{
+        value: number;
+        percentage: number;
+    }]>;
 }
 declare const SliderInput: import("svelte").Component<Props, {}, "value">;
 type SliderInput = ReturnType<typeof SliderInput>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -76,6 +76,11 @@
       "svelte": "./dist/beam/index.js",
       "default": "./dist/beam/index.js"
     },
+    "./border-beam": {
+      "types": "./dist/border-beam/index.d.ts",
+      "svelte": "./dist/border-beam/index.js",
+      "default": "./dist/border-beam/index.js"
+    },
     "./breadcrumb": {
       "types": "./dist/breadcrumb/index.d.ts",
       "svelte": "./dist/breadcrumb/index.js",
@@ -770,7 +775,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.1.4"
+    "@dryui/primitives": "^1.2.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"

package/skills/dryui/SKILL.md

@@ -145,7 +145,7 @@ This works for greenfield (empty directory), brownfield (existing non-SvelteKit
 **4. Add the agent integration layer manually** if you do not want to use `dryui` / `dryui setup`:
 
 - Claude Code: `claude plugin marketplace add rob-balfre/dryui && claude plugin install dryui@dryui` (installs skill + MCP in one step)
-- Codex: public install today is `$skill-installer install https://github.com/rob-balfre/dryui/tree/main/packages/ui/skills/dryui` then `codex mcp add dryui -- npx -y @dryui/mcp`. If you're working inside the DryUI repo itself, install the repo-local plugin from `/plugins` via `.agents/plugins/marketplace.json`.
+- Codex (0.121.0+): `codex marketplace add rob-balfre/dryui`, then start `codex`, run `/plugins`, and install `DryUI` (installs skill + MCP in one step). Manual fallback: `codex mcp add dryui -- npx -y @dryui/mcp` + copy the skill from `packages/ui/skills/dryui`.
 - Copilot/Cursor/Windsurf: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .agents/skills/dryui` + add MCP config (see https://dryui.dev/tools)
 
 ### Manual setup

package/dist/internal/overlay-base.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {}
-
-	let { class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}></div>
-
-<style>
-	div {
-		position: fixed;
-		inset: 0;
-		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop));
-		backdrop-filter: blur(var(--dry-overlay-blur, 12px));
-		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 12px));
-		z-index: var(--dry-layer-overlay);
-		will-change: opacity;
-	}
-
-	div[data-state='closed'] {
-		display: none;
-	}
-</style>

package/dist/internal/overlay-base.svelte.d.ts

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

package/dist/internal/section-body.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}>
-	{@render children()}
-</div>
-
-<style>
-	div {
-		padding: var(--dry-section-padding);
-		overflow-y: auto;
-		min-height: 0;
-	}
-</style>

package/dist/internal/section-body.svelte.d.ts

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

package/dist/internal/section-footer.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}>
-	{@render children()}
-</div>
-
-<style>
-	div {
-		padding: var(--dry-section-padding);
-		border-top: 1px solid var(--dry-section-border);
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		justify-items: var(--dry-section-footer-justify, start);
-		gap: var(--dry-section-footer-gap, var(--dry-space-4));
-	}
-</style>

package/dist/internal/section-footer.svelte.d.ts

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

package/dist/internal/section-header.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}>
-	{@render children()}
-</div>
-
-<style>
-	div {
-		padding: var(--dry-section-padding);
-		border-bottom: 1px solid var(--dry-section-border);
-	}
-</style>

package/dist/internal/section-header.svelte.d.ts

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

package/dist/themes/practical-ui-foundation-map.md

@@ -1,46 +0,0 @@
-# Practical UI Foundation Map
-
-> Living note for [docs/research/practical-ui-figma-extraction.md](./docs/research/practical-ui-figma-extraction.md). Extracted from the Practical UI design system file on 2026-03-25.
-
-## Foundation Rules
-
-- Colour tokens are organized as semantic roles first, then tone, emphasis, and state.
-- Background surfaces use `base`, `sunken`, `raised`, and `overlay`.
-- Practical UI’s public neutral text and fill system is transparent, not solid.
-- Elevation is expressed with both surface colour and shadow.
-- Spacing is a fixed 4px-based ladder, not ad hoc values.
-- Typography is centered on Inter with a small named scale.
-
-## DryUI Mapping
-
-| Figma                | DryUI                       |
-| -------------------- | --------------------------- |
-| `Background/Base`    | `--dry-color-bg-base`       |
-| `Background/Sunken`  | `--dry-color-bg-sunken`     |
-| `Background/Raised`  | `--dry-color-bg-raised`     |
-| `Background/Overlay` | `--dry-color-bg-overlay`    |
-| `Background/Inverse` | `--dry-color-bg-inverse`    |
-| `Text/Strong`        | `--dry-color-text-strong`   |
-| `Text/Weak`          | `--dry-color-text-weak`     |
-| `Text/Disabled`      | `--dry-color-text-disabled` |
-| `Stroke/Strong`      | `--dry-color-stroke-strong` |
-| `Stroke/Weak`        | `--dry-color-stroke-weak`   |
-| `Stroke/Focus`       | `--dry-color-stroke-focus`  |
-| `Fill/Strong`        | `--dry-color-fill-strong`   |
-| `Fill/Weak`          | `--dry-color-fill-weak`     |
-| `Fill/Hover`         | `--dry-color-fill-hover`    |
-| `Fill/Press`         | `--dry-color-fill-active`   |
-| `Fill/Selected`      | `--dry-color-fill-selected` |
-| `Fill/Inverse`       | `--dry-color-fill-inverse`  |
-| `Information`        | `info`                      |
-
-## Published Scales
-
-- Spacing: `0`, `4`, `8`, `12`, `16`, `20`, `24`, `32`, `40`, `48`, `56`, `64`, `80`, `96`, `128`, `192`, `256`
-- Desktop typography: `Display 56/64`, `Heading 1 40/48`, `Heading 2 32/40`, `Heading 3 24/32`, `Heading 4 20/28`, `Small 16/24`, `Tiny 14/20`
-- Mobile typography: `Display 40/48`, `Heading 1 36/44`, `Heading 2 28/36`, `Heading 3 24/32`, `Heading 4 20/28`, `Small 16/24`, `Tiny 14/20`
-
-## Notes
-
-- Keep [`default.css`](./packages/ui/src/themes/default.css) and [`dark.css`](./packages/ui/src/themes/dark.css) synchronized with the extracted foundation ladder.
-- The inverse fill family in Dark mode follows the same transparent-neutral logic as the rest of the semantic layer.