@marianmeres/stuic 3.72.2 → 3.74.0

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

@@ -91,8 +91,6 @@
 		unstyled?: boolean;
 		class?: string;
 		el?: HTMLFormElement;
-
-		compact?: boolean;
 	}
 </script>
 
@@ -129,7 +127,6 @@
 		unstyled = false,
 		class: classProp,
 		el = $bindable(),
-		compact,
 		...rest
 	}: Props = $props();
 
@@ -194,13 +191,7 @@
 	let _class = $derived(unstyled ? classProp : twMerge("stuic-register-form", classProp));
 </script>
 
-<form
-	bind:this={el}
-	class={_class}
-	use:onSubmitValidityCheck
-	{...rest}
-	data-compact={compact ? "" : undefined}
->
+<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
 	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
 
@@ -217,7 +208,6 @@
 			required={cfg.required}
 			name={`register-extra-${cfg.name}`}
 			labelLeftBreakpoint={0}
-			class={compact ? "mb-4" : ""}
 			validate={{
 				customValidator() {
 					return fieldError(cfg.name) || "";
@@ -243,7 +233,6 @@
 		required
 		name="register-email"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator() {
 				return fieldError("email") || "";
@@ -263,7 +252,6 @@
 		minlength={passwordMinLength}
 		name="register-password"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator() {
 				return fieldError("password") || "";
@@ -284,7 +272,6 @@
 			minlength={passwordMinLength}
 			name="register-password-confirm"
 			labelLeftBreakpoint={0}
-			class={compact ? "mb-4" : ""}
 			validate={{
 				customValidator() {
 					return fieldError("passwordConfirm") || "";
@@ -306,7 +293,6 @@
 			required={cfg.required}
 			name={`register-extra-${cfg.name}`}
 			labelLeftBreakpoint={0}
-			class={compact ? "mb-4" : ""}
 			validate={{
 				customValidator() {
 					return fieldError(cfg.name) || "";
@@ -324,14 +310,6 @@
 	<!-- CTA -->
 	{#if submitButton}
 		{@render submitButton({ isSubmitting, disabled: isSubmitting })}
-	{:else if compact}
-		<div class={unstyled ? undefined : "stuic-register-form-compact-cta"}>
-			<Button intent="primary" type="submit" disabled={isSubmitting} class="block">
-				{isSubmitting
-					? (submittingLabel ?? t("register_form.submitting"))
-					: (submitLabel ?? t("register_form.submit"))}
-			</Button>
-		</div>
 	{:else}
 		<div class={unstyled ? undefined : "stuic-register-form-submit"}>
 			<Button intent="primary" type="submit" disabled={isSubmitting} class="w-full">

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

@@ -70,7 +70,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
     unstyled?: boolean;
     class?: string;
     el?: HTMLFormElement;
-    compact?: boolean;
 }
 declare const RegisterForm: import("svelte").Component<Props, {}, "el" | "formData">;
 type RegisterForm = ReturnType<typeof RegisterForm>;

package/dist/components/RegisterForm/RegisterFormModal.svelte

@@ -206,7 +206,6 @@
 			t={tProp}
 			{unstyled}
 			class={classForm}
-			compact
 		/>
 	</div>
 </Modal>

package/dist/components/RegisterForm/index.css

@@ -20,7 +20,8 @@
 	}
 
 	.stuic-register-form-submit {
-		margin-top: 1rem;
+		margin-top: 1.5rem;
+		margin-bottom: 1.5rem;
 	}
 
 	/* Social login container */
@@ -51,20 +52,9 @@
 		flex-direction: column;
 		gap: var(--stuic-register-form-social-gap);
 	}
+}
 
-	.stuic-register-form-compact-cta {
-		display: flex;
-		align-items: center;
-		margin-top: 0.5rem;
-		gap: 2rem;
-	}
-
-	.stuic-register-form[data-compact] {
-		.stuic-register-form-submit {
-			margin-top: 0.5rem;
-		}
-		.stuic-button {
-			flex: 1;
-		}
-	}
+/* Tighten default FieldInput bottom margin (mb-8 → 1rem) inside the form */
+.stuic-register-form .stuic-input {
+	margin-bottom: 1rem;
 }

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                                              |