@dryui/ui 0.0.7 → 0.1.1

package/dist/rich-text-editor/rich-text-editor-root.svelte

@@ -15,7 +15,6 @@
 
 <RichTextEditorPrimitive.Root bind:value data-part="root" {children} {...rest} />
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-part='root'] {
 		--dry-rte-border: var(--dry-color-stroke-weak);
@@ -36,224 +35,4 @@
 		opacity: 0.7;
 		pointer-events: none;
 	}
-
-	[data-part='toolbar'] {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
-		align-items: center;
-		gap: var(--dry-space-1);
-		padding: var(--dry-space-1) var(--dry-space-2);
-		background: var(--dry-rte-toolbar-bg);
-		border-bottom: 1px solid var(--dry-rte-border);
-	}
-
-	[data-part='toolbarGroup'] {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-0_5);
-	}
-
-	[data-part='separator'] {
-		height: var(--dry-space-5);
-		border-inline-start: 1px solid var(--dry-rte-border);
-		margin: 0 var(--dry-space-1);
-	}
-
-	[data-part='button'] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-rte-button-size);
-		aspect-ratio: 1;
-		padding: 0;
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-family: var(--dry-font-sans);
-		font-weight: 600;
-		color: var(--dry-color-text-strong);
-		background: transparent;
-		border: none;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-		line-height: 1;
-	}
-
-	[data-part='button']:hover {
-		background: var(--dry-color-bg-raised);
-	}
-
-	[data-part='button']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -2px;
-	}
-
-	[data-part='button'][data-active='true'] {
-		background: var(--dry-color-fill-brand);
-		color: var(--dry-color-on-brand);
-	}
-
-	[data-part='button'][data-active='true']:hover {
-		background: var(--dry-color-fill-brand-hover);
-	}
-
-	[data-part='buttonItalic'] {
-		font-style: italic;
-	}
-
-	[data-part='buttonUnderline'] {
-		text-decoration: underline;
-	}
-
-	[data-part='buttonStrikethrough'] {
-		text-decoration: line-through;
-	}
-
-	[data-part='content'] {
-		min-height: 8rem;
-		padding: var(--dry-rte-padding);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-base-size));
-		line-height: var(--dry-type-small-leading, var(--dry-text-base-leading));
-		color: var(--dry-color-text-strong);
-		outline: none;
-		overflow-y: auto;
-	}
-
-	[data-part='content']:focus-visible {
-		box-shadow: inset 0 0 0 2px var(--dry-color-focus-ring);
-	}
-
-	/* Placeholder when empty */
-	[data-part='content']:empty::before {
-		content: attr(data-placeholder);
-		color: var(--dry-color-text-weak);
-		pointer-events: none;
-	}
-
-	/* Typography inside the editor content */
-	[data-part='content'] h1 {
-		font-size: var(--dry-type-heading-2-size, var(--dry-text-2xl-size));
-		font-weight: 700;
-		line-height: 1.3;
-		margin: 0 0 0.5em;
-	}
-
-	[data-part='content'] h2 {
-		font-size: var(--dry-type-heading-3-size, var(--dry-text-xl-size));
-		font-weight: 700;
-		line-height: 1.35;
-		margin: 0 0 0.5em;
-	}
-
-	[data-part='content'] h3 {
-		font-size: var(--dry-type-heading-4-size, var(--dry-text-lg-size));
-		font-weight: 600;
-		line-height: 1.4;
-		margin: 0 0 0.5em;
-	}
-
-	[data-part='content'] p {
-		margin: 0 0 0.5em;
-	}
-
-	[data-part='content'] p:last-child {
-		margin-bottom: 0;
-	}
-
-	[data-part='content'] ul,
-	[data-part='content'] ol {
-		margin: 0 0 0.5em;
-		padding-left: 1.5em;
-	}
-
-	[data-part='content'] li {
-		margin-bottom: 0.25em;
-	}
-
-	[data-part='content'] a {
-		color: var(--dry-color-fill-brand);
-		text-decoration: underline;
-	}
-
-	[data-part='content'] a:hover {
-		text-decoration: none;
-	}
-
-	/* Link input popover */
-	[data-part='linkPopover'] {
-		display: grid;
-		grid-template-columns: minmax(12rem, max-content) max-content max-content;
-		align-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-2);
-		background: var(--dry-color-bg-overlay);
-		border: 1px solid var(--dry-rte-border);
-		border-radius: var(--dry-radius-md);
-		box-shadow: var(--dry-shadow-md);
-		position: absolute;
-		z-index: var(--dry-rte-popover-z-index);
-	}
-
-	[data-part='linkInput'] {
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		padding: var(--dry-space-1) var(--dry-space-2);
-		border: 1px solid var(--dry-rte-border);
-		border-radius: var(--dry-radius-sm);
-		outline: none;
-		background: var(--dry-rte-content-bg);
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-part='linkInput']:focus {
-		border-color: var(--dry-color-focus-ring);
-		box-shadow: 0 0 0 1px var(--dry-color-focus-ring);
-	}
-
-	[data-part='linkApply'] {
-		display: inline-grid;
-		place-items: center;
-		padding: var(--dry-space-1) var(--dry-space-2);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		background: var(--dry-color-fill-brand);
-		color: var(--dry-color-on-brand);
-		border: none;
-		border-radius: var(--dry-radius-sm);
-		cursor: pointer;
-	}
-
-	[data-part='linkApply']:hover {
-		opacity: 0.9;
-	}
-
-	[data-part='linkApply']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-part='linkCancel'] {
-		display: inline-grid;
-		place-items: center;
-		padding: var(--dry-space-1) var(--dry-space-2);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		background: transparent;
-		color: var(--dry-color-text-weak);
-		border: 1px solid var(--dry-rte-border);
-		border-radius: var(--dry-radius-sm);
-		cursor: pointer;
-	}
-
-	[data-part='linkCancel']:hover {
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-part='linkCancel']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
 </style>

