@marianmeres/stuic 3.190.0 → 3.192.0

package/dist/components/Slider/README.md

@@ -22,7 +22,7 @@ variant for custom UI (volume/brightness controls, dashboards, media players).
 | `thumb`         | `boolean \| Snippet<[SliderRenderCtx]>`                            | `true`         | `false` hides the thumb (fill-only look), snippet renders inside thumb                                                                                                                                                |
 | `thumbPosition` | `"value" \| "start"`                                               | `"value"`      | `"value"` rides the fill edge; `"start"` pins it to the left/bottom so only the bar moves (true iOS volume look)                                                                                                      |
 | `thumbReserve`  | `boolean`                                                          | `true`         | Reserve the thumb's footprint along the track, so the fill never shrinks below the thumb. `false` = linear mapping across the full track (fill collapses to zero at `min`); only honored with `thumbPosition="start"` |
-| `fillRounded`   | `boolean`                                                          | `false`        | Round the fill's leading edge ("pill inside a pill")                                                                                                                                                                  |
+| `fillRounded`   | `boolean`                                                          | `true`         | Round the fill's leading edge ("pill inside a pill"); `false` cuts it flat                                                                                                                                            |
 | `ticks`         | `boolean \| number[]`                                              | -              | `true` = tick at every `step` (positive numeric step only; skipped above 101 auto ticks — pass an array), array = ticks at given in-range values                                                                      |
 | `valueLabel`    | `Snippet<[SliderRenderCtx]>`                                       | -              | Floating label at the current value along the track                                                                                                                                                                   |
 | `disabled`      | `boolean`                                                          | `false`        | Disable interaction                                                                                                                                                                                                   |
@@ -103,7 +103,6 @@ track and the fill collapses to zero at `min`.
 <Slider
 	orientation="vertical"
 	thumbPosition="start"
-	fillRounded
 	thumbClass="bg-transparent shadow-none"
 	bind:value={volume}
 >
@@ -123,8 +122,8 @@ track and the fill collapses to zero at `min`.
 With `thumbPosition="start"` the thumb never moves — only the bar does. It is purely
 decorative (the full-size hidden input is always the topmost hit target, so the thumb
 never receives pointer events), but it still **reserves its footprint** along the track:
-the fill can never shrink below it, and at `min` it is exactly a thumb-sized nub — with
-`fillRounded`, a circle enclosing the pinned thumb, same as the default
+the fill can never shrink below it, and at `min` it is exactly a thumb-sized nub — by
+default (`fillRounded`) a circle enclosing the pinned thumb, same as the default
 `thumbPosition="value"` look.
 
 Opt out with `thumbReserve={false}` for a linear mapping across the full track, where
