@marianmeres/stuic 3.168.0 → 3.170.0

package/dist/components/Input/index.js

@@ -8,6 +8,8 @@ export { default as FieldInput, } from "./FieldInput.svelte";
 export { default as FieldMoney, } from "./FieldMoney.svelte";
 export { default as FieldLikeButton, } from "./FieldLikeButton.svelte";
 export { default as FieldOptions, } from "./FieldOptions.svelte";
+export { createFieldOptionsT, FIELD_OPTIONS_MESSAGES_EN, } from "./field-options-i18n.js";
+export { FIELD_OPTIONS_MESSAGES_SK } from "./field-options-i18n-sk.js";
 export { default as FieldRadios, } from "./FieldRadios.svelte";
 export { default as FieldSelect, } from "./FieldSelect.svelte";
 export { default as Fieldset } from "./Fieldset.svelte";

package/dist/components/Pill/Pill.svelte

@@ -42,6 +42,8 @@
 		dismissible?: boolean;
 		/** Called when X is clicked. Stops propagation so parent onclick is unaffected. */
 		ondismiss?: (e: MouseEvent) => void;
+		/** Accessible name of the built-in X dismiss button */
+		dismissLabel?: string;
 		/** Status dot rendered before content (uses current intent color) */
 		dot?: boolean;
 		/** Content rendered before children */
@@ -76,6 +78,7 @@
 		disabled,
 		dismissible = false,
 		ondismiss,
+		dismissLabel = "Dismiss",
 		dot = false,
 		contentBefore,
 		contentAfter,
@@ -109,11 +112,14 @@
 	<button
 		type="button"
 		class="stuic-pill-dismiss"
-		aria-label="Dismiss"
+		aria-label={dismissLabel}
 		onclick={handleDismiss}
 		{disabled}
 	>
-		<X strokeWidth={2} />
+		<!-- The icon box is sized in CSS (tokens); the X itself just fills it. -->
+		<span class="stuic-pill-dismiss-icon" aria-hidden="true">
+			<X class="size-full" strokeWidth={2.5} />
+		</span>
 	</button>
 {/snippet}
 

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

@@ -35,6 +35,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     dismissible?: boolean;
     /** Called when X is clicked. Stops propagation so parent onclick is unaffected. */
     ondismiss?: (e: MouseEvent) => void;
+    /** Accessible name of the built-in X dismiss button */
+    dismissLabel?: string;
     /** Status dot rendered before content (uses current intent color) */
     dot?: boolean;
     /** Content rendered before children */

package/dist/components/Pill/README.md

@@ -4,27 +4,28 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 
 ## 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                                                |
+| 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                           |
+| `dismissLabel`  | `string`                                                           | `"Dismiss"` | Accessible name of the X dismiss button                               |
+| `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
 
@@ -172,6 +173,15 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 | `--stuic-pill-gap`          | `0.375rem`             | Gap between dot/before/children/after/dismiss           |
 | `--stuic-pill-dot-size`     | `0.5rem`               | Status dot diameter                                     |
 
+### Dismiss Button Tokens
+
+| Variable                         | Default                                             | Description                                                         |
+| -------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------- |
+| `--stuic-pill-dismiss-min-size`  | `1.5rem`                                            | Touch-target floor for the X button (its square never gets smaller) |
+| `--stuic-pill-dismiss-icon-size` | `1.125em`                                           | Size of the X glyph box (relative to the pill font size)            |
+| `--stuic-pill-dismiss-bg-hover`  | `color-mix(in srgb, currentColor 12%, transparent)` | Hover background of the whole X square                              |
+| `--stuic-pill-dismiss-bg-active` | `color-mix(in srgb, currentColor 20%, transparent)` | Pressed background of the whole X square                            |
+
 ### Size Tokens
 
 Each size (sm, md, lg) has corresponding tokens:
@@ -181,7 +191,10 @@ Each size (sm, md, lg) has corresponding tokens:
 - `--stuic-pill-font-size-{size}`
 - `--stuic-pill-min-height-{size}`
 
-Dismissible pills override `padding-y` to `0` (the X button defines the height).
+Dismissible pills override `padding-y` and `padding-inline-end` to `0`: the X button is a
+full-height square (side = the pill's `min-height`, floored at `--stuic-pill-dismiss-min-size`)
+sitting flush with the pill's end edge, and the whole square is the hover/press surface — not just
+the glyph. Its corners inherit the pill radius, so on rounded pills the hover surface is the end cap.
 
 ### Intent Color Tokens
 

package/dist/components/Pill/index.css

@@ -21,6 +21,12 @@
 	/* Status dot */
 	--stuic-pill-dot-size: 0.5rem;
 
+	/* Dismiss (X) button: a full-height square flush with the pill's end edge */
+	--stuic-pill-dismiss-min-size: 1.5rem; /* touch target floor (24px), whatever the pill size */
+	--stuic-pill-dismiss-icon-size: 1.125em; /* the X glyph box, relative to the pill font size */
+	--stuic-pill-dismiss-bg-hover: color-mix(in srgb, currentColor 12%, transparent);
+	--stuic-pill-dismiss-bg-active: color-mix(in srgb, currentColor 20%, transparent);
+
 	/* Size: sm */
 	--stuic-pill-padding-x-sm: 0.5rem;
 	--stuic-pill-padding-y-sm: 0.125rem;
@@ -145,13 +151,36 @@
 		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"] {
+	/* Dismissible pills: drop vertical + end padding — the X button spans the full
+	   height and sits flush with the end edge (its hover surface IS the end cap),
+	   so any padding there would only make the pill oversized. */
+	.stuic-pill[data-dismissible="true"] {
 		padding-top: 0;
 		padding-bottom: 0;
+		padding-inline-end: 0;
+	}
+
+	/* The X button is a square whose side follows the pill's min-height, but never
+	   drops below the touch-target floor (so sm pills keep a 24px X). */
+	.stuic-pill[data-dismissible="true"][data-size="sm"] {
+		--_dismiss-size: max(
+			var(--stuic-pill-min-height-sm),
+			var(--stuic-pill-dismiss-min-size)
+		);
+	}
+
+	.stuic-pill[data-dismissible="true"][data-size="md"] {
+		--_dismiss-size: max(
+			var(--stuic-pill-min-height-md),
+			var(--stuic-pill-dismiss-min-size)
+		);
+	}
+
+	.stuic-pill[data-dismissible="true"][data-size="lg"] {
+		--_dismiss-size: max(
+			var(--stuic-pill-min-height-lg),
+			var(--stuic-pill-dismiss-min-size)
+		);
 	}
 
 	/* ============================================================================
@@ -448,31 +477,45 @@
 		cursor: not-allowed;
 	}
 
-	/* Dismiss X button */
+	/* Dismiss X button: a full-height square segment flush with the pill's end edge.
+	   The whole square (not just the glyph) is the hover/press surface — the same
+	   treatment as SplitButton's secondary trigger. Radius is inherited from the pill,
+	   so on rounded-full pills the hover surface coincides with the end cap. */
 	.stuic-pill-dismiss {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+		align-self: stretch;
+		min-width: var(--_dismiss-size, var(--stuic-pill-dismiss-min-size));
+		min-height: var(--_dismiss-size, var(--stuic-pill-dismiss-min-size));
 		appearance: none;
 		background: transparent;
 		border: 0;
+		border-radius: inherit;
 		padding: 0;
 		margin: 0;
 		color: inherit;
 		cursor: pointer;
 		opacity: 0.7;
-		transition: opacity var(--stuic-pill-transition, var(--stuic-transition));
+		transition:
+			opacity var(--stuic-pill-transition, var(--stuic-transition)),
+			background var(--stuic-pill-transition, var(--stuic-transition));
 		flex-shrink: 0;
 	}
 
 	.stuic-pill-dismiss:hover:not(:disabled) {
 		opacity: 1;
+		background: var(--stuic-pill-dismiss-bg-hover);
+	}
+
+	.stuic-pill-dismiss:active:not(:disabled) {
+		background: var(--stuic-pill-dismiss-bg-active);
 	}
 
+	/* Flush with the pill edge, so the ring goes inside the square */
 	.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;
+		outline-offset: calc(-1 * var(--stuic-pill-ring-width));
 	}
 
 	.stuic-pill-dismiss:disabled {
@@ -480,14 +523,10 @@
 		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;
+	/* The glyph box — deliberately smaller than the button, which keeps the target. */
+	.stuic-pill-dismiss-icon {
+		display: inline-flex;
+		width: var(--stuic-pill-dismiss-icon-size);
+		height: var(--stuic-pill-dismiss-icon-size);
 	}
 }

package/dist/components/Timeline/README.md

@@ -0,0 +1,204 @@
+# Timeline
+
+Vertical event list with markers on a rail — activity feeds, audit logs, order
+tracking, "our history" pages. Renders an ordered list (`<ol>`) where every item
+has a marker (dot, icon bubble, or anything via snippet), an optional time label,
+a title, a description and an optional footer. Data-driven: pass `items`, override
+parts with snippets. Static by design — there is no "current" step; for
+progress-style flows use `Stepper` (vertical orientation).
+
+## Props
+
+| Prop               | Type                      | Default    | Description                                                                           |
+| ------------------ | ------------------------- | ---------- | ------------------------------------------------------------------------------------- |
+| `items`            | `TimelineItem[]`          | required   | The events, in the order they should appear (sort them yourself)                      |
+| `align`            | `"start" \| "alternate"`  | `"start"`  | Rail on the start side with content after it, or centered rail with alternating sides |
+| `timePosition`     | `"inline" \| "opposite"`  | `"inline"` | Time label above the title, or in its own column on the other side of the rail        |
+| `formatTime`       | `(datetime, item) => THC` | -          | Fallback label for items that have `datetime` but no `time`                           |
+| `unstyled`         | `boolean`                 | `false`    | Skip all default styling                                                              |
+| `class`            | `string`                  | -          | Additional CSS classes (merged via twMerge)                                           |
+| `classItem`        | `string`                  | -          | Class for every item (`li`)                                                           |
+| `classMarker`      | `string`                  | -          | Class for the marker                                                                  |
+| `classContent`     | `string`                  | -          | Class for the content cell                                                            |
+| `classTime`        | `string`                  | -          | Class for the time label (inline or opposite)                                         |
+| `classTitle`       | `string`                  | -          | Class for the title                                                                   |
+| `classDescription` | `string`                  | -          | Class for the description                                                             |
+| `classFooter`      | `string`                  | -          | Class for the footer area                                                             |
+| `el`               | `HTMLOListElement`        | -          | Element reference (bindable)                                                          |
+
+Any other attribute (`aria-label`, `data-*`, …) is passed to the `<ol>`.
+
+### `TimelineItem`
+
+| Field         | Type             | Description                                                                                           |
+| ------------- | ---------------- | ----------------------------------------------------------------------------------------------------- |
+| `title`       | `THC`            | Primary line (text, html, or component — see `Thc`)                                                   |
+| `description` | `THC`            | Secondary text under the title                                                                        |
+| `time`        | `THC`            | Time label, preformatted ("2 hours ago"); falls back to `formatTime(datetime)` when omitted           |
+| `datetime`    | `string \| Date` | Machine-readable timestamp → `<time datetime="…">` (a `Date` becomes ISO 8601); never displayed alone |
+| `icon`        | `THC`            | Marker content (e.g. `{ html: iconCheck() }`); switches the marker from dot to icon bubble            |
+| `intent`      | `IntentColorKey` | `"primary" \| "accent" \| "success" \| "warning" \| "destructive"` — colors the marker                |
+| `href`        | `string`         | Renders the title as a link                                                                           |
+
+## Snippet Props
+
+All three receive `{ item, index }`.
+
+| Snippet        | Description                                                            |
+| -------------- | ---------------------------------------------------------------------- |
+| `renderMarker` | Override the marker content entirely (avatars, badges…) for every item |
+| `renderItem`   | Override the whole content cell (time, title, description, footer)     |
+| `renderFooter` | Per-item footer area below the description (actions, attachments…)     |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+	import { Timeline } from "@marianmeres/stuic";
+</script>
+
+<Timeline
+	items={[
+		{ title: "Order placed", description: "Ref #1001", time: "09:00" },
+		{ title: "Payment received", time: "09:05", intent: "success" },
+		{ title: "Shipped", description: "Tracking number sent", time: "Yesterday" },
+	]}
+/>
+```
+
+### Icons and intents
+
+`icon` turns the dot into a bubble; `intent` colors either.
+
+```svelte
+<script lang="ts">
+	import { Timeline, iconCheck, iconAlertWarning } from "@marianmeres/stuic";
+</script>
+
+<Timeline
+	items={[
+		{ title: "Deployed", icon: { html: iconCheck() }, intent: "success" },
+		{
+			title: "Health check failed",
+			icon: { html: iconAlertWarning() },
+			intent: "destructive",
+		},
+		{ title: "Rolled back", intent: "warning" },
+	]}
+/>
+```
+
+### Machine-readable times + a formatter
+
+`datetime` is metadata (`<time datetime>`); `time` is what people see. Give every item
+a `datetime` and one `formatTime` and skip per-item labels:
+
+```svelte
+<script lang="ts">
+	const fmt = new Intl.DateTimeFormat("en", { dateStyle: "medium", timeStyle: "short" });
+</script>
+
+<Timeline
+	items={events.map((e) => ({ title: e.message, datetime: e.createdAt }))}
+	formatTime={(d) => fmt.format(new Date(d))}
+/>
+```
+
+### Audit-log layout (time column)
+
+```svelte
+<Timeline {items} timePosition="opposite" />
+```
+
+### Alternating sides (history page)
+
+```svelte
+<Timeline {items} align="alternate" />
+```
+
+The rail is centered and content alternates sides (`timePosition="opposite"` puts the
+time on the free side). There is no automatic collapse on narrow screens — switch to
+`align="start"` yourself below your breakpoint if needed.
+
+### Custom markers (avatars)
+
+```svelte
+<Timeline {items}>
+	{#snippet renderMarker({ item })}
+		<Avatar src={item.actorAvatar} size="sm" />
+	{/snippet}
+</Timeline>
+```
+
+`renderMarker` replaces the marker for every item (`data-marker="custom"`): the box is
+sized like the icon bubble but carries no background — the snippet brings its own look.
+
+### Footer actions / custom item content
+
+```svelte
+<Timeline {items}>
+	{#snippet renderFooter({ item })}
+		<Button size="sm" variant="outline" onclick={() => open(item)}>Details</Button>
+	{/snippet}
+</Timeline>
+
+<!-- or take over the whole content cell -->
+<Timeline {items}>
+	{#snippet renderItem({ item })}
+		<strong>{item.title}</strong> — <em>{item.time}</em>
+	{/snippet}
+</Timeline>
+```
+
+### Grouping
+
+There is no built-in "Today / Yesterday" grouping — render one `Timeline` per group
+under your own headings.
+
+## Accessibility
+
+- Renders a real `<ol>` (explicit `role="list"`, so Safari keeps the list semantics
+  despite `list-style: none`); pass `aria-label` if the page has several lists.
+- Markers are `aria-hidden` — they are decorative; the time and title carry the
+  information. Reading order is time → title → description → footer (in the opposite
+  layout the time cell still comes first in the DOM).
+- `datetime` renders a `<time>` element; without it the label is a plain `<span>`
+  (the spec requires a valid date string in a bare `<time>`).
+
+## CSS Variables
+
+| Variable                                                           | Default                                     | Description                                                                                               |
+| ------------------------------------------------------------------ | ------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--stuic-timeline-gap`                                             | `1rem`                                      | Column gap (opposite ↔ rail ↔ content)                                                                    |
+| `--stuic-timeline-gap-vertical`                                    | `1.5rem`                                    | Distance between items                                                                                    |
+| `--stuic-timeline-line-height`                                     | `1.5rem`                                    | Height of the first content line; the marker centers on it                                                |
+| `--stuic-timeline-connector-thickness`                             | `2px`                                       | Rail line thickness                                                                                       |
+| `--stuic-timeline-connector-bg`                                    | `--stuic-color-border`                      | Rail line color                                                                                           |
+| `--stuic-timeline-marker-size`                                     | `0.75rem`                                   | Dot diameter                                                                                              |
+| `--stuic-timeline-marker-bg`                                       | `--stuic-color-muted-foreground`            | Dot color (no intent)                                                                                     |
+| `--stuic-timeline-marker-size-icon`                                | `2rem`                                      | Icon bubble / custom marker diameter                                                                      |
+| `--stuic-timeline-marker-bg-icon` / `-text-icon`                   | muted / muted-foreground                    | Icon bubble colors (no intent); an intent applies a soft tint                                             |
+| `--stuic-timeline-marker-icon-size`                                | `1rem`                                      | Size of an svg inside the bubble                                                                          |
+| `--stuic-timeline-marker-radius`                                   | full circle                                 | Marker radius                                                                                             |
+| `--stuic-timeline-marker-ring-width` / `-ring-color`               | `2px` / `--stuic-color-background`          | Ring separating the marker from the line behind it (set the color to your card's background inside cards) |
+| `--stuic-timeline-time-font-size` / `-text`                        | `--text-sm` / muted-foreground              | Time label                                                                                                |
+| `--stuic-timeline-title-font-size` / `-font-weight` / `-text`      | `--text-base` / medium / foreground         | Title                                                                                                     |
+| `--stuic-timeline-description-font-size` / `-text` / `-margin-top` | `--text-sm` / muted-foreground / `0.125rem` | Description                                                                                               |
+| `--stuic-timeline-footer-gap` / `-margin-top`                      | `0.5rem` / `0.5rem`                         | Footer area                                                                                               |
+
+## Data Attributes
+
+- `data-align` - `"start" | "alternate"` (root)
+- `data-time-position` - `"inline" | "opposite"` (root)
+- `data-intent` - the item's intent (`li`, only when set)
+- `data-marker` - `"dot" | "icon" | "custom"` (marker element)
+
+## Layout notes
+
+The list is a CSS grid and every item a `subgrid` row, so the rail column (sized by
+the widest marker) and the opposite time column stay aligned across items without
+any fixed widths. Markers of different sizes (dots and bubbles in one list) stay on
+the same axis, and the rail line runs behind them — the ring (`--stuic-timeline-marker-ring-*`)
+is what visually separates marker and line.