@hyvor/design 2.1.18 → 2.1.20-beta.1

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -12,72 +12,71 @@
 	{@render children?.()}
 </div>
 
-<style>.button-group {
-  display: inline-flex;
-}
-
-.button-group.column {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.button-group :global(> .button) {
-  position: relative;
-}
-
-.button-group :global(> .button:hover),
-.button-group :global(> .button:focus-visible) {
-  z-index: 1;
-}
-
-.button-group:not(.column) :global(> .button:not(:first-child)) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.button-group:not(.column) :global(> .button:not(:last-child)) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
+<style>
+	.button-group {
+		display: inline-flex;
+	}
 
-.button-group.column :global(> .button:not(:first-child)) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
+	.button-group.column {
+		flex-direction: column;
+		align-items: stretch;
+	}
 
-.button-group.column :global(> .button:not(:last-child)) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
+	.button-group :global(> .button) {
+		position: relative;
+	}
+	.button-group :global(> .button:hover),
+	.button-group :global(> .button:focus-visible) {
+		z-index: 1;
+	}
 
-.button-group:not(.column) :global(> .button:not(:first-child)) {
-  margin-left: -1px;
-}
+	.button-group:not(.column) :global(> .button:not(:first-child)) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+	.button-group:not(.column) :global(> .button:not(:last-child)) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
 
-.button-group.column :global(> .button:not(:first-child)) {
-  margin-top: -1px;
-}
+	.button-group.column :global(> .button:not(:first-child)) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	.button-group.column :global(> .button:not(:last-child)) {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
 
-.button-group:not(.no-divider):not(.column) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
-  content: "";
-  position: absolute;
-  top: 22%;
-  bottom: 22%;
-  left: 0;
-  width: 1px;
-  background-color: currentColor;
-  opacity: 0.25;
-  pointer-events: none;
-}
+	.button-group:not(.column) :global(> .button:not(:first-child)) {
+		margin-left: -1px;
+	}
+	.button-group.column :global(> .button:not(:first-child)) {
+		margin-top: -1px;
+	}
 
-.button-group.column:not(.no-divider) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
-  content: "";
-  position: absolute;
-  left: 22%;
-  right: 22%;
-  top: 0;
-  height: 1px;
-  background-color: currentColor;
-  opacity: 0.25;
-  pointer-events: none;
-}</style>
+	.button-group:not(.no-divider):not(.column)
+		:global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+		content: '';
+		position: absolute;
+		top: 22%;
+		bottom: 22%;
+		left: 0;
+		width: 1px;
+		background-color: currentColor;
+		opacity: 0.25;
+		pointer-events: none;
+	}
+	.button-group.column:not(.no-divider)
+		:global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+		content: '';
+		position: absolute;
+		left: 22%;
+		right: 22%;
+		top: 0;
+		height: 1px;
+		background-color: currentColor;
+		opacity: 0.25;
+		pointer-events: none;
+	}
+</style>

package/dist/components/Dropdown/Dropdown.svelte

@@ -13,6 +13,7 @@
 		trigger?: Snippet;
 		content?: Snippet;
 		contentPadding?: number;
+		keepInDom?: boolean;
 	}
 
 	let {
@@ -24,18 +25,18 @@
 		position = 'bottom',
 		trigger,
 		content,
-		contentPadding
+		contentPadding,
+		keepInDom = false
 	}: Props = $props();
 
 	let triggerEl: HTMLElement | undefined = $state();
 </script>
 
 <span class="dropdown" class:relative>
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 	<span
 		class="trigger"
 		onclick={() => (show = !show)}
