{"version":3,"file":"fold-ng.mjs","sources":["../../src/a11y/focus-trap.directive.ts","../../src/a11y/id.service.ts","../../src/a11y/scroll-region-registry.service.ts","../../src/dom/observe-element-width.ts","../../src/directives/surface.directive.ts","../../src/components/layout/app-shell/app-shell.component.ts","../../src/components/layout/app-shell/app-shell.component.html","../../src/color/palettes.ts","../../src/color/palette-registry.service.ts","../../src/color/contrast.ts","../../src/components/content/avatar/avatar.component.ts","../../src/components/content/avatar/avatar.component.html","../../src/components/content/avatar-detail/avatar-detail.component.ts","../../src/components/content/avatar-detail/avatar-detail.component.html","../../src/components/content/avatar-list/avatar-list.component.ts","../../src/components/content/avatar-list/avatar-list.component.html","../../src/components/content/badge/badge.component.ts","../../src/components/content/badge/badge.component.html","../../src/components/foundations/icon/icons/ui.icons.ts","../../src/components/foundations/icon/icons/nav.icons.ts","../../src/components/foundations/icon/icons/commerce.icons.ts","../../src/components/foundations/icon/icons/music.icons.ts","../../src/components/foundations/icon/icons/status.icons.ts","../../src/components/foundations/icon/icons/people.icons.ts","../../src/components/foundations/icon/icons/brands.icons.ts","../../src/components/foundations/icon/builtin-icons.ts","../../src/components/foundations/icon/icon-safety.ts","../../src/components/foundations/icon/icon-registry.service.ts","../../src/components/foundations/icon/icon-sprite.ts","../../src/components/foundations/icon/icon-sprite.service.ts","../../src/components/foundations/icon/icon.component.ts","../../src/components/foundations/icon/icon.component.html","../../src/tokens/tokens.catalog.ts","../../src/components/foundations/spinner/spinner.component.ts","../../src/components/foundations/spinner/spinner.component.html","../../src/components/actions/button/button.component.ts","../../src/components/actions/button/button.component.html","../../src/components/actions/button-icon/button-icon.component.ts","../../src/components/actions/button-icon/button-icon.component.html","../../src/components/forms/common-labels.ts","../../src/components/overlays/popover/placement.ts","../../src/components/overlays/popover/auto-update.ts","../../src/components/overlays/popover/popover.component.ts","../../src/components/overlays/popover/popover.component.html","../../src/components/overlays/popover/popover-trigger.directive.ts","../../src/components/overlays/info/info.component.ts","../../src/components/overlays/info/info.component.html","../../src/components/forms/input/label.component.ts","../../src/components/forms/input/input-base.component.ts","../../src/components/forms/input/input-base.component.html","../../src/components/forms/input/input-value.ts","../../src/components/forms/input/input.component.ts","../../src/components/forms/input/input.component.html","../../src/components/actions/inline-confirm/inline-confirm-labels.ts","../../src/components/actions/inline-confirm/inline-confirm.component.ts","../../src/components/actions/inline-confirm/inline-confirm.component.html","../../src/components/actions/danger-zone/danger-zone.component.ts","../../src/components/actions/danger-zone/danger-zone.component.html","../../src/components/actions/toggle-icon/toggle-icon.component.ts","../../src/components/actions/toggle-icon/toggle-icon.component.html","../../src/components/content/card/card.component.ts","../../src/components/content/card/card.component.html","../../src/components/content/element-title/element-title.component.ts","../../src/components/content/element-title/element-title.component.html","../../src/components/content/context-card/context-card.component.ts","../../src/components/content/context-card/context-card.component.html","../../src/a11y/field-id.directive.ts","../../src/components/forms/file-dropzone/file-dropzone.component.ts","../../src/components/forms/file-dropzone/file-dropzone.component.html","../../src/components/content/field/field-list.component.ts","../../src/components/content/field/field-list.component.html","../../src/components/content/field/field.component.ts","../../src/components/content/field/field.component.html","../../src/components/actions/link/link.component.ts","../../src/components/actions/link/link.component.html","../../src/components/navigation/menu/menu.component.ts","../../src/components/navigation/menu/menu.component.html","../../src/components/navigation/menu/menu-item.component.ts","../../src/components/navigation/menu/menu-item.component.html","../../src/components/navigation/menu/menu-separator.component.ts","../../src/components/navigation/menu/menu-separator.component.html","../../src/components/navigation/menu/menu-section.component.ts","../../src/components/navigation/menu/menu-section.component.html","../../src/a11y/scroll-lock.service.ts","../../src/components/navigation/nav-launcher/nav-launcher.tokens.ts","../../src/components/navigation/nav-launcher/nav-tile.component.ts","../../src/components/navigation/nav-launcher/nav-tile.component.html","../../src/components/navigation/nav-launcher/nav-group.component.ts","../../src/components/navigation/nav-launcher/nav-group.component.html","../../src/components/navigation/nav-launcher/nav-wave.ts","../../src/components/navigation/nav-launcher/nav-launcher.component.ts","../../src/components/navigation/nav-launcher/nav-launcher.component.html","../../src/components/content/hero-card/hero-card.component.ts","../../src/components/content/hero-card/hero-card.component.html","../../src/components/content/data-table/data-table-cell.directive.ts","../../src/components/content/data-table/data-table-row-card.directive.ts","../../src/components/content/data-table/data-table-row-detail.directive.ts","../../src/components/content/data-table/data-table-row-note.directive.ts","../../src/components/content/data-table/data-table-keyboard.ts","../../src/dom/fold-at.ts","../../src/components/forms/checkbox/checkbox.component.ts","../../src/components/forms/checkbox/checkbox.component.html","../../src/components/content/data-table/data-table-labels.ts","../../src/components/content/data-table/data-table.component.ts","../../src/components/content/data-table/data-table.component.html","../../src/directives/sticky-column.directive.ts","../../src/components/content/calendar/core/event.directive.ts","../../src/components/content/calendar/core/date.ts","../../src/components/content/calendar/core/time.ts","../../src/components/content/calendar/core/format.ts","../../src/components/content/calendar/core/labels.ts","../../src/components/content/calendar/core/locale.ts","../../src/components/content/calendar/core/chrome.directive.ts","../../src/components/content/calendar/core/keyboard.ts","../../src/components/content/calendar/core/roving-focus.ts","../../src/components/content/calendar/core/cell.ts","../../src/components/content/calendar/core/row-pack.ts","../../src/components/content/calendar/core/span.ts","../../src/components/content/calendar/core/month-grid.ts","../../src/components/content/calendar/core/slots.directive.ts","../../src/components/content/calendar/month/month.component.ts","../../src/components/content/calendar/month/month.component.html","../../src/components/content/calendar/core/filters.ts","../../src/components/content/calendar/core/columns.ts","../../src/components/content/calendar/week/week.component.ts","../../src/components/content/calendar/week/week.component.html","../../src/components/content/calendar/day/day.component.ts","../../src/components/content/calendar/day/day.component.html","../../src/components/content/calendar/list/list.component.ts","../../src/components/content/calendar/list/list.component.html","../../src/components/content/calendar/core/overlap.ts","../../src/components/content/calendar/core/timegrid.ts","../../src/components/content/calendar/timegrid/timegrid.component.ts","../../src/components/content/calendar/timegrid/timegrid.component.html","../../src/components/content/choice-row/choice-row.component.ts","../../src/components/content/choice-row/choice-row.component.html","../../src/directives/repeat-press.directive.ts","../../src/directives/elevated.directive.ts","../../src/directives/scroll-region.directive.ts","../../src/components/forms/input/number-settle.ts","../../src/components/forms/input/number-input.component.ts","../../src/components/forms/input/number-input.component.html","../../src/components/forms/input/textarea.component.ts","../../src/components/forms/input/textarea.component.html","../../src/components/forms/input/date.component.ts","../../src/components/forms/input/date.component.html","../../src/components/forms/input/time.component.ts","../../src/components/forms/input/time.component.html","../../src/components/forms/input/search.component.ts","../../src/components/forms/input/search.component.html","../../src/components/forms/input/select.component.ts","../../src/components/forms/input/select.component.html","../../src/components/forms/listbox/listbox-owner.ts","../../src/components/forms/listbox/option.component.ts","../../src/components/forms/listbox/optgroup.component.ts","../../src/components/forms/listbox/select-option.ts","../../src/components/forms/listbox/listbox-nav.ts","../../src/components/forms/listbox/listbox.component.ts","../../src/components/forms/listbox/listbox.component.html","../../src/components/forms/listbox/multiselect.component.ts","../../src/components/forms/listbox/multiselect.component.html","../../src/components/forms/password/password-rules.ts","../../src/components/forms/password/password-field.component.ts","../../src/components/forms/password/password-field.component.html","../../src/components/forms/view-toggle/view-toggle.component.ts","../../src/components/forms/view-toggle/view-toggle.component.html","../../src/components/forms/fieldset/fieldset.component.ts","../../src/components/forms/fieldset/fieldset.component.html","../../src/components/forms/slider/slider.component.ts","../../src/components/forms/slider/slider.component.html","../../src/components/forms/slider/range-slider.component.ts","../../src/components/forms/slider/range-slider.component.html","../../src/components/feedback/checklist/checklist.component.ts","../../src/components/feedback/checklist/checklist.component.html","../../src/components/feedback/meter/meter.component.ts","../../src/components/feedback/meter/meter.component.html","../../src/components/feedback/callout/callout.component.ts","../../src/components/feedback/callout/callout.component.html","../../src/components/feedback/disclosure/disclosure.component.ts","../../src/components/feedback/disclosure/disclosure.component.html","../../src/components/content/status-badge/status-badge.component.ts","../../src/components/content/status-badge/status-badge.component.html","../../src/components/content/timeline/timeline.component.ts","../../src/components/content/timeline/timeline.component.html","../../src/components/feedback/state/loading-state.component.ts","../../src/components/feedback/state/loading-state.component.html","../../src/components/feedback/state/empty-state.component.ts","../../src/components/feedback/state/empty-state.component.html","../../src/components/layout/aside-layout/aside-layout.component.ts","../../src/components/layout/aside-layout/aside-layout.component.html","../../src/components/layout/breakpoints.ts","../../src/components/layout/nav-layout/nav-layout.context.ts","../../src/components/layout/nav-layout/nav-layout.component.ts","../../src/components/layout/nav-layout/nav-layout.component.html","../../src/components/layout/page-layout/page-layout.component.ts","../../src/components/layout/page-layout/page-layout.component.html","../../src/components/layout/page-section/page-section.component.ts","../../src/components/layout/page-section/page-section.component.html","../../src/components/layout/hero-section/hero-section.component.ts","../../src/components/layout/hero-section/hero-section.component.html","../../src/components/content/paginator/paginator-labels.ts","../../src/components/content/paginator/paginator.component.ts","../../src/components/content/paginator/paginator.component.html","../../src/components/navigation/tab-tooltip.directive.ts","../../src/components/navigation/view-nav/view-nav.component.ts","../../src/components/navigation/view-nav/view-nav.component.html","../../src/components/navigation/breadcrumb/breadcrumb.component.ts","../../src/components/navigation/breadcrumb/breadcrumb.component.html","../../src/components/navigation/back-link/back-link.component.ts","../../src/components/navigation/back-link/back-link.component.html","../../src/components/navigation/tabs/tabs.component.ts","../../src/components/navigation/tabs/tabs.component.html","../../src/components/navigation/tabs/tab-panel.component.ts","../../src/components/feedback/toast/toast.component.ts","../../src/components/feedback/toast/toast.component.html","../../src/components/feedback/toast/toast.config.ts","../../src/components/feedback/toast/toast.service.ts","../../src/components/feedback/toast/toast-container.component.ts","../../src/components/feedback/toast/toast-container.component.html","../../src/components/overlays/panel/panel-component-outlet.directive.ts","../../src/components/overlays/panel/panel-ref.ts","../../src/components/overlays/panel/panel-labels.ts","../../src/components/overlays/panel/panel.types.ts","../../src/components/overlays/panel/panel-header.component.ts","../../src/components/overlays/panel/panel-header.component.html","../../src/components/overlays/panel/panel-defaults.ts","../../src/components/overlays/panel/panel-host.service.ts","../../src/components/overlays/panel/panel-host.component.ts","../../src/components/overlays/panel/panel-host.component.html","../../src/components/overlays/panel/panel-body.component.ts","../../src/components/overlays/panel/panel-footer.component.ts","../../src/components/overlays/panel/panel-toggle.ts","../../src/components/overlays/popover/dropdown-item.component.ts","../../src/components/overlays/popover/dropdown.component.ts","../../src/components/overlays/popover/dropdown.component.html","../../src/components/content/calendar/core/navigation.ts","../../src/components/content/calendar/toolbar/toolbar.component.ts","../../src/components/content/calendar/toolbar/toolbar.component.html","../../src/components/content/calendar/core/agenda.ts","../../src/components/content/calendar/agenda/agenda.component.ts","../../src/components/content/calendar/agenda/agenda.component.html","../../src/components/content/calendar/source-filter/source-filter.component.ts","../../src/components/content/calendar/source-filter/source-filter.component.html","../../src/public-api.ts","../../src/fold-ng.ts"],"sourcesContent":["import { DOCUMENT } from \"@angular/common\";\nimport { Directive, ElementRef, effect, inject, input } from \"@angular/core\";\n\n/**\n * A matched element is only truly focusable if it's rendered — `display:none`\n * and `visibility:hidden` descendants match the selector but can't take focus,\n * and focusing one would drop focus to the body. `offsetParent === null` catches\n * `display:none`; the size check catches a zero-box element still in flow.\n */\nfunction isVisible(el: HTMLElement): boolean {\n if (el.hidden) {\n return false;\n }\n const rects = el.getClientRects();\n return el.offsetParent !== null || rects.length > 0;\n}\n\n/** Elements that can receive keyboard focus, minus explicitly-skipped ones. */\nconst FOCUSABLE_SELECTOR = [\n \"a[href]\",\n \"button:not([disabled])\",\n \"textarea:not([disabled])\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(\",\");\n\n/**\n * Traps keyboard focus inside the host element while enabled — the a11y\n * contract every overlay must honour but which panels historically skipped.\n *\n * On enable it remembers the currently-focused element and moves focus to the\n * first focusable descendant (or the host itself). `Tab`/`Shift+Tab` wrap at\n * the boundaries so focus never escapes to the page behind. On disable or\n * destroy it restores focus to wherever it was before — so closing a panel\n * returns the user to the control that opened it.\n *\n * The host must be focusable as a fallback (`tabindex=\"-1\"`).\n */\n@Directive({\n selector: \"[foldFocusTrap]\",\n host: { \"(keydown)\": \"onKeydown($event)\" },\n})\nexport class FocusTrapDirective {\n /** Bind `[foldFocusTrap]=\"open()\"` — the trap is live only while true. */\n readonly enabled = input(true, { alias: \"foldFocusTrap\" });\n\n private readonly host = inject>(ElementRef);\n private readonly document = inject(DOCUMENT);\n private previouslyFocused: HTMLElement | null = null;\n\n constructor() {\n effect((onCleanup) => {\n if (!this.enabled()) {\n return;\n }\n this.activate();\n onCleanup(() => this.restore());\n });\n }\n\n onKeydown(event: KeyboardEvent): void {\n if (event.key !== \"Tab\" || !this.enabled()) {\n return;\n }\n const focusables = this.focusable();\n if (focusables.length === 0) {\n event.preventDefault();\n this.host.nativeElement.focus();\n return;\n }\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n if (!first || !last) {\n return;\n }\n const active = this.document.activeElement;\n if (event.shiftKey && active === first) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && active === last) {\n event.preventDefault();\n first.focus();\n }\n }\n\n private activate(): void {\n const active = this.document.activeElement;\n this.previouslyFocused = active instanceof HTMLElement ? active : null;\n // `preventScroll`: entering an overlay must never scroll the page behind it.\n // The default focus scroll used to drag the content sideways to reveal a\n // panel still parked off-edge by its enter animation. Only here — a Tab\n // *inside* the overlay should still scroll its target into view, and\n // `restore()` should bring the trigger back into view on close.\n (this.focusable()[0] ?? this.host.nativeElement).focus({\n preventScroll: true,\n });\n }\n\n private restore(): void {\n this.previouslyFocused?.focus();\n this.previouslyFocused = null;\n }\n\n private focusable(): HTMLElement[] {\n const all = Array.from(\n this.host.nativeElement.querySelectorAll(FOCUSABLE_SELECTOR),\n );\n const visible = all.filter(isVisible);\n // A non-rendering environment (SSR / jsdom) reports every element as\n // zero-box; don't over-filter there — fall back to the raw matches.\n return visible.length > 0 ? visible : all;\n }\n}\n","import { Injectable } from \"@angular/core\";\n\n/**\n * Generates unique, SSR-safe element ids.\n *\n * A per-injector counter (`providedIn: 'root'` → one instance per application,\n * and a fresh one per request on the server) so the sequence is deterministic\n * in render order and therefore matches between server and client. That's the\n * point: `crypto.randomUUID()` returns a different value on the server than on\n * the client for the same element, which trips Angular hydration; a counter\n * reset per request does not, and can't collide across requests or grow\n * unbounded.\n *\n * Used by the labelled controls that own their id ({@link FoldInputComponent},\n * `fold-select`) and by {@link FoldFieldIdDirective} for loose native controls.\n */\n@Injectable({ providedIn: \"root\" })\nexport class FoldIdService {\n private counter = 0;\n\n /**\n * The next unique id, e.g. `fold-input-3`.\n * @param prefix a short, human-readable namespace for the id.\n */\n next(prefix = \"fold\"): string {\n this.counter += 1;\n return `${prefix}-${this.counter}`;\n }\n}\n","import { Service } from \"@angular/core\";\n\n/** The class the registry toggles to freeze a region. The `overflow: hidden\n * !important` rule ships in `tokens.css` so a freeze works in production, where\n * only the tokens are imported. A class (not an inline style) is deliberate: it\n * never clobbers a region's own inline `overflow-y` / stylesheet overflow, which\n * reappears verbatim the moment the class is removed. */\nexport const FOLD_SCROLL_FROZEN_CLASS = \"fold-scroll-frozen\";\n\n/**\n * Registry of the live scroll regions in a shell — the shell's own content\n * scroll box and every `[foldScrollRegion]`.\n *\n * It exists so an overlay can freeze **the real scroll containers** at once, not\n * just `document.body`. In a `fold-app-shell` the scroll owner is an inner box\n * (`.content-scroll`), not `body`, so the body scroll-lock alone leaves the page\n * scrollable behind a modal panel. The panel host freezes this registry too, and\n * every registered region — the shell box and each nested `foldScrollRegion` —\n * stops scrolling until the overlay closes.\n *\n * `freeze()`/`unfreeze()` are **reference-counted** (like {@link ScrollLockService}):\n * stacked overlays each freeze once; the regions thaw only when the last unfreezes.\n * Freezing toggles {@link FOLD_SCROLL_FROZEN_CLASS} rather than writing inline\n * `overflow`, so a region's own overflow (inline binding or stylesheet) is never\n * clobbered — it simply returns when the class is removed.\n *\n * SSR-safe: registration only stores an element reference; the class toggles\n * happen in `freeze()`, which an overlay only calls in the browser.\n */\n@Service()\nexport class ScrollRegionRegistry {\n /** The live regions. A `Set` so a double-register is idempotent. */\n private readonly regions = new Set();\n /** How many overlays currently hold the freeze. */\n private freezes = 0;\n\n /** Add a region. If a freeze is already active, the new region joins it. */\n register(element: HTMLElement): void {\n this.regions.add(element);\n if (this.freezes > 0) {\n element.classList.add(FOLD_SCROLL_FROZEN_CLASS);\n }\n }\n\n /** Remove a region (on directive/shell teardown) and thaw it. */\n unregister(element: HTMLElement): void {\n this.regions.delete(element);\n element.classList.remove(FOLD_SCROLL_FROZEN_CLASS);\n }\n\n /** Freeze every region's scroll (idempotent per matching `unfreeze()`). */\n freeze(): void {\n this.freezes += 1;\n if (this.freezes === 1) {\n for (const element of this.regions) {\n element.classList.add(FOLD_SCROLL_FROZEN_CLASS);\n }\n }\n }\n\n /** Release one freeze; thaws the regions only when the last is released. */\n unfreeze(): void {\n if (this.freezes === 0) {\n return;\n }\n this.freezes -= 1;\n if (this.freezes === 0) {\n for (const element of this.regions) {\n element.classList.remove(FOLD_SCROLL_FROZEN_CLASS);\n }\n }\n }\n\n /** True while at least one overlay holds the freeze. */\n get isFrozen(): boolean {\n return this.freezes > 0;\n }\n}\n","import {\n DestroyRef,\n ElementRef,\n type Signal,\n inject,\n signal,\n} from \"@angular/core\";\n\n/**\n * A signal of an element's content-box **width** in px, kept live by a\n * `ResizeObserver`. Call it in an **injection context** (a component/directive\n * constructor or field initialiser); it wires the observer to the current\n * `ElementRef` — or an element you pass — and tears it down on destroy.\n *\n * This is the reusable half of container-responsiveness: the `ResizeObserver`\n * wiring, the SSR guard and the teardown, in one place. Each caller derives\n * whatever breakpoint policy it needs on top — a plain `computed(() => w() <=\n * 768)`, or a hysteretic state machine — instead of re-writing the observer.\n *\n * SSR / no-DOM safe: where `ResizeObserver` is undefined the signal stays at\n * its initial `0`, which every caller reads as \"not yet measured\" — and, for a\n * breakpoint, as the wide/default branch, the SSR-correct first paint. The\n * observer also ignores a `0` reading, so a detached or hidden element keeps\n * its last real width rather than flipping.\n *\n * @param element the element to observe; defaults to the injected host.\n * @returns a read-only signal of the current width in px (`0` until measured).\n */\nexport function observeElementWidth(\n element?: ElementRef | HTMLElement,\n): Signal {\n const host =\n element instanceof ElementRef\n ? element.nativeElement\n : (element ?? inject>(ElementRef).nativeElement);\n const width = signal(0);\n if (typeof ResizeObserver !== \"undefined\") {\n const observer = new ResizeObserver((entries) => {\n const measured = entries[0]?.contentRect.width ?? 0;\n if (measured > 0) {\n width.set(measured);\n }\n });\n observer.observe(host);\n inject(DestroyRef).onDestroy(() => observer.disconnect());\n }\n return width.asReadonly();\n}\n","import { Directive, input } from \"@angular/core\";\n\n/**\n * A named surface — the ground a subtree paints itself on. `page` is the\n * document body; `chrome` is application furniture (rails, header) that a theme\n * may colour differently from the page; `accent` is an **auto-inverting** region\n * filled with the brand accent, whose content re-points to a compatible\n * on-accent palette (see the `[data-surface=\"accent\"]` block in `semantic.css`).\n */\nexport type FoldSurfaceName = \"page\" | \"chrome\" | \"accent\";\n\n/**\n * `[foldSurface]` — declares the element a **named surface**, so a theme can\n * re-colour it without knowing anything about the component it lives in.\n *\n * It exists to let one theme mean two things by \"the same\" role. A uniform\n * theme (umbra, light) needs none of this — `text` is one colour everywhere.\n * But a theme that mixes a **light page with dark chrome** (navi) needs `text`,\n * `surface` and the brand to differ *per region*, which a single set of roles\n * cannot express. The surface is the seam a theme overrides across:\n *\n * ```css\n * [data-theme=\"navi\"] [data-surface=\"chrome\"] {\n * --fold-color-text: var(--fold-ref-slate-50); / * light text on the dark rail * /\n * }\n * ```\n *\n * The directive only stamps `data-surface`; the theme owns the colours. Two\n * rules make it work, both in the token layer, neither in a component:\n * - `[data-surface] { color: var(--fold-color-text); }` — every surface resolves\n * its own text, so a per-surface override actually lands (a custom-property\n * override reaches only properties *resolved inside* the subtree, never a\n * colour already inherited from an ancestor).\n * - a theme adds `[data-theme=\"…\"] [data-surface=\"chrome\"] { … }` for the\n * surfaces it wants to diverge on.\n *\n * This replaces reaching into `fold-app-shell`'s internal class names from the\n * theme file — a coupling that pointed the wrong way (a renamed rail class\n * would have broken a theme silently). Any element can now be a chrome surface:\n * a shell rail, a dark hero on a light page, a footer, a preview pane.\n *\n * @selector `[foldSurface]`\n *\n * @example\n * ```html\n * \n * ```\n */\n@Directive({\n selector: \"[foldSurface]\",\n standalone: true,\n host: { \"[attr.data-surface]\": \"foldSurface()\" },\n})\nexport class FoldSurfaceDirective {\n /** The surface this element is. Defaults to `page`, including a bare\n * `foldSurface` attribute (which the template binds as an empty string). */\n readonly foldSurface = input(\"page\", {\n transform: (value) => (value === \"\" ? \"page\" : value),\n });\n}\n","import { DOCUMENT, NgTemplateOutlet } from \"@angular/common\";\nimport {\n Component,\n DestroyRef,\n ElementRef,\n HostListener,\n afterNextRender,\n computed,\n effect,\n inject,\n input,\n model,\n viewChild,\n} from \"@angular/core\";\nimport { FocusTrapDirective } from \"../../../a11y/focus-trap.directive\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\nimport { ScrollRegionRegistry } from \"../../../a11y/scroll-region-registry.service\";\nimport { observeElementWidth } from \"../../../dom/observe-element-width\";\nimport { FoldSurfaceDirective } from \"../../../directives/surface.directive\";\n\n/** Width (px) at or below which the rails collapse and the primary rail becomes\n * a mobile drawer. Kept in lockstep with the `@media`/`@container` breakpoint\n * in the stylesheet. */\nconst MOBILE_BREAKPOINT = 768;\n\n/**\n * `` — the responsive application skeleton.\n *\n * A pure structural grid with four content slots: it owns the layout and the\n * responsive collapse, the app owns what fills the slots (nav, header, routed\n * content, overlays) and all state/routing. Rail visibility is driven from the\n * projected rail component itself (an empty `railSecondary` self-collapses).\n *\n * Sizing has two ergonomic paths that compose:\n * - **Typed inputs** (`railWidth`, `headerHeight`, `headerHeightMobile`) for the\n * common case — plain px numbers, discoverable and type-checked in the\n * template.\n * - **CSS variables** for the theming case — set `--fold-shell-*` on any ancestor\n * to compose tokens (`var(--w-appMenu)`) or drive it from a media query. An\n * unset input inherits the variable, so the two never fight.\n *\n * ```\n * ┌────────┬──────────────┬─────────────────────┐\n * │ rail │ rail │ header │ ← header row (fixed height)\n * │ primary│ secondary ├─────────────────────┤\n * │ │ │ subheader │ ← optional band (0 when empty)\n * │ │ ├─────────────────────┤\n * │ (auto, │ (auto width, │ content │ ← content row (1fr)\n * │ self- │ self- │ (position: relative │\n * │ sized)│ collapsing) │ anchor for panels) │\n * │ │ ├─────────────────────┤\n * │ │ │ footer │ ← footer row (auto — 0 when empty)\n * └────────┴──────────────┴─────────────────────┘\n * ```\n *\n * At ≤768px it becomes a single header + content + footer column and the rails\n * drop out. How the nav comes back is `mobileNav`:\n * - `\"drawer\"` (default) — the **primary** rail turns into an off-canvas drawer;\n * bind `[(mobileNavOpen)]` and give the app a mobile-only hamburger to slide\n * it in over a scrim (`Escape` / scrim / widening close it). Render the\n * projected rail expanded in the drawer, since the collapsed icon rail is the\n * desktop chrome.\n * - `\"none\"` — no built-in mobile nav; compose an `fold-nav-launcher` (a\n * full-screen tile grid) bound to the same `mobileNavOpen`.\n *\n * ## Slots\n * | Attribute | Region |\n * |------------------|-------------------------------------------|\n * | `railPrimary` | Left rail (intrinsic width — the rail component sizes itself; `railWidth` sets its base via `--fold-shell-rail-width`). At ≤768px it becomes the mobile drawer (see `mobileNavOpen`). |\n * | `railSecondary` | Second rail (intrinsic width; a component that collapses to `0` hides itself). |\n * | `subheader` | The band **under** the header — a nav sub-bar, a filter strip, a context ribbon. Same placement rule as the header (`subheaderLayout`: over the content column, or full width above the rails), and like the footer it is **self-collapsing**: an empty slot claims no row. Rendered as a plain `
`, so the band brings its own semantics (a `
\n\n \n\n\n\n@if (drawerOpen()) {\n
\n}\n\n \n\n\n\n\n \n\n\n\n\n \n \n \n\n\n\n\n
\n
\n @if (footerBehavior() === \"scroll\") {\n \n }\n
\n\n@if (footerBehavior() !== \"scroll\") {\n \n}\n","/**\n * Categorical auto-colour palettes + the seed→index hash.\n *\n * These are **data**, not semantic tokens: qualitative hues to tell entities\n * apart (avatars, org nodes…), theme-invariant, never a role. They live in TS\n * because a hash consumes them — they don't belong in the token CSS.\n *\n * The active palette is chosen once, app-wide, via {@link FoldPaletteRegistry} so a\n * given seed maps to the SAME colour everywhere (recognition). Consumers never\n * touch these arrays directly — they call `registry.colorFor(seed)`.\n */\n\n/**\n * The seed→hash used to pick a palette index. Kept byte-identical to the app's\n * historical avatar/org-member hash so migrating changes no existing colour.\n */\nexport function foldHashSeed(seed: string): number {\n let hash = 0;\n for (let i = 0; i < seed.length; i += 1) {\n hash = seed.charCodeAt(i) + ((hash << 5) - hash);\n }\n return hash;\n}\n\n/** 10 vivid hues — the default. */\nconst VIVID = [\n \"#63b3ed\",\n \"#68d391\",\n \"#f6ad55\",\n \"#fc8181\",\n \"#b794f4\",\n \"#76e4f7\",\n \"#fbb6ce\",\n \"#f6e05e\",\n \"#4fd1c5\",\n \"#a3bffa\",\n] as const;\n\n/** 10 more, appended after VIVID to form the 20-colour `extended` palette. */\nconst VIVID_EXTRA = [\n \"#f687b3\",\n \"#9ae6b4\",\n \"#fbd38d\",\n \"#feb2b2\",\n \"#d6bcfa\",\n \"#81e6d9\",\n \"#e9d8fd\",\n \"#fefcbf\",\n \"#bee3f8\",\n \"#c6f6d5\",\n] as const;\n\n/** 10 soft, low-saturation hues (same hue order as VIVID). */\nconst PASTEL = [\n \"#a8d8ea\",\n \"#b5ead7\",\n \"#ffdac1\",\n \"#ffb7b2\",\n \"#c7b6e8\",\n \"#b2ebf2\",\n \"#ffc8dd\",\n \"#fdf6a8\",\n \"#a0e7e5\",\n \"#c5cae9\",\n] as const;\n\n/**\n * The curated named palettes. Add an entry → it becomes a usable, typed\n * {@link FoldAutoPaletteName} everywhere. `extended` deliberately starts with the\n * full `vivid` set so switching between them never recolours the first 10.\n */\nexport const FOLD_AUTO_PALETTES = {\n vivid: VIVID,\n extended: [...VIVID, ...VIVID_EXTRA],\n pastel: PASTEL,\n} as const satisfies Record;\n\n/** A built-in palette name. */\nexport type FoldAutoPaletteName = keyof typeof FOLD_AUTO_PALETTES;\n\n/** A palette to apply: a built-in name, or a consumer's own colour list. */\nexport type FoldPaletteInput = FoldAutoPaletteName | readonly string[];\n\n/** Resolve a name or a raw list to a colour array (empty lists fall back to vivid). */\nexport function foldResolvePalette(input: FoldPaletteInput): readonly string[] {\n const palette = typeof input === \"string\" ? FOLD_AUTO_PALETTES[input] : input;\n return palette.length > 0 ? palette : FOLD_AUTO_PALETTES.vivid;\n}\n","import {\n InjectionToken,\n type Provider,\n Service,\n inject,\n signal,\n} from \"@angular/core\";\nimport {\n foldHashSeed,\n foldResolvePalette,\n type FoldPaletteInput,\n} from \"./palettes\";\n\n/** Bootstrap default for {@link FoldPaletteRegistry} — set via {@link provideFoldPalette}. */\nexport const FOLD_PALETTE_DEFAULT = new InjectionToken(\n \"fold.palette.default\",\n);\n\n/**\n * Configure the app-wide auto-colour palette at bootstrap (idiomatic, like\n * `provideRouter`). Accepts a built-in name OR a consumer's own colour list.\n *\n * ```ts\n * // app.config.ts\n * providers: [provideFoldPalette(\"pastel\")] // a built-in\n * providers: [provideFoldPalette(MY_BRAND_COLORS)] // your own list\n * ```\n */\nexport function provideFoldPalette(palette: FoldPaletteInput): Provider {\n return { provide: FOLD_PALETTE_DEFAULT, useValue: palette };\n}\n\n/**\n * The single source of truth for auto-colouring. Root singleton: every consumer\n * reads the SAME active palette, so a given seed (name/id) maps to the same\n * colour everywhere — that is the whole point (recognition). Switch the palette\n * app-wide with {@link use}; each `colorFor` reader recolours reactively.\n */\n@Service()\nexport class FoldPaletteRegistry {\n private readonly _current = signal(\n foldResolvePalette(\n inject(FOLD_PALETTE_DEFAULT, { optional: true }) ?? \"vivid\",\n ),\n );\n\n /** The active palette. Reading this in a reactive context tracks switches. */\n readonly current = this._current.asReadonly();\n\n /**\n * Switch the whole app's palette — a built-in name or a custom colour list.\n * Every `colorFor` reader updates in the same frame.\n */\n use(palette: FoldPaletteInput): void {\n this._current.set(foldResolvePalette(palette));\n }\n\n /** Deterministic colour for a seed, from the active palette. Reactive. */\n colorFor(seed: string): string {\n const palette = this._current();\n const idx = Math.abs(foldHashSeed(seed)) % palette.length;\n // `_current` always holds a non-empty palette (foldResolvePalette falls back\n // to `vivid`), so the modulo index resolves; the fallbacks are for the type.\n return palette[idx] ?? palette[0] ?? \"transparent\";\n }\n}\n","/**\n * Small WCAG colour-contrast helpers — used to pick a legible ink for text on a\n * categorical fill (avatar initials), and lockable by a contrast test.\n *\n * These operate on plain hex strings (`#rgb` / `#rrggbb`); a categorical palette\n * is qualitative *data* (hex is allowed there — rule 5.3), so contrast can't be\n * a token concern and lives here.\n */\n\n/** Parse `#rgb` / `#rrggbb` to `[r, g, b]` (0–255), or `null` if not a hex. */\nfunction parseHex(hex: string): [number, number, number] | null {\n const h = hex.trim().replace(/^#/, \"\");\n const full =\n h.length === 3\n ? h\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")\n : h;\n if (!/^[0-9a-fA-F]{6}$/.test(full)) {\n return null;\n }\n return [\n parseInt(full.slice(0, 2), 16),\n parseInt(full.slice(2, 4), 16),\n parseInt(full.slice(4, 6), 16),\n ];\n}\n\n/** WCAG relative luminance of a hex colour, or `null` if it isn't a hex. */\nexport function foldLuminance(hex: string): number | null {\n const rgb = parseHex(hex);\n if (!rgb) {\n return null;\n }\n const lin = (c: number): number => {\n const s = c / 255;\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n };\n return 0.2126 * lin(rgb[0]) + 0.7152 * lin(rgb[1]) + 0.0722 * lin(rgb[2]);\n}\n\n/** WCAG contrast ratio between two hex colours (1–21), or `null` if either\n * isn't a hex. */\nexport function foldContrast(a: string, b: string): number | null {\n const la = foldLuminance(a);\n const lb = foldLuminance(b);\n if (la === null || lb === null) {\n return null;\n }\n const [hi, lo] = la >= lb ? [la, lb] : [lb, la];\n return (hi + 0.05) / (lo + 0.05);\n}\n\n/**\n * The **more legible** of two inks for text drawn on `fill` — whichever has the\n * higher WCAG contrast. Picking the max (rather than thresholding luminance)\n * guarantees the best of the pair for *any* fill: at the black/white crossover\n * both inks already clear ~4.5:1, so every fill lands at or above it. A non-hex\n * `fill` falls back to `dark`.\n */\nexport function foldReadableInk(\n fill: string,\n dark: string,\n light: string,\n): string {\n const withDark = foldContrast(fill, dark);\n const withLight = foldContrast(fill, light);\n if (withDark === null || withLight === null) {\n return dark;\n }\n return withDark >= withLight ? dark : light;\n}\n","import {\n booleanAttribute,\n Component,\n computed,\n inject,\n input,\n linkedSignal,\n} from \"@angular/core\";\nimport { FoldPaletteRegistry } from \"../../../color/palette-registry.service\";\nimport { foldReadableInk } from \"../../../color/contrast\";\n\n/** Ink for text on a light vs dark categorical fill. */\nconst DARK_INK = \"#1a202c\";\nconst LIGHT_INK = \"#ffffff\";\n\n/** Fill style — `ghost` dashes the outline (guests). */\nexport type FoldAvatarVariant = \"solid\" | \"ghost\";\n/** Status-ring colour — reuses the `fold-badge` status vocabulary. */\nexport type FoldAvatarRing =\n \"none\" | \"accent\" | \"info\" | \"warning\" | \"alert\" | \"success\";\n/** Status-ring line style — `dotted` reads as scheduled / tentative. */\nexport type FoldAvatarRingStyle = \"solid\" | \"dotted\";\n\n/**\n * `` — a user/entity avatar with initials or an image.\n *\n * With `imageUrl` it shows the image; otherwise it shows initials on a\n * deterministic background colour taken from the app-wide {@link FoldPaletteRegistry}\n * (so the same seed is the same colour everywhere, and one `registry.use(...)`\n * recolours every avatar).\n *\n * A broken `imageUrl` falls back to the initials rather than the browser's\n * broken-image glyph (and retries when the URL changes).\n *\n * Three orthogonal state axes compose: `variant` (fill), `muted` (presence —\n * dim for an absence/inactive person), and `ring` + `ringStyle` (a status\n * outline). The component stays domain-agnostic: a screen maps its own states\n * (e.g. absent → `[muted]`, a scheduled arrival → `ring=\"accent\"`\n * `ringStyle=\"dotted\"`), the avatar just draws the primitives. The ring is a\n * redundant emphasis cue — never the sole carrier of a state — because on a\n * light page a soft status hue (amber/green) can't clear WCAG 3:1 as a thin\n * line (status-ring-contrast.spec.ts).\n *\n * ## Inputs\n *\n * | Input | Type | Default | Description |\n * |-------------|------------------------|-----------|-------------------------------------------------|\n * | `name` | `string` (required) | — | Full name — initials are derived automatically. |\n * | `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | Avatar size (20px / 32px / 44px). |\n * | `colorSeed` | `string` | `name` | String used to pick the deterministic colour. |\n * | `variant` | `'solid' \\| 'ghost'` | `'solid'` | `'ghost'` renders a dashed border (for guests). |\n * | `square` | `boolean` | `false` | Square shape with a small radius (for orgs). |\n * | `imageUrl` | `string` | — | Image/logo URL. Replaces initials when set; falls back to initials if it fails to load. |\n * | `muted` | `boolean` | `false` | Dim the avatar (same hue, less intense) — absence / inactive. |\n * | `ring` | `FoldAvatarRing` | `'none'` | A status outline (`accent`/`info`/`warning`/`alert`/`success`). |\n * | `ringStyle` | `'solid' \\| 'dotted'` | `'solid'` | Ring line style — `dotted` for scheduled/tentative states. |\n *\n * @selector `fold-avatar`\n *\n * @example\n * ```html\n * \n * \n * \n * ```\n */\n@Component({\n selector: \"fold-avatar\",\n standalone: true,\n templateUrl: \"./avatar.component.html\",\n styleUrl: \"./avatar.component.scss\",\n})\nexport class FoldAvatarComponent {\n private readonly palette = inject(FoldPaletteRegistry);\n\n readonly name = input.required();\n readonly size = input<\"sm\" | \"md\" | \"lg\">(\"md\");\n readonly colorSeed = input(undefined);\n readonly variant = input(\"solid\");\n readonly square = input(false, { transform: booleanAttribute });\n readonly imageUrl = input(undefined);\n /** Dim the avatar (same hue, less intense) — for an absent / inactive person. */\n readonly muted = input(false, { transform: booleanAttribute });\n /** A status outline; `'none'` draws nothing. */\n readonly ring = input(\"none\");\n /** Ring line style — `'dotted'` for scheduled / tentative states. */\n readonly ringStyle = input(\"solid\");\n\n /** True once the `` fails to load. Resets whenever `imageUrl` changes,\n * so a corrected URL is retried rather than staying on the fallback. */\n protected readonly imageFailed = linkedSignal(() => {\n this.imageUrl();\n return false;\n });\n /** Show the image only when a URL is set AND it has not failed — a broken URL\n * falls back to the initials instead of the browser's broken-image glyph. */\n protected readonly showImage = computed(\n () => Boolean(this.imageUrl()) && !this.imageFailed(),\n );\n\n /** Readable ink for the initials — the higher-contrast of dark/light ink on\n * the fill, so a custom palette stays legible. */\n protected readonly onColor = computed(() =>\n foldReadableInk(this.color(), DARK_INK, LIGHT_INK),\n );\n\n readonly initials = computed(() => {\n const n = this.name().trim();\n if (!n) {\n return \"?\";\n }\n const [first = \"\", second = \"\"] = n.split(/\\s+/);\n if (second) {\n return (first.charAt(0) + second.charAt(0)).toUpperCase();\n }\n return n.substring(0, 2).toUpperCase();\n });\n\n /** Deterministic fill from the active palette (via the shared registry). */\n readonly color = computed(() =>\n this.palette.colorFor(this.colorSeed() ?? this.name()),\n );\n}\n","@if (showImage()) {\n \n \n \n} @else {\n \n {{ initials() }}\n \n}\n","import { booleanAttribute, Component, computed, input } from \"@angular/core\";\nimport {\n FoldAvatarComponent,\n type FoldAvatarRing,\n type FoldAvatarRingStyle,\n} from \"../../content/avatar/avatar.component\";\n\n/**\n * `` — an avatar next to one or two lines of text: the\n * canonical \"identity cell\". A bold `primary` line and an optional faded\n * `secondary` line (name + email, entity + subtitle, …). One line centres\n * against the avatar; two lines stack and centre as a block.\n *\n * The avatar's initials/colour derive from `avatarName` when set, else from\n * `primary` — so the common \"same text\" case needs no extra input.\n *\n * ## Inputs\n *\n * | Input | Type | Default | Description |\n * |--------------|------------------------|-----------|----------------------------------------------|\n * | `primary` | `string` (required) | — | Bold first line; default avatar name. |\n * | `secondary` | `string` | `''` | Faded second line; empty → single line. |\n * | `avatarName` | `string` | `primary` | Overrides the name used for initials/colour. |\n * | `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | Avatar size. |\n * | `variant` | `'solid' \\| 'ghost'` | `'solid'` | `'ghost'` dashes the avatar (guests). |\n * | `square` | `boolean` | `false` | Square avatar (orgs). |\n * | `imageUrl` | `string` | — | Avatar image; replaces initials when set. |\n * | `muted` | `boolean` | `false` | Dim the avatar (absence / inactive). |\n * | `ring` | `FoldAvatarRing` | `'none'` | Status outline on the avatar. |\n * | `ringStyle` | `'solid' \\| 'dotted'` | `'solid'` | Ring line style (`dotted` = scheduled). |\n *\n * @selector `fold-avatar-detail`\n *\n * @example\n * ```html\n * \n * \n * ```\n */\n@Component({\n selector: \"fold-avatar-detail\",\n standalone: true,\n imports: [FoldAvatarComponent],\n templateUrl: \"./avatar-detail.component.html\",\n styleUrl: \"./avatar-detail.component.scss\",\n})\nexport class FoldAvatarDetailComponent {\n readonly primary = input.required();\n readonly secondary = input(\"\");\n readonly avatarName = input(\"\");\n readonly size = input<\"sm\" | \"md\" | \"lg\">(\"md\");\n readonly variant = input<\"solid\" | \"ghost\">(\"solid\");\n readonly square = input(false, { transform: booleanAttribute });\n readonly imageUrl = input(undefined);\n /** Dim the avatar — absence / inactive (forwarded to `fold-avatar`). */\n readonly muted = input(false, { transform: booleanAttribute });\n /** Status outline colour (forwarded to `fold-avatar`). */\n readonly ring = input(\"none\");\n /** Ring line style (forwarded to `fold-avatar`). */\n readonly ringStyle = input(\"solid\");\n\n /** Falls back to the primary line when no explicit avatar name is given. */\n readonly resolvedAvatarName = computed(\n () => this.avatarName().trim() || this.primary(),\n );\n\n readonly hasSecondary = computed(() => this.secondary().trim().length > 0);\n}\n","\n\n {{ primary() }}\n @if (hasSecondary()) {\n {{ secondary() }}\n }\n\n","import {\n booleanAttribute,\n Component,\n computed,\n input,\n numberAttribute,\n} from \"@angular/core\";\nimport {\n FoldAvatarComponent,\n type FoldAvatarVariant,\n type FoldAvatarRing,\n type FoldAvatarRingStyle,\n} from \"../../content/avatar/avatar.component\";\n\n/** One face in an {@link FoldAvatarListComponent} — the minimum an avatar needs,\n * plus optional per-face identity/state. `variant` lives here (not on the list)\n * because a single member can be a guest among members. */\nexport interface FoldAvatarListItem {\n /** Full name — initials + deterministic colour derive from it. */\n readonly name: string;\n /** Image/logo URL. Replaces the initials when set. */\n readonly imageUrl?: string;\n /** Overrides the string used to pick the deterministic colour (else `name`). */\n readonly colorSeed?: string;\n /** Fill style — `ghost` for a guest among members. */\n readonly variant?: FoldAvatarVariant;\n /** Dim this face — absence / inactive. */\n readonly muted?: boolean;\n /** A status outline on this face. */\n readonly ring?: FoldAvatarRing;\n /** Ring line style for this face (`dotted` = scheduled / tentative). */\n readonly ringStyle?: FoldAvatarRingStyle;\n}\n\n/**\n * `` — a row of slightly-overlapping avatars (the org-chart\n * \"who sits on this node\" cluster). Past `limit`, the remainder collapses into a\n * trailing `+N` chip (N = total − shown).\n *\n * Each face wears a ring in the surface colour so the overlap reads cleanly;\n * override `--fold-avatar-list-ring` when the list sits on a non-card surface.\n *\n * ## Inputs\n *\n * | Input | Type | Default | Description |\n * |-----------|-------------------------|-----------|----------------------------------------------------------|\n * | `avatars` | `FoldAvatarListItem[]` (required) | — | The faces, in order. |\n * | `limit` | `number` | `0` | Max faces on the line (`0` = all). Extra → a `+N` chip. |\n * | `top` | `'first' \\| 'last'` | `'first'` | Which end stacks on top — the overlap direction. |\n * | `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | Avatar size (shared by every face + the chip). |\n * | `square` | `boolean` | `false` | Square faces (orgs) — uniform across the cluster. |\n *\n * Per-face traits (`variant`/`muted`/`ring`/`ringStyle`) live on each\n * `FoldAvatarListItem`, since they vary member-by-member (a guest among members,\n * one person absent, another arriving).\n *\n * @selector `fold-avatar-list`\n *\n * @example\n * ```html\n * \n * ```\n */\n@Component({\n selector: \"fold-avatar-list\",\n standalone: true,\n imports: [FoldAvatarComponent],\n host: {\n \"[class.size-sm]\": \"size() === 'sm'\",\n \"[class.size-md]\": \"size() === 'md'\",\n \"[class.size-lg]\": \"size() === 'lg'\",\n \"[class.is-square]\": \"square()\",\n },\n templateUrl: \"./avatar-list.component.html\",\n styleUrl: \"./avatar-list.component.scss\",\n})\nexport class FoldAvatarListComponent {\n readonly avatars = input.required();\n /** Max faces shown; `0` shows them all. Past it, a `+N` chip closes the row. */\n readonly limit = input(0, { transform: numberAttribute });\n /** `'first'` = the leading face sits on top; `'last'` = the trailing one does. */\n readonly top = input<\"first\" | \"last\">(\"first\");\n readonly size = input<\"sm\" | \"md\" | \"lg\">(\"md\");\n readonly square = input(false, { transform: booleanAttribute });\n\n /** The faces actually rendered (capped at `limit` when it bites). */\n readonly visible = computed(() => {\n const limit = this.limit();\n const all = this.avatars();\n return limit > 0 && all.length > limit ? all.slice(0, limit) : all;\n });\n\n /** How many faces the `+N` chip stands in for (`0` → no chip). */\n readonly overflow = computed(\n () => this.avatars().length - this.visible().length,\n );\n\n /** Paint order: the \"top\" end gets the highest z-index. */\n protected z(index: number): number {\n const count = this.visible().length;\n return this.top() === \"first\" ? count - index : index + 1;\n }\n}\n","@for (a of visible(); track $index) {\n \n \n \n}\n@if (overflow() > 0) {\n +{{ overflow() }}\n}\n","import { Component, input } from \"@angular/core\";\n\n/**\n * Semantic colour variants for {@link FoldBadgeComponent}, mapped to design\n * tokens. Shared so other components (e.g. `fold-menu-item`'s badge) can tint a\n * badge from the same vocabulary.\n * - `accent` — teal, general purpose\n * - `info` — purple, informative / categorical\n * - `warning` — amber, attention needed\n * - `alert` — red, critical / error\n * - `success` — green, positive / complete\n */\nexport type FoldBadgeVariant =\n \"neutral\" | \"accent\" | \"info\" | \"warning\" | \"alert\" | \"success\";\n\n/**\n * Badge / tag for labels, statuses, and categories.\n *\n * @selector `fold-badge`\n *\n * @example\n * ```html\n * \n * \n * \n * ```\n */\n@Component({\n selector: \"fold-badge\",\n standalone: true,\n templateUrl: \"./badge.component.html\",\n // Inline so the component is fully self-contained — no external asset to\n // resolve or ship. Colours/sizes come entirely from fold-ng tokens.\n styleUrl: \"./badge.component.scss\",\n host: {\n \"[class]\": 'variant() + \" \" + radius()',\n },\n})\nexport class FoldBadgeComponent {\n /** Text displayed inside the badge. */\n readonly content = input.required();\n\n /**\n * Border-radius preset.\n * - `pill` — fully rounded (default)\n * - `square` — small radius (like genre tags)\n */\n readonly radius = input<\"pill\" | \"square\">(\"pill\");\n\n /**\n * Semantic colour variant, mapped to design tokens.\n * - `neutral` — dim + unsaturated, for counts and non-semantic tags\n * - `accent` (default) — teal, general purpose\n * - `info` — purple, informative / categorical\n * - `warning` — amber, attention needed\n * - `alert` — red, critical / error\n * - `success` — green, positive / complete\n */\n readonly variant = input(\"accent\");\n}\n","{{ content() }}\n","// The UI icon set — inlined SVG (no .svg text-loader dependency) so the\n// package ships self-contained. Single-colour SVGs using `currentColor`, so\n// each icon inherits `color` from its host. Hand-maintained; keys are kebab-case.\nexport const UI_ICONS = {\n \"add-doc\":\n '',\n archive:\n '',\n \"arrow-back\":\n '',\n \"arrow-right\":\n '',\n bin: '',\n calendar:\n '',\n chat: '',\n \"check-circle\":\n '',\n check:\n '',\n \"chevron-down\":\n '',\n \"chevron-left\":\n '',\n \"chevron-right\":\n '',\n \"chevron-up\":\n '',\n close:\n '',\n code: '',\n \"collapse-all\":\n '',\n copy: '',\n door: '',\n download:\n '',\n edit: '',\n \"expand-all\":\n '',\n \"eye-off\":\n '',\n eye: '',\n \"file-add\":\n '',\n filter:\n '',\n \"folder-open\":\n '',\n folder:\n '',\n globe:\n '',\n grid: '',\n list: '',\n inbox:\n '',\n lock: '',\n hash: '',\n phone:\n '',\n mail: '',\n menu: '',\n \"more-vertical\":\n '',\n palette:\n '',\n \"playlist-add\":\n '',\n plus: '',\n minus:\n '',\n redo: '',\n reload:\n '',\n reset:\n '',\n save: '',\n search:\n '',\n sliders:\n '',\n undo: '',\n ungroup:\n '',\n upload:\n '',\n view: '',\n wrench:\n '',\n} as const;\n","// The Navigation icon set — inlined SVG (no .svg text-loader dependency) so the\n// package ships self-contained. Single-colour SVGs using `currentColor`, so\n// each icon inherits `color` from its host. Hand-maintained; keys are kebab-case.\nexport const NAV_ICONS = {\n absence:\n '',\n bell: '',\n company:\n '',\n contracts:\n '',\n help: '',\n home: '',\n login:\n '',\n logout:\n '',\n music:\n '',\n \"org-chart\":\n '',\n planning:\n '',\n program:\n '',\n settings:\n '',\n show: '',\n stats:\n '',\n \"theme-dark\":\n '',\n \"theme-light\":\n '',\n timeline:\n '',\n library:\n '',\n} as const;\n","// The commerce / e-commerce icon set — cart, catalogue, payment, fulfilment.\n// Inlined SVG (no .svg text-loader dependency) so the package ships\n// self-contained. Single-colour stroke SVGs using `currentColor`, so each icon\n// inherits `color` from its host. Hand-maintained; keys are kebab-case and unique\n// across categories. Feather/Lucide geometry (24×24, stroke-width 2, round joins).\nconst S =\n '';\n\nexport const COMMERCE_ICONS = {\n // ── Cart & checkout ─────────────────────────────────────────────\n \"shopping-cart\": `${S}`,\n \"shopping-bag\": `${S}`,\n basket: `${S}`,\n\n // ── Catalogue & products ────────────────────────────────────────\n package: `${S}`,\n \"package-check\": `${S}`,\n tag: `${S}`,\n tags: `${S}`,\n barcode: `${S}`,\n \"qr-code\": `${S}`,\n gift: `${S}`,\n\n // ── Payment & billing ───────────────────────────────────────────\n \"credit-card\": `${S}`,\n wallet: `${S}`,\n receipt: `${S}`,\n coins: `${S}`,\n banknote: `${S}`,\n percent: `${S}`,\n\n // ── Fulfilment & delivery ───────────────────────────────────────\n truck: `${S}`,\n store: `${S}`,\n warehouse: `${S}`,\n \"map-pin\": `${S}`,\n \"package-return\": `${S}`,\n} as const;\n","// The Music / transport icon set — inlined SVG (no .svg text-loader dependency) so the\n// package ships self-contained. Single-colour SVGs using `currentColor`, so\n// each icon inherits `color` from its host. Hand-maintained; keys are kebab-case.\nexport const MUSIC_ICONS = {\n \"fast-forward\":\n '',\n fire: '',\n \"heart-border\":\n '',\n heart:\n '',\n metronome:\n '',\n microphone:\n '',\n \"music-file\":\n '',\n \"music-note\":\n '',\n mute: '',\n \"next-track\":\n '',\n pause:\n '',\n \"play-circle\":\n '',\n play: '',\n \"prev-track\":\n '',\n repeat:\n '',\n rewind:\n '',\n volume:\n '',\n waveform:\n '',\n} as const;\n","// The Status icon set — inlined SVG (no .svg text-loader dependency) so the\n// package ships self-contained. Single-colour SVGs using `currentColor`, so\n// each icon inherits `color` from its host. Hand-maintained; keys are kebab-case.\nexport const STATUS_ICONS = {\n alert:\n '',\n award:\n '',\n clock:\n '',\n completed:\n '',\n diamond:\n '',\n info: '',\n lightning:\n '',\n \"offline-bolt\":\n '',\n shield:\n '',\n warning:\n '',\n \"x-circle\":\n '',\n star: '',\n} as const;\n","// The People icon set — inlined SVG (no .svg text-loader dependency) so the\n// package ships self-contained. Single-colour SVGs using `currentColor`, so\n// each icon inherits `color` from its host. Hand-maintained; keys are kebab-case.\nexport const PEOPLE_ICONS = {\n briefcase:\n '',\n \"give-rights\":\n '',\n \"graduation-cap\":\n '',\n \"group-lead\":\n '',\n king: '',\n leader:\n '',\n referral:\n '',\n user: '',\n team: '',\n work: '',\n} as const;\n","// The Brand icon set — inlined SVG (no .svg text-loader dependency) so the\n// package ships self-contained. Single-colour SVGs using `currentColor`, so\n// each icon inherits `color` from its host. Hand-maintained; keys are kebab-case.\nexport const BRANDS_ICONS = {\n discord:\n '',\n slack:\n '',\n teams:\n '',\n telegram:\n '',\n whatsapp:\n '',\n github:\n '',\n linkedin:\n '',\n fold: '',\n paypal:\n '',\n x: '',\n} as const;\n","import { UI_ICONS } from \"./icons/ui.icons\";\nimport { NAV_ICONS } from \"./icons/nav.icons\";\nimport { COMMERCE_ICONS } from \"./icons/commerce.icons\";\nimport { MUSIC_ICONS } from \"./icons/music.icons\";\nimport { STATUS_ICONS } from \"./icons/status.icons\";\nimport { PEOPLE_ICONS } from \"./icons/people.icons\";\nimport { BRANDS_ICONS } from \"./icons/brands.icons\";\n\n/**\n * The package's built-in icon set — the shared, reusable catalogue. Keys are\n * **kebab-case** and unique across categories; values are single-colour SVG\n * markup using `currentColor`, so an icon inherits `color` from its host.\n *\n * The SVGs are inlined (not `.svg` file imports) so the package is fully\n * self-contained — no build-tool loader config leaks to a consumer.\n *\n * A consumer extends this set at runtime — never by editing this file — through\n * {@link FoldIconRegistry} (`provideFoldIcons()` at bootstrap, or `register()` later).\n */\nexport const FOLD_BUILTIN_ICONS = {\n ...UI_ICONS,\n ...NAV_ICONS,\n ...COMMERCE_ICONS,\n ...MUSIC_ICONS,\n ...STATUS_ICONS,\n ...PEOPLE_ICONS,\n ...BRANDS_ICONS,\n} as const;\n\n/**\n * The built-in catalogue grouped by category, in display order — the single\n * source of truth for tooling that browses icons by theme (e.g. the\n * `fold-icon-devtool`). Each source file owns its slice; this list only names\n * and orders them. Host-registered icons are *not* here — they carry no\n * built-in category, so tooling buckets them separately.\n */\nexport const FOLD_BUILTIN_ICON_CATEGORIES = [\n { id: \"ui\", label: \"UI\", names: namesOf(UI_ICONS) },\n { id: \"nav\", label: \"Navigation\", names: namesOf(NAV_ICONS) },\n { id: \"commerce\", label: \"Commerce\", names: namesOf(COMMERCE_ICONS) },\n { id: \"music\", label: \"Music\", names: namesOf(MUSIC_ICONS) },\n { id: \"status\", label: \"Status\", names: namesOf(STATUS_ICONS) },\n { id: \"people\", label: \"People\", names: namesOf(PEOPLE_ICONS) },\n { id: \"brands\", label: \"Brands\", names: namesOf(BRANDS_ICONS) },\n] as const;\n\n/**\n * The keys of an icon slice, keeping their literal type. `Object.keys` only ever\n * promises `string`, so the narrowing goes through a **checked predicate** — no\n * assertion (rule 2.1), and every name kept is genuinely a key of the object.\n */\nfunction namesOf(icons: T): (keyof T & string)[] {\n const known = (name: string): name is keyof T & string => name in icons;\n return Object.keys(icons).filter(known);\n}\n\n/** A built-in icon category id (`\"ui\"`, `\"commerce\"`, …). */\nexport type FoldIconCategoryId =\n (typeof FOLD_BUILTIN_ICON_CATEGORIES)[number][\"id\"];\n\n/** Every built-in icon name — derived from the registry keys (autocompletes). */\nexport type FoldBuiltinIconName = keyof typeof FOLD_BUILTIN_ICONS;\n\n/**\n * The names a consumer has added on top of the built-in set — **empty here, and\n * meant to be augmented**. Declare your app's icons once, derived from the very\n * object you register, so the two can never drift:\n *\n * ```ts\n * export const APP_ICONS = { \"my-logo\": \"\" } as const;\n *\n * declare module \"fold-ng\" {\n * interface FoldCustomIcons extends Record {}\n * }\n *\n * // app.config.ts\n * providers: [provideFoldIcons(APP_ICONS)];\n * ```\n *\n * **Overriding a built-in needs no declaration.** `bin` is already a known name,\n * so re-registering it with your own art type-checks as it stands — the registry\n * merges consumer entries over the built-ins.\n */\nexport interface FoldCustomIcons {}\n\n/**\n * The `name` a `fold-icon` accepts: a built-in, or one the consumer declared via\n * {@link FoldCustomIcons}.\n *\n * This used to be `FoldBuiltinIconName | (string & {})` — autocomplete for the\n * built-ins, but any string admitted. A typo (`\"trahs\"`) and a name that simply\n * doesn't exist (`\"alert\"`, before it did) both compiled, and surfaced only as a\n * `console.warn` and a hole where the glyph should be. Six such holes were live\n * across three apps when this was tightened.\n */\nexport type FoldIconName = FoldBuiltinIconName | keyof FoldCustomIcons;\n","import type { FoldIconSet } from \"./icon-registry.service\";\n\n/**\n * The trust contract for icon markup.\n *\n * A registered icon's markup is injected into the shared sprite **unsanitised**\n * (`insertAdjacentHTML` of the authored ``, so its `stroke` / `fill` /\n * `viewBox` survive intact). That trust is only sound for **static, authored**\n * markup: never register a string derived from user input.\n *\n * This guard is the backstop, not the sanitiser it cannot be. It rejects the\n * two shapes that have no place in a static icon — a non-`` root, and\n * `` during\n * render and serialised into the HTML, so `` resolves on first paint (no\n * icon flash before hydration). On the client the service adopts that existing\n * sprite instead of creating a second one, and seeds its added-set from the\n * symbols already present — so hydration never double-adds.\n */\n@Service()\nexport class FoldIconSprite {\n private readonly document = inject(DOCUMENT);\n private readonly added = new Set();\n private sprite: Element | null = null;\n\n /** Ensure `name`'s symbol is in the sprite; idempotent. `markup` is the raw,\n * trust-guarded SVG string from the registry. */\n ensure(name: string, markup: string): void {\n const id = foldIconSymbolId(name);\n if (this.added.has(id)) {\n return;\n }\n const sprite = this.resolveSprite();\n if (!sprite) {\n return; // no document body (non-DOM host) — instance renders nothing\n }\n // resolveSprite may have just seeded `added` from an SSR-serialised sprite.\n if (this.added.has(id)) {\n return;\n }\n sprite.insertAdjacentHTML(\"beforeend\", foldIconToSymbol(name, markup));\n this.added.add(id);\n }\n\n /** The mounted sprite, creating it (or adopting the SSR one) on first use. */\n private resolveSprite(): Element | null {\n if (this.sprite) {\n return this.sprite;\n }\n const body = this.document.body;\n if (!body) {\n return null;\n }\n const existing = this.document.getElementById(FOLD_ICON_SPRITE_ID);\n if (existing) {\n existing\n .querySelectorAll(\"symbol[id]\")\n .forEach((symbol) => this.added.add(symbol.id));\n this.sprite = existing;\n return existing;\n }\n const svg = this.document.createElementNS(SVG_NS, \"svg\");\n svg.setAttribute(\"id\", FOLD_ICON_SPRITE_ID);\n svg.setAttribute(\"aria-hidden\", \"true\");\n svg.setAttribute(\n \"style\",\n \"position:absolute;width:0;height:0;overflow:hidden\",\n );\n body.appendChild(svg);\n this.sprite = svg;\n return svg;\n }\n}\n","import { Component, computed, effect, inject, input } from \"@angular/core\";\nimport { FoldIconRegistry } from \"./icon-registry.service\";\nimport { FoldIconSprite } from \"./icon-sprite.service\";\nimport { foldIconSymbolId } from \"./icon-sprite\";\nimport type { FoldIconName } from \"./builtin-icons\";\n\n/** Size presets map to an icon-size token; a number is interpreted as pixels. */\nexport type FoldIconSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n\n/** Semantic tint. Unset = inherit the context's `currentColor` (the default —\n * an icon matches whatever it sits in); set it to override with a role colour. */\nexport type FoldIconTone = \"primary\" | \"secondary\" | \"muted\" | \"faded\";\n\n/** Tone → the semantic text/role colour token it paints with. */\nconst TONE_COLOR: Record = {\n primary: \"var(--fold-color-primary-text)\",\n secondary: \"var(--fold-color-text-secondary)\",\n muted: \"var(--fold-color-text-muted)\",\n faded: \"var(--fold-color-text-faded)\",\n};\n\n/** Preset → `--fold-icon-size-*` token, with a px fallback so an icon still\n * renders if a consumer loads the component without the token layer. */\nconst SIZE_VAR: Record, string> = {\n xs: \"var(--fold-icon-size-xs, 12px)\",\n sm: \"var(--fold-icon-size-sm, 16px)\",\n md: \"var(--fold-icon-size-md, 20px)\",\n lg: \"var(--fold-icon-size-lg, 24px)\",\n xl: \"var(--fold-icon-size-xl, 32px)\",\n};\n\n/**\n * `fold-icon` — the single surface for all SVG icons.\n *\n * Icons resolve through the {@link FoldIconRegistry} (built-in set + any the\n * consumer registered), keyed by a typed {@link FoldIconName}. Each unique icon\n * is added once to a shared hidden sprite (see {@link FoldIconSprite}); the\n * component itself renders a lightweight `` that\n * references it, so the DOM holds one copy of an icon's paths however many times\n * it renders. Colour + size come from CSS (`currentColor` + a `--icon-size`\n * custom property) and inherit across the `` into the symbol, so the SVG\n * takes its `color` from the host.\n *\n * @selector `fold-icon`\n *\n * @example\n * ```html\n * \n * \n * \n * \n * \n * ```\n */\n@Component({\n selector: \"fold-icon\",\n standalone: true,\n host: {\n // Paint the tone colour on the host so it flows into the SVG via\n // currentColor; unset → no inline colour, the icon inherits its context.\n \"[style.color]\": \"toneColor()\",\n },\n templateUrl: \"./icon.component.html\",\n styleUrl: \"./icon.component.scss\",\n})\nexport class FoldIconComponent {\n /** Icon name — a built-in (autocompleted) or a consumer-registered string. */\n readonly name = input.required();\n\n /** Size — token (`xs…xl`) or explicit pixel number. Defaults to `md`. */\n readonly size = input(\"md\");\n\n /** Semantic tint — `primary` · `secondary` · `muted` · `faded`. Unset (default)\n * inherits `currentColor`, so the icon matches whatever it sits in. */\n readonly tone = input();\n\n /** Optional accessible label. Set → `aria-label`; unset → `aria-hidden`. */\n readonly title = input();\n\n private readonly registry = inject(FoldIconRegistry);\n private readonly sprite = inject(FoldIconSprite);\n\n /** The `#symbol` reference for ``, or null when the name is unknown\n * (renders nothing). Pure — sprite population lives in the effect below. */\n readonly href = computed(() =>\n this.registry.has(this.name()) ? `#${foldIconSymbolId(this.name())}` : null,\n );\n\n /** Resolves the size input to a CSS length string for `--icon-size`. */\n readonly sizeVar = computed(() => {\n const s = this.size();\n return typeof s === \"number\" ? `${s}px` : SIZE_VAR[s];\n });\n\n /** The tone's colour token, or null to inherit `currentColor` (no override). */\n readonly toneColor = computed(() => {\n const t = this.tone();\n return t ? TONE_COLOR[t] : null;\n });\n\n constructor() {\n // Mount the shown icon's symbol in the shared sprite (a DOM side effect, so\n // it lives here and not in `href`), and warn on an unknown name. Reactive:\n // registering an icon later both mounts its symbol and resolves the ``.\n effect(() => {\n const name = this.name();\n const markup = this.registry.resolve(name);\n if (markup) {\n this.sprite.ensure(name, markup);\n } else {\n console.warn(`[fold-icon] unknown icon: \"${name}\"`);\n }\n });\n }\n}\n","\n @if (href(); as ref) {\n \n }\n\n","/**\n * The design tokens, as a typed source-of-truth.\n *\n * These lists are the CONTRACT. The token contract test asserts that the CSS\n * declares exactly these tokens — for colours, that the `:root` (dark) and\n * `[data-theme=\"lumen\"]` blocks each declare exactly the colour set (parity);\n * for scales, that `scales.css` declares exactly the radius/type steps. Add a\n * token here and to the CSS in the same change, or the test fails. That is how\n * the theme stays complete and drift-free.\n *\n * They also power typed `fold*Var` helpers so call sites get autocomplete and a\n * compile error on a misspelt token.\n */\nexport const FOLD_SEMANTIC_COLOR_TOKENS = [\n /* ── Surfaces ─────────────────────────────────────────────── */\n /** Page background — the surface behind everything. */\n \"bg-page\",\n /** Top header bar. */\n \"bg-header\",\n /** Rail 1 — the app menu. */\n \"bg-rail-primary\",\n /** Rail 2 — the workspace menu. */\n \"bg-rail-secondary\",\n /** Rail 3 — tertiary nav (e.g. a `fold-view-nav` section sidebar). */\n \"bg-rail-tertiary\",\n\n /* ── Brand ────────────────────────────────────────────────── */\n /**\n * The mark itself — a logo tile, a wordmark glyph. It IDENTIFIES, so unlike\n * `primary` it must NOT flip polarity: a mark that is teal on the page and\n * pale blue on the rail has stopped being the mark.\n *\n * `primary` does two jobs — it carries the brand AND it carries foreground\n * affordances (an active icon, a focus ring), and on a dark chrome the second\n * has to lighten to stay legible while the first must not. Splitting them is\n * the same move `on-info|warning|alert|success` made when `on-primary` was\n * serving both a brand fill and a status fill.\n *\n * A scoped sub-block may never redeclare these two — that is precisely what\n * would re-introduce the flip.\n */\n \"brand\",\n /** Text or icon rendered on top of a solid `brand` fill. */\n \"on-brand\",\n\n /* ── Primary / accent ─────────────────────────────────────── */\n /** Primary / accent — brand teal (solid). */\n \"primary\",\n /** Primary in a hover/active state. */\n \"primary-strong\",\n /** Text or icon rendered on top of a solid `primary` fill. */\n \"on-primary\",\n /** Readable primary tint for text on a `primary-surface`. */\n \"primary-text\",\n /** Faint primary-tinted background (chips, highlights). */\n \"primary-surface\",\n /** Border for a `primary-surface`. */\n \"primary-border\",\n\n /* ── Info (purple) ────────────────────────────────────────── */\n \"info\",\n /** Text or icon rendered on top of a solid `info` fill. */\n \"on-info\",\n \"info-text\",\n \"info-surface\",\n \"info-border\",\n\n /* ── Warning (amber) ──────────────────────────────────────── */\n \"warning\",\n /** Text or icon rendered on top of a solid `warning` fill. */\n \"on-warning\",\n \"warning-text\",\n \"warning-surface\",\n \"warning-border\",\n\n /* ── Alert (red) ──────────────────────────────────────────── */\n \"alert\",\n /** Text or icon rendered on top of a solid `alert` fill. */\n \"on-alert\",\n \"alert-text\",\n \"alert-surface\",\n \"alert-border\",\n\n /* ── Success (green) ──────────────────────────────────────── */\n \"success\",\n /** Text or icon rendered on top of a solid `success` fill. */\n \"on-success\",\n \"success-text\",\n \"success-surface\",\n \"success-border\",\n\n /* ── Text ─────────────────────────────────────────────────── */\n /** Default body text. */\n \"text\",\n /** De-emphasised text. */\n \"text-secondary\",\n /** Faint / hint text. */\n \"text-muted\",\n /** Dimmest text — counts, hints. */\n \"text-faded\",\n\n /* ── Neutral surfaces + border ────────────────────────────── */\n /** Solid raised content surface (cards, panels). */\n \"surface-card\",\n /** Deeper solid surface for large containers (tables, page-level cards). */\n \"surface-sunken\",\n /** Faint tinted fill (idle chips, subtle rows). */\n \"surface-subtle\",\n /** Slightly stronger fill (raised). */\n \"surface-raised\",\n /** Solid raised hover surface (list rows, menu/tab items). */\n \"surface-hover\",\n /**\n * One step AWAY from its container, in whichever direction the theme's\n * polarity dictates — a card's header or footer band, a strip that has to\n * detach from the body it sits on. Dark themes lighten it, light themes\n * darken it, and the component never has to know which.\n */\n \"surface-band\",\n /** Neutral hairline border. */\n \"border\",\n /** Fainter hairline — row dividers, subtle edges (below `border`). */\n \"border-subtle\",\n\n /* ── Glass ────────────────────────────────────────────────── */\n /** Translucent frosted overlay (panels, floating menus). */\n \"glass\",\n /** Hairline border on a glass surface. */\n \"glass-border\",\n\n /* ── Scrim ────────────────────────────────────────────────── */\n /** Darkening veil behind a modal layer (the mobile nav drawer). */\n \"scrim\",\n] as const;\n\nexport type FoldSemanticColorToken =\n (typeof FOLD_SEMANTIC_COLOR_TOKENS)[number];\n\n/** Border-radius scale. `lg` is a real large radius; `pill` is the capsule. */\nexport const FOLD_RADIUS_TOKENS = [\n \"xs\",\n \"sm\",\n \"md\",\n \"lg\",\n \"pill\",\n \"round\",\n] as const;\n\nexport type FoldRadiusToken = (typeof FOLD_RADIUS_TOKENS)[number];\n\n/**\n * Font-family scale (`--fold-font-*`). Two faces — the base and the tabular/code\n * one — plus one **role**: `label`, the micro-label register (a section title in\n * `eyebrow` skin, a data-table column head, an `element-title` eyebrow). No\n * `display` face: nothing renders one.\n *\n * `label` is a role, not a face: it defaults to `inherit`, so it changes nothing\n * until a host names a face for it.\n */\nexport const FOLD_FONT_TOKENS = [\"sans\", \"mono\", \"label\"] as const;\n\nexport type FoldFontToken = (typeof FOLD_FONT_TOKENS)[number];\n\n/**\n * Type (font-size) scale. `base` is body copy (14px) and sits above `md`\n * (13px): it names the reference step, not a rung on the t-shirt ladder.\n */\nexport const FOLD_TEXT_TOKENS = [\n \"2xs\",\n \"xs\",\n \"sm\",\n \"md\",\n \"base\",\n \"lg\",\n \"xl\",\n \"2xl\",\n] as const;\n\nexport type FoldTextToken = (typeof FOLD_TEXT_TOKENS)[number];\n\n/**\n * Weight scale (`--fold-weight-*`). `extrabold` is the display weight — hero\n * headings only, always with `tracking-tightest` and a fluid size.\n */\nexport const FOLD_WEIGHT_TOKENS = [\n \"regular\",\n \"medium\",\n \"semibold\",\n \"bold\",\n \"extrabold\",\n] as const;\n\nexport type FoldWeightToken = (typeof FOLD_WEIGHT_TOKENS)[number];\n\n/** Leading scale (`--fold-leading-*`) — unitless line-heights. */\nexport const FOLD_LEADING_TOKENS = [\n \"none\",\n \"tight\",\n \"snug\",\n \"normal\",\n \"relaxed\",\n] as const;\n\nexport type FoldLeadingToken = (typeof FOLD_LEADING_TOKENS)[number];\n\n/** Tracking scale (`--fold-tracking-*`) — letter-spacing per role. */\nexport const FOLD_TRACKING_TOKENS = [\n \"tightest\",\n \"tighter\",\n \"tight\",\n \"normal\",\n \"wide\",\n \"caps\",\n] as const;\n\nexport type FoldTrackingToken = (typeof FOLD_TRACKING_TOKENS)[number];\n\n/** Icon-size scale — the length a `fold-icon` renders at, per size preset. */\nexport const FOLD_ICON_SIZE_TOKENS = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\n\nexport type FoldIconSizeToken = (typeof FOLD_ICON_SIZE_TOKENS)[number];\n\n/** Space (gap / padding / margin) scale. */\nexport const FOLD_SPACE_TOKENS = [\n \"xs\",\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n \"4xl\",\n \"5xl\",\n] as const;\n\nexport type FoldSpaceToken = (typeof FOLD_SPACE_TOKENS)[number];\n\n/** Rail-width scale — the nav-rail hierarchy's shared widths, named to pair with\n * the `--fold-color-bg-rail-*` colours (primary app menu → secondary workspace /\n * aside → tertiary in-page nav). */\nexport const FOLD_RAIL_TOKENS = [\"primary\", \"secondary\", \"tertiary\"] as const;\n\nexport type FoldRailToken = (typeof FOLD_RAIL_TOKENS)[number];\n\n/** Motion scale — `transition` shorthands (duration + easing). */\nexport const FOLD_MOTION_TOKENS = [\"fast\", \"base\", \"slow\"] as const;\n\nexport type FoldMotionToken = (typeof FOLD_MOTION_TOKENS)[number];\n\n/** Backdrop-blur radii (`--fold-blur-*`). */\nexport const FOLD_BLUR_TOKENS = [\"glass\"] as const;\n\nexport type FoldBlurToken = (typeof FOLD_BLUR_TOKENS)[number];\n\n/**\n * Elevation scale — full `box-shadow` values. The shared depth language: a\n * component never spells its own shadow, it names a level. Theme-invariant\n * (black ink via `color-mix`, which reads acceptably on both themes), so they\n * live with the scales. `panel-*` are the directional side-panel shadows.\n */\nexport const FOLD_SHADOW_TOKENS = [\n \"sm\",\n \"md\",\n \"lg\",\n \"panel-right\",\n \"panel-left\",\n] as const;\n\nexport type FoldShadowToken = (typeof FOLD_SHADOW_TOKENS)[number];\n\n/** The full custom-property name for a semantic colour token. */\nexport function foldColorProperty(token: FoldSemanticColorToken): string {\n return `--fold-color-${token}`;\n}\n\n/** A ready-to-use `var(--fold-color-…)` reference for a semantic colour token. */\nexport function foldColorVar(token: FoldSemanticColorToken): string {\n return `var(${foldColorProperty(token)})`;\n}\n\n/** A ready-to-use `var(--fold-radius-…)` reference. */\nexport function foldRadiusVar(token: FoldRadiusToken): string {\n return `var(--fold-radius-${token})`;\n}\n\n/** A ready-to-use `var(--fold-font-…)` reference. */\nexport function foldFontVar(token: FoldFontToken): string {\n return `var(--fold-font-${token})`;\n}\n\n/** A ready-to-use `var(--fold-text-…)` reference. */\nexport function foldTextVar(token: FoldTextToken): string {\n return `var(--fold-text-${token})`;\n}\n\n/** A ready-to-use `var(--fold-weight-…)` reference. */\nexport function foldWeightVar(token: FoldWeightToken): string {\n return `var(--fold-weight-${token})`;\n}\n\n/** A ready-to-use `var(--fold-leading-…)` reference. */\nexport function foldLeadingVar(token: FoldLeadingToken): string {\n return `var(--fold-leading-${token})`;\n}\n\n/** A ready-to-use `var(--fold-tracking-…)` reference. */\nexport function foldTrackingVar(token: FoldTrackingToken): string {\n return `var(--fold-tracking-${token})`;\n}\n\n/** A ready-to-use `var(--fold-icon-size-…)` reference. */\nexport function foldIconSizeVar(token: FoldIconSizeToken): string {\n return `var(--fold-icon-size-${token})`;\n}\n\n/** A ready-to-use `var(--fold-space-…)` reference. */\nexport function foldSpaceVar(token: FoldSpaceToken): string {\n return `var(--fold-space-${token})`;\n}\n\n/** A ready-to-use `var(--fold-motion-…)` reference. */\nexport function foldMotionVar(token: FoldMotionToken): string {\n return `var(--fold-motion-${token})`;\n}\n\n/** A ready-to-use `var(--fold-blur-…)` reference. */\nexport function foldBlurVar(token: FoldBlurToken): string {\n return `var(--fold-blur-${token})`;\n}\n\n/** A ready-to-use `var(--fold-shadow-…)` reference. */\nexport function foldShadowVar(token: FoldShadowToken): string {\n return `var(--fold-shadow-${token})`;\n}\n","import { Component, computed, input } from \"@angular/core\";\nimport { foldIconSizeVar } from \"../../../tokens/tokens.catalog\";\nimport type { FoldIconSizeToken } from \"../../../tokens/tokens.catalog\";\n\n/** Spinner size — an icon-size token (`xs…xl`) or an explicit pixel number. */\nexport type FoldSpinnerSize = FoldIconSizeToken | number;\n\n/**\n * `fold-spinner` — an indeterminate loading indicator: a rotating arc drawn in\n * `currentColor`, sized off the same scale as `fold-icon` so it drops into a\n * button in place of its glyph without shifting layout.\n *\n * Give it a `label` when it stands alone (it becomes `role=\"status\"` +\n * `aria-label`, so assistive tech announces the wait). Leave `label` unset when\n * it lives inside something that already announces busy-ness (a button with\n * `aria-busy`) — it then renders `aria-hidden`, purely decorative.\n *\n * Honours `prefers-reduced-motion`: the rotation stops and a fuller static ring\n * is shown instead, so the indicator still reads as \"busy\" without animating.\n *\n * @selector `fold-spinner`\n *\n * @example\n * ```html\n * \n * \n * \n * ```\n */\n@Component({\n selector: \"fold-spinner\",\n standalone: true,\n templateUrl: \"./spinner.component.html\",\n styleUrl: \"./spinner.component.scss\",\n host: {\n \"[style.--fold-spinner-size]\": \"sizeVar()\",\n \"[attr.role]\": \"label() ? 'status' : null\",\n \"[attr.aria-label]\": \"label() ?? null\",\n \"[attr.aria-hidden]\": \"label() ? null : 'true'\",\n },\n})\nexport class FoldSpinnerComponent {\n /** Size — an icon-size token (`xs…xl`, default `md`) or a pixel number. */\n readonly size = input(\"md\");\n\n /** Accessible label. Set → `role=\"status\"` + `aria-label`; unset → decorative. */\n readonly label = input();\n\n /** Resolves the size to a CSS length for `--fold-spinner-size`. */\n readonly sizeVar = computed(() => {\n const s = this.size();\n return typeof s === \"number\" ? `${s}px` : foldIconSizeVar(s);\n });\n}\n","\n","import {\n Component,\n ElementRef,\n ViewEncapsulation,\n booleanAttribute,\n computed,\n inject,\n input,\n} from \"@angular/core\";\nimport { FoldIconComponent } from \"../../foundations/icon/icon.component\";\nimport { FoldSpinnerComponent } from \"../../foundations/spinner/spinner.component\";\nimport type { FoldIconSize } from \"../../foundations/icon/icon.component\";\nimport type { FoldIconName } from \"../../foundations/icon/builtin-icons\";\nimport type {\n FoldButtonEmphasis,\n FoldButtonIntent,\n FoldButtonShape,\n FoldButtonSize,\n} from \"./button.types\";\n\n/** Leading/trailing icon size, derived from the button `size`. */\nconst ICON_SIZE: Record = {\n sm: 14,\n md: 16,\n lg: 18,\n};\n\n/**\n * `[foldButton]` — the design-system button, applied to a **real** `\n * \n * \n * \n * Contracts\n * ```\n *\n * ## Theming its voice\n *\n * A brand's buttons speak in a register — a display family, a weight, capitals,\n * a corner, a floor height — and that register is the same on every button of\n * the app. Six custom properties carry it, all inherited, so an app states it\n * **once** on a root and never again:\n *\n * - `--fold-button-font` · `--fold-button-weight` · `--fold-button-tracking` ·\n * `--fold-button-transform` — the type.\n * - `--fold-button-radius` — the corner (a `shape=\"pill\"` still wins; asking\n * for a pill is a more specific intent than a theme's default corner).\n * - `--fold-button-min-height` — the floor, for a design with a touch target\n * taller than the label needs.\n *\n * They exist because outside always LOSES: `:host(.md)` carries an attribute\n * and a class, so an app's own class cannot outrank it. Without a hook, a\n * screen that needs its own register hand-rolls the button — and then the\n * design system stops being where buttons are decided.\n *\n * `font-size` and `padding` are deliberately NOT hooks: they belong to the size\n * presets. A voice is a register, not a scale, and an app that overrode the\n * size from here would flatten `sm`/`md`/`lg` into one button wearing three\n * names.\n *\n * ```css\n * [data-theme='my-app'] {\n * --fold-button-font: 'Archivo', sans-serif;\n * --fold-button-weight: 900;\n * --fold-button-transform: uppercase;\n * --fold-button-tracking: 0.04em;\n * }\n * ```\n *\n * A `foldButton` expects a **text label** (projected) for its accessible name.\n * For an icon-only affordance use `fold-button-icon` (which takes a `tooltip`);\n * the leading/trailing `icon` inputs here are decorations beside a label.\n *\n * @selector `button[foldButton], a[foldButton]`\n */\n@Component({\n selector: \"button[foldButton], a[foldButton]\",\n standalone: true,\n imports: [FoldIconComponent, FoldSpinnerComponent],\n templateUrl: \"./button.component.html\",\n styleUrl: \"./button.component.scss\",\n encapsulation: ViewEncapsulation.Emulated,\n host: {\n \"[class]\":\n '\"fold-button \" + emphasis() + \" \" + intent() + \" \" + size() + \" \" + shape()',\n \"[class.block]\": \"block()\",\n \"[class.is-disabled]\": \"disabled()\",\n \"[class.is-loading]\": \"loading()\",\n // Loading blocks interaction like disabled, but keeps the surface lit (spinner\n // shown) rather than dimmed. \n","import { InjectionToken, type Provider } from \"@angular/core\";\n\n/**\n * The handful of words the package says **on its own**, scattered across\n * components rather than owned by one.\n *\n * Every other label cluster in fold-ng belongs to a single component\n * (`fold-paginator`, `fold-data-table`, …) and gets its own token. These four do\n * not: `optional` sits on every labelled field, `info` on every help bubble,\n * `clear` on a clearable control, `loading` on a placeholder that can appear\n * anywhere. Left as per-instance inputs only, a non-English app had to repeat\n * the same translation at every call site — 25 `optionalLabel=\"facultatif\"`\n * across 9 files in the app that prompted this — or, worse, forget one and ship\n * a lone English word into an otherwise translated screen.\n *\n * Precedence, as everywhere in the package: **English default ← app-wide\n * provider ← the component's own input**. The per-instance input still wins, for\n * the field whose help bubble deserves a sentence of its own.\n */\nexport interface FoldCommonLabels {\n /** The word inside a label's `(optional)` marker. */\n readonly optional: string;\n /** Accessible name of a help-bubble trigger (`fold-info`, `info` inputs). */\n readonly info: string;\n /** Accessible name of a control's clear (×) affordance. */\n readonly clear: string;\n /** Message of a `fold-loading` placeholder given no `message`. */\n readonly loading: string;\n}\n\n/** The English defaults — the base every override merges onto. */\nexport const FOLD_COMMON_DEFAULT_LABELS: FoldCommonLabels = {\n optional: \"optional\",\n info: \"More information\",\n clear: \"Clear\",\n loading: \"Loading...\",\n};\n\n/** App-wide shared labels; defaults to English. */\nexport const FOLD_COMMON_LABELS = new InjectionToken(\n \"FOLD_COMMON_LABELS\",\n { factory: () => FOLD_COMMON_DEFAULT_LABELS },\n);\n\n/**\n * Provide the package's shared labels once at bootstrap. Partial — any key you\n * omit keeps its English default.\n *\n * @example\n * ```ts\n * // app.config.ts\n * providers: [\n * provideFoldCommonLabels({\n * optional: \"facultatif\",\n * info: \"En savoir plus\",\n * clear: \"Effacer\",\n * loading: \"Chargement…\",\n * }),\n * ];\n * ```\n */\nexport function provideFoldCommonLabels(\n labels: Partial,\n): Provider {\n return {\n provide: FOLD_COMMON_LABELS,\n useValue: { ...FOLD_COMMON_DEFAULT_LABELS, ...labels },\n };\n}\n","/**\n * Zero-dependency placement math for {@link FoldPopoverComponent}. Pure and\n * framework-free so it unit-tests without a DOM: give it the anchor rect, the\n * floating size and the viewport, get back the `{ x, y }` to pin the floating\n * element (viewport coordinates, for `position: fixed`) plus the placement it\n * actually resolved to after collision handling.\n *\n * Three middlewares, in the order a good popover applies them:\n * 1. **flip** — pick the best-fitting side: keep the preferred one if it fits,\n * else its opposite, else whichever has the most room (so a bottom menu opens\n * upward near the fold instead of spilling offscreen).\n * 2. **size** — report the space available on the chosen side (`maxWidth` /\n * `maxHeight`), so the caller caps the panel and scrolls the overflow instead\n * of letting it run off the viewport.\n * 3. **shift** — slide along the cross axis to stay within the viewport padding,\n * without leaving the anchor's side.\n *\n * We deliberately do not depend on Floating UI — fold ships no runtime deps.\n */\n\n/** The side of the anchor the floating element sits on. */\nexport type FoldPopoverSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n/** Alignment of the floating element along the anchor's cross axis. */\nexport type FoldPopoverAlign = \"start\" | \"center\" | \"end\";\n/** A full placement: a side, optionally suffixed with an alignment. */\nexport type FoldPopoverPlacement =\n FoldPopoverSide | `${FoldPopoverSide}-${FoldPopoverAlign}`;\n\n/** A rectangle in viewport coordinates (a subset of `DOMRect`). */\nexport interface FoldRect {\n readonly x: number;\n readonly y: number;\n readonly width: number;\n readonly height: number;\n}\n\nexport interface FoldPlacementInput {\n /** The trigger's bounding rect, in viewport coordinates. */\n readonly anchor: FoldRect;\n /** The floating element's measured size. */\n readonly floating: { readonly width: number; readonly height: number };\n /** Preferred placement before collision handling. */\n readonly placement: FoldPopoverPlacement;\n /**\n * Ordered fallbacks tried (after the preferred) when the preferred side can't\n * fit — the first that fits wins, else the roomiest of all candidates. Each\n * may change side *and* alignment. Defaults to the opposite side.\n */\n readonly fallbackPlacements?: readonly FoldPopoverPlacement[] | undefined;\n /** Gap between the anchor and the floating element, in px. */\n readonly offset: number;\n /** Viewport size (usually `innerWidth` / `innerHeight`). */\n readonly viewport: { readonly width: number; readonly height: number };\n /** Minimum gap kept between the floating element and the viewport edge. */\n readonly padding: number;\n}\n\nexport interface FoldPlacementResult {\n readonly x: number;\n readonly y: number;\n /** The placement after flip — drives the arrow / `data-placement`. */\n readonly placement: FoldPopoverPlacement;\n /** Space available to the floating element on the resolved side, minus\n * padding — the consumer caps `max-width` / `max-height` to these and lets\n * the panel scroll (the `size` middleware). */\n readonly maxWidth: number;\n readonly maxHeight: number;\n}\n\nconst OPPOSITE: Record = {\n top: \"bottom\",\n bottom: \"top\",\n left: \"right\",\n right: \"left\",\n};\n\nfunction isSide(value: string): value is FoldPopoverSide {\n return (\n value === \"top\" ||\n value === \"bottom\" ||\n value === \"left\" ||\n value === \"right\"\n );\n}\n\nfunction isAlign(value: string): value is FoldPopoverAlign {\n return value === \"start\" || value === \"center\" || value === \"end\";\n}\n\nfunction parse(placement: FoldPopoverPlacement): {\n side: FoldPopoverSide;\n align: FoldPopoverAlign;\n} {\n const [rawSide, rawAlign] = placement.split(\"-\");\n const side: FoldPopoverSide =\n rawSide !== undefined && isSide(rawSide) ? rawSide : \"bottom\";\n const align: FoldPopoverAlign =\n rawAlign !== undefined && isAlign(rawAlign) ? rawAlign : \"center\";\n return { side, align };\n}\n\n/** Is `side` on the vertical axis (floating above/below the anchor)? */\nfunction isVertical(side: FoldPopoverSide): boolean {\n return side === \"top\" || side === \"bottom\";\n}\n\n/** Room available between the anchor and the viewport edge on a given side. */\nfunction roomFor(\n side: FoldPopoverSide,\n anchor: FoldRect,\n viewport: { width: number; height: number },\n): number {\n switch (side) {\n case \"top\":\n return anchor.y;\n case \"bottom\":\n return viewport.height - (anchor.y + anchor.height);\n case \"left\":\n return anchor.x;\n case \"right\":\n return viewport.width - (anchor.x + anchor.width);\n }\n}\n\n/** Main-axis coordinate (the side offset) for a resolved side. */\nfunction mainAxisCoord(\n side: FoldPopoverSide,\n anchor: FoldRect,\n floating: { width: number; height: number },\n offset: number,\n): number {\n switch (side) {\n case \"top\":\n return anchor.y - floating.height - offset;\n case \"bottom\":\n return anchor.y + anchor.height + offset;\n case \"left\":\n return anchor.x - floating.width - offset;\n case \"right\":\n return anchor.x + anchor.width + offset;\n }\n}\n\n/** Cross-axis coordinate before shifting, from the alignment. */\nfunction crossAxisCoord(\n side: FoldPopoverSide,\n align: FoldPopoverAlign,\n anchor: FoldRect,\n floating: { width: number; height: number },\n): number {\n const vertical = isVertical(side);\n const anchorStart = vertical ? anchor.x : anchor.y;\n const anchorSize = vertical ? anchor.width : anchor.height;\n const floatSize = vertical ? floating.width : floating.height;\n switch (align) {\n case \"start\":\n return anchorStart;\n case \"end\":\n return anchorStart + anchorSize - floatSize;\n case \"center\":\n return anchorStart + anchorSize / 2 - floatSize / 2;\n }\n}\n\n/** Clamp a value into `[min, max]`; if the range is inverted, return `min`. */\nfunction clamp(value: number, min: number, max: number): number {\n if (max < min) {\n return min;\n }\n return Math.min(Math.max(value, min), max);\n}\n\n/** Room needed on a placement's main axis to fit the floating element. */\nfunction needFor(\n side: FoldPopoverSide,\n floating: { width: number; height: number },\n): number {\n return isVertical(side) ? floating.height : floating.width;\n}\n\n/**\n * Choose the placement (**flip**): try the preferred, then each fallback (the\n * opposite side by default); the first whose side fits the floating element\n * wins. If none fit, take whichever has the most room — the `size` middleware\n * then caps + scrolls the overflow, so it degrades gracefully.\n */\nfunction choosePlacement(input: FoldPlacementInput): {\n side: FoldPopoverSide;\n align: FoldPopoverAlign;\n} {\n const preferred = parse(input.placement);\n const opposite: FoldPopoverPlacement =\n preferred.align === \"center\"\n ? OPPOSITE[preferred.side]\n : `${OPPOSITE[preferred.side]}-${preferred.align}`;\n const fallbacks = input.fallbackPlacements ?? [opposite];\n const candidates = [input.placement, ...fallbacks];\n let best = preferred;\n let bestRoom = -Infinity;\n for (const candidate of candidates) {\n const parsed = parse(candidate);\n const room = roomFor(parsed.side, input.anchor, input.viewport);\n if (room >= needFor(parsed.side, input.floating) + input.offset) {\n return parsed;\n }\n if (room > bestRoom) {\n bestRoom = room;\n best = parsed;\n }\n }\n return best;\n}\n\n/**\n * Resolve `{ x, y, placement, maxWidth, maxHeight }` for a floating element.\n * Order: **flip** (choose the best-fitting side) → **size** (available space on\n * that side, for the caller to cap + scroll) → **shift** (slide along the cross\n * axis to stay in the viewport).\n */\nexport function computePlacement(\n input: FoldPlacementInput,\n): FoldPlacementResult {\n const { anchor, floating, offset, viewport, padding } = input;\n const chosen = choosePlacement(input);\n const side = chosen.side;\n const align = chosen.align;\n\n // size: the room on the chosen side (main axis) and the viewport (cross axis).\n const maxMain = Math.max(\n 0,\n roomFor(side, anchor, viewport) - offset - padding,\n );\n const crossViewport = isVertical(side) ? viewport.width : viewport.height;\n const maxCross = Math.max(0, crossViewport - 2 * padding);\n const maxHeight = isVertical(side) ? maxMain : maxCross;\n const maxWidth = isVertical(side) ? maxCross : maxMain;\n\n // position with the effective (capped) size so a scrolled panel still sits\n // flush against the anchor and shifts within the viewport.\n const eff = {\n width: Math.min(floating.width, maxWidth),\n height: Math.min(floating.height, maxHeight),\n };\n let x: number;\n let y: number;\n if (isVertical(side)) {\n y = mainAxisCoord(side, anchor, eff, offset);\n x = crossAxisCoord(side, align, anchor, eff);\n x = clamp(x, padding, viewport.width - eff.width - padding);\n } else {\n x = mainAxisCoord(side, anchor, eff, offset);\n y = crossAxisCoord(side, align, anchor, eff);\n y = clamp(y, padding, viewport.height - eff.height - padding);\n }\n\n const placement: FoldPopoverPlacement =\n align === \"center\" ? side : `${side}-${align}`;\n return { x, y, placement, maxWidth, maxHeight };\n}\n","/**\n * Keep a floating element pinned to its anchor: call `onChange` whenever\n * anything that could move the anchor or resize either element happens —\n * scrolling (capture phase, so nested scroll containers count), a window\n * resize, or a size change of the anchor / floating element (`ResizeObserver`).\n * Returns a teardown that removes every listener. Mirrors Floating UI's\n * `autoUpdate`, dependency-free and scoped to fold's needs.\n */\nexport function autoUpdate(\n anchor: HTMLElement | null,\n floating: HTMLElement,\n onChange: () => void,\n): () => void {\n if (typeof window === \"undefined\") {\n return () => undefined;\n }\n window.addEventListener(\"scroll\", onChange, true);\n window.addEventListener(\"resize\", onChange);\n const ro =\n typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(onChange);\n if (ro) {\n if (anchor) {\n ro.observe(anchor);\n }\n ro.observe(floating);\n }\n return () => {\n window.removeEventListener(\"scroll\", onChange, true);\n window.removeEventListener(\"resize\", onChange);\n ro?.disconnect();\n };\n}\n","import {\n afterRenderEffect,\n booleanAttribute,\n Component,\n effect,\n ElementRef,\n inject,\n input,\n model,\n Renderer2,\n RendererStyleFlags2,\n viewChild,\n} from \"@angular/core\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\nimport { computePlacement, type FoldPopoverPlacement } from \"./placement\";\nimport { autoUpdate } from \"./auto-update\";\n\n/**\n * `` — an anchored floating layer. Project a trigger\n * (`[foldPopoverTrigger]`) and any content; the content renders in the native\n * **top layer** (via the `popover` attribute, so it escapes `overflow: hidden`\n * and every `z-index`) and is positioned against the trigger with a\n * dependency-free flip/shift engine ({@link computePlacement}).\n *\n * Controlled or uncontrolled through `[(open)]`. Dismissal is owned here\n * (outside-click + `Escape`) rather than the browser's light-dismiss, so\n * re-clicking the trigger toggles cleanly instead of reopening. Opening moves\n * focus into the panel; closing returns it to the trigger. The trigger gets\n * `aria-haspopup` / `aria-expanded` / `aria-controls` wired automatically.\n *\n * For an actions menu with `role=\"menu\"` + keyboard, use `fold-dropdown`, which\n * is built on this.\n *\n * The panel's width is `max-content`; to make it match the trigger (a select-like\n * dropdown), read the published `--fold-popover-anchor-width` in the panel's CSS\n * (e.g. `min-width: var(--fold-popover-anchor-width)`) — it tracks the trigger.\n *\n * @selector `fold-popover`\n *\n * The trigger carries `[foldPopoverTrigger]`; the floating content is marked\n * `foldPopoverPanel`.\n *\n * @example\n * ```html\n * \n * \n *
…
\n * \n * ```\n */\n@Component({\n selector: \"fold-popover\",\n standalone: true,\n templateUrl: \"./popover.component.html\",\n styleUrl: \"./popover.component.scss\",\n host: {\n class: \"fold-popover\",\n \"(click)\": \"onHostClick($event)\",\n \"(keydown.arrowdown)\": \"onArrowDown($event)\",\n },\n})\nexport class FoldPopoverComponent {\n private readonly renderer = inject(Renderer2);\n private readonly host = inject>(ElementRef);\n\n /** Preferred placement before collision handling. @default \"bottom-start\" */\n readonly placement = input(\"bottom-start\");\n /** Ordered placements to try when the preferred can't fit (default: the\n * opposite side). The first that fits wins, else the roomiest. */\n readonly fallbackPlacements = input();\n /** Gap between the trigger and the panel, in px. @default 8 */\n readonly offset = input(8);\n /** Minimum gap kept from the viewport edge, in px. @default 8 */\n readonly padding = input(8);\n /** Move focus into the panel on open. @default true (a dropdown sets false to\n * focus its first item instead). */\n readonly autoFocus = input(true);\n /** Show a small arrow pointing at the trigger. @default false */\n readonly arrow = input(false, { transform: booleanAttribute });\n /** Two-way open state — drive it, or let the trigger toggle it. */\n readonly open = model(false);\n\n /** SSR-safe id linking the trigger's `aria-controls` to the panel. */\n readonly panelId = inject(FoldIdService).next(\"fold-popover\");\n /** Override the trigger's `aria-controls` target — point it at the real\n * controlled element (e.g. an inner `role=\"listbox\"`) when the panel is just a\n * wrapper. @default the panel's own id. */\n readonly ariaControls = input();\n\n private readonly panel = viewChild>(\"panel\");\n private readonly inner = viewChild>(\"inner\");\n private readonly arrowEl = viewChild>(\"arrow\");\n\n /**\n * The marked trigger — the projected `[foldPopoverTrigger]`. Found by DOM\n * query on the host (projected content is a DOM descendant of the host), so it\n * resolves regardless of how deeply it is re-projected (e.g. through\n * `fold-dropdown`) — a content query would not survive the re-projection. Used\n * to anchor against and to detect trigger clicks.\n */\n private markedTrigger(): HTMLElement | null {\n return this.host.nativeElement.querySelector(\n \"[foldPopoverTrigger]\",\n );\n }\n\n private static readonly FOCUSABLE =\n \"button, a[href], input, select, textarea, [tabindex]\";\n\n /**\n * The focusable trigger — the marked element itself if it's focusable, else\n * the first focusable inside it (e.g. `fold-button-icon`'s inner `\n * …panel…\n * \n * ```\n *\n * @selector `[foldPopoverTrigger]`\n */\n@Directive({\n selector: \"[foldPopoverTrigger]\",\n standalone: true,\n host: { \"[attr.foldpopovertrigger]\": \"haspopup()\" },\n})\nexport class FoldPopoverTriggerDirective {\n /** The trigger's host element. */\n readonly el = inject>(ElementRef);\n /**\n * `aria-haspopup` value. @default \"dialog\" (use \"menu\" for a dropdown). Bare\n * `foldPopoverTrigger` (no value) keeps the default.\n */\n readonly haspopup = input(\"dialog\", {\n alias: \"foldPopoverTrigger\",\n transform: (value) =>\n value === \"menu\" || value === \"listbox\" || value === \"true\"\n ? value\n : \"dialog\",\n });\n}\n\ntype FoldTriggerHaspopup = \"menu\" | \"dialog\" | \"listbox\" | \"true\";\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n} from \"@angular/core\";\nimport { FOLD_COMMON_LABELS } from \"../../forms/common-labels\";\nimport type { FoldPopoverPlacement } from \"../popover/placement\";\nimport { FoldPopoverComponent } from \"../popover/popover.component\";\nimport { FoldPopoverTriggerDirective } from \"../popover/popover-trigger.directive\";\n\n/**\n * `` — the small `i` that answers \"what is this?\".\n *\n * A round, quiet trigger at the end of a label line or in a card's corner; on\n * click it reveals a sentence or two in a popover. It is the affordance for\n * explanation that is **worth reading once and not worth taking permanent\n * space**: a hint under a field is read every time and must stay to one line,\n * while the *why* behind a setting takes a paragraph and would push the next\n * control down for a reader who already knows it.\n *\n * Built on {@link FoldPopoverComponent}, not a hand-positioned bubble: the panel\n * rides the native top layer, so it escapes any `overflow: hidden` (a chart\n * card, a scroll region) and every `z-index`, and `Escape` / outside-click /\n * `aria-haspopup` + `aria-expanded` + `aria-controls` come with it.\n *\n * A click, not a hover: hover-only help is unreachable on a touch screen and\n * hostile to anyone whose pointer isn't steady. The cursor still reads `help`.\n *\n * @selector `fold-info`\n *\n * @example\n * ```html\n * \n * ```\n */\n@Component({\n selector: \"fold-info\",\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [FoldPopoverComponent, FoldPopoverTriggerDirective],\n templateUrl: \"./info.component.html\",\n styleUrl: \"./info.component.scss\",\n})\nexport class FoldInfoComponent {\n /** The explanation. One or two sentences — past that, it wants a page. */\n readonly text = input.required();\n /**\n * Accessible name of the trigger. English by default; a consumer localises it\n * — and should say what it explains (\"More information about the lead time\")\n * when several sit on the same screen.\n * @default 'More information'\n */\n readonly label = input();\n /**\n * Where the panel opens. `bottom-end` by default because the trigger usually\n * sits at the **end** of a label line or a card header, where a panel growing\n * further outward would leave the viewport.\n */\n readonly placement = input(\"bottom-end\");\n\n private readonly common = inject(FOLD_COMMON_LABELS);\n\n /** English default ← app-wide provider ← this instance's own input. */\n protected readonly triggerLabel = computed(\n () => this.label() ?? this.common.info,\n );\n}\n","\n \n i\n \n
{{ text() }}
\n\n","import {\n Component,\n booleanAttribute,\n computed,\n inject,\n input,\n} from \"@angular/core\";\nimport { FOLD_COMMON_LABELS } from \"../common-labels\";\n\n/**\n * `` — the label element for a form control: the text plus an optional\n * required marker. Package-internal; the input controls render it through\n * {@link FoldInputBaseComponent}, so consumers never place it themselves. Kept\n * separate so the label + asterisk styling lives in one place (reusable later by\n * checkbox / radio groups).\n *\n * @selector `fold-label`\n */\n@Component({\n selector: \"fold-label\",\n standalone: true,\n template: ``,\n styleUrl: \"./label.component.scss\",\n})\nexport class FoldLabelComponent {\n /** The label text. */\n readonly text = input.required();\n /** The id of the control this labels (``/`\n * \n * ```\n */\n@Component({\n selector: \"fold-element-title\",\n standalone: true,\n imports: [FoldIconComponent],\n host: {\n \"[class.v-bar]\": \"variant() === 'bar'\",\n \"[class.v-title]\": \"variant() === 'title'\",\n \"[class.v-caps]\": \"variant() === 'caps'\",\n \"[class.it-primary]\": \"iconTone() === 'primary'\",\n \"[class.it-faded]\": \"iconTone() === 'faded'\",\n // `title` is a heading input — strip the reflected native attribute so it\n // never doubles as a browser tooltip.\n \"[attr.title]\": \"null\",\n },\n templateUrl: \"./element-title.component.html\",\n styleUrl: \"./element-title.component.scss\",\n})\nexport class FoldElementTitleComponent {\n /** Leading icon glyph (raised tile in the `title` variant). */\n readonly icon = input();\n /** Icon tile tone (title variant) — `neutral` (raised), `primary` (filled brand), `faded` (dim). */\n readonly iconTone = input<\"neutral\" | \"primary\" | \"faded\">(\"neutral\");\n /** The heading text. */\n readonly title = input.required();\n /** Optional secondary line under the title. */\n readonly subtitle = input();\n /** Emphasis — `eyebrow` (10px muted), `bar` (11px secondary), `title` (text-md,\n * normal-case), `caps` (title-size uppercase, primary ink). */\n readonly variant = input<\"eyebrow\" | \"bar\" | \"title\" | \"caps\">(\"eyebrow\");\n /** Heading outline depth exposed to assistive tech (`aria-level`). */\n readonly level = input(2);\n /** Optional `id` on the heading span, so a container can name a region with\n * `aria-labelledby` (e.g. a `fold-page-section`'s `
`). */\n readonly headingId = input();\n\n protected readonly iconSize = computed(() =>\n this.variant() === \"title\" ? \"md\" : \"sm\",\n );\n}\n","@if (icon(); as ic) {\n \n}\n\n \n {{ title() }}\n \n \n @if (subtitle(); as s) {\n {{ s }}\n }\n\n","import { Component, input } from \"@angular/core\";\nimport { FoldCardComponent } from \"../../content/card/card.component\";\nimport { FoldElementTitleComponent } from \"../../content/element-title/element-title.component\";\nimport type { FoldIconName } from \"../../foundations/icon/builtin-icons\";\n\n/**\n * `` — a titled info card in three zones: a **header** (a\n * raised icon tile + title + subtitle), a **body** (the projected content — e.g.\n * label/value rows), and an optional **footer** action. Composes\n * {@link FoldCardComponent} for the surface, so it never re-rolls a card.\n *\n * - `icon` / `title` / `subtitle` — the header. `title` is required.\n * - default slot → the body.\n * - `[footer]` slot → a footer action (e.g. an ``); the footer and its\n * divider are hidden when nothing is projected.\n *\n * @selector `fold-context-card`\n *\n * @example\n * ```html\n * \n *
…
\n * Voir l'organigramme\n * \n * ```\n */\n@Component({\n selector: \"fold-context-card\",\n standalone: true,\n imports: [FoldCardComponent, FoldElementTitleComponent],\n // `title` is a heading input — strip the native attribute a static\n // `title=\"…\"` leaves behind, so it never doubles as a browser tooltip.\n host: { \"[attr.title]\": \"null\" },\n templateUrl: \"./context-card.component.html\",\n styleUrl: \"./context-card.component.scss\",\n})\nexport class FoldContextCardComponent {\n /** Header icon glyph. */\n readonly icon = input();\n /** Icon tile tone — `primary` (filled brand, default), `neutral` (raised), `faded` (dim). */\n readonly iconTone = input<\"neutral\" | \"primary\" | \"faded\">(\"primary\");\n /** Header title. */\n readonly title = input.required();\n /** Optional line under the title. */\n readonly subtitle = input();\n}\n","\n
\n \n
\n
\n
\n\n","import { Directive, inject } from \"@angular/core\";\nimport { FoldIdService } from \"./id.service\";\n\n/**\n * Auto-assigns a unique, SSR-safe `id` to any native form control (``,\n * `\n\n","import {\n booleanAttribute,\n Component,\n computed,\n inject,\n input,\n model,\n} from \"@angular/core\";\nimport type { FormValueControl, ValidationError } from \"@angular/forms/signals\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\nimport { FoldInputBaseComponent } from \"./input-base.component\";\nimport { readInputValue } from \"./input-value\";\n\n/** The native calendar-date input types `fold-date` wraps — they share the exact\n * chrome and a `string` value; only the picker granularity differs. For a\n * clock/time field use {@link FoldTimeComponent} (`fold-time`). */\nexport type FoldDateType = \"date\" | \"datetime-local\" | \"month\" | \"week\";\n\n/**\n * `` — the calendar-field sibling of {@link FoldInputComponent}: a thin\n * wrapper around a **native ``** (and its family — `datetime-local`,\n * `month`, `week` via {@link type}), like `fold-select` wraps the native ``. For a time-of-day field, use the sibling {@link\n * FoldTimeComponent} (`fold-time`).\n *\n * The native pickers keep the OS calendar + mobile keyboard for free (same\n * reasoning as {@link FoldNumberInputComponent} staying `type=\"number\"`). This is\n * **not** a calendar popover — that's the `fold-calendar` family; this is the plain\n * field. Shares the exact box chrome (tokens, sizes, `panel` variant) via\n * `input-shell.scss` and the label / required / hint / error chrome via {@link\n * FoldInputBaseComponent}.\n *\n * @selector `fold-date`\n *\n * @example\n * ```html\n * \n * \n *\n * \n * \n * ```\n */\n@Component({\n selector: \"fold-date\",\n standalone: true,\n imports: [FoldInputBaseComponent],\n templateUrl: \"./date.component.html\",\n styleUrl: \"./date.component.scss\",\n host: {\n \"[class]\": 'size() + \" \" + variant()',\n },\n})\nexport class FoldDateComponent implements FormValueControl {\n /** The bound value — the native input string (`YYYY-MM-DD`, `HH:mm`, …). A\n * `model()` so `FormField` and `[(value)]` both stay in sync. */\n readonly value = model(\"\");\n /** Disabled state — bound automatically by `FormField` from the field. */\n readonly disabled = input(false);\n /** Two-way touched state — set on blur, kept in sync with the field. */\n readonly touched = model(false);\n /** Validation errors — bound by `FormField` from the field. */\n readonly errors = input([]);\n\n /** Which native temporal picker to render. @default 'date' */\n readonly type = input(\"date\");\n /** Native `min` bound (e.g. `2026-01-01`) — passes through to the input. Typed\n * `string | undefined` (not `| null`) to stay assignable to the signal-forms\n * `FormValueControl` reserved `min` field-state binding. */\n readonly min = input(undefined);\n /** Native `max` bound — passes through to the input (see {@link min}). */\n readonly max = input(undefined);\n /** Native `step` (e.g. `60` for whole-minute time) — passes through. */\n readonly step = input(undefined);\n\n /** Size preset — see {@link FoldInputComponent.size}. @default 'md' */\n readonly size = input<\"sm\" | \"md\" | \"lg\">(\"md\");\n /** Visual variant — see {@link FoldInputComponent.variant}. @default 'default' */\n readonly variant = input<\"default\" | \"panel\">(\"default\");\n\n /** Optional label displayed above the control. */\n readonly label = input();\n /** Show a required marker on the label (and set the native `required`). */\n readonly required = input(false, { transform: booleanAttribute });\n /** Show a lighter `(optional)` marker on the label (ignored when required). */\n readonly optional = input(false, { transform: booleanAttribute });\n /** The word inside the optional marker. @default 'optional' */\n readonly optionalLabel = input();\n /**\n * Longer explanation behind an `i` at the end of the label line — for the\n * sentence or two a {@link hint} can't carry. Forwarded to `fold-input-base`.\n */\n readonly info = input();\n /** Accessible name of the info button. @default 'More information' */\n readonly infoLabel = input();\n /** Optional helper text shown under the control. */\n readonly hint = input();\n /** Render as read-only. Named `readOnly` (not `readonly`) to avoid the\n * signal-forms `FormField` reserved `readonly` field-state binding. */\n readonly readOnly = input(false);\n\n /** Unique, SSR-safe id for label association (see {@link FoldIdService}). */\n readonly inputId = inject(FoldIdService).next(\"fold-date\");\n\n /** The message to show under the field: the first error, once touched. */\n protected readonly errorMessage = computed(() => {\n if (!this.touched()) {\n return undefined;\n }\n const first = this.errors()[0];\n return first ? (first.message ?? first.kind) : undefined;\n });\n\n /** `aria-describedby` target: the error when shown, else the hint, else none. */\n protected readonly describedBy = computed(() => {\n if (this.errorMessage()) {\n return `${this.inputId}-error`;\n }\n return this.hint() ? `${this.inputId}-hint` : null;\n });\n\n /** Write the chosen native value back through the model. */\n onInputChange(event: Event): void {\n this.value.set(readInputValue(event));\n }\n\n /** Mark the field touched on blur, so errors can surface. */\n protected onBlur(): void {\n this.touched.set(true);\n }\n}\n","\n \n\n","import {\n booleanAttribute,\n Component,\n computed,\n inject,\n input,\n model,\n} from \"@angular/core\";\nimport type { FormValueControl, ValidationError } from \"@angular/forms/signals\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\nimport { FoldInputBaseComponent } from \"./input-base.component\";\nimport { readInputValue } from \"./input-value\";\n\n/**\n * `` — the time-of-day sibling of {@link FoldDateComponent}: a thin\n * wrapper around a **native ``**, like `fold-select` wraps the\n * native ``.\n *\n * A separate control from `fold-date` (rather than a `type=\"time\"` on it) so each\n * reads for what it is at the call site — the same \"one control, one job\" split as\n * {@link FoldInputComponent} vs {@link FoldNumberInputComponent}. Shares the exact\n * box chrome (tokens, sizes, `panel` variant) via `input-shell.scss` and the label\n * / required / hint / error chrome via {@link FoldInputBaseComponent}.\n *\n * @selector `fold-time`\n *\n * @example\n * ```html\n * \n * \n *\n * \n * \n * ```\n */\n@Component({\n selector: \"fold-time\",\n standalone: true,\n imports: [FoldInputBaseComponent],\n templateUrl: \"./time.component.html\",\n styleUrl: \"./date.component.scss\",\n host: {\n \"[class]\": 'size() + \" \" + variant()',\n },\n})\nexport class FoldTimeComponent implements FormValueControl {\n /** The bound value — the native input string (`HH:mm` / `HH:mm:ss`). A\n * `model()` so `FormField` and `[(value)]` both stay in sync. */\n readonly value = model(\"\");\n /** Disabled state — bound automatically by `FormField` from the field. */\n readonly disabled = input(false);\n /** Two-way touched state — set on blur, kept in sync with the field. */\n readonly touched = model(false);\n /** Validation errors — bound by `FormField` from the field. */\n readonly errors = input([]);\n\n /** Native `min` bound (e.g. `09:00`) — passes through to the input. Typed\n * `string | undefined` (not `| null`) to stay assignable to the signal-forms\n * `FormValueControl` reserved `min` field-state binding. */\n readonly min = input(undefined);\n /** Native `max` bound (e.g. `18:00`) — passes through (see {@link min}). */\n readonly max = input(undefined);\n /** Native `step` in seconds (e.g. `60` whole-minute, `1` seconds field). */\n readonly step = input(undefined);\n\n /** Size preset — see {@link FoldInputComponent.size}. @default 'md' */\n readonly size = input<\"sm\" | \"md\" | \"lg\">(\"md\");\n /** Visual variant — see {@link FoldInputComponent.variant}. @default 'default' */\n readonly variant = input<\"default\" | \"panel\">(\"default\");\n\n /** Optional label displayed above the control. */\n readonly label = input();\n /** Show a required marker on the label (and set the native `required`). */\n readonly required = input(false, { transform: booleanAttribute });\n /** Show a lighter `(optional)` marker on the label (ignored when required). */\n readonly optional = input(false, { transform: booleanAttribute });\n /** The word inside the optional marker. @default 'optional' */\n readonly optionalLabel = input();\n /**\n * Longer explanation behind an `i` at the end of the label line — for the\n * sentence or two a {@link hint} can't carry. Forwarded to `fold-input-base`.\n */\n readonly info = input();\n /** Accessible name of the info button. @default 'More information' */\n readonly infoLabel = input();\n /** Optional helper text shown under the control. */\n readonly hint = input();\n /** Render as read-only. Named `readOnly` (not `readonly`) to avoid the\n * signal-forms `FormField` reserved `readonly` field-state binding. */\n readonly readOnly = input(false);\n\n /** Unique, SSR-safe id for label association (see {@link FoldIdService}). */\n readonly inputId = inject(FoldIdService).next(\"fold-time\");\n\n /** The message to show under the field: the first error, once touched. */\n protected readonly errorMessage = computed(() => {\n if (!this.touched()) {\n return undefined;\n }\n const first = this.errors()[0];\n return first ? (first.message ?? first.kind) : undefined;\n });\n\n /** `aria-describedby` target: the error when shown, else the hint, else none. */\n protected readonly describedBy = computed(() => {\n if (this.errorMessage()) {\n return `${this.inputId}-error`;\n }\n return this.hint() ? `${this.inputId}-hint` : null;\n });\n\n /** Write the chosen native value back through the model. */\n onInputChange(event: Event): void {\n this.value.set(readInputValue(event));\n }\n\n /** Mark the field touched on blur, so errors can surface. */\n protected onBlur(): void {\n this.touched.set(true);\n }\n}\n","\n \n\n","import {\n booleanAttribute,\n Component,\n computed,\n DestroyRef,\n inject,\n input,\n model,\n output,\n} from \"@angular/core\";\nimport { FoldInputComponent } from \"./input.component\";\n\n/**\n * `` — a search box: the magnifier, the clear `×`, an optional\n * **announced result count**, and a **debounced emit**. `searchChange` fires only once typing pauses for\n * `delayMs`, so a fast typer triggers one query instead of one per keystroke;\n * the emitted term is trimmed and de-duplicated.\n *\n * `value` is a `model()`, and that is what makes it a control rather than a\n * one-way sensor. Bind it and the box becomes **steerable from outside** —\n * picking a filter elsewhere can empty the field, which a write-only search\n * cannot do: it would keep showing a term the results no longer honour.\n *\n * Two ways to use it, and they answer different questions:\n *\n * - `[(value)]` — the term as **state**, updated on every keystroke. Filtering\n * an array already in memory wants this; a debounce there only adds lag.\n * - `(searchChange)` — the term as an **event**, once it settles. A request to\n * a server wants this.\n *\n * They compose: bind both when a screen filters locally *and* refetches.\n * Writing `value` from outside never emits `searchChange` — whoever wrote it\n * already knows.\n *\n * @selector `fold-search`\n *\n * @example\n * ```html\n * \n * \n *\n * \n * \n * ```\n */\n@Component({\n selector: \"fold-search\",\n standalone: true,\n imports: [FoldInputComponent],\n templateUrl: \"./search.component.html\",\n styleUrl: \"./search.component.scss\",\n host: {\n \"[class]\": \"placement()\",\n },\n})\nexport class FoldSearchComponent {\n /**\n * The term in the box — the SOURCE of truth, not a copy of it.\n *\n * Two-way, so a screen can clear or preset it: choosing a category that\n * supersedes the search empties the field in the same gesture, instead of\n * leaving a stale term above results that ignore it.\n */\n readonly value = model(\"\");\n\n readonly placeholder = input(\"\");\n readonly size = input<\"sm\" | \"md\" | \"lg\">(\"md\");\n /** Visual variant, forwarded to the inner `fold-input` (`panel` for side-panel\n * forms; `default` elsewhere). */\n readonly variant = input<\"default\" | \"panel\">(\"default\");\n\n /**\n * Accessible name, when the design leaves no room for a visible label — the\n * magnifier is decorative and names nothing.\n */\n readonly ariaLabel = input(undefined);\n\n /** The `×` that empties the box. On by default: it is what a search box is. */\n readonly clearable = input(true, { transform: booleanAttribute });\n\n /** Accessible name of the clear button. Override it to translate. */\n readonly clearLabel = input(\"Clear search\");\n\n /**\n * How many results the term found — `null` (the default) shows nothing.\n *\n * It belongs here rather than beside the box because it is the ANSWER to what\n * the box asked, and because every screen that wrote it by hand forgot the\n * same thing: a count that changes under a search has to be **announced**.\n * It carries `role=\"status\"` and `aria-live=\"polite\"`, so a user who cannot\n * see the grid still learns that four hundred rows became three.\n */\n readonly resultCount = input(null);\n\n /**\n * The word after the number — « pièces », \"results\", \"matches\".\n *\n * A plain string and not a template: the count reads `12 pièces`, and a\n * language that needs another order or a plural rule formats the whole thing\n * upstream and passes it as {@link resultLabel} with `resultCount` left null…\n * which it cannot. So: this covers ` `, and anything else stays\n * the consumer's own markup beside the box.\n */\n readonly resultLabel = input(\"results\");\n\n /**\n * Where the count sits: above the box, after it on the same line, or below.\n *\n * `end` and not `right` — the whole library lays out in **logical**\n * properties, so the count follows the reading direction instead of pinning\n * itself to a side of the screen.\n */\n readonly placement = input<\"top\" | \"end\" | \"bottom\">(\"end\");\n\n /** Quiet period after the last keystroke before emitting, in ms. */\n readonly delayMs = input(300);\n\n /** Emits the trimmed term once typing pauses for `delayMs` (deduped). */\n readonly searchChange = output();\n\n protected readonly showCount = computed(() => this.resultCount() !== null);\n\n protected readonly countText = computed(\n () => `${String(this.resultCount() ?? 0)} ${this.resultLabel()}`,\n );\n\n private timer: ReturnType | null = null;\n private lastEmitted = \"\";\n\n constructor() {\n // A pending timer that outlives the view would fire a stray emit.\n inject(DestroyRef).onDestroy(() => this.clear());\n }\n\n /**\n * The value moves **now**, the event waits.\n *\n * The box must show what was typed on the keystroke — deferring the text\n * itself would make the field feel broken — while the query it triggers is\n * what deserves the quiet period. Clearing settles like any other edit: the\n * empty term goes out after the same delay, so a consumer sees one contract\n * and not two.\n */\n protected onInput(value: string): void {\n this.value.set(value);\n const term = value.trim();\n this.clear();\n this.timer = setTimeout(() => {\n if (term !== this.lastEmitted) {\n this.lastEmitted = term;\n this.searchChange.emit(term);\n }\n }, this.delayMs());\n }\n\n private clear(): void {\n if (this.timer !== null) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n }\n}\n","@if (showCount() && placement() === \"top\") {\n

{{ countText() }}

\n}\n\n\n\n@if (showCount() && placement() !== \"top\") {\n

{{ countText() }}

\n}\n","import {\n booleanAttribute,\n Component,\n computed,\n inject,\n input,\n model,\n} from \"@angular/core\";\nimport type { FormValueControl, ValidationError } from \"@angular/forms/signals\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\nimport { FoldIconComponent } from \"../../foundations/icon/icon.component\";\nimport { FoldInputBaseComponent } from \"./input-base.component\";\nimport { readInputValue } from \"./input-value\";\n\n/**\n * `` — the dropdown sibling of {@link FoldInputComponent} and\n * `fold-number-input`. A thin wrapper around a **native `` is a mechanical wrap:\n *\n * ```html\n * \n * @for (c of currencies; track c) {\n * \n * }\n * \n * ```\n *\n * Shares the exact box chrome (tokens, sizes, `panel` variant) as `fold-input`\n * via `input-shell.scss`, and the label / required / hint / error chrome via\n * {@link FoldInputBaseComponent}. The value is the native string; parse to a\n * number/id in the consumer (as with a raw `\n \n \n\n","import {\n afterRenderEffect,\n InjectionToken,\n isDevMode,\n type Signal,\n} from \"@angular/core\";\n\n/**\n * The contract a `fold-option` needs from whatever owns it — the single-select\n * `fold-listbox` or the multi-select `fold-multiselect`. Injected through a token\n * (not the concrete class) so an option stays decoupled from either component and\n * there is no circular import. Generic over the option value type `T`; the token\n * itself is erased to `unknown` (the option↔owner value link is a runtime\n * contract — content projection can't carry `T` statically).\n */\nexport interface FoldListboxOwner {\n /** Is this option's value currently selected? (equality vs. membership.) */\n isSelected(value: T): boolean;\n /** The keyboard-active option's id — the listbox's `aria-activedescendant`. */\n readonly activeId: Signal;\n}\n\nexport const FOLD_LISTBOX_OWNER = new InjectionToken>(\n \"FOLD_LISTBOX_OWNER\",\n);\n\n/**\n * Dev-only guard: warn (once per value) when a control holds a value with no\n * matching `` — a silent \"shows the placeholder\" bug otherwise, and\n * the runtime safety net for the value/option type link projection can't check at\n * compile time. Runs in an `afterRenderEffect` so option `value`s are set before\n * they're read (an eager `effect` would hit `NG0950` reading a required input too\n * early). Call from a component constructor (an injection context).\n *\n * `selected` yields the currently-held values (single-select passes `[]` or a\n * one-element array; multi-select its array), and `eq` is the owner's\n * `compareWith`, so object values match by identity, not reference.\n */\nexport function warnOnOrphanValue(\n selected: () => readonly T[],\n options: () => readonly { value(): T }[],\n eq: (a: T, b: T) => boolean,\n tag: string,\n): void {\n if (!isDevMode()) {\n return;\n }\n const warned = new Set();\n afterRenderEffect(() => {\n const opts = options();\n if (opts.length === 0) {\n return; // options may still be projecting — nothing to check against yet\n }\n for (const v of selected()) {\n if (!warned.has(v) && !opts.some((o) => eq(o.value(), v))) {\n warned.add(v);\n console.warn(\n `[${tag}] value ${String(v)} has no matching .`,\n );\n }\n }\n });\n}\n","import {\n booleanAttribute,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n} from \"@angular/core\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\nimport { FOLD_LISTBOX_OWNER } from \"./listbox-owner\";\n\n/**\n * `` — a single choice inside a {@link FoldListboxComponent}. Project\n * as many as you need; the label is whatever you put inside (plain text, or richer\n * content — an icon, a description). It reads the parent for its own `is-selected`\n * / `is-active` state (computed, so nothing is pushed in during change detection —\n * which would read this required `value` before it is set), and exposes a stable\n * id the listbox points `aria-activedescendant` at.\n *\n * ```html\n * \n * Euro\n * US Dollar\n * \n * ```\n *\n * @selector `fold-option`\n */\n@Component({\n selector: \"fold-option\",\n standalone: true,\n template: \"\",\n styleUrl: \"./option.component.scss\",\n host: {\n role: \"option\",\n \"[id]\": \"id\",\n \"[attr.aria-selected]\": \"selected()\",\n \"[attr.aria-disabled]\": \"disabled() || null\",\n \"[class.is-active]\": \"active()\",\n \"[class.is-selected]\": \"selected()\",\n \"[class.is-disabled]\": \"disabled()\",\n },\n})\nexport class FoldOptionComponent {\n private readonly host = inject>(ElementRef);\n private readonly owner = inject(FOLD_LISTBOX_OWNER);\n\n /** The value written back to the listbox when this option is chosen. */\n readonly value = input.required();\n /** Disabled options are skipped by keyboard nav and can't be selected. */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /** Stable, SSR-safe id — the listbox points `aria-activedescendant` at it. */\n readonly id = inject(FoldIdService).next(\"fold-option\");\n\n /** Derived from the parent — evaluated lazily during this option's own render,\n * so the required `value` is always set by the time it's read. */\n readonly selected = computed(() => this.owner.isSelected(this.value()));\n readonly active = computed(() => this.owner.activeId() === this.id);\n\n /** The option's visible text — used for the trigger label and type-ahead. */\n get label(): string {\n return this.host.nativeElement.textContent?.trim() ?? \"\";\n }\n\n /** Bring the option into view when it becomes keyboard-active. Optional-chained\n * so it's a no-op where `scrollIntoView` is absent (jsdom, non-DOM SSR). */\n scrollIntoView(): void {\n this.host.nativeElement.scrollIntoView?.({ block: \"nearest\" });\n }\n}\n","import { Component, inject, input } from \"@angular/core\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\n\n/**\n * `` — a labelled group of ``s inside a\n * {@link FoldListboxComponent} / {@link FoldMultiselectComponent}, the styleable\n * counterpart to the native ``. Purely presentational: it renders a\n * non-selectable header and projects its options, which the owning listbox still\n * discovers (it queries options with `descendants: true`) and roves across in\n * document order — so grouping changes the layout, never the keyboard model.\n *\n * `role=\"group\"` + `aria-labelledby` names the group for assistive tech; the\n * header carries no `role=\"option\"`, so keyboard nav skips straight over it.\n *\n * ```html\n * \n * \n * Paris\n * Lyon\n * \n * \n * Roma\n * \n * \n * ```\n *\n * @selector `fold-optgroup`\n */\n@Component({\n selector: \"fold-optgroup\",\n standalone: true,\n template:\n '{{ label() }}',\n styleUrl: \"./optgroup.component.scss\",\n host: {\n role: \"group\",\n \"[attr.aria-labelledby]\": \"labelId\",\n },\n})\nexport class FoldOptgroupComponent {\n /** The group's visible heading — also its accessible name (`aria-labelledby`). */\n readonly label = input.required();\n\n /** Stable, SSR-safe id the group's `aria-labelledby` points at. */\n readonly labelId = inject(FoldIdService).next(\"fold-optgroup\");\n}\n","/**\n * A data-driven option for the array API of `fold-listbox` / `fold-multiselect`\n * (`[options]`). Use it — instead of projecting `` — when the list\n * is data, not markup: the value type is linked to the control's value at compile\n * time (no projection seam). For rich per-row content, project an\n * `` alongside `[options]`; otherwise `label` renders.\n */\nexport interface FoldSelectOption {\n /** The value written back to the control when the row is chosen. */\n readonly value: T;\n /** The row's visible text (also the type-ahead + trigger label). */\n readonly label: string;\n /** Skip in keyboard nav and block selection. @default false */\n readonly disabled?: boolean;\n}\n\n/**\n * A labelled group of options for the array API — the data-driven counterpart to\n * a projected ``. Put groups (and/or plain options) in the\n * `[options]` array; the control renders each group's `options` under its\n * `label`, and keyboard nav still roves the flattened list in order.\n */\nexport interface FoldSelectOptionGroup {\n /** The group heading — its accessible name; not selectable. */\n readonly label: string;\n /** The options under this heading. */\n readonly options: readonly FoldSelectOption[];\n}\n\n/** One entry of the `[options]` array: a plain option or a labelled group. */\nexport type FoldSelectItem = FoldSelectOption | FoldSelectOptionGroup;\n\n/** True when an `[options]` entry is a group (has nested `options`), not a leaf. */\nexport function isFoldSelectOptionGroup(\n item: FoldSelectItem,\n): item is FoldSelectOptionGroup {\n return \"options\" in item;\n}\n","import { computed, signal, type Signal } from \"@angular/core\";\n\n/** The slice of a `fold-option` the keyboard core needs. The value is unused by\n * the core (it navigates by id/label/disabled), so it stays erased. */\nexport interface FoldNavOption {\n value(): unknown;\n disabled(): boolean;\n readonly label: string;\n readonly id: string;\n scrollIntoView(): void;\n}\n\n/** What the owning listbox does when the core resolves an intent. */\nexport interface FoldNavHandlers {\n /** Activate the option at `index` (single-select commits + closes; multi\n * toggles + stays open). */\n select(index: number): void;\n /** Close the popup (Tab). */\n close(): void;\n}\n\n/**\n * The shared roving/keyboard core for `fold-listbox` and `fold-multiselect`. It\n * owns the keyboard-active row (↑/↓ wrapping + disabled-skip, `Home`/`End`,\n * multi-letter type-ahead) and reports it as `activeId` for\n * `aria-activedescendant`; the owner decides what *selecting* means. Plain class,\n * no Angular decorators — instantiated in a component field.\n */\nexport class FoldListboxNav {\n private readonly active = signal(-1);\n /** The active option's id, or none — the listbox's `aria-activedescendant`. */\n readonly activeId: Signal = computed(\n () => this.opts()[this.active()]?.id ?? null,\n );\n\n private typeBuffer = \"\";\n private typeAt = 0;\n\n constructor(\n private readonly opts: () => readonly FoldNavOption[],\n private readonly handlers: FoldNavHandlers,\n ) {}\n\n /** Index of the active row (or -1). */\n activeIndex(): number {\n return this.active();\n }\n\n /** Reset when the popup closes. */\n reset(): void {\n this.active.set(-1);\n }\n\n /** On open, arm `preferred` if it's a real row, else the first enabled one. */\n arm(preferred: number): void {\n this.setActive(preferred >= 0 ? preferred : this.edge(1));\n }\n\n /** Point at a row from a hover — no scroll, so the pointer doesn't jog the list. */\n point(index: number): void {\n if (index >= 0) {\n this.active.set(index);\n }\n }\n\n onKeydown(event: KeyboardEvent): void {\n switch (event.key) {\n case \"ArrowDown\":\n event.preventDefault();\n this.move(1);\n break;\n case \"ArrowUp\":\n event.preventDefault();\n this.move(-1);\n break;\n case \"Home\":\n event.preventDefault();\n this.setActive(this.edge(1));\n break;\n case \"End\":\n event.preventDefault();\n this.setActive(this.edge(-1));\n break;\n case \"Enter\":\n case \" \":\n event.preventDefault();\n this.handlers.select(this.active());\n break;\n case \"Tab\":\n this.handlers.close();\n break;\n default:\n this.typeahead(event, (index) => this.setActive(index));\n }\n }\n\n /** First (`dir` = 1) or last (`dir` = -1) enabled option index, or -1. */\n private edge(dir: 1 | -1): number {\n const opts = this.opts();\n const order = [...opts.keys()];\n for (const idx of dir === 1 ? order : order.reverse()) {\n if (!opts[idx]?.disabled()) {\n return idx;\n }\n }\n return -1;\n }\n\n private move(delta: number): void {\n const opts = this.opts();\n let i = this.active();\n let remaining = opts.length;\n while (remaining > 0) {\n i = (i + delta + opts.length) % opts.length;\n if (!opts[i]?.disabled()) {\n this.setActive(i);\n return;\n }\n remaining -= 1;\n }\n }\n\n private setActive(index: number): void {\n if (index < 0) {\n return;\n }\n this.active.set(index);\n this.opts()[index]?.scrollIntoView();\n }\n\n /** Multi-letter type-ahead: keystrokes within 500 ms accumulate, so \"de\" jumps\n * to \"Delete\", not just the next \"d\". `onMatch` gets the matched index — the\n * open list arms it (`setActive`); a closed trigger commits it directly.\n * Returns true if the key was a type-ahead character (so a caller can stop). */\n typeahead(event: KeyboardEvent, onMatch: (index: number) => void): boolean {\n if (\n event.key.length !== 1 ||\n event.ctrlKey ||\n event.metaKey ||\n event.altKey\n ) {\n return false;\n }\n const now = Date.now();\n this.typeBuffer =\n now - this.typeAt > 500 ? event.key : this.typeBuffer + event.key;\n this.typeAt = now;\n const query = this.typeBuffer.toLowerCase();\n const opts = this.opts();\n const from = query.length === 1 ? 1 : 0;\n const current = Math.max(this.active(), 0);\n for (let i = 0; i < opts.length; i += 1) {\n const idx = (current + from + i) % opts.length;\n const o = opts[idx];\n if (o && !o.disabled() && o.label.toLowerCase().startsWith(query)) {\n onMatch(idx);\n return true;\n }\n }\n return true;\n }\n}\n","import {\n Component,\n ElementRef,\n afterRenderEffect,\n booleanAttribute,\n computed,\n contentChild,\n contentChildren,\n inject,\n input,\n isDevMode,\n model,\n output,\n type TemplateRef,\n viewChild,\n viewChildren,\n} from \"@angular/core\";\nimport { FOLD_COMMON_LABELS } from \"../common-labels\";\nimport { NgTemplateOutlet } from \"@angular/common\";\nimport type { FormValueControl, ValidationError } from \"@angular/forms/signals\";\nimport { FoldIdService } from \"../../../a11y/id.service\";\nimport { FoldIconComponent } from \"../../foundations/icon/icon.component\";\nimport { FoldPopoverComponent } from \"../../overlays/popover/popover.component\";\nimport { FoldPopoverTriggerDirective } from \"../../overlays/popover/popover-trigger.directive\";\nimport type { FoldPopoverPlacement } from \"../../overlays/popover/placement\";\nimport { FoldInputBaseComponent } from \"../input/input-base.component\";\nimport { FoldOptionComponent } from \"./option.component\";\nimport { FoldOptgroupComponent } from \"./optgroup.component\";\nimport {\n type FoldSelectItem,\n type FoldSelectOption,\n type FoldSelectOptionGroup,\n isFoldSelectOptionGroup,\n} from \"./select-option\";\nimport { FoldListboxNav } from \"./listbox-nav\";\nimport {\n FOLD_LISTBOX_OWNER,\n warnOnOrphanValue,\n type FoldListboxOwner,\n} from \"./listbox-owner\";\n\n/**\n * `` — a **styleable** single-select, the richer sibling of the\n * native-`` does on blur. Without this a `required` select that the\n * user opens and dismisses would never surface its error. */\n private hasOpened = false;\n\n constructor() {\n // On open, move focus into the list and arm the active row on the selection\n // (or the first enabled option). Deferred to a microtask so it runs AFTER the\n // popover's render effect has shown the panel in the same flush. On close,\n // mark touched (blur parity).\n afterRenderEffect(() => {\n if (this.open()) {\n this.hasOpened = true;\n queueMicrotask(() => {\n if (this.open()) {\n this.list()?.nativeElement.focus();\n this.nav.arm(this.selectedIndex());\n }\n });\n } else {\n this.nav.reset();\n if (this.hasOpened) {\n this.touched.set(true);\n }\n }\n });\n warnOnOrphanValue(\n () => {\n const v = this.value();\n return v === null ? [] : [v];\n },\n () => this.allOptions(),\n (a, b) => this.eq(a, b),\n \"fold-listbox\",\n );\n if (isDevMode()) {\n afterRenderEffect(() => {\n if (this.options() && this.projectedOptions().length > 0) {\n console.warn(\n \"[fold-listbox] both `[options]` and projected given — the array wins, the projected ones are ignored.\",\n );\n }\n });\n }\n }\n\n /** A value is selected when it equals the current one (via `compareWith`). */\n isSelected(value: T): boolean {\n const v = this.value();\n return v !== null && this.eq(v, value);\n }\n\n /** Narrow an `[options]` entry to a group, or `null` — lets the template\n * branch on the two shapes with each side fully typed (no `any`). */\n protected asGroup(item: FoldSelectItem): FoldSelectOptionGroup | null {\n return isFoldSelectOptionGroup(item) ? item : null;\n }\n\n /** Narrow an `[options]` entry to a plain option, or `null`. */\n protected asOption(item: FoldSelectItem): FoldSelectOption | null {\n return isFoldSelectOptionGroup(item) ? null : item;\n }\n\n /** Clear the selection (the `allowClear` ×). */\n protected clear(event: Event): void {\n event.stopPropagation(); // don't let the trigger open\n this.value.set(null);\n this.touched.set(true);\n }\n\n /** Open with the keys a native select opens on; otherwise type-ahead picks\n * directly without opening — native-``, so keyboard, focus and\n * the `slider` role are all native). The fill is a `--sl-pct` custom property, so\n * there is no overlay markup. For a min↔max pair, use {@link FoldRangeSliderComponent}.\n *\n * Integrates with signal forms via `FormValueControl` (bind\n * `[formField]`), or drive it standalone with `[(value)]` / `(valueChange)`. A\n * visible `label` is a real `
`: native `
` display-none's its content when closed,\n * which cannot animate. This drives the panel with a `grid-template-rows`\n * `0fr → 1fr` transition (the content stays in flow, just clipped to zero\n * height), and wires the disclosure ARIA by hand — the summary is a `button`\n * with `aria-expanded` pointing at the panel via `aria-controls`.\n *\n * Content projection:\n * - `[summary]` → the always-visible trigger label (text, or a richer row).\n * - default slot → the collapsible panel.\n *\n * Two-way `open` (`[(open)]`) reflects and controls the state; a one-way\n * `[open]=\"true\"` starts it expanded; `toggle()` on the host (`exportAs:\n * \"foldDisclosure\"`) flips it from a template.\n *\n * Colour is CSS custom properties so a plain disclosure and a loud call-to-open\n * are the same component: `--fold-disclosure-summary-bg` (transparent) and\n * `--fold-disclosure-summary-color` (text) tint the summary bar — set them to a\n * primary fill for a CTA.\n *\n * @selector `fold-disclosure`\n *\n * @example\n * ```html\n * \n * How it works\n *

The panel, revealed on click.

\n * \n * ```\n */\n@Component({\n selector: \"fold-disclosure\",\n standalone: true,\n imports: [FoldIconComponent],\n exportAs: \"foldDisclosure\",\n host: { \"[class.is-open]\": \"open()\" },\n templateUrl: \"./disclosure.component.html\",\n styleUrl: \"./disclosure.component.scss\",\n})\nexport class FoldDisclosureComponent {\n /** Whether the panel is expanded. Two-way: `[(open)]`. */\n readonly open = model(false);\n\n /** Panel id, so the summary button can point `aria-controls` at it. */\n protected readonly panelId = inject(FoldIdService).next(\"fold-disclosure\");\n\n toggle(): void {\n this.open.update((v) => !v);\n }\n}\n","\n \n \n\n\n
\n
\n
\n\n","import { Component, computed, input } from \"@angular/core\";\n\n/**\n * `` — a coloured badge indicating a status. Unlike the\n * generic {@link FoldBadgeComponent}, this maps a **status key** to a colour, so\n * call sites pass a domain status rather than choosing a variant.\n *\n * **Supported statuses**\n * - `active` / `connected` — success (green)\n * - `draft` / `pending` — warning (amber)\n * - `suspended` / `error` — alert (red)\n * - `coming-soon` / `not_connected` — muted grey\n * - any other value (e.g. `terminated`) — neutral grey\n *\n * ```html\n * \n * \n * ```\n *\n * @selector `fold-status-badge`\n */\n@Component({\n selector: \"fold-status-badge\",\n standalone: true,\n templateUrl: \"./status-badge.component.html\",\n styleUrl: \"./status-badge.component.scss\",\n})\nexport class FoldStatusBadgeComponent {\n /** The status key that determines the colour. */\n readonly status = input.required();\n /** Display text — defaults to the raw `status` value. */\n readonly label = input(\"\");\n\n /** Collapses synonym keys onto the canonical colour states. */\n readonly normalizedStatus = computed(() => {\n const s = this.status();\n if (s === \"connected\") {\n return \"active\";\n }\n if (s === \"error\") {\n return \"suspended\";\n }\n if (s === \"not_connected\") {\n return \"coming-soon\";\n }\n return s;\n });\n}\n","{{\n label() || status()\n}}\n","import {\n booleanAttribute,\n Component,\n computed,\n contentChild,\n input,\n output,\n type TemplateRef,\n} from \"@angular/core\";\nimport { DatePipe, NgTemplateOutlet } from \"@angular/common\";\nimport { FoldIconComponent } from \"../../foundations/icon/icon.component\";\nimport type { FoldIconName } from \"../../foundations/icon/builtin-icons\";\n\n/** Where a node's date renders relative to its label. */\nexport type FoldTimelineDatePlacement = \"above\" | \"below\" | \"inline\" | \"hidden\";\n\n/** One node of a {@link FoldTimelineComponent}. */\nexport interface FoldTimelineNode {\n /** Stable track key. Also the click payload when {@link id} is `null`. */\n readonly key: string;\n /** Click payload; `null` means no id (see {@link clickable}). */\n readonly id: string | null;\n /**\n * Force the node interactive (a `\n } @else {\n \n \n \n }\n }\n\n\n@if (interactive()) {\n \n \n \n} @else {\n \n \n \n}\n","import { Component, computed, inject, input } from \"@angular/core\";\nimport { FOLD_COMMON_LABELS } from \"../../forms/common-labels\";\nimport { FoldSpinnerComponent } from \"../../foundations/spinner/spinner.component\";\nimport type { FoldSpinnerSize } from \"../../foundations/spinner/spinner.component\";\n\n/**\n * `` — a centered loading placeholder: a spinner over a muted\n * message. The host is a `role=\"status\"` / `aria-live=\"polite\"` region, so the\n * message is announced to assistive tech; the spinner is decorative. Drop it\n * anywhere a section is waiting on data — it stretches to fill (`flex: 1`).\n *\n * @selector `fold-loading`\n *\n * @example\n * ```html\n * \n * \n * \n * ```\n */\n@Component({\n selector: \"fold-loading\",\n standalone: true,\n imports: [FoldSpinnerComponent],\n templateUrl: \"./loading-state.component.html\",\n // Inline + tokens only, so the component is fully self-contained.\n styleUrl: \"./loading-state.component.scss\",\n host: {\n role: \"status\",\n \"aria-live\": \"polite\",\n },\n})\nexport class FoldLoadingStateComponent {\n /** Text to display. Defaults to \"Loading...\". */\n readonly message = input();\n\n /** Spinner size — an icon-size token (`xs…xl`, default `md`) or a pixel number. */\n readonly size = input(\"md\");\n\n private readonly common = inject(FOLD_COMMON_LABELS);\n\n /** English default ← app-wide provider ← this instance's own input. */\n protected readonly text = computed(\n () => this.message() ?? this.common.loading,\n );\n}\n","
\n \n @if (text(); as message) {\n {{ message }}\n }\n
\n","import { Component, input } from \"@angular/core\";\nimport { FoldIconComponent } from \"../../foundations/icon/icon.component\";\nimport type { FoldIconSize } from \"../../foundations/icon/icon.component\";\nimport type { FoldIconName } from \"../../foundations/icon/builtin-icons\";\n\n/**\n * `` — centered empty state with an optional icon, a title, an\n * optional subtitle and an optional action.\n *\n * The glyph comes from `icon` — a registered icon name, the common case:\n *\n * ```html\n * \n * ```\n *\n * Content projection carries a custom illustration and the action:\n * - `[empty-icon]` — projected above the title, for art the registry can't hold\n * (a bespoke SVG, an image). It **wins** over `icon` when both are given.\n * - default `ng-content` — projected below the subtitle (typically a button)\n *\n * `tone=\"alert\"` turns it into an error state (red title + icon); the default\n * `neutral` tone is the plain empty state.\n *\n * @selector `fold-empty-state`\n *\n * @example\n * ```html\n * \n * \n * \n * \n * \n * \n *\n * \n * ```\n */\n@Component({\n selector: \"fold-empty-state\",\n standalone: true,\n imports: [FoldIconComponent],\n // `[attr.title]: null` strips the native attribute a static `title=\"…\"`\n // leaves behind, so the heading input never doubles as a browser tooltip.\n host: { \"[class.alert]\": \"tone() === 'alert'\", \"[attr.title]\": \"null\" },\n templateUrl: \"./empty-state.component.html\",\n styleUrl: \"./empty-state.component.scss\",\n})\nexport class FoldEmptyStateComponent {\n /** The bold primary line. */\n readonly title = input.required();\n /** Optional muted secondary line. */\n readonly subtitle = input(\"\");\n /**\n * The glyph above the title, by registered name — the common case, so the\n * caller doesn't have to know a slot exists.\n *\n * A **projected** `[empty-icon]` wins: the slot stays the way to supply art\n * the registry can't hold (rule 4.7's illustration exception).\n */\n readonly icon = input();\n\n /** Size of the `icon` glyph. Projected art sizes itself. @default 'xl' */\n readonly iconSize = input(\"xl\");\n\n /** `alert` renders an error state (red title + icon); `neutral` is default. */\n readonly tone = input<\"neutral\" | \"alert\">(\"neutral\");\n}\n","
\n
\n \n \n @if (icon(); as name) {\n \n }\n
\n

