@dryui/ui 0.1.2 → 0.1.3

package/dist/button/button.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { getButtonGroupCtx } from '../button-group/context.svelte.js';
+
+	const groupCtx = getButtonGroupCtx();
 
 	interface Props extends HTMLButtonAttributes {
 		variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare';
@@ -47,7 +50,7 @@
 	}
 </script>
 
-<span class="wrapper">
+<span class="wrapper" data-in-group={groupCtx ? '' : undefined} data-group-orientation={groupCtx?.orientation}>
 	{#if href !== undefined}
 		<a
 			{...rest as AnchorRest}
@@ -357,4 +360,51 @@
 		--dry-btn-radius: var(--dry-radius-lg);
 		--dry-btn-font-size: var(--dry-type-heading-4-size, var(--dry-text-base-size));
 	}
+
+	/* ── Button-group integration ─────────────────────────────────────── */
+
+	.wrapper[data-in-group] :is(a, button) {
+		border-radius: 0;
+	}
+
+	/* Horizontal: first child gets left radii */
+	.wrapper[data-in-group][data-group-orientation='horizontal']:first-child :is(a, button) {
+		border-top-left-radius: var(--dry-button-group-radius);
+		border-bottom-left-radius: var(--dry-button-group-radius);
+	}
+
+	/* Horizontal: last child gets right radii */
+	.wrapper[data-in-group][data-group-orientation='horizontal']:last-child :is(a, button) {
+		border-top-right-radius: var(--dry-button-group-radius);
+		border-bottom-right-radius: var(--dry-button-group-radius);
+	}
+
+	/* Horizontal: non-first child removes inline-start border */
+	.wrapper[data-in-group][data-group-orientation='horizontal']:not(:first-child) :is(a, button) {
+		border-inline-start: 0;
+	}
+
+	/* Vertical: first child gets top radii */
+	.wrapper[data-in-group][data-group-orientation='vertical']:first-child :is(a, button) {
+		border-top-left-radius: var(--dry-button-group-radius);
+		border-top-right-radius: var(--dry-button-group-radius);
+	}
+
+	/* Vertical: last child gets bottom radii */
+	.wrapper[data-in-group][data-group-orientation='vertical']:last-child :is(a, button) {
+		border-bottom-left-radius: var(--dry-button-group-radius);
+		border-bottom-right-radius: var(--dry-button-group-radius);
+	}
+
+	/* Vertical: non-first child removes block-start border */
+	.wrapper[data-in-group][data-group-orientation='vertical']:not(:first-child) :is(a, button) {
+		border-block-start: 0;
+	}
+
+	/* Hover/focus z-index for grouped buttons */
+	.wrapper[data-in-group]:hover :is(a, button),
+	.wrapper[data-in-group]:focus-within :is(a, button) {
+		z-index: var(--dry-button-group-hover-z-index);
+		position: relative;
+	}
 </style>