-		role="listbox"
-		tabindex="0"
 		onkeyup={(e) => {
 			if (e.key === 'Escape') {
 				show = false;
@@ -46,7 +47,7 @@
 		{@render trigger?.()}
 	</span>
 
-	{#if show}
+	{#if show || keepInDom}
 		<DropdownContent
 			bind:show
 			{width}
@@ -62,11 +63,12 @@
 	{/if}
 </span>
 
-<style>.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown.relative > :global(.content-wrap) {
-  position: relative !important;
-}</style>
+<style>
+	.dropdown {
+		position: relative;
+		display: inline-block;
+	}
+	.dropdown.relative > :global(.content-wrap) {
+		position: relative !important;
+	}
+</style>

package/dist/components/Dropdown/Dropdown.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     trigger?: Snippet;
     content?: Snippet;
     contentPadding?: number;
+    keepInDom?: boolean;
 }
 declare const Dropdown: import("svelte").Component<Props, {}, "show">;
 type Dropdown = ReturnType<typeof Dropdown>;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -101,6 +101,7 @@
 	$effect(() => {
 		position;
 		align;
+		show;
 		positionWrap();
 	});
 
@@ -129,8 +130,9 @@
 
 <div
 	class="content-wrap {align} {position}"
+	class:visually-hidden={!show}
 	use:clickOutside={{
-		enabled: closeOnOutsideClick,
+		enabled: closeOnOutsideClick && show,
 		callback: () => (show = false)
 	}}
 	bind:this={contentWrap}
@@ -142,15 +144,21 @@
 	</div>
 </div>
 
-<style>.content-wrap {
-  position: fixed;
-  z-index: 1000000;
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  overflow-y: auto;
-  min-height: 0;
-  overscroll-behavior: contain;
-}</style>
+<style>
+	.content-wrap {
+		position: fixed;
+		z-index: 1000000;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.content-wrap.visually-hidden {
+		display: none;
+	}
+
+	.content {
+		overflow-y: auto;
+		min-height: 0;
+		overscroll-behavior: contain;
+	}
+</style>

package/dist/components/FileUploader/FileUploader.svelte

@@ -126,21 +126,23 @@
 	</Modal>
 </div>
 
-<style>.image-uploader :global(.inner) {
-  height: 100%;
-  width: 1100px !important;
-  display: flex;
-  flex-direction: column;
-}
-.image-uploader :global(.inner) :global(> .content) {
-  flex: 1;
-  padding-top: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
+<style>
+	.image-uploader :global(.inner) {
+		height: 100%;
+		width: 1100px !important;
+		display: flex;
+		flex-direction: column;
+		:global(> .content) {
+			flex: 1;
+			padding-top: 0;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+		}
+	}
 
-.body {
-  flex: 1;
-  min-height: 0;
-}</style>
+	.body {
+		flex: 1;
+		min-height: 0;
+	}
+</style>

package/dist/components/FileUploader/Media/Media.svelte

@@ -72,47 +72,47 @@
 	{/if}
 </div>
 
-<style>.media {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 10px;
-}
-
-.item {
-  display: block;
-  width: 100%;
-  aspect-ratio: 1;
-  padding: 0;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  background: var(--input);
-  cursor: pointer;
-  overflow: hidden;
-  transition: 0.2s box-shadow;
-}
-.item:hover {
-  box-shadow: 0 0 0 2px var(--accent-light);
-}
-.item img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.item .audio-name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 10px;
-  font-size: 13px;
-  text-align: center;
-  word-break: break-word;
-}</style>
+<style>
+	.media {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 10px;
+	}
+	.item {
+		display: block;
+		width: 100%;
+		aspect-ratio: 1;
+		padding: 0;
+		border: 1px solid var(--border);
+		border-radius: 5px;
+		background: var(--input);
+		cursor: pointer;
+		overflow: hidden;
+		transition: 0.2s box-shadow;
+		&:hover {
+			box-shadow: 0 0 0 2px var(--accent-light);
+		}
+		img {
+			display: block;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+		.audio-name {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			padding: 10px;
+			font-size: 13px;
+			text-align: center;
+			word-break: break-word;
+		}
+	}
+</style>

package/dist/components/FileUploader/TabUpload/TabUpload.svelte

@@ -235,48 +235,50 @@
 	{/if}
 </div>
 
-<style>.tab {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 15px;
-}
-
-.upload-wrap {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-}
-.upload-wrap .upload-area {
-  background-color: var(--input);
-  width: 100%;
-  height: 100%;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: var(--text-light);
-  transition: 0.2s box-shadow;
-  cursor: pointer;
-}
-.upload-wrap .upload-area:hover {
-  box-shadow: 0 0 0 2px var(--accent-light);
-}
-
-.by-url-wrap {
-  margin-top: 15px;
-}
-.by-url-wrap .title {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-light);
-  margin-bottom: 10px;
-  padding-left: 5px;
-  text-align: center;
-}
-.by-url-wrap .input-button {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}</style>
+<style>
+	.tab {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		padding-bottom: 15px;
+	}
+
+	.upload-wrap {
+		flex: 1;
+		width: 100%;
+		height: 100%;
+		.upload-area {
+			background-color: var(--input);
+			width: 100%;
+			height: 100%;
+			border-radius: 20px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 14px;
+			color: var(--text-light);
+			transition: 0.2s box-shadow;
+			cursor: pointer;
+			&:hover {
+				box-shadow: 0 0 0 2px var(--accent-light);
+			}
+		}
+	}
+
+	.by-url-wrap {
+		margin-top: 15px;
+		.title {
+			font-size: 0.9rem;
+			font-weight: 500;
+			color: var(--text-light);
+			margin-bottom: 10px;
+			padding-left: 5px;
+			text-align: center;
+		}
+		.input-button {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+		}
+	}
+</style>

package/dist/components/FileUploader/Unsplash/Unsplash.svelte

@@ -116,41 +116,41 @@
 	</div>
 </div>
 
-<style>.unsplash {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.search-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-  gap: 10px;
-}
-
-.results {
-  flex: 1;
-  overflow-y: auto;
-}
-.results .cols {
-  display: flex;
-  gap: 10px;
-}
-.results .col {
-  flex: 1;
-}
-.results .img-wrap {
-  display: block;
-  width: 100%;
-  margin-bottom: 10px;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-.results .img-wrap img {
-  display: block;
-  width: 100%;
-  border-radius: 5px;
-}</style>
+<style>
+	.unsplash {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+	.search-wrap {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15px;
+		gap: 10px;
+	}
+	.results {
+		flex: 1;
+		overflow-y: auto;
+		.cols {
+			display: flex;
+			gap: 10px;
+		}
+		.col {
+			flex: 1;
+		}
+		.img-wrap {
+			display: block;
+			width: 100%;
+			margin-bottom: 10px;
+			padding: 0;
+			border: none;
+			background: none;
+			cursor: pointer;
+			img {
+				display: block;
+				width: 100%;
+				border-radius: 5px;
+			}
+		}
+	}
+</style>

package/dist/components/FormControl/Validation.svelte

@@ -29,34 +29,34 @@
 	</div>
 </div>
 
-<style>.validation {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-}
-
-.icon {
-  margin-right: 8px;
-}
-
-.validation.error {
-  color: var(--red-dark);
-}
-
-.validation.warning {
-  color: var(--orange-dark);
-}
-
-.validation.success {
-  color: var(--green-dark);
-}
+<style>
+	.validation {
+		display: flex;
+		align-items: center;
+		font-size: 14px;
+	}
+	.icon {
+		margin-right: 8px;
+	}
+	.validation.error {
+		color: var(--red-dark);
+	}
+	.validation.warning {
+		color: var(--orange-dark);
+	}
+	.validation.success {
+		color: var(--green-dark);
+	}
 
-:global(:root.dark) .validation.error {
-  color: var(--red);
-}
-:global(:root.dark) .validation.warning {
-  color: var(--orange);
-}
-:global(:root.dark) .validation.success {
-  color: var(--green);
-}</style>
+	:global(:root.dark) {
+		.validation.error {
+			color: var(--red);
+		}
+		.validation.warning {
+			color: var(--orange);
+		}
+		.validation.success {
+			color: var(--green);
+		}
+	}
+</style>