fold-ng 0.7.0 → 0.9.0

package/README.md

@@ -287,9 +287,46 @@ radius / text / icon-size / space / motion / blur scales — see
 All standalone, signals-first, styled against the semantic tokens. Import from
 the package root.
 
+### Find one by what you need
+
+The reference table below is keyed by component **name** — but you usually know
+your **intent**, not the name (that's how an uppercase mini-title gets hand-rolled
+instead of reaching for `fold-element-title`). Start here; **before hand-rolling a
+label, field, badge, card or overlay, scan this table** — fold almost certainly
+ships it.
+
+| I need to…                                                       | Reach for                                                                                              |
+| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| a small **uppercase label / eyebrow** over a group               | `fold-element-title` (`variant="eyebrow"` · `bar` · `title`)                                           |
+| a **section** with a title + description + actions               | `fold-page-section` (semantic `<section>` + `aria-labelledby`)                                         |
+| show **read-only label/value pairs** (a recap)                   | `fold-field-list` / `fold-field` (`dl/dt/dd`)                                                          |
+| a **text** field                                                 | `fold-input` — number → `fold-number-input` · multiline note → `fold-textarea`                         |
+| a **date** / **time** field                                      | `fold-date` (date·datetime-local·month·week) · `fold-time`                                             |
+| a **dropdown**                                                   | `fold-select` (native) — custom rows → `fold-listbox` · multi → `fold-multiselect`                     |
+| an **on/off** field · a **password** field                       | `fold-checkbox` · `fold-password-field`                                                                |
+| a **range** / **debounced search**                               | `fold-slider` / `fold-range-slider` · `fold-search`                                                    |
+| a **button** · **icon-only** action · icon **on/off**            | `fold-button` (`<button>`/`<a>`) · `fold-button-icon` · `fold-toggle-icon` · text link → `fold-link`   |
+| an inline **"are you sure?"** guard                              | `fold-inline-confirm` (no modal — simple · type-to-confirm · secret)                                   |
+| a **"delete X" danger block** (type-to-confirm)                  | `fold-danger-zone` (alert frame + blast-radius text + retype-to-arm)                                   |
+| a **status / count pill** · status→colour                        | `fold-badge` · `fold-status-badge`                                                                     |
+| a **tinted message / alert** row                                 | `fold-callout` (`inset` for in-flow)                                                                   |
+| a transient **toast**                                            | `fold-toast` + `FoldToastService`                                                                      |
+| a **card** · titled info card · page **splash**                  | `fold-card` · `fold-context-card` · `fold-hero-section` (bordered → `fold-hero-card`)                  |
+| in-page **tabs** · a routed **nav bar** · a segmented control    | `fold-tabs` · `fold-view-nav` · `fold-view-toggle` / `fold-choice-row`                                 |
+| a **breadcrumb** trail (routerLink or href)                      | `fold-breadcrumb` (`[items]`, last = current page)                                                     |
+| a **"← Back"** link (route, href, or history)                    | `fold-back-link` (`routerLink` / `href` / history-back button)                                         |
+| a **table** + **pagination**                                     | `fold-data-table` · `fold-paginator`                                                                   |
+| an **avatar** · a cluster                                        | `fold-avatar` (+ `…Detail`) · `fold-avatar-list`                                                       |
+| an **empty** / **loading** state                                 | `fold-empty-state` · `fold-loading` / `fold-spinner`                                                   |
+| a **side panel** · anchored **popover** · actions **menu**       | `fold-panel-host` · `fold-popover` · `fold-dropdown`                                                   |
+| a **collapsible** section                                        | `fold-disclosure` (a modal dialog is roadmap — use a modal `fold-panel-host` or `fold-inline-confirm`) |
+| an **icon** · a **calendar** · a **timeline / stepper**          | `fold-icon` · `fold-calendar-month`/`-week`/`-day`/`-list`/`-agenda`/`-timegrid` · `fold-timeline`     |
+| a **nav rail** · app **skeleton** · a **detail page** with rails | `fold-menu` · `fold-app-shell` · `fold-aside-layout` (page scaffold → `fold-page-layout`)              |
+| **drag-drop** file upload                                        | `fold-file-dropzone`                                                                                   |
+
 | Component                                                | Selector                               | What it is                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | -------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `FoldAppShellComponent`                                  | `fold-app-shell`                       | Responsive app skeleton (rails + header + content + self-collapsing `footer` slots; `headerLayout`/`footerLayout` inset·full, `footerBehavior` pinned·scroll; `mobileNav` drawer·none — `[(mobileNavOpen)]` off-canvas drawer for the primary rail on mobile, or `none` to compose an `fold-nav-launcher`; `contentScroll` clip·auto; built-in skip-link to a focusable `<main>`. Regions float per-surface via `foldElevated`, not a shell flag).                                                                                                                                                                                                                                                                                                          |
+| `FoldAppShellComponent`                                  | `fold-app-shell`                       | Responsive app skeleton (rails + header + content + self-collapsing `footer` slots; `headerLayout`/`footerLayout` inset·full, `footerBehavior` pinned·scroll; `mobileNav` drawer·none — `[(mobileNavOpen)]` off-canvas drawer for the primary rail on mobile, or `none` to compose an `fold-nav-launcher`; `scroll` scroll·stage — the shell owns the content scroll by default so pages flow (`[foldScrollRegion]` opts a nested area back into its own scroll); built-in skip-link to a focusable `<main>`. Regions float per-surface via `foldElevated`, not a shell flag).                                                                                                                                                                              |
 | `FoldMenuComponent` (+ `Item` / `Section` / `Separator`) | `fold-menu`                            | Collapsible nav rail — coloured sections, `tint="follow"`, depth `level`, collapse-toggle placement. Items are `a[fold-menu-item]`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `FoldNavLauncherComponent` (+ `FoldNavTileComponent`)    | `fold-nav-launcher`                    | Full-screen mobile nav launcher — a centred tile grid over a blurred scrim (scrim / `Escape` / close dismissal, focus-trap, scroll-lock). `columns="auto"` scales tiles to the count. Pairs with `fold-app-shell mobileNav="none"`. Tiles are `a[fold-nav-tile]` — `variant="surface"`·`filled`.                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `FoldPageLayoutComponent`                                | `fold-page-layout`                     | Page scaffold — gutter + header + body rhythm; fills its container (width is a content concern). Tokens `--fold-page-gutter` / `--fold-page-gap`; sections can `bleed` edge-to-edge.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