package/dist/button-group/button-group.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { setButtonGroupCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		orientation?: 'horizontal' | 'vertical';
@@ -15,6 +16,12 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	setButtonGroupCtx({
+		get orientation() {
+			return orientation;
+		}
+	});
 </script>
 
 <div
@@ -39,68 +46,6 @@
 
 	[data-button-group][data-orientation='horizontal'] {
 		grid-auto-flow: column;
-
-		& > :where(button, a, span),
-		& > :where(span) > :where(button, a) {
-			border-radius: 0;
-		}
-
-		& > :where(button, a):first-child,
-		& > :where(span):first-child > :where(button, a) {
-			border-top-left-radius: var(--dry-button-group-radius);
-			border-bottom-left-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):last-child,
-		& > :where(span):last-child > :where(button, a) {
-			border-top-right-radius: var(--dry-button-group-radius);
-			border-bottom-right-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):not(:first-child),
-		& > :where(span):not(:first-child) > :where(button, a) {
-			border-inline-start: 0;
-		}
-
-		& > :where(button, a):hover,
-		& > :where(button, a):focus-visible,
-		& > :where(span):hover > :where(button, a),
-		& > :where(span):focus-within > :where(button, a) {
-			z-index: var(--dry-button-group-hover-z-index);
-			position: relative;
-		}
-	}
-
-	[data-button-group][data-orientation='vertical'] {
-		& > :where(button, a, span),
-		& > :where(span) > :where(button, a) {
-			border-radius: 0;
-		}
-
-		& > :where(button, a):first-child,
-		& > :where(span):first-child > :where(button, a) {
-			border-top-left-radius: var(--dry-button-group-radius);
-			border-top-right-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):last-child,
-		& > :where(span):last-child > :where(button, a) {
-			border-bottom-left-radius: var(--dry-button-group-radius);
-			border-bottom-right-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):not(:first-child),
-		& > :where(span):not(:first-child) > :where(button, a) {
-			border-block-start: 0;
-		}
-
-		& > :where(button, a):hover,
-		& > :where(button, a):focus-visible,
-		& > :where(span):hover > :where(button, a),
-		& > :where(span):focus-within > :where(button, a) {
-			z-index: var(--dry-button-group-hover-z-index);
-			position: relative;
-		}
 	}
 
 	[data-button-group][data-size='sm'] {

package/dist/button-group/context.svelte.d.ts

@@ -0,0 +1,5 @@
+export interface ButtonGroupContext {
+    readonly orientation: 'horizontal' | 'vertical';
+}
+export declare function setButtonGroupCtx(ctx: ButtonGroupContext): ButtonGroupContext;
+export declare function getButtonGroupCtx(): ButtonGroupContext | undefined;

package/dist/button-group/context.svelte.js

@@ -0,0 +1,11 @@
+import { getContext, setContext, hasContext } from 'svelte';
+const KEY = Symbol('button-group');
+export function setButtonGroupCtx(ctx) {
+    setContext(KEY, ctx);
+    return ctx;
+}
+export function getButtonGroupCtx() {
+    if (!hasContext(KEY))
+        return undefined;
+    return getContext(KEY);
+}

package/dist/combobox/combobox-group.svelte

@@ -27,7 +27,7 @@
 		letter-spacing: 0.05em;
 	}
 
-	[data-combobox-group] + [data-combobox-group] {
+	[data-combobox-group]:not(:first-of-type) {
 		border-top: 1px solid var(--dry-color-stroke-weak);
 		margin-top: var(--dry-space-1);
 		padding-top: var(--dry-space-1);

package/dist/date-range-picker/date-range-picker-root.svelte

@@ -150,9 +150,3 @@
 </script>
 
 {@render children()}
-
-<style>
-	[data-drp-root] {
-		display: contents;
-	}
-</style>

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

@@ -142,8 +142,4 @@
 		overflow: hidden;
 	}
 
-	[data-file-upload] {
-		container-type: inline-size;
-		display: grid;
-	}
 </style>

package/dist/list/list-item-icon.svelte

@@ -12,3 +12,11 @@
 <div data-list-item-icon class={className} {...rest}>
 	{@render children()}
 </div>
+
+<style>
+	[data-list-item-icon] {
+		display: inline-grid;
+		place-items: center;
+		color: var(--dry-list-item-icon-color);
+	}
+</style>

package/dist/list/list-item-text.svelte

@@ -21,3 +21,22 @@
 		<span data-list-item-secondary>{@render secondary()}</span>
 	{/if}
 </div>
+
+<style>
+	[data-list-item-text] {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--dry-space-0_5);
+	}
+
+	[data-list-item-text] > [data-list-item-primary] {
+		font-size: var(--dry-list-primary-size);
+		line-height: 1.5;
+	}
+
+	[data-list-item-text] > [data-list-item-secondary] {
+		font-size: var(--dry-list-secondary-size);
+		color: var(--dry-list-secondary-color);
+		line-height: 1.4;
+	}
+</style>

package/dist/list/list-item.svelte

@@ -47,3 +47,45 @@
 >
 	{@render children()}
 </li>
+
+<style>
+	[data-list-item] {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		align-items: start;
+		gap: var(--dry-list-item-gap);
+		padding: var(--dry-list-item-padding);
+		border-radius: var(--dry-list-item-radius);
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-list-item][data-interactive='true'] {
+		cursor: pointer;
+	}
+
+	[data-list-item][data-interactive='true']:hover,
+	[data-list-item][data-interactive='true']:focus-visible {
+		background: var(--dry-list-item-hover-bg);
+	}
+
+	[data-list-item][data-interactive='true']:active {
+		background: var(--dry-list-item-active-bg);
+	}
+
+	[data-list-item][data-interactive='true']:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: -2px;
+	}
+
+	[data-list-item][data-disabled='true'] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	[data-list-item][data-dense='true'] {
+		--dry-list-item-padding: var(--dry-space-1_5) var(--dry-space-2);
+	}
+</style>

