@marianmeres/stuic 3.73.0 → 3.75.0

package/AGENTS.md

@@ -23,7 +23,7 @@
 
 ```
 src/lib/
-├── components/     # 55 UI components
+├── components/     # 56 UI components
 ├── actions/        # 15 Svelte actions
 ├── utils/          # 43 utility modules
 ├── themes/         # Generated theme CSS (css/) — definitions from @marianmeres/design-tokens
@@ -116,7 +116,7 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 
 ### Domain Docs
 
-- [Components](./docs/domains/components.md) — 55 component directories, Props pattern, snippets
+- [Components](./docs/domains/components.md) — 56 component directories, Props pattern, snippets
 - [Theming](./docs/domains/theming.md) — CSS tokens, dark mode, themes
 - [Actions](./docs/domains/actions.md) — 15 Svelte directives
 - [Utils](./docs/domains/utils.md) — 43 utility modules

package/API.md

@@ -841,6 +841,36 @@ User avatar with fallback to initials or icon.
 <!-- Shows "JD" initials -->
 ```
 
+#### `Pill`
+
+Inline rounded badge/tag/chip with intent + variant + size system. Polymorphic: renders as `<span>` (default), `<a>` (when `href` set), or `<button>` (when `onclick` set).
+
+| Prop            | Type                                                               | Default  | Description                                          |
+| --------------- | ------------------------------------------------------------------ | -------- | ---------------------------------------------------- |
+| `intent`        | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -        | Semantic color                                       |
+| `variant`       | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"soft"` | Visual treatment                                     |
+| `size`          | `"sm" \| "md" \| "lg"`                                             | `"md"`   | Pill size                                            |
+| `roundedFull`   | `boolean`                                                          | `true`   | Fully rounded (9999px). `false` → element radius     |
+| `block`         | `boolean`                                                          | `false`  | Block-level flex (full width)                        |
+| `dot`           | `boolean`                                                          | `false`  | Status dot before content                            |
+| `dismissible`   | `boolean`                                                          | `false`  | Built-in X dismiss button                            |
+| `ondismiss`     | `(e: MouseEvent) => void`                                          | -        | Called when X clicked (stops propagation)            |
+| `active`        | `boolean`                                                          | `false`  | Selected state (filter-chip)                         |
+| `muted`         | `boolean`                                                          | `false`  | Lower opacity                                        |
+| `href`, `target`| `string`                                                           | -        | Render as `<a>`                                      |
+| `onclick`       | `(e: MouseEvent) => void`                                          | -        | Render as `<button>`                                 |
+| `contentBefore` | `THC`                                                              | -        | Content before children                              |
+| `contentAfter`  | `THC`                                                              | -        | Content after children                               |
+
+```svelte
+<Pill intent="success" dot>Online</Pill>
+<Pill intent="primary" dismissible ondismiss={() => removeTag()}>tag</Pill>
+<Pill intent="accent" href="/profile">Profile</Pill>
+<Pill intent="warning" variant="outline" active onclick={toggle}>Filter</Pill>
+```
+
+CSS tokens: `--stuic-pill-radius`, `--stuic-pill-font-family`, `--stuic-pill-font-weight`, `--stuic-pill-gap`, `--stuic-pill-dot-size`, `--stuic-pill-ring-{width,color}`, `--stuic-pill-{padding-x,padding-y,font-size,min-height}-{sm,md,lg}`.
+
 #### `KbdShortcut`
 
 Keyboard shortcut display.

package/README.md

@@ -164,7 +164,7 @@ CommandMenu, DropdownMenu, TabbedMenu, TypeaheadInput, KbdShortcut
 
 ### Display & Utility
 
-Avatar, Book, BookResponsive, Card, Carousel, Circle, AnimatedElipsis, H, IconSwap, ImageCycler, Separator, ThemePreview, Tree, ColorScheme, Thc, HoverExpandableWidth, AssetsPreview, AssetsPreviewInline, DataTable
+Avatar, Pill, Book, BookResponsive, Card, Carousel, Circle, AnimatedElipsis, H, IconSwap, ImageCycler, Separator, ThemePreview, Tree, ColorScheme, Thc, HoverExpandableWidth, AssetsPreview, AssetsPreviewInline, DataTable
 
 ### E-commerce
 

package/dist/components/Book/BookResponsive.svelte

@@ -25,6 +25,7 @@
 </script>
 
 <script lang="ts">
+	import { untrack } from "svelte";
 	import {
 		iconBookOpen,
 		iconArrowRight as iconNext,
@@ -89,7 +90,7 @@
 
 	// ---- Manual mode override ----
 
-	let manualMode: "book" | "inline" | null = $state(initialMode ?? null);
+	let manualMode: "book" | "inline" | null = $state(untrack(() => initialMode ?? null));
 
 	// ---- Inline mode ----
 

package/dist/components/DismissibleMessage/index.css

@@ -7,6 +7,12 @@
 :root {
 	--stuic-dismissible-message-padding-x: calc(var(--spacing) * 4);
 	--stuic-dismissible-message-padding-y: calc(var(--spacing) * 3);
+	--stuic-dismissible-x-padding: calc(var(--spacing) * 1);
+	--stuic-dismissible-x-bg-hover: rgb(0 0 0 / 0.1);
+}
+
+:root.dark {
+	--stuic-dismissible-x-bg-hover: rgb(255 255 255 / 0.05);
 }
 
 @layer components {
@@ -17,7 +23,10 @@
 	.stuic-dismissible-message {
 		display: flex;
 		align-items: center;
-		border-width: var(--stuic-dismissible-message-border-width, var(--stuic-border-width));
+		border-width: var(
+			--stuic-dismissible-message-border-width,
+			var(--stuic-border-width)
+		);
 		border-style: solid;
 		border-radius: var(--stuic-dismissible-message-radius, var(--stuic-radius));
 		transition:
@@ -58,12 +67,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: calc(var(--stuic-dismissible-message-padding-y) * 0.75);
+		padding: var(--stuic-dismissible-x-padding);
 	}
 
 	/* Dismiss button inherits message text color */
 	.stuic-dismissible-message > .dismiss .stuic-button {
 		color: var(--_text);
+		--_bg-hover: var(--stuic-dismissible-x-bg-hover);
+		--_bg-active: var(--stuic-dismissible-x-bg-hover);
 	}
 
 	/* =============================================================================

package/dist/components/Input/FieldPhoneNumber.svelte

@@ -59,7 +59,7 @@
 </script>
 
 <script lang="ts">
-	import { tick } from "svelte";
+	import { tick, untrack } from "svelte";
 	import {
 		validate as validateAction,
 		type ValidationResult,
@@ -142,9 +142,8 @@
 	});
 
 	// Selected country object (initialize once from defaultCountry prop)
-	const _initCountry = defaultCountry;
 	let selectedCountry: Country | undefined = $state(
-		_initCountry ? ISO_MAP.get(_initCountry.toUpperCase()) : undefined
+		untrack(() => (defaultCountry ? ISO_MAP.get(defaultCountry.toUpperCase()) : undefined))
 	);
 
 	// Internal local number (for controlled input)

package/dist/components/LoginForm/LoginForm.svelte

@@ -157,7 +157,7 @@
 
 <form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
-	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
+	<DismissibleMessage message={error} intent="destructive" />
 
 	<!--
 			svelte-ignore binding_property_non_reactive:

package/dist/components/Pill/Pill.svelte

@@ -0,0 +1,205 @@
+<script lang="ts" module>
+	import type {
+		HTMLAttributes,
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+	} from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	export type PillVariant = "solid" | "outline" | "ghost" | "soft" | "link";
+	export type PillSize = "sm" | "md" | "lg";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+		/** Color intent (semantic meaning) */
+		intent?: IntentColorKey;
+		/** Visual variant (how colors are applied) */
+		variant?: PillVariant | string;
+		/** Size preset */
+		size?: PillSize | string;
+		/** Reduce emphasis (lower opacity) */
+		muted?: boolean;
+		/** Selected/active state — useful for filter-chip behavior */
+		active?: boolean;
+		/** Pill is fully rounded by default; set false to use element radius */
+		roundedFull?: boolean;
+		/** Render as block-level flex (full width). Inline-flex by default. */
+		block?: boolean;
+		/** Skip all default styling, use only custom classes */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Render as anchor tag */
+		href?: string;
+		/** Link target (e.g. "_blank") — only relevant when href is set */
+		target?: string;
+		/** Render as button (when href not set) */
+		onclick?: (e: MouseEvent) => void;
+		/** Disabled (interactive variants only) */
+		disabled?: boolean;
+		/** Show built-in X dismiss control */
+		dismissible?: boolean;
+		/** Called when X is clicked. Stops propagation so parent onclick is unaffected. */
+		ondismiss?: (e: MouseEvent) => void;
+		/** Status dot rendered before content (uses current intent color) */
+		dot?: boolean;
+		/** Content rendered before children */
+		contentBefore?: THC;
+		/** Content rendered after children */
+		contentAfter?: THC;
+		/** Bindable element reference */
+		el?: HTMLElement;
+		/** Content snippet */
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
+	import { X } from "../X/index.js";
+
+	let {
+		class: classProp,
+		intent,
+		variant = "soft",
+		size = "md",
+		muted = false,
+		active = false,
+		roundedFull = true,
+		block = false,
+		unstyled = false,
+		href,
+		target,
+		onclick,
+		disabled,
+		dismissible = false,
+		ondismiss,
+		dot = false,
+		contentBefore,
+		contentAfter,
+		el = $bindable(),
+		children,
+		...rest
+	}: Props = $props();
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-pill", classProp));
+
+	function handleDismiss(e: MouseEvent) {
+		e.stopPropagation();
+		ondismiss?.(e);
+	}
+</script>
+
+{#snippet body()}
+	{#if dot}
+		<span class="stuic-pill-dot" aria-hidden="true"></span>
+	{/if}
+	{#if isTHCNotEmpty(contentBefore)}
+		<Thc thc={contentBefore as THC} />
+	{/if}
+	{@render children?.()}
+	{#if isTHCNotEmpty(contentAfter)}
+		<Thc thc={contentAfter as THC} />
+	{/if}
+{/snippet}
+
+{#snippet dismissBtn()}
+	<button
+		type="button"
+		class="stuic-pill-dismiss"
+		aria-label="Dismiss"
+		onclick={handleDismiss}
+		{disabled}
+	>
+		<X strokeWidth={2} />
+	</button>
+{/snippet}
+
+{#if dismissible}
+	<!-- Wrapper pattern: outer span carries pill styling; inner element is the
+	     interactive area (when href/onclick); X dismiss is a sibling button. -->
+	<span
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		data-dismissible="true"
+		{...rest}
+	>
+		{#if href}
+			<a {href} {target} class="stuic-pill-main">
+				{@render body()}
+			</a>
+		{:else if onclick}
+			<button type="button" class="stuic-pill-main" {onclick} {disabled}>
+				{@render body()}
+			</button>
+		{:else}
+			{@render body()}
+		{/if}
+		{@render dismissBtn()}
+	</span>
+{:else if href}
+	<a
+		{href}
+		{target}
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		data-interactive="true"
+		{...rest as HTMLAnchorAttributes}
+	>
+		{@render body()}
+	</a>
+{:else if onclick}
+	<button
+		type="button"
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		data-interactive="true"
+		{onclick}
+		{disabled}
+		{...rest as HTMLButtonAttributes}
+	>
+		{@render body()}
+	</button>
+{:else}
+	<span
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		{...rest}
+	>
+		{@render body()}
+	</span>
+{/if}

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

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { IntentColorKey } from "../../utils/design-tokens.js";
+import type { THC } from "../Thc/Thc.svelte";
+export type PillVariant = "solid" | "outline" | "ghost" | "soft" | "link";
+export type PillSize = "sm" | "md" | "lg";
+export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Color intent (semantic meaning) */
+    intent?: IntentColorKey;
+    /** Visual variant (how colors are applied) */
+    variant?: PillVariant | string;
+    /** Size preset */
+    size?: PillSize | string;
+    /** Reduce emphasis (lower opacity) */
+    muted?: boolean;
+    /** Selected/active state — useful for filter-chip behavior */
+    active?: boolean;
+    /** Pill is fully rounded by default; set false to use element radius */
+    roundedFull?: boolean;
+    /** Render as block-level flex (full width). Inline-flex by default. */
+    block?: boolean;
+    /** Skip all default styling, use only custom classes */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Render as anchor tag */
+    href?: string;
+    /** Link target (e.g. "_blank") — only relevant when href is set */
+    target?: string;
+    /** Render as button (when href not set) */
+    onclick?: (e: MouseEvent) => void;
+    /** Disabled (interactive variants only) */
+    disabled?: boolean;
+    /** Show built-in X dismiss control */
+    dismissible?: boolean;
+    /** Called when X is clicked. Stops propagation so parent onclick is unaffected. */
+    ondismiss?: (e: MouseEvent) => void;
+    /** Status dot rendered before content (uses current intent color) */
+    dot?: boolean;
+    /** Content rendered before children */
+    contentBefore?: THC;
+    /** Content rendered after children */
+    contentAfter?: THC;
+    /** Bindable element reference */
+    el?: HTMLElement;
+    /** Content snippet */
+    children?: Snippet;
+}
+declare const Pill: import("svelte").Component<Props, {}, "el">;
+type Pill = ReturnType<typeof Pill>;
+export default Pill;

package/dist/components/Pill/README.md

@@ -0,0 +1,211 @@
+# Pill
+
+A small rounded inline element for tags, badges, status indicators, and filter chips. Polymorphic (renders as `<span>`, `<a>`, or `<button>` depending on props), with optional dismiss button, status dot, and content slots.
+
+## Props
+
+| Prop            | Type                                                               | Default  | Description                                                          |
+| --------------- | ------------------------------------------------------------------ | -------- | -------------------------------------------------------------------- |
+| `intent`        | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -        | Semantic color intent                                                |
+| `variant`       | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"soft"` | Visual variant (how colors are applied)                              |
+| `size`          | `"sm" \| "md" \| "lg"`                                             | `"md"`   | Pill size                                                            |
+| `muted`         | `boolean`                                                          | `false`  | Reduce emphasis (lower opacity)                                      |
+| `active`        | `boolean`                                                          | `false`  | Selected/active state (filter-chip behavior)                         |
+| `roundedFull`   | `boolean`                                                          | `true`   | Fully rounded corners (9999px). Set `false` to use the element radius |
+| `block`         | `boolean`                                                          | `false`  | Render as block-level flex (full width). `inline-flex` by default     |
+| `unstyled`      | `boolean`                                                          | `false`  | Skip all default styling                                             |
+| `href`          | `string`                                                           | -        | Render as `<a>` with this URL                                        |
+| `target`        | `string`                                                           | -        | Link target (only when `href` is set)                                |
+| `onclick`       | `(e: MouseEvent) => void`                                          | -        | Render as `<button>` with this handler (when no `href`)              |
+| `disabled`      | `boolean`                                                          | -        | Disabled state (interactive variants only)                           |
+| `dismissible`   | `boolean`                                                          | `false`  | Show built-in X dismiss button                                       |
+| `ondismiss`     | `(e: MouseEvent) => void`                                          | -        | Called when X is clicked. Stops propagation                          |
+| `dot`           | `boolean`                                                          | `false`  | Status dot rendered before content                                   |
+| `contentBefore` | `THC`                                                              | -        | Content rendered before children                                     |
+| `contentAfter`  | `THC`                                                              | -        | Content rendered after children                                      |
+| `el`            | `HTMLElement`                                                      | -        | Element reference (bindable)                                         |
+| `class`         | `string`                                                           | -        | Additional CSS classes                                               |
+
+## Element Resolution
+
+| Condition                         | Element                                                |
+| --------------------------------- | ------------------------------------------------------ |
+| Default                           | `<span>`                                               |
+| `href` set                        | `<a>`                                                  |
+| `onclick` set (no `href`)         | `<button>`                                             |
+| `dismissible` set                 | `<span>` wrapper containing main element + X sibling   |
+
+## Usage
+
+### Intent x Variant
+
+```svelte
+<script lang="ts">
+	import { Pill } from "@marianmeres/stuic";
+</script>
+
+<Pill intent="primary">primary</Pill>
+<Pill intent="success" variant="solid">success</Pill>
+<Pill intent="destructive" variant="outline">destructive</Pill>
+<Pill intent="warning" variant="ghost">warning</Pill>
+<Pill intent="accent" variant="link">accent</Pill>
+```
+
+### Sizes
+
+```svelte
+<Pill size="sm">Small</Pill>
+<Pill size="md">Medium</Pill>
+<Pill size="lg">Large</Pill>
+```
+
+### Polymorphic
+
+```svelte
+<!-- Plain inline marker (span) -->
+<Pill intent="primary">tag</Pill>
+
+<!-- Anchor link -->
+<Pill intent="accent" href="/profile">Profile</Pill>
+
+<!-- Button -->
+<Pill intent="success" onclick={() => console.log("clicked")}>
+	Click me
+</Pill>
+```
+
+### Status Dot
+
+```svelte
+<Pill intent="success" dot>Online</Pill>
+<Pill intent="warning" dot>Idle</Pill>
+<Pill intent="destructive" dot>Offline</Pill>
+```
+
+### Dismissible
+
+```svelte
+<script lang="ts">
+	let tags = $state(["svelte", "tailwind", "stuic"]);
+</script>
+
+{#each tags as tag (tag)}
+	<Pill
+		intent="primary"
+		dismissible
+		ondismiss={() => (tags = tags.filter((x) => x !== tag))}
+	>
+		{tag}
+	</Pill>
+{/each}
+```
+
+`dismissible` works alongside `onclick` and `href` — the X button stops propagation so the parent click/navigation only fires for clicks outside the X.
+
+### Filter Chips (active state)
+
+```svelte
+<script lang="ts">
+	let filters = $state(new Set<string>());
+	function toggle(f: string) {
+		filters.has(f) ? filters.delete(f) : filters.add(f);
+		filters = new Set(filters);
+	}
+</script>
+
+{#each ["new", "popular", "in-stock"] as opt}
+	<Pill
+		intent="primary"
+		variant="outline"
+		active={filters.has(opt)}
+		onclick={() => toggle(opt)}
+	>
+		{opt}
+	</Pill>
+{/each}
+```
+
+### Icons via contentBefore / contentAfter
+
+```svelte
+<Pill intent="success" contentBefore={{ html: iconCheck() }}>Verified</Pill>
+<Pill intent="primary" contentAfter={{ html: iconArrowRight() }}>Next</Pill>
+```
+
+`contentBefore` and `contentAfter` accept any `THC` value (string, `{ html }`, `{ text }`, component, snippet).
+
+### Block (full width)
+
+```svelte
+<Pill intent="primary" block>Block-level pill</Pill>
+```
+
+### Custom Styling
+
+```svelte
+<!-- Override radius inline -->
+<Pill intent="primary" style="--stuic-pill-radius: 4px;">Squared</Pill>
+
+<!-- Disable rounded-full default for element-radius -->
+<Pill intent="primary" roundedFull={false}>Element radius</Pill>
+
+<!-- Unstyled for full control -->
+<Pill unstyled class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full">
+	Custom
+</Pill>
+```
+
+## CSS Variables
+
+### Component Tokens
+
+| Variable                      | Default                | Description           |
+| ----------------------------- | ---------------------- | --------------------- |
+| `--stuic-pill-radius`         | `--stuic-radius`       | Border radius (overridden to `9999px` by `roundedFull`) |
+| `--stuic-pill-font-family`    | `--font-sans`          | Font family           |
+| `--stuic-pill-font-weight`    | `--font-weight-medium` | Font weight           |
+| `--stuic-pill-transition`     | `--stuic-transition`   | Transition duration   |
+| `--stuic-pill-border-width`   | `--stuic-border-width` | Border width          |
+| `--stuic-pill-ring-width`     | `2px`                  | Focus ring width      |
+| `--stuic-pill-ring-color`     | `--stuic-color-ring`   | Focus ring color      |
+| `--stuic-pill-gap`            | `0.375rem`             | Gap between dot/before/children/after/dismiss |
+| `--stuic-pill-dot-size`       | `0.5rem`               | Status dot diameter   |
+
+### Size Tokens
+
+Each size (sm, md, lg) has corresponding tokens:
+
+- `--stuic-pill-padding-x-{size}`
+- `--stuic-pill-padding-y-{size}`
+- `--stuic-pill-font-size-{size}`
+- `--stuic-pill-min-height-{size}`
+
+Dismissible pills override `padding-y` to `0` (the X button defines the height).
+
+### Intent Color Tokens
+
+Pill reuses the global intent palette:
+
+```css
+:root {
+	--stuic-color-primary: ...;
+	--stuic-color-primary-hover: ...;
+	--stuic-color-primary-foreground: ...;
+	/* + accent, destructive, warning, success */
+}
+```
+
+## Data Attributes
+
+The component uses data attributes for styling:
+
+- `data-intent` - intent value
+- `data-variant` - variant value
+- `data-size` - size value
+- `data-muted` - present when `muted`
+- `data-active` - present when `active`
+- `data-rounded-full` - present when `roundedFull`
+- `data-block` - present when `block`
+- `data-with-dot` - present when `dot`
+- `data-dismissible` - present when `dismissible`
+- `data-interactive` - present on `<a>` / `<button>` non-dismissible variants

package/dist/components/Pill/index.css

@@ -0,0 +1,488 @@
+/* ============================================================================
+   PILL COMPONENT TOKENS
+   Override globally: :root { --stuic-pill-radius: 4px; }
+   Override locally:  <Pill style="--stuic-pill-radius: 4px;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Component-level customization tokens */
+	--stuic-pill-font-family: var(--font-sans);
+	--stuic-pill-font-weight: var(--font-weight-medium);
+
+	/* Focus ring (interactive variants) */
+	--stuic-pill-ring-width: 2px;
+	--stuic-pill-ring-offset: 0px;
+	--stuic-pill-ring-color: var(--stuic-color-ring);
+
+	/* Layout */
+	--stuic-pill-gap: 0.375rem;
+
+	/* Status dot */
+	--stuic-pill-dot-size: 0.5rem;
+
+	/* Size: sm */
+	--stuic-pill-padding-x-sm: 0.5rem;
+	--stuic-pill-padding-y-sm: 0.125rem;
+	--stuic-pill-font-size-sm: 0.75rem;
+	--stuic-pill-min-height-sm: 1.25rem;
+
+	/* Size: md */
+	--stuic-pill-padding-x-md: 0.625rem;
+	--stuic-pill-padding-y-md: 0.1875rem;
+	--stuic-pill-font-size-md: 0.875rem;
+	--stuic-pill-min-height-md: 1.5rem;
+
+	/* Size: lg */
+	--stuic-pill-padding-x-lg: 0.875rem;
+	--stuic-pill-padding-y-lg: 0.3125rem;
+	--stuic-pill-font-size-lg: 1rem;
+	--stuic-pill-min-height-lg: 1.875rem;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-pill {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--stuic-pill-gap);
+		vertical-align: middle;
+
+		/* Typography */
+		font-family: var(--stuic-pill-font-family);
+		font-weight: var(--stuic-pill-font-weight);
+		line-height: 1;
+		text-align: center;
+		text-decoration: none;
+		white-space: nowrap;
+
+		/* Box model */
+		border-width: var(--stuic-pill-border-width, var(--stuic-border-width));
+		border-style: solid;
+		border-radius: var(--stuic-pill-radius, var(--stuic-radius));
+
+		/* Interaction */
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+		transition:
+			background var(--stuic-pill-transition, var(--stuic-transition)),
+			color var(--stuic-pill-transition, var(--stuic-transition)),
+			border-color var(--stuic-pill-transition, var(--stuic-transition)),
+			opacity var(--stuic-pill-transition, var(--stuic-transition));
+
+		/* Colors - use internal vars set by intent/variant */
+		background: var(--_bg);
+		color: var(--_text);
+		border-color: var(--_border);
+	}
+
+	/* Non-interactive default cursor */
+	span.stuic-pill {
+		cursor: default;
+	}
+
+	/* Interactive elements */
+	a.stuic-pill,
+	button.stuic-pill {
+		cursor: pointer;
+	}
+
+	/* Focus styles (interactive variants) */
+	a.stuic-pill:focus-visible,
+	button.stuic-pill:focus-visible {
+		outline: var(--stuic-pill-ring-width) solid
+			var(--_ring, var(--stuic-pill-ring-color));
+		outline-offset: var(--stuic-pill-ring-offset);
+	}
+
+	/* Hover state (interactive variants) */
+	a.stuic-pill:hover:not(:disabled),
+	button.stuic-pill:hover:not(:disabled) {
+		background: var(--_bg-hover);
+		color: var(--_text-hover);
+		border-color: var(--_border-hover);
+	}
+
+	/* Active state (interactive variants) */
+	a.stuic-pill:active:not(:disabled),
+	button.stuic-pill:active:not(:disabled) {
+		background: var(--_bg-active);
+		color: var(--_text-active);
+		border-color: var(--_border-active);
+	}
+
+	/* Disabled state */
+	.stuic-pill:disabled,
+	.stuic-pill[aria-disabled="true"] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* ============================================================================
+	   SIZE VARIANTS
+	   ============================================================================ */
+
+	.stuic-pill[data-size="sm"] {
+		padding: var(--stuic-pill-padding-y-sm) var(--stuic-pill-padding-x-sm);
+		font-size: var(--stuic-pill-font-size-sm);
+		min-height: var(--stuic-pill-min-height-sm);
+	}
+
+	.stuic-pill[data-size="md"] {
+		padding: var(--stuic-pill-padding-y-md) var(--stuic-pill-padding-x-md);
+		font-size: var(--stuic-pill-font-size-md);
+		min-height: var(--stuic-pill-min-height-md);
+	}
+
+	.stuic-pill[data-size="lg"] {
+		padding: var(--stuic-pill-padding-y-lg) var(--stuic-pill-padding-x-lg);
+		font-size: var(--stuic-pill-font-size-lg);
+		min-height: var(--stuic-pill-min-height-lg);
+	}
+
+	/* Dismissible pills: drop vertical padding — the X button already provides
+	   visual height, extra padding-y just makes them oversized. */
+	.stuic-pill[data-dismissible="true"][data-size="sm"],
+	.stuic-pill[data-dismissible="true"][data-size="md"],
+	.stuic-pill[data-dismissible="true"][data-size="lg"] {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+	/* ============================================================================
+	   INTENT COLOR MAPPING
+	   ============================================================================ */
+
+	.stuic-pill:not([data-intent]) {
+		--_color: var(--stuic-color-muted);
+		--_color-hover: var(--stuic-color-muted-hover);
+		--_color-active: var(--stuic-color-muted-active);
+		--_fg: var(--stuic-color-foreground);
+		--_fg-hover: var(--stuic-color-foreground-hover);
+		--_fg-active: var(--stuic-color-foreground-active);
+	}
+
+	.stuic-pill[data-intent="primary"] {
+		--_color: var(--stuic-color-primary);
+		--_color-hover: var(--stuic-color-primary-hover);
+		--_color-active: var(--stuic-color-primary-active);
+		--_fg: var(--stuic-color-primary-foreground);
+		--_fg-hover: var(--stuic-color-primary-foreground-hover);
+		--_fg-active: var(--stuic-color-primary-foreground-active);
+	}
+
+	.stuic-pill[data-intent="accent"] {
+		--_color: var(--stuic-color-accent);
+		--_color-hover: var(--stuic-color-accent-hover);
+		--_color-active: var(--stuic-color-accent-active);
+		--_fg: var(--stuic-color-accent-foreground);
+		--_fg-hover: var(--stuic-color-accent-foreground-hover);
+		--_fg-active: var(--stuic-color-accent-foreground-active);
+	}
+
+	.stuic-pill[data-intent="destructive"] {
+		--_color: var(--stuic-color-destructive);
+		--_color-hover: var(--stuic-color-destructive-hover);
+		--_color-active: var(--stuic-color-destructive-active);
+		--_fg: var(--stuic-color-destructive-foreground);
+		--_fg-hover: var(--stuic-color-destructive-foreground-hover);
+		--_fg-active: var(--stuic-color-destructive-foreground-active);
+	}
+
+	.stuic-pill[data-intent="warning"] {
+		--_color: var(--stuic-color-warning);
+		--_color-hover: var(--stuic-color-warning-hover);
+		--_color-active: var(--stuic-color-warning-active);
+		--_fg: var(--stuic-color-warning-foreground);
+		--_fg-hover: var(--stuic-color-warning-foreground-hover);
+		--_fg-active: var(--stuic-color-warning-foreground-active);
+	}
+
+	.stuic-pill[data-intent="success"] {
+		--_color: var(--stuic-color-success);
+		--_color-hover: var(--stuic-color-success-hover);
+		--_color-active: var(--stuic-color-success-active);
+		--_fg: var(--stuic-color-success-foreground);
+		--_fg-hover: var(--stuic-color-success-foreground-hover);
+		--_fg-active: var(--stuic-color-success-foreground-active);
+	}
+
+	/* ============================================================================
+	   VARIANT STYLES
+	   ============================================================================ */
+
+	/* Solid: filled background with contrasting text */
+	.stuic-pill[data-variant="solid"] {
+		--_bg: var(--_color);
+		--_bg-hover: var(--_color-hover);
+		--_bg-active: var(--_color-active);
+		--_text: var(--_fg);
+		--_text-hover: var(--_fg-hover);
+		--_text-active: var(--_fg-active);
+		--_border: var(--_color);
+		--_border-hover: var(--_color-hover);
+		--_border-active: var(--_color-active);
+	}
+
+	/* Outline: transparent background with colored border and text */
+	.stuic-pill[data-variant="outline"] {
+		--_bg: transparent;
+		--_bg-hover: color-mix(in srgb, var(--_color) 10%, var(--stuic-color-background));
+		--_bg-active: color-mix(in srgb, var(--_color) 20%, var(--stuic-color-background));
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: var(--_color);
+		--_border-hover: var(--_color-hover);
+		--_border-active: var(--_color-active);
+	}
+
+	/* Ghost: transparent background, colored text, subtle hover state */
+	.stuic-pill[data-variant="ghost"] {
+		--_bg: transparent;
+		--_bg-hover: color-mix(in srgb, var(--_color) 10%, var(--stuic-color-background));
+		--_bg-active: color-mix(in srgb, var(--_color) 20%, var(--stuic-color-background));
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: transparent;
+		--_border-hover: transparent;
+		--_border-active: transparent;
+	}
+
+	/* Soft (default): muted background tint with colored text */
+	.stuic-pill[data-variant="soft"],
+	.stuic-pill:not([data-variant]) {
+		--_bg: color-mix(in srgb, var(--_color) 15%, var(--stuic-color-background));
+		--_bg-hover: color-mix(in srgb, var(--_color) 25%, var(--stuic-color-background));
+		--_bg-active: color-mix(in srgb, var(--_color) 35%, var(--stuic-color-background));
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: transparent;
+		--_border-hover: transparent;
+		--_border-active: transparent;
+	}
+
+	/* Link: appears as inline text link, minimal styling */
+	.stuic-pill[data-variant="link"] {
+		--_bg: transparent;
+		--_bg-hover: transparent;
+		--_bg-active: transparent;
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: transparent;
+		--_border-hover: transparent;
+		--_border-active: transparent;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+		min-height: auto;
+		padding: 0;
+	}
+
+	/* ============================================================================
+	   DEFAULT INTENT OVERRIDES
+	   The default intent uses neutral role tokens — adjust per variant for legibility.
+	   ============================================================================ */
+
+	.stuic-pill:not([data-intent])[data-variant="solid"] {
+		--_text: var(--stuic-color-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+		--_border: var(--stuic-color-border-hover);
+		--_border-hover: var(--stuic-color-border-active);
+		--_border-active: var(--stuic-color-border-active);
+	}
+
+	.stuic-pill:not([data-intent])[data-variant="outline"] {
+		--_text: var(--stuic-color-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+		--_border: var(--stuic-color-border-hover);
+		--_border-hover: var(--stuic-color-border-hover);
+		--_border-active: var(--stuic-color-border-active);
+		--_bg-hover: var(--stuic-color-muted-hover);
+		--_bg-active: var(--stuic-color-muted-active);
+	}
+
+	.stuic-pill:not([data-intent])[data-variant="ghost"] {
+		--_text: var(--stuic-color-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+		--_bg-hover: var(--stuic-color-muted-hover);
+		--_bg-active: var(--stuic-color-muted-active);
+	}
+
+	.stuic-pill:not([data-intent])[data-variant="soft"],
+	.stuic-pill:not([data-intent]):not([data-variant]) {
+		--_bg: var(--stuic-color-muted);
+		--_bg-hover: var(--stuic-color-muted-hover);
+		--_bg-active: var(--stuic-color-muted-active);
+		--_text: var(--stuic-color-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+	}
+
+	.stuic-pill:not([data-intent])[data-variant="link"] {
+		--_text: var(--stuic-color-muted-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+	}
+
+	/* ============================================================================
+	   MUTED MODIFIER
+	   ============================================================================ */
+
+	.stuic-pill[data-muted="true"] {
+		opacity: 0.7;
+	}
+
+	a.stuic-pill[data-muted="true"]:hover:not(:disabled),
+	button.stuic-pill[data-muted="true"]:hover:not(:disabled) {
+		opacity: 0.85;
+	}
+
+	/* ============================================================================
+	   ACTIVE (selected) MODIFIER
+	   Slight emphasis — useful for filter-chip toggleable behavior.
+	   ============================================================================ */
+
+	.stuic-pill[data-active="true"][data-variant="outline"],
+	.stuic-pill[data-active="true"][data-variant="ghost"],
+	.stuic-pill[data-active="true"][data-variant="soft"] {
+		--_bg: color-mix(in srgb, var(--_color) 25%, var(--stuic-color-background));
+		--_border: var(--_color);
+	}
+
+	.stuic-pill[data-active="true"][data-variant="solid"] {
+		--_bg: var(--_color-active);
+		--_border: var(--_color-active);
+	}
+
+	/* ============================================================================
+	   ROUNDED FULL (default)
+	   ============================================================================ */
+
+	.stuic-pill[data-rounded-full="true"] {
+		--stuic-pill-radius: 9999px;
+	}
+
+	/* ============================================================================
+	   BLOCK MODIFIER
+	   Block-level flex (full width) instead of the default inline-flex.
+	   ============================================================================ */
+
+	.stuic-pill[data-block="true"] {
+		display: flex;
+		width: 100%;
+	}
+
+	/* ============================================================================
+	   STATUS DOT
+	   ============================================================================ */
+
+	.stuic-pill-dot {
+		display: inline-block;
+		width: var(--stuic-pill-dot-size);
+		height: var(--stuic-pill-dot-size);
+		border-radius: 9999px;
+		background: var(--_color);
+		flex-shrink: 0;
+	}
+
+	/* On solid variants the bg already IS the intent color — use foreground instead. */
+	.stuic-pill[data-variant="solid"] .stuic-pill-dot {
+		background: var(--_text);
+	}
+
+	/* ============================================================================
+	   DISMISSIBLE WRAPPER
+	   When dismissible, the outer span is the styled pill; inner main + dismiss
+	   button are siblings. Strip default styling from the inner interactive area.
+	   ============================================================================ */
+
+	.stuic-pill[data-dismissible="true"] {
+		gap: var(--stuic-pill-gap);
+	}
+
+	.stuic-pill-main {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--stuic-pill-gap);
+
+		/* Reset native button/anchor defaults */
+		appearance: none;
+		background: transparent;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+		line-height: 1;
+	}
+
+	.stuic-pill-main:focus-visible {
+		outline: var(--stuic-pill-ring-width) solid
+			var(--_ring, var(--stuic-pill-ring-color));
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+
+	.stuic-pill-main:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Dismiss X button */
+	.stuic-pill-dismiss {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		appearance: none;
+		background: transparent;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		color: inherit;
+		cursor: pointer;
+		opacity: 0.7;
+		transition: opacity var(--stuic-pill-transition, var(--stuic-transition));
+		flex-shrink: 0;
+	}
+
+	.stuic-pill-dismiss:hover:not(:disabled) {
+		opacity: 1;
+	}
+
+	.stuic-pill-dismiss:focus-visible {
+		outline: var(--stuic-pill-ring-width) solid
+			var(--_ring, var(--stuic-pill-ring-color));
+		outline-offset: 1px;
+		border-radius: 9999px;
+	}
+
+	.stuic-pill-dismiss:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.stuic-pill-dismiss svg {
+		width: 1em;
+		height: 1em;
+	}
+
+	/* Tighten dismiss icon size per pill size */
+	.stuic-pill[data-size="sm"] .stuic-pill-dismiss svg {
+		width: 0.875em;
+		height: 0.875em;
+	}
+}

package/dist/components/Pill/index.d.ts

@@ -0,0 +1 @@
+export { default as Pill, type Props as PillProps, type PillVariant, type PillSize, } from "./Pill.svelte";

package/dist/components/Pill/index.js

@@ -0,0 +1 @@
+export { default as Pill, } from "./Pill.svelte";

package/dist/components/PricingTable/PricingTable.svelte

@@ -195,7 +195,6 @@
 				onButtonClick={(i) => {
 					billingPeriod = i === 0 ? "monthly" : "annual";
 				}}
-				{unstyled}
 				class={classToggleProp}
 				style="
 					width: auto;
@@ -229,7 +228,6 @@
 					class={tierClass}
 					data-highlighted={!unstyled && tier.highlighted ? "" : undefined}
 					data-disabled={!unstyled && tier.disabled ? "" : undefined}
-					aria-disabled={tier.disabled ? "true" : undefined}
 					role="listitem"
 				>
 					{#if tier.highlighted && tier.highlightedBadge}

package/dist/components/RegisterForm/RegisterForm.svelte

@@ -193,7 +193,7 @@
 
 <form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
-	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
+	<DismissibleMessage message={error} intent="destructive" />
 
 	<!-- Top-position extra fields -->
 	{#each topFields as cfg (cfg.name)}

package/dist/index.css

@@ -84,6 +84,7 @@ In practice:
 @import "./components/Nav/index.css";
 @import "./components/Notifications/index.css";
 @import "./components/OtpInput/index.css";
+@import "./components/Pill/index.css";
 @import "./components/PricingTable/index.css";
 @import "./components/Progress/index.css";
 @import "./components/Separator/index.css";

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export * from "./components/ModalDialog/index.js";
 export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/OtpInput/index.js";
+export * from "./components/Pill/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";

package/dist/index.js

@@ -61,6 +61,7 @@ export * from "./components/ModalDialog/index.js";
 export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/OtpInput/index.js";
+export * from "./components/Pill/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";

package/dist/mcp.js

@@ -1,3 +1,4 @@
+// @ts-nocheck - Deno-style imports for @marianmeres/mcp-server discovery
 import { z } from "npm:zod";
 import { generateThemeCss } from "./utils/design-tokens.js";
 import { hexToOklch, hexToRgb } from "./utils/colors.js";

package/docs/domains/components.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-55 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
+56 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
 
 ## Component Categories
 
@@ -72,6 +72,7 @@
 | Component       | Purpose                                                             |
 | --------------- | ------------------------------------------------------------------- |
 | Avatar          | User avatars with fallback                                          |
+| Pill            | Inline rounded badge/tag/chip (intent + variant + size, dismissible, dot, polymorphic span/a/button) |
 | KbdShortcut     | Keyboard shortcut hints                                             |
 | Carousel        | Image/content slider with snap, keyboard nav, wheel scroll, arrows  |
 | ListItemButton  | List item with actions                                              |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.73.0",
+  "version": "3.75.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",