{{ title() }}

\n @if (subtitle()) {\n

{{ subtitle() }}

\n }\n
\n \n
\n
\n","import { booleanAttribute, Component, computed, input } from \"@angular/core\";\n\n/** Which rail(s) sit on the band ground. A side, never a bare boolean: a band\n * has a side, and `band` alone would not say which. */\nexport type FoldAsideBand = \"none\" | \"left\" | \"right\" | \"both\";\n\n/**\n * `` — a centered, self-scrolling content column flanked by\n * up to two sticky side rails. The detail-page archetype: a stack of\n * `fold-page-section`s in the middle, sticky asides beside it, collapsing to a\n * single column on narrow viewports.\n *\n * Content goes in three slots; the grid adapts to whichever rails are filled\n * (via `:has()`), so an omitted rail simply drops its column (reactively, even\n * if the rail appears/disappears at runtime):\n * - default slot — the centre content column (the scroll-length driver): every\n * element that isn't tagged as a rail. Its blocks are stacked for you.\n * - `[asideLeft]` — optional left rail (e.g. a timeline); its presence turns on\n * the third column. Tag each element that belongs in it.\n * - `[asideRight]` — the right rail (history, actions…). Tag each element.\n *\n * Rail content is tagged per-element (not wrapped in one node) so the layout\n * stacks it directly — that's what lets it style the projected blocks without\n * reaching through view encapsulation.\n *\n * Scroll-agnostic: the asides stick relative to the page's own scroll\n * container (its ancestor), so a page keeps whatever scroll it already owns —\n * the layout just drops the grid + `position: sticky` + responsive boilerplate\n * every detail page was hand-rolling. It inlines the same sticky flow as\n * `foldStickyColumn` (top anchor) because it owns its columns, and pairs with a\n * `fold-page-section` stack in the centre.\n *\n * Inputs are kept minimal: optional a11y labels ({@link asideLeftLabel} /\n * {@link asideRightLabel}) — set one and that rail becomes a labelled\n * `complementary` landmark, leave it unset and the rail is a plain container\n * (no anonymous landmark noise) — plus {@link topOffset}, a convenience over the\n * sticky-offset var. Everything else is CSS custom properties on the host. Each\n * of the three tracks is a var: `--fold-aside-layout-rail-width`\n * (220px) · `--fold-aside-layout-center-width` (`minmax(0, 1fr)`) ·\n * `--fold-aside-layout-side-width` (300px). Rails default to a fixed width and\n * the centre flexes; set all three to `minmax(0, 1fr)` for **equal columns**.\n * Also `--fold-aside-layout-gap` (28px) · `--fold-aside-layout-max` (1240px) ·\n * `--fold-aside-layout-top` (24px, the sticky offset — override per rail with\n * `--fold-aside-layout-left-top` / `--fold-aside-layout-right-top`) ·\n * `--fold-aside-layout-rail-max` (the cap above which a taller-than-viewport rail\n * scrolls internally instead of being clipped by `sticky`). The page still owns\n * the scroll container the asides stick within.\n *\n * ```scss\n * // three equal columns\n * fold-aside-layout {\n * --fold-aside-layout-rail-width: minmax(0, 1fr);\n * --fold-aside-layout-center-width: minmax(0, 1fr);\n * --fold-aside-layout-side-width: minmax(0, 1fr);\n * }\n * ```\n *\n * @selector `fold-aside-layout`\n *\n * @example\n * ```html\n * \n * \n *\n * \n * …\n *\n * \n * \n * \n * ```\n */\n@Component({\n selector: \"fold-aside-layout\",\n standalone: true,\n templateUrl: \"./aside-layout.component.html\",\n styleUrl: \"./aside-layout.component.scss\",\n host: {\n \"[style.--fold-aside-layout-top]\": \"topOffsetCss()\",\n \"[class.stack-left-first]\": \"stackLeftFirst()\",\n \"[attr.data-band]\": \"band() === 'none' ? null : band()\",\n \"[class.is-bleed]\": \"bleed()\",\n },\n})\nexport class FoldAsideLayoutComponent {\n /**\n * When the layout collapses to one column, place the left rail **above** the\n * centre instead of below it. Use it when the rail is navigation (a tab-nav),\n * so the menu still precedes the content it drives; leave it off for a\n * companion rail (a timeline, history) where the content should come first.\n */\n readonly stackLeftFirst = input(false, { transform: booleanAttribute });\n\n /**\n * Which rail(s) sit on the **band** ground — `--fold-color-surface-band`, one\n * step away from the page in whichever direction the theme's polarity\n * dictates. It is the same role, and the same gesture, as `fold-card`'s\n * `raisedBands` and `fold-page-layout`'s `headerBand`.\n *\n * A banded rail **closes the column gutter** and separates with a hairline\n * instead. That is not decoration: a ground held 28px away from the content\n * it accompanies does not read as a band, it reads as a floating card. The\n * reading space moves inside — the rail pays its own padding\n * (`--fold-aside-layout-band-pad`), and the centre pays the matching inset on\n * that side — so switching the band on does not change how wide the content\n * reads.\n *\n * Once the layout collapses to one column there are no columns to separate,\n * so the band keeps only its ground and its padding.\n */\n readonly band = input(\"none\");\n\n /**\n * Break out of the page gutter to span the layout edge-to-edge — it cancels\n * `--fold-page-gutter-effective`, the gutter a `fold-page-layout` actually\n * pays, so it stays flush at every breakpoint (including below 640px, where\n * the page halves its inset). Only meaningful inside a `fold-page-layout`.\n *\n * Reach for it when the rails carry a `band`: a banded rail held off the page\n * edge by a gutter is the floating card the band exists to replace. Set\n * `--fold-aside-layout-pad: 0` with it, or the layout pays an inset of its\n * own on top of the one you just cancelled.\n */\n readonly bleed = input(false, { transform: booleanAttribute });\n /**\n * Accessible label for the left rail. Set it and the rail is exposed as a\n * labelled `complementary` landmark; leave it unset and the rail is a plain\n * container (no landmark), so screen readers aren't given an anonymous region.\n */\n readonly asideLeftLabel = input();\n /** Accessible label for the right rail — same rule as {@link asideLeftLabel}. */\n readonly asideRightLabel = input();\n\n /**\n * The rails' sticky offset — a number (px) or any CSS length. A convenience\n * over the `--fold-aside-layout-top` var (which it sets); leave it unset to keep\n * the 24px default or a per-rail `--fold-aside-layout-left-top` /\n * `-right-top` override.\n *\n * It's the gap the rail keeps from the top **once it sticks** (i.e. after you\n * scroll). At rest the rail already lines up with the centre via the shared\n * grid padding, and `sticky` only ever pushes down, never up — so an offset\n * *below* the grid's top padding has no visible effect until you scroll (a\n * value like `0`–`20` looks inert on a page padded by 28px). Raise the offset\n * past the padding to push the resting rail down; to pull it up, shrink\n * `--fold-aside-layout-pad` instead.\n */\n readonly topOffset = input();\n\n /** The offset as a CSS length, or `null` to leave the var untouched. */\n protected readonly topOffsetCss = computed(() => {\n const o = this.topOffset();\n if (o === undefined) {\n return null;\n }\n return typeof o === \"number\" ? `${o}px` : o;\n });\n}\n","
\n \n \n
\n
\n \n \n \n\n","/**\n * The width thresholds the nav family shares, in px.\n *\n * One number, one place. They were three literals in three files with nothing\n * coordinating them — the rail folded on 720 (container), the table switched to\n * cards on 700 (viewport), and the nav gap tightened on 640 (viewport) — so the\n * fold and the spacing could flip independently of each other.\n *\n * All of these are measured on a component's OWN box (`observeElementWidth`),\n * never on the window: `_tab-bar.scss` states the principle — \"container width\n * is the only axis\" — and this is where it is kept.\n */\n\n/**\n * Below this, a nav column has no room for page rhythm: the gap between a bar\n * and the content it introduces tightens so the two read as one block.\n */\nexport const FOLD_NARROW = 640;\n","import {\n InjectionToken,\n type Signal,\n type WritableSignal,\n} from \"@angular/core\";\n\n/**\n * The slice of a {@link FoldNavLayoutComponent} that a projected bar reads to\n * follow the layout — exposed through DI so a `fold-view-nav` / `fold-tabs` with\n * `direction=\"auto\"` orients itself without the consumer wiring `tl.stacked()`.\n */\nexport interface FoldNavLayoutContext {\n /**\n * True when the layout currently stacks the bar **above** the content (a `top`\n * placement, or a `side` rail that has folded) — i.e. the bar should be\n * horizontal. False when it sits as a vertical rail beside the content.\n */\n readonly stacked: Signal;\n\n /**\n * Written by the projected bar, read by the layout: true while the bar shows\n * icons only.\n *\n * The context used to run ONE way — the bar knew everything about the layout\n * and the layout nothing about the bar — so `collapsed` (the bar's prop) and\n * the rail width (the layout's) had no way to meet. `fold-view-nav`'s own\n * JSDoc said to \"narrow the layout's `--fold-nav-layout-rail-width` to\n * match\", by hand, at every call site. A system does not delegate that.\n */\n readonly barCollapsed: WritableSignal;\n}\n\n/** DI handle for the nearest {@link FoldNavLayoutComponent}, if any. */\nexport const FOLD_NAV_LAYOUT = new InjectionToken(\n \"FOLD_NAV_LAYOUT\",\n);\n","import {\n computed,\n Component,\n input,\n numberAttribute,\n signal,\n} from \"@angular/core\";\nimport { observeElementWidth } from \"../../../dom/observe-element-width\";\nimport { foldAt } from \"../../../dom/fold-at\";\nimport { FOLD_NARROW } from \"../breakpoints\";\nimport {\n FOLD_NAV_LAYOUT,\n type FoldNavLayoutContext,\n} from \"./nav-layout.context\";\n\n/**\n * `` — pairs a tab bar with the content it drives, and owns the\n * one thing every tabbed page hand-rolls: where the nav sits.\n *\n * - `placement=\"top\"` (default) — the nav above the content.\n * - `placement=\"side\"` — the nav as a rail beside the content, folding back on\n * top when the layout gets narrower than {@link foldAt} (so the menu always\n * precedes the content it drives, never below it).\n *\n * Content projection — the bar stays yours (tabs, active key, events):\n * - `[tabNav]` → the bar. Project a {@link FoldViewNavComponent} if the tabs\n * **navigate** (route between views) or a {@link FoldTabsComponent} if they\n * **switch panels in place** — this layout is agnostic, it only places the bar.\n * - default slot → the content (routed views, or the tabs' `fold-tab-panel`s).\n *\n * **A11y lives in the bar, not here.** `fold-view-nav` brings `