@dryui/ui 0.0.6 → 0.1.0

package/dist/input-group/input-group-input.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getAffixGroupCtx } from './context.svelte.js';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
+	interface Props extends HTMLInputAttributes {
+		value?: string;
 	}
 
-	let { children, class: className, ...rest }: Props = $props();
+	let { value = $bindable(''), class: className, ...rest }: Props = $props();
 
 	const ctx = getAffixGroupCtx();
 </script>
@@ -17,9 +16,37 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
-	{...rest}
 	data-input-group-inputWrap
-	class={className}
 >
-	{@render children()}
+	<input
+		bind:value
+		disabled={ctx.disabled || undefined}
+		data-input-group-input
+		class={className}
+		{...rest}
+	/>
 </div>
+
+<style>
+	[data-input-group-inputWrap] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(0, 1fr);
+		align-items: center;
+	}
+
+	[data-input-group-input] {
+		border: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: var(--dry-input-group-font-size);
+		line-height: 1.4;
+		padding: var(--dry-input-group-padding-y) var(--dry-input-group-padding-x);
+		outline: none;
+	}
+
+	[data-input-group-input]::placeholder {
+		color: var(--dry-input-group-muted);
+	}
+</style>

package/dist/input-group/input-group-prefix.svelte

@@ -23,3 +23,16 @@
 >
 	{@render children()}
 </span>
+
+<style>
+	[data-input-group-prefix] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0 var(--dry-input-group-padding-x);
+		color: var(--dry-input-group-muted);
+		white-space: nowrap;
+	}
+</style>

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

@@ -98,98 +98,4 @@
 		min-height: 3.5rem;
 	}
 
-	[data-input-group-prefix],
-	[data-input-group-suffix],
-	[data-input-group-action],
-	[data-input-group-select] {
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0 var(--dry-input-group-padding-x);
-		color: var(--dry-input-group-muted);
-		white-space: nowrap;
-	}
-
-	[data-input-group-inputWrap] {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: minmax(0, 1fr);
-		align-items: center;
-	}
-
-	[data-input-group-input] {
-		border: 0;
-		background: transparent;
-		color: inherit;
-		font: inherit;
-		font-size: var(--dry-input-group-font-size);
-		line-height: 1.4;
-		padding: var(--dry-input-group-padding-y) var(--dry-input-group-padding-x);
-		outline: none;
-	}
-
-	[data-input-group-input]::placeholder {
-		color: var(--dry-input-group-muted);
-	}
-
-	[data-input-group-separator] {
-		align-self: stretch;
-		border-inline-start: 1px solid var(--dry-input-group-separator);
-	}
-
-	[data-input-group-action] {
-		appearance: none;
-		border: 0;
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		cursor: pointer;
-		font: inherit;
-		font-size: var(--dry-input-group-font-size);
-		transition: background-color 160ms ease;
-	}
-
-	[data-input-group-action]:hover:not(:disabled) {
-		background: var(--dry-color-fill-weak);
-	}
-
-	[data-input-group-action]:focus-visible {
-		outline: none;
-		background: var(--dry-color-fill-weak);
-	}
-
-	[data-input-group-action]:disabled {
-		cursor: not-allowed;
-	}
-
-	[data-input-group-selectWrap] {
-		position: relative;
-	}
-
-	[data-input-group-select] {
-		appearance: none;
-		border: 0;
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font: inherit;
-		font-size: var(--dry-input-group-font-size);
-		line-height: 1.4;
-		padding: var(--dry-input-group-padding-y) calc(var(--dry-input-group-padding-x) * 1.75)
-			var(--dry-input-group-padding-y) var(--dry-input-group-padding-x);
-		outline: none;
-		cursor: pointer;
-	}
-
-	[data-input-group-caret] {
-		position: absolute;
-		right: 0.875rem;
-		top: 50%;
-		aspect-ratio: 1;
-		height: 0.5rem;
-		border-right: 1.5px solid currentColor;
-		border-bottom: 1.5px solid currentColor;
-		transform: translateY(-65%) rotate(45deg);
-		pointer-events: none;
-	}
 </style>

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

@@ -25,3 +25,41 @@
 	</select>
 	<span data-input-group-caret aria-hidden="true"></span>
 </div>
