@hyvor/design 1.0.6 → 1.0.8

package/dist/components/Modal/Modal.svelte

@@ -102,7 +102,7 @@
 				</div>
 
 				<div class="close-wrap">
-					<IconButton variant="invisible" on:click={handleCancel}>
+					<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
 						<IconX size={25} />
 					</IconButton>
 				</div>

package/dist/components/SplitControl/SplitControl.svelte

@@ -10,12 +10,27 @@
 		flex?: number[];
 		children?: Snippet;
 		nested?: Snippet;
+		[key: string]: any;
 	}
 
-	const { label, caption, column = false, flex = [1, 2], children, nested }: Props = $props();
+	const {
+		label,
+		caption,
+		column = false,
+		flex = [1, 2],
+		children,
+		nested,
+		...rest
+	}: Props = $props();
 </script>
 
-<div class="split-control" class:has-nested={!!nested} class:column>
+<div
+	class="split-control"
+	class:has-nested={!!nested}
+	class:column
+	aria-label={typeof label === 'string' ? label : undefined}
+	{...rest}
+>
 	<div class="left" style:flex={flex[0]}>
 		<div class="label-wrap">
 			{#if typeof label === 'string'}

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

@@ -6,6 +6,7 @@ interface Props {
     flex?: number[];
     children?: Snippet;
     nested?: Snippet;
+    [key: string]: any;
 }
 declare const SplitControl: import("svelte").Component<Props, {}, "">;
 type SplitControl = ReturnType<typeof SplitControl>;

package/dist/components/Table/Table.svelte

@@ -10,12 +10,6 @@
 	const hoverCss = hover ? '--local-hover-color: var(--hover);' : '';
 </script>
 
-<div
-	class="table"
-	style="
-    --local-columns: {columns};
-    {hoverCss}
-"
->
+<div class="table" style="--local-columns: {columns};{hoverCss}" role="table">
 	{@render children?.()}
 </div>

package/dist/components/Table/TableCell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getContext, type Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		[key: string]: any;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const { head } = getContext<{ head: boolean }>('table-row');
+</script>
+
+<div role={head ? 'columnheader' : 'cell'} {...rest}>
+	{@render children()}
+</div>

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

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

package/dist/components/Table/TableRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { setContext, type Snippet } from 'svelte';
 
 	interface Props {
 		head?: boolean;
@@ -7,9 +7,11 @@
 	}
 
 	const { head = false, children, ...rest }: Props = $props();
+
+	setContext('table-row', { head });
 </script>
 
-<div class:head {...rest}>
+<div class:head {...rest} role="row">
 	{@render children()}
 </div>
 

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     head?: boolean;
     children: Snippet;

package/package.json

@@ -57,5 +57,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.0.6"
+	"version": "1.0.8"
 }