@joewinke/jatui 0.39.0 → 0.41.0

package/dist/components/settings/SettingsRow.svelte

@@ -0,0 +1,177 @@
+<!--
+  SettingsRow: label + description on the start side, the control on the
+  end side (jatui-6kitr). Stacks when its container is narrow. The row wires
+  ids: pass `for` (your control's id) or let it generate one and put
+  `ctx.id` on your control; `ctx.descriptionId` goes on aria-describedby.
+
+    <SettingsRow label="Email digests" description="One summary a day">
+      {#snippet control(ctx)}
+        <Switch id={ctx.id} aria-describedby={ctx.descriptionId} bind:checked />
+      {/snippet}
+    </SettingsRow>
+-->
+<script lang="ts" module>
+	export interface SettingsRowContext {
+		/** Id to put on the control (the label points at it). */
+		id: string;
+		labelId: string;
+		/** Undefined when there is no description. */
+		descriptionId: string | undefined;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label: string;
+		description?: string;
+		/** Id of the control the label is for. Default: generated, passed as `ctx.id`. */
+		for?: string;
+		/** 'inline' (default) puts the control beside the text; 'stacked' always below. */
+		layout?: 'inline' | 'stacked';
+		/** Unsaved-change dot. */
+		dirty?: boolean;
+		disabled?: boolean;
+		/** Validation / warning text under the description. */
+		error?: string;
+		/** Anchor id for deep links. */
+		id?: string;
+		control?: Snippet<[SettingsRowContext]>;
+		/** Extra content under the row (an expanded sub-form). */
+		children?: Snippet;
+		/** Custom label content (badge, icon). It becomes the accessible name, so include the text. */
+		labelContent?: Snippet;
+		class?: string;
+	}
+
+	let {
+		label,
+		description,
+		for: forId,
+		layout = 'inline',
+		dirty = false,
+		disabled = false,
+		error,
+		id,
+		control,
+		children,
+		labelContent,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+	const ctx = $derived<SettingsRowContext>({
+		id: forId ?? `${uid}-control`,
+		labelId: `${uid}-label`,
+		descriptionId: description || error ? `${uid}-desc` : undefined
+	});
+</script>
+
+<div
+	{id}
+	class="jatui-settings-row srow-{layout} {className}"
+	class:is-disabled={disabled}
+	class:has-error={!!error}
+>
+	<div class="srow-main">
+		<div class="srow-text">
+			<label class="srow-label" id={ctx.labelId} for={ctx.id}>
+				{#if labelContent}{@render labelContent()}{:else}{label}{/if}
+				{#if dirty}
+					<span class="srow-dirty" aria-hidden="true"></span><span class="sr-only">(unsaved)</span>
+				{/if}
+			</label>
+			{#if description || error}
+				<p class="srow-desc" id={ctx.descriptionId}>
+					{#if description}<span>{description}</span>{/if}
+					{#if error}<span class="srow-error" role="alert">{error}</span>{/if}
+				</p>
+			{/if}
+		</div>
+		{#if control}
+			<div class="srow-control">{@render control(ctx)}</div>
+		{/if}
+	</div>
+	{#if children}
+		<div class="srow-extra">{@render children()}</div>
+	{/if}
+</div>
+
+<style>
+	.jatui-settings-row {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		min-height: 3.25rem;
+		padding-block: var(--jatui-space-lg, 12px);
+		justify-content: center;
+	}
+	.srow-main {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--jatui-space-xl, 16px);
+	}
+	.srow-stacked .srow-main {
+		flex-direction: column;
+		align-items: stretch;
+		gap: var(--jatui-space-base, 8px);
+	}
+	@container (max-width: 28rem) {
+		.srow-main {
+			flex-direction: column;
+			align-items: stretch;
+			gap: var(--jatui-space-base, 8px);
+		}
+	}
+	.srow-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+	.srow-label {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--color-base-content);
+	}
+	.srow-dirty {
+		width: 0.4375rem;
+		height: 0.4375rem;
+		border-radius: 9999px;
+		background: var(--color-warning);
+	}
+	.srow-desc {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 0;
+		font-size: 0.8125rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+	.srow-error {
+		color: var(--color-error);
+	}
+	.srow-control {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: var(--jatui-space-base, 8px);
+		flex: none;
+		max-width: 100%;
+	}
+	.srow-stacked .srow-control {
+		justify-content: flex-start;
+	}
+	.is-disabled .srow-text {
+		opacity: 0.55;
+	}
+	.srow-extra {
+		min-width: 0;
+	}
+</style>

package/dist/components/settings/SettingsRow.svelte.d.ts

@@ -0,0 +1,32 @@
+export interface SettingsRowContext {
+    /** Id to put on the control (the label points at it). */
+    id: string;
+    labelId: string;
+    /** Undefined when there is no description. */
+    descriptionId: string | undefined;
+}
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    description?: string;
+    /** Id of the control the label is for. Default: generated, passed as `ctx.id`. */
+    for?: string;
+    /** 'inline' (default) puts the control beside the text; 'stacked' always below. */
+    layout?: 'inline' | 'stacked';
+    /** Unsaved-change dot. */
+    dirty?: boolean;
+    disabled?: boolean;
+    /** Validation / warning text under the description. */
+    error?: string;
+    /** Anchor id for deep links. */
+    id?: string;
+    control?: Snippet<[SettingsRowContext]>;
+    /** Extra content under the row (an expanded sub-form). */
+    children?: Snippet;
+    /** Custom label content (badge, icon). It becomes the accessible name, so include the text. */
+    labelContent?: Snippet;
+    class?: string;
+}
+declare const SettingsRow: import("svelte").Component<Props, {}, "">;
+type SettingsRow = ReturnType<typeof SettingsRow>;
+export default SettingsRow;

package/dist/components/settings/SettingsSection.svelte

@@ -0,0 +1,139 @@
+<!--
+  SettingsSection: a titled group of SettingsRows (jatui-6kitr). Rows inside
+  get hairline dividers. Give it an `id` + use it with SectionNav for long
+  settings pages; `dirty` shows the same amber dot SectionNav uses.
+  Row recipe after BoardUI's settings rows (MIT, © 2026 Mertcan Dundar
+  Esmergul); the modal shell was intentionally not taken.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title?: string;
+		description?: string;
+		/** Anchor id (SectionNav target). */
+		id?: string;
+		/** 'card' (default) frames the rows; 'plain' is flush. */
+		variant?: 'card' | 'plain';
+		headingLevel?: 2 | 3 | 4;
+		/** Unsaved-changes dot beside the title. */
+		dirty?: boolean;
+		/** Header controls (Reset, Save…). */
+		actions?: Snippet;
+		/** Footer under the rows (save bar, help link). */
+		footer?: Snippet;
+		children: Snippet;
+		class?: string;
+	}
+
+	let {
+		title,
+		description,
+		id,
+		variant = 'card',
+		headingLevel = 2,
+		dirty = false,
+		actions,
+		footer,
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+</script>
+
+<section
+	{id}
+	class="jatui-settings-section ss-{variant} {className}"
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	aria-describedby={description ? `${uid}-desc` : undefined}
+>
+	{#if title || description || actions}
+		<header class="ss-head">
+			<div class="ss-titles">
+				{#if title}
+					<svelte:element this={`h${headingLevel}`} class="ss-title" id="{uid}-title">
+						{title}
+						{#if dirty}
+							<span class="ss-dirty" aria-hidden="true"></span><span class="sr-only">(unsaved changes)</span>
+						{/if}
+					</svelte:element>
+				{/if}
+				{#if description}<p class="ss-desc" id="{uid}-desc">{description}</p>{/if}
+			</div>
+			{#if actions}<div class="ss-actions">{@render actions()}</div>{/if}
+		</header>
+	{/if}
+	<div class="ss-rows">
+		{@render children()}
+	</div>
+	{#if footer}<div class="ss-footer">{@render footer()}</div>{/if}
+</section>
+
+<style>
+	.jatui-settings-section {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		min-width: 0;
+		scroll-margin-top: var(--jatui-space-xl, 16px);
+	}
+	.ss-head {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: var(--jatui-space-lg, 12px);
+		padding: 0 var(--jatui-space-xs, 2px);
+	}
+	.ss-titles {
+		min-width: 0;
+	}
+	.ss-title {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+		margin: 0;
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--color-base-content);
+	}
+	.ss-dirty {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: var(--color-warning);
+	}
+	.ss-desc {
+		margin: 2px 0 0;
+		font-size: 0.8125rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+	.ss-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+		flex: none;
+	}
+	.ss-rows {
+		display: flex;
+		flex-direction: column;
+		container-type: inline-size;
+	}
+	.ss-card .ss-rows {
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		background: var(--color-base-100);
+	}
+	/* Hairline between rows. */
+	.ss-rows > :global(.jatui-settings-row + .jatui-settings-row) {
+		border-top: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+	.ss-card .ss-rows > :global(.jatui-settings-row) {
+		padding-inline: var(--jatui-space-xl, 16px);
+	}
+	.ss-footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--jatui-space-base, 8px);
+	}
+</style>

package/dist/components/settings/SettingsSection.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    description?: string;
+    /** Anchor id (SectionNav target). */
+    id?: string;
+    /** 'card' (default) frames the rows; 'plain' is flush. */
+    variant?: 'card' | 'plain';
+    headingLevel?: 2 | 3 | 4;
+    /** Unsaved-changes dot beside the title. */
+    dirty?: boolean;
+    /** Header controls (Reset, Save…). */
+    actions?: Snippet;
+    /** Footer under the rows (save bar, help link). */
+    footer?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const SettingsSection: import("svelte").Component<Props, {}, "">;
+type SettingsSection = ReturnType<typeof SettingsSection>;
+export default SettingsSection;