@dryui/ui 0.0.7 → 0.1.0

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

@@ -87,3 +87,37 @@
 >
 	{@render children()}
 </div>
+
+<style>
+	[data-notification-center-panel] {
+		/* Reset UA popover defaults */
+		inset: unset;
+		margin: 0;
+
+		display: grid;
+		grid-template-columns: var(--dry-nc-panel-width, 24rem);
+		max-height: 28rem;
+		overflow-y: auto;
+		background: var(--dry-color-bg-raised, #ffffff);
+		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		border-radius: var(--dry-radius-lg, 0.5rem);
+		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+		padding: 0;
+
+		&:popover-open {
+			opacity: 1;
+			transform: scale(1);
+		}
+
+		@starting-style {
+			&:popover-open {
+				opacity: 0;
+				transform: scale(0.95);
+			}
+		}
+
+		transition:
+			opacity var(--dry-duration-fast, 150ms) var(--dry-ease-out, ease-out),
+			transform var(--dry-duration-fast, 150ms) var(--dry-ease-out, ease-out);
+	}
+</style>

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

@@ -62,94 +62,13 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-notification-center-root] {
-		position: relative;
-		display: inline-grid;
-	}
-
-	[data-notification-center-panel] {
 		--dry-nc-panel-width: 24rem;
 		--dry-nc-item-padding: var(--dry-space-3, 0.75rem);
 		--dry-nc-unread-bg: var(--dry-color-fill-brand-weak);
 
-		/* Reset UA popover defaults */
-		inset: unset;
-		margin: 0;
-
-		display: grid;
-		grid-template-columns: var(--dry-nc-panel-width);
-		max-height: 28rem;
-		overflow-y: auto;
-		background: var(--dry-color-bg-raised, #ffffff);
-		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
-		border-radius: var(--dry-radius-lg, 0.5rem);
-		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
-		padding: 0;
-
-		&:popover-open {
-			opacity: 1;
-			transform: scale(1);
-		}
-
-		@starting-style {
-			&:popover-open {
-				opacity: 0;
-				transform: scale(0.95);
-			}
-		}
-
-		transition:
-			opacity var(--dry-duration-fast, 150ms) var(--dry-ease-out, ease-out),
-			transform var(--dry-duration-fast, 150ms) var(--dry-ease-out, ease-out);
-	}
-
-	[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);
-	}
-
-	[data-notification-center-group] [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);
-	}
-
-	[data-notification-center-trigger] {
 		position: relative;
-	}
-
-	[data-theme='dark'] [data-notification-center-panel] {
-		background: var(--dry-color-bg-raised, #1e1e2e);
-	}
-
-	[data-theme='dark'] [data-notification-center-item][data-state='unread'] {
-		background: rgba(59, 130, 246, 0.1);
+		display: inline-grid;
 	}
 </style>

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

@@ -40,6 +40,7 @@
 
 <style>
 	[data-notification-center-trigger] {
+		position: relative;
 		display: inline-grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;

package/dist/option-swatch-group/option-swatch-group-root.svelte

@@ -69,7 +69,7 @@
 		--dry-option-swatch-muted: var(--dry-color-text-weak);
 
 		display: grid;
-		grid-template-columns: auto minmax(0, 1fr);
+		grid-template-columns: 1.5rem minmax(0, 1fr);
 		align-items: center;
 		gap: var(--dry-space-3);
 		padding: var(--dry-space-3);

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

@@ -48,7 +48,6 @@
 <style>
 	[data-pin-input-cell] {
 		display: grid;
-		grid-template-columns: 1px;
 		place-items: center;
 		aspect-ratio: 1;
 		height: var(--dry-pin-size);
@@ -96,7 +95,7 @@
 
 	[data-pin-input-caret] {
 		height: 60%;
-		background: var(--dry-pin-caret-color);
+		border-inline-start: 2px solid var(--dry-pin-caret-color);
 		animation: caret-blink 1.25s ease-out infinite;
 	}
 

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

@@ -98,7 +98,6 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-radio-group-root] {
 		display: grid;

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

@@ -190,3 +190,142 @@
 		</div>
 	</div>
 </div>
+
+<style>
+	[data-range-calendar-grid] {
+		display: grid;
+		gap: var(--dry-space-2);
+
+		[role='group'] {
+			display: grid;
+			gap: var(--dry-space-2);
+		}
+
+		[role='group'] > div:first-child {
+			display: grid;
+			grid-template-columns: auto 1fr auto;
+			align-items: center;
+			gap: var(--dry-space-2);
+		}
+
+		[role='group'] > div:first-child button {
+			display: inline-grid;
+			place-items: center;
+			height: var(--dry-space-8);
+			aspect-ratio: 1;
+			border: 1px solid transparent;
+			border-radius: var(--dry-range-calendar-day-radius);
+			background: transparent;
+			color: var(--dry-color-text-strong);
+			cursor: pointer;
+			transition:
+				background var(--dry-duration-fast) var(--dry-ease-default),
+				border-color var(--dry-duration-fast) var(--dry-ease-default);
+		}
+
+		[role='group'] > div:first-child button:hover:not([disabled]) {
+			background: var(--dry-range-calendar-day-hover-bg);
+			border-color: var(--dry-color-stroke-strong);
+		}
+
+		[role='group'] > div:first-child button:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: 1px;
+		}
+
+		[role='group'] > div:first-child span {
+			font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+			font-weight: 600;
+			letter-spacing: -0.01em;
+		}
+
+		[role='grid'] {
+			display: grid;
+			gap: 1px;
+		}
+
+		[role='row'] {
+			display: grid;
+			grid-template-columns: repeat(7, minmax(0, 1fr));
+			gap: 1px;
+		}
+
+		[role='columnheader'] {
+			display: grid;
+			place-items: center;
+			min-height: var(--dry-space-8);
+			font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
+			color: var(--dry-range-calendar-outside-color);
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+		}
+
+		[role='gridcell'] {
+			display: grid;
+			place-items: center;
+		}
+
+		[role='gridcell'] button {
+			display: inline-grid;
+			place-items: center;
+			min-height: var(--dry-range-calendar-day-size);
+			aspect-ratio: 1;
+			border: none;
+			border-radius: var(--dry-range-calendar-day-radius);
+			background: transparent;
+			color: var(--dry-color-text-strong);
+			font: inherit;
+			font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+			font-variant-numeric: tabular-nums;
+			cursor: pointer;
+			transition:
+				background var(--dry-duration-fast) var(--dry-ease-default),
+				color var(--dry-duration-fast) var(--dry-ease-default);
+		}
+
+		[role='gridcell'] button:hover:not([data-disabled]) {
+			background: var(--dry-range-calendar-day-hover-bg);
+		}
+
+		[role='gridcell'] button:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: 1px;
+		}
+
+		[role='gridcell'] button[data-today]:not([data-selected]) {
+			color: var(--dry-range-calendar-today-color);
+			font-weight: 600;
+		}
+
+		[role='gridcell'] button[data-selected] {
+			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]) {
+			background: var(--dry-range-calendar-selected-hover-bg);
+		}
+
+		[role='gridcell'] button[data-in-range] {
+			background: var(--dry-range-calendar-range-bg);
+			border-radius: 0;
+		}
+
+		[role='gridcell'] button[data-range-start],
+		[role='gridcell'] button[data-range-end] {
+			border-radius: var(--dry-range-calendar-day-radius);
+		}
+
+		[role='gridcell'] button[data-outside-month] {
+			color: var(--dry-range-calendar-outside-color);
+			opacity: 0.6;
+		}
+
+		[role='gridcell'] button[data-disabled] {
+			cursor: not-allowed;
+			opacity: 0.4;
+			pointer-events: none;
+		}
+	}
+</style>

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

