@hyvor/design 2.1.17 → 2.1.19

package/dist/components/Loader/Loader.svelte

@@ -120,81 +120,84 @@
 	{/if}
 </div>
 
-<style>.loader {
-  display: inline-flex;
-  align-items: center;
-}
-.loader .message {
-  margin-left: 10px;
-}
-
-.loader.block {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-.loader.block .message {
-  margin-top: 10px;
-}
-
-.loader.full {
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-.loader.full .message {
-  margin-top: 10px;
-}
-
-.loader-wrap {
-  display: inline-flex;
-  width: var(--local-size);
-  height: var(--local-size);
-  border-radius: var(--local-size);
-  position: relative;
-}
-
-.success-icon,
-.error-icon {
-  animation: scale 0.2s ease-in-out;
-}
-
-svg {
-  width: inherit;
-  height: inherit;
-  display: inherit;
-  box-sizing: inherit;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-circle.progress {
-  transform: rotate(-90deg);
-  transform-origin: center;
-  animation: 0.8s linear 0s infinite normal none running rotate;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(-90deg);
-  }
-  100% {
-    transform: rotate(270deg);
-  }
-}
-@keyframes scale {
-  0% {
-    transform: scale(0.5);
-    opacity: 0.4;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}</style>
+<style>
+	.loader {
+		display: inline-flex;
+		align-items: center;
+		.message {
+			margin-left: 10px;
+		}
+	}
+
+	.loader.block {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		.message {
+			margin-top: 10px;
+		}
+	}
+
+	.loader.full {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		.message {
+			margin-top: 10px;
+		}
+	}
+
+	.loader-wrap {
+		display: inline-flex;
+		width: var(--local-size);
+		height: var(--local-size);
+		border-radius: var(--local-size);
+		position: relative;
+	}
+
+	.success-icon,
+	.error-icon {
+		animation: scale 0.2s ease-in-out;
+	}
+
+	svg {
+		width: inherit;
+		height: inherit;
+		display: inherit;
+		box-sizing: inherit;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	circle.progress {
+		transform: rotate(-90deg);
+		transform-origin: center;
+		animation: 0.8s linear 0s infinite normal none running rotate;
+	}
+
+	@keyframes rotate {
+		0% {
+			transform: rotate(-90deg);
+		}
+		100% {
+			transform: rotate(270deg);
+		}
+	}
+
+	@keyframes scale {
+		0% {
+			transform: scale(0.5);
+			opacity: 0.4;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/Radio/Radio.svelte

@@ -48,72 +48,74 @@
 	{@render children?.()}
 </label>
 
-<style>label {
-  position: relative;
-  padding-left: 30px;
-  cursor: pointer;
-  user-select: none;
-  height: 20px;
-  display: flex;
-  align-items: center;
-}
-
-label.disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-label.disabled .checkmark {
-  box-shadow: none !important;
-}
-
-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 20px;
-  width: 20px;
-  background-color: var(--input);
-  border-radius: 50%;
-  transition: 0.4s;
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--accent-text);
-}
-
-label:hover input ~ .checkmark {
-  box-shadow: 0 0 0 3px var(--accent-light);
-}
-
-label:active input ~ .checkmark {
-  box-shadow: 0 0 0 4px var(--accent-light);
-}
-
-label input:focus-visible ~ .checkmark {
-  box-shadow: 0 0 0 3px var(--accent-light);
-}
-
-label input:checked ~ .checkmark {
-  background-color: var(--accent);
-}
-
-input:checked ~ .checkmark:after {
-  display: block;
-}</style>
+<style>
+	label {
+		position: relative;
+		padding-left: 30px;
+		cursor: pointer;
+		user-select: none;
+		height: 20px;
+		display: flex;
+		align-items: center;
+	}
+
+	label.disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		.checkmark {
+			box-shadow: none !important;
+		}
+	}
+
+	input {
+		position: absolute;
+		opacity: 0;
+		cursor: pointer;
+		height: 0;
+		width: 0;
+	}
+
+	.checkmark {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 20px;
+		width: 20px;
+		background-color: var(--input);
+		border-radius: 50%;
+		transition: 0.4s;
+	}
+
+	.checkmark:after {
+		content: '';
+		position: absolute;
+		display: none;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--accent-text);
+	}
+
+	label:hover input ~ .checkmark {
+		box-shadow: 0 0 0 3px var(--accent-light);
+	}
+
+	label:active input ~ .checkmark {
+		box-shadow: 0 0 0 4px var(--accent-light);
+	}
+
+	label input:focus-visible ~ .checkmark {
+		box-shadow: 0 0 0 3px var(--accent-light);
+	}
+
+	label input:checked ~ .checkmark {
+		background-color: var(--accent);
+	}
+
+	input:checked ~ .checkmark:after {
+		display: block;
+	}
+</style>

package/dist/components/SplitControl/SplitControl.svelte

@@ -67,48 +67,53 @@
 	</div>
 {/if}
 
-<style>.split-control {
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid var(--accent-lightest);
-  line-height: 1.3;
-}
-.split-control:last-child, .split-control.has-nested {
-  border-bottom: none;
-}
-.split-control.column {
-  flex-direction: column;
-}
-.split-control.column .left {
-  padding-bottom: 10px;
-}
-.split-control.column .right {
-  padding-top: 0;
-}
+<style>
+	.split-control {
+		display: flex;
+		flex-direction: row;
+		border-bottom: 1px solid var(--accent-lightest);
+		line-height: 1.3;
+		&:last-child,
+		&.has-nested {
+			border-bottom: none;
+		}
+		&.column {
+			flex-direction: column;
+			.left {
+				padding-bottom: 10px;
+			}
+			.right {
+				padding-top: 0;
+			}
+		}
+	}
 
-.nested {
-  margin-left: 40px;
-  padding-top: 0;
-  padding-left: 15px;
-  border-left: 2px solid var(--accent-light);
-  margin-bottom: 15px;
-}
+	.nested {
+		margin-left: 40px;
+		padding-top: 0;
+		padding-left: 15px;
+		border-left: 2px solid var(--accent-light);
+		margin-bottom: 15px;
+	}
 
-.left {
-  padding: 15px;
-}
+	.left {
+		padding: 15px;
+	}
 
-.right {
-  padding: 15px;
-  min-width: 0;
-}
+	.right {
+		padding: 15px;
+		min-width: 0;
+	}
 
-.no-hpadding .left,
-.no-hpadding .right {
-  padding-left: 0;
-  padding-right: 0;
-}
+	.no-hpadding {
+		.left,
+		.right {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
 
-.caption-wrap {
-  margin-top: 4px;
-}</style>
+	.caption-wrap {
+		margin-top: 4px;
+	}
+</style>

package/dist/components/Table/TableCell.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { getContext, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface ComponentProps {
 		children: Snippet;
-		[key: string]: any;
 	}
 
+	type Props = ComponentProps & HTMLAttributes<HTMLDivElement>;
+
 	let { children, ...rest }: Props = $props();
 
 	const { head } = getContext<{ head: boolean }>('table-row');

package/dist/components/Table/TableCell.svelte.d.ts

@@ -1,8 +1,9 @@
 import { type Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface ComponentProps {
     children: Snippet;
-    [key: string]: any;
 }
+type Props = ComponentProps & HTMLAttributes<HTMLDivElement>;
 declare const TableCell: import("svelte").Component<Props, {}, "">;
 type TableCell = ReturnType<typeof TableCell>;
 export default TableCell;

package/dist/components/Table/TableRow.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import { setContext, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface ComponentProps {
 		head?: boolean;
 		section?: boolean;
 		children: Snippet;
 	}
 
+	type Props = ComponentProps & HTMLAttributes<HTMLDivElement>;
+
 	const { head = false, section = false, children, ...rest }: Props = $props();
 
 	setContext('table-row', { head, section });

package/dist/components/Table/TableRow.svelte.d.ts

@@ -1,9 +1,11 @@
 import { type Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface ComponentProps {
     head?: boolean;
     section?: boolean;
     children: Snippet;
 }
+type Props = ComponentProps & HTMLAttributes<HTMLDivElement>;
 declare const TableRow: import("svelte").Component<Props, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;