package/dist/list/list-root.svelte

@@ -66,75 +66,4 @@
 		--dry-list-padding: 0;
 	}
 
-	[data-list-item] {
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr);
-		align-items: start;
-		gap: var(--dry-list-item-gap);
-		padding: var(--dry-list-item-padding);
-		border-radius: var(--dry-list-item-radius);
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-list-item][data-interactive='true'] {
-		cursor: pointer;
-	}
-
-	[data-list-item][data-interactive='true']:hover,
-	[data-list-item][data-interactive='true']:focus-visible {
-		background: var(--dry-list-item-hover-bg);
-	}
-
-	[data-list-item][data-interactive='true']:active {
-		background: var(--dry-list-item-active-bg);
-	}
-
-	[data-list-item][data-interactive='true']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -2px;
-	}
-
-	[data-list-item][data-disabled='true'] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	[data-list-item][data-dense='true'] {
-		--dry-list-item-padding: var(--dry-space-1_5) var(--dry-space-2);
-	}
-
-	[data-list-item-icon] {
-		display: inline-grid;
-		place-items: center;
-		color: var(--dry-list-item-icon-color);
-	}
-
-	[data-list-item-text] {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: var(--dry-space-0_5);
-	}
-
-	[data-list-item-text] > [data-list-item-primary] {
-		font-size: var(--dry-list-primary-size);
-		line-height: 1.5;
-	}
-
-	[data-list-item-text] > [data-list-item-secondary] {
-		font-size: var(--dry-list-secondary-size);
-		color: var(--dry-list-secondary-color);
-		line-height: 1.4;
-	}
-
-	[data-list-subheader] {
-		padding: var(--dry-space-1_5) var(--dry-space-3) var(--dry-space-1);
-		font-size: var(--dry-list-secondary-size);
-		font-weight: 600;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		color: var(--dry-list-subheader-color);
-	}
 </style>

package/dist/list/list-subheader.svelte

@@ -12,3 +12,14 @@
 <li role="presentation" data-list-subheader class={className} {...rest}>
 	{@render children()}
 </li>
+
+<style>
+	[data-list-subheader] {
+		padding: var(--dry-space-1_5) var(--dry-space-3) var(--dry-space-1);
+		font-size: var(--dry-list-secondary-size);
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: var(--dry-list-subheader-color);
+	}
+</style>

package/dist/map/map-marker.svelte

@@ -70,3 +70,13 @@
 		{@render children()}
 	</div>
 {/if}
+
+<style>
+	[data-part='marker-content'] {
+		background: var(--dry-color-bg-raised, #ffffff);
+		border-radius: var(--dry-radius-md, 0.375rem);
+		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+		padding: var(--dry-space-2, 0.5rem);
+		cursor: pointer;
+	}
+</style>

package/dist/map/map-popup.svelte

@@ -61,3 +61,10 @@
 <div bind:this={contentEl} data-part="popup-content">
 	{@render children()}
 </div>
+
+<style>
+	[data-part='popup-content'] {
+		display: grid;
+		grid-template-columns: minmax(0, 20rem);
+	}
+</style>

package/dist/map/map-root.svelte

@@ -223,36 +223,6 @@
 		height: 400px;
 	}
 