package/dist/rich-text-editor/rich-text-editor-toolbar.svelte

@@ -336,7 +336,156 @@
 </RichTextEditorPrimitive.Toolbar>
 
 <style>
+	[data-part='toolbar'] {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
+		align-items: center;
+		gap: var(--dry-space-1);
+		padding: var(--dry-space-1) var(--dry-space-2);
+		background: var(--dry-rte-toolbar-bg);
+		border-bottom: 1px solid var(--dry-rte-border);
+	}
+
+	[data-part='toolbarGroup'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-0_5);
+	}
+
+	[data-part='separator'] {
+		height: var(--dry-space-5);
+		border-inline-start: 1px solid var(--dry-rte-border);
+		margin: 0 var(--dry-space-1);
+	}
+
+	[data-part='button'] {
+		display: inline-grid;
+		place-items: center;
+		height: var(--dry-rte-button-size);
+		aspect-ratio: 1;
+		padding: 0;
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		font-family: var(--dry-font-sans);
+		font-weight: 600;
+		color: var(--dry-color-text-strong);
+		background: transparent;
+		border: none;
+		border-radius: var(--dry-radius-md);
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+		line-height: 1;
+	}
+
+	[data-part='button']:hover {
+		background: var(--dry-color-bg-raised);
+	}
+
+	[data-part='button']:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: -2px;
+	}
+
+	[data-part='button'][data-active='true'] {
+		background: var(--dry-color-fill-brand);
+		color: var(--dry-color-on-brand);
+	}
+
+	[data-part='button'][data-active='true']:hover {
+		background: var(--dry-color-fill-brand-hover);
+	}
+
+	[data-part='buttonItalic'] {
+		font-style: italic;
+	}
+
+	[data-part='buttonUnderline'] {
+		text-decoration: underline;
+	}
+
+	[data-part='buttonStrikethrough'] {
+		text-decoration: line-through;
+	}
+
 	.toolbarGroupRelative {
 		position: relative;
 	}
+
+	/* Link input popover */
+	[data-part='linkPopover'] {
+		display: grid;
+		grid-template-columns: minmax(12rem, max-content) max-content max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-2);
+		background: var(--dry-color-bg-overlay);
+		border: 1px solid var(--dry-rte-border);
+		border-radius: var(--dry-radius-md);
+		box-shadow: var(--dry-shadow-md);
+		position: absolute;
+		z-index: var(--dry-rte-popover-z-index);
+	}
+
+	[data-part='linkInput'] {
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		padding: var(--dry-space-1) var(--dry-space-2);
+		border: 1px solid var(--dry-rte-border);
+		border-radius: var(--dry-radius-sm);
+		outline: none;
+		background: var(--dry-rte-content-bg);
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-part='linkInput']:focus {
+		border-color: var(--dry-color-focus-ring);
+		box-shadow: 0 0 0 1px var(--dry-color-focus-ring);
+	}
+
+	[data-part='linkApply'] {
+		display: inline-grid;
+		place-items: center;
+		padding: var(--dry-space-1) var(--dry-space-2);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		background: var(--dry-color-fill-brand);
+		color: var(--dry-color-on-brand);
+		border: none;
+		border-radius: var(--dry-radius-sm);
+		cursor: pointer;
+	}
+
+	[data-part='linkApply']:hover {
+		opacity: 0.9;
+	}
+
+	[data-part='linkApply']:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 2px;
+	}
+
+	[data-part='linkCancel'] {
+		display: inline-grid;
+		place-items: center;
+		padding: var(--dry-space-1) var(--dry-space-2);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		background: transparent;
+		color: var(--dry-color-text-weak);
+		border: 1px solid var(--dry-rte-border);
+		border-radius: var(--dry-radius-sm);
+		cursor: pointer;
+	}
+
+	[data-part='linkCancel']:hover {
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-part='linkCancel']:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 2px;
+	}
 </style>

package/dist/shader-canvas/shader-canvas.svelte

@@ -110,7 +110,6 @@
 	</ShaderCanvasPrimitive>
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-shader-canvas-root] {
 		display: grid;

package/dist/sidebar/sidebar-content.svelte

@@ -21,27 +21,20 @@
 		gap: var(--dry-sidebar-content-gap, var(--dry-space-3));
 		padding: var(--dry-sidebar-content-padding);
 		min-height: 0;
-		overflow: auto;
-		scrollbar-width: thin;
-		scrollbar-color: transparent transparent;
+		overflow: var(--dry-sidebar-content-overflow, auto);
+		scrollbar-gutter: var(--dry-sidebar-content-scrollbar-gutter, auto);
+		scrollbar-width: var(--dry-sidebar-content-scrollbar-width, thin);
+		scrollbar-color: var(--dry-scrollbar-thumb) transparent;
 		transition: scrollbar-color var(--dry-duration-normal) var(--dry-ease-emphasized);
 
-		&:hover {
-			scrollbar-color: var(--dry-scrollbar-thumb) var(--dry-scrollbar-track);
-		}
-
-		&::-webkit-scrollbar {
-			height: 6px;
-		}
 		&::-webkit-scrollbar-track {
 			background: transparent;
 		}
 		&::-webkit-scrollbar-thumb {
-			background: transparent;
-			border-radius: var(--dry-radius-full);
-		}
-		&:hover::-webkit-scrollbar-thumb {
 			background: var(--dry-scrollbar-thumb);
+			border: 0;
+			background-clip: border-box;
+			border-radius: var(--dry-radius-full);
 		}
 		&::-webkit-scrollbar-thumb:hover {
 			background: var(--dry-scrollbar-thumb-hover);

package/dist/sidebar/sidebar-group-label.svelte

@@ -26,14 +26,20 @@
 		position: sticky;
 		top: calc(-1 * var(--dry-sidebar-content-padding));
 		z-index: 1;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		align-items: center;
 		margin-inline: calc(-1 * var(--dry-sidebar-content-padding));
-		padding-block: var(--dry-space-2);
+		min-height: var(--dry-sidebar-group-label-min-height, var(--dry-space-8));
+		padding-block: var(--dry-sidebar-group-label-padding-y, var(--dry-space-3))
+			var(--dry-sidebar-group-label-padding-bottom, var(--dry-space-2));
 		padding-inline: calc(var(--dry-sidebar-content-padding) + var(--dry-sidebar-item-padding-x));
 		background: var(--dry-sidebar-bg, var(--dry-color-bg-raised));
 		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		font-weight: 600;
-		letter-spacing: 0.04em;
+		font-weight: var(--dry-sidebar-group-label-weight, 700);
+		letter-spacing: var(--dry-sidebar-group-label-letter-spacing, 0.12em);
+		line-height: var(--dry-sidebar-group-label-line-height, 1.1);
 		text-transform: uppercase;
-		color: var(--dry-color-text-weak);
+		color: var(--dry-sidebar-group-label-color, var(--dry-color-text-weak));
 	}
 </style>

package/dist/sidebar/sidebar-group.svelte

@@ -17,5 +17,13 @@
 	[data-sidebar-group] {
 		display: grid;
 		gap: var(--dry-sidebar-group-gap, var(--dry-space-1));
+		padding-block: var(--dry-sidebar-group-padding-y, var(--dry-space-2));
+	}
+
+	[data-sidebar-group]:not(:first-child) {
+		margin-block-start: var(--dry-sidebar-group-stack-gap, var(--dry-space-1));
+		padding-block-start: var(--dry-sidebar-group-stack-padding, var(--dry-space-4));
+		border-top: 1px solid
+			var(--dry-sidebar-group-divider, var(--dry-sidebar-border, var(--dry-color-stroke-weak)));
 	}
 </style>

package/dist/sidebar/sidebar-header.svelte

@@ -17,11 +17,15 @@
 	[data-sidebar-header] {
 		grid-row: 1;
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-3) var(--dry-space-6);
+		grid-template-columns: minmax(0, 1fr);
+		align-content: start;
+		justify-items: start;
+		gap: var(--dry-sidebar-header-gap, var(--dry-space-1));
+		padding: var(--dry-sidebar-header-padding, var(--dry-space-5) var(--dry-space-6) var(--dry-space-4));
 		border-bottom: 1px solid var(--dry-sidebar-border, var(--dry-color-stroke-weak));
+		color: var(--dry-sidebar-header-color, var(--dry-color-text-strong));
+		font-size: var(--dry-sidebar-header-size, var(--dry-text-base-size, 1rem));
+		font-weight: var(--dry-sidebar-header-weight, 600);
+		line-height: var(--dry-sidebar-header-line-height, 1.2);
 	}
 </style>