@@ -110,7 +110,6 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-range-calendar-root] {
 		--dry-range-calendar-bg: var(--dry-color-bg-overlay);
@@ -139,168 +138,5 @@
 		font-family: var(--dry-font-sans);
 	}
 
-	[data-range-calendar-grid] {
-		display: grid;
-		gap: var(--dry-space-2);
-
-		[role='group'] {
-			display: grid;
-			gap: var(--dry-space-2);
-		}
-
-		[role='group'] > div:first-child {
-			display: grid;
-			grid-template-columns: auto 1fr auto;
-			align-items: center;
-			gap: var(--dry-space-2);
-		}
-
-		[role='group'] > div:first-child button {
-			display: inline-grid;
-			place-items: center;
-			height: var(--dry-space-8);
-			aspect-ratio: 1;
-			border: 1px solid transparent;
-			border-radius: var(--dry-range-calendar-day-radius);
-			background: transparent;
-			color: var(--dry-color-text-strong);
-			cursor: pointer;
-			transition:
-				background var(--dry-duration-fast) var(--dry-ease-default),
-				border-color var(--dry-duration-fast) var(--dry-ease-default);
-		}
-
-		[role='group'] > div:first-child button:hover:not([disabled]) {
-			background: var(--dry-range-calendar-day-hover-bg);
-			border-color: var(--dry-color-stroke-strong);
-		}
-
-		[role='group'] > div:first-child button:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 1px;
-		}
-
-		[role='group'] > div:first-child span {
-			font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-			font-weight: 600;
-			letter-spacing: -0.01em;
-		}
-
-		[role='grid'] {
-			display: grid;
-			gap: 1px;
-		}
-
-		[role='row'] {
-			display: grid;
-			grid-template-columns: repeat(7, minmax(0, 1fr));
-			gap: 1px;
-		}
-
-		[role='columnheader'] {
-			display: grid;
-			place-items: center;
-			min-height: var(--dry-space-8);
-			font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
-			color: var(--dry-range-calendar-outside-color);
-			text-transform: uppercase;
-			letter-spacing: 0.04em;
-		}
-
-		[role='gridcell'] {
-			display: grid;
-			place-items: center;
-		}
 