-	[data-map-root] [data-map-mapboxgl]-canvas,
-	[data-map-root] [data-map-maplibregl]-canvas {
-		border-radius: var(--dry-map-radius);
-	}
-
-	[data-map-marker] {
-		cursor: pointer;
-	}
-
-	[data-map-marker] [data-part='marker-content'] {
-		background: var(--dry-color-bg-raised, #ffffff);
-		border-radius: var(--dry-radius-md, 0.375rem);
-		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
-		padding: var(--dry-space-2, 0.5rem);
-	}
-
-	[data-map-popup] {
-		display: grid;
-		grid-template-columns: minmax(0, 20rem);
-	}
-
-	[data-map-popup] [data-map-mapboxgl]-popup-content,
-	[data-map-popup] [data-map-maplibregl]-popup-content {
-		background: var(--dry-color-bg-raised, #ffffff);
-		border-radius: var(--dry-radius-lg, 0.5rem);
-		box-shadow: var(--dry-shadow-lg);
-		padding: var(--dry-space-4, 1rem);
-		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
-	}
-
 	[data-part='map-error'] {
 		display: grid;
 		place-items: center;

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

@@ -25,7 +25,7 @@
 		letter-spacing: 0.05em;
 	}
 
-	[data-multi-select-group] + [data-multi-select-group] {
+	[data-multi-select-group]:not(:first-of-type) {
 		border-top: 1px solid var(--dry-color-stroke-weak);
 		margin-top: var(--dry-space-1);
 		padding-top: var(--dry-space-1);

package/dist/radio-group/radio-group-item.svelte

@@ -44,3 +44,93 @@
 		{@render children()}
 	{/if}
 </label>
+
+<style>
+	[data-radio-group-item] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-template-columns: var(--dry-space-8);
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-3);
+		cursor: pointer;
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+		font-family: var(--dry-font-sans);
+		color: var(--dry-color-text-strong);
+		padding: var(--dry-space-1) 0;
+		min-height: 48px;
+		user-select: none;
+
+		&[data-disabled] {
+			color: var(--dry-color-text-disabled);
+			opacity: 1;
+			cursor: not-allowed;
+		}
+	}
+
+	[data-radio-group-item] input[type='radio'] {
+		appearance: none;
+		-webkit-appearance: none;
+		height: var(--dry-space-8);
+		min-height: var(--dry-space-8);
+		border: 2px solid var(--dry-color-stroke-strong);
+		border-radius: var(--dry-radius-full);
+		background: var(--dry-color-bg-raised);
+		margin: 0;
+		cursor: pointer;
+		position: relative;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			background-color var(--dry-duration-fast) var(--dry-ease-default),
+			transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-radio-group-item] input[type='radio']::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%) scale(0);
+		height: 8px;
+		aspect-ratio: 1;
+		border-radius: var(--dry-radius-full);
+		background: var(--dry-color-on-brand);
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-radio-group-item] input[type='radio']:hover:not(:disabled) {
+		border-color: var(--dry-color-stroke-selected);
+	}
+
+	[data-radio-group-item] input[type='radio']:active:not(:disabled) {
+		transform: scale(0.96);
+	}
+
+	[data-radio-group-item] input[type='radio']:focus-visible {
+		outline: 2px solid var(--dry-color-stroke-focus);
+		outline-offset: 2px;
+	}
+
+	[data-radio-group-item] input[type='radio']:checked {
+		background: var(--dry-color-fill-selected);
+		border-color: var(--dry-color-stroke-selected);
+		box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
+	}
+
+	[data-radio-group-item] input[type='radio']:checked::after {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	[data-radio-group-item] input[type='radio']:checked:hover:not(:disabled) {
+		background: var(--dry-color-fill-selected);
+		border-color: var(--dry-color-stroke-selected);
+	}
+
+	[data-radio-group-item] input[type='radio']:disabled {
+		background: var(--dry-color-fill-disabled);
+		border-color: var(--dry-color-stroke-disabled);
+		opacity: 1;
+		cursor: not-allowed;
+	}
+</style>

package/dist/radio-group/radio-group.svelte

@@ -115,93 +115,4 @@
 		}
 	}
 
