@dryui/ui 0.5.2 → 1.0.0

package/dist/diagram/types.d.ts

@@ -1,16 +1,35 @@
+import type { Component } from 'svelte';
 export type DiagramColor = 'neutral' | 'brand' | 'success' | 'warning' | 'error' | 'info';
 export type DiagramDirection = 'TB' | 'BT' | 'LR' | 'RL';
+export type DiagramIconComponent = Component<{
+    size?: number | string;
+    'aria-hidden'?: boolean | string;
+}>;
 export interface DiagramNode {
     id: string;
     label: string;
     description?: string;
     icon?: string;
+    iconComponent?: DiagramIconComponent;
     variant?: 'default' | 'filled' | 'outlined' | 'pill';
     color?: DiagramColor;
     state?: 'default' | 'active' | 'complete' | 'blocked';
     width?: number;
     height?: number;
 }
+export type DiagramLoopSide = 'over' | 'under' | 'left' | 'right';
+export interface DiagramWaypoint {
+    id?: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    iconComponent?: DiagramIconComponent;
+    color?: DiagramColor;
+    variant?: 'default' | 'filled' | 'outlined' | 'pill';
+    width?: number;
+    height?: number;
+    position?: number;
+}
 export interface DiagramEdge {
     from: string;
     to: string;
@@ -18,13 +37,26 @@ export interface DiagramEdge {
     arrow?: 'end' | 'start' | 'both' | 'none';
     dashed?: boolean;
     color?: DiagramColor;
+    loop?: DiagramLoopSide;
+    waypoint?: DiagramWaypoint;
 }
+export type DiagramClusterLabelPosition = 'top-left' | 'left';
 export interface DiagramCluster {
     id: string;
     label?: string;
+    labelPosition?: DiagramClusterLabelPosition;
+    iconComponent?: DiagramIconComponent;
     nodes: string[];
     color?: DiagramColor;
     dashed?: boolean;
+    direction?: DiagramDirection;
+    spacing?: {
+        nodeGap?: number;
+        layerGap?: number;
+        clusterPadding?: number;
+        cornerRadius?: number;
+        backEdgeLaneGap?: number;
+    };
 }
 export interface DiagramAnnotation {
     text: string;
@@ -82,6 +114,8 @@ export interface DiagramConfig {
         nodeGap?: number;
         layerGap?: number;
         clusterPadding?: number;
+        cornerRadius?: number;
+        backEdgeLaneGap?: number;
     };
     ariaLabel?: string;
 }
@@ -94,6 +128,7 @@ export interface PositionedNode {
     label: string;
     description?: string;
     icon?: string;
+    iconComponent?: DiagramIconComponent;
     variant: string;
     color: DiagramColor;
     state: string;
@@ -108,6 +143,26 @@ export interface PositionedEdge {
     arrow: string;
     dashed: boolean;
     color: DiagramColor;
+    kind?: 'full' | 'entry' | 'exit';
+    bounds?: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    };
+}
+export interface PositionedWaypoint {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label: string;
+    description?: string;
+    icon?: string;
+    iconComponent?: DiagramIconComponent;
+    variant: string;
+    color: DiagramColor;
 }
 export interface PositionedCluster {
     id: string;
@@ -116,6 +171,8 @@ export interface PositionedCluster {
     width: number;
     height: number;
     label?: string;
+    labelPosition?: DiagramClusterLabelPosition;
+    iconComponent?: DiagramIconComponent;
     color: DiagramColor;
     dashed: boolean;
 }
@@ -189,6 +246,7 @@ export interface LayoutResult {
     messages: PositionedMessage[];
     lifelines: PositionedLifeline[];
     positionedFragments: PositionedFragment[];
+    waypoints: PositionedWaypoint[];
     viewBox: {
         width: number;
         height: number;

package/dist/drag-and-drop/drag-and-drop-handle.svelte

@@ -67,7 +67,7 @@
 	}
 
 	[data-dnd-handle]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 

package/dist/drag-and-drop/drag-and-drop-item.svelte

@@ -101,7 +101,7 @@
 	}
 
 	[data-dnd-item]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 

package/dist/file-select/file-select-root.svelte

@@ -94,12 +94,12 @@
 
 	[data-file-select]:focus-within {
 		border-color: var(--dry-color-focus-ring);
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 	}
 
 	[data-file-select][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;
 	}

package/dist/file-upload/file-upload-dropzone.svelte

@@ -107,7 +107,7 @@
 	}
 
 	[data-fu-dropzone]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 		--dry-fu-border: var(--dry-color-focus-ring);
 	}
@@ -119,7 +119,7 @@
 	}
 
 	[data-fu-dropzone][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;
 	}

package/dist/gauge/gauge.svelte

@@ -118,7 +118,7 @@
 		stroke: var(--_gauge-fill-stroke, var(--dry-gauge-fill-color));
 		stroke-width: var(--dry-gauge-stroke-width);
 		stroke-linecap: round;
-		transition: d var(--dry-duration-normal, 0.3s) var(--dry-ease-default, ease);
+		transition: d var(--dry-duration-normal) var(--dry-ease-default);
 	}
 
 	[data-gauge-label] {

package/dist/image-comparison/image-comparison.svelte

@@ -272,7 +272,7 @@
 
 	/* Focus */
 	[data-ic-handle-wrapper]:focus-visible [data-ic-grip] {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 </style>

package/dist/index.d.ts

@@ -54,8 +54,6 @@ export { ToggleGroup } from './toggle-group/index.js';
 export type { ToggleGroupRootProps, ToggleGroupItemProps } from './toggle-group/index.js';
 export { InputGroup } from './input-group/index.js';
 export type { InputGroupRootProps, InputGroupPrefixProps, InputGroupInputProps, InputGroupSuffixProps, InputGroupSelectProps, InputGroupSeparatorProps, InputGroupActionProps } from './input-group/index.js';
-export { OptionSwatchGroup } from './option-swatch-group/index.js';
-export type { OptionSwatchGroupRootProps, OptionSwatchGroupItemProps, OptionSwatchGroupSwatchProps, OptionSwatchGroupLabelProps, OptionSwatchGroupMetaProps } from './option-swatch-group/index.js';
 export { OptionPicker } from './option-picker/index.js';
 export type { OptionPickerRootProps, OptionPickerItemProps, OptionPickerPreviewProps, OptionPickerLabelProps, OptionPickerDescriptionProps, OptionPickerMetaProps } from './option-picker/index.js';
 export { Container } from './container/index.js';
@@ -125,7 +123,7 @@ export type { TextProps } from './text/index.js';
 export { DescriptionList } from './description-list/index.js';
 export type { DescriptionListRootProps, DescriptionListItemProps, DescriptionListTermProps, DescriptionListDescriptionProps } from './description-list/index.js';
 export { Alert } from './alert/index.js';
-export type { AlertVariant, AlertRootProps, AlertIconProps, AlertTitleProps, AlertDescriptionProps, AlertCloseProps } from './alert/index.js';
+export type { AlertProps, AlertVariant } from './alert/index.js';
 export { Toast, toastStore, createToastStore } from './toast/index.js';
 export type { ToastData, ToastProviderProps, ToastRootProps, ToastActionProps, ToastTitleProps, ToastDescriptionProps, ToastCloseProps } from './toast/index.js';
 export { Progress } from './progress/index.js';
@@ -272,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 { Shimmer } from './shimmer/index.js';
+export type { ShimmerProps } from './shimmer/index.js';
 export { Glass } from './glass/index.js';
 export type { GlassProps } from './glass/index.js';
 export { GodRays } from './god-rays/index.js';

package/dist/index.js

@@ -27,7 +27,6 @@ export { Slider } from './slider/index.js';
 export { Toggle } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
 export { InputGroup } from './input-group/index.js';
-export { OptionSwatchGroup } from './option-swatch-group/index.js';
 export { OptionPicker } from './option-picker/index.js';
 // Phase 4 — Layout Primitives
 export { Container } from './container/index.js';
@@ -140,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 { Shimmer } from './shimmer/index.js';
 export { Glass } from './glass/index.js';
 export { GodRays } from './god-rays/index.js';
 export { GradientMesh } from './gradient-mesh/index.js';

package/dist/input/input.svelte

@@ -48,16 +48,15 @@
 	}
 
 	input {
-		padding: var(--dry-input-padding-y, var(--dry-space-2))
-			var(--dry-input-padding-x, var(--dry-space-3));
-		font-size: var(--dry-input-font-size, var(--dry-type-small-size));
+		padding: var(--dry-input-padding-y, var(--dry-form-control-padding-block))
+			var(--dry-input-padding-x, var(--dry-form-control-padding-inline));
+		font-size: var(--dry-input-font-size, var(--dry-form-control-font-size));
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-sans);
-		color: var(--dry-input-color, var(--dry-color-text-strong));
-		background: var(--dry-input-bg, var(--dry-control-bg, var(--dry-color-bg-raised)));
-		border: 1px solid
-			var(--dry-input-border, var(--dry-control-border, var(--dry-color-stroke-strong)));
-		border-radius: var(--dry-input-radius, var(--dry-control-radius, var(--dry-radius-md)));
+		color: var(--dry-input-color, var(--dry-form-control-color));
+		background: var(--dry-input-bg, var(--dry-form-control-bg));
+		border: 1px solid var(--dry-input-border, var(--dry-form-control-border));
+		border-radius: var(--dry-input-radius, var(--dry-form-control-radius));
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
@@ -65,15 +64,15 @@
 		appearance: none;
 
 		&::placeholder {
-			color: var(--dry-color-text-weak);
+			color: var(--dry-form-control-color-placeholder);
 		}
 
 		&:hover:not([data-disabled]) {
-			border-color: var(--dry-color-stroke-strong);
+			border-color: var(--dry-form-control-border-hover);
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
+			outline: var(--dry-focus-ring);
 			outline-offset: -1px;
 			border-color: var(--dry-color-stroke-focus);
 			box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);

package/dist/label/label.svelte

@@ -45,7 +45,7 @@
 		cursor: pointer;
 
 		&[data-disabled] {
-			opacity: 0.5;
+			opacity: var(--dry-state-disabled-opacity);
 			cursor: not-allowed;
 		}
 

package/dist/link/link.svelte

@@ -87,7 +87,7 @@
 	}
 
 	a:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 		border-radius: var(--dry-radius-sm);
 	}

package/dist/list/list-item.svelte

@@ -75,12 +75,12 @@
 	}
 
 	[data-list-item][data-interactive='true']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -2px;
 	}
 
 	[data-list-item][data-disabled='true'] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;
 	}

package/dist/multi-select-combobox/multi-select-combobox-selection-item.svelte

@@ -35,18 +35,24 @@
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
-		gap: var(--dry-space-1);
-		padding: 4px var(--dry-space-2);
+		padding-block: 4px;
+		padding-inline-start: var(--dry-space-2);
+		padding-inline-end: 0;
 		background: var(--dry-color-fill-brand-weak);
 		color: var(--dry-color-text-brand);
 		box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
-		border-radius: var(--dry-radius-full);
+		border-radius: var(--dry-radius-md);
+		overflow: hidden;
 		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
 		font-family: var(--dry-font-sans);
 		font-weight: 500;
 		line-height: 1.5;
 		white-space: nowrap;
 		user-select: none;
+		--dry-btn-radius: 0;
+		--dry-btn-padding-x: var(--dry-space-2);
+		--dry-btn-padding-y: 0;
+		--dry-btn-font-size: inherit;
 	}
 
 	@container (max-width: 200px) {

package/dist/multi-select-combobox/multi-select-combobox-selection-remove-button.svelte

@@ -27,6 +27,8 @@
 </script>
 
 <CloseButtonBase
+	variant="bare"
+	size="sm"
 	aria-label={`Remove selection: ${label ?? value}`}
 	disabled={ctx.disabled}
 	{...rest}

package/dist/navigation-menu/navigation-menu-link.svelte

@@ -44,7 +44,7 @@
 	}
 
 	[data-nav-menu-link]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 </style>

package/dist/notification-center/notification-center-item.svelte

@@ -45,7 +45,7 @@
 		padding: var(--dry-nc-item-padding, 0.75rem);
 		color: var(--dry-color-text-strong);
 		border-bottom: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
-		transition: background var(--dry-duration-fast, 100ms) ease;
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-notification-center-item]:last-child {

package/dist/number-input/number-input-button.svelte

@@ -109,18 +109,18 @@
 	}
 
 	[data-number-input-wrapper] input:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-focus-ring);
 	}
 
 	[data-number-input-wrapper] input[data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 
 	[data-number-input-wrapper][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 

package/dist/option-picker/context.svelte.d.ts

@@ -0,0 +1,9 @@
+interface OptionPickerContext {
+    readonly value: string;
+    readonly disabled: boolean;
+    readonly orientation: 'horizontal' | 'vertical';
+    select: (value: string) => void;
+    isSelected: (value: string) => boolean;
+}
+export declare const setOptionPickerCtx: (ctx: OptionPickerContext) => OptionPickerContext, getOptionPickerCtx: () => OptionPickerContext;
+export {};

package/dist/option-picker/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setOptionPickerCtx, getOptionPickerCtx] = createContext('option-picker');

package/dist/option-picker/option-picker-item.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
-	import { getSelectableTileGroupCtx } from '../option-swatch-group/context.svelte.js';
+	import { getOptionPickerCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
 		value: string;
@@ -23,9 +24,10 @@
 		...rest
 	}: Props = $props();
 
-	const ctx = getSelectableTileGroupCtx();
+	const ctx = getOptionPickerCtx();
 	const isDisabled = $derived(disabled || unavailable || ctx.disabled);
 	const isSelected = $derived(ctx.isSelected(value));
+	let hasSingleLabelChild = $state(false);
 
 	function moveFocus(current: HTMLButtonElement, direction: -1 | 1) {
 		const group = current.closest('[role="radiogroup"]');
@@ -63,6 +65,22 @@
 			ctx.select(value);
 		}
 	}
+
+	const singleLabelLayout: Attachment<HTMLSpanElement> = (node) => {
+		const updateLayout = () => {
+			const directChildren = Array.from(node.children);
+			hasSingleLabelChild =
+				directChildren.length === 1 &&
+				directChildren[0] instanceof HTMLElement &&
+				directChildren[0].hasAttribute('data-option-picker-label');
+		};
+
+		updateLayout();
+		const observer = new MutationObserver(updateLayout);
+		observer.observe(node, { childList: true });
+
+		return () => observer.disconnect();
+	};
 </script>
 
 <span
@@ -92,7 +110,7 @@
 		}}
 		onkeydown={handleKeydown}
 	>
-		<span class="content">
+		<span class="content" class:single-label={hasSingleLabelChild} {@attach singleLabelLayout}>
 			{@render children()}
 		</span>
 	</Button>
@@ -168,7 +186,7 @@
 	}
 
 	.root:focus-within {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 
@@ -199,6 +217,15 @@
 		--dry-option-picker-meta-row: 4;
 	}
 
+	.content.single-label {
+		grid-template-columns: 1fr;
+		justify-items: center;
+		text-align: center;
+
+		--dry-option-picker-label-column: 1;
+		--dry-option-picker-label-row: 1;
+	}
+
 	.root[data-size='compact'] .content {
 		min-block-size: 2.75rem;
 	}

package/dist/option-picker/option-picker-preview.svelte

@@ -84,7 +84,7 @@
 		box-shadow:
 			inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
 			inset 0 -1px 0 color-mix(in srgb, black 10%, transparent);
-		transition: border-radius var(--dry-duration-fast, 100ms) ease;
+		transition: border-radius var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-option-picker-preview][data-variant='font'] {
@@ -109,7 +109,7 @@
 			transparent
 		);
 		--dry-option-picker-preview-size: 2rem;
-		transition: border-radius var(--dry-duration-fast, 100ms) ease;
+		transition: border-radius var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-option-picker-preview][data-variant='preset'][data-shape='sharp'],

package/dist/option-picker/option-picker-root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { setSelectableTileGroupCtx } from '../option-swatch-group/context.svelte.js';
+	import { setOptionPickerCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: string;
@@ -21,7 +21,7 @@
 		...rest
 	}: Props = $props();
 
-	setSelectableTileGroupCtx({
+	setOptionPickerCtx({
 		get value() {
 			return value;
 		},

package/dist/phone-input/phone-input-select.svelte

@@ -306,7 +306,7 @@
 	}
 
 	[data-phone-input]:focus-within {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-focus-ring);
 		box-shadow: 0 0 0 1px var(--dry-color-focus-ring);
@@ -317,7 +317,7 @@
 	}
 
 	[data-phone-input][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;
 	}

package/dist/pin-input/pin-input-cell.svelte

@@ -83,7 +83,7 @@
 	[data-pin-input-cell][data-active] {
 		border-color: var(--dry-color-fill-brand);
 		z-index: 2;
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -2px;
 	}
 

package/dist/pin-input/pin-input-root.svelte

@@ -292,7 +292,7 @@
 	}
 
 	[data-pin-input-root][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 

package/dist/progress/progress.svelte

@@ -240,7 +240,7 @@
 	[data-part='segment'] {
 		background-color: var(--_segment-bg, var(--dry-progress-bar));
 		height: 100%;
-		transition: width var(--dry-duration-slow, 300ms) ease;
+		transition: width var(--dry-duration-slow) var(--dry-ease-default);
 	}
 
 	[data-part='segment']:first-child {

package/dist/scroll-area/scroll-area.svelte

@@ -67,7 +67,7 @@
 	}
 
 	[data-scroll-area]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -2px;
 	}
 </style>

package/dist/shimmer/index.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ShimmerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    color?: string;
+    duration?: number;
+    children: Snippet;
+}
+export { default as Shimmer } from './shimmer.svelte';

package/dist/shimmer/index.js

@@ -0,0 +1 @@
+export { default as Shimmer } from './shimmer.svelte';