@@ -304,21 +341,26 @@ the package root.
 | `FoldFieldListComponent` / `…Field`                      | `fold-field-list`                      | Read-only `dl/dt/dd` recap — label/value pairs (`[empty]` placeholder). The _display_ half of a record; `fold-input` is the _edit_ half.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `FoldInputComponent`                                     | `fold-input`                           | Text-input control (`value: string`) — Signal Forms (`[formField]`) or standalone `[(value)]`; size × align × variant, `label` / `required` / `hint`. The _edit_ half of a record (`fold-field` reads).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `FoldNumberInputComponent`                               | `fold-number-input`                    | Numeric sibling of `fold-input` (`value: number \| null`, empty ⇒ `null`); owns `min` / `max` / `step` + `label` / `required` / `hint`. Split so each control keeps its true type.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `FoldTextareaComponent`                                  | `fold-textarea`                        | Multiline sibling of `fold-input` (`value: string`). **No resize handle** — fixed `rows` height, wraps + scrolls overflow. Shares the box + `label`/`required`/`hint`/`error` chrome. Signal Forms or `[(value)]`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `FoldSelectComponent`                                    | `fold-select`                          | Native `<select>` wrapper (options projected as `<option>`); shares `fold-input`'s box chrome. Signal Forms (`FormValueControl<string>`) or `[(value)]`. For custom rows use `fold-listbox`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `FoldDateComponent`                                      | `fold-date`                            | Native calendar-date wrapper (`type` = date · datetime-local · month · week) — keeps the OS picker, hands back a typed `[(value)]` string (`YYYY-MM-DD`). `min`/`max`/`step` pass through. Time-of-day → `fold-time`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `FoldTimeComponent`                                      | `fold-time`                            | Native time-of-day wrapper (`<input type="time">`) — typed `[(value)]` string (`HH:mm`), `min`/`max`/`step`. The sibling of `fold-date`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `FoldCheckboxComponent`                                  | `fold-checkbox`                        | Boolean control — a native `<input type="checkbox">` (keyboard, `indeterminate`, forms) restyled to tokens. Signal Forms (`[formField]`, a `FormCheckboxControl`) or standalone `[(checked)]`; `indeterminate`, `label`/`ariaLabel`, `hint`/`errors`, `size`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `FoldPasswordFieldComponent`                             | `fold-password-field`                  | Password input + a live requirements checklist (a dot/tick per rule). Rules injected via `FoldPasswordRule` (`{ label, test }` — regex/zod/anything); `revealable` eye (a `fold-input` capability); `marker` dot/check; `[rules]` slot to redesign the list; `validChange`; Signal Forms.                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `FoldViewToggleComponent`                                | `fold-view-toggle`                     | Segmented single-select (Cards/Table, density, chart-mode…). Generic `options` (`{ value, icon?, label?, ariaLabel?, disabled? }`) + `[(value)]`; a real `role="radiogroup"` — roving tabindex, arrow keys, Home/End, disabled-skip; `size`, `iconOnly`, `activeStyle` (raised / accent).                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `FoldSearchComponent`                                    | `fold-search`                          | Debounced search box — an `fold-input` that emits `searchChange` once typing settles (`delayMs`), trimmed + de-duplicated.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `FoldListboxComponent` / `FoldOptionComponent`           | `fold-listbox` / `fold-option`         | Styleable single-select — the richer sibling of `fold-select` (native `<select>`) for options that need custom rows (icon, second line, status). On `fold-popover`; `role="listbox"` + `aria-activedescendant`, full keyboard (↑/↓, `Home`/`End`, type-ahead, `Enter`). Signal Forms (`FormValueControl<string>`, `[formField]`/`[(value)]`); shares `fold-input`'s box chrome.                                                                                                                                                                                                                                                                                                                                                                             |
 | `FoldMultiselectComponent`                               | `fold-multiselect`                     | Multi-select sibling of `fold-listbox` (same popover + `fold-option` rows). Value is a set (`readonly string[]`); activating a row toggles it and the panel stays open. Separate component — not a `multiple` flag — so the Signal-Forms value type stays honest. `role="listbox"` + `aria-multiselectable`; the trigger summarises the picks.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `FoldOptgroupComponent`                                  | `fold-optgroup`                        | Labelled group of `<fold-option>`s inside a `fold-listbox` / `fold-multiselect` — the styleable `<optgroup>`. Presentational: `role="group"` + `aria-labelledby` header (no `role="option"`, so keyboard nav skips it); the owner discovers grouped options in document order, so roving crosses groups seamlessly.                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `FoldSliderComponent`                                    | `fold-slider`                          | Single-value range slider — a styled native `<input type="range">` (design-system track/fill/thumb). Signal Forms (`[formField]`, a `FormValueControl<number>`) or `[(value)]`; real `<label for>`, `aria-valuetext`, `hint`/`errors`, focus ring.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `FoldRangeSliderComponent`                               | `fold-range-slider`                    | Dual-thumb range slider selecting a `{ min, max }` window (shares the slider track/thumb). Two-way `[(value)]`; a labelled `role="group"`, per-thumb i18n aria (`minLabel`/`maxLabel`) + formatted `aria-valuetext`, `disabled`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `FoldRangeSliderComponent`                               | `fold-range-slider`                    | Dual-thumb slider selecting a `{ min, max }` window over `[min, max]`; shares the slider track/fill/thumb.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `FoldFileDropzoneComponent`                              | `fold-file-dropzone`                   | File-picker dropzone — drag-over visuals, keyboard activation, hidden `<input type=file>` plumbing; emits the picked `File[]` (presentational — never uploads).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `FoldLinkComponent`                                      | `fold-link`                            | Inline text link / link-button (icons, accent · muted).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `FoldButtonComponent`                                    | `button[foldButton]` · `a[foldButton]` | Action button — applied to a real `<button>` **or** `<a>` (link that looks like a button, gets `href`/`routerLink`); orthogonal `emphasis` (solid·soft·outline) × `intent` (primary·neutral·warning·danger) × 3 sizes × shape/`block`; `icon`/`iconTrailing` shorthand (auto-sized) or project content; `loading` (spinner + `aria-busy`). Use native `(click)`.                                                                                                                                                                                                                                                                                                                                                                                            |
 | `FoldButtonIconComponent`                                | `fold-button-icon`                     | Icon-only **momentary** button — shape × size × tone; a one-shot action (no pressed state). For a text button use `fold-button`; for on/off use `fold-toggle-icon`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `FoldToggleIconComponent`                                | `fold-toggle-icon`                     | Icon-only **toggle** — the same surface as `fold-button-icon`, plus `[(active)]` + `aria-pressed` (true/false) and a pressed state. Emits `toggled`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `FoldInlineConfirmComponent`                             | `fold-inline-confirm`                  | In-place “are you sure?” guard — the projected trigger swaps to a confirm/cancel row (no modal). Simple (`confirmed` emits `""`), type-to-confirm (`[match]`), or secret (`password`, masked, emits the value). `confirmIcon` + a chosen `cancelIcon`; `Escape` cancels; `message` announced via `aria-describedby`; focus in-then-back; controlled `[(open)]` + `keepOpenOnConfirm` for async pending; i18n via `provideFoldInlineConfirmLabels`.                                                                                                                                                                                                                                                                                                          |
+| `FoldDangerZoneComponent`                                | `fold-danger-zone`                     | Framed destructive-action block for “delete X” settings. `appearance="filled"` (alert-tinted) or `"section"` (a danger section: alert border + normal-background body for ordinary content). The confirm **reveals on click** — an `actionLabel` button opens an in-place `fold-inline-confirm` (plain “are you sure?”, or type-to-confirm when `confirmPhrase` is set); `(confirmed)` emits the typed text. Omit `actionLabel` for a section with no action. `role="group"` + `aria-labelledby`.                                                                                                                                                                                                                                                           |
 | `FoldDataTableComponent`                                 | `fold-data-table`                      | Controlled roster table — sortable sticky header, tone rows, controlled selection (checkbox column), roving-keyboard nav, `mobileLayout` (scroll / auto-cards / custom `foldRowCard`), an optional `foldToolbar` bar, sticky-first, density.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | `FoldPaginatorComponent`                                 | `fold-paginator`                       | Server-side paginator (size selector + range + page nav).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `FoldTimelineComponent`                                  | `fold-timeline`                        | Connected rail of nodes (dot + optional date + label) — `vertical` navigable history or `horizontal` step progress; nodes optionally clickable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
@@ -326,8 +368,10 @@ the package root.
 | `FoldStatusBadgeComponent`                               | `fold-status-badge`                    | Status→colour badge (maps a domain status key to a tone).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `FoldChoiceRowComponent`                                 | `fold-choice-row`                      | Segmented / chip selector.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `FoldViewNavComponent`                                   | `fold-view-nav`                        | Navigation bar styled as tabs. Items carry a `link` (routerLink → a real `<a>`: cmd-click, deep-links, active state auto), an `href`, or nothing (a button); `aria-current="page"` on the active one. `direction="auto"` follows a wrapping `fold-nav-layout`; `collapsed` for an icon rail. For in-page panel switching use `fold-tabs` instead.                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `FoldBreadcrumbComponent`                                | `fold-breadcrumb`                      | Hierarchical link trail. Data-driven `[items]` where each crumb links by `routerLink` **or** `href` (works without the router; `RouterLink` only instantiates on a `routerLink` crumb). Last item is the current page (`aria-current="page"`), not a link. `navigation` landmark, decorative chevron separators. Needs `@angular/router` only when a crumb uses `routerLink` (optional peer).                                                                                                                                                                                                                                                                                                                                                               |
