@insymetri/styleguide 0.1.93 → 0.1.95

package/dist/IIAccordion/IIAccordion.svelte

@@ -9,6 +9,8 @@
 		trigger: Snippet<[{expanded: boolean}]>
 		children: Snippet
 		disabled?: boolean
+		/** `card` (default) frames each item; `plain` separates them with a hairline. */
+		variant?: 'card' | 'plain'
 		class?: string
 	}
 
@@ -18,6 +20,7 @@
 		trigger,
 		children,
 		disabled = false,
+		variant = 'card',
 		class: className,
 	}: Props = $props()
 
@@ -28,7 +31,14 @@
 	}
 </script>
 
-<div class={cn('border border-primary rounded-10 overflow-hidden', className)}>
+<div
+	class={cn(
+		variant === 'plain'
+			? 'border-b border-subtle last:border-b-0'
+			: 'border border-primary rounded-10 overflow-hidden',
+		className
+	)}
+>
 	<button
 		type="button"
 		class="flex items-center gap-8 w-full bg-transparent border-none px-16 py-12 cursor-default text-left font-inherit hover:bg-background"
@@ -47,7 +57,7 @@
 		</div>
 	</button>
 	{#if expanded}
-		<div class="border-t border-primary">
+		<div class={variant === 'plain' ? '' : 'border-t border-primary'}>
 			{@render children()}
 		</div>
 	{/if}

package/dist/IIAccordion/IIAccordion.svelte.d.ts

@@ -7,6 +7,8 @@ type Props = {
     }]>;
     children: Snippet;
     disabled?: boolean;
+    /** `card` (default) frames each item; `plain` separates them with a hairline. */
+    variant?: 'card' | 'plain';
     class?: string;
 };
 declare const IIAccordion: import("svelte").Component<Props, {}, "expanded">;

package/dist/IIFormField/IIFormField.svelte

@@ -1,18 +1,28 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
 
 	type Props = {
 		label?: string
 		id?: string
-		children: Snippet
+		/** Control on the label's own line, right-aligned. Ignored without a `label`. */
+		labelAction?: Snippet
+		class?: string
 	}
 
-	let {label, id, children}: Props = $props()
+	let {label, id, labelAction, children, class: className}: Props & {children: Snippet} = $props()
 </script>
 
-<div class="mb-16 last:mb-0">
+<div class={cn('mb-16 last:mb-0', className)}>
 	{#if label}
-		<label class="block text-small-emphasis text-body mb-8" for={id}>{label}</label>
+		{#if labelAction}
+			<div class="mb-8 flex items-center justify-between gap-10">
+				<label class="block text-small-emphasis text-body" for={id}>{label}</label>
+				{@render labelAction()}
+			</div>
+		{:else}
+			<label class="block text-small-emphasis text-body mb-8" for={id}>{label}</label>
+		{/if}
 	{/if}
 	{@render children()}
 </div>

package/dist/IIFormField/IIFormField.svelte.d.ts

@@ -2,8 +2,13 @@ import type { Snippet } from 'svelte';
 type Props = {
     label?: string;
     id?: string;
+    /** Control on the label's own line, right-aligned. Ignored without a `label`. */
+    labelAction?: Snippet;
+    class?: string;
+};
+type $$ComponentProps = Props & {
     children: Snippet;
 };
-declare const IIFormField: import("svelte").Component<Props, {}, "">;
+declare const IIFormField: import("svelte").Component<$$ComponentProps, {}, "">;
 type IIFormField = ReturnType<typeof IIFormField>;
 export default IIFormField;

package/dist/IITable/IITable.svelte

@@ -41,6 +41,10 @@
 		stickyHeader?: boolean
 		/** `sm` → text-small (default), `md` → text-default. */
 		size?: 'sm' | 'md'
+		/** `card` (default) frames the table; `plain` drops the frame and header fill for hairline rules. */
+		variant?: 'card' | 'plain'
+		/** Classes on the `<table>` itself — chiefly a `min-w-*`, so narrow viewports scroll rather than squash. */
+		tableClass?: string
 		class?: string
 	}
 
@@ -58,31 +62,46 @@
 		isExpanded,
 		stickyHeader = false,
 		size = 'sm',
+		variant = 'card',
+		tableClass,
 		class: className,
 	}: Props = $props()
 
 	const alignClass = {left: 'text-left', right: 'text-right', center: 'text-center'} as const
 	const cellText = $derived(size === 'sm' ? 'text-small' : 'text-default')
 	const interactive = $derived(!!onRowClick)
+	const plain = $derived(variant === 'plain')
+
+	const containerClass = $derived(
+		plain ? 'overflow-x-auto' : 'bg-surface-raised border border-subtle rounded-12 overflow-x-auto overflow-y-hidden'
+	)
+	const headClass = $derived(plain ? 'border-b border-subtle' : 'bg-background border-b border-primary')
+	const headCellClass = $derived(
+		plain
+			? 'px-12 pb-8 text-micro text-tertiary uppercase'
+			: 'px-14 py-9 text-tiny-emphasis text-tertiary uppercase tracking-wide'
+	)
+	const bodyCellClass = $derived(plain ? 'px-12 py-11' : 'px-14 py-10')
+	const rowRuleClass = $derived(plain ? 'border-subtle' : 'border-primary')
 
 	function cellClass(col: Column, row: T): string {
 		return typeof col.class === 'function' ? col.class(row) : (col.class ?? '')
 	}
 </script>
 
-<div class={cn('bg-surface-raised border border-subtle rounded-12 overflow-x-auto overflow-y-hidden', className)}>
+<div class={cn(containerClass, className)}>
 	{#if children}
-		<table class="w-full border-collapse">
+		<table class={cn('w-full border-collapse', tableClass)}>
 			{@render children()}
 		</table>
 	{:else}
-		<table class="w-full border-collapse">
-			<thead class={cn('bg-background border-b border-primary', stickyHeader && 'sticky top-0 z-1')}>
+		<table class={cn('w-full border-collapse', tableClass)}>
+			<thead class={cn(headClass, stickyHeader && 'sticky top-0 z-1')}>
 				<tr>
 					{#each columns as col (col.key)}
 						<th
 							class={cn(
-								'px-14 py-9 text-tiny-emphasis text-tertiary uppercase tracking-wide',
+								headCellClass,
 								alignClass[col.align ?? 'left'],
 								col.width,
 								col.headerClass
@@ -108,7 +127,8 @@
 					{#each rows as row (rowKey?.(row) ?? row)}
 						<tr
 							class={cn(
-								'border-b border-primary last:border-b-0',
+								'border-b last:border-b-0',
+							rowRuleClass,
 								interactive && 'cursor-pointer hover:bg-background',
 								rowClass?.(row)
 							)}
@@ -119,7 +139,8 @@
 							{#each columns as col (col.key)}
 								<td
 									class={cn(
-										'px-14 py-10 text-body',
+										bodyCellClass,
+								'text-body',
 										cellText,
 										alignClass[col.align ?? 'left'],
 										col.width,
@@ -131,7 +152,7 @@
 							{/each}
 						</tr>
 						{#if expandedRow && isExpanded?.(row)}
-							<tr class="border-b border-primary last:border-b-0 bg-background">
+							<tr class={cn('border-b last:border-b-0 bg-background', rowRuleClass)}>
 								<td colspan={columns.length} class="px-16 py-12">
 									{@render expandedRow(row)}
 								</td>

package/dist/IITable/IITable.svelte.d.ts

@@ -36,6 +36,10 @@ declare function $$render<T>(): {
         stickyHeader?: boolean;
         /** `sm` → text-small (default), `md` → text-default. */
         size?: "sm" | "md";
+        /** `card` (default) frames the table; `plain` drops the frame and header fill for hairline rules. */
+        variant?: "card" | "plain";
+        /** Classes on the `<table>` itself — chiefly a `min-w-*`, so narrow viewports scroll rather than squash. */
+        tableClass?: string;
         class?: string;
     };
     exports: {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.93",
+	"version": "0.1.95",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {