@joanroucoux/cairn-ui 0.9.1 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 0.9.2
+
+### Breaking
+
+- `ui-drawer`: `label` names the drawer whenever it is set, even with a `heading`, which stays the visible title.
+  Before, a `label` beside a `heading` was ignored and the heading named the drawer.
+- Migration: a drawer that passes both and should keep the heading as its name drops `label`; a test that found it
+  with `getByRole('dialog', { name: heading })` looks it up by the label instead.
+- `ui-back-link size="inline"` carries the outset it is drawn with at the top of a form column: -8px above, -4px
+  below, -6px on the left, and `align-self: flex-start`. The other sizes still add no margin.
+- Migration: drop the placement classes put on the link (`-mt-2 -mb-1 -ml-1.5 self-start`); an inline back link
+  placed anywhere but the top of a flex column overrides them.
+
+### Changed
+
+- `ui-row size="dense"` is 56px at every width, like the result rows it is drawn for; it was 48px from 64rem.
+- `ui-dialog`: without a `description`, the title and the cross are centred on each other in the header; with one,
+  they still line up at the top.
+- `text-label` sets a normal letter spacing (`--text-label--letter-spacing` in `theme.css`, `--tracking-label` in
+  `tokens.css`), so `text-caption lg:text-label` drops the caption tracking with no `tracking-normal`. A `text-label`
+  element no longer inherits the letter spacing of its parent.
+
+### Fixed
+
+- `td[ui-group-cell] collapsible`: the band fades its hover fill in over `--duration-fast` on `--ease-out`, like the
+  rows under it, instead of switching at once.
+- Stories and specs no longer use « Changer de cotation », an action Cairn removed, as a sample menu item.
+
+### Added
+
+- `UiHighlight`: a `highlighted` output, emitted when the flash starts (after the scroll into view and any enter
+  animation), so a toast can follow the highlight without watching the element's animations. A highlight replaced by
+  a newer token before it started never emits.
+
 ## 0.9.1
 
 ### Fixed

package/fesm2022/joanroucoux-cairn-ui-back-link.mjs

@@ -12,7 +12,7 @@ const SIZE_CLASSES = {
 	md: "h-11 pr-3 pl-1 text-body text-(--foreground) focus-visible:outline-offset-2",
 	sm: "h-9 pr-2 pl-0.5 text-body text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2",
 	header: "h-11 pr-3 pl-1 text-body text-(--foreground) focus-visible:-outline-offset-2",
-	inline: "h-11 pointer-fine:h-9 pr-2 pl-0.5 text-label text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-offset-2"
+	inline: "h-11 pointer-fine:h-9 pr-2 pl-0.5 -mt-2 -mb-1 -ml-1.5 self-start text-label text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-offset-2"
 };
 const CHEVRON = {
 	md: 22,

package/fesm2022/joanroucoux-cairn-ui-back-link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-back-link.mjs","names":[],"sources":["../../../projects/ui/back-link/back-link.ts"],"sourcesContent":["import { Component, ElementRef, HostAttributeToken, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Available back link sizes. */\nexport const BACK_LINK_SIZES = ['md', 'sm', 'header', 'inline'] as const;\nexport type BackLinkSize = (typeof BACK_LINK_SIZES)[number];\n\nconst BASE_CLASSES =\n  'inline-flex items-center gap-0.5 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring)';\n\nconst SIZE_CLASSES: Record<BackLinkSize, string> = {\n  md: 'h-11 pr-3 pl-1 text-body text-(--foreground) focus-visible:outline-offset-2',\n  sm: 'h-9 pr-2 pl-0.5 text-body text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',\n  header: 'h-11 pr-3 pl-1 text-body text-(--foreground) focus-visible:-outline-offset-2',\n  inline:\n    'h-11 pointer-fine:h-9 pr-2 pl-0.5 text-label text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-offset-2',\n};\n\nconst CHEVRON: Record<BackLinkSize, number> = { md: 22, sm: 22, header: 24, inline: 18 };\n\n/**\n * Link back to the parent screen: a chevron and the name of the destination. On a `button`, it\n * goes back inside the current view, such as from a form to the search that led to it.\n *\n * @example\n * <a ui-back-link routerLink=\"/accounts\">Accounts</a>\n */\n@Component({\n  selector: 'a[ui-back-link], button[ui-back-link]',\n  template: `\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"1.75\"\n      viewBox=\"0 0 24 24\"\n      [attr.height]=\"chevron()\"\n      [attr.width]=\"chevron()\"\n    >\n      <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n    <ng-content />\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.type]': 'type',\n  },\n})\nexport class UiBackLink {\n  readonly size = input<BackLinkSize>('md');\n\n  protected readonly type =\n    inject(new HostAttributeToken('type'), { optional: true }) ??\n    (inject<ElementRef<HTMLElement>>(ElementRef).nativeElement.tagName === 'BUTTON' ? 'button' : null);\n  protected readonly chevron = computed(() => CHEVRON[this.size()]);\n  protected readonly classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`);\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n"],"mappings":";;;AAKA,MAAa,kBAAkB;CAAC;CAAM;CAAM;CAAU;AAAQ;AAG9D,MAAM,eACJ;AAEF,MAAM,eAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,QAAQ;CACR,QACE;AACH;AAED,MAAM,UAAwC;CAAE,IAAI;CAAI,IAAI;CAAI,QAAQ;CAAI,QAAQ;AAAE;AAgCtF,IAAa,aAAb,MAAa,WAAU;CACZ,OAAO,MAAoB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEtB,OACjB,OAAO,IAAI,mBAAmB,MAAM,GAAG,EAAE,UAAU,KAAI,CAAE,MACxD,OAAgC,UAAU,CAAC,CAAC,cAAc,YAAY,WAAW,WAAW;CAC5E,UAAU,eAAe,QAAQ,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,UAAU,eAAe,GAAG,aAAY,GAAI,aAAa,KAAK,KAAI,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAE3F,cAAA;EACE,6BAA4B;CAC9B;CAXW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,aAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UArBX;;;;;;;;;;;;;;;;EAeT,UAAA;CAAA,CAAA;;AAMU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAvBtB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;;;GAgBV,MAAM;IACJ,WAAW;IACX,eAAe;GAChB;EACF,CAAA"}
+{"version":3,"file":"joanroucoux-cairn-ui-back-link.mjs","names":[],"sources":["../../../projects/ui/back-link/back-link.ts"],"sourcesContent":["import { Component, ElementRef, HostAttributeToken, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Available back link sizes. */\nexport const BACK_LINK_SIZES = ['md', 'sm', 'header', 'inline'] as const;\nexport type BackLinkSize = (typeof BACK_LINK_SIZES)[number];\n\nconst BASE_CLASSES =\n  'inline-flex items-center gap-0.5 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring)';\n\nconst SIZE_CLASSES: Record<BackLinkSize, string> = {\n  md: 'h-11 pr-3 pl-1 text-body text-(--foreground) focus-visible:outline-offset-2',\n  sm: 'h-9 pr-2 pl-0.5 text-body text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',\n  header: 'h-11 pr-3 pl-1 text-body text-(--foreground) focus-visible:-outline-offset-2',\n  inline:\n    'h-11 pointer-fine:h-9 pr-2 pl-0.5 -mt-2 -mb-1 -ml-1.5 self-start text-label text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-offset-2',\n};\n\nconst CHEVRON: Record<BackLinkSize, number> = { md: 22, sm: 22, header: 24, inline: 18 };\n\n/**\n * Link back to the parent screen: a chevron and the name of the destination. On a `button`, it\n * goes back inside the current view, such as from a form to the search that led to it.\n *\n * @example\n * <a ui-back-link routerLink=\"/accounts\">Accounts</a>\n */\n@Component({\n  selector: 'a[ui-back-link], button[ui-back-link]',\n  template: `\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"1.75\"\n      viewBox=\"0 0 24 24\"\n      [attr.height]=\"chevron()\"\n      [attr.width]=\"chevron()\"\n    >\n      <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n    <ng-content />\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.type]': 'type',\n  },\n})\nexport class UiBackLink {\n  readonly size = input<BackLinkSize>('md');\n\n  protected readonly type =\n    inject(new HostAttributeToken('type'), { optional: true }) ??\n    (inject<ElementRef<HTMLElement>>(ElementRef).nativeElement.tagName === 'BUTTON' ? 'button' : null);\n  protected readonly chevron = computed(() => CHEVRON[this.size()]);\n  protected readonly classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`);\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n"],"mappings":";;;AAKA,MAAa,kBAAkB;CAAC;CAAM;CAAM;CAAU;AAAQ;AAG9D,MAAM,eACJ;AAEF,MAAM,eAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,QAAQ;CACR,QACE;AACH;AAED,MAAM,UAAwC;CAAE,IAAI;CAAI,IAAI;CAAI,QAAQ;CAAI,QAAQ;AAAE;AAgCtF,IAAa,aAAb,MAAa,WAAU;CACZ,OAAO,MAAoB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEtB,OACjB,OAAO,IAAI,mBAAmB,MAAM,GAAG,EAAE,UAAU,KAAI,CAAE,MACxD,OAAgC,UAAU,CAAC,CAAC,cAAc,YAAY,WAAW,WAAW;CAC5E,UAAU,eAAe,QAAQ,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,UAAU,eAAe,GAAG,aAAY,GAAI,aAAa,KAAK,KAAI,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAE3F,cAAA;EACE,6BAA4B;CAC9B;CAXW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,aAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UArBX;;;;;;;;;;;;;;;;EAeT,UAAA;CAAA,CAAA;;AAMU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAvBtB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;;;GAgBV,MAAM;IACJ,WAAW;IACX,eAAe;GAChB;EACF,CAAA"}

package/fesm2022/joanroucoux-cairn-ui-dialog.mjs

@@ -277,7 +277,7 @@ var UiDialog = class UiDialog {
 	}, ...ngDevMode ? [{ debugName: "widthValue" }] : /* istanbul ignore next */ []);
 	spec = computed(() => VARIANTS[this.variant()], ...ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []);
 	hairlines = computed(() => Boolean(this.closeLabel()) && this.variant() === "default", ...ngDevMode ? [{ debugName: "hairlines" }] : /* istanbul ignore next */ []);
-	headerClasses = computed(() => `flex items-start gap-2 pl-4 max-lg:touch-none lg:gap-3 ${this.spec().header} ${this.closeLabel() ? "pr-2 lg:pr-4" : "pr-4 lg:pr-6"} ${this.hairlines() ? "shadow-[inset_0_-1px_0_var(--hairline)]" : ""}`, ...ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []);
+	headerClasses = computed(() => `flex ${this.description() ? "items-start" : "items-center"} gap-2 pl-4 max-lg:touch-none lg:gap-3 ${this.spec().header} ${this.closeLabel() ? "pr-2 lg:pr-4" : "pr-4 lg:pr-6"} ${this.hairlines() ? "shadow-[inset_0_-1px_0_var(--hairline)]" : ""}`, ...ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []);
 	crossClasses = "rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground)";
 	footerClasses = computed(() => `max-lg:[&>[ui-button]]:text-body flex justify-end gap-2 px-4 pb-[calc(8px+env(safe-area-inset-bottom))] max-lg:flex-col-reverse max-lg:[&>[ui-button]]:h-[50px] max-lg:[&>[ui-button]]:w-full lg:px-6 ${this.spec().footer} ${this.hairlines() ? "shadow-[inset_0_1px_0_var(--hairline)]" : ""}`, ...ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []);
 	classes = computed(() => `open:flex w-full flex-col overflow-hidden m-auto mt-auto max-lg:max-h-[calc(100dvh-2rem)] lg:max-h-[calc(100dvh-96px)] max-lg:mb-0 max-lg:max-w-none max-lg:rounded-b-none lg:max-w-(--dialog-width) rounded-container bg-(--card) text-(--foreground) outline-none shadow-[0_0_0_1px_var(--border),0_24px_64px_rgb(0_0_0/0.24)] max-lg:shadow-[0_-1px_0_var(--border),0_-12px_32px_rgb(0_0_0/0.16)] ${this.stacked() ? "backdrop:bg-black/[0.24]" : "backdrop:bg-black/[0.36]"} ${this.sheet() === "full" ? "max-lg:h-[calc(100dvh-58px)]" : ""}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);

package/fesm2022/joanroucoux-cairn-ui-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-dialog.mjs","names":[],"sources":["../../../projects/ui/dialog/internal/dialog-styles.ts","../../../projects/ui/dialog/internal/dialog-exit.ts","../../../projects/ui/dialog/internal/modal-close.ts","../../../projects/ui/dialog/internal/sheet-drag.ts","../../../projects/ui/dialog/dialog.ts"],"sourcesContent":["export const DIALOG_STYLES = `\ndialog {\n  --dialog-ease: var(--ease-sheet);\n  transition:\n    transform var(--duration-base) var(--dialog-ease),\n    overlay var(--duration-base) allow-discrete,\n    display var(--duration-base) allow-discrete;\n  transform: translateY(var(--drag-y, 0px));\n}\n\ndialog:not([open]) {\n  transform: translateY(100%);\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open] {\n    transform: translateY(100%);\n  }\n}\n\ndialog[data-dragging] {\n  transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog {\n    transition:\n      opacity var(--duration-base) var(--dialog-ease),\n      overlay var(--duration-base) allow-discrete,\n      display var(--duration-base) allow-discrete;\n    opacity: 1;\n  }\n\n  dialog:not([open]) {\n    opacity: 0;\n    transform: translateY(var(--drag-y, 0px));\n  }\n\n  @starting-style {\n    dialog[open] {\n      opacity: 0;\n      transform: translateY(0);\n    }\n  }\n}\n\n@media (min-width: 64rem) {\n  dialog {\n    --dialog-ease: var(--ease-out);\n    transition:\n      opacity var(--duration-base) var(--dialog-ease),\n      transform var(--duration-base) var(--dialog-ease),\n      overlay var(--duration-base) allow-discrete,\n      display var(--duration-base) allow-discrete;\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  dialog:not([open]) {\n    opacity: 0;\n    transform: scale(var(--enter-scale));\n  }\n\n  @starting-style {\n    dialog[open] {\n      opacity: 0;\n      transform: scale(var(--enter-scale));\n    }\n  }\n}\n\ndialog::backdrop {\n  transition: opacity var(--duration-base) var(--ease-out);\n  opacity: 1;\n}\n\ndialog:not([open])::backdrop {\n  opacity: 0;\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n`;\n","const GRACE = 50;\n\nexport function afterExit(element: HTMLElement, done: () => void): () => void {\n  const style = getComputedStyle(element);\n  const wait = longest(style.transitionDuration) + longest(style.transitionDelay);\n\n  if (wait === 0) {\n    done();\n    return () => undefined;\n  }\n\n  const onEnd = (event: TransitionEvent): void => {\n    if (event.target === element && !event.pseudoElement) {\n      cancel();\n      done();\n    }\n  };\n  const timer = setTimeout(() => {\n    cancel();\n    done();\n  }, wait + GRACE);\n  const cancel = (): void => {\n    clearTimeout(timer);\n    element.removeEventListener('transitionend', onEnd);\n  };\n\n  element.addEventListener('transitionend', onEnd);\n\n  return cancel;\n}\n\nfunction longest(list: string): number {\n  return Math.max(0, ...list.split(',').map(toMs));\n}\n\nfunction toMs(value: string): number {\n  const amount = Number.parseFloat(value);\n\n  if (Number.isNaN(amount)) {\n    return 0;\n  }\n\n  return value.trim().endsWith('ms') ? amount : amount * 1000;\n}\n","import { DestroyRef, ElementRef, type OutputEmitterRef, type Signal, afterRenderEffect, inject } from '@angular/core';\n\nimport { afterExit } from './dialog-exit';\n\ntype SharedReason = 'escape' | 'backdrop' | 'cross' | 'programmatic';\n\nexport type ModalCloseConfig<R extends string> = {\n  readonly open: Signal<boolean>;\n  readonly busy: Signal<boolean>;\n  readonly dismissed: OutputEmitterRef<void>;\n  readonly closed: OutputEmitterRef<R | SharedReason>;\n  readonly reset?: () => void;\n  readonly opening?: () => void;\n};\n\n/**\n * The close protocol of a modal on the native <dialog> under the host: `open` drives `showModal()` and `close()`,\n * Escape and a press-and-release on the veil close it unless `busy`, `dismissed` reports a close the user asked for\n * and `closed` its reason once the exit transition has played. `opening` runs just before `showModal()`. Must be\n * created in an injection context.\n */\nexport class ModalClose<R extends string> {\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef);\n  readonly #config: ModalCloseConfig<R>;\n\n  #pressedOnBackdrop = false;\n  #reason: R | SharedReason | null = null;\n  #cancelExit: () => void = () => undefined;\n\n  constructor(config: ModalCloseConfig<R>) {\n    this.#config = config;\n    inject(DestroyRef).onDestroy(() => this.#cancelExit());\n\n    afterRenderEffect(() => {\n      const dialog = this.#dialog;\n\n      if (config.open() && !dialog.open) {\n        this.#cancelExit();\n        config.reset?.();\n        config.opening?.();\n        dialog.showModal();\n      } else if (!config.open() && dialog.open) {\n        this.close('programmatic');\n      }\n    });\n  }\n\n  close(reason: R | SharedReason): void {\n    if (this.#dialog.open) {\n      this.#reason = reason;\n      this.#dialog.close();\n    }\n  }\n\n  onCancel(event: Event): void {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.preventDefault();\n    if (!this.#config.busy()) {\n      this.close('escape');\n    }\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.#config.busy() && (event.target as Element).closest('dialog') === this.#dialog) {\n      event.preventDefault();\n    }\n  }\n\n  onPointerDown(event: MouseEvent): void {\n    this.#pressedOnBackdrop = event.target === this.#dialog && this.#outside(event);\n  }\n\n  onClick(event: MouseEvent): void {\n    if (this.#pressedOnBackdrop && !this.#config.busy() && event.target === this.#dialog && this.#outside(event)) {\n      this.close('backdrop');\n    }\n    this.#pressedOnBackdrop = false;\n  }\n\n  onNativeClose(): void {\n    const asked = this.#reason;\n\n    this.#reason = null;\n    if (this.#dialog.open) {\n      return;\n    }\n    if (asked === null && this.#config.busy()) {\n      this.#dialog.showModal();\n      return;\n    }\n    const reason = asked ?? 'escape';\n    if (reason !== 'programmatic') {\n      this.#config.dismissed.emit();\n    }\n    this.#cancelExit();\n    this.#cancelExit = afterExit(this.#dialog, () => {\n      this.#cancelExit = () => undefined;\n      this.#config.reset?.();\n      this.#config.closed.emit(reason);\n    });\n  }\n\n  get #dialog(): HTMLDialogElement {\n    return this.#host.nativeElement.querySelector('dialog') as HTMLDialogElement;\n  }\n\n  #outside(event: MouseEvent): boolean {\n    const rect = this.#dialog.getBoundingClientRect();\n\n    return (\n      event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom\n    );\n  }\n}\n","const DISMISS_RATIO = 0.3;\nconst DISMISS_SPEED = 0.5;\nconst SPEED_WINDOW = 100;\nconst SLOP = 6;\nconst CONTROLS = 'button, a, input, select, textarea, [role=\"button\"]';\n\ntype Sample = { y: number; at: number };\n\ntype Gesture = {\n  id: number;\n  startX: number;\n  startY: number;\n  dragging: boolean;\n  height: number;\n  offset: number;\n  samples: Sample[];\n};\n\nexport class SheetDrag {\n  readonly #panel: HTMLElement;\n  readonly #grips: readonly HTMLElement[];\n  readonly #dismiss: () => void;\n  readonly #enabled: () => boolean;\n  #gesture: Gesture | null = null;\n\n  constructor(panel: HTMLElement, grips: readonly HTMLElement[], dismiss: () => void, enabled: () => boolean) {\n    this.#panel = panel;\n    this.#grips = grips;\n    this.#dismiss = dismiss;\n    this.#enabled = enabled;\n\n    for (const grip of grips) {\n      grip.addEventListener('pointerdown', this.#onDown);\n      grip.addEventListener('pointermove', this.#onMove);\n      grip.addEventListener('pointerup', this.#onUp);\n      grip.addEventListener('pointercancel', this.#onCancel);\n    }\n  }\n\n  reset(): void {\n    this.#gesture = null;\n    this.#panel.removeAttribute('data-dragging');\n    this.#panel.style.removeProperty('--drag-y');\n  }\n\n  destroy(): void {\n    for (const grip of this.#grips) {\n      grip.removeEventListener('pointerdown', this.#onDown);\n      grip.removeEventListener('pointermove', this.#onMove);\n      grip.removeEventListener('pointerup', this.#onUp);\n      grip.removeEventListener('pointercancel', this.#onCancel);\n    }\n  }\n\n  readonly #onDown = (event: PointerEvent): void => {\n    const grip = event.currentTarget as HTMLElement;\n\n    if (event.button !== 0 || !this.#enabled() || !isSheet() || (event.target as Element).closest(CONTROLS)) {\n      return;\n    }\n\n    grip.setPointerCapture(event.pointerId);\n    this.#gesture = {\n      id: event.pointerId,\n      startX: event.clientX,\n      startY: event.clientY,\n      dragging: false,\n      height: 0,\n      offset: 0,\n      samples: [{ y: event.clientY, at: event.timeStamp }],\n    };\n  };\n\n  readonly #onMove = (event: PointerEvent): void => {\n    const gesture = this.#current(event);\n\n    if (!gesture) {\n      return;\n    }\n\n    const dx = event.clientX - gesture.startX;\n    const dy = event.clientY - gesture.startY;\n\n    if (!gesture.dragging) {\n      if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) {\n        return;\n      }\n      if (Math.abs(dx) > Math.abs(dy)) {\n        this.#gesture = null;\n        return;\n      }\n      gesture.dragging = true;\n      gesture.height = this.#panel.getBoundingClientRect().height;\n      this.#panel.setAttribute('data-dragging', '');\n    }\n\n    gesture.offset = Math.max(0, dy);\n    gesture.samples.push({ y: event.clientY, at: event.timeStamp });\n    this.#panel.style.setProperty('--drag-y', `${gesture.offset}px`);\n  };\n\n  readonly #onUp = (event: PointerEvent): void => {\n    const gesture = this.#current(event);\n\n    if (!gesture) {\n      return;\n    }\n\n    this.#gesture = null;\n\n    if (!gesture.dragging) {\n      return;\n    }\n\n    this.#panel.removeAttribute('data-dragging');\n\n    const release = { y: event.clientY, at: event.timeStamp };\n\n    if (gesture.offset > gesture.height * DISMISS_RATIO || releaseSpeed(gesture.samples, release) > DISMISS_SPEED) {\n      this.#dismiss();\n    } else {\n      this.reset();\n    }\n  };\n\n  readonly #onCancel = (event: PointerEvent): void => {\n    if (this.#current(event)) {\n      this.#gesture = null;\n      this.#panel.removeAttribute('data-dragging');\n      this.reset();\n    }\n  };\n\n  #current(event: PointerEvent): Gesture | null {\n    return this.#gesture?.id === event.pointerId ? this.#gesture : null;\n  }\n}\n\nfunction isSheet(): boolean {\n  return typeof matchMedia === 'function' && !matchMedia('(min-width: 64rem)').matches;\n}\n\nfunction releaseSpeed(samples: readonly Sample[], last: Sample): number {\n  const first = samples.find((sample) => sample.at >= last.at - SPEED_WINDOW) ?? last;\n  const elapsed = last.at - first.at;\n\n  return elapsed > 0 ? (last.y - first.y) / elapsed : 0;\n}\n","import {\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterNextRender,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { DIALOG_STYLES } from './internal/dialog-styles';\nimport { ModalClose } from './internal/modal-close';\nimport { SheetDrag } from './internal/sheet-drag';\n\n/** Named dialog widths; any other CSS length is accepted as is. */\nexport const DIALOG_WIDTHS = ['md', 'lg'] as const;\nexport type DialogWidth = (typeof DIALOG_WIDTHS)[number];\n\nconst WIDTH_VALUES: Record<DialogWidth, string> = {\n  md: '28rem',\n  lg: '560px',\n};\n\n/** `confirm` is a short alertdialog: no cross, no hairlines, one 24px padding, 440px wide unless told otherwise. */\nexport const DIALOG_VARIANTS = ['default', 'confirm'] as const;\nexport type DialogVariant = (typeof DIALOG_VARIANTS)[number];\n\n/** `full` makes the sheet under `64rem` fill the screen below the status area; `fit` sizes it to its content. */\nexport const DIALOG_SHEETS = ['fit', 'full'] as const;\nexport type DialogSheet = (typeof DIALOG_SHEETS)[number];\n\ntype VariantClasses = {\n  handle: string;\n  header: string;\n  body: string;\n  footer: string;\n};\n\nconst VARIANTS: Record<DialogVariant, VariantClasses> = {\n  default: {\n    handle: 'pt-[7.5px]',\n    header: 'pb-3 lg:py-4 lg:pl-6',\n    body: 'py-4 lg:py-5',\n    footer: 'pt-3 empty:hidden lg:py-4',\n  },\n  confirm: {\n    handle: 'pt-[11.5px]',\n    header: 'pt-3 lg:pt-6 lg:pl-6',\n    body: 'pt-3',\n    footer: 'not-empty:pt-5 lg:pb-6 lg:not-empty:pt-6',\n  },\n};\n\nconst DEFAULT_WIDTHS: Record<DialogVariant, string> = {\n  default: 'lg',\n  confirm: '440px',\n};\n\n/** What started a close, as `closed` reports it. */\nexport const DIALOG_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'drag', 'programmatic'] as const;\nexport type DialogCloseReason = (typeof DIALOG_CLOSE_REASONS)[number];\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-dialog-${++count}`;\n})();\n\n/**\n * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.\n *\n * `busy` keeps it open while its action runs: Escape, a backdrop click and a sheet drag do nothing\n * and the cross is disabled. The owner disables its own buttons and still closes it through `open`.\n *\n * @example\n * <ui-dialog heading=\"Buy\" description=\"Ferrari\" closeLabel=\"Close\" width=\"528px\" [open]=\"buying()\" (dismissed)=\"buying.set(false)\">\n *   <p>Body</p>\n *   <button dialogActions ui-button variant=\"outline\" class=\"max-lg:hidden\" (click)=\"buying.set(false)\">Cancel</button>\n *   <button dialogActions ui-button>Buy 40 shares</button>\n * </ui-dialog>\n */\n@Component({\n  selector: 'ui-dialog',\n  host: {\n    '(pointerdown)': 'modal.onPointerDown($event)',\n    '(click)': 'modal.onClick($event)',\n    '(keydown)': 'modal.onKeydown($event)',\n  },\n  template: `\n    <dialog\n      #dlg\n      [attr.aria-busy]=\"busy() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-labelledby]=\"headingId\"\n      [attr.role]=\"variant() === 'confirm' ? 'alertdialog' : 'dialog'\"\n      [class]=\"classes()\"\n      [style.--dialog-width]=\"widthValue()\"\n      (cancel)=\"modal.onCancel($event)\"\n      (close)=\"modal.onNativeClose()\"\n    >\n      <div\n        aria-hidden=\"true\"\n        class=\"flex h-5 touch-none justify-center lg:hidden\"\n        data-dialog-handle\n        [class]=\"spec().handle\"\n      >\n        <span class=\"rounded-pill h-[5px] w-9 bg-(--border)\"></span>\n      </div>\n\n      <div data-dialog-header [class]=\"headerClasses()\">\n        <div class=\"flex min-w-0 flex-1 flex-col\" [class.max-lg:pt-1]=\"description()\">\n          <h2 class=\"text-title font-semibold\" [id]=\"headingId\">{{ heading() }}</h2>\n\n          @if (description()) {\n            <p\n              class=\"text-label text-(--muted-foreground)\"\n              [class.truncate]=\"truncateDescription()\"\n              [id]=\"descriptionId\"\n            >\n              {{ description() }}\n            </p>\n          }\n        </div>\n\n        @if (closeLabel()) {\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeLabel()\"\n            [class]=\"crossClasses\"\n            [disabled]=\"busy()\"\n            (click)=\"modal.close('cross')\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"block size-[22px] fill-none stroke-current stroke-[1.75]\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div\n        class=\"min-h-0 flex-1 overflow-y-auto px-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) lg:px-6\"\n        data-dialog-body\n        [attr.aria-labelledby]=\"scrollable() ? headingId : null\"\n        [attr.role]=\"scrollable() ? 'region' : null\"\n        [attr.tabindex]=\"scrollable() ? 0 : null\"\n        [id]=\"bodyId\"\n      >\n        <div class=\"flex flex-col gap-4 empty:hidden\" [class]=\"spec().body\">\n          <ng-content />\n        </div>\n      </div>\n\n      <div data-dialog-footer [class]=\"footerClasses()\">\n        <ng-content select=\"[dialogActions]\" />\n      </div>\n    </dialog>\n  `,\n  styles: DIALOG_STYLES,\n})\nexport class UiDialog {\n  readonly heading = input.required<string>();\n  readonly description = input<string>();\n  readonly closeLabel = input<string>();\n  readonly variant = input<DialogVariant>('default');\n  readonly sheet = input<DialogSheet>('fit');\n  readonly truncateDescription = input(false, { transform: booleanAttribute });\n  readonly width = input<DialogWidth | (string & {})>();\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n  readonly closed = output<DialogCloseReason>();\n\n  protected readonly headingId = nextId();\n  protected readonly descriptionId = `${this.headingId}-description`;\n  protected readonly bodyId = `${this.headingId}-body`;\n  protected readonly scrollable = signal(false);\n  protected readonly stacked = signal(false);\n\n  protected readonly describedBy = computed(() => {\n    if (this.description()) {\n      return this.descriptionId;\n    }\n\n    return this.variant() === 'confirm' ? this.bodyId : null;\n  });\n\n  protected readonly widthValue = computed(() => {\n    const width = this.width() ?? DEFAULT_WIDTHS[this.variant()];\n\n    return Object.hasOwn(WIDTH_VALUES, width) ? WIDTH_VALUES[width as DialogWidth] : width;\n  });\n\n  protected readonly spec = computed(() => VARIANTS[this.variant()]);\n\n  protected readonly hairlines = computed(() => Boolean(this.closeLabel()) && this.variant() === 'default');\n\n  protected readonly headerClasses = computed(\n    () =>\n      `flex items-start gap-2 pl-4 max-lg:touch-none lg:gap-3 ${this.spec().header} ${this.closeLabel() ? 'pr-2 lg:pr-4' : 'pr-4 lg:pr-6'} ${this.hairlines() ? 'shadow-[inset_0_-1px_0_var(--hairline)]' : ''}`,\n  );\n\n  protected readonly crossClasses =\n    'rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground)';\n\n  protected readonly footerClasses = computed(\n    () =>\n      `max-lg:[&>[ui-button]]:text-body flex justify-end gap-2 px-4 pb-[calc(8px+env(safe-area-inset-bottom))] max-lg:flex-col-reverse max-lg:[&>[ui-button]]:h-[50px] max-lg:[&>[ui-button]]:w-full lg:px-6 ${this.spec().footer} ${this.hairlines() ? 'shadow-[inset_0_1px_0_var(--hairline)]' : ''}`,\n  );\n\n  protected readonly classes = computed(\n    () =>\n      `open:flex w-full flex-col overflow-hidden m-auto mt-auto max-lg:max-h-[calc(100dvh-2rem)] lg:max-h-[calc(100dvh-96px)] max-lg:mb-0 max-lg:max-w-none max-lg:rounded-b-none lg:max-w-(--dialog-width) rounded-container bg-(--card) text-(--foreground) outline-none shadow-[0_0_0_1px_var(--border),0_24px_64px_rgb(0_0_0/0.24)] max-lg:shadow-[0_-1px_0_var(--border),0_-12px_32px_rgb(0_0_0/0.16)] ${this.stacked() ? 'backdrop:bg-black/[0.24]' : 'backdrop:bg-black/[0.36]'} ${this.sheet() === 'full' ? 'max-lg:h-[calc(100dvh-58px)]' : ''}`,\n  );\n\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  #drag: SheetDrag | null = null;\n\n  protected readonly modal: ModalClose<DialogCloseReason>;\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n\n    afterNextRender(() => {\n      const host = this.#host.nativeElement;\n      const dialog = host.querySelector('dialog') as HTMLDialogElement;\n      const grips = ['[data-dialog-handle]', '[data-dialog-header]'].map(\n        (grip) => host.querySelector(grip) as HTMLElement,\n      );\n\n      this.#drag = new SheetDrag(\n        dialog,\n        grips,\n        () => this.modal.close('drag'),\n        () => !this.busy(),\n      );\n      destroyRef.onDestroy(() => this.#drag?.destroy());\n\n      if (typeof ResizeObserver === 'undefined') {\n        return;\n      }\n\n      const body = host.querySelector('[data-dialog-body]') as HTMLElement;\n      const observer = new ResizeObserver(() => this.scrollable.set(body.scrollHeight > body.clientHeight));\n\n      observer.observe(body);\n      observer.observe(body.firstElementChild as Element);\n      destroyRef.onDestroy(() => observer.disconnect());\n    });\n\n    this.modal = new ModalClose<DialogCloseReason>({\n      open: this.open,\n      busy: this.busy,\n      dismissed: this.dismissed,\n      closed: this.closed,\n      reset: () => this.#drag?.reset(),\n      opening: () => this.stacked.set(this.#overAnotherModal()),\n    });\n  }\n\n  #overAnotherModal(): boolean {\n    const open = this.#host.nativeElement.ownerDocument.querySelectorAll('dialog[open]');\n\n    return Array.from(open).some((dialog) => dialog.matches(':modal'));\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-dialog.mjs","names":[],"sources":["../../../projects/ui/dialog/internal/dialog-styles.ts","../../../projects/ui/dialog/internal/dialog-exit.ts","../../../projects/ui/dialog/internal/modal-close.ts","../../../projects/ui/dialog/internal/sheet-drag.ts","../../../projects/ui/dialog/dialog.ts"],"sourcesContent":["export const DIALOG_STYLES = `\ndialog {\n  --dialog-ease: var(--ease-sheet);\n  transition:\n    transform var(--duration-base) var(--dialog-ease),\n    overlay var(--duration-base) allow-discrete,\n    display var(--duration-base) allow-discrete;\n  transform: translateY(var(--drag-y, 0px));\n}\n\ndialog:not([open]) {\n  transform: translateY(100%);\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open] {\n    transform: translateY(100%);\n  }\n}\n\ndialog[data-dragging] {\n  transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog {\n    transition:\n      opacity var(--duration-base) var(--dialog-ease),\n      overlay var(--duration-base) allow-discrete,\n      display var(--duration-base) allow-discrete;\n    opacity: 1;\n  }\n\n  dialog:not([open]) {\n    opacity: 0;\n    transform: translateY(var(--drag-y, 0px));\n  }\n\n  @starting-style {\n    dialog[open] {\n      opacity: 0;\n      transform: translateY(0);\n    }\n  }\n}\n\n@media (min-width: 64rem) {\n  dialog {\n    --dialog-ease: var(--ease-out);\n    transition:\n      opacity var(--duration-base) var(--dialog-ease),\n      transform var(--duration-base) var(--dialog-ease),\n      overlay var(--duration-base) allow-discrete,\n      display var(--duration-base) allow-discrete;\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  dialog:not([open]) {\n    opacity: 0;\n    transform: scale(var(--enter-scale));\n  }\n\n  @starting-style {\n    dialog[open] {\n      opacity: 0;\n      transform: scale(var(--enter-scale));\n    }\n  }\n}\n\ndialog::backdrop {\n  transition: opacity var(--duration-base) var(--ease-out);\n  opacity: 1;\n}\n\ndialog:not([open])::backdrop {\n  opacity: 0;\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n`;\n","const GRACE = 50;\n\nexport function afterExit(element: HTMLElement, done: () => void): () => void {\n  const style = getComputedStyle(element);\n  const wait = longest(style.transitionDuration) + longest(style.transitionDelay);\n\n  if (wait === 0) {\n    done();\n    return () => undefined;\n  }\n\n  const onEnd = (event: TransitionEvent): void => {\n    if (event.target === element && !event.pseudoElement) {\n      cancel();\n      done();\n    }\n  };\n  const timer = setTimeout(() => {\n    cancel();\n    done();\n  }, wait + GRACE);\n  const cancel = (): void => {\n    clearTimeout(timer);\n    element.removeEventListener('transitionend', onEnd);\n  };\n\n  element.addEventListener('transitionend', onEnd);\n\n  return cancel;\n}\n\nfunction longest(list: string): number {\n  return Math.max(0, ...list.split(',').map(toMs));\n}\n\nfunction toMs(value: string): number {\n  const amount = Number.parseFloat(value);\n\n  if (Number.isNaN(amount)) {\n    return 0;\n  }\n\n  return value.trim().endsWith('ms') ? amount : amount * 1000;\n}\n","import { DestroyRef, ElementRef, type OutputEmitterRef, type Signal, afterRenderEffect, inject } from '@angular/core';\n\nimport { afterExit } from './dialog-exit';\n\ntype SharedReason = 'escape' | 'backdrop' | 'cross' | 'programmatic';\n\nexport type ModalCloseConfig<R extends string> = {\n  readonly open: Signal<boolean>;\n  readonly busy: Signal<boolean>;\n  readonly dismissed: OutputEmitterRef<void>;\n  readonly closed: OutputEmitterRef<R | SharedReason>;\n  readonly reset?: () => void;\n  readonly opening?: () => void;\n};\n\n/**\n * The close protocol of a modal on the native <dialog> under the host: `open` drives `showModal()` and `close()`,\n * Escape and a press-and-release on the veil close it unless `busy`, `dismissed` reports a close the user asked for\n * and `closed` its reason once the exit transition has played. `opening` runs just before `showModal()`. Must be\n * created in an injection context.\n */\nexport class ModalClose<R extends string> {\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef);\n  readonly #config: ModalCloseConfig<R>;\n\n  #pressedOnBackdrop = false;\n  #reason: R | SharedReason | null = null;\n  #cancelExit: () => void = () => undefined;\n\n  constructor(config: ModalCloseConfig<R>) {\n    this.#config = config;\n    inject(DestroyRef).onDestroy(() => this.#cancelExit());\n\n    afterRenderEffect(() => {\n      const dialog = this.#dialog;\n\n      if (config.open() && !dialog.open) {\n        this.#cancelExit();\n        config.reset?.();\n        config.opening?.();\n        dialog.showModal();\n      } else if (!config.open() && dialog.open) {\n        this.close('programmatic');\n      }\n    });\n  }\n\n  close(reason: R | SharedReason): void {\n    if (this.#dialog.open) {\n      this.#reason = reason;\n      this.#dialog.close();\n    }\n  }\n\n  onCancel(event: Event): void {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.preventDefault();\n    if (!this.#config.busy()) {\n      this.close('escape');\n    }\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.#config.busy() && (event.target as Element).closest('dialog') === this.#dialog) {\n      event.preventDefault();\n    }\n  }\n\n  onPointerDown(event: MouseEvent): void {\n    this.#pressedOnBackdrop = event.target === this.#dialog && this.#outside(event);\n  }\n\n  onClick(event: MouseEvent): void {\n    if (this.#pressedOnBackdrop && !this.#config.busy() && event.target === this.#dialog && this.#outside(event)) {\n      this.close('backdrop');\n    }\n    this.#pressedOnBackdrop = false;\n  }\n\n  onNativeClose(): void {\n    const asked = this.#reason;\n\n    this.#reason = null;\n    if (this.#dialog.open) {\n      return;\n    }\n    if (asked === null && this.#config.busy()) {\n      this.#dialog.showModal();\n      return;\n    }\n    const reason = asked ?? 'escape';\n    if (reason !== 'programmatic') {\n      this.#config.dismissed.emit();\n    }\n    this.#cancelExit();\n    this.#cancelExit = afterExit(this.#dialog, () => {\n      this.#cancelExit = () => undefined;\n      this.#config.reset?.();\n      this.#config.closed.emit(reason);\n    });\n  }\n\n  get #dialog(): HTMLDialogElement {\n    return this.#host.nativeElement.querySelector('dialog') as HTMLDialogElement;\n  }\n\n  #outside(event: MouseEvent): boolean {\n    const rect = this.#dialog.getBoundingClientRect();\n\n    return (\n      event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom\n    );\n  }\n}\n","const DISMISS_RATIO = 0.3;\nconst DISMISS_SPEED = 0.5;\nconst SPEED_WINDOW = 100;\nconst SLOP = 6;\nconst CONTROLS = 'button, a, input, select, textarea, [role=\"button\"]';\n\ntype Sample = { y: number; at: number };\n\ntype Gesture = {\n  id: number;\n  startX: number;\n  startY: number;\n  dragging: boolean;\n  height: number;\n  offset: number;\n  samples: Sample[];\n};\n\nexport class SheetDrag {\n  readonly #panel: HTMLElement;\n  readonly #grips: readonly HTMLElement[];\n  readonly #dismiss: () => void;\n  readonly #enabled: () => boolean;\n  #gesture: Gesture | null = null;\n\n  constructor(panel: HTMLElement, grips: readonly HTMLElement[], dismiss: () => void, enabled: () => boolean) {\n    this.#panel = panel;\n    this.#grips = grips;\n    this.#dismiss = dismiss;\n    this.#enabled = enabled;\n\n    for (const grip of grips) {\n      grip.addEventListener('pointerdown', this.#onDown);\n      grip.addEventListener('pointermove', this.#onMove);\n      grip.addEventListener('pointerup', this.#onUp);\n      grip.addEventListener('pointercancel', this.#onCancel);\n    }\n  }\n\n  reset(): void {\n    this.#gesture = null;\n    this.#panel.removeAttribute('data-dragging');\n    this.#panel.style.removeProperty('--drag-y');\n  }\n\n  destroy(): void {\n    for (const grip of this.#grips) {\n      grip.removeEventListener('pointerdown', this.#onDown);\n      grip.removeEventListener('pointermove', this.#onMove);\n      grip.removeEventListener('pointerup', this.#onUp);\n      grip.removeEventListener('pointercancel', this.#onCancel);\n    }\n  }\n\n  readonly #onDown = (event: PointerEvent): void => {\n    const grip = event.currentTarget as HTMLElement;\n\n    if (event.button !== 0 || !this.#enabled() || !isSheet() || (event.target as Element).closest(CONTROLS)) {\n      return;\n    }\n\n    grip.setPointerCapture(event.pointerId);\n    this.#gesture = {\n      id: event.pointerId,\n      startX: event.clientX,\n      startY: event.clientY,\n      dragging: false,\n      height: 0,\n      offset: 0,\n      samples: [{ y: event.clientY, at: event.timeStamp }],\n    };\n  };\n\n  readonly #onMove = (event: PointerEvent): void => {\n    const gesture = this.#current(event);\n\n    if (!gesture) {\n      return;\n    }\n\n    const dx = event.clientX - gesture.startX;\n    const dy = event.clientY - gesture.startY;\n\n    if (!gesture.dragging) {\n      if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) {\n        return;\n      }\n      if (Math.abs(dx) > Math.abs(dy)) {\n        this.#gesture = null;\n        return;\n      }\n      gesture.dragging = true;\n      gesture.height = this.#panel.getBoundingClientRect().height;\n      this.#panel.setAttribute('data-dragging', '');\n    }\n\n    gesture.offset = Math.max(0, dy);\n    gesture.samples.push({ y: event.clientY, at: event.timeStamp });\n    this.#panel.style.setProperty('--drag-y', `${gesture.offset}px`);\n  };\n\n  readonly #onUp = (event: PointerEvent): void => {\n    const gesture = this.#current(event);\n\n    if (!gesture) {\n      return;\n    }\n\n    this.#gesture = null;\n\n    if (!gesture.dragging) {\n      return;\n    }\n\n    this.#panel.removeAttribute('data-dragging');\n\n    const release = { y: event.clientY, at: event.timeStamp };\n\n    if (gesture.offset > gesture.height * DISMISS_RATIO || releaseSpeed(gesture.samples, release) > DISMISS_SPEED) {\n      this.#dismiss();\n    } else {\n      this.reset();\n    }\n  };\n\n  readonly #onCancel = (event: PointerEvent): void => {\n    if (this.#current(event)) {\n      this.#gesture = null;\n      this.#panel.removeAttribute('data-dragging');\n      this.reset();\n    }\n  };\n\n  #current(event: PointerEvent): Gesture | null {\n    return this.#gesture?.id === event.pointerId ? this.#gesture : null;\n  }\n}\n\nfunction isSheet(): boolean {\n  return typeof matchMedia === 'function' && !matchMedia('(min-width: 64rem)').matches;\n}\n\nfunction releaseSpeed(samples: readonly Sample[], last: Sample): number {\n  const first = samples.find((sample) => sample.at >= last.at - SPEED_WINDOW) ?? last;\n  const elapsed = last.at - first.at;\n\n  return elapsed > 0 ? (last.y - first.y) / elapsed : 0;\n}\n","import {\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterNextRender,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { DIALOG_STYLES } from './internal/dialog-styles';\nimport { ModalClose } from './internal/modal-close';\nimport { SheetDrag } from './internal/sheet-drag';\n\n/** Named dialog widths; any other CSS length is accepted as is. */\nexport const DIALOG_WIDTHS = ['md', 'lg'] as const;\nexport type DialogWidth = (typeof DIALOG_WIDTHS)[number];\n\nconst WIDTH_VALUES: Record<DialogWidth, string> = {\n  md: '28rem',\n  lg: '560px',\n};\n\n/** `confirm` is a short alertdialog: no cross, no hairlines, one 24px padding, 440px wide unless told otherwise. */\nexport const DIALOG_VARIANTS = ['default', 'confirm'] as const;\nexport type DialogVariant = (typeof DIALOG_VARIANTS)[number];\n\n/** `full` makes the sheet under `64rem` fill the screen below the status area; `fit` sizes it to its content. */\nexport const DIALOG_SHEETS = ['fit', 'full'] as const;\nexport type DialogSheet = (typeof DIALOG_SHEETS)[number];\n\ntype VariantClasses = {\n  handle: string;\n  header: string;\n  body: string;\n  footer: string;\n};\n\nconst VARIANTS: Record<DialogVariant, VariantClasses> = {\n  default: {\n    handle: 'pt-[7.5px]',\n    header: 'pb-3 lg:py-4 lg:pl-6',\n    body: 'py-4 lg:py-5',\n    footer: 'pt-3 empty:hidden lg:py-4',\n  },\n  confirm: {\n    handle: 'pt-[11.5px]',\n    header: 'pt-3 lg:pt-6 lg:pl-6',\n    body: 'pt-3',\n    footer: 'not-empty:pt-5 lg:pb-6 lg:not-empty:pt-6',\n  },\n};\n\nconst DEFAULT_WIDTHS: Record<DialogVariant, string> = {\n  default: 'lg',\n  confirm: '440px',\n};\n\n/** What started a close, as `closed` reports it. */\nexport const DIALOG_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'drag', 'programmatic'] as const;\nexport type DialogCloseReason = (typeof DIALOG_CLOSE_REASONS)[number];\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-dialog-${++count}`;\n})();\n\n/**\n * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.\n *\n * `busy` keeps it open while its action runs: Escape, a backdrop click and a sheet drag do nothing\n * and the cross is disabled. The owner disables its own buttons and still closes it through `open`.\n *\n * @example\n * <ui-dialog heading=\"Buy\" description=\"Ferrari\" closeLabel=\"Close\" width=\"528px\" [open]=\"buying()\" (dismissed)=\"buying.set(false)\">\n *   <p>Body</p>\n *   <button dialogActions ui-button variant=\"outline\" class=\"max-lg:hidden\" (click)=\"buying.set(false)\">Cancel</button>\n *   <button dialogActions ui-button>Buy 40 shares</button>\n * </ui-dialog>\n */\n@Component({\n  selector: 'ui-dialog',\n  host: {\n    '(pointerdown)': 'modal.onPointerDown($event)',\n    '(click)': 'modal.onClick($event)',\n    '(keydown)': 'modal.onKeydown($event)',\n  },\n  template: `\n    <dialog\n      #dlg\n      [attr.aria-busy]=\"busy() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-labelledby]=\"headingId\"\n      [attr.role]=\"variant() === 'confirm' ? 'alertdialog' : 'dialog'\"\n      [class]=\"classes()\"\n      [style.--dialog-width]=\"widthValue()\"\n      (cancel)=\"modal.onCancel($event)\"\n      (close)=\"modal.onNativeClose()\"\n    >\n      <div\n        aria-hidden=\"true\"\n        class=\"flex h-5 touch-none justify-center lg:hidden\"\n        data-dialog-handle\n        [class]=\"spec().handle\"\n      >\n        <span class=\"rounded-pill h-[5px] w-9 bg-(--border)\"></span>\n      </div>\n\n      <div data-dialog-header [class]=\"headerClasses()\">\n        <div class=\"flex min-w-0 flex-1 flex-col\" [class.max-lg:pt-1]=\"description()\">\n          <h2 class=\"text-title font-semibold\" [id]=\"headingId\">{{ heading() }}</h2>\n\n          @if (description()) {\n            <p\n              class=\"text-label text-(--muted-foreground)\"\n              [class.truncate]=\"truncateDescription()\"\n              [id]=\"descriptionId\"\n            >\n              {{ description() }}\n            </p>\n          }\n        </div>\n\n        @if (closeLabel()) {\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeLabel()\"\n            [class]=\"crossClasses\"\n            [disabled]=\"busy()\"\n            (click)=\"modal.close('cross')\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"block size-[22px] fill-none stroke-current stroke-[1.75]\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div\n        class=\"min-h-0 flex-1 overflow-y-auto px-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) lg:px-6\"\n        data-dialog-body\n        [attr.aria-labelledby]=\"scrollable() ? headingId : null\"\n        [attr.role]=\"scrollable() ? 'region' : null\"\n        [attr.tabindex]=\"scrollable() ? 0 : null\"\n        [id]=\"bodyId\"\n      >\n        <div class=\"flex flex-col gap-4 empty:hidden\" [class]=\"spec().body\">\n          <ng-content />\n        </div>\n      </div>\n\n      <div data-dialog-footer [class]=\"footerClasses()\">\n        <ng-content select=\"[dialogActions]\" />\n      </div>\n    </dialog>\n  `,\n  styles: DIALOG_STYLES,\n})\nexport class UiDialog {\n  readonly heading = input.required<string>();\n  readonly description = input<string>();\n  readonly closeLabel = input<string>();\n  readonly variant = input<DialogVariant>('default');\n  readonly sheet = input<DialogSheet>('fit');\n  readonly truncateDescription = input(false, { transform: booleanAttribute });\n  readonly width = input<DialogWidth | (string & {})>();\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n  readonly closed = output<DialogCloseReason>();\n\n  protected readonly headingId = nextId();\n  protected readonly descriptionId = `${this.headingId}-description`;\n  protected readonly bodyId = `${this.headingId}-body`;\n  protected readonly scrollable = signal(false);\n  protected readonly stacked = signal(false);\n\n  protected readonly describedBy = computed(() => {\n    if (this.description()) {\n      return this.descriptionId;\n    }\n\n    return this.variant() === 'confirm' ? this.bodyId : null;\n  });\n\n  protected readonly widthValue = computed(() => {\n    const width = this.width() ?? DEFAULT_WIDTHS[this.variant()];\n\n    return Object.hasOwn(WIDTH_VALUES, width) ? WIDTH_VALUES[width as DialogWidth] : width;\n  });\n\n  protected readonly spec = computed(() => VARIANTS[this.variant()]);\n\n  protected readonly hairlines = computed(() => Boolean(this.closeLabel()) && this.variant() === 'default');\n\n  protected readonly headerClasses = computed(\n    () =>\n      `flex ${this.description() ? 'items-start' : 'items-center'} gap-2 pl-4 max-lg:touch-none lg:gap-3 ${this.spec().header} ${this.closeLabel() ? 'pr-2 lg:pr-4' : 'pr-4 lg:pr-6'} ${this.hairlines() ? 'shadow-[inset_0_-1px_0_var(--hairline)]' : ''}`,\n  );\n\n  protected readonly crossClasses =\n    'rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground)';\n\n  protected readonly footerClasses = computed(\n    () =>\n      `max-lg:[&>[ui-button]]:text-body flex justify-end gap-2 px-4 pb-[calc(8px+env(safe-area-inset-bottom))] max-lg:flex-col-reverse max-lg:[&>[ui-button]]:h-[50px] max-lg:[&>[ui-button]]:w-full lg:px-6 ${this.spec().footer} ${this.hairlines() ? 'shadow-[inset_0_1px_0_var(--hairline)]' : ''}`,\n  );\n\n  protected readonly classes = computed(\n    () =>\n      `open:flex w-full flex-col overflow-hidden m-auto mt-auto max-lg:max-h-[calc(100dvh-2rem)] lg:max-h-[calc(100dvh-96px)] max-lg:mb-0 max-lg:max-w-none max-lg:rounded-b-none lg:max-w-(--dialog-width) rounded-container bg-(--card) text-(--foreground) outline-none shadow-[0_0_0_1px_var(--border),0_24px_64px_rgb(0_0_0/0.24)] max-lg:shadow-[0_-1px_0_var(--border),0_-12px_32px_rgb(0_0_0/0.16)] ${this.stacked() ? 'backdrop:bg-black/[0.24]' : 'backdrop:bg-black/[0.36]'} ${this.sheet() === 'full' ? 'max-lg:h-[calc(100dvh-58px)]' : ''}`,\n  );\n\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  #drag: SheetDrag | null = null;\n\n  protected readonly modal: ModalClose<DialogCloseReason>;\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n\n    afterNextRender(() => {\n      const host = this.#host.nativeElement;\n      const dialog = host.querySelector('dialog') as HTMLDialogElement;\n      const grips = ['[data-dialog-handle]', '[data-dialog-header]'].map(\n        (grip) => host.querySelector(grip) as HTMLElement,\n      );\n\n      this.#drag = new SheetDrag(\n        dialog,\n        grips,\n        () => this.modal.close('drag'),\n        () => !this.busy(),\n      );\n      destroyRef.onDestroy(() => this.#drag?.destroy());\n\n      if (typeof ResizeObserver === 'undefined') {\n        return;\n      }\n\n      const body = host.querySelector('[data-dialog-body]') as HTMLElement;\n      const observer = new ResizeObserver(() => this.scrollable.set(body.scrollHeight > body.clientHeight));\n\n      observer.observe(body);\n      observer.observe(body.firstElementChild as Element);\n      destroyRef.onDestroy(() => observer.disconnect());\n    });\n\n    this.modal = new ModalClose<DialogCloseReason>({\n      open: this.open,\n      busy: this.busy,\n      dismissed: this.dismissed,\n      closed: this.closed,\n      reset: () => this.#drag?.reset(),\n      opening: () => this.stacked.set(this.#overAnotherModal()),\n    });\n  }\n\n  #overAnotherModal(): boolean {\n    const open = this.#host.nativeElement.ownerDocument.querySelectorAll('dialog[open]');\n\n    return Array.from(open).some((dialog) => dialog.matches(':modal'));\n  }\n}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-drawer.mjs

@@ -31,10 +31,11 @@ var UiDrawer = class UiDrawer {
 	descriptionId = `${this.headingId}-description`;
 	describedBy = computed(() => this.heading() && this.description() ? this.descriptionId : null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
 	ariaLabel = computed(() => {
-		if (this.heading()) return null;
-		if (!this.label()) throw new Error("ui-drawer needs a heading or a label: without either it has no accessible name.");
-		return this.label();
+		if (this.label()) return this.label();
+		if (!this.heading()) throw new Error("ui-drawer needs a heading or a label: without either it has no accessible name.");
+		return null;
 	}, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	labelledBy = computed(() => this.heading() && !this.label() ? this.headingId : null, ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
 	modal = new ModalClose({
 		open: this.open,
 		busy: this.busy,
@@ -122,7 +123,7 @@ var UiDrawer = class UiDrawer {
       [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-label]="ariaLabel()"
-      [attr.aria-labelledby]="heading() ? headingId : null"
+      [attr.aria-labelledby]="labelledBy()"
       [style.--drawer-width]="width()"
       (cancel)="modal.onCancel($event)"
       (close)="modal.onNativeClose()"
@@ -187,7 +188,7 @@ i0.ɵɵngDeclareClassMetadata({
       [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-label]="ariaLabel()"
-      [attr.aria-labelledby]="heading() ? headingId : null"
+      [attr.aria-labelledby]="labelledBy()"
       [style.--drawer-width]="width()"
       (cancel)="modal.onCancel($event)"
       (close)="modal.onNativeClose()"

package/fesm2022/joanroucoux-cairn-ui-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-drawer.mjs","names":[],"sources":["../../../projects/ui/drawer/internal/drawer-styles.ts","../../../projects/ui/drawer/drawer.ts"],"sourcesContent":["export const DRAWER_STYLES = `\ndialog {\n  transition:\n    opacity var(--duration-base) var(--ease-out),\n    transform var(--duration-base) var(--ease-out),\n    overlay var(--duration-base) allow-discrete,\n    display var(--duration-base) allow-discrete;\n  opacity: 1;\n  transform: none;\n}\n\ndialog:not([open]) {\n  opacity: 0;\n  transform: translateX(24px);\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open] {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog:not([open]) {\n    transform: none;\n  }\n\n  @starting-style {\n    dialog[open] {\n      transform: none;\n    }\n  }\n}\n\ndialog::backdrop {\n  transition: opacity var(--duration-base) var(--ease-out);\n  opacity: 1;\n}\n\ndialog:not([open])::backdrop {\n  opacity: 0;\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n`;\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { ModalClose } from '@joanroucoux/cairn-ui/dialog';\n\nimport { DRAWER_STYLES } from './internal/drawer-styles';\n\n/** What started a close, as `closed` reports it. */\nexport const DRAWER_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'programmatic'] as const;\nexport type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-drawer-${++count}`;\n})();\n\n/**\n * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.\n *\n * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.\n *\n * @example\n * <ui-drawer heading=\"Northwind Monde\" closeLabel=\"Fermer le détail\" [open]=\"open()\" (dismissed)=\"open.set(false)\">\n *   <p>Body</p>\n * </ui-drawer>\n */\n@Component({\n  selector: 'ui-drawer',\n  host: {\n    '(pointerdown)': 'modal.onPointerDown($event)',\n    '(click)': 'modal.onClick($event)',\n    '(keydown)': 'modal.onKeydown($event)',\n  },\n  template: `\n    <dialog\n      class=\"fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-(--drawer-width) max-w-full [scrollbar-width:none] flex-col gap-6 overflow-y-auto overscroll-contain bg-(--card) p-6 text-(--foreground) shadow-[-1px_0_0_var(--border),-24px_0_48px_rgb(0_0_0/0.12)] outline-none backdrop:bg-black/[0.36] open:flex\"\n      [attr.aria-busy]=\"busy() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"heading() ? headingId : null\"\n      [style.--drawer-width]=\"width()\"\n      (cancel)=\"modal.onCancel($event)\"\n      (close)=\"modal.onNativeClose()\"\n    >\n      @if (heading()) {\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-col gap-0.5\">\n            <h2 class=\"text-title font-semibold text-pretty\" [id]=\"headingId\">{{ heading() }}</h2>\n\n            @if (description()) {\n              <p class=\"text-label text-(--muted-foreground)\" [id]=\"descriptionId\">{{ description() }}</p>\n            }\n          </div>\n\n          @if (closeLabel()) {\n            <button\n              class=\"rounded-control -mt-1 -mr-2 grid size-9 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale] duration-(--duration-press) ease-out outline-none hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-40\"\n              type=\"button\"\n              [attr.aria-label]=\"closeLabel()\"\n              [disabled]=\"busy()\"\n              (click)=\"modal.close('cross')\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                class=\"block size-5 fill-none stroke-current stroke-[1.75]\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      <ng-content />\n    </dialog>\n  `,\n  styles: DRAWER_STYLES,\n})\nexport class UiDrawer {\n  readonly heading = input<string>();\n  readonly description = input<string>();\n  readonly closeLabel = input<string>();\n  readonly label = input<string>();\n  readonly width = input('440px');\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n  readonly closed = output<DrawerCloseReason>();\n\n  protected readonly headingId = nextId();\n  protected readonly descriptionId = `${this.headingId}-description`;\n\n  protected readonly describedBy = computed(() => (this.heading() && this.description() ? this.descriptionId : null));\n\n  protected readonly ariaLabel = computed(() => {\n    if (this.heading()) {\n      return null;\n    }\n    if (!this.label()) {\n      throw new Error('ui-drawer needs a heading or a label: without either it has no accessible name.');\n    }\n    return this.label();\n  });\n\n  protected readonly modal = new ModalClose<DrawerCloseReason>({\n    open: this.open,\n    busy: this.busy,\n    dismissed: this.dismissed,\n    closed: this.closed,\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-drawer.mjs","names":[],"sources":["../../../projects/ui/drawer/internal/drawer-styles.ts","../../../projects/ui/drawer/drawer.ts"],"sourcesContent":["export const DRAWER_STYLES = `\ndialog {\n  transition:\n    opacity var(--duration-base) var(--ease-out),\n    transform var(--duration-base) var(--ease-out),\n    overlay var(--duration-base) allow-discrete,\n    display var(--duration-base) allow-discrete;\n  opacity: 1;\n  transform: none;\n}\n\ndialog:not([open]) {\n  opacity: 0;\n  transform: translateX(24px);\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open] {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog:not([open]) {\n    transform: none;\n  }\n\n  @starting-style {\n    dialog[open] {\n      transform: none;\n    }\n  }\n}\n\ndialog::backdrop {\n  transition: opacity var(--duration-base) var(--ease-out);\n  opacity: 1;\n}\n\ndialog:not([open])::backdrop {\n  opacity: 0;\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n`;\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { ModalClose } from '@joanroucoux/cairn-ui/dialog';\n\nimport { DRAWER_STYLES } from './internal/drawer-styles';\n\n/** What started a close, as `closed` reports it. */\nexport const DRAWER_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'programmatic'] as const;\nexport type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-drawer-${++count}`;\n})();\n\n/**\n * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.\n *\n * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.\n * With both, `label` names the panel and the heading stays its visible title.\n *\n * @example\n * <ui-drawer heading=\"Northwind Monde\" closeLabel=\"Fermer le détail\" [open]=\"open()\" (dismissed)=\"open.set(false)\">\n *   <p>Body</p>\n * </ui-drawer>\n */\n@Component({\n  selector: 'ui-drawer',\n  host: {\n    '(pointerdown)': 'modal.onPointerDown($event)',\n    '(click)': 'modal.onClick($event)',\n    '(keydown)': 'modal.onKeydown($event)',\n  },\n  template: `\n    <dialog\n      class=\"fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-(--drawer-width) max-w-full [scrollbar-width:none] flex-col gap-6 overflow-y-auto overscroll-contain bg-(--card) p-6 text-(--foreground) shadow-[-1px_0_0_var(--border),-24px_0_48px_rgb(0_0_0/0.12)] outline-none backdrop:bg-black/[0.36] open:flex\"\n      [attr.aria-busy]=\"busy() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [style.--drawer-width]=\"width()\"\n      (cancel)=\"modal.onCancel($event)\"\n      (close)=\"modal.onNativeClose()\"\n    >\n      @if (heading()) {\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-col gap-0.5\">\n            <h2 class=\"text-title font-semibold text-pretty\" [id]=\"headingId\">{{ heading() }}</h2>\n\n            @if (description()) {\n              <p class=\"text-label text-(--muted-foreground)\" [id]=\"descriptionId\">{{ description() }}</p>\n            }\n          </div>\n\n          @if (closeLabel()) {\n            <button\n              class=\"rounded-control -mt-1 -mr-2 grid size-9 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale] duration-(--duration-press) ease-out outline-none hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-40\"\n              type=\"button\"\n              [attr.aria-label]=\"closeLabel()\"\n              [disabled]=\"busy()\"\n              (click)=\"modal.close('cross')\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                class=\"block size-5 fill-none stroke-current stroke-[1.75]\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      <ng-content />\n    </dialog>\n  `,\n  styles: DRAWER_STYLES,\n})\nexport class UiDrawer {\n  readonly heading = input<string>();\n  readonly description = input<string>();\n  readonly closeLabel = input<string>();\n  readonly label = input<string>();\n  readonly width = input('440px');\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n  readonly closed = output<DrawerCloseReason>();\n\n  protected readonly headingId = nextId();\n  protected readonly descriptionId = `${this.headingId}-description`;\n\n  protected readonly describedBy = computed(() => (this.heading() && this.description() ? this.descriptionId : null));\n\n  protected readonly ariaLabel = computed(() => {\n    if (this.label()) {\n      return this.label();\n    }\n    if (!this.heading()) {\n      throw new Error('ui-drawer needs a heading or a label: without either it has no accessible name.');\n    }\n    return null;\n  });\n\n  protected readonly labelledBy = computed(() => (this.heading() && !this.label() ? this.headingId : null));\n\n  protected readonly modal = new ModalClose<DrawerCloseReason>({\n    open: this.open,\n    busy: this.busy,\n    dismissed: this.dismissed,\n    closed: this.closed,\n  });\n}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-motion.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { DestroyRef, Directive, ElementRef, Injectable, afterNextRender, effect, inject, input, signal, untracked } from "@angular/core";
+import { DestroyRef, Directive, ElementRef, Injectable, afterNextRender, effect, inject, input, output, signal, untracked } from "@angular/core";
 var FlipItems = class FlipItems {
 	items = /* @__PURE__ */ new Set();
 	destroyed = /* @__PURE__ */ new Set();
@@ -228,6 +228,7 @@ function paintedElements(host) {
 }
 var UiHighlight = class UiHighlight {
 	uiHighlight = input(null, ...ngDevMode ? [{ debugName: "uiHighlight" }] : /* istanbul ignore next */ []);
+	highlighted = output();
 	host = inject(ElementRef).nativeElement;
 	reduced = injectReducedMotion();
 	cancel = null;
@@ -310,6 +311,7 @@ var UiHighlight = class UiHighlight {
 				},
 				{ offset: 1 }
 			], { duration: total }));
+			this.highlighted.emit();
 		};
 		const frame = requestAnimationFrame(() => {
 			const remaining = Array.from(/* @__PURE__ */ new Set([this.host, ...painted])).flatMap((element) => element.getAnimations()).map((animation) => {
@@ -349,6 +351,7 @@ var UiHighlight = class UiHighlight {
 			isRequired: false,
 			transformFunction: null
 		} },
+		outputs: { highlighted: "highlighted" },
 		ngImport: i0
 	});
 };
@@ -362,14 +365,20 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ selector: "[uiHighlight]" }]
 	}],
 	ctorParameters: () => [],
-	propDecorators: { uiHighlight: [{
-		type: i0.Input,
-		args: [{
-			isSignal: true,
-			alias: "uiHighlight",
-			required: false
+	propDecorators: {
+		uiHighlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uiHighlight",
+				required: false
+			}]
+		}],
+		highlighted: [{
+			type: i0.Output,
+			args: ["highlighted"]
 		}]
-	}] }
+	}
 });
 function holdTransitionsUntilRendered() {
 	const host = inject(ElementRef).nativeElement;

package/fesm2022/joanroucoux-cairn-ui-motion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-motion.mjs","names":[],"sources":["../../../projects/ui/motion/internal/flip-items.ts","../../../projects/ui/motion/internal/tokens.ts","../../../projects/ui/motion/reduced-motion.ts","../../../projects/ui/motion/flip-list.ts","../../../projects/ui/motion/highlight.ts","../../../projects/ui/motion/settle-transitions.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class FlipItems {\n  private readonly items = new Set<HTMLElement>();\n  private readonly destroyed = new Set<HTMLElement>();\n  private used = false;\n\n  get marked(): boolean {\n    return this.used;\n  }\n\n  add(item: HTMLElement): void {\n    this.used = true;\n    this.items.add(item);\n  }\n\n  remove(item: HTMLElement): void {\n    this.destroyed.add(item);\n  }\n\n  inside(host: HTMLElement): HTMLElement[] {\n    const inside: HTMLElement[] = [];\n    for (const item of this.items) {\n      if (host.contains(item)) {\n        inside.push(item);\n      } else if (this.destroyed.has(item)) {\n        this.items.delete(item);\n        this.destroyed.delete(item);\n      }\n    }\n    return inside;\n  }\n}\n","export function readDuration(element: Element, name: string, fallback: number): number {\n  const raw = getComputedStyle(element).getPropertyValue(name).trim();\n  const value = parseFloat(raw);\n  if (Number.isNaN(value)) {\n    return fallback;\n  }\n  return raw.endsWith('ms') ? value : value * 1000;\n}\n\nexport function readEasing(element: Element, name: string, fallback: string): string {\n  return getComputedStyle(element).getPropertyValue(name).trim() || fallback;\n}\n","import { DestroyRef, type Signal, inject, signal } from '@angular/core';\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\n/**\n * A signal that follows the user's `prefers-reduced-motion` preference. Call it in an injection\n * context.\n *\n * @example\n * protected readonly reduced = injectReducedMotion();\n */\nexport function injectReducedMotion(): Signal<boolean> {\n  if (typeof matchMedia === 'undefined') {\n    return signal(false).asReadonly();\n  }\n\n  const query = matchMedia(QUERY);\n  const reduced = signal(query.matches);\n  const listener = (event: { matches: boolean }): void => reduced.set(event.matches);\n\n  query.addEventListener('change', listener);\n  inject(DestroyRef).onDestroy(() => query.removeEventListener('change', listener));\n\n  return reduced.asReadonly();\n}\n","import { DestroyRef, Directive, ElementRef, afterNextRender, inject } from '@angular/core';\n\nimport { FlipItems } from './internal/flip-items';\nimport { readDuration, readEasing } from './internal/tokens';\nimport { injectReducedMotion } from './reduced-motion';\n\nfunction translateY(element: Element): number {\n  const matrix = /^matrix\\((.+)\\)$/.exec(getComputedStyle(element).transform);\n  return matrix ? parseFloat((matrix[1] as string).split(',')[5] as string) : 0;\n}\n\n/**\n * Slides the items of a list into place when one is removed or inserted (FLIP). Pair it with\n * `animate.leave=\"ui-leave-fade\"` on the item so it fades out first. Nothing moves under\n * `prefers-reduced-motion`.\n *\n * The items are the direct children of the list. Mark them with `uiFlipItem` instead when they sit\n * deeper, so a removal also slides the groups below. Only an item added or removed starts a slide;\n * a change inside an item does not.\n *\n * @example\n * <ul uiFlipList>\n *   @for (key of keys(); track key.id) {\n *     <li uiListRow animate.leave=\"ui-leave-fade\">...</li>\n *   }\n * </ul>\n *\n * <table uiTable uiFlipList>\n *   @for (group of groups(); track group.id) {\n *     <tbody>\n *       <tr uiTr group uiFlipItem>...</tr>\n *       @for (row of group.rows; track row.id) {\n *         <tr uiTr uiFlipItem animate.leave=\"ui-leave-fade\">...</tr>\n *       }\n *     </tbody>\n *   }\n * </table>\n */\n@Directive({\n  selector: '[uiFlipList]',\n  providers: [FlipItems],\n})\nexport class UiFlipList {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly reduced = injectReducedMotion();\n  private readonly mutations = new MutationObserver(() => this.onChange());\n  private readonly resizes = new ResizeObserver(() => {\n    this.tops = this.measure();\n  });\n  private readonly running = new Map<HTMLElement, Animation>();\n  private readonly watched = new Set<HTMLElement>();\n  private readonly items = inject(FlipItems, { self: true });\n  private tops = new Map<HTMLElement, number>();\n  private shifts = new Map<Element, number>();\n\n  constructor() {\n    afterNextRender(() => {\n      this.tops = this.measure();\n      this.mutations.observe(this.host, { childList: true, subtree: true });\n      this.resizes.observe(this.host);\n    });\n\n    inject(DestroyRef).onDestroy(() => {\n      this.mutations.disconnect();\n      this.resizes.disconnect();\n    });\n  }\n\n  private tracked(): HTMLElement[] {\n    if (!this.items.marked) {\n      return Array.from(this.host.children).filter((child): child is HTMLElement => child instanceof HTMLElement);\n    }\n    return this.items.inside(this.host);\n  }\n\n  private measure(): Map<HTMLElement, number> {\n    const elements = this.tracked();\n    const origin = this.host.getBoundingClientRect().top - this.host.scrollTop;\n    const tops = new Map(elements.map((element) => [element, element.getBoundingClientRect().top - origin]));\n\n    this.shifts = new Map();\n    for (const animation of this.host.getAnimations({ subtree: true })) {\n      const target = (animation.effect as KeyframeEffect).target as Element;\n      if (target !== this.host) {\n        this.shifts.set(target, translateY(target));\n      }\n    }\n    for (const [moving, shift] of this.shifts) {\n      for (const [element, top] of tops) {\n        if (moving.contains(element)) {\n          tops.set(element, top - shift);\n        }\n      }\n    }\n\n    for (const element of elements) {\n      if (!this.watched.has(element)) {\n        this.watched.add(element);\n        this.resizes.observe(element);\n      }\n    }\n    for (const element of this.watched) {\n      if (!tops.has(element)) {\n        this.watched.delete(element);\n        this.running.delete(element);\n        this.resizes.unobserve(element);\n      }\n    }\n    return tops;\n  }\n\n  private onChange(): void {\n    const before = this.tops;\n    const after = this.measure();\n    this.tops = after;\n\n    const changed = after.size !== before.size || Array.from(after.keys()).some((element) => !before.has(element));\n    if (this.reduced() || !changed) {\n      return;\n    }\n\n    const duration = readDuration(this.host, '--duration-base', 260);\n    const easing = readEasing(this.host, '--ease-out', 'ease-out');\n    const moved = (element: HTMLElement): number => (before.get(element) ?? 0) - (after.get(element) ?? 0);\n\n    for (const [element] of after) {\n      if (!before.has(element)) {\n        continue;\n      }\n      const own = moved(element) - moved(this.parentItem(element, before, after));\n      if (Math.abs(own) < 0.5) {\n        continue;\n      }\n      const from = own + (this.shifts.get(element) ?? 0);\n      this.running.get(element)?.cancel();\n      const animation = element.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(0)' }], {\n        duration,\n        easing,\n      });\n      animation.onfinish = () => {\n        if (this.running.get(element) === animation) {\n          this.running.delete(element);\n        }\n      };\n      this.running.set(element, animation);\n    }\n  }\n\n  private parentItem(\n    element: HTMLElement,\n    before: Map<HTMLElement, number>,\n    after: Map<HTMLElement, number>,\n  ): HTMLElement {\n    let node = element.parentElement as HTMLElement;\n    while (node !== this.host && !(before.has(node) && after.has(node))) {\n      node = node.parentElement as HTMLElement;\n    }\n    return node;\n  }\n}\n\n/**\n * Marks an element as an item of the nearest `uiFlipList`, at any depth. Once one item is marked,\n * the list follows its marked items only.\n *\n * @example\n * <tr uiTr uiFlipItem animate.leave=\"ui-leave-fade\">...</tr>\n */\n@Directive({\n  selector: '[uiFlipItem]',\n})\nexport class UiFlipItem {\n  constructor() {\n    const items = inject(FlipItems, { optional: true });\n    if (items) {\n      const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n      items.add(element);\n      inject(DestroyRef).onDestroy(() => items.remove(element));\n    }\n  }\n}\n","import { DestroyRef, Directive, ElementRef, effect, inject, input, untracked } from '@angular/core';\n\nimport { readDuration, readEasing } from './internal/tokens';\nimport { injectReducedMotion } from './reduced-motion';\n\nconst HOLD_MS = 200;\nconst SCROLL_SETTLE_MS = 200;\nconst SCROLL_START_MS = 300;\n\nfunction paintedElements(host: HTMLElement): HTMLElement[] {\n  if (host.tagName === 'TR') {\n    return Array.from(host.children).filter((cell): cell is HTMLElement => cell instanceof HTMLElement);\n  }\n  if (host.hasAttribute('ui-group-cell') && host.firstElementChild instanceof HTMLElement) {\n    return [host.firstElementChild];\n  }\n  return [host];\n}\n\n/**\n * Draws the eye to an element that just changed: scrolls it into view when off screen, flashes the\n * `--soft` fill, then fades back. Each new non-null token plays once, so pass a fresh value per\n * event (an object or a counter), not a boolean. A non-null token present at first render plays on\n * arrival. Can sit on the same element as `animate.enter`: it waits for that fade to finish.\n *\n * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and\n * below it (header, tab bar, action bar), or a row under them counts as on screen. For an arrival\n * on a page opened at the element, scroll to it first (`scrollIntoView` in `afterNextRender`) and\n * set the token afterwards, otherwise it scrolls smoothly from where the page is.\n *\n * @example\n * <a ui-row [uiHighlight]=\"changed() === holding.id ? token() : null\" routerLink=\"/holdings/1\">...</a>\n */\n@Directive({\n  selector: '[uiHighlight]',\n})\nexport class UiHighlight {\n  readonly uiHighlight = input<unknown>(null);\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly reduced = injectReducedMotion();\n  private cancel: (() => void) | null = null;\n\n  constructor() {\n    effect(() => {\n      const token = this.uiHighlight();\n      if (token === null || token === undefined) {\n        return;\n      }\n      untracked(() => this.play());\n    });\n\n    inject(DestroyRef).onDestroy(() => this.cancel?.());\n  }\n\n  private play(): void {\n    this.cancel?.();\n\n    if (this.isVisible()) {\n      this.cancel = this.flash();\n      return;\n    }\n\n    const reduced = this.reduced();\n    this.host.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'center' });\n\n    if (reduced) {\n      this.cancel = this.flash();\n      return;\n    }\n\n    let stopFlash: (() => void) | null = null;\n    let timer: ReturnType<typeof setTimeout>;\n    const moves = (event: Event): boolean =>\n      event.target === document || (event.target instanceof Node && event.target.contains(this.host));\n    const start = (): void => {\n      stopListening();\n      stopFlash = this.flash();\n    };\n    const onScrollEnd = (event: Event): void => {\n      if (moves(event)) {\n        start();\n      }\n    };\n    const onScroll = (event: Event): void => {\n      if (moves(event)) {\n        clearTimeout(timer);\n        timer = setTimeout(start, SCROLL_SETTLE_MS);\n      }\n    };\n    const stopListening = (): void => {\n      clearTimeout(timer);\n      window.removeEventListener('scrollend', onScrollEnd, true);\n      window.removeEventListener('scroll', onScroll, true);\n    };\n    timer = setTimeout(start, SCROLL_START_MS);\n    window.addEventListener('scrollend', onScrollEnd, true);\n    window.addEventListener('scroll', onScroll, true);\n\n    this.cancel = () => {\n      stopListening();\n      stopFlash?.();\n    };\n  }\n\n  private isVisible(): boolean {\n    const rect = this.host.getBoundingClientRect();\n    const style = getComputedStyle(this.host);\n    const top = parseFloat(style.scrollMarginTop) || 0;\n    const bottom = parseFloat(style.scrollMarginBottom) || 0;\n    return rect.top >= top && rect.bottom <= window.innerHeight - bottom;\n  }\n\n  private flash(): () => void {\n    const painted = paintedElements(this.host);\n    let animations: Animation[] = [];\n    let timer: ReturnType<typeof setTimeout> | undefined;\n\n    const paint = (): void => {\n      const fade = readDuration(this.host, '--duration-highlight', 1200);\n      const easing = readEasing(this.host, '--ease-out', 'ease-out');\n      const total = HOLD_MS + fade;\n      animations = painted.map((element) =>\n        element.animate(\n          [\n            { backgroundColor: 'var(--soft)', offset: 0 },\n            { backgroundColor: 'var(--soft)', offset: HOLD_MS / total, easing },\n            { offset: 1 },\n          ],\n          { duration: total },\n        ),\n      );\n    };\n\n    const frame = requestAnimationFrame(() => {\n      const remaining = Array.from(new Set([this.host, ...painted]))\n        .flatMap((element) => element.getAnimations())\n        .map((animation) => {\n          const timing = (animation.effect as AnimationEffect).getComputedTiming();\n          return Number(timing.endTime) - Number(timing.localTime ?? 0);\n        })\n        .filter((left) => Number.isFinite(left));\n      if (remaining.length === 0) {\n        paint();\n        return;\n      }\n      timer = setTimeout(paint, Math.min(Math.max(...remaining), readDuration(this.host, '--duration-base', 260)));\n    });\n\n    return () => {\n      cancelAnimationFrame(frame);\n      clearTimeout(timer);\n      animations.forEach((animation) => animation.cancel());\n    };\n  }\n}\n","import { ElementRef, afterNextRender, inject } from '@angular/core';\n\n/**\n * Holds the transitions of the host and of everything inside it until two frames after its first\n * render, so bound classes do not animate on page open. Call it in an injection context. A host\n * whose view is never refreshed (a detached change detector) never gets its transitions back.\n *\n * @example\n * constructor() {\n *   holdTransitionsUntilRendered();\n * }\n */\nexport function holdTransitionsUntilRendered(): void {\n  const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n\n  host.setAttribute('data-ui-settling', '');\n  afterNextRender({\n    read: () => {\n      requestAnimationFrame(() => requestAnimationFrame(() => host.removeAttribute('data-ui-settling')));\n    },\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-motion.mjs","names":[],"sources":["../../../projects/ui/motion/internal/flip-items.ts","../../../projects/ui/motion/internal/tokens.ts","../../../projects/ui/motion/reduced-motion.ts","../../../projects/ui/motion/flip-list.ts","../../../projects/ui/motion/highlight.ts","../../../projects/ui/motion/settle-transitions.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class FlipItems {\n  private readonly items = new Set<HTMLElement>();\n  private readonly destroyed = new Set<HTMLElement>();\n  private used = false;\n\n  get marked(): boolean {\n    return this.used;\n  }\n\n  add(item: HTMLElement): void {\n    this.used = true;\n    this.items.add(item);\n  }\n\n  remove(item: HTMLElement): void {\n    this.destroyed.add(item);\n  }\n\n  inside(host: HTMLElement): HTMLElement[] {\n    const inside: HTMLElement[] = [];\n    for (const item of this.items) {\n      if (host.contains(item)) {\n        inside.push(item);\n      } else if (this.destroyed.has(item)) {\n        this.items.delete(item);\n        this.destroyed.delete(item);\n      }\n    }\n    return inside;\n  }\n}\n","export function readDuration(element: Element, name: string, fallback: number): number {\n  const raw = getComputedStyle(element).getPropertyValue(name).trim();\n  const value = parseFloat(raw);\n  if (Number.isNaN(value)) {\n    return fallback;\n  }\n  return raw.endsWith('ms') ? value : value * 1000;\n}\n\nexport function readEasing(element: Element, name: string, fallback: string): string {\n  return getComputedStyle(element).getPropertyValue(name).trim() || fallback;\n}\n","import { DestroyRef, type Signal, inject, signal } from '@angular/core';\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\n/**\n * A signal that follows the user's `prefers-reduced-motion` preference. Call it in an injection\n * context.\n *\n * @example\n * protected readonly reduced = injectReducedMotion();\n */\nexport function injectReducedMotion(): Signal<boolean> {\n  if (typeof matchMedia === 'undefined') {\n    return signal(false).asReadonly();\n  }\n\n  const query = matchMedia(QUERY);\n  const reduced = signal(query.matches);\n  const listener = (event: { matches: boolean }): void => reduced.set(event.matches);\n\n  query.addEventListener('change', listener);\n  inject(DestroyRef).onDestroy(() => query.removeEventListener('change', listener));\n\n  return reduced.asReadonly();\n}\n","import { DestroyRef, Directive, ElementRef, afterNextRender, inject } from '@angular/core';\n\nimport { FlipItems } from './internal/flip-items';\nimport { readDuration, readEasing } from './internal/tokens';\nimport { injectReducedMotion } from './reduced-motion';\n\nfunction translateY(element: Element): number {\n  const matrix = /^matrix\\((.+)\\)$/.exec(getComputedStyle(element).transform);\n  return matrix ? parseFloat((matrix[1] as string).split(',')[5] as string) : 0;\n}\n\n/**\n * Slides the items of a list into place when one is removed or inserted (FLIP). Pair it with\n * `animate.leave=\"ui-leave-fade\"` on the item so it fades out first. Nothing moves under\n * `prefers-reduced-motion`.\n *\n * The items are the direct children of the list. Mark them with `uiFlipItem` instead when they sit\n * deeper, so a removal also slides the groups below. Only an item added or removed starts a slide;\n * a change inside an item does not.\n *\n * @example\n * <ul uiFlipList>\n *   @for (key of keys(); track key.id) {\n *     <li uiListRow animate.leave=\"ui-leave-fade\">...</li>\n *   }\n * </ul>\n *\n * <table uiTable uiFlipList>\n *   @for (group of groups(); track group.id) {\n *     <tbody>\n *       <tr uiTr group uiFlipItem>...</tr>\n *       @for (row of group.rows; track row.id) {\n *         <tr uiTr uiFlipItem animate.leave=\"ui-leave-fade\">...</tr>\n *       }\n *     </tbody>\n *   }\n * </table>\n */\n@Directive({\n  selector: '[uiFlipList]',\n  providers: [FlipItems],\n})\nexport class UiFlipList {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly reduced = injectReducedMotion();\n  private readonly mutations = new MutationObserver(() => this.onChange());\n  private readonly resizes = new ResizeObserver(() => {\n    this.tops = this.measure();\n  });\n  private readonly running = new Map<HTMLElement, Animation>();\n  private readonly watched = new Set<HTMLElement>();\n  private readonly items = inject(FlipItems, { self: true });\n  private tops = new Map<HTMLElement, number>();\n  private shifts = new Map<Element, number>();\n\n  constructor() {\n    afterNextRender(() => {\n      this.tops = this.measure();\n      this.mutations.observe(this.host, { childList: true, subtree: true });\n      this.resizes.observe(this.host);\n    });\n\n    inject(DestroyRef).onDestroy(() => {\n      this.mutations.disconnect();\n      this.resizes.disconnect();\n    });\n  }\n\n  private tracked(): HTMLElement[] {\n    if (!this.items.marked) {\n      return Array.from(this.host.children).filter((child): child is HTMLElement => child instanceof HTMLElement);\n    }\n    return this.items.inside(this.host);\n  }\n\n  private measure(): Map<HTMLElement, number> {\n    const elements = this.tracked();\n    const origin = this.host.getBoundingClientRect().top - this.host.scrollTop;\n    const tops = new Map(elements.map((element) => [element, element.getBoundingClientRect().top - origin]));\n\n    this.shifts = new Map();\n    for (const animation of this.host.getAnimations({ subtree: true })) {\n      const target = (animation.effect as KeyframeEffect).target as Element;\n      if (target !== this.host) {\n        this.shifts.set(target, translateY(target));\n      }\n    }\n    for (const [moving, shift] of this.shifts) {\n      for (const [element, top] of tops) {\n        if (moving.contains(element)) {\n          tops.set(element, top - shift);\n        }\n      }\n    }\n\n    for (const element of elements) {\n      if (!this.watched.has(element)) {\n        this.watched.add(element);\n        this.resizes.observe(element);\n      }\n    }\n    for (const element of this.watched) {\n      if (!tops.has(element)) {\n        this.watched.delete(element);\n        this.running.delete(element);\n        this.resizes.unobserve(element);\n      }\n    }\n    return tops;\n  }\n\n  private onChange(): void {\n    const before = this.tops;\n    const after = this.measure();\n    this.tops = after;\n\n    const changed = after.size !== before.size || Array.from(after.keys()).some((element) => !before.has(element));\n    if (this.reduced() || !changed) {\n      return;\n    }\n\n    const duration = readDuration(this.host, '--duration-base', 260);\n    const easing = readEasing(this.host, '--ease-out', 'ease-out');\n    const moved = (element: HTMLElement): number => (before.get(element) ?? 0) - (after.get(element) ?? 0);\n\n    for (const [element] of after) {\n      if (!before.has(element)) {\n        continue;\n      }\n      const own = moved(element) - moved(this.parentItem(element, before, after));\n      if (Math.abs(own) < 0.5) {\n        continue;\n      }\n      const from = own + (this.shifts.get(element) ?? 0);\n      this.running.get(element)?.cancel();\n      const animation = element.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(0)' }], {\n        duration,\n        easing,\n      });\n      animation.onfinish = () => {\n        if (this.running.get(element) === animation) {\n          this.running.delete(element);\n        }\n      };\n      this.running.set(element, animation);\n    }\n  }\n\n  private parentItem(\n    element: HTMLElement,\n    before: Map<HTMLElement, number>,\n    after: Map<HTMLElement, number>,\n  ): HTMLElement {\n    let node = element.parentElement as HTMLElement;\n    while (node !== this.host && !(before.has(node) && after.has(node))) {\n      node = node.parentElement as HTMLElement;\n    }\n    return node;\n  }\n}\n\n/**\n * Marks an element as an item of the nearest `uiFlipList`, at any depth. Once one item is marked,\n * the list follows its marked items only.\n *\n * @example\n * <tr uiTr uiFlipItem animate.leave=\"ui-leave-fade\">...</tr>\n */\n@Directive({\n  selector: '[uiFlipItem]',\n})\nexport class UiFlipItem {\n  constructor() {\n    const items = inject(FlipItems, { optional: true });\n    if (items) {\n      const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n      items.add(element);\n      inject(DestroyRef).onDestroy(() => items.remove(element));\n    }\n  }\n}\n","import { DestroyRef, Directive, ElementRef, effect, inject, input, output, untracked } from '@angular/core';\n\nimport { readDuration, readEasing } from './internal/tokens';\nimport { injectReducedMotion } from './reduced-motion';\n\nconst HOLD_MS = 200;\nconst SCROLL_SETTLE_MS = 200;\nconst SCROLL_START_MS = 300;\n\nfunction paintedElements(host: HTMLElement): HTMLElement[] {\n  if (host.tagName === 'TR') {\n    return Array.from(host.children).filter((cell): cell is HTMLElement => cell instanceof HTMLElement);\n  }\n  if (host.hasAttribute('ui-group-cell') && host.firstElementChild instanceof HTMLElement) {\n    return [host.firstElementChild];\n  }\n  return [host];\n}\n\n/**\n * Draws the eye to an element that just changed: scrolls it into view when off screen, flashes the\n * `--soft` fill, then fades back. Each new non-null token plays once, so pass a fresh value per\n * event (an object or a counter), not a boolean. A non-null token present at first render plays on\n * arrival. Can sit on the same element as `animate.enter`: it waits for that fade to finish.\n * `highlighted` fires when the flash starts, after any scroll and enter fade, so a toast can follow it.\n *\n * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and\n * below it (header, tab bar, action bar), or a row under them counts as on screen. For an arrival\n * on a page opened at the element, scroll to it first (`scrollIntoView` in `afterNextRender`) and\n * set the token afterwards, otherwise it scrolls smoothly from where the page is.\n *\n * @example\n * <a ui-row [uiHighlight]=\"changed() === holding.id ? token() : null\" routerLink=\"/holdings/1\">...</a>\n */\n@Directive({\n  selector: '[uiHighlight]',\n})\nexport class UiHighlight {\n  readonly uiHighlight = input<unknown>(null);\n  readonly highlighted = output<void>();\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly reduced = injectReducedMotion();\n  private cancel: (() => void) | null = null;\n\n  constructor() {\n    effect(() => {\n      const token = this.uiHighlight();\n      if (token === null || token === undefined) {\n        return;\n      }\n      untracked(() => this.play());\n    });\n\n    inject(DestroyRef).onDestroy(() => this.cancel?.());\n  }\n\n  private play(): void {\n    this.cancel?.();\n\n    if (this.isVisible()) {\n      this.cancel = this.flash();\n      return;\n    }\n\n    const reduced = this.reduced();\n    this.host.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'center' });\n\n    if (reduced) {\n      this.cancel = this.flash();\n      return;\n    }\n\n    let stopFlash: (() => void) | null = null;\n    let timer: ReturnType<typeof setTimeout>;\n    const moves = (event: Event): boolean =>\n      event.target === document || (event.target instanceof Node && event.target.contains(this.host));\n    const start = (): void => {\n      stopListening();\n      stopFlash = this.flash();\n    };\n    const onScrollEnd = (event: Event): void => {\n      if (moves(event)) {\n        start();\n      }\n    };\n    const onScroll = (event: Event): void => {\n      if (moves(event)) {\n        clearTimeout(timer);\n        timer = setTimeout(start, SCROLL_SETTLE_MS);\n      }\n    };\n    const stopListening = (): void => {\n      clearTimeout(timer);\n      window.removeEventListener('scrollend', onScrollEnd, true);\n      window.removeEventListener('scroll', onScroll, true);\n    };\n    timer = setTimeout(start, SCROLL_START_MS);\n    window.addEventListener('scrollend', onScrollEnd, true);\n    window.addEventListener('scroll', onScroll, true);\n\n    this.cancel = () => {\n      stopListening();\n      stopFlash?.();\n    };\n  }\n\n  private isVisible(): boolean {\n    const rect = this.host.getBoundingClientRect();\n    const style = getComputedStyle(this.host);\n    const top = parseFloat(style.scrollMarginTop) || 0;\n    const bottom = parseFloat(style.scrollMarginBottom) || 0;\n    return rect.top >= top && rect.bottom <= window.innerHeight - bottom;\n  }\n\n  private flash(): () => void {\n    const painted = paintedElements(this.host);\n    let animations: Animation[] = [];\n    let timer: ReturnType<typeof setTimeout> | undefined;\n\n    const paint = (): void => {\n      const fade = readDuration(this.host, '--duration-highlight', 1200);\n      const easing = readEasing(this.host, '--ease-out', 'ease-out');\n      const total = HOLD_MS + fade;\n      animations = painted.map((element) =>\n        element.animate(\n          [\n            { backgroundColor: 'var(--soft)', offset: 0 },\n            { backgroundColor: 'var(--soft)', offset: HOLD_MS / total, easing },\n            { offset: 1 },\n          ],\n          { duration: total },\n        ),\n      );\n      this.highlighted.emit();\n    };\n\n    const frame = requestAnimationFrame(() => {\n      const remaining = Array.from(new Set([this.host, ...painted]))\n        .flatMap((element) => element.getAnimations())\n        .map((animation) => {\n          const timing = (animation.effect as AnimationEffect).getComputedTiming();\n          return Number(timing.endTime) - Number(timing.localTime ?? 0);\n        })\n        .filter((left) => Number.isFinite(left));\n      if (remaining.length === 0) {\n        paint();\n        return;\n      }\n      timer = setTimeout(paint, Math.min(Math.max(...remaining), readDuration(this.host, '--duration-base', 260)));\n    });\n\n    return () => {\n      cancelAnimationFrame(frame);\n      clearTimeout(timer);\n      animations.forEach((animation) => animation.cancel());\n    };\n  }\n}\n","import { ElementRef, afterNextRender, inject } from '@angular/core';\n\n/**\n * Holds the transitions of the host and of everything inside it until two frames after its first\n * render, so bound classes do not animate on page open. Call it in an injection context. A host\n * whose view is never refreshed (a detached change detector) never gets its transitions back.\n *\n * @example\n * constructor() {\n *   holdTransitionsUntilRendered();\n * }\n */\nexport function holdTransitionsUntilRendered(): void {\n  const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n\n  host.setAttribute('data-ui-settling', '');\n  afterNextRender({\n    read: () => {\n      requestAnimationFrame(() => requestAnimationFrame(() => host.removeAttribute('data-ui-settling')));\n    },\n  });\n}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-row.mjs

@@ -20,7 +20,7 @@ const SIZE_CLASSES = {
 	lg: "min-h-15",
 	xl: "min-h-18 pointer-fine:min-h-17",
 	card: "min-h-17",
-	dense: "min-h-14 lg:min-h-12"
+	dense: "min-h-14"
 };
 const SIZE_GAPS = {
 	md: "gap-2.5",

package/fesm2022/joanroucoux-cairn-ui-row.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-row.mjs","names":[],"sources":["../../../projects/ui/row/row.ts"],"sourcesContent":["import { Component, DestroyRef, Directive, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nexport const ROW_SIZES = ['md', 'lg', 'xl', 'card', 'dense'] as const;\nexport type RowSize = (typeof ROW_SIZES)[number];\n\nexport const ROW_PADDINGS = ['md', 'sm', 'none'] as const;\nexport type RowPadding = (typeof ROW_PADDINGS)[number];\n\nexport const ROW_GAPS = ['default', 'sm'] as const;\nexport type RowGap = (typeof ROW_GAPS)[number];\n\nexport const ROW_TRAILINGS = ['none', 'chevron'] as const;\nexport type RowTrailing = (typeof ROW_TRAILINGS)[number];\n\nconst SIZE_CLASSES: Record<RowSize, string> = {\n  md: 'min-h-14',\n  lg: 'min-h-15',\n  xl: 'min-h-18 pointer-fine:min-h-17',\n  card: 'min-h-17',\n  dense: 'min-h-14 lg:min-h-12',\n};\n\nconst SIZE_GAPS: Record<RowSize, string> = { md: 'gap-2.5', lg: 'gap-2.5', xl: 'gap-3', card: 'gap-2', dense: 'gap-3' };\n\nconst PADDING_CLASSES: Record<RowPadding, string> = { md: 'px-2.5', sm: 'px-2', none: 'px-0' };\n\nconst BASE_CLASSES =\n  'flex w-full items-center py-1.5 rounded-control text-left select-none touch-manipulation focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst INTERACTIVE_CLASSES =\n  'transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale)';\n\nconst CHEVRON_CLASSES = 'min-h-(--row-min) gap-3 px-0 hover:text-(--muted-foreground)';\n\nconst CHEVRON_INTERACTIVE_CLASSES = 'transition-colors [transition-duration:var(--duration-fast)] ease-out';\n\nconst UNAVAILABLE_CLASSES = 'opacity-50 cursor-not-allowed';\n\nconst SELECTED_CLASSES = 'bg-(--soft)';\n\n/**\n * Clickable row of a list: a holding, an account, a search result. With `trailing=\"chevron\"` it is a\n * flush link row: no side padding, a 16 px chevron at the end, the text dimming on hover.\n *\n * @example\n * <a ui-row [selected]=\"holding.id === openId()\" [routerLink]=\"['/holdings', holding.id]\">\n *   {{ holding.name }}\n * </a>\n */\n@Component({\n  selector: 'a[ui-row], button[ui-row]',\n  template: `\n    <ng-content />\n    @if (trailing() === 'chevron') {\n      <svg\n        aria-hidden=\"true\"\n        class=\"block flex-none fill-none stroke-(--subtle-foreground)\"\n        height=\"16\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"16\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    }\n    @if (busy()) {\n      <span\n        aria-hidden=\"true\"\n        class=\"rounded-pill animate-cairn-spin size-4 flex-none border-2 border-current border-r-transparent\"\n      ></span>\n    }\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-busy]': 'busy() || null',\n    '[attr.aria-disabled]': \"busy() || unavailable() ? 'true' : null\",\n    '[attr.aria-current]': \"selected() ? 'true' : null\",\n  },\n})\nexport class UiRow {\n  readonly selected = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly unavailable = input(false, { transform: booleanAttribute });\n  readonly size = input<RowSize>('md');\n  readonly padding = input<RowPadding>('md');\n  readonly gap = input<RowGap>('default');\n  readonly trailing = input<RowTrailing>('none');\n\n  protected readonly classes = computed(() => {\n    const chevron = this.trailing() === 'chevron';\n    const layout = chevron\n      ? CHEVRON_CLASSES\n      : `${SIZE_CLASSES[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}`;\n    const interactive = chevron ? CHEVRON_INTERACTIVE_CLASSES : INTERACTIVE_CLASSES;\n\n    return `${BASE_CLASSES} ${layout}${this.unavailable() ? ` ${UNAVAILABLE_CLASSES}` : ` ${interactive}`}${this.selected() ? ` ${SELECTED_CLASSES}` : ''}${this.busy() ? ' pointer-events-none' : ''}`;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const guard = (event: Event): void => {\n      if (this.busy() || this.unavailable()) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n      }\n    };\n\n    host.addEventListener('click', guard, { capture: true });\n    inject(DestroyRef).onDestroy(() => host.removeEventListener('click', guard, { capture: true }));\n  }\n}\n\n/**\n * Lays out a `ui-row` with a trailing action beside it, such as a \"more\" icon button.\n *\n * @example\n * <div uiRowItem>\n *   <a ui-row size=\"xl\" padding=\"sm\" routerLink=\"/accounts/1\">...</a>\n *   <button ui-button variant=\"quiet\" size=\"icon-sm\" aria-label=\"Account actions\">...</button>\n * </div>\n */\n@Directive({\n  selector: '[uiRowItem]',\n  host: {\n    class:\n      'flex items-center gap-1 [&>[ui-row]]:w-auto [&>[ui-row]]:min-w-0 [&>[ui-row]]:flex-1 [&>:not([ui-row])]:flex-none',\n  },\n})\nexport class UiRowItem {}\n\n/**\n * Non-interactive row of a list, separated from the next by a hairline: a passkey with its delete\n * button, a device, a setting. Put it on an `li` or a `div`. Use `ui-row` instead when the whole\n * row is a link or an action.\n *\n * @example\n * <ul>\n *   <li uiListRow>\n *     <span class=\"flex-1\">MacBook Air</span>\n *     <button ui-button variant=\"quiet-destructive\" size=\"icon-sm\" aria-label=\"Delete MacBook Air\">...</button>\n *   </li>\n * </ul>\n */\n@Directive({\n  selector: '[uiListRow]',\n  host: { '[class]': 'classes()' },\n})\nexport class UiListRow {\n  readonly ruled = input(true, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    this.ruled()\n      ? 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17 shadow-[inset_0_-1px_0_var(--hairline)]'\n      : 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17',\n  );\n}\n\n/**\n * Groups link rows under a hairline, as the \"other ways\" links under a search list. Put it on a `div`\n * around `ui-row` with `trailing=\"chevron\"`.\n *\n * @example\n * <div uiRowGroup>\n *   <button ui-row type=\"button\" trailing=\"chevron\">Saisir à la main</button>\n * </div>\n */\n@Directive({\n  selector: '[uiRowGroup]',\n  host: { class: 'flex flex-col pt-1 shadow-[inset_0_1px_0_var(--hairline)]' },\n})\nexport class UiRowGroup {}\n\n/**\n * The filled tile that leads a row, holding an icon. Put it on a `span` as the first child of a\n * `ui-row` or a `uiListRow`.\n *\n * @example\n * <a ui-row size=\"xl\" padding=\"sm\" href=\"/export\">\n *   <span uiRowTile><svg lucideDownload [size]=\"18\" /></span>\n *   Export\n * </a>\n */\n@Directive({\n  selector: '[uiRowTile]',\n  host: { class: 'rounded-control grid size-9 flex-none place-items-center bg-(--muted)' },\n})\nexport class UiRowTile {}\n"],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-row.mjs","names":[],"sources":["../../../projects/ui/row/row.ts"],"sourcesContent":["import { Component, DestroyRef, Directive, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nexport const ROW_SIZES = ['md', 'lg', 'xl', 'card', 'dense'] as const;\nexport type RowSize = (typeof ROW_SIZES)[number];\n\nexport const ROW_PADDINGS = ['md', 'sm', 'none'] as const;\nexport type RowPadding = (typeof ROW_PADDINGS)[number];\n\nexport const ROW_GAPS = ['default', 'sm'] as const;\nexport type RowGap = (typeof ROW_GAPS)[number];\n\nexport const ROW_TRAILINGS = ['none', 'chevron'] as const;\nexport type RowTrailing = (typeof ROW_TRAILINGS)[number];\n\nconst SIZE_CLASSES: Record<RowSize, string> = {\n  md: 'min-h-14',\n  lg: 'min-h-15',\n  xl: 'min-h-18 pointer-fine:min-h-17',\n  card: 'min-h-17',\n  dense: 'min-h-14',\n};\n\nconst SIZE_GAPS: Record<RowSize, string> = { md: 'gap-2.5', lg: 'gap-2.5', xl: 'gap-3', card: 'gap-2', dense: 'gap-3' };\n\nconst PADDING_CLASSES: Record<RowPadding, string> = { md: 'px-2.5', sm: 'px-2', none: 'px-0' };\n\nconst BASE_CLASSES =\n  'flex w-full items-center py-1.5 rounded-control text-left select-none touch-manipulation focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst INTERACTIVE_CLASSES =\n  'transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale)';\n\nconst CHEVRON_CLASSES = 'min-h-(--row-min) gap-3 px-0 hover:text-(--muted-foreground)';\n\nconst CHEVRON_INTERACTIVE_CLASSES = 'transition-colors [transition-duration:var(--duration-fast)] ease-out';\n\nconst UNAVAILABLE_CLASSES = 'opacity-50 cursor-not-allowed';\n\nconst SELECTED_CLASSES = 'bg-(--soft)';\n\n/**\n * Clickable row of a list: a holding, an account, a search result. With `trailing=\"chevron\"` it is a\n * flush link row: no side padding, a 16 px chevron at the end, the text dimming on hover.\n *\n * @example\n * <a ui-row [selected]=\"holding.id === openId()\" [routerLink]=\"['/holdings', holding.id]\">\n *   {{ holding.name }}\n * </a>\n */\n@Component({\n  selector: 'a[ui-row], button[ui-row]',\n  template: `\n    <ng-content />\n    @if (trailing() === 'chevron') {\n      <svg\n        aria-hidden=\"true\"\n        class=\"block flex-none fill-none stroke-(--subtle-foreground)\"\n        height=\"16\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"16\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    }\n    @if (busy()) {\n      <span\n        aria-hidden=\"true\"\n        class=\"rounded-pill animate-cairn-spin size-4 flex-none border-2 border-current border-r-transparent\"\n      ></span>\n    }\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-busy]': 'busy() || null',\n    '[attr.aria-disabled]': \"busy() || unavailable() ? 'true' : null\",\n    '[attr.aria-current]': \"selected() ? 'true' : null\",\n  },\n})\nexport class UiRow {\n  readonly selected = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly unavailable = input(false, { transform: booleanAttribute });\n  readonly size = input<RowSize>('md');\n  readonly padding = input<RowPadding>('md');\n  readonly gap = input<RowGap>('default');\n  readonly trailing = input<RowTrailing>('none');\n\n  protected readonly classes = computed(() => {\n    const chevron = this.trailing() === 'chevron';\n    const layout = chevron\n      ? CHEVRON_CLASSES\n      : `${SIZE_CLASSES[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}`;\n    const interactive = chevron ? CHEVRON_INTERACTIVE_CLASSES : INTERACTIVE_CLASSES;\n\n    return `${BASE_CLASSES} ${layout}${this.unavailable() ? ` ${UNAVAILABLE_CLASSES}` : ` ${interactive}`}${this.selected() ? ` ${SELECTED_CLASSES}` : ''}${this.busy() ? ' pointer-events-none' : ''}`;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const guard = (event: Event): void => {\n      if (this.busy() || this.unavailable()) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n      }\n    };\n\n    host.addEventListener('click', guard, { capture: true });\n    inject(DestroyRef).onDestroy(() => host.removeEventListener('click', guard, { capture: true }));\n  }\n}\n\n/**\n * Lays out a `ui-row` with a trailing action beside it, such as a \"more\" icon button.\n *\n * @example\n * <div uiRowItem>\n *   <a ui-row size=\"xl\" padding=\"sm\" routerLink=\"/accounts/1\">...</a>\n *   <button ui-button variant=\"quiet\" size=\"icon-sm\" aria-label=\"Account actions\">...</button>\n * </div>\n */\n@Directive({\n  selector: '[uiRowItem]',\n  host: {\n    class:\n      'flex items-center gap-1 [&>[ui-row]]:w-auto [&>[ui-row]]:min-w-0 [&>[ui-row]]:flex-1 [&>:not([ui-row])]:flex-none',\n  },\n})\nexport class UiRowItem {}\n\n/**\n * Non-interactive row of a list, separated from the next by a hairline: a passkey with its delete\n * button, a device, a setting. Put it on an `li` or a `div`. Use `ui-row` instead when the whole\n * row is a link or an action.\n *\n * @example\n * <ul>\n *   <li uiListRow>\n *     <span class=\"flex-1\">MacBook Air</span>\n *     <button ui-button variant=\"quiet-destructive\" size=\"icon-sm\" aria-label=\"Delete MacBook Air\">...</button>\n *   </li>\n * </ul>\n */\n@Directive({\n  selector: '[uiListRow]',\n  host: { '[class]': 'classes()' },\n})\nexport class UiListRow {\n  readonly ruled = input(true, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    this.ruled()\n      ? 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17 shadow-[inset_0_-1px_0_var(--hairline)]'\n      : 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17',\n  );\n}\n\n/**\n * Groups link rows under a hairline, as the \"other ways\" links under a search list. Put it on a `div`\n * around `ui-row` with `trailing=\"chevron\"`.\n *\n * @example\n * <div uiRowGroup>\n *   <button ui-row type=\"button\" trailing=\"chevron\">Saisir à la main</button>\n * </div>\n */\n@Directive({\n  selector: '[uiRowGroup]',\n  host: { class: 'flex flex-col pt-1 shadow-[inset_0_1px_0_var(--hairline)]' },\n})\nexport class UiRowGroup {}\n\n/**\n * The filled tile that leads a row, holding an icon. Put it on a `span` as the first child of a\n * `ui-row` or a `uiListRow`.\n *\n * @example\n * <a ui-row size=\"xl\" padding=\"sm\" href=\"/export\">\n *   <span uiRowTile><svg lucideDownload [size]=\"18\" /></span>\n *   Export\n * </a>\n */\n@Directive({\n  selector: '[uiRowTile]',\n  host: { class: 'rounded-control grid size-9 flex-none place-items-center bg-(--muted)' },\n})\nexport class UiRowTile {}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-table.mjs

@@ -648,7 +648,7 @@ var UiGroupCell = class UiGroupCell {
     @if (collapsible()) {
       <h2 class="m-0 font-normal">
         <button
-          class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
+          class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
           data-group-heading
           type="button"
           [attr.aria-controls]="controls() || null"
@@ -730,7 +730,7 @@ i0.ɵɵngDeclareClassMetadata({
     @if (collapsible()) {
       <h2 class="m-0 font-normal">
         <button
-          class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
+          class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
           data-group-heading
           type="button"
           [attr.aria-controls]="controls() || null"

package/fesm2022/joanroucoux-cairn-ui-table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-table.mjs","names":[],"sources":["../../../projects/ui/table/table.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, Directive, booleanAttribute, computed, inject, input, model } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Breakpoints a secondary column can be held back until. */\nexport const CELL_BREAKPOINTS = ['md', 'lg'] as const;\nexport type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];\n\n/** Body row heights. */\nexport const TABLE_ROWS = ['48', '52', '60'] as const;\nexport type TableRow = (typeof TABLE_ROWS)[number];\n\nconst ROW_CLASSES: Record<TableRow, string> = {\n  '48': '[--table-row:3rem]',\n  '52': '[--table-row:3.25rem]',\n  '60': '[--table-row:3.75rem]',\n};\n\nconst FROM_CLASSES: Record<CellBreakpoint, string> = {\n  md: 'hidden md:table-cell',\n  lg: 'hidden lg:table-cell',\n};\n\nconst TH_CLASSES =\n  'h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)';\nconst TD_CLASSES = 'h-(--table-row) px-2 align-middle text-body';\nconst NUMERIC_CLASSES = 'text-right tabular-nums whitespace-nowrap';\nconst TEXTUAL_CLASSES = 'text-left';\nconst PRIMARY_CLASSES = 'w-full max-w-0';\n\n/**\n * Styled native table. `row` sets the height of every body row, `rule` draws or drops the hairline\n * under the header, `spaced` leaves a gap between the header and the first row.\n *\n * @example\n * <table uiTable row=\"60\" [rule]=\"false\">\n */\n@Directive({\n  selector: 'table[uiTable]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiTable {\n  readonly row = input<TableRow>('48');\n  readonly rule = input(true, { transform: booleanAttribute });\n  readonly spaced = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    [\n      'w-full border-separate border-spacing-0',\n      ROW_CLASSES[this.row()],\n      this.rule() ? '[--table-rule:inset_0_-1px_0_var(--hairline)]' : '[--table-rule:none]',\n      this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',\n    ].join(' '),\n  );\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n\n/**\n * Body of one group of rows. `collapsed` hides every `tr[uiTr]` but the group row with `hidden`: the rows\n * stay in the DOM, so a `uiFlipList` around the table sees no item added or removed and slides\n * nothing. A plain `tr` without `uiTr` is not hidden.\n *\n * @example\n * <tbody uiGroup [collapsed]=\"!open()\">\n */\n@Directive({\n  selector: 'tbody[uiGroup]',\n  host: { class: 'after:table-row after:h-1 after:content-[\"\"]' },\n})\nexport class UiGroup {\n  readonly collapsed = input(false, { transform: booleanAttribute });\n}\n\n/**\n * Body or group row. `selected` takes the soft fill, `interactive` (a row that opens something) also\n * presses to it. `group` marks the row that holds a group band: it has no hover state.\n *\n * @example\n * <tr uiTr [selected]=\"open\">...\n * <tr uiTr group><td ui-group-cell name=\"Brokerage\">...\n */\n@Directive({\n  selector: 'tr[uiTr]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-selected]': 'selected() ? \"true\" : null',\n    '[hidden]': '!group() && body?.collapsed()',\n  },\n})\nexport class UiTr {\n  protected readonly body = inject(UiGroup, { optional: true });\n\n  readonly group = input(false, { transform: booleanAttribute });\n  readonly selected = input(false, { transform: booleanAttribute });\n  readonly interactive = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() => {\n    if (this.group()) {\n      return '';\n    }\n    return [\n      'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',\n      this.selected() ? '[&>td]:bg-(--soft)' : '',\n      'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',\n      this.interactive()\n        ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'\n        : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n}\n\nconst cellClasses = (\n  base: string,\n  numeric: boolean,\n  primary: boolean,\n  from: CellBreakpoint | null,\n  secondary: boolean,\n): string => {\n  const breakpoint = from ?? (secondary ? 'lg' : null);\n  return [\n    base,\n    numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,\n    primary ? PRIMARY_CLASSES : '',\n    breakpoint ? FROM_CLASSES[breakpoint] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n};\n\n/**\n * Column header. `numeric` right-aligns, `secondary` (or `from`) hides the column below a\n * breakpoint, `primary` makes it the column that absorbs the free width, `tall` is a 40px header,\n * `width` fixes the column width.\n *\n * @example\n * <th uiTh numeric secondary width=\"108px\">Quantity</th>\n */\n@Directive({\n  selector: 'th[uiTh]',\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'width()',\n    '[style.min-width]': 'width()',\n  },\n})\nexport class UiTh {\n  readonly width = input<string | null>(null);\n  readonly numeric = input(false, { transform: booleanAttribute });\n  readonly primary = input(false, { transform: booleanAttribute });\n  readonly secondary = input(false, { transform: booleanAttribute });\n  readonly tall = input(false, { transform: booleanAttribute });\n  readonly from = input<CellBreakpoint | null>(null);\n\n  protected readonly classes = computed(() =>\n    cellClasses(\n      `${this.tall() ? '[--table-head:2.5rem]' : '[--table-head:2.25rem]'} ${TH_CLASSES}`,\n      this.numeric(),\n      this.primary(),\n      this.from(),\n      this.secondary(),\n    ),\n  );\n}\n\n/** Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match. */\n@Directive({\n  selector: 'td[uiTd]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiTd {\n  readonly numeric = input(false, { transform: booleanAttribute });\n  readonly primary = input(false, { transform: booleanAttribute });\n  readonly secondary = input(false, { transform: booleanAttribute });\n  readonly from = input<CellBreakpoint | null>(null);\n\n  protected readonly classes = computed(() =>\n    cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()),\n  );\n}\n\n/** Group band sizes. */\nexport const GROUP_SIZES = ['md', 'lg'] as const;\nexport type GroupSize = (typeof GROUP_SIZES)[number];\n\n/**\n * The band that opens a group of rows: name, meta beside it, the projected total on the right.\n * Spans the whole row through `colspan`.\n *\n * With `collapsible` the band is a button inside the heading, with a chevron that turns when the\n * group is folded. `expanded` is a model: the page keeps the fold memory and sets `collapsed` on the\n * `tbody[uiGroup]`. `toggleDisabled` keeps the button focusable and announced, but a click changes\n * nothing (a filter holds the group open). `controls` is the id of the group it folds.\n *\n * @example\n * <tr uiTr group><td ui-group-cell colspan=\"4\" name=\"Brokerage\" meta=\"Savings plan\">...total...</td></tr>\n * <tr uiTr group><td ui-group-cell collapsible [(expanded)]=\"open\" controls=\"brokerage\" colspan=\"4\" name=\"Brokerage\">...</td></tr>\n */\n@Component({\n  selector: 'td[ui-group-cell]',\n  imports: [NgTemplateOutlet],\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  template: `\n    <ng-template #total><ng-content /></ng-template>\n    @if (collapsible()) {\n      <h2 class=\"m-0 font-normal\">\n        <button\n          class=\"rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)\"\n          data-group-heading\n          type=\"button\"\n          [attr.aria-controls]=\"controls() || null\"\n          [attr.aria-disabled]=\"toggleDisabled() ? 'true' : null\"\n          [attr.aria-expanded]=\"expanded()\"\n          [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n          (click)=\"toggle()\"\n        >\n          <span class=\"flex min-w-0 items-center gap-2.5\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out\"\n              fill=\"none\"\n              height=\"18\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.75\"\n              viewBox=\"0 0 24 24\"\n              width=\"18\"\n              [class.-rotate-90]=\"!expanded()\"\n            >\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n            <span class=\"flex min-w-0 items-baseline gap-3\">\n              <span class=\"text-body font-semibold whitespace-nowrap\">{{ name() }}</span>\n              @if (meta()) {\n                <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n              }\n            </span>\n          </span>\n          <span class=\"text-body font-semibold whitespace-nowrap tabular-nums\">\n            <ng-container [ngTemplateOutlet]=\"total\" />\n          </span>\n        </button>\n      </h2>\n    } @else {\n      <div\n        class=\"rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2\"\n        [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n      >\n        <div class=\"flex min-w-0 items-baseline gap-3\">\n          <h2 class=\"text-body m-0 font-semibold whitespace-nowrap outline-none\" data-group-heading tabindex=\"-1\">\n            {{ name() }}\n          </h2>\n          @if (meta()) {\n            <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n          }\n        </div>\n        <span class=\"font-semibold whitespace-nowrap tabular-nums\"><ng-container [ngTemplateOutlet]=\"total\" /></span>\n      </div>\n    }\n  `,\n})\nexport class UiGroupCell {\n  readonly name = input.required<string>();\n  readonly meta = input<string>();\n  readonly size = input<GroupSize>('md');\n  readonly collapsible = input(false, { transform: booleanAttribute });\n  readonly expanded = model(true);\n  readonly toggleDisabled = input(false, { transform: booleanAttribute });\n  readonly controls = input<string>();\n\n  protected readonly hostClasses = computed(\n    () => `px-0 ${this.size() === 'lg' ? 'pt-3' : 'pt-2.5'} pb-1 align-middle text-body`,\n  );\n\n  protected toggle(): void {\n    if (!this.toggleDisabled()) {\n      this.expanded.update((expanded) => !expanded);\n    }\n  }\n}\n\n/**\n * Makes a link or button the way into its row: by default it stretches over the whole row, so the\n * row is one target. With `[stretch]=\"false\"` only the name is the target. `current` marks the open\n * line. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/lines/42\">Ferrari</a></td>\n * <td uiTd primary><a uiRowLink [stretch]=\"false\" href=\"/accounts/3\">Brokerage</a></td>\n */\n@Directive({\n  selector: 'a[uiRowLink], button[uiRowLink]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-current]': 'current() ? \"true\" : null',\n  },\n})\nexport class UiRowLink {\n  readonly stretch = input(true, { transform: booleanAttribute });\n  readonly current = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    this.stretch()\n      ? 'block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)'\n      : 'block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n  );\n}\n\n/** A control in another cell of a stretched-link row: keeps it clickable above the row-wide link. */\n@Directive({\n  selector: '[uiRowAction]',\n  host: { class: 'relative z-1' },\n})\nexport class UiRowAction {}\n\n/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */\nexport const SUB_TONES = ['subtle', 'stale', 'inherit'] as const;\nexport type SubTone = (typeof SUB_TONES)[number];\n\nconst SUB_TONE_CLASSES: Record<SubTone, string> = {\n  subtle: 'font-normal text-(--subtle-foreground)',\n  stale: 'font-medium text-(--stale)',\n  inherit: 'font-normal',\n};\n\n/**\n * A second line under a cell's main text. `narrow` shows it only under 1024px, for the data held\n * back by `secondary` columns.\n *\n * @example\n * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>\n * <span uiCellSub tone=\"stale\">Quote of 24/09</span>\n */\n@Directive({\n  selector: '[uiCellSub]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiCellSub {\n  readonly narrow = input(false, { transform: booleanAttribute });\n  readonly tone = input<SubTone>('subtle');\n\n  protected readonly classes = computed(\n    () =>\n      `${this.narrow() ? 'lg:hidden ' : ''}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-table.mjs","names":[],"sources":["../../../projects/ui/table/table.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, Directive, booleanAttribute, computed, inject, input, model } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Breakpoints a secondary column can be held back until. */\nexport const CELL_BREAKPOINTS = ['md', 'lg'] as const;\nexport type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];\n\n/** Body row heights. */\nexport const TABLE_ROWS = ['48', '52', '60'] as const;\nexport type TableRow = (typeof TABLE_ROWS)[number];\n\nconst ROW_CLASSES: Record<TableRow, string> = {\n  '48': '[--table-row:3rem]',\n  '52': '[--table-row:3.25rem]',\n  '60': '[--table-row:3.75rem]',\n};\n\nconst FROM_CLASSES: Record<CellBreakpoint, string> = {\n  md: 'hidden md:table-cell',\n  lg: 'hidden lg:table-cell',\n};\n\nconst TH_CLASSES =\n  'h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)';\nconst TD_CLASSES = 'h-(--table-row) px-2 align-middle text-body';\nconst NUMERIC_CLASSES = 'text-right tabular-nums whitespace-nowrap';\nconst TEXTUAL_CLASSES = 'text-left';\nconst PRIMARY_CLASSES = 'w-full max-w-0';\n\n/**\n * Styled native table. `row` sets the height of every body row, `rule` draws or drops the hairline\n * under the header, `spaced` leaves a gap between the header and the first row.\n *\n * @example\n * <table uiTable row=\"60\" [rule]=\"false\">\n */\n@Directive({\n  selector: 'table[uiTable]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiTable {\n  readonly row = input<TableRow>('48');\n  readonly rule = input(true, { transform: booleanAttribute });\n  readonly spaced = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    [\n      'w-full border-separate border-spacing-0',\n      ROW_CLASSES[this.row()],\n      this.rule() ? '[--table-rule:inset_0_-1px_0_var(--hairline)]' : '[--table-rule:none]',\n      this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',\n    ].join(' '),\n  );\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n\n/**\n * Body of one group of rows. `collapsed` hides every `tr[uiTr]` but the group row with `hidden`: the rows\n * stay in the DOM, so a `uiFlipList` around the table sees no item added or removed and slides\n * nothing. A plain `tr` without `uiTr` is not hidden.\n *\n * @example\n * <tbody uiGroup [collapsed]=\"!open()\">\n */\n@Directive({\n  selector: 'tbody[uiGroup]',\n  host: { class: 'after:table-row after:h-1 after:content-[\"\"]' },\n})\nexport class UiGroup {\n  readonly collapsed = input(false, { transform: booleanAttribute });\n}\n\n/**\n * Body or group row. `selected` takes the soft fill, `interactive` (a row that opens something) also\n * presses to it. `group` marks the row that holds a group band: it has no hover state.\n *\n * @example\n * <tr uiTr [selected]=\"open\">...\n * <tr uiTr group><td ui-group-cell name=\"Brokerage\">...\n */\n@Directive({\n  selector: 'tr[uiTr]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-selected]': 'selected() ? \"true\" : null',\n    '[hidden]': '!group() && body?.collapsed()',\n  },\n})\nexport class UiTr {\n  protected readonly body = inject(UiGroup, { optional: true });\n\n  readonly group = input(false, { transform: booleanAttribute });\n  readonly selected = input(false, { transform: booleanAttribute });\n  readonly interactive = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() => {\n    if (this.group()) {\n      return '';\n    }\n    return [\n      'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',\n      this.selected() ? '[&>td]:bg-(--soft)' : '',\n      'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',\n      this.interactive()\n        ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'\n        : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n}\n\nconst cellClasses = (\n  base: string,\n  numeric: boolean,\n  primary: boolean,\n  from: CellBreakpoint | null,\n  secondary: boolean,\n): string => {\n  const breakpoint = from ?? (secondary ? 'lg' : null);\n  return [\n    base,\n    numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,\n    primary ? PRIMARY_CLASSES : '',\n    breakpoint ? FROM_CLASSES[breakpoint] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n};\n\n/**\n * Column header. `numeric` right-aligns, `secondary` (or `from`) hides the column below a\n * breakpoint, `primary` makes it the column that absorbs the free width, `tall` is a 40px header,\n * `width` fixes the column width.\n *\n * @example\n * <th uiTh numeric secondary width=\"108px\">Quantity</th>\n */\n@Directive({\n  selector: 'th[uiTh]',\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'width()',\n    '[style.min-width]': 'width()',\n  },\n})\nexport class UiTh {\n  readonly width = input<string | null>(null);\n  readonly numeric = input(false, { transform: booleanAttribute });\n  readonly primary = input(false, { transform: booleanAttribute });\n  readonly secondary = input(false, { transform: booleanAttribute });\n  readonly tall = input(false, { transform: booleanAttribute });\n  readonly from = input<CellBreakpoint | null>(null);\n\n  protected readonly classes = computed(() =>\n    cellClasses(\n      `${this.tall() ? '[--table-head:2.5rem]' : '[--table-head:2.25rem]'} ${TH_CLASSES}`,\n      this.numeric(),\n      this.primary(),\n      this.from(),\n      this.secondary(),\n    ),\n  );\n}\n\n/** Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match. */\n@Directive({\n  selector: 'td[uiTd]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiTd {\n  readonly numeric = input(false, { transform: booleanAttribute });\n  readonly primary = input(false, { transform: booleanAttribute });\n  readonly secondary = input(false, { transform: booleanAttribute });\n  readonly from = input<CellBreakpoint | null>(null);\n\n  protected readonly classes = computed(() =>\n    cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()),\n  );\n}\n\n/** Group band sizes. */\nexport const GROUP_SIZES = ['md', 'lg'] as const;\nexport type GroupSize = (typeof GROUP_SIZES)[number];\n\n/**\n * The band that opens a group of rows: name, meta beside it, the projected total on the right.\n * Spans the whole row through `colspan`.\n *\n * With `collapsible` the band is a button inside the heading, with a chevron that turns when the\n * group is folded. `expanded` is a model: the page keeps the fold memory and sets `collapsed` on the\n * `tbody[uiGroup]`. `toggleDisabled` keeps the button focusable and announced, but a click changes\n * nothing (a filter holds the group open). `controls` is the id of the group it folds.\n *\n * @example\n * <tr uiTr group><td ui-group-cell colspan=\"4\" name=\"Brokerage\" meta=\"Savings plan\">...total...</td></tr>\n * <tr uiTr group><td ui-group-cell collapsible [(expanded)]=\"open\" controls=\"brokerage\" colspan=\"4\" name=\"Brokerage\">...</td></tr>\n */\n@Component({\n  selector: 'td[ui-group-cell]',\n  imports: [NgTemplateOutlet],\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  template: `\n    <ng-template #total><ng-content /></ng-template>\n    @if (collapsible()) {\n      <h2 class=\"m-0 font-normal\">\n        <button\n          class=\"rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)\"\n          data-group-heading\n          type=\"button\"\n          [attr.aria-controls]=\"controls() || null\"\n          [attr.aria-disabled]=\"toggleDisabled() ? 'true' : null\"\n          [attr.aria-expanded]=\"expanded()\"\n          [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n          (click)=\"toggle()\"\n        >\n          <span class=\"flex min-w-0 items-center gap-2.5\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out\"\n              fill=\"none\"\n              height=\"18\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.75\"\n              viewBox=\"0 0 24 24\"\n              width=\"18\"\n              [class.-rotate-90]=\"!expanded()\"\n            >\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n            <span class=\"flex min-w-0 items-baseline gap-3\">\n              <span class=\"text-body font-semibold whitespace-nowrap\">{{ name() }}</span>\n              @if (meta()) {\n                <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n              }\n            </span>\n          </span>\n          <span class=\"text-body font-semibold whitespace-nowrap tabular-nums\">\n            <ng-container [ngTemplateOutlet]=\"total\" />\n          </span>\n        </button>\n      </h2>\n    } @else {\n      <div\n        class=\"rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2\"\n        [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n      >\n        <div class=\"flex min-w-0 items-baseline gap-3\">\n          <h2 class=\"text-body m-0 font-semibold whitespace-nowrap outline-none\" data-group-heading tabindex=\"-1\">\n            {{ name() }}\n          </h2>\n          @if (meta()) {\n            <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n          }\n        </div>\n        <span class=\"font-semibold whitespace-nowrap tabular-nums\"><ng-container [ngTemplateOutlet]=\"total\" /></span>\n      </div>\n    }\n  `,\n})\nexport class UiGroupCell {\n  readonly name = input.required<string>();\n  readonly meta = input<string>();\n  readonly size = input<GroupSize>('md');\n  readonly collapsible = input(false, { transform: booleanAttribute });\n  readonly expanded = model(true);\n  readonly toggleDisabled = input(false, { transform: booleanAttribute });\n  readonly controls = input<string>();\n\n  protected readonly hostClasses = computed(\n    () => `px-0 ${this.size() === 'lg' ? 'pt-3' : 'pt-2.5'} pb-1 align-middle text-body`,\n  );\n\n  protected toggle(): void {\n    if (!this.toggleDisabled()) {\n      this.expanded.update((expanded) => !expanded);\n    }\n  }\n}\n\n/**\n * Makes a link or button the way into its row: by default it stretches over the whole row, so the\n * row is one target. With `[stretch]=\"false\"` only the name is the target. `current` marks the open\n * line. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/lines/42\">Ferrari</a></td>\n * <td uiTd primary><a uiRowLink [stretch]=\"false\" href=\"/accounts/3\">Brokerage</a></td>\n */\n@Directive({\n  selector: 'a[uiRowLink], button[uiRowLink]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-current]': 'current() ? \"true\" : null',\n  },\n})\nexport class UiRowLink {\n  readonly stretch = input(true, { transform: booleanAttribute });\n  readonly current = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    this.stretch()\n      ? 'block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)'\n      : 'block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n  );\n}\n\n/** A control in another cell of a stretched-link row: keeps it clickable above the row-wide link. */\n@Directive({\n  selector: '[uiRowAction]',\n  host: { class: 'relative z-1' },\n})\nexport class UiRowAction {}\n\n/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */\nexport const SUB_TONES = ['subtle', 'stale', 'inherit'] as const;\nexport type SubTone = (typeof SUB_TONES)[number];\n\nconst SUB_TONE_CLASSES: Record<SubTone, string> = {\n  subtle: 'font-normal text-(--subtle-foreground)',\n  stale: 'font-medium text-(--stale)',\n  inherit: 'font-normal',\n};\n\n/**\n * A second line under a cell's main text. `narrow` shows it only under 1024px, for the data held\n * back by `secondary` columns.\n *\n * @example\n * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>\n * <span uiCellSub tone=\"stale\">Quote of 24/09</span>\n */\n@Directive({\n  selector: '[uiCellSub]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiCellSub {\n  readonly narrow = input(false, { transform: booleanAttribute });\n  readonly tone = input<SubTone>('subtle');\n\n  protected readonly classes = computed(\n    () =>\n      `${this.narrow() ? 'lg:hidden ' : ''}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`,\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joanroucoux/cairn-ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Cairn UI — a monochrome, accessible Angular design system.",
   "keywords": [
     "angular",

package/styles/theme.css

@@ -11,6 +11,7 @@
   --text-caption--letter-spacing: 0.01em;
   --text-label: 0.875rem;
   --text-label--line-height: 1.25rem;
+  --text-label--letter-spacing: normal;
   --text-body: 1rem;
   --text-body--line-height: 1.5rem;
   --text-title: 1.25rem;

package/styles/tokens.css

@@ -54,6 +54,7 @@
   --text-display--line-height: 2.75rem;
   --tracking-display: -0.02em;
   --tracking-caption: 0.01em;
+  --tracking-label: normal;
 
   --gutter: 1rem;
   --inset-card: 1rem;

package/types/joanroucoux-cairn-ui-drawer.d.ts

@@ -7,6 +7,7 @@ type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];
  * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.
  *
  * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.
+ * With both, `label` names the panel and the heading stays its visible title.
  *
  * @example
  * <ui-drawer heading="Northwind Monde" closeLabel="Fermer le détail" [open]="open()" (dismissed)="open.set(false)">
@@ -27,6 +28,7 @@ export declare class UiDrawer {
   protected readonly descriptionId: string;
   protected readonly describedBy: import("@angular/core").Signal<string | null>;
   protected readonly ariaLabel: import("@angular/core").Signal<string | null | undefined>;
+  protected readonly labelledBy: import("@angular/core").Signal<string | null>;
   protected readonly modal: ModalClose<"escape" | "backdrop" | "cross" | "programmatic">;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiDrawer, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiDrawer, "ui-drawer", never, {

package/types/joanroucoux-cairn-ui-motion.d.ts

@@ -62,6 +62,7 @@ export declare class UiFlipItem {
  * `--soft` fill, then fades back. Each new non-null token plays once, so pass a fresh value per
  * event (an object or a counter), not a boolean. A non-null token present at first render plays on
  * arrival. Can sit on the same element as `animate.enter`: it waits for that fade to finish.
+ * `highlighted` fires when the flash starts, after any scroll and enter fade, so a toast can follow it.
  *
  * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and
  * below it (header, tab bar, action bar), or a row under them counts as on screen. For an arrival
@@ -73,6 +74,7 @@ export declare class UiFlipItem {
  */
 export declare class UiHighlight {
   readonly uiHighlight: import("@angular/core").InputSignal<unknown>;
+  readonly highlighted: import("@angular/core").OutputEmitterRef<void>;
   private readonly host;
   private readonly reduced;
   private cancel;
@@ -87,7 +89,9 @@ export declare class UiHighlight {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+  }, {
+    "highlighted": "highlighted";
+  }, never, never, true, never>;
 }
 /**
  * A signal that follows the user's `prefers-reduced-motion` preference. Call it in an injection