+
+<style>
+	[data-input-group-selectWrap] {
+		position: relative;
+	}
+
+	[data-input-group-select] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: 0.5rem;
+		padding: var(--dry-input-group-padding-y) calc(var(--dry-input-group-padding-x) * 1.75)
+			var(--dry-input-group-padding-y) var(--dry-input-group-padding-x);
+		white-space: nowrap;
+		appearance: none;
+		border: 0;
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		font: inherit;
+		font-size: var(--dry-input-group-font-size);
+		line-height: 1.4;
+		outline: none;
+		cursor: pointer;
+	}
+
+	[data-input-group-caret] {
+		position: absolute;
+		right: 0.875rem;
+		top: 50%;
+		aspect-ratio: 1;
+		height: 0.5rem;
+		border-right: 1.5px solid currentColor;
+		border-bottom: 1.5px solid currentColor;
+		transform: translateY(-65%) rotate(45deg);
+		pointer-events: none;
+	}
+</style>

package/dist/input-group/input-group-separator.svelte

@@ -19,3 +19,10 @@
 	data-input-group-separator
 	class={className}
 ></span>
+
+<style>
+	[data-input-group-separator] {
+		align-self: stretch;
+		border-inline-start: 1px solid var(--dry-input-group-separator);
+	}
+</style>

package/dist/input-group/input-group-suffix.svelte

@@ -23,3 +23,16 @@
 >
 	{@render children()}
 </div>
+
+<style>
+	[data-input-group-suffix] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0 var(--dry-input-group-padding-x);
+		color: var(--dry-input-group-muted);
+		white-space: nowrap;
+	}
+</style>

package/dist/label/label.svelte

@@ -35,6 +35,7 @@
 		--dry-label-leading: var(--dry-type-small-leading, var(--dry-type-small-leading));
 		--dry-label-weight: 500;
 
+		order: var(--dry-field-label-order, unset);
 		display: inline-block;
 		font-family: var(--dry-font-sans);
 		font-size: var(--dry-label-font-size);

package/dist/list/list-root.svelte

@@ -38,7 +38,6 @@
 	{@render children()}
 </ul>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-list-root] {
 		--dry-list-gap: var(--dry-space-1);

package/dist/map/map-root.svelte

@@ -197,18 +197,19 @@
 	});
 </script>
 
-<div bind:this={containerEl} class={className} data-part="map-root" data-map-root {...rest}>
-	{#if error}
+{#if error}
+	<div class={className} data-part="map-root" data-map-root {...rest}>
 		<div data-part="map-error">
 			{error}
 		</div>
+	</div>
+{:else}
+	<div bind:this={containerEl} class={className} data-part="map-root" data-map-root {...rest}></div>
+	{#if children}
+		{@render children()}
 	{/if}
-</div>
-{#if children && !error}
-	{@render children()}
 {/if}
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-map-root] {
 		--dry-map-radius: var(--dry-radius-lg, 0.5rem);
@@ -252,11 +253,6 @@
 		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
 	}
 
-	[data-theme='dark'] [data-map-popup] [data-map-mapboxgl]-popup-content,
-	[data-theme='dark'] [data-map-popup] [data-map-maplibregl]-popup-content {
-		background: var(--dry-color-bg-raised, #1e1e2e);
-	}
-
 	[data-part='map-error'] {
 		display: grid;
 		place-items: center;

package/dist/markdown-renderer/markdown-renderer.svelte

@@ -53,7 +53,6 @@
 	{@render renderNodes(nodes)}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-markdown-renderer-root] {
 		/* Component tokens (Tier 3) — use semantic tokens so dark mode works */
@@ -79,140 +78,142 @@
 		color: var(--dry-markdown-color);
 	}
 
-	/* ── Headings ─────────────────────────────────────────────────────────────── */
-
-	[data-markdown-renderer-root] h1,
-	[data-markdown-renderer-root] h2,
-	[data-markdown-renderer-root] h3,
-	[data-markdown-renderer-root] h4,
-	[data-markdown-renderer-root] h5,
-	[data-markdown-renderer-root] h6 {
-		color: var(--dry-markdown-heading-color);
-		font-weight: 600;
-		line-height: 1.25;
-		margin-top: 1.5em;
-		margin-bottom: 0.5em;
-	}
+	[data-markdown-renderer-root] :global {
+		/* ── Headings ─────────────────────────────────────────────────────────────── */
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: var(--dry-markdown-heading-color);
+			font-weight: 600;
+			line-height: 1.25;
+			margin-top: 1.5em;
+			margin-bottom: 0.5em;
+		}
 
-	[data-markdown-renderer-root] h1 {
-		font-size: var(--dry-type-heading-2-size, var(--dry-type-heading-2-size));
-		margin-top: 0;
-	}
+		h1 {
+			font-size: var(--dry-type-heading-2-size, var(--dry-type-heading-2-size));
+			margin-top: 0;
+		}
 
-	[data-markdown-renderer-root] h2 {
-		font-size: var(--dry-type-heading-2-size, var(--dry-type-heading-2-size));
-		padding-bottom: 0.25em;
-		border-bottom: 1px solid var(--dry-markdown-hr-color);
-	}
+		h2 {
+			font-size: var(--dry-type-heading-2-size, var(--dry-type-heading-2-size));
+			padding-bottom: 0.25em;
+			border-bottom: 1px solid var(--dry-markdown-hr-color);
+		}
 
-	[data-markdown-renderer-root] h3 {
-		font-size: var(--dry-type-heading-3-size, var(--dry-type-heading-3-size));
-	}
+		h3 {
+			font-size: var(--dry-type-heading-3-size, var(--dry-type-heading-3-size));
+		}
 
-	[data-markdown-renderer-root] h4 {
-		font-size: var(--dry-type-heading-4-size, var(--dry-type-heading-4-size));
-	}
+		h4 {
+			font-size: var(--dry-type-heading-4-size, var(--dry-type-heading-4-size));
+		}
 
-	[data-markdown-renderer-root] h5 {
-		font-size: var(--dry-markdown-font-size);
-	}
+		h5 {
+			font-size: var(--dry-markdown-font-size);
+		}
 
-	[data-markdown-renderer-root] h6 {
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-		color: var(--dry-color-text-weak);
-	}
+		h6 {
+			font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+			color: var(--dry-color-text-weak);
+		}
 
-	/* ── Paragraph ────────────────────────────────────────────────────────────── */
+		/* ── Paragraph ────────────────────────────────────────────────────────────── */
 
-	[data-markdown-renderer-root] p {
-		margin-top: 0;
-		margin-bottom: 1em;
-	}
+		p {
+			margin-top: 0;
+			margin-bottom: 1em;
+		}
 
-	/* ── Links ────────────────────────────────────────────────────────────────── */
+		/* ── Links ────────────────────────────────────────────────────────────────── */
 
-	[data-markdown-renderer-root] a {
-		color: var(--dry-markdown-link-color);
-		text-decoration: underline;
-		text-underline-offset: 2px;
+		a {
+			color: var(--dry-markdown-link-color);
+			text-decoration: underline;
+			text-underline-offset: 2px;
 
-		&:hover {
-			color: var(--dry-markdown-link-hover-color);
+			&:hover {
+				color: var(--dry-markdown-link-hover-color);
+			}
 		}
-	}
 
-	/* ── Images ───────────────────────────────────────────────────────────────── */
+		/* ── Images ───────────────────────────────────────────────────────────────── */
 
-	[data-markdown-renderer-root] img {
-		height: auto;
-		border-radius: var(--dry-radius-md);
-		margin-top: 0.5em;
-		margin-bottom: 0.5em;
-	}
+		img {
+			height: auto;
+			border-radius: var(--dry-radius-md);
+			margin-top: 0.5em;
+			margin-bottom: 0.5em;
+		}
 
-	/* ── Lists ────────────────────────────────────────────────────────────────── */
+		/* ── Lists ────────────────────────────────────────────────────────────────── */
 
-	[data-markdown-renderer-root] ul,
-	[data-markdown-renderer-root] ol {
-		margin-top: 0;
-		margin-bottom: 1em;
-		padding-left: 1.5em;
-	}
+		ul,
+		ol {
+			margin-top: 0;
+			margin-bottom: 1em;
+			padding-left: 1.5em;
+		}
 
-	[data-markdown-renderer-root] li {
-		margin-bottom: 0.25em;
-	}
+		li {
+			margin-bottom: 0.25em;
+		}
 
-	[data-markdown-renderer-root] ul {
-		list-style-type: disc;
-	}
+		ul {
+			list-style-type: disc;
+		}
 
-	[data-markdown-renderer-root] ol {
-		list-style-type: decimal;
-	}
+		ol {
+			list-style-type: decimal;
+		}
 
-	/* ── Blockquotes ──────────────────────────────────────────────────────────── */
+		/* ── Blockquotes ──────────────────────────────────────────────────────────── */
 
-	[data-markdown-renderer-root] blockquote {
-		margin: 0 0 1em 0;
-		padding: var(--dry-space-2) var(--dry-space-4);
-		border-left: 3px solid var(--dry-markdown-blockquote-border);
-		color: var(--dry-markdown-blockquote-color);
-	}
+		blockquote {
+			margin: 0 0 1em 0;
+			padding: var(--dry-space-2) var(--dry-space-4);
+			border-left: 3px solid var(--dry-markdown-blockquote-border);
+			color: var(--dry-markdown-blockquote-color);
+		}
 
-	[data-markdown-renderer-root] blockquote p:last-child {
-		margin-bottom: 0;
-	}
+		blockquote p:last-child {
+			margin-bottom: 0;
+		}
 
-	/* ── Inline code ──────────────────────────────────────────────────────────── */
+		/* ── Inline code ──────────────────────────────────────────────────────────── */
 
-	[data-markdown-renderer-root] code {
-		font-family: var(--dry-font-mono);
-		font-size: 0.875em;
-		padding: 0.125em 0.375em;
-		background: var(--dry-markdown-code-bg);
-		color: var(--dry-markdown-code-color);
-		border: 1px solid var(--dry-markdown-code-border);
-		border-radius: var(--dry-radius-sm);
-	}
+		code {
+			font-family: var(--dry-font-mono);
+			font-size: 0.875em;
+			padding: 0.125em 0.375em;
+			background: var(--dry-markdown-code-bg);
+			color: var(--dry-markdown-code-color);
+			border: 1px solid var(--dry-markdown-code-border);
+			border-radius: var(--dry-radius-sm);
+		}
 
-	/* Reset inline code styles inside CodeBlock */
-	[data-markdown-renderer-root] [data-code-block] code {
-		padding: 0;
-		background: none;
-		color: inherit;
-		border: none;
-		border-radius: 0;
-	}
+		/* Reset inline code styles inside CodeBlock */
+		[data-code-block] code {
+			padding: 0;
+			background: none;
+			color: inherit;
+			border: none;
+			border-radius: 0;
+		}
 
-	/* ── Strong & Em ──────────────────────────────────────────────────────────── */
+		/* ── Strong & Em ──────────────────────────────────────────────────────────── */
 
-	[data-markdown-renderer-root] strong {
-		font-weight: 600;
-		color: var(--dry-markdown-heading-color);
-	}
+		strong {
+			font-weight: 600;
+			color: var(--dry-markdown-heading-color);
+		}
 
-	[data-markdown-renderer-root] em {
-		font-style: italic;
+		em {
+			font-style: italic;
+		}
 	}
 </style>

package/dist/multi-select-combobox/multi-select-combobox-group.svelte

@@ -15,7 +15,6 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-multi-select-group] [data-part='group-label'] {
 		padding: var(--dry-space-1_5) var(--dry-space-2);

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

@@ -30,3 +30,9 @@
 <li>
 	{@render children()}
 </li>
+
+<style>
+	li {
+		position: relative;
+	}
+</style>

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

@@ -13,7 +13,6 @@
 	{@render children()}
 </ul>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-nav-menu-list] {
 		--dry-nav-menu-bg: var(--dry-color-bg-raised);
@@ -46,7 +45,4 @@
 		box-shadow: var(--dry-nav-menu-shadow);
 	}
 
-	[data-nav-menu-list] > :is(li) {
-		position: relative;
-	}
 </style>

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

@@ -16,3 +16,15 @@
 	</div>
 	{@render children()}
 </div>
+
+<style>
+	[data-part='group-header'] {
+		padding: var(--dry-space-2, 0.5rem) var(--dry-nc-item-padding, 0.75rem);
+		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
+		font-weight: 600;
+		color: var(--dry-color-text-weak, #64748b);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		background: var(--dry-color-fill, #f8fafc);
+	}
+</style>

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

@@ -39,3 +39,31 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	[data-notification-center-item] {
+		padding: var(--dry-nc-item-padding, 0.75rem);
+		border-bottom: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		transition: background var(--dry-duration-fast, 100ms) ease;
+	}
+
+	[data-notification-center-item]:last-child {
+		border-bottom: none;
+	}
+
+	[data-notification-center-item][data-state='unread'] {
+		background: var(--dry-nc-unread-bg, #eff6ff);
+	}
+
+	[data-notification-center-item][data-variant='warning'] {
+		border-left: 3px solid var(--dry-color-fill-warning);
+	}
+
+	[data-notification-center-item][data-variant='critical'] {
+		border-left: 3px solid var(--dry-color-fill-error);
+	}
+
+	[data-notification-center-item][data-variant='info'] {
+		border-left: 3px solid var(--dry-color-fill-brand);
+	}
+</style>