@dorsk/tsumikit 0.38.1 → 0.39.0

package/dist/autoresize.d.ts

@@ -5,6 +5,8 @@
  *
  * Usage: <textarea use:autoresize={value} ...></textarea>
  */
+/** Height `rows` lines would occupy: line boxes plus vertical padding and borders. */
+export declare function rowsFloor(node: HTMLTextAreaElement): number;
 export declare function autoresize(node: HTMLTextAreaElement, _value?: string): {
     update(): void;
     destroy(): void;

package/dist/autoresize.js

@@ -5,12 +5,26 @@
  *
  * Usage: <textarea use:autoresize={value} ...></textarea>
  */
+/** Height `rows` lines would occupy: line boxes plus vertical padding and borders. */
+export function rowsFloor(node) {
+    const rows = node.rows || 0;
+    if (rows <= 1)
+        return 0;
+    const cs = getComputedStyle(node);
+    const fontSize = parseFloat(cs.fontSize) || 16;
+    const lh = parseFloat(cs.lineHeight) || fontSize * 1.2;
+    const box = (parseFloat(cs.paddingTop) || 0) +
+        (parseFloat(cs.paddingBottom) || 0) +
+        (parseFloat(cs.borderTopWidth) || 0) +
+        (parseFloat(cs.borderBottomWidth) || 0);
+    return rows * lh + box;
+}
 export function autoresize(node, _value) {
     const resize = () => {
         // A manual drag handle may set `min-height` as a user-chosen floor; grow
         // with content but never collapse below it. Content always wins the lower
         // bound, so dragging shorter than the text can't shrink past it.
-        const floor = parseFloat(node.style.minHeight) || 0;
+        const floor = Math.max(parseFloat(node.style.minHeight) || 0, rowsFloor(node));
         node.style.height = 'auto';
         node.style.height = `${Math.max(node.scrollHeight, floor)}px`;
     };

package/dist/components/atoms/Artwork.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	// Cover / thumbnail tile: a lazy <img> that swaps to a seeded gradient with
 	// initials (or an icon) when there is no source or it fails to load. Width
 	// comes from `size`, height from `aspect`; `status` overlays a Dot/Badge in
@@ -8,22 +9,7 @@
 	import Icon from './Icon.svelte';
 	import type { IconName } from './Icon.svelte';
 
-	let {
-		src,
-		alt,
-		seed,
-		aspect = '1/1',
-		size,
-		radius = 'md',
-		fit = 'cover',
-		fallback = 'initials',
-		icon = 'image',
-		status,
-		hover = false,
-		onerror,
-		class: klass = '',
-		...rest
-	}: {
+	type Own = {
 		src?: string | null;
 		alt: string;
 		/** Drives the gradient hue and the initials. Defaults to `alt`. */
@@ -43,8 +29,23 @@
 		hover?: boolean;
 		onerror?: () => void;
 		class?: string;
-		[key: string]: unknown;
-	} = $props();
+	};
+	let {
+		src,
+		alt,
+		seed,
+		aspect = '1/1',
+		size,
+		radius = 'md',
+		fit = 'cover',
+		fallback = 'initials',
+		icon = 'image',
+		status,
+		hover = false,
+		onerror,
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
 	let failed = $state(false);
 	$effect(() => {

package/dist/components/atoms/Artwork.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 import type { IconName } from './Icon.svelte';
-type $$ComponentProps = {
+type Own = {
     src?: string | null;
     alt: string;
     /** Drives the gradient hue and the initials. Defaults to `alt`. */
@@ -20,8 +21,8 @@ type $$ComponentProps = {
     hover?: boolean;
     onerror?: () => void;
     class?: string;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Artwork: import("svelte").Component<$$ComponentProps, {}, "">;
 type Artwork = ReturnType<typeof Artwork>;
 export default Artwork;

package/dist/components/atoms/Badge.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	// Inline label primitive — the project's single pill. Covers three jobs via
 	// props rather than separate components:
 	//   • state  → `tone` semantic palette, or `color` for any CSS colour
@@ -23,31 +24,21 @@
 		violet: 'var(--c-violet)',
 	};
 
-	let {
-		tone = 'neutral',
-		color,
-		as = 'span',
-		size = 'md',
-		variant = 'chip',
-		mono = false,
-		uppercase = false,
-		numeric = false,
-		truncate = false,
-		maxWidth,
-		border = true,
-		active = false,
-		dot = false,
-		icon,
-		removable = false,
-		onremove,
-		class: klass = '',
-		children,
-		...rest
-	}: {
+	type Own = {
 		tone?: Tone;
+		/** Fill the free space of a flex row (`flex: 1 1 0`). */
+		grow?: boolean;
+		/** `false` pins the box (`flex: none`) so a flex row cannot squeeze it. */
+		shrink?: boolean;
+		/** Full-width block. */
+		block?: boolean;
 		// Any CSS colour (or var()) for a one-off tint; overrides `tone`.
 		color?: string;
-		as?: 'span' | 'button';
+		as?: 'span' | 'button' | 'a';
+		/** Renders an anchor (implies `as="a"`). */
+		href?: string;
+		/** Opens in a new tab with a trailing arrow glyph. */
+		external?: boolean;
 		// `xs` is the densest form for counters in tight rows.
 		size?: 'xs' | 'sm' | 'md';
 		// `text` drops the chip (no fill, ring or padding) but keeps badge
@@ -74,16 +65,47 @@
 		onremove?: (e: MouseEvent) => void;
 		class?: string;
 		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
+	};
+	let {
+		tone = 'neutral',
+		color,
+		as = 'span',
+		href,
+		external = false,
+		size = 'md',
+		variant = 'chip',
+		mono = false,
+		uppercase = false,
+		numeric = false,
+		truncate = false,
+		maxWidth,
+		border = true,
+		active = false,
+		dot = false,
+		icon,
+		removable = false,
+		onremove,
+		class: klass = '',
+		grow = false,
+		shrink = true,
+		block = false,
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
 	const toneColor = $derived(color ?? (tone === 'neutral' ? undefined : TONE_COLOR[tone]));
 </script>
 
 <svelte:element
-	this={as}
+	this={href ? 'a' : as}
+	{href}
+	target={href && external ? '_blank' : undefined}
+	rel={href && external ? 'noopener noreferrer' : undefined}
 	data-tsu="Badge"
 	class="badge {klass}"
+	class:grow={grow}
+	class:no-shrink={!shrink}
+	class:block={block}
 	class:badge-ok={tone === 'ok'}
 	class:badge-warn={tone === 'warn'}
 	class:badge-danger={tone === 'danger'}
@@ -98,7 +120,7 @@
 	class:truncate
 	class:borderless={!border}
 	class:active
-	class:interactive={as === 'button'}
+	class:interactive={as === 'button' || !!href}
 	style:--badge-tone={toneColor}
 	style:--badge-max-width={maxWidth}
 	{...rest}
@@ -114,6 +136,7 @@
 	{:else}
 		{@render children?.()}
 	{/if}
+	{#if href && external}<Icon name="external" />{/if}
 	{#if removable}
 		<button
 			type="button"
@@ -127,6 +150,17 @@
 </svelte:element>
 
 <style>
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.block {
+		display: flex;
+		width: 100%;
+	}
 	.badge {
 		display: inline-flex;
 		align-items: center;

package/dist/components/atoms/Badge.svelte.d.ts

@@ -1,10 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 import { type IconName } from './Icon.svelte';
 type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
-type $$ComponentProps = {
+type Own = {
     tone?: Tone;
+    /** Fill the free space of a flex row (`flex: 1 1 0`). */
+    grow?: boolean;
+    /** `false` pins the box (`flex: none`) so a flex row cannot squeeze it. */
+    shrink?: boolean;
+    /** Full-width block. */
+    block?: boolean;
     color?: string;
-    as?: 'span' | 'button';
+    as?: 'span' | 'button' | 'a';
+    /** Renders an anchor (implies `as="a"`). */
+    href?: string;
+    /** Opens in a new tab with a trailing arrow glyph. */
+    external?: boolean;
     size?: 'xs' | 'sm' | 'md';
     variant?: 'chip' | 'text';
     mono?: boolean;
@@ -20,8 +31,8 @@ type $$ComponentProps = {
     onremove?: (e: MouseEvent) => void;
     class?: string;
     children?: Snippet;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/dist/components/atoms/Button.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
+	import { canonicalTone, type Tone } from '../../tone';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -9,8 +11,8 @@
 		// Semantic state tint layered on top of the variant: tints text/border and
 		// adds a subtle fill on hover. For stateful controls — an "on"/active toggle
 		// (`accent`), positive actions (`success`), or cost/severity states.
-		tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
-		size?: 'sm' | 'md' | 'lg';
+		tone?: Tone | 'none';
+		size?: ControlSize;
 		control?: boolean;
 		// Fully rounded ends (`--r-pill`) on any size/variant.
 		pill?: boolean;
@@ -39,8 +41,8 @@
 		// Square text/icon control whose side equals the current height contract:
 		// `size` tier, or `--control-height` with `control`.
 		square?: boolean;
-		// Outlined `--box-lg` icon-chip (header/toolbar action). Pairs with `tone`
-		// for tinted severity chips (back/archive/interrupt/more).
+		// Outlined `--box-lg`-tall chip (header/toolbar action): a square for a lone
+		// glyph, otherwise sized to its text. Pairs with `tone` for tinted severity chips.
 		chip?: boolean;
 		iconInline?: boolean;
 		hoverDanger?: boolean;
@@ -86,6 +88,7 @@
 		children,
 		...rest
 	}: ButtonProps = $props();
+	const t = $derived(canonicalTone(tone));
 
 	// A link-flavoured Button is a real <a>; native `disabled`/`type` don't apply,
 	// so a disabled link is expressed via aria-disabled + inert pointer handling.
@@ -121,7 +124,7 @@
 	class:btn-grow={grow}
 	class:btn-primary={variant === 'primary'}
 	class:btn-ghost={variant === 'ghost'}
-	class:btn-danger={variant === 'danger' || (tone === 'danger' && variant === 'default')}
+	class:btn-danger={variant === 'danger' || (t === 'danger' && variant === 'default')}
 	class:btn-link={variant === 'link'}
 	class:btn-pill={pill}
 	class:no-shrink={!shrink}
@@ -137,11 +140,11 @@
 	class:btn-collapse-container={collapseLabel === 'container'}
 	class:hit-compact={hitArea === 'compact'}
 	style:--btn-box={box ? `var(--box-${box})` : undefined}
-	class:btn-tone-accent={tone === 'accent'}
-	class:btn-tone-success={tone === 'success'}
-	class:btn-tone-info={tone === 'info'}
-	class:btn-tone-warn={tone === 'warn'}
-	class:btn-tone-danger={tone === 'danger'}
+	class:btn-tone-accent={t === 'accent'}
+	class:btn-tone-success={t === 'ok'}
+	class:btn-tone-info={t === 'info'}
+	class:btn-tone-warn={t === 'warn'}
+	class:btn-tone-danger={t === 'danger'}
 	class:btn-icon-inline={iconInline}
 	class:hover-danger={hoverDanger}
 	class:loading
@@ -277,11 +280,16 @@
 		min-height: var(--box-lg);
 		min-width: var(--box-lg);
 		height: var(--box-lg);
-		width: var(--box-lg);
-		padding: 0;
+		width: auto;
+		padding: 0 var(--sp-2);
+		gap: var(--sp-1);
 		flex: none;
 		border-radius: var(--r-md);
 	}
+	.btn-chip:has(> :global(svg):only-child) {
+		width: var(--box-lg);
+		padding: 0;
+	}
 
 	/* Uniform-height control: icon buttons, inputs and action buttons that share a
 	   toolbar/composer row line up exactly. */
@@ -334,6 +342,16 @@
 		background: color-mix(in srgb, var(--ok) 14%, transparent);
 		border-color: var(--ok);
 	}
+	.btn-control.btn-danger,
+	.btn-control.btn-tone-danger {
+		color: var(--danger);
+		border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
+	}
+	.btn-control.btn-danger:hover:not(:disabled),
+	.btn-control.btn-tone-danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--danger) 14%, transparent);
+		border-color: var(--danger);
+	}
 	/* A positive primary action uses success as its fill, not merely as the
 	   neutral tint. This follows the control override so both heights match. */
 	.btn-primary.btn-tone-success {

package/dist/components/atoms/Button.svelte.d.ts

@@ -1,9 +1,11 @@
+import type { ControlSize } from '../../size';
+import { type Tone } from '../../tone';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type ButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'link';
-    tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
-    size?: 'sm' | 'md' | 'lg';
+    tone?: Tone | 'none';
+    size?: ControlSize;
     control?: boolean;
     pill?: boolean;
     block?: boolean;

package/dist/components/atoms/Card.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { canonicalTone, type Tone as SharedTone } from '../../tone';
 	// Elevated surface primitive — the canonical card/panel container. Owns its
 	// background/border/radius/padding from theme tokens. `tap` adds the
 	// interactive hover/active affordance for tappable list items (e.g. session
@@ -25,8 +27,38 @@
 	import type { Snippet } from 'svelte';
 	import SectionHeader from '../molecules/SectionHeader.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'attention';
+	type Tone = SharedTone | 'attention';
 
+	type Own = {
+		/** Polymorphic attributes for `as="a"` / `as="button"`. */
+		href?: string;
+		target?: string;
+		rel?: string;
+		type?: 'button' | 'submit' | 'reset';
+		tap?: boolean;
+		interactive?: boolean;
+		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
+		padding?: 'none' | 'sm' | 'md' | 'lg';
+		surface?: 'base' | 'raised' | 'sunken';
+		tone?: Tone;
+		stacked?: boolean;
+		stackTone?: Tone;
+		stackY?: number;
+		stackX?: number;
+		title?: string;
+		subtitle?: string;
+		gap?: string;
+		/** `hidden` clips children to the rounded box. */
+		overflow?: 'visible' | 'hidden';
+		maxWidth?: string;
+		onclick?: (e: MouseEvent | KeyboardEvent) => void;
+		class?: string;
+		style?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		actions?: Snippet;
+		children?: Snippet;
+	};
 	let {
 		tap = false,
 		interactive = false,
@@ -41,6 +73,7 @@
 		title,
 		subtitle,
 		gap,
+		overflow,
 		maxWidth,
 		onclick,
 		class: klass = '',
@@ -50,30 +83,8 @@
 		actions,
 		children,
 		...rest
-	}: {
-		tap?: boolean;
-		interactive?: boolean;
-		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
-		padding?: 'none' | 'sm' | 'md' | 'lg';
-		surface?: 'base' | 'raised' | 'sunken';
-		tone?: Tone;
-		stacked?: boolean;
-		stackTone?: Tone;
-		stackY?: number;
-		stackX?: number;
-		title?: string;
-		subtitle?: string;
-		gap?: string;
-		maxWidth?: string;
-		onclick?: (e: MouseEvent | KeyboardEvent) => void;
-		class?: string;
-		style?: string;
-		header?: Snippet;
-		footer?: Snippet;
-		actions?: Snippet;
-		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
+	const t = $derived(canonicalTone(tone));
 
 	let stackStyle = $derived(
 		stacked ? `--stack-y:${stackY}px;--stack-x:${stackX}px;` : ''
@@ -112,11 +123,12 @@
 	class:surface-sunken={surface === 'sunken'}
 	class:card-tap={tap || interactive}
 	class:card-max={maxWidth !== undefined}
-	class:card-ok={tone === 'ok'}
-	class:card-warn={tone === 'warn'}
-	class:card-danger={tone === 'danger'}
-	class:card-info={tone === 'info'}
-	class:card-attention={tone === 'attention'}
+	class:card-ok={t === 'ok'}
+	class:card-warn={t === 'warn'}
+	class:card-danger={t === 'danger'}
+	class:card-info={t === 'info'}
+	class:card-attention={t === 'attention'}
+	class:card-accent={t === 'accent'}
 	class:card-stacked={stacked}
 	class:stack-ok={stacked && stackTone === 'ok'}
 	class:stack-warn={stacked && stackTone === 'warn'}
@@ -126,6 +138,7 @@
 	class:card-gap={!framed && gap !== undefined}
 	style:--card-gap={gap}
 	style:max-width={maxWidth}
+	style:overflow={overflow}
 	style={`${stackStyle}${style}`}
 	role={interactive && !native ? 'button' : undefined}
 	tabindex={interactive && !native ? 0 : undefined}
@@ -153,6 +166,7 @@
 <style>
 	.card {
 		--card-pad: var(--sp-4);
+		min-width: 0;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border);
 		border-radius: var(--r-lg);
@@ -234,6 +248,9 @@
 	.card-attention {
 		--card-tone: var(--attention-bar);
 	}
+	.card-accent {
+		--card-tone: var(--accent);
+	}
 	.card-ok,
 	.card-warn,
 	.card-danger,

package/dist/components/atoms/Card.svelte.d.ts

@@ -1,6 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone as SharedTone } from '../../tone';
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'attention';
-type $$ComponentProps = {
+type Tone = SharedTone | 'attention';
+type Own = {
+    /** Polymorphic attributes for `as="a"` / `as="button"`. */
+    href?: string;
+    target?: string;
+    rel?: string;
+    type?: 'button' | 'submit' | 'reset';
     tap?: boolean;
     interactive?: boolean;
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
@@ -14,6 +21,8 @@ type $$ComponentProps = {
     title?: string;
     subtitle?: string;
     gap?: string;
+    /** `hidden` clips children to the rounded box. */
+    overflow?: 'visible' | 'hidden';
     maxWidth?: string;
     onclick?: (e: MouseEvent | KeyboardEvent) => void;
     class?: string;
@@ -22,8 +31,8 @@ type $$ComponentProps = {
     footer?: Snippet;
     actions?: Snippet;
     children?: Snippet;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/atoms/Checkbox.svelte

@@ -11,6 +11,7 @@
 		indeterminate = false,
 		invalid = false,
 		label,
+		labelHidden = false,
 		id,
 		'aria-describedby': ariaDescribedby,
 		'aria-invalid': ariaInvalid,
@@ -23,6 +24,8 @@
 		/** Error state: danger box border + aria-invalid. */
 		invalid?: boolean;
 		label: string;
+		/** Keep `label` for AT only (sr-only). */
+		labelHidden?: boolean;
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
@@ -49,7 +52,7 @@
 		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	/>
 	<span class="box" aria-hidden="true"></span>
-	<span class="label-text">{label}</span>
+	<span class="label-text" class:sr-only={labelHidden}>{label}</span>
 </label>
 
 <style>
@@ -108,7 +111,7 @@
 		clip-path: polygon(22% 42%, 78% 42%, 78% 58%, 22% 58%);
 	}
 	input:focus-visible + .box {
-		outline: 2px solid var(--accent);
+		outline: var(--focus-ring);
 		outline-offset: 2px;
 	}
 	input[aria-invalid='true']:not(:checked):not(:indeterminate) + .box {
@@ -120,4 +123,15 @@
 	.checkbox:has(input:disabled) {
 		cursor: not-allowed;
 	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 </style>

package/dist/components/atoms/Checkbox.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = HTMLInputAttributes & {
     /** Error state: danger box border + aria-invalid. */
     invalid?: boolean;
     label: string;
+    /** Keep `label` for AT only (sr-only). */
+    labelHidden?: boolean;
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLInputAttributes['aria-invalid'];

package/dist/components/atoms/Dot.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	// Status dot — a small coloured disc, optionally followed by a label. Owns its
 	// own styling (it does not rely on any global `.dot` rules). Colour comes from
 	// either:
@@ -20,34 +21,39 @@
 		hibernated: 'var(--dot-hibernated)',
 	};
 
+	type Own = {
+		status?: Status;
+		color?: string;
+		label?: string;
+		glow?: boolean;
+		ring?: boolean;
+		/** Focusable (`tabindex=0`, `role=img`) so it can anchor a Tooltip. */
+		interactive?: boolean;
+		class?: string;
+	};
 	let {
 		status = 'active',
 		color,
 		label,
 		glow = false,
 		ring = false,
+		interactive = false,
 		class: klass = '',
 		...rest
-	}: {
-		status?: Status;
-		color?: string;
-		label?: string;
-		glow?: boolean;
-		ring?: boolean;
-		class?: string;
-		[key: string]: unknown;
-	} = $props();
+	}: Omit<HTMLAttributes<HTMLSpanElement>, keyof Own> & Own = $props();
 
 	const resolved = $derived(color ?? STATUS_COLOR[status]);
 </script>
 
 {#if label}
-	<span class="dot-row {klass}" data-tsu="Dot" {...rest}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<span class="dot-row {klass}" data-tsu="Dot" role={interactive ? 'img' : undefined} tabindex={interactive ? 0 : undefined} aria-label={interactive ? label : undefined} {...rest}>
 		<span class="dot" class:glow class:ring style="--dot-color:{resolved}"></span>
 		<Text variant="caption">{label}</Text>
 	</span>
 {:else}
-	<span class="dot {klass}" class:glow class:ring style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<span class="dot {klass}" class:glow class:ring style="--dot-color:{resolved}" data-tsu="Dot" role={interactive ? 'img' : undefined} tabindex={interactive ? 0 : undefined} {...rest}></span>
 {/if}
 
 <style>