+| `FoldBackLinkComponent`                                  | `fold-back-link`                       | The “← Back” affordance for a detail page. Three modes by input: `routerLink` (in-app), `href` (external / non-router), or neither → a history-back `<button>` (`Location.back()`). Router-coupled but degradable — the history mode needs no router. `label` + leading `icon` (default `chevron-left`).                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `FoldTabsComponent` + `FoldTabPanelComponent`            | `fold-tabs` + `fold-tab-panel`         | The in-page ARIA Tabs widget: `role="tablist"` + roving arrow-key keyboard, `aria-selected`/`aria-orientation`, each tab wired to its `fold-tab-panel` (`aria-controls` ↔ `aria-labelledby`). Panels take the bar by ref (`[tabs]="t"`) so they coordinate across `fold-nav-layout` slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `FoldIconComponent`                                      | `fold-icon`                            | SVG icon (114-icon built-in set + `FoldIconRegistry`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `FoldIconComponent`                                      | `fold-icon`                            | SVG icon (~135 built-in glyphs across 7 categories incl. `commerce` + `FoldIconRegistry`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `FoldSpinnerComponent`                                   | `fold-spinner`                         | Indeterminate loading arc (`currentColor`, icon-sized, reduced-motion aware). Decorative by default; `label` → `role="status"`. Powers `loading` on the buttons.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `FoldAvatarComponent` / `…Detail`                        | `fold-avatar`                          | Initials/image avatar (square, muted, status ring) + identity cell.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `FoldAvatarListComponent`                                | `fold-avatar-list`                     | Overlapping avatar cluster (per-face variant, `limit` + a `+N` overflow chip).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
@@ -338,16 +382,71 @@ the package root.
 | `FoldDisclosureComponent`                                | `fold-disclosure`                      | One summary toggling one collapsible panel — the accordion primitive (open-state is the consumer's to bind); keeps content mounted, unlike native `<details>`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `FoldPanelHostComponent`                                 | `fold-panel-host`                      | Side-panel / overlay host (+ `FoldPanelHostService` / `FoldPanelRef` / `FoldPanelToggle`). Modal: accessible name, `inert` background barrier, top-most focus trap, scroll-lock. Localise the close label once via `provideFoldPanelLabels({ close })`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `FoldPanelHeaderComponent`                               | `fold-panel-header`                    | Standard panel header (title/eyebrow, self-closing). Names its dialog (`aria-labelledby`) and reads the app-wide close label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `FoldPanelFooterComponent`                               | `fold-panel-footer`                    | Panel/dialog action bar pairing with `fold-panel-header`: tokenised top border + padding + `align="end" \| "between" \| "start"`. Projects the buttons; sits `flex: none` so it stays pinned to the panel bottom while the body scrolls (no `position: sticky`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `FoldPopoverComponent`                                   | `fold-popover`                         | Anchored floating layer — projected content in the native top layer (escapes `overflow`/`z-index`), positioned by a dependency-free **flip → size → shift** engine (`computePlacement`): a tall panel gets a `max-height` and scrolls inside the viewport. `[(open)]`; `autoUpdate` (ResizeObserver); optional `arrow`; native CSS enter/exit (`@starting-style` + `allow-discrete`); outside-click + `Escape` dismissal, focus-return, auto-wired `aria-haspopup`/`expanded`/`controls`.                                                                                                                                                                                                                                                                   |
 | `FoldDropdownComponent`                                  | `fold-dropdown`                        | Actions menu on `fold-popover` — `role="menu"` with `<fold-dropdown-item>`s, ↑/↓ roving, `Home`/`End`, type-ahead; opens onto the first enabled item, closes returning focus to the trigger. Give the trigger `foldPopoverTrigger="menu"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
+| `FoldCalendarMonthComponent` | `fold-calendar-month` | Month grid where events **span** the days they cover: a date-axis `role="grid"` with one roving tab stop, and over it a lane-packed layer of bands (one per week crossed, with open edges). `+N` chips sit on the crowded day, not at the end of the row. |
+| `FoldCalendarWeekComponent` | `fold-calendar-week` | Seven day columns of stacked chips — nothing spans, so nothing is clipped and every chip is a real button in the tab order. Container-queried: labels and icons drop out before they truncate. |
+| `FoldCalendarDayComponent` | `fold-calendar-day` | One day in full, with room for the subline — where a `dayClick` drill-down lands. Empty state takes a projected action (`button[empty]`). |
+| `FoldCalendarListComponent` | `fold-calendar-list` | The flat reading of the same feed, in date order, each row leading with the span `Intl` formats. Nothing is ever hidden behind a lane budget. |
+| `FoldCalendarTimegridComponent` | `fold-calendar-timegrid` | Hour columns for a week or a day, with the all-day strip on top. Timed events are placed on the clock and share their width only with what they actually collide with (exclusive boundaries, per-cluster widening); a span crossing midnight becomes one block per day. Times are wall-clock `HH:mm`, never instants; `now` is an input, not a clock. |
+| `FoldCalendarAgendaComponent` | `fold-calendar-agenda` | "What's next" rail grouped by day, with a **to-handle** slice (the `warning`/`alert` tones — the same scale the chips paint with) and a live badge. Collapses to a spine; `mode`/`collapsed` are models, so the app owns persistence. |
+| `FoldCalendarToolbarComponent` | `fold-calendar-toolbar` | Today / prev / next / period title / view switch. Owns no data — `date` and `view` are two-way, and the step matches the reading. `views` takes `{ value, label }` for an app's own view. |
+| `FoldCalendarSourceFilterComponent` | `fold-calendar-source-filter` | Chips switching each feed of a merged calendar on and off. Owns the **selection** only; the caller runs the pure `foldFilterBySource()`. |
+
+**Two tiers, on purpose.** The components are the first; under them, the same
+geometry is exported as pure functions — `foldBuildMonthGrid` (week rows with
+their events already packed into lanes), `foldBuildWeek` / `foldBuildDay`,
+`foldBuildAgenda`, plus `foldShiftDate` / `foldRangeForView` / `foldViewTitle`
+for paging and naming a period, and `foldCalendarNextFocus` for the arrow keys.
+Lay a calendar out without rendering it with these components, and the hard part
+— packing spans into lanes, clipping them at week boundaries, keeping an open
+edge on the side that continues — is already solved and already tested. The
+filters (`foldEventsOnDay`, `foldEventsInRange`, `foldFilterBySource`) are the
+tier every page uses whichever rendering it picks.
+
+**Measured, and kept measured.** Laying out a month (mean of 20 runs,
+`pnpm bench:calendar`, committed with a budget so it cannot regress quietly):
+
+| events in the window | 50   | 200  | 1 000 | 5 000 | 20 000 |
+| -------------------- | ---- | ---- | ----- | ----- | ------ |
+| ms per layout        | 0.14 | 0.41 | 0.99  | 5.0   | 22     |
+
+Calendar dates are plain `YYYY-MM-DD` **strings**, never `Date`. That is also
+exactly what `Temporal.PlainDate.toString()` returns, so the family is
+**Temporal-native without depending on it**: `foldFromTemporal()` accepts a
+`PlainDate`, `PlainDateTime` or `ZonedDateTime` (structurally typed, so it
+compiles on a runtime that has none of them), and going the other way needs no
+helper — `Temporal.PlainDate.from(foldDate)` already takes one of ours. See
+`foldToday` / `foldFromNativeDate` / `foldAddDays` and the reasoning in
+[`/calendar-dates`](https://hugoheynard.github.io/fold-ng/calendar-dates). The
+family plots on the **Gregorian** calendar and has no resource (staff × day)
+view. Whole-day spans are the month, week, day, list and agenda views; the
+**time grid** adds the hours, with time as wall-clock `HH:mm` rather than an
+instant — the app converts at its own boundary, and no zone can move a meeting
+after that.
+
+It is a **pure display**, by decision and not by omission: it knows nothing
+about what an event means or which layer produced it, so it never originates
+one — no drag-to-create, no range-select. Tone is the caller's to compute,
+which is what lets the same component paint a leave request and an account
+sitting open between registration and activation, its band crossing into
+`warning` then `alert` on a threshold the app owns. Everything drawn around an event is a projectable template:
+`foldCalendarEvent`, `foldCalendarDay`, `foldCalendarHeading`,
+`foldCalendarTitle`, `foldCalendarOverflow`.
+
 Directives worth knowing: **`foldSurface`** (`page`·`chrome` — the seam a mixed
 theme re-colours across), **`foldElevated`** (raise any bg-owning element into
 an inset, rounded, shadowed card — the per-surface "floating" mechanism, driven
 by `--fold-surface-inset`/`-radius`/`-shadow`), **`foldStickyColumn`** (turn an
 `<aside>` into a sticky side column — `sticky="top·center·bottom"` + `stickyOffset`,
 the rest tunable via `--fold-sticky-column-*`; un-stick with
-`--fold-sticky-column-position: static` at the page's stacking breakpoint), and
+`--fold-sticky-column-position: static` at the page's stacking breakpoint),
+**`foldScrollRegion`** (turn any element into a bounded, coordinated scroll box —
+`overflow` + `min-*: 0` + `overscroll-behavior` + the house scrollbar, on a
+`block`·`inline`·`both` axis; the one opt-in of the shell scroll system, it
+registers with the shell so an overlay freezes it while a modal is open), and
 **`foldRepeatPress`** (press-and-hold auto-repeat for a stepper button — fires
 once on press then on a tunable cadence while held, and stops the instant
 `foldRepeatPressDisabled` goes true mid-hold).

package/devtools/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/fold-ng-src-devtools.mjs",
+  "typings": "../types/fold-ng-src-devtools.d.ts"
+}

package/fesm2022/fold-ng-src-devtools.mjs

@@ -0,0 +1,218 @@
+import * as i0 from '@angular/core';
+import { inject, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FOLD_BUILTIN_ICON_CATEGORIES, FoldIconRegistry, FoldIconComponent, FoldButtonIconComponent } from 'fold-ng';
+
+const SIZE_STEPS = ["xs", "sm", "md", "lg", "xl"];
+/** Bucket id for registry icons that belong to no built-in category. */
+const CUSTOM_CATEGORY_ID = "custom";
+/** name → built-in category id, for bucketing the live registry by theme. */
+const CATEGORY_OF_NAME = new Map(FOLD_BUILTIN_ICON_CATEGORIES.flatMap((category) => category.names.map((name) => [name, category.id])));
+/**
+ * `<fold-icon-devtool>` — a **dev-only** floating panel that browses the live
+ * {@link FoldIconRegistry} (built-ins + whatever the host app has registered),
+ * with a search, a preview grid, and a mini playground that builds a
+ * `<fold-icon>` snippet and copies it to the clipboard. The panel is **draggable**
+ * (grab the header) and **minimisable** (collapses to a pill).
+ *
+ * **Ship it behind a dev guard.** It is published from the opt-in `fold-ng/devtools`
+ * entry so it never lands in a bundle that doesn't ask for it; import it only on a
+ * dev path so a production build tree-shakes it away:
+ *
+ * ```ts
+ * import { isDevMode, signal } from "@angular/core";
+ * protected readonly showIconTool = signal(false);
+ * // template: @if (showIconTool()) { <fold-icon-devtool (closed)="showIconTool.set(false)" /> }
+ * // …and only reach the import behind `if (isDevMode())`.
+ * ```
+ *
+ * @selector `fold-icon-devtool`
+ */
+class FoldIconDevtoolComponent {
+    registry = inject(FoldIconRegistry);
+    /** Emitted when the user closes the panel — the host should stop rendering it. */
+    closed = output();
+    sizeSteps = SIZE_STEPS;
+    /** Collapsed to a pill (header only). */
+    minimized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
+    /** Free-drag position; `null` = docked in the default corner (CSS). */
+    pos = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pos" }] : /* istanbul ignore next */ []));
+    /** The live registry names (built-ins + host-registered), sorted. */
+    allNames = computed(() => this.registry.names(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allNames" }] : /* istanbul ignore next */ []));
+    query = signal("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /** Names matching the search (case-insensitive substring). */
+    matches = computed(() => {
+        const q = this.query().trim().toLowerCase();
+        const names = this.allNames();
+        return q ? names.filter((n) => n.includes(q)) : names;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []));
+    /** Category ids the user has collapsed (folded to their header). */
+    collapsed = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * The matches grouped into category sections, in built-in order, with a
+     * trailing **Custom** bucket for host-registered icons. Empty categories are
+     * dropped so a search only shows the themes it actually hit.
+     */
+    categories = computed(() => {
+        const buckets = new Map();
+        for (const name of this.matches()) {
+            const id = CATEGORY_OF_NAME.get(name) ?? CUSTOM_CATEGORY_ID;
+            const bucket = buckets.get(id);
+            if (bucket) {
+                bucket.push(name);
+            }
+            else {
+                buckets.set(id, [name]);
+            }
+        }
+        const sections = [];
+        for (const category of FOLD_BUILTIN_ICON_CATEGORIES) {
+            const names = buckets.get(category.id);
+            if (names) {
+                sections.push({ id: category.id, label: category.label, names });
+            }
+        }
+        const custom = buckets.get(CUSTOM_CATEGORY_ID);
+        if (custom) {
+            sections.push({ id: CUSTOM_CATEGORY_ID, label: "Custom", names: custom });
+        }
+        return sections;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    /** Whether a category section is folded to its header. */
+    isCollapsed(id) {
+        return this.collapsed().has(id);
+    }
+    toggleCategory(id) {
+        this.collapsed.update((set) => {
+            const next = new Set(set);
+            if (!next.delete(id)) {
+                next.add(id);
+            }
+            return next;
+        });
+    }
+    /** The icon selected into the playground (empty = none). */
+    selected = signal("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Playground size preset. */
+    size = signal("md", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** The snippet the copy button writes — size only emitted when non-default. */
+    snippet = computed(() => {
+        const name = this.selected();
+        if (!name) {
+            return "";
+        }
+        const size = this.size();
+        return size === "md"
+            ? `<fold-icon name="${name}" />`
+            : `<fold-icon name="${name}" size="${size}" />`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snippet" }] : /* istanbul ignore next */ []));
+    /** Flashes true briefly after a successful copy. */
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    select(name) {
+        this.selected.set(name);
+    }
+    setSize(size) {
+        this.size.set(size);
+    }
+    onSearch(event) {
+        const target = event.target;
+        if (target instanceof HTMLInputElement) {
+            this.query.set(target.value);
+        }
+    }
+    copy() {
+        const snippet = this.snippet();
+        if (!snippet) {
+            return;
+        }
+        void navigator.clipboard.writeText(snippet).then(() => {
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 1200);
+        });
+    }
+    toggleMinimize() {
+        this.minimized.update((m) => !m);
+    }
+    close() {
+        this.closed.emit();
+    }
+    // ── Drag (grab the header) ────────────────────────────────────────────
+    dragDx = 0;
+    dragDy = 0;
+    onDragStart(event) {
+        const target = event.target;
+        const handle = event.currentTarget;
+        if (!(target instanceof HTMLElement) || !(handle instanceof HTMLElement)) {
+            return;
+        }
+        // Ignore drags that start on an interactive header control.
+        if (target.closest("button")) {
+            return;
+        }
+        const host = handle.closest("fold-icon-devtool");
+        if (!host) {
+            return;
+        }
+        const rect = host.getBoundingClientRect();
+        this.dragDx = event.clientX - rect.left;
+        this.dragDy = event.clientY - rect.top;
+        handle.setPointerCapture(event.pointerId);
+        event.preventDefault();
+    }
+    onDragMove(event) {
+        const handle = event.currentTarget;
+        if (!(handle instanceof HTMLElement) ||
+            !handle.hasPointerCapture(event.pointerId)) {
+            return;
+        }
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const x = Math.max(0, Math.min(event.clientX - this.dragDx, width - 40));
+        const y = Math.max(0, Math.min(event.clientY - this.dragDy, height - 40));
+        this.pos.set({ x, y });
+    }
+    onDragEnd(event) {
+        const handle = event.currentTarget;
+        if (handle instanceof HTMLElement &&
+            handle.hasPointerCapture(event.pointerId)) {
+            handle.releasePointerCapture(event.pointerId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldIconDevtoolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldIconDevtoolComponent, isStandalone: true, selector: "fold-icon-devtool", outputs: { closed: "closed" }, host: { attributes: { "role": "dialog", "aria-label": "Icon devtool" }, properties: { "class.minimized": "minimized()", "style.left.px": "pos()?.x ?? null", "style.top.px": "pos()?.y ?? null", "class.docked": "pos() === null" } }, ngImport: i0, template: "<header\n  class=\"dt-head\"\n  (pointerdown)=\"onDragStart($event)\"\n  (pointermove)=\"onDragMove($event)\"\n  (pointerup)=\"onDragEnd($event)\"\n  (pointercancel)=\"onDragEnd($event)\"\n>\n  <span class=\"dt-grip\" aria-hidden=\"true\"></span>\n  <span class=\"dt-title\">\n    <fold-icon name=\"grid\" size=\"sm\" aria-hidden=\"true\" />\n    Icons\n    <span class=\"dt-count\">{{ matches().length }}</span>\n  </span>\n  <span class=\"dt-actions\">\n    <fold-button-icon\n      [icon]=\"minimized() ? 'chevron-up' : 'minus'\"\n      size=\"sm\"\n      [tooltip]=\"minimized() ? 'Expand' : 'Minimise'\"\n      (clicked)=\"toggleMinimize()\"\n    />\n    <fold-button-icon\n      icon=\"close\"\n      size=\"sm\"\n      tooltip=\"Close\"\n      (clicked)=\"close()\"\n    />\n  </span>\n</header>\n\n@if (!minimized()) {\n  <div class=\"dt-body\">\n    <div class=\"dt-search\">\n      <fold-icon\n        name=\"search\"\n        size=\"sm\"\n        class=\"dt-search-ico\"\n        aria-hidden=\"true\"\n      />\n      <input\n        type=\"search\"\n        class=\"dt-search-input\"\n        placeholder=\"Search icons\u2026\"\n        aria-label=\"Search icons\"\n        [value]=\"query()\"\n        (input)=\"onSearch($event)\"\n      />\n    </div>\n\n    <div class=\"dt-cats\">\n      @for (cat of categories(); track cat.id) {\n        <section class=\"dt-cat\">\n          <button\n            type=\"button\"\n            class=\"dt-cat-head\"\n            [attr.aria-expanded]=\"!isCollapsed(cat.id)\"\n            (click)=\"toggleCategory(cat.id)\"\n          >\n            <fold-icon\n              [name]=\"isCollapsed(cat.id) ? 'chevron-right' : 'chevron-down'\"\n              size=\"sm\"\n              aria-hidden=\"true\"\n            />\n            <span class=\"dt-cat-label\">{{ cat.label }}</span>\n            <span class=\"dt-cat-count\">{{ cat.names.length }}</span>\n          </button>\n\n          @if (!isCollapsed(cat.id)) {\n            <div class=\"dt-grid\" role=\"listbox\" [attr.aria-label]=\"cat.label\">\n              @for (name of cat.names; track name) {\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  class=\"dt-cell\"\n                  [class.is-selected]=\"selected() === name\"\n                  [attr.aria-selected]=\"selected() === name\"\n                  [title]=\"name\"\n                  (click)=\"select(name)\"\n                >\n                  <fold-icon [name]=\"name\" size=\"md\" aria-hidden=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        </section>\n      } @empty {\n        <p class=\"dt-empty\">No icon matches \u201C{{ query() }}\u201D.</p>\n      }\n    </div>\n\n    @if (selected(); as name) {\n      <div class=\"dt-play\">\n        <div class=\"dt-preview\">\n          <fold-icon [name]=\"name\" [size]=\"size()\" />\n          <code class=\"dt-name\">{{ name }}</code>\n        </div>\n        <div class=\"dt-controls\">\n          <div class=\"dt-sizes\" role=\"group\" aria-label=\"Preview size\">\n            @for (s of sizeSteps; track s) {\n              <button\n                type=\"button\"\n                class=\"dt-size\"\n                [class.is-on]=\"size() === s\"\n                (click)=\"setSize(s)\"\n              >\n                {{ s }}\n              </button>\n            }\n          </div>\n          <div class=\"dt-snippet\">\n            <code>{{ snippet() }}</code>\n            <button\n              type=\"button\"\n              class=\"dt-copy\"\n              [class.is-copied]=\"copied()\"\n              (click)=\"copy()\"\n            >\n              <fold-icon\n                [name]=\"copied() ? 'check' : 'copy'\"\n                size=\"sm\"\n                aria-hidden=\"true\"\n              />\n              {{ copied() ? \"Copied\" : \"Copy\" }}\n            </button>\n          </div>\n        </div>\n      </div>\n    } @else {\n      <p class=\"dt-hint\">\n        Pick an icon to build a <code>&lt;fold-icon&gt;</code> snippet.\n      </p>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;z-index:2147483000;display:flex;flex-direction:column;width:320px;max-width:calc(100vw - 2rem);max-height:min(78vh,640px);overflow:hidden;background:var(--fold-color-surface-card);color:var(--fold-color-text);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg, 14px);box-shadow:var(--fold-shadow-lg);font-size:var(--fold-text-sm, .875rem);-webkit-user-select:none;user-select:none}:host(.docked){right:1.25rem;bottom:1.25rem}:host(.minimized){max-height:none}.dt-head{display:flex;align-items:center;gap:var(--fold-space-sm, .5rem);padding:.4rem .5rem .4rem .75rem;background:var(--fold-color-surface-raised);border-bottom:1px solid var(--fold-color-border-subtle);cursor:grab;touch-action:none}.dt-head:active{cursor:grabbing}:host(.minimized) .dt-head{border-bottom:0}.dt-grip{width:10px;height:14px;flex:none;background-image:radial-gradient(currentColor 1px,transparent 1.4px);background-size:4px 4px;color:var(--fold-color-text-faded);opacity:.7}.dt-title{display:flex;align-items:center;gap:.4rem;font-weight:600}.dt-count{padding:.05rem .4rem;border-radius:var(--fold-radius-pill, 9999px);background:var(--fold-color-surface-sunken);color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem);font-variant-numeric:tabular-nums}.dt-actions{display:flex;align-items:center;gap:.15rem;margin-left:auto}.dt-body{display:flex;flex-direction:column;gap:var(--fold-space-sm, .6rem);padding:var(--fold-space-sm, .6rem);min-height:0;overflow:hidden}.dt-search{position:relative;flex:none}.dt-search-ico{position:absolute;top:50%;left:.55rem;transform:translateY(-50%);color:var(--fold-color-text-muted);pointer-events:none}.dt-search-input{width:100%;box-sizing:border-box;padding:.4rem .6rem .4rem 1.9rem;font:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-sunken);border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm, 8px)}.dt-search-input::placeholder{color:var(--fold-color-text-faded)}.dt-search-input:focus-visible{outline:none;border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.dt-cats{display:flex;flex-direction:column;gap:.15rem;overflow-y:auto;min-height:4rem;padding:.1rem}.dt-cat{display:flex;flex-direction:column}.dt-cat-head{all:unset;position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:.35rem;padding:.3rem .35rem;background:var(--fold-color-surface-card);color:var(--fold-color-text-muted);cursor:pointer}.dt-cat-head:hover{color:var(--fold-color-text)}.dt-cat-head:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px;border-radius:var(--fold-radius-sm, 8px)}.dt-cat-label{font-size:var(--fold-text-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.dt-cat-count{padding:.02rem .35rem;border-radius:var(--fold-radius-pill, 9999px);background:var(--fold-color-surface-sunken);color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem);font-variant-numeric:tabular-nums}.dt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:.25rem;padding:.1rem .1rem .35rem}.dt-cell{all:unset;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--fold-radius-sm, 8px);color:var(--fold-color-text-secondary);cursor:pointer;transition:background var(--fold-motion-fast)}.dt-cell:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dt-cell:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px}.dt-cell.is-selected{background:var(--fold-color-primary-surface, var(--fold-color-surface-hover));color:var(--fold-color-primary);box-shadow:inset 0 0 0 1px var(--fold-color-primary-border)}.dt-empty,.dt-hint{margin:0;padding:.5rem .25rem;color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem)}.dt-play{flex:none;display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--fold-color-border-subtle)}.dt-preview{display:flex;align-items:center;gap:.6rem;color:var(--fold-color-text)}.dt-name{font-family:ui-monospace,monospace;font-size:var(--fold-text-xs, .75rem);color:var(--fold-color-text-muted)}.dt-controls{display:flex;flex-direction:column;gap:.4rem}.dt-sizes{display:inline-flex;gap:.15rem;padding:.15rem;background:var(--fold-color-surface-sunken);border-radius:var(--fold-radius-sm, 8px);width:fit-content}.dt-size{all:unset;padding:.15rem .45rem;border-radius:var(--fold-radius-xs, 5px);color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem);cursor:pointer}.dt-size:hover{color:var(--fold-color-text)}.dt-size.is-on{background:var(--fold-color-surface-card);color:var(--fold-color-text);box-shadow:var(--fold-shadow-sm)}.dt-size:focus-visible{outline:2px solid var(--fold-color-primary-border)}.dt-snippet{display:flex;align-items:center;gap:.4rem}.dt-snippet code{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;padding:.35rem .5rem;background:var(--fold-color-surface-sunken);border-radius:var(--fold-radius-sm, 8px);font-family:ui-monospace,monospace;font-size:var(--fold-text-xs, .75rem);color:var(--fold-color-text)}.dt-copy{all:unset;display:inline-flex;align-items:center;gap:.3rem;flex:none;padding:.35rem .6rem;border-radius:var(--fold-radius-sm, 8px);background:var(--fold-color-primary);color:var(--fold-color-on-primary);font-size:var(--fold-text-xs, .75rem);font-weight:600;cursor:pointer}.dt-copy:hover{background:var(--fold-color-primary-strong, var(--fold-color-primary))}.dt-copy:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:2px}.dt-copy.is-copied{background:var(--fold-color-success, var(--fold-color-primary))}@media(prefers-reduced-motion:reduce){.dt-cell{transition:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldButtonIconComponent, selector: "fold-button-icon", inputs: ["icon", "shape", "size", "tone", "disabled", "loading", "tooltip", "type"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldIconDevtoolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-icon-devtool", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FoldIconComponent, FoldButtonIconComponent], host: {
+                        role: "dialog",
+                        "aria-label": "Icon devtool",
+                        "[class.minimized]": "minimized()",
+                        "[style.left.px]": "pos()?.x ?? null",
+                        "[style.top.px]": "pos()?.y ?? null",
+                        "[class.docked]": "pos() === null",
+                    }, template: "<header\n  class=\"dt-head\"\n  (pointerdown)=\"onDragStart($event)\"\n  (pointermove)=\"onDragMove($event)\"\n  (pointerup)=\"onDragEnd($event)\"\n  (pointercancel)=\"onDragEnd($event)\"\n>\n  <span class=\"dt-grip\" aria-hidden=\"true\"></span>\n  <span class=\"dt-title\">\n    <fold-icon name=\"grid\" size=\"sm\" aria-hidden=\"true\" />\n    Icons\n    <span class=\"dt-count\">{{ matches().length }}</span>\n  </span>\n  <span class=\"dt-actions\">\n    <fold-button-icon\n      [icon]=\"minimized() ? 'chevron-up' : 'minus'\"\n      size=\"sm\"\n      [tooltip]=\"minimized() ? 'Expand' : 'Minimise'\"\n      (clicked)=\"toggleMinimize()\"\n    />\n    <fold-button-icon\n      icon=\"close\"\n      size=\"sm\"\n      tooltip=\"Close\"\n      (clicked)=\"close()\"\n    />\n  </span>\n</header>\n\n@if (!minimized()) {\n  <div class=\"dt-body\">\n    <div class=\"dt-search\">\n      <fold-icon\n        name=\"search\"\n        size=\"sm\"\n        class=\"dt-search-ico\"\n        aria-hidden=\"true\"\n      />\n      <input\n        type=\"search\"\n        class=\"dt-search-input\"\n        placeholder=\"Search icons\u2026\"\n        aria-label=\"Search icons\"\n        [value]=\"query()\"\n        (input)=\"onSearch($event)\"\n      />\n    </div>\n\n    <div class=\"dt-cats\">\n      @for (cat of categories(); track cat.id) {\n        <section class=\"dt-cat\">\n          <button\n            type=\"button\"\n            class=\"dt-cat-head\"\n            [attr.aria-expanded]=\"!isCollapsed(cat.id)\"\n            (click)=\"toggleCategory(cat.id)\"\n          >\n            <fold-icon\n              [name]=\"isCollapsed(cat.id) ? 'chevron-right' : 'chevron-down'\"\n              size=\"sm\"\n              aria-hidden=\"true\"\n            />\n            <span class=\"dt-cat-label\">{{ cat.label }}</span>\n            <span class=\"dt-cat-count\">{{ cat.names.length }}</span>\n          </button>\n\n          @if (!isCollapsed(cat.id)) {\n            <div class=\"dt-grid\" role=\"listbox\" [attr.aria-label]=\"cat.label\">\n              @for (name of cat.names; track name) {\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  class=\"dt-cell\"\n                  [class.is-selected]=\"selected() === name\"\n                  [attr.aria-selected]=\"selected() === name\"\n                  [title]=\"name\"\n                  (click)=\"select(name)\"\n                >\n                  <fold-icon [name]=\"name\" size=\"md\" aria-hidden=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        </section>\n      } @empty {\n        <p class=\"dt-empty\">No icon matches \u201C{{ query() }}\u201D.</p>\n      }\n    </div>\n\n    @if (selected(); as name) {\n      <div class=\"dt-play\">\n        <div class=\"dt-preview\">\n          <fold-icon [name]=\"name\" [size]=\"size()\" />\n          <code class=\"dt-name\">{{ name }}</code>\n        </div>\n        <div class=\"dt-controls\">\n          <div class=\"dt-sizes\" role=\"group\" aria-label=\"Preview size\">\n            @for (s of sizeSteps; track s) {\n              <button\n                type=\"button\"\n                class=\"dt-size\"\n                [class.is-on]=\"size() === s\"\n                (click)=\"setSize(s)\"\n              >\n                {{ s }}\n              </button>\n            }\n          </div>\n          <div class=\"dt-snippet\">\n            <code>{{ snippet() }}</code>\n            <button\n              type=\"button\"\n              class=\"dt-copy\"\n              [class.is-copied]=\"copied()\"\n              (click)=\"copy()\"\n            >\n              <fold-icon\n                [name]=\"copied() ? 'check' : 'copy'\"\n                size=\"sm\"\n                aria-hidden=\"true\"\n              />\n              {{ copied() ? \"Copied\" : \"Copy\" }}\n            </button>\n          </div>\n        </div>\n      </div>\n    } @else {\n      <p class=\"dt-hint\">\n        Pick an icon to build a <code>&lt;fold-icon&gt;</code> snippet.\n      </p>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;z-index:2147483000;display:flex;flex-direction:column;width:320px;max-width:calc(100vw - 2rem);max-height:min(78vh,640px);overflow:hidden;background:var(--fold-color-surface-card);color:var(--fold-color-text);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg, 14px);box-shadow:var(--fold-shadow-lg);font-size:var(--fold-text-sm, .875rem);-webkit-user-select:none;user-select:none}:host(.docked){right:1.25rem;bottom:1.25rem}:host(.minimized){max-height:none}.dt-head{display:flex;align-items:center;gap:var(--fold-space-sm, .5rem);padding:.4rem .5rem .4rem .75rem;background:var(--fold-color-surface-raised);border-bottom:1px solid var(--fold-color-border-subtle);cursor:grab;touch-action:none}.dt-head:active{cursor:grabbing}:host(.minimized) .dt-head{border-bottom:0}.dt-grip{width:10px;height:14px;flex:none;background-image:radial-gradient(currentColor 1px,transparent 1.4px);background-size:4px 4px;color:var(--fold-color-text-faded);opacity:.7}.dt-title{display:flex;align-items:center;gap:.4rem;font-weight:600}.dt-count{padding:.05rem .4rem;border-radius:var(--fold-radius-pill, 9999px);background:var(--fold-color-surface-sunken);color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem);font-variant-numeric:tabular-nums}.dt-actions{display:flex;align-items:center;gap:.15rem;margin-left:auto}.dt-body{display:flex;flex-direction:column;gap:var(--fold-space-sm, .6rem);padding:var(--fold-space-sm, .6rem);min-height:0;overflow:hidden}.dt-search{position:relative;flex:none}.dt-search-ico{position:absolute;top:50%;left:.55rem;transform:translateY(-50%);color:var(--fold-color-text-muted);pointer-events:none}.dt-search-input{width:100%;box-sizing:border-box;padding:.4rem .6rem .4rem 1.9rem;font:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-sunken);border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm, 8px)}.dt-search-input::placeholder{color:var(--fold-color-text-faded)}.dt-search-input:focus-visible{outline:none;border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.dt-cats{display:flex;flex-direction:column;gap:.15rem;overflow-y:auto;min-height:4rem;padding:.1rem}.dt-cat{display:flex;flex-direction:column}.dt-cat-head{all:unset;position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:.35rem;padding:.3rem .35rem;background:var(--fold-color-surface-card);color:var(--fold-color-text-muted);cursor:pointer}.dt-cat-head:hover{color:var(--fold-color-text)}.dt-cat-head:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px;border-radius:var(--fold-radius-sm, 8px)}.dt-cat-label{font-size:var(--fold-text-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.dt-cat-count{padding:.02rem .35rem;border-radius:var(--fold-radius-pill, 9999px);background:var(--fold-color-surface-sunken);color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem);font-variant-numeric:tabular-nums}.dt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:.25rem;padding:.1rem .1rem .35rem}.dt-cell{all:unset;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--fold-radius-sm, 8px);color:var(--fold-color-text-secondary);cursor:pointer;transition:background var(--fold-motion-fast)}.dt-cell:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dt-cell:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px}.dt-cell.is-selected{background:var(--fold-color-primary-surface, var(--fold-color-surface-hover));color:var(--fold-color-primary);box-shadow:inset 0 0 0 1px var(--fold-color-primary-border)}.dt-empty,.dt-hint{margin:0;padding:.5rem .25rem;color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem)}.dt-play{flex:none;display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--fold-color-border-subtle)}.dt-preview{display:flex;align-items:center;gap:.6rem;color:var(--fold-color-text)}.dt-name{font-family:ui-monospace,monospace;font-size:var(--fold-text-xs, .75rem);color:var(--fold-color-text-muted)}.dt-controls{display:flex;flex-direction:column;gap:.4rem}.dt-sizes{display:inline-flex;gap:.15rem;padding:.15rem;background:var(--fold-color-surface-sunken);border-radius:var(--fold-radius-sm, 8px);width:fit-content}.dt-size{all:unset;padding:.15rem .45rem;border-radius:var(--fold-radius-xs, 5px);color:var(--fold-color-text-muted);font-size:var(--fold-text-xs, .75rem);cursor:pointer}.dt-size:hover{color:var(--fold-color-text)}.dt-size.is-on{background:var(--fold-color-surface-card);color:var(--fold-color-text);box-shadow:var(--fold-shadow-sm)}.dt-size:focus-visible{outline:2px solid var(--fold-color-primary-border)}.dt-snippet{display:flex;align-items:center;gap:.4rem}.dt-snippet code{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;padding:.35rem .5rem;background:var(--fold-color-surface-sunken);border-radius:var(--fold-radius-sm, 8px);font-family:ui-monospace,monospace;font-size:var(--fold-text-xs, .75rem);color:var(--fold-color-text)}.dt-copy{all:unset;display:inline-flex;align-items:center;gap:.3rem;flex:none;padding:.35rem .6rem;border-radius:var(--fold-radius-sm, 8px);background:var(--fold-color-primary);color:var(--fold-color-on-primary);font-size:var(--fold-text-xs, .75rem);font-weight:600;cursor:pointer}.dt-copy:hover{background:var(--fold-color-primary-strong, var(--fold-color-primary))}.dt-copy:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:2px}.dt-copy.is-copied{background:var(--fold-color-success, var(--fold-color-primary))}@media(prefers-reduced-motion:reduce){.dt-cell{transition:none}}\n"] }]
+        }], propDecorators: { closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+// Opt-in dev-tools entry — `import { … } from "fold-ng/devtools"`.
+//
+// Everything here is meant for a DEV build only. Reach the import behind a dev
+// guard (`if (isDevMode())` + a dynamic `import("fold-ng/devtools")`, or a
+// dev-only route/flag) so a production bundle tree-shakes it away — these tools
+// are never part of the shipped UI.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FoldIconDevtoolComponent };
+//# sourceMappingURL=fold-ng-src-devtools.mjs.map

package/fesm2022/fold-ng-src-devtools.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fold-ng-src-devtools.mjs","sources":["../../src/devtools/icon-devtool/icon-devtool.component.ts","../../src/devtools/icon-devtool/icon-devtool.component.html","../../src/devtools/public-api.ts","../../src/devtools/fold-ng-src-devtools.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  output,\n  signal,\n} from \"@angular/core\";\n// Cross-entry imports resolve through the package name, not a relative path\n// into `../../components`: `fold-ng/devtools` is its own ng-packagr entry point\n// (own rootDir), so it depends on the primary `fold-ng` entry the same way any\n// consumer would. The monorepo's vite/vitest alias `fold-ng` → `src/public-api`.\nimport {\n  FOLD_BUILTIN_ICON_CATEGORIES,\n  FoldButtonIconComponent,\n  FoldIconComponent,\n  FoldIconRegistry,\n} from \"fold-ng\";\n\n/** A draggable panel position, in viewport pixels (top-left origin). `null`\n *  until the first drag — the panel sits in its default corner via CSS. */\ninterface DevtoolPos {\n  readonly x: number;\n  readonly y: number;\n}\n\nconst SIZE_STEPS = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\ntype IconSize = (typeof SIZE_STEPS)[number];\n\n/** Bucket id for registry icons that belong to no built-in category. */\nconst CUSTOM_CATEGORY_ID = \"custom\";\n\n/** A category section rendered in the grid: its label, count, and members. */\ninterface IconCategory {\n  readonly id: string;\n  readonly label: string;\n  readonly names: readonly string[];\n}\n\n/** name → built-in category id, for bucketing the live registry by theme. */\nconst CATEGORY_OF_NAME = new Map<string, string>(\n  FOLD_BUILTIN_ICON_CATEGORIES.flatMap((category) =>\n    category.names.map((name) => [name, category.id] as const),\n  ),\n);\n\n/**\n * `<fold-icon-devtool>` — a **dev-only** floating panel that browses the live\n * {@link FoldIconRegistry} (built-ins + whatever the host app has registered),\n * with a search, a preview grid, and a mini playground that builds a\n * `<fold-icon>` snippet and copies it to the clipboard. The panel is **draggable**\n * (grab the header) and **minimisable** (collapses to a pill).\n *\n * **Ship it behind a dev guard.** It is published from the opt-in `fold-ng/devtools`\n * entry so it never lands in a bundle that doesn't ask for it; import it only on a\n * dev path so a production build tree-shakes it away:\n *\n * ```ts\n * import { isDevMode, signal } from \"@angular/core\";\n * protected readonly showIconTool = signal(false);\n * // template: @if (showIconTool()) { <fold-icon-devtool (closed)=\"showIconTool.set(false)\" /> }\n * // …and only reach the import behind `if (isDevMode())`.\n * ```\n *\n * @selector `fold-icon-devtool`\n */\n@Component({\n  selector: \"fold-icon-devtool\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FoldIconComponent, FoldButtonIconComponent],\n  templateUrl: \"./icon-devtool.component.html\",\n  styleUrl: \"./icon-devtool.component.scss\",\n  host: {\n    role: \"dialog\",\n    \"aria-label\": \"Icon devtool\",\n    \"[class.minimized]\": \"minimized()\",\n    \"[style.left.px]\": \"pos()?.x ?? null\",\n    \"[style.top.px]\": \"pos()?.y ?? null\",\n    \"[class.docked]\": \"pos() === null\",\n  },\n})\nexport class FoldIconDevtoolComponent {\n  private readonly registry = inject(FoldIconRegistry);\n\n  /** Emitted when the user closes the panel — the host should stop rendering it. */\n  readonly closed = output();\n\n  protected readonly sizeSteps = SIZE_STEPS;\n\n  /** Collapsed to a pill (header only). */\n  protected readonly minimized = signal(false);\n  /** Free-drag position; `null` = docked in the default corner (CSS). */\n  protected readonly pos = signal<DevtoolPos | null>(null);\n\n  /** The live registry names (built-ins + host-registered), sorted. */\n  private readonly allNames = computed(() => this.registry.names());\n\n  protected readonly query = signal(\"\");\n  /** Names matching the search (case-insensitive substring). */\n  protected readonly matches = computed(() => {\n    const q = this.query().trim().toLowerCase();\n    const names = this.allNames();\n    return q ? names.filter((n) => n.includes(q)) : names;\n  });\n\n  /** Category ids the user has collapsed (folded to their header). */\n  private readonly collapsed = signal<ReadonlySet<string>>(new Set());\n\n  /**\n   * The matches grouped into category sections, in built-in order, with a\n   * trailing **Custom** bucket for host-registered icons. Empty categories are\n   * dropped so a search only shows the themes it actually hit.\n   */\n  protected readonly categories = computed<readonly IconCategory[]>(() => {\n    const buckets = new Map<string, string[]>();\n    for (const name of this.matches()) {\n      const id = CATEGORY_OF_NAME.get(name) ?? CUSTOM_CATEGORY_ID;\n      const bucket = buckets.get(id);\n      if (bucket) {\n        bucket.push(name);\n      } else {\n        buckets.set(id, [name]);\n      }\n    }\n    const sections: IconCategory[] = [];\n    for (const category of FOLD_BUILTIN_ICON_CATEGORIES) {\n      const names = buckets.get(category.id);\n      if (names) {\n        sections.push({ id: category.id, label: category.label, names });\n      }\n    }\n    const custom = buckets.get(CUSTOM_CATEGORY_ID);\n    if (custom) {\n      sections.push({ id: CUSTOM_CATEGORY_ID, label: \"Custom\", names: custom });\n    }\n    return sections;\n  });\n\n  /** Whether a category section is folded to its header. */\n  protected isCollapsed(id: string): boolean {\n    return this.collapsed().has(id);\n  }\n\n  protected toggleCategory(id: string): void {\n    this.collapsed.update((set) => {\n      const next = new Set(set);\n      if (!next.delete(id)) {\n        next.add(id);\n      }\n      return next;\n    });\n  }\n\n  /** The icon selected into the playground (empty = none). */\n  protected readonly selected = signal(\"\");\n  /** Playground size preset. */\n  protected readonly size = signal<IconSize>(\"md\");\n\n  /** The snippet the copy button writes — size only emitted when non-default. */\n  protected readonly snippet = computed(() => {\n    const name = this.selected();\n    if (!name) {\n      return \"\";\n    }\n    const size = this.size();\n    return size === \"md\"\n      ? `<fold-icon name=\"${name}\" />`\n      : `<fold-icon name=\"${name}\" size=\"${size}\" />`;\n  });\n\n  /** Flashes true briefly after a successful copy. */\n  protected readonly copied = signal(false);\n\n  protected select(name: string): void {\n    this.selected.set(name);\n  }\n\n  protected setSize(size: IconSize): void {\n    this.size.set(size);\n  }\n\n  protected onSearch(event: Event): void {\n    const target = event.target;\n    if (target instanceof HTMLInputElement) {\n      this.query.set(target.value);\n    }\n  }\n\n  protected copy(): void {\n    const snippet = this.snippet();\n    if (!snippet) {\n      return;\n    }\n    void navigator.clipboard.writeText(snippet).then(() => {\n      this.copied.set(true);\n      setTimeout(() => this.copied.set(false), 1200);\n    });\n  }\n\n  protected toggleMinimize(): void {\n    this.minimized.update((m) => !m);\n  }\n\n  protected close(): void {\n    this.closed.emit();\n  }\n\n  // ── Drag (grab the header) ────────────────────────────────────────────\n  private dragDx = 0;\n  private dragDy = 0;\n\n  protected onDragStart(event: PointerEvent): void {\n    const target = event.target;\n    const handle = event.currentTarget;\n    if (!(target instanceof HTMLElement) || !(handle instanceof HTMLElement)) {\n      return;\n    }\n    // Ignore drags that start on an interactive header control.\n    if (target.closest(\"button\")) {\n      return;\n    }\n    const host = handle.closest(\"fold-icon-devtool\");\n    if (!host) {\n      return;\n    }\n    const rect = host.getBoundingClientRect();\n    this.dragDx = event.clientX - rect.left;\n    this.dragDy = event.clientY - rect.top;\n    handle.setPointerCapture(event.pointerId);\n    event.preventDefault();\n  }\n\n  protected onDragMove(event: PointerEvent): void {\n    const handle = event.currentTarget;\n    if (\n      !(handle instanceof HTMLElement) ||\n      !handle.hasPointerCapture(event.pointerId)\n    ) {\n      return;\n    }\n    const width = window.innerWidth;\n    const height = window.innerHeight;\n    const x = Math.max(0, Math.min(event.clientX - this.dragDx, width - 40));\n    const y = Math.max(0, Math.min(event.clientY - this.dragDy, height - 40));\n    this.pos.set({ x, y });\n  }\n\n  protected onDragEnd(event: PointerEvent): void {\n    const handle = event.currentTarget;\n    if (\n      handle instanceof HTMLElement &&\n      handle.hasPointerCapture(event.pointerId)\n    ) {\n      handle.releasePointerCapture(event.pointerId);\n    }\n  }\n}\n","<header\n  class=\"dt-head\"\n  (pointerdown)=\"onDragStart($event)\"\n  (pointermove)=\"onDragMove($event)\"\n  (pointerup)=\"onDragEnd($event)\"\n  (pointercancel)=\"onDragEnd($event)\"\n>\n  <span class=\"dt-grip\" aria-hidden=\"true\"></span>\n  <span class=\"dt-title\">\n    <fold-icon name=\"grid\" size=\"sm\" aria-hidden=\"true\" />\n    Icons\n    <span class=\"dt-count\">{{ matches().length }}</span>\n  </span>\n  <span class=\"dt-actions\">\n    <fold-button-icon\n      [icon]=\"minimized() ? 'chevron-up' : 'minus'\"\n      size=\"sm\"\n      [tooltip]=\"minimized() ? 'Expand' : 'Minimise'\"\n      (clicked)=\"toggleMinimize()\"\n    />\n    <fold-button-icon\n      icon=\"close\"\n      size=\"sm\"\n      tooltip=\"Close\"\n      (clicked)=\"close()\"\n    />\n  </span>\n</header>\n\n@if (!minimized()) {\n  <div class=\"dt-body\">\n    <div class=\"dt-search\">\n      <fold-icon\n        name=\"search\"\n        size=\"sm\"\n        class=\"dt-search-ico\"\n        aria-hidden=\"true\"\n      />\n      <input\n        type=\"search\"\n        class=\"dt-search-input\"\n        placeholder=\"Search icons…\"\n        aria-label=\"Search icons\"\n        [value]=\"query()\"\n        (input)=\"onSearch($event)\"\n      />\n    </div>\n\n    <div class=\"dt-cats\">\n      @for (cat of categories(); track cat.id) {\n        <section class=\"dt-cat\">\n          <button\n            type=\"button\"\n            class=\"dt-cat-head\"\n            [attr.aria-expanded]=\"!isCollapsed(cat.id)\"\n            (click)=\"toggleCategory(cat.id)\"\n          >\n            <fold-icon\n              [name]=\"isCollapsed(cat.id) ? 'chevron-right' : 'chevron-down'\"\n              size=\"sm\"\n              aria-hidden=\"true\"\n            />\n            <span class=\"dt-cat-label\">{{ cat.label }}</span>\n            <span class=\"dt-cat-count\">{{ cat.names.length }}</span>\n          </button>\n\n          @if (!isCollapsed(cat.id)) {\n            <div class=\"dt-grid\" role=\"listbox\" [attr.aria-label]=\"cat.label\">\n              @for (name of cat.names; track name) {\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  class=\"dt-cell\"\n                  [class.is-selected]=\"selected() === name\"\n                  [attr.aria-selected]=\"selected() === name\"\n                  [title]=\"name\"\n                  (click)=\"select(name)\"\n                >\n                  <fold-icon [name]=\"name\" size=\"md\" aria-hidden=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        </section>\n      } @empty {\n        <p class=\"dt-empty\">No icon matches “{{ query() }}”.</p>\n      }\n    </div>\n\n    @if (selected(); as name) {\n      <div class=\"dt-play\">\n        <div class=\"dt-preview\">\n          <fold-icon [name]=\"name\" [size]=\"size()\" />\n          <code class=\"dt-name\">{{ name }}</code>\n        </div>\n        <div class=\"dt-controls\">\n          <div class=\"dt-sizes\" role=\"group\" aria-label=\"Preview size\">\n            @for (s of sizeSteps; track s) {\n              <button\n                type=\"button\"\n                class=\"dt-size\"\n                [class.is-on]=\"size() === s\"\n                (click)=\"setSize(s)\"\n              >\n                {{ s }}\n              </button>\n            }\n          </div>\n          <div class=\"dt-snippet\">\n            <code>{{ snippet() }}</code>\n            <button\n              type=\"button\"\n              class=\"dt-copy\"\n              [class.is-copied]=\"copied()\"\n              (click)=\"copy()\"\n            >\n              <fold-icon\n                [name]=\"copied() ? 'check' : 'copy'\"\n                size=\"sm\"\n                aria-hidden=\"true\"\n              />\n              {{ copied() ? \"Copied\" : \"Copy\" }}\n            </button>\n          </div>\n        </div>\n      </div>\n    } @else {\n      <p class=\"dt-hint\">\n        Pick an icon to build a <code>&lt;fold-icon&gt;</code> snippet.\n      </p>\n    }\n  </div>\n}\n","// Opt-in dev-tools entry — `import { … } from \"fold-ng/devtools\"`.\n//\n// Everything here is meant for a DEV build only. Reach the import behind a dev\n// guard (`if (isDevMode())` + a dynamic `import(\"fold-ng/devtools\")`, or a\n// dev-only route/flag) so a production bundle tree-shakes it away — these tools\n// are never part of the shipped UI.\nexport { FoldIconDevtoolComponent } from \"./icon-devtool/icon-devtool.component\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}