-	[data-radio-group-item] {
-		/* Label styling */
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-template-columns: var(--dry-space-8);
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-3);
-		cursor: pointer;
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-strong);
-		padding: var(--dry-space-1) 0;
-		min-height: 48px;
-		user-select: none;
-
-		&[data-disabled] {
-			color: var(--dry-color-text-disabled);
-			opacity: 1;
-			cursor: not-allowed;
-		}
-
-		/* Custom radio input */
-		& input[type='radio'] {
-			appearance: none;
-			-webkit-appearance: none;
-			height: var(--dry-space-8);
-			min-height: var(--dry-space-8);
-			border: 2px solid var(--dry-color-stroke-strong);
-			border-radius: var(--dry-radius-full);
-			background: var(--dry-color-bg-raised);
-			margin: 0;
-			cursor: pointer;
-			position: relative;
-			transition:
-				border-color var(--dry-duration-fast) var(--dry-ease-default),
-				background-color var(--dry-duration-fast) var(--dry-ease-default),
-				transform var(--dry-duration-fast) var(--dry-ease-default);
-
-			&::after {
-				content: '';
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%) scale(0);
-				height: 8px;
-				aspect-ratio: 1;
-				border-radius: var(--dry-radius-full);
-				background: var(--dry-color-on-brand);
-				transition: transform var(--dry-duration-fast) var(--dry-ease-default);
-			}
-
-			&:hover:not(:disabled) {
-				border-color: var(--dry-color-stroke-selected);
-			}
-
-			&:active:not(:disabled) {
-				transform: scale(0.96);
-			}
-
-			&:focus-visible {
-				outline: 2px solid var(--dry-color-stroke-focus);
-				outline-offset: 2px;
-			}
-
-			&:checked {
-				background: var(--dry-color-fill-selected);
-				border-color: var(--dry-color-stroke-selected);
-				box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
-
-				&::after {
-					transform: translate(-50%, -50%) scale(1);
-				}
-
-				&:hover:not(:disabled) {
-					background: var(--dry-color-fill-selected);
-					border-color: var(--dry-color-stroke-selected);
-				}
-			}
-
-			&:disabled {
-				background: var(--dry-color-fill-disabled);
-				border-color: var(--dry-color-stroke-disabled);
-				opacity: 1;
-				cursor: not-allowed;
-			}
-		}
-	}
 </style>

package/dist/range-calendar/range-calendar-grid.svelte

@@ -157,9 +157,8 @@
 						{@const disabled = isDayDisabled(day)}
 						{@const focused = isSameDay(day, ctx.focusedDate)}
 						{@const isoStr = getDayISOString(day)}
-						<div>
+						<div role="gridcell" aria-selected={inRange || undefined}>
 							<button
-								role="gridcell"
 								type="button"
 								tabindex={focused ? 0 : -1}
 								aria-label={formatDate(day, ctx.locale, {
@@ -167,7 +166,6 @@
 									month: 'long',
 									day: 'numeric'
 								})}
-								aria-selected={inRange || undefined}
 								aria-disabled={disabled}
 								data-calendar-day={isoStr}
 								data-today={today ? '' : undefined}
@@ -292,18 +290,20 @@
 			outline-offset: 1px;
 		}
 
-		[role='gridcell'] button[data-today]:not([data-selected]) {
+		[role='gridcell'] button[data-today]:not([data-range-start]):not([data-range-end]) {
 			color: var(--dry-range-calendar-today-color);
 			font-weight: 600;
 		}
 
-		[role='gridcell'] button[data-selected] {
+		[role='gridcell'] button[data-range-start],
+		[role='gridcell'] button[data-range-end] {
 			background: var(--dry-range-calendar-selected-bg);
 			color: var(--dry-range-calendar-selected-color);
 			font-weight: 600;
 		}
 
-		[role='gridcell'] button[data-selected]:hover:not([data-disabled]) {
+		[role='gridcell'] button[data-range-start]:hover:not([data-disabled]),
+		[role='gridcell'] button[data-range-end]:hover:not([data-disabled]) {
 			background: var(--dry-range-calendar-selected-hover-bg);
 		}