-		[role='gridcell'] button {
-			display: inline-grid;
-			place-items: center;
-			min-height: var(--dry-range-calendar-day-size);
-			aspect-ratio: 1;
-			border: none;
-			border-radius: var(--dry-range-calendar-day-radius);
-			background: transparent;
-			color: var(--dry-color-text-strong);
-			font: inherit;
-			font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-			font-variant-numeric: tabular-nums;
-			cursor: pointer;
-			transition:
-				background var(--dry-duration-fast) var(--dry-ease-default),
-				color var(--dry-duration-fast) var(--dry-ease-default);
-		}
-
-		[role='gridcell'] button:hover:not([data-disabled]) {
-			background: var(--dry-range-calendar-day-hover-bg);
-		}
-
-		[role='gridcell'] button:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 1px;
-		}
-
-		[role='gridcell'] button[data-today]:not([data-selected]) {
-			color: var(--dry-range-calendar-today-color);
-			font-weight: 600;
-		}
-
-		[role='gridcell'] button[data-selected] {
-			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]) {
-			background: var(--dry-range-calendar-selected-hover-bg);
-		}
-
-		[role='gridcell'] button[data-in-range] {
-			background: var(--dry-range-calendar-range-bg);
-			border-radius: 0;
-		}
-
-		[role='gridcell'] button[data-range-start],
-		[role='gridcell'] button[data-range-end] {
-			border-radius: var(--dry-range-calendar-day-radius);
-		}
-
-		[role='gridcell'] button[data-outside-month] {
-			color: var(--dry-range-calendar-outside-color);
-			opacity: 0.6;
-		}
-
-		[role='gridcell'] button[data-disabled] {
-			cursor: not-allowed;
-			opacity: 0.4;
-			pointer-events: none;
-		}
-	}
-
-	[data-theme='dark'] [data-range-calendar-root] {
-		--dry-range-calendar-bg: var(--dry-color-bg-raised);
-		--dry-range-calendar-border: var(--dry-color-stroke-weak);
-		--dry-range-calendar-day-hover-bg: color-mix(
-			in srgb,
-			var(--dry-color-bg-overlay) 70%,
-			transparent
-		);
-		--dry-range-calendar-range-bg: color-mix(in srgb, var(--dry-color-fill-brand) 20%, transparent);
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.theme-auto [data-range-calendar-root] {
-			--dry-range-calendar-bg: var(--dry-color-bg-raised);
-			--dry-range-calendar-border: var(--dry-color-stroke-weak);
-			--dry-range-calendar-day-hover-bg: color-mix(
-				in srgb,
-				var(--dry-color-bg-overlay) 70%,
-				transparent
-			);
-			--dry-range-calendar-range-bg: color-mix(
-				in srgb,
-				var(--dry-color-fill-brand) 20%,
-				transparent
-			);
-		}
-	}
 </style>

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

@@ -8,3 +8,76 @@
 </script>
 
 <RichTextEditorPrimitive.Content data-part="content" {...rest} />
+
+<style>
+	[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;
+	}
+</style>