package/dist/sidebar/sidebar-root.svelte

@@ -55,7 +55,7 @@
 		grid-template-columns: var(--dry-sidebar-width, 320px);
 		grid-template-rows: auto 1fr auto;
 		height: 100%;
-		overflow: hidden;
+		overflow: var(--dry-sidebar-overflow, hidden);
 		background: var(--dry-sidebar-bg, var(--dry-chrome-bg, var(--dry-color-bg-raised)));
 		font-family: var(--dry-font-sans);
 	}

package/dist/sidebar/sidebar-trigger.svelte

@@ -26,7 +26,6 @@
 	{/if}
 </button>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-sidebar-trigger] {
 		display: grid;

package/dist/system-map/system-map.svelte

@@ -674,7 +674,6 @@
 	{/if}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-system-map] {
 		--dry-system-map-bg: var(--dry-color-bg-raised);

package/dist/tabs/tabs-root.svelte

@@ -38,6 +38,22 @@
 	});
 </script>
 
-<div data-orientation={orientation} class={className} {...rest}>
+<div data-tabs-root data-orientation={orientation} class={className} {...rest}>
 	{@render children()}
 </div>
+
+<style>
+	[data-tabs-root] {
+		--dry-tabs-trigger-border-bottom: 4px solid transparent;
+		--dry-tabs-trigger-border-right: none;
+		--dry-tabs-trigger-active-border-bottom-color: var(--dry-color-stroke-selected);
+		--dry-tabs-trigger-active-border-right-color: transparent;
+	}
+
+	[data-tabs-root][data-orientation='vertical'] {
+		--dry-tabs-trigger-border-bottom: none;
+		--dry-tabs-trigger-border-right: 4px solid transparent;
+		--dry-tabs-trigger-active-border-bottom-color: transparent;
+		--dry-tabs-trigger-active-border-right-color: var(--dry-color-stroke-selected);
+	}
+</style>

package/dist/tabs/tabs-trigger.svelte

@@ -48,7 +48,6 @@
 	{@render children()}
 </button>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-tabs-trigger] {
 		--dry-tabs-padding-x: var(--dry-space-4);
@@ -65,7 +64,8 @@
 		color: var(--dry-color-text-weak);
 		background: transparent;
 		border: none;
-		border-bottom: 4px solid transparent;
+		border-bottom: var(--dry-tabs-trigger-border-bottom, 4px solid transparent);
+		border-right: var(--dry-tabs-trigger-border-right, none);
 		cursor: pointer;
 		white-space: nowrap;
 		transition:
@@ -85,7 +85,8 @@
 
 	[data-tabs-trigger][data-state='active'] {
 		color: var(--dry-color-text-brand);
-		border-bottom-color: var(--dry-color-stroke-selected);
+		border-bottom-color: var(--dry-tabs-trigger-active-border-bottom-color, var(--dry-color-stroke-selected));
+		border-right-color: var(--dry-tabs-trigger-active-border-right-color, transparent);
 		font-weight: 600;
 	}
 
@@ -93,16 +94,6 @@
 		transform: translateY(1px);
 	}
 
-	[data-orientation='vertical'] [data-tabs-trigger] {
-		border-bottom: none;
-		border-right: 4px solid transparent;
-	}
-
-	[data-orientation='vertical'] [data-tabs-trigger][data-state='active'] {
-		border-right-color: var(--dry-color-stroke-selected);
-		border-bottom-color: transparent;
-	}
-
 	[data-tabs-trigger][data-disabled] {
 		color: var(--dry-color-text-disabled);
 		opacity: 1;

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

@@ -85,7 +85,7 @@
 
 	[data-part='root'] {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(80px, max-content));
+		grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
 		gap: var(--dry-space-1_5);
 		padding: var(--dry-space-2);
 		border: 1px solid var(--dry-color-stroke-strong);
@@ -99,14 +99,21 @@
 			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
 		cursor: text;
 
+		&:hover:not([data-disabled]) {
+			border-color: var(--dry-color-stroke-strong);
+		}
+
 		&:focus-within {
-			border-color: var(--dry-color-fill-brand);
-			box-shadow: 0 0 0 2px color-mix(in srgb, var(--dry-color-fill-brand) 20%, transparent);
-			outline: none;
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: -1px;
+			border-color: var(--dry-color-stroke-focus);
+			box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
 		}
 
 		&[data-disabled] {
-			opacity: 0.5;
+			background: var(--dry-color-bg-sunken);
+			border-color: var(--dry-color-stroke-disabled);
+			color: var(--dry-color-text-disabled);
 			cursor: not-allowed;
 			pointer-events: none;
 		}

package/dist/tags-input/tags-input-tag-delete.svelte

@@ -35,7 +35,7 @@
 	[data-part='tagDelete'] {
 		display: inline-grid;
 		place-items: center;
-		height: 16px;
+		height: var(--dry-space-4);
 		aspect-ratio: 1;
 		padding: 0;
 		border: none;
@@ -50,7 +50,7 @@
 
 		&::after {
 			content: '\00d7';
-			font-size: 14px;
+			font-size: 1em;
 			line-height: 1;
 			font-weight: 400;
 		}

package/dist/tags-input/tags-input-tag.svelte

@@ -35,7 +35,7 @@
 		grid-auto-columns: max-content;
 		align-items: center;
 		gap: var(--dry-space-1);
-		padding: 4px var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
+		padding: var(--dry-space-1) var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
 		background: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
 		color: var(--dry-color-fill-brand);
 		border-radius: var(--dry-radius-full);

package/dist/transfer/transfer-item.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getTransferCtx } from './context.svelte.js';
+	import { Checkbox } from '../checkbox/index.js';
 
 	interface Props extends HTMLAttributes<HTMLLabelElement> {
 		key: string;
@@ -32,6 +33,6 @@
 	aria-disabled={disabled}
 	{...rest}
 >
-	<input type="checkbox" checked={isSelected} {disabled} onchange={toggle} />
+	<Checkbox checked={isSelected} {disabled} onchange={toggle} size="sm" />
 	{@render children()}
 </label>