@dryui/ui 1.8.0 → 1.9.0

package/dist/accordion/accordion.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/accordion/accordion.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Accordion',
+    description: 'Collapsible content sections, single or multiple mode',
+    category: 'display',
+    tags: ['disclosure', 'collapse', 'expand', 'faq']
+};

package/dist/adjust/adjust.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/adjust/adjust.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Adjust',
+    description: 'CSS filter adjustment wrapper for brightness, contrast, saturation, and hue shifts',
+    category: 'visual',
+    tags: ['filter', 'adjust', 'brightness', 'contrast', 'color']
+};

package/dist/alert/alert.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/alert/alert.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Alert',
+    description: 'Contextual feedback message with variant styling',
+    category: 'feedback',
+    tags: ['message', 'notification', 'info', 'warning', 'error']
+};

package/dist/alert-dialog/alert-dialog.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/alert-dialog/alert-dialog.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AlertDialog',
+    description: 'Modal dialog requiring user confirmation',
+    category: 'overlay',
+    tags: ['modal', 'confirm', 'dialog', 'destructive']
+};

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

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/alpha-slider/alpha-slider.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AlphaSlider',
+    description: 'Slider for selecting alpha/opacity values in color pickers',
+    category: 'input',
+    tags: ['alpha', 'opacity', 'slider', 'color', 'picker']
+};

package/dist/app-frame/app-frame.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/app-frame/app-frame.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AppFrame',
+    description: 'Windowed app chrome with traffic-light dots, title, and actions around a content area',
+    category: 'layout',
+    tags: ['app-shell', 'frame', 'layout', 'header', 'chrome', 'traffic-lights']
+};

package/dist/aspect-ratio/aspect-ratio.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/aspect-ratio/aspect-ratio.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AspectRatio',
+    description: 'Constrains child content to a specific aspect ratio',
+    category: 'layout',
+    tags: ['image', 'video', 'ratio', 'responsive', 'media', 'frame']
+};

package/dist/aurora/aurora.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/aurora/aurora.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Aurora',
+    description: 'Ambient gradient surface with browser-native animated color fields and static fallback',
+    category: 'layout',
+    tags: ['background', 'gradient', 'ambient', 'shader-like', 'hero']
+};

package/dist/avatar/avatar.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/avatar/avatar.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Avatar',
+    description: 'User profile image with fallback initials',
+    category: 'display',
+    tags: ['user', 'profile', 'image', 'initials']
+};

package/dist/avatar/avatar.svelte

@@ -121,7 +121,8 @@
 		font-size: var(--dry-avatar-font-size);
 		font-weight: 600;
 		line-height: 1;
-		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+		outline: 1px solid var(--dry-image-edge);
+		outline-offset: -1px;
 		overflow: hidden;
 		user-select: none;
 	}

package/dist/backdrop/backdrop.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/backdrop/backdrop.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Backdrop',
+    description: 'Full-screen overlay behind modals and dialogs',
+    category: 'overlay',
+    tags: ['overlay', 'modal', 'backdrop', 'scrim']
+};

package/dist/badge/badge.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/badge/badge.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Badge',
+    description: 'Small status indicator label',
+    category: 'display',
+    tags: ['status', 'count', 'label', 'tag']
+};

package/dist/badge/badge.svelte

@@ -12,6 +12,12 @@
 		children?: Snippet;
 		pulse?: boolean;
 		icon?: Snippet;
+		/**
+		 * Tabular-nums + min-width so numeric counts don't jitter as values
+		 * change (e.g. 9 → 10, 99 → 100). Applies `font-variant-numeric`
+		 * from `--dry-numeric-variant` and a 1.5em min-width.
+		 */
+		numeric?: boolean;
 	}
 
 	let {
@@ -22,6 +28,7 @@
 		children,
 		pulse,
 		icon,
+		numeric = false,
 		...rest
 	}: Props = $props();
 	const resolvedColor = $derived(resolveAlias(color, 'gray'));
@@ -34,6 +41,7 @@
 		class={className}
 		data-badge={isDot ? undefined : ''}
 		data-dot={isDot ? '' : undefined}
+		data-numeric={numeric && !isDot ? 'true' : undefined}
 		{...variantAttrs({
 			variant: isDot ? undefined : variant,
 			color: resolvedColor,
@@ -324,4 +332,13 @@
 		place-items: center;
 		padding: var(--dry-space-0_5, 0.125rem);
 	}
+
+	/* ── Numeric counts ────────────────────────────────────────────────────────
+	   Tabular-nums + min-width so values like "9" and "10" occupy the same
+	   footprint and don't jitter the surrounding layout as counts change. */
+	[data-numeric='true'] {
+		font-variant-numeric: var(--dry-numeric-variant);
+		min-width: 1.5em;
+		text-align: center;
+	}
 </style>

package/dist/badge/badge.svelte.d.ts

@@ -8,6 +8,12 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     children?: Snippet;
     pulse?: boolean;
     icon?: Snippet;
+    /**
+     * Tabular-nums + min-width so numeric counts don't jitter as values
+     * change (e.g. 9 → 10, 99 → 100). Applies `font-variant-numeric`
+     * from `--dry-numeric-variant` and a 1.5em min-width.
+     */
+    numeric?: boolean;
 }
 declare const Badge: import("svelte").Component<Props, {}, "">;
 type Badge = ReturnType<typeof Badge>;

package/dist/beam/beam.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/beam/beam.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Beam',
+    description: 'Animated linear light streak surface for directional highlights and shimmer accents',
+    category: 'visual',
+    tags: ['beam', 'light', 'streak', 'shimmer', 'effect']
+};

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

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/border-beam/border-beam.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'BorderBeam',
+    description: 'Animated border-travel beam with masked ring highlights, bloom, and line-trace presets',
+    category: 'visual',
+    tags: ['border', 'beam', 'glow', 'ring', 'highlight', 'effect']
+};

package/dist/breadcrumb/breadcrumb.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/breadcrumb/breadcrumb.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Breadcrumb',
+    description: 'Navigation trail showing page hierarchy',
+    category: 'navigation',
+    tags: ['nav', 'path', 'hierarchy', 'trail']
+};

package/dist/button/button.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/button/button.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Button',
+    description: 'Interactive button or link-styled action for submissions and calls to action',
+    category: 'action',
+    tags: ['form', 'action', 'click', 'submit', 'cta', 'link-button']
+};

package/dist/button/button.svelte

@@ -35,6 +35,13 @@
 		download?: boolean | string;
 		/** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
 		className?: HTMLButtonAttributes['class'];
+		/**
+		 * Optical compensation for leading/trailing icons. When `'auto'` (default),
+		 * the button trims its inline padding on the icon side by
+		 * `--dry-optical-icon-offset` so the label reads visually centered against
+		 * the icon. Set to `'off'` to disable the nudge.
+		 */
+		optical?: 'auto' | 'off';
 		/** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
 		ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
 		children: Snippet;
@@ -58,6 +65,7 @@
 		onclick,
 		class: classAttr,
 		className = classAttr,
+		optical = 'auto',
 		ref,
 		children,
 		...rest
@@ -89,6 +97,7 @@
 			{download}
 			aria-disabled={disabled || undefined}
 			data-disabled={disabled || undefined}
+			data-optical={optical}
 			tabindex={disabled ? -1 : undefined}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
@@ -102,6 +111,7 @@
 			{type}
 			{disabled}
 			data-disabled={disabled || undefined}
+			data-optical={optical}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
 			{onclick}
@@ -209,6 +219,22 @@
 		}
 	}
 
+	/* ── Optical icon offset ───────────────────────────────────────────────────
+	   When a button has a leading or trailing child marked with
+	   `[data-dry-icon]`, trim the padding on that side by
+	   `--dry-optical-icon-offset` so the label reads visually centered against
+	   the icon. Consumers set `data-optical="off"` (via the `optical` prop)
+	   to disable the nudge. Data-attribute selectors pierce Svelte style
+	   scoping without needing `:global()`, which is banned by
+	   `dryui/no-global`. */
+	:is(a, button)[data-optical='auto']:has(> [data-dry-icon]:first-child) {
+		padding-inline-start: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
+	}
+
+	:is(a, button)[data-optical='auto']:has(> [data-dry-icon]:last-child) {
+		padding-inline-end: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
+	}
+
 	/* ── Variants ──────────────────────────────────────────────────────────────── */
 
 	:is(a, button)[data-variant='solid'] {

package/dist/button/button.svelte.d.ts

@@ -10,6 +10,13 @@ interface Props extends Omit<HTMLButtonAttributes, 'color'> {
     download?: boolean | string;
     /** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
     className?: HTMLButtonAttributes['class'];
+    /**
+     * Optical compensation for leading/trailing icons. When `'auto'` (default),
+     * the button trims its inline padding on the icon side by
+     * `--dry-optical-icon-offset` so the label reads visually centered against
+     * the icon. Set to `'off'` to disable the nudge.
+     */
+    optical?: 'auto' | 'off';
     /** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
     ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
     children: Snippet;

package/dist/button-group/button-group.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/button-group/button-group.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ButtonGroup',
+    description: 'Groups related buttons with shared styling',
+    category: 'action',
+    tags: ['button', 'group', 'toolbar', 'actions']
+};

package/dist/calendar/calendar.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/calendar/calendar.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Calendar',
+    description: 'Interactive calendar grid for date navigation',
+    category: 'form',
+    tags: ['date', 'calendar', 'picker', 'month', 'locale']
+};

package/dist/card/card-content.svelte

@@ -16,7 +16,7 @@
 
 <style>
 	[data-card-content] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		overflow-x: auto;
 	}
 

package/dist/card/card-footer.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	[data-card-footer] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		border-top: 1px solid var(--dry-card-border, var(--dry-color-stroke-weak));
 	}
 

package/dist/card/card-header.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	[data-card-header] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		border-bottom: 1px solid var(--dry-card-border, var(--dry-color-stroke-weak));
 	}
 

package/dist/card/card-root.svelte

@@ -10,6 +10,7 @@
 		orientation?: 'vertical' | 'horizontal';
 		variant?: 'default' | 'elevated' | 'interactive';
 		size?: 'default' | 'sm';
+		bordered?: boolean;
 		children: Snippet;
 	}
 
@@ -20,6 +21,7 @@
 		orientation,
 		variant = 'default',
 		size = 'default',
+		bordered = false,
 		class: className,
 		children,
 		...rest
@@ -32,6 +34,7 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
+		data-bordered={bordered ? '' : undefined}
 		{...variantAttrs({
 			variant: variant !== 'default' ? variant : undefined,
 			size: size !== 'default' ? size : undefined
@@ -50,6 +53,7 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
+		data-bordered={bordered ? '' : undefined}
 		{...variantAttrs({
 			variant: variant !== 'default' ? variant : undefined,
 			size: size !== 'default' ? size : undefined
@@ -63,22 +67,27 @@
 {/if}
 
 <style>
+	/* outer: var(--dry-radius-card); children inside the padded region use var(--dry-radius-nested-card). */
+
 	[data-card] {
-		--dry-card-radius: var(--dry-radius-2xl);
-		--dry-radius-nested: max(
-			var(--dry-radius-sm),
-			calc(var(--dry-card-radius) - var(--dry-card-padding, var(--dry-space-8)))
-		);
-		--dry-btn-radius: var(--dry-radius-nested);
+		--dry-card-radius: var(--dry-radius-card);
+		--dry-card-padding: var(--dry-padding-card);
+		--dry-btn-radius: var(--dry-radius-nested-card);
 
 		container-type: inline-size;
 		display: grid;
 		background: var(--dry-card-bg, var(--dry-surface-bg, var(--dry-color-bg-raised)));
+		border-radius: var(--dry-card-radius, var(--dry-surface-radius, var(--dry-radius-card)));
+		box-shadow: var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
+		overflow: hidden;
+		transition: box-shadow var(--dry-duration-fast) var(--dry-ease-out);
+	}
+
+	/* ── Bordered escape hatch (retain the 1px border look) ────────────────── */
+
+	[data-card][data-bordered] {
 		border: 1px solid
 			var(--dry-card-border, var(--dry-surface-border, var(--dry-color-stroke-weak)));
-		border-radius: var(--dry-card-radius, var(--dry-surface-radius, var(--dry-radius-2xl)));
-		box-shadow: var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-raised)));
-		overflow: hidden;
 	}
 
 	/* ── Selected state ────────────────────────────────────────────────────── */
@@ -93,7 +102,7 @@
 		outline-offset: -2px;
 		box-shadow:
 			inset 0 0 0 1px var(--dry-card-selected-ring-color),
-			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-raised)));
+			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
 	}
 
 	/* ── Clickable card (button) ───────────────────────────────────────────── */
@@ -107,13 +116,12 @@
 		text-align: inherit;
 		cursor: pointer;
 		transition:
-			box-shadow var(--dry-duration-normal, 200ms) ease,
+			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
 			transform var(--dry-duration-fast, 100ms) ease;
 	}
 
 	button[data-card]:hover {
-		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgb(15 23 42 / 0.1));
-		border-color: var(--dry-color-stroke-strong);
+		box-shadow: var(--dry-shadow-sm-hover);
 	}
 
 	button[data-card]:active {
@@ -135,11 +143,10 @@
 		grid-auto-flow: column;
 	}
 
-	/* ── Variant: elevated (shadow-only separation, no border) ─────────────── */
+	/* ── Variant: elevated (shadow-only separation, stronger shadow) ───────── */
 
 	[data-card][data-variant='elevated'] {
 		--dry-card-bg: var(--dry-color-bg-overlay);
-		border-color: transparent;
 		--dry-card-shadow: var(--dry-shadow-md);
 	}
 
@@ -148,13 +155,16 @@
 	[data-card][data-variant='interactive'] {
 		cursor: pointer;
 		transition:
-			box-shadow var(--dry-duration-normal) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
 			transform var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-card][data-variant='interactive']:hover {
-		box-shadow: var(--dry-shadow-md);
-		border-color: var(--dry-color-stroke-strong);
+		box-shadow: var(--dry-shadow-sm-hover);
+	}
+
+	[data-card][data-variant='elevated']:hover {
+		box-shadow: var(--dry-shadow-md-hover);
 	}
 
 	[data-card][data-variant='interactive']:active {

package/dist/card/card-root.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     orientation?: 'vertical' | 'horizontal';
     variant?: 'default' | 'elevated' | 'interactive';
     size?: 'default' | 'sm';
+    bordered?: boolean;
     children: Snippet;
 }
 declare const CardRoot: import("svelte").Component<Props, {}, "">;

package/dist/card/card.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/card/card.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Card',
+    description: 'Contained content surface with header/content/footer sections',
+    category: 'display',
+    tags: ['surface', 'container', 'content', 'panel']
+};