@@ -202,23 +201,23 @@ the fill collapses to zero at `min` (and, at low values, is shorter than the thu
 
 ## CSS Variables
 
-| Variable                          | Default                    | Description                       |
-| --------------------------------- | -------------------------- | --------------------------------- |
-| `--stuic-slider-track`            | `--stuic-color-muted`      | Track (pill background) color     |
-| `--stuic-slider-fill`             | `--stuic-color-primary`    | Fill color                        |
-| `--stuic-slider-thumb`            | `--color-white`            | Thumb background                  |
-| `--stuic-slider-thumb-foreground` | `--stuic-color-foreground` | Thumb content color               |
-| `--stuic-slider-tick`             | foreground 25% mix         | Tick mark color (over the track)  |
-| `--stuic-slider-tick-on-fill`     | background 55% mix         | Tick mark color (over the fill)   |
-| `--stuic-slider-ring-width`       | `4px`                      | Focus ring width                  |
-| `--stuic-slider-ring-color`       | `--stuic-color-ring`       | Focus ring color                  |
-| `--stuic-slider-thickness`        | `2rem` (`sm` 1.25, `lg` 3) | Cross-axis size                   |
-| `--stuic-slider-length`           | `10rem`                    | Main-axis size                    |
-| `--stuic-slider-thumb-inset`      | `3px`                      | Gap between thumb and track edge  |
-| `--stuic-slider-radius`           | `9999px`                   | Track corner radius               |
-| `--stuic-slider-fill-radius`      | `--stuic-slider-radius`    | Fill radius (when `fillRounded`)  |
-| `--stuic-slider-thumb-radius`     | `9999px`                   | Thumb corner radius               |
-| `--stuic-slider-thumb-shadow`     | `--stuic-shadow`           | Thumb shadow                      |
-| `--stuic-slider-tick-size`        | `4px`                      | Tick mark diameter                |
-| `--stuic-slider-value-gap`        | `0.375rem`                 | Gap between track and value label |
-| `--stuic-slider-transition`       | `--stuic-transition`       | Fill/thumb movement transition    |
+| Variable                          | Default                    | Description                                |
+| --------------------------------- | -------------------------- | ------------------------------------------ |
+| `--stuic-slider-track`            | `--stuic-color-muted`      | Track (pill background) color              |
+| `--stuic-slider-fill`             | `--stuic-color-primary`    | Fill color                                 |
+| `--stuic-slider-thumb`            | `--color-white`            | Thumb background                           |
+| `--stuic-slider-thumb-foreground` | `--stuic-color-foreground` | Thumb content color                        |
+| `--stuic-slider-tick`             | foreground 25% mix         | Tick mark color (over the track)           |
+| `--stuic-slider-tick-on-fill`     | background 55% mix         | Tick mark color (over the fill)            |
+| `--stuic-slider-ring-width`       | `4px`                      | Focus ring width                           |
+| `--stuic-slider-ring-color`       | `--stuic-color-ring`       | Focus ring color                           |
+| `--stuic-slider-thickness`        | `2rem` (`sm` 1.25, `lg` 3) | Cross-axis size                            |
+| `--stuic-slider-length`           | `10rem`                    | Main-axis size                             |
+| `--stuic-slider-thumb-inset`      | `3px`                      | Gap between thumb and track edge           |
+| `--stuic-slider-radius`           | `9999px`                   | Track corner radius                        |
+| `--stuic-slider-fill-radius`      | `--stuic-slider-radius`    | Fill radius (unless `fillRounded={false}`) |
+| `--stuic-slider-thumb-radius`     | `9999px`                   | Thumb corner radius                        |
+| `--stuic-slider-thumb-shadow`     | `--stuic-shadow`           | Thumb shadow                               |
+| `--stuic-slider-tick-size`        | `4px`                      | Tick mark diameter                         |
+| `--stuic-slider-value-gap`        | `0.375rem`                 | Gap between track and value label          |
+| `--stuic-slider-transition`       | `--stuic-transition`       | Fill/thumb movement transition             |

package/dist/components/Slider/Slider.svelte

@@ -100,8 +100,8 @@
 		 */
 		thumbReserve?: boolean;
 		/**
-		 * Round the fill's leading edge (instead of a flat cut), giving the
-		 * "pill inside a pill" look.
+		 * Round the fill's leading edge, giving the "pill inside a pill" look
+		 * (the default). `false` cuts it flat.
 		 */
 		fillRounded?: boolean;
 		/**
@@ -152,7 +152,7 @@
 		thumb = true,
 		thumbPosition = "value",
 		thumbReserve = true,
-		fillRounded = false,
+		fillRounded = true,
 		ticks,
 		valueLabel,
 		el = $bindable(),
@@ -447,7 +447,7 @@
 	data-thumb-position={thumb !== false ? thumbPosition : undefined}
 	data-thumb-travels={_thumbTravels ? "true" : "false"}
 	data-thumb-reserved={_thumbReserved ? "true" : "false"}
-	data-fill-rounded={fillRounded ? "true" : undefined}
+	data-fill-rounded={fillRounded ? "true" : "false"}
 	data-size={!unstyled ? size : undefined}
 	data-intent={!unstyled ? intent : undefined}
 	data-disabled={disabled ? "true" : undefined}

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

@@ -80,8 +80,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" |
      */
     thumbReserve?: boolean;
     /**
-     * Round the fill's leading edge (instead of a flat cut), giving the
-     * "pill inside a pill" look.
+     * Round the fill's leading edge, giving the "pill inside a pill" look
+     * (the default). `false` cuts it flat.
      */
     fillRounded?: boolean;
     /**

package/dist/components/Slider/index.css

@@ -115,6 +115,9 @@
 	.stuic-slider .fill {
 		position: absolute;
 		background: var(--_fill);
+		/* Rounded leading edge ("pill inside a pill") is the default;
+		   `fillRounded={false}` cuts it flat below. */
+		border-radius: var(--stuic-slider-fill-radius, var(--stuic-slider-radius, 9999px));
 	}
 	/* With a reserved thumb (traveling OR pinned), the fill spans the thumb-center
 	   travel plus the thumb itself: it reaches the far edge of a traveling thumb and,
@@ -135,9 +138,9 @@
 		height: var(--_fill-len);
 	}
 
-	/* Rounded leading edge ("pill inside a pill") */
-	.stuic-slider[data-fill-rounded="true"] .fill {
-		border-radius: var(--stuic-slider-fill-radius, var(--stuic-slider-radius, 9999px));
+	/* Flat leading edge (opt out of the default pill) */
+	.stuic-slider[data-fill-rounded="false"] .fill {
+		border-radius: 0;
 	}
 
 	/* ============================================================================

package/dist/index.css

@@ -86,6 +86,7 @@ In practice:
 @import "./components/RegisterForm/index.css";
 @import "./components/LoginOrRegisterForm/index.css";
 @import "./components/Checkout/index.css";
+@import "./components/CodeBlock/index.css";
 @import "./components/ColorPicker/index.css";
 @import "./components/CommandMenu/index.css";
 /* NOTE: CommentInput/index.css is deliberately NOT imported here — same reason as

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export * from "./components/Card/index.js";
 export * from "./components/Carousel/index.js";
 export * from "./components/Checkout/index.js";
 export * from "./components/Circle/index.js";
+export * from "./components/CodeBlock/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorPicker/index.js";
 export * from "./components/ColorScheme/index.js";

package/dist/index.js

@@ -39,6 +39,7 @@ export * from "./components/Card/index.js";
 export * from "./components/Carousel/index.js";
 export * from "./components/Checkout/index.js";
 export * from "./components/Circle/index.js";
+export * from "./components/CodeBlock/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorPicker/index.js";
 export * from "./components/ColorScheme/index.js";

package/docs/domains/components.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-82 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
+83 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
 
 ## Component Categories
 
@@ -92,6 +92,7 @@
 | UserAvatarMenu      | Avatar trigger + dropdown menu with header tile, color-scheme toggle, authed/unauthed states         |
 | Pill                | Inline rounded badge/tag/chip (intent + variant + size, dismissible, dot, polymorphic span/a/button) |
 | KbdShortcut         | Keyboard shortcut hints                                                                              |
+| CodeBlock           | Copyable code sample: label/tabs + copy, JSON/HTTP/shell highlighting, line numbers, collapse        |
 | Carousel            | Image/content slider with snap, keyboard nav, wheel scroll, arrows                                   |
 | ListItemButton      | List item with actions                                                                               |
 | AnimatedElipsis     | Loading dots animation                                                                               |
@@ -1089,6 +1090,63 @@ Prefix: `--stuic-description-list-*`
 
 ---
 
+## CodeBlock
+
+A copyable code sample for developer docs: a bordered, rounded box with a header (the language or a file name — or a tab list for several samples — on the start side, a borderless `CopyButton` on the end side) over a `<pre><code>`, and a footer toggle when collapsed. Renders `<div>` › optional header `<div>` › `<pre>` › `<code>` › optional footer `<div>`. The code is rendered as text, and the button copies exactly what is shown.
+
+### Exports
+
+| Export                                                         | Kind      | Description                                                                        |
+| -------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------- |
+| `CodeBlock`                                                    | component | Main component                                                                     |
+| `CodeBlockProps`, `CodeBlockSample`                            | type      | Props; one tab's sample `{ code, lang?, label?, id?, highlightLines?, copyText? }` |
+| `highlightCode`                                                | function  | The default highlighter: dispatches JSON / HTTP / shell by `lang`                  |
+| `highlightJson`, `highlightHttp`, `highlightShell`             | function  | The tokenizers, `(code) => CodeBlockToken[]`                                       |
+| `HIGHLIGHT_CODE_LANGS`                                         | const     | The `lang`s `highlightCode` knows                                                  |
+| `CodeBlockToken`, `CodeBlockTokenType`, `CodeBlockHighlighter` | type      | `[start, end, type]`; the 12 built-in types; `(code, lang?) => tokens`             |
+| `createCodeBlockT`, `CODE_BLOCK_MESSAGES_EN/_SK`               | i18n      | Catalog includes the `CopyButton` keys + `show_all_lines`, `show_less`             |
+
+### Key Props
+
+| Prop               | Type                              | Default | Description                                                                                   |
+| ------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------- |
+| `code`             | `string`                          | —       | The sample (ignored with `samples`)                                                           |
+| `lang`             | `string`                          | —       | Header label (unless `title`), highlighter input, `data-lang`, `language-{lang}` on `<code>`  |
+| `title`            | `THC`                             | —       | Header label in place of `lang`; `""` hides it; with `samples` it precedes and names the tabs |
+| `samples`          | `CodeBlockSample[]`               | —       | Tabs; `bind:active` (the sample id: `id` ?? string `label` ?? `lang` ?? index)                |
+| `highlight`        | `boolean \| CodeBlockHighlighter` | `true`  | Syntax highlighting                                                                           |
+| `lineNumbers`      | `boolean`                         | `false` | `lineNumbersStart` offsets the numbering                                                      |
+| `highlightLines`   | `number[] \| string`              | —       | 1-based positions in the sample, `"1, 3-5"`                                                   |
+| `collapsedLines`   | `number`                          | —       | Collapse to N lines + toggle; `bind:expanded`                                                 |
+| `verbatim`, `wrap` | `boolean`                         | `false` | Skip normalization; soft-wrap                                                                 |
+| `copy`             | `boolean`                         | `true`  | Render the copy button; with no label or tabs either, the header is not rendered              |
+| `copyButtonProps`  | `Partial<CopyButtonProps>`        | —       | Spread onto the `CopyButton` after the defaults (`label`, `ghost`, `sm`); `text` overrides    |
+| `t`                | `TranslateFn`                     | English | Passed to the `CopyButton` too                                                                |
+
+Class slots: `class`, `classHeader`, `classTitle`, `classTabs`, `classTab`, `classPre`, `classCode`, `classLine`, `classFooter`, `classToggle` (the copy button's via `copyButtonProps.class`, merged). Rest props go to the root `<div>`.
+
+### Deliberate choices
+
+- **Highlighting via the CSS Custom Highlight API** (`_internal/paint.ts`): tokens become `Range`s in shared named `Highlight`s (`stuic-code-block-<type>`), styled by `:is(.stuic-code-block-code, .stuic-code-block-code *)::highlight(...)` — the descendant form because Firefox styles by the element holding the text. No markup: text, selection, copy and SSR are the plain sample; unsupported browsers show plain text. Each block removes exactly its ranges on cleanup. The paint `$effect` depends on `text`, `lang`, the highlighter and `lined` (the DOM the ranges point into), and refuses to paint when `textContent !== text`. Verified in Chromium, WebKit and Firefox, including scoped `var()` token overrides.
+- **Tokenizers** (`highlight/*.ts`, node-tested) are tolerant scanners, not parsers: never throw, emit ordered non-overlapping tokens. A throwing custom highlighter is caught and logged.
+- **Lines** render only with `lineNumbers`/`highlightLines`: a block `<span>` per line that keeps its `\n`, so `textContent`, a native copy (checked in all three engines) and the token offsets stay the sample. Numbers are `::before { content: attr(data-line) }` with `user-select: none`. With lines, the `<pre>`'s inline padding moves to the lines and the `<code>` is `width: max-content; min-width: 100%`, so a highlighted band spans the scrolled width.
+- **Collapse** clamps the `<pre>` to `calc(N * 1lh + 2 * padding-y)` with `overflow-y: hidden` and a `mask-image` fade; the hidden overflow doesn't count toward the measured tab stop. Collapsing back scrolls the block into view if its top is above the viewport.
+- **Tabs**: WAI-ARIA tabs (automatic activation, roving tabindex, ←/→ wrap, Home/End); the `<pre>` is the tab panel (always a tab stop). A block lacking the bound `active` id keeps its last sample and never writes the value, so several blocks can share one binding. The header is an `inline-size` container: below 36rem a title over tabs gets its own row.
+- **Flush copy button:** with `copy`, `data-copy` on the root drops the header's block and end padding (a private `--_header-padding-y` on the header, which the tabs' negative margins follow), and the button gets `border-radius: 0` and an inset focus ring — the box clips.
+- **Contrast** (measured over the 54 bundled themes): the label and tabs use `surface-foreground` on `surface` (min 7.3:1 light / 5.7:1 dark; `muted-foreground` fails 4.5:1 almost everywhere); inactive tabs are not dimmed; line numbers are 65% foreground over background (min 4.68:1); the GitHub-like syntax palette (switched under `:root.dark`) keeps ≥ 4.5:1 on every theme background.
+- **`not-prose` on the root** (styled mode only). No outer margin is declared.
+- **Normalization** (`_internal/normalize-code.ts`): CRLF → LF, blank end lines dropped, the common leading-whitespace _string_ removed.
+- **Measured tab stop** on the `<pre>` while it scrolls (`ResizeObserver` + explicit `text`/`wrap`/`lined`/`collapsed` dependencies). Hence the `svelte-ignore a11y_no_noninteractive_tabindex`.
+- `unstyled` propagates to the `CopyButton` and the toggle, and keeps the `language-*` class, roles and tab stops.
+
+### CSS Tokens
+
+Prefix: `--stuic-code-block-*`
+
+`bg`, `border-color`, `rule-color`, `rule-width`, `padding-x`, `padding-y`, `font-family`, `font-size` (`var(--text-sm)`), `line-height`, `code-tab-size`, `max-height`, `ring-width`, `ring-color`, `header-bg`, `header-padding-y`, `header-gap`, `title-text`, `tab-text`, `tab-padding-x`, `tab-bg-hover`, `tab-font-weight-active`, `tab-indicator-color`, `tab-indicator-width`, `line-number-text`, `line-number-gap`, `line-bg-highlighted`, `line-marker-color`, `line-marker-width`, `fade-size`, `token-{comment,meta,string,number,literal,parameter,keyword,operator,property,variable,function}-text`. Not declared (usage-site fallbacks): `radius` (→ `--stuic-radius-container`), `border-width` (→ `--stuic-border-width`), `transition` (→ `--stuic-transition`), `text` (→ `currentColor`), `header-padding-x` (→ `padding-x`).
+
+---
+
 ## ListGroup
 
 A rounded, bordered box of rows split by hairlines — optional header (title start, figure end), optional footer line — the block back offices keep hand-rolling. Renders `<div>` › header `<div>` › `<ul role="list">` › `<li>` per row › footer `<div>`. Each row is **one wrapping flex line** of parts (a code, a name that takes the slack, a run of facts), not columns: nothing lines up across rows, and in a narrow drawer the trailing facts drop under the name. Not a `DataTable` (no column model), not a `DescriptionList` (many things, not properties of one), not a `Card` (no shadow, no padded body). Generic over `T`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.190.0",
+	"version": "3.192.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",