@joanroucoux/cairn-ui 0.11.2 → 0.11.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.11.4
+
+### Fixed
+
+- `ui-async` keeps the skeleton still while it is invisible: its pulse only starts once the skeleton shows, after 150 ms.
+
+## 0.11.3
+
+### Fixed
+
+- A `button[uiRowLink]` and an available `ui-row` show the pointer cursor, like a link row.
+
 ## 0.11.2
 
 ### Fixed

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

@@ -264,7 +264,10 @@ var UiAsync = class UiAsync {
 		ngImport: i0,
 		template: `
     @if (shown() === null || shown() === 'loading') {
-      <div class="contents" [attr.aria-hidden]="shown() === null ? 'true' : null" [class.invisible]="shown() === null">
+      <div
+        [attr.aria-hidden]="shown() === null ? 'true' : null"
+        [class]="shown() === null ? 'invisible contents [&_*]:animate-none!' : 'contents'"
+      >
         <ng-content select="[asyncLoading]" />
       </div>
     } @else {
@@ -324,7 +327,10 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-async",
 			template: `
     @if (shown() === null || shown() === 'loading') {
-      <div class="contents" [attr.aria-hidden]="shown() === null ? 'true' : null" [class.invisible]="shown() === null">
+      <div
+        [attr.aria-hidden]="shown() === null ? 'true' : null"
+        [class]="shown() === null ? 'invisible contents [&_*]:animate-none!' : 'contents'"
+      >
         <ng-content select="[asyncLoading]" />
       </div>
     } @else {

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-async.mjs","names":[],"sources":["../../../projects/ui/async/delayed-state.ts","../../../projects/ui/async/async.ts"],"sourcesContent":["import { DestroyRef, type Signal, effect, inject, signal, untracked } from '@angular/core';\n\nimport type { AsyncState } from './async';\n\nexport const SKELETON_DELAY_MS = 150;\nexport const SKELETON_MIN_MS = 400;\n\n/**\n * Turns the live state of a call into the state to draw: `loading` only appears once the call has\n * lasted 150 ms and, once shown, stays at least 400 ms. Until then the previous state stays on\n * screen; `null` means no state to draw yet (a first load under 150 ms), which `ui-async` renders as an invisible skeleton. Call it in an injection context.\n *\n * @example\n * protected readonly shown = delayedState(this.state);\n */\nexport function delayedState(source: Signal<AsyncState>): Signal<AsyncState | null> {\n  const displayed = signal<AsyncState | null>(null);\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let shownAt = 0;\n\n  const clear = (): void => {\n    clearTimeout(timer);\n    timer = undefined;\n  };\n\n  inject(DestroyRef).onDestroy(clear);\n\n  effect(() => {\n    const state = source();\n\n    untracked(() => {\n      if (state === 'loading') {\n        if (displayed() === 'loading') {\n          clear();\n        } else {\n          timer = setTimeout(() => {\n            timer = undefined;\n            shownAt = Date.now();\n            displayed.set('loading');\n          }, SKELETON_DELAY_MS);\n        }\n\n        return;\n      }\n\n      clear();\n\n      const remaining = shownAt + SKELETON_MIN_MS - Date.now();\n\n      if (displayed() === 'loading' && remaining > 0) {\n        timer = setTimeout(() => {\n          timer = undefined;\n          displayed.set(untracked(source));\n        }, remaining);\n      } else {\n        displayed.set(state);\n      }\n    });\n  });\n\n  return displayed.asReadonly();\n}\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nimport { delayedState } from './delayed-state';\n\n/** Available async block states. */\nexport const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'] as const;\nexport type AsyncState = (typeof ASYNC_STATES)[number];\n\n/** Looks of the error block. */\nexport const ASYNC_VARIANTS = ['elevated', 'plain', 'emphasis', 'inline'] as const;\nexport type AsyncVariant = (typeof ASYNC_VARIANTS)[number];\n\n/** Alignments of the error block; `auto` is centered from 64rem. */\nexport const ASYNC_ALIGNS = ['start', 'center', 'auto'] as const;\nexport type AsyncAlign = (typeof ASYNC_ALIGNS)[number];\n\nconst RETRY_BASE_CLASSES =\n  'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) text-label';\n\nconst RETRY_OUTLINE_CLASSES =\n  'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';\n\nconst RETRY_PRIMARY_CLASSES = 'bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)';\n\nconst RETRY_BLOCK_CLASSES = 'min-h-(--row-min) gap-2 pl-3 pr-4';\n\nconst RETRY_INLINE_CLASSES = 'h-11 pointer-fine:h-8 flex-none';\n\nconst RETRY_INLINE_ICON_CLASSES = 'gap-1.5 pl-2.5 pr-3';\n\nconst RETRY_INLINE_TEXT_CLASSES = 'px-3';\n\nconst ELEVATED_SURFACE_CLASSES = 'rounded-control bg-(--elevated)';\n\nconst CARD_SURFACE_CLASSES = 'rounded-container bg-(--card) shadow-[inset_0_0_0_1px_var(--border)]';\n\ntype BlockSpec = {\n  surface: string;\n  gap: string;\n  padding: Record<AsyncAlign, string>;\n  title: string;\n  message: Record<AsyncAlign, string>;\n  retryMargin: Record<AsyncAlign, string>;\n  retry: string;\n};\n\nconst BLOCK_SPECS: Record<Exclude<AsyncVariant, 'inline'>, BlockSpec> = {\n  elevated: {\n    surface: ELEVATED_SURFACE_CLASSES,\n    gap: 'gap-1',\n    padding: { start: 'p-4', center: 'px-4 py-10', auto: 'p-4 lg:py-10' },\n    title: 'text-body font-medium',\n    message: { start: 'text-label', center: 'text-label', auto: 'text-label' },\n    retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },\n    retry: RETRY_OUTLINE_CLASSES,\n  },\n  plain: {\n    surface: '',\n    gap: 'gap-1',\n    padding: { start: 'px-4 py-5', center: 'px-4 py-12', auto: 'px-4 py-5 lg:py-12' },\n    title: 'text-body leading-[normal] font-medium',\n    message: {\n      start: 'text-label leading-[normal]',\n      center: 'text-label leading-[normal]',\n      auto: 'text-label leading-[normal]',\n    },\n    retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },\n    retry: RETRY_OUTLINE_CLASSES,\n  },\n  emphasis: {\n    surface: '',\n    gap: 'gap-3',\n    padding: { start: 'px-4 py-6', center: 'px-4 py-14', auto: 'px-4 py-6 lg:py-14' },\n    title: 'text-title font-semibold',\n    message: {\n      start: 'text-label',\n      center: 'text-body leading-[normal]',\n      auto: 'text-label lg:text-body lg:leading-[normal]',\n    },\n    retryMargin: { start: 'mt-1', center: 'mt-2', auto: 'mt-1 lg:mt-2' },\n    retry: RETRY_PRIMARY_CLASSES,\n  },\n};\n\nconst ALIGN_CLASSES: Record<AsyncAlign, string> = {\n  start: 'items-start',\n  center: 'items-center text-center',\n  auto: 'items-start lg:items-center lg:text-center',\n};\n\nconst INLINE_BOX_CLASSES = 'flex-row items-center justify-between gap-3 pt-1.5 pr-1.5 pb-2 pl-2.5';\n\n/**\n * The three states of a block that depends on a service call, next to the ready content. During the\n * first 150 ms of a load the `[asyncLoading]` content is laid out but invisible and hidden from\n * assistive technology, so the block already holds its skeleton's space.\n *\n * @example\n * <ui-async [state]=\"totalState()\" errorTitle=\"The total couldn’t be loaded\" errorMessage=\"The server didn’t respond.\" retryLabel=\"Try again\" (retry)=\"reload()\">\n *   <span asyncLoading><ui-skeleton shape=\"figure\" /></span>\n *   <span asyncEmpty>Add a holding to see your total.</span>\n *   <span>{{ total() }}</span>\n * </ui-async>\n */\n@Component({\n  selector: 'ui-async',\n  template: `\n    @if (shown() === null || shown() === 'loading') {\n      <div class=\"contents\" [attr.aria-hidden]=\"shown() === null ? 'true' : null\" [class.invisible]=\"shown() === null\">\n        <ng-content select=\"[asyncLoading]\" />\n      </div>\n    } @else {\n      @switch (shown()) {\n        @case ('error') {\n          <div aria-live=\"polite\" role=\"alert\" [class]=\"boxClasses()\">\n            @if (variant() === 'inline') {\n              <span class=\"text-label text-(--muted-foreground)\">{{ errorMessage() }}</span>\n            } @else {\n              @if (variant() === 'emphasis') {\n                <h2 [class]=\"titleClasses()\">{{ errorTitle() }}</h2>\n              } @else {\n                <span [class]=\"titleClasses()\">{{ errorTitle() }}</span>\n              }\n              <span class=\"text-(--muted-foreground)\" [class]=\"messageClasses()\">{{ errorMessage() }}</span>\n            }\n            <button type=\"button\" [class]=\"retryButtonClasses()\" (click)=\"retry.emit()\">\n              @if (retryIcon() || variant() !== 'inline') {\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"block flex-none fill-none stroke-current\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"1.75\"\n                  viewBox=\"0 0 24 24\"\n                  [attr.height]=\"iconSize()\"\n                  [attr.width]=\"iconSize()\"\n                >\n                  <path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n                  <path d=\"M21 3v5h-5\" />\n                </svg>\n              }\n              {{ retryLabel() }}\n            </button>\n          </div>\n        }\n        @case ('empty') {\n          <ng-content select=\"[asyncEmpty]\" />\n        }\n        @default {\n          <ng-content />\n        }\n      }\n    }\n  `,\n  host: {\n    '[attr.aria-busy]': \"state() === 'loading' || null\",\n    '[class.flex]': 'filling()',\n    '[class.flex-col]': 'filling()',\n  },\n})\nexport class UiAsync {\n  readonly state = input.required<AsyncState>();\n  readonly errorTitle = input<string>();\n  readonly errorMessage = input<string>();\n  readonly retryLabel = input<string>();\n  /** Draws the rotate icon in the retry button. Only the `inline` variant honors `false`. */\n  readonly retryIcon = input(true, { transform: booleanAttribute });\n  readonly variant = input<AsyncVariant>('elevated');\n  readonly align = input<AsyncAlign>('start');\n  readonly card = input(false, { transform: booleanAttribute });\n  readonly fill = input(false, { transform: booleanAttribute });\n  readonly retry = output<void>();\n\n  protected readonly shown = delayedState(this.state);\n\n  protected readonly filling = computed(() => this.fill() && this.shown() === 'error');\n\n  protected readonly iconSize = computed(() => (this.variant() === 'inline' ? 16 : 18));\n\n  readonly #spec = computed(() => {\n    const variant = this.variant();\n\n    return variant === 'inline' ? null : BLOCK_SPECS[variant];\n  });\n\n  protected readonly boxClasses = computed(() => {\n    const spec = this.#spec();\n    const fill = this.fill() ? ' flex-1 justify-center' : '';\n\n    if (spec === null) {\n      return `flex ${INLINE_BOX_CLASSES}${this.card() ? ` ${CARD_SURFACE_CLASSES}` : ''}${this.fill() ? ' flex-1' : ''}`;\n    }\n\n    const surface = this.card() ? CARD_SURFACE_CLASSES : spec.surface;\n\n    return `flex flex-col ${surface} ${spec.gap} ${ALIGN_CLASSES[this.align()]} ${spec.padding[this.align()]}${fill}`;\n  });\n\n  protected readonly titleClasses = computed(() => this.#spec()!.title);\n\n  protected readonly messageClasses = computed(() => this.#spec()!.message[this.align()]);\n\n  protected readonly retryButtonClasses = computed(() => {\n    const spec = this.#spec();\n\n    if (spec === null) {\n      const spacing = this.retryIcon() ? RETRY_INLINE_ICON_CLASSES : RETRY_INLINE_TEXT_CLASSES;\n\n      return `${RETRY_BASE_CLASSES} ${RETRY_OUTLINE_CLASSES} ${RETRY_INLINE_CLASSES} ${spacing}`;\n    }\n\n    return `${RETRY_BASE_CLASSES} ${spec.retry} ${RETRY_BLOCK_CLASSES} ${spec.retryMargin[this.align()]}`;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-async.mjs","names":[],"sources":["../../../projects/ui/async/delayed-state.ts","../../../projects/ui/async/async.ts"],"sourcesContent":["import { DestroyRef, type Signal, effect, inject, signal, untracked } from '@angular/core';\n\nimport type { AsyncState } from './async';\n\nexport const SKELETON_DELAY_MS = 150;\nexport const SKELETON_MIN_MS = 400;\n\n/**\n * Turns the live state of a call into the state to draw: `loading` only appears once the call has\n * lasted 150 ms and, once shown, stays at least 400 ms. Until then the previous state stays on\n * screen; `null` means no state to draw yet (a first load under 150 ms), which `ui-async` renders as an invisible skeleton. Call it in an injection context.\n *\n * @example\n * protected readonly shown = delayedState(this.state);\n */\nexport function delayedState(source: Signal<AsyncState>): Signal<AsyncState | null> {\n  const displayed = signal<AsyncState | null>(null);\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let shownAt = 0;\n\n  const clear = (): void => {\n    clearTimeout(timer);\n    timer = undefined;\n  };\n\n  inject(DestroyRef).onDestroy(clear);\n\n  effect(() => {\n    const state = source();\n\n    untracked(() => {\n      if (state === 'loading') {\n        if (displayed() === 'loading') {\n          clear();\n        } else {\n          timer = setTimeout(() => {\n            timer = undefined;\n            shownAt = Date.now();\n            displayed.set('loading');\n          }, SKELETON_DELAY_MS);\n        }\n\n        return;\n      }\n\n      clear();\n\n      const remaining = shownAt + SKELETON_MIN_MS - Date.now();\n\n      if (displayed() === 'loading' && remaining > 0) {\n        timer = setTimeout(() => {\n          timer = undefined;\n          displayed.set(untracked(source));\n        }, remaining);\n      } else {\n        displayed.set(state);\n      }\n    });\n  });\n\n  return displayed.asReadonly();\n}\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nimport { delayedState } from './delayed-state';\n\n/** Available async block states. */\nexport const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'] as const;\nexport type AsyncState = (typeof ASYNC_STATES)[number];\n\n/** Looks of the error block. */\nexport const ASYNC_VARIANTS = ['elevated', 'plain', 'emphasis', 'inline'] as const;\nexport type AsyncVariant = (typeof ASYNC_VARIANTS)[number];\n\n/** Alignments of the error block; `auto` is centered from 64rem. */\nexport const ASYNC_ALIGNS = ['start', 'center', 'auto'] as const;\nexport type AsyncAlign = (typeof ASYNC_ALIGNS)[number];\n\nconst RETRY_BASE_CLASSES =\n  'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) text-label';\n\nconst RETRY_OUTLINE_CLASSES =\n  'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';\n\nconst RETRY_PRIMARY_CLASSES = 'bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)';\n\nconst RETRY_BLOCK_CLASSES = 'min-h-(--row-min) gap-2 pl-3 pr-4';\n\nconst RETRY_INLINE_CLASSES = 'h-11 pointer-fine:h-8 flex-none';\n\nconst RETRY_INLINE_ICON_CLASSES = 'gap-1.5 pl-2.5 pr-3';\n\nconst RETRY_INLINE_TEXT_CLASSES = 'px-3';\n\nconst ELEVATED_SURFACE_CLASSES = 'rounded-control bg-(--elevated)';\n\nconst CARD_SURFACE_CLASSES = 'rounded-container bg-(--card) shadow-[inset_0_0_0_1px_var(--border)]';\n\ntype BlockSpec = {\n  surface: string;\n  gap: string;\n  padding: Record<AsyncAlign, string>;\n  title: string;\n  message: Record<AsyncAlign, string>;\n  retryMargin: Record<AsyncAlign, string>;\n  retry: string;\n};\n\nconst BLOCK_SPECS: Record<Exclude<AsyncVariant, 'inline'>, BlockSpec> = {\n  elevated: {\n    surface: ELEVATED_SURFACE_CLASSES,\n    gap: 'gap-1',\n    padding: { start: 'p-4', center: 'px-4 py-10', auto: 'p-4 lg:py-10' },\n    title: 'text-body font-medium',\n    message: { start: 'text-label', center: 'text-label', auto: 'text-label' },\n    retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },\n    retry: RETRY_OUTLINE_CLASSES,\n  },\n  plain: {\n    surface: '',\n    gap: 'gap-1',\n    padding: { start: 'px-4 py-5', center: 'px-4 py-12', auto: 'px-4 py-5 lg:py-12' },\n    title: 'text-body leading-[normal] font-medium',\n    message: {\n      start: 'text-label leading-[normal]',\n      center: 'text-label leading-[normal]',\n      auto: 'text-label leading-[normal]',\n    },\n    retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },\n    retry: RETRY_OUTLINE_CLASSES,\n  },\n  emphasis: {\n    surface: '',\n    gap: 'gap-3',\n    padding: { start: 'px-4 py-6', center: 'px-4 py-14', auto: 'px-4 py-6 lg:py-14' },\n    title: 'text-title font-semibold',\n    message: {\n      start: 'text-label',\n      center: 'text-body leading-[normal]',\n      auto: 'text-label lg:text-body lg:leading-[normal]',\n    },\n    retryMargin: { start: 'mt-1', center: 'mt-2', auto: 'mt-1 lg:mt-2' },\n    retry: RETRY_PRIMARY_CLASSES,\n  },\n};\n\nconst ALIGN_CLASSES: Record<AsyncAlign, string> = {\n  start: 'items-start',\n  center: 'items-center text-center',\n  auto: 'items-start lg:items-center lg:text-center',\n};\n\nconst INLINE_BOX_CLASSES = 'flex-row items-center justify-between gap-3 pt-1.5 pr-1.5 pb-2 pl-2.5';\n\n/**\n * The three states of a block that depends on a service call, next to the ready content. During the\n * first 150 ms of a load the `[asyncLoading]` content is laid out but invisible, unanimated and hidden from\n * assistive technology, so the block already holds its skeleton's space.\n *\n * @example\n * <ui-async [state]=\"totalState()\" errorTitle=\"The total couldn’t be loaded\" errorMessage=\"The server didn’t respond.\" retryLabel=\"Try again\" (retry)=\"reload()\">\n *   <span asyncLoading><ui-skeleton shape=\"figure\" /></span>\n *   <span asyncEmpty>Add a holding to see your total.</span>\n *   <span>{{ total() }}</span>\n * </ui-async>\n */\n@Component({\n  selector: 'ui-async',\n  template: `\n    @if (shown() === null || shown() === 'loading') {\n      <div\n        [attr.aria-hidden]=\"shown() === null ? 'true' : null\"\n        [class]=\"shown() === null ? 'invisible contents [&_*]:animate-none!' : 'contents'\"\n      >\n        <ng-content select=\"[asyncLoading]\" />\n      </div>\n    } @else {\n      @switch (shown()) {\n        @case ('error') {\n          <div aria-live=\"polite\" role=\"alert\" [class]=\"boxClasses()\">\n            @if (variant() === 'inline') {\n              <span class=\"text-label text-(--muted-foreground)\">{{ errorMessage() }}</span>\n            } @else {\n              @if (variant() === 'emphasis') {\n                <h2 [class]=\"titleClasses()\">{{ errorTitle() }}</h2>\n              } @else {\n                <span [class]=\"titleClasses()\">{{ errorTitle() }}</span>\n              }\n              <span class=\"text-(--muted-foreground)\" [class]=\"messageClasses()\">{{ errorMessage() }}</span>\n            }\n            <button type=\"button\" [class]=\"retryButtonClasses()\" (click)=\"retry.emit()\">\n              @if (retryIcon() || variant() !== 'inline') {\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"block flex-none fill-none stroke-current\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"1.75\"\n                  viewBox=\"0 0 24 24\"\n                  [attr.height]=\"iconSize()\"\n                  [attr.width]=\"iconSize()\"\n                >\n                  <path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n                  <path d=\"M21 3v5h-5\" />\n                </svg>\n              }\n              {{ retryLabel() }}\n            </button>\n          </div>\n        }\n        @case ('empty') {\n          <ng-content select=\"[asyncEmpty]\" />\n        }\n        @default {\n          <ng-content />\n        }\n      }\n    }\n  `,\n  host: {\n    '[attr.aria-busy]': \"state() === 'loading' || null\",\n    '[class.flex]': 'filling()',\n    '[class.flex-col]': 'filling()',\n  },\n})\nexport class UiAsync {\n  readonly state = input.required<AsyncState>();\n  readonly errorTitle = input<string>();\n  readonly errorMessage = input<string>();\n  readonly retryLabel = input<string>();\n  /** Draws the rotate icon in the retry button. Only the `inline` variant honors `false`. */\n  readonly retryIcon = input(true, { transform: booleanAttribute });\n  readonly variant = input<AsyncVariant>('elevated');\n  readonly align = input<AsyncAlign>('start');\n  readonly card = input(false, { transform: booleanAttribute });\n  readonly fill = input(false, { transform: booleanAttribute });\n  readonly retry = output<void>();\n\n  protected readonly shown = delayedState(this.state);\n\n  protected readonly filling = computed(() => this.fill() && this.shown() === 'error');\n\n  protected readonly iconSize = computed(() => (this.variant() === 'inline' ? 16 : 18));\n\n  readonly #spec = computed(() => {\n    const variant = this.variant();\n\n    return variant === 'inline' ? null : BLOCK_SPECS[variant];\n  });\n\n  protected readonly boxClasses = computed(() => {\n    const spec = this.#spec();\n    const fill = this.fill() ? ' flex-1 justify-center' : '';\n\n    if (spec === null) {\n      return `flex ${INLINE_BOX_CLASSES}${this.card() ? ` ${CARD_SURFACE_CLASSES}` : ''}${this.fill() ? ' flex-1' : ''}`;\n    }\n\n    const surface = this.card() ? CARD_SURFACE_CLASSES : spec.surface;\n\n    return `flex flex-col ${surface} ${spec.gap} ${ALIGN_CLASSES[this.align()]} ${spec.padding[this.align()]}${fill}`;\n  });\n\n  protected readonly titleClasses = computed(() => this.#spec()!.title);\n\n  protected readonly messageClasses = computed(() => this.#spec()!.message[this.align()]);\n\n  protected readonly retryButtonClasses = computed(() => {\n    const spec = this.#spec();\n\n    if (spec === null) {\n      const spacing = this.retryIcon() ? RETRY_INLINE_ICON_CLASSES : RETRY_INLINE_TEXT_CLASSES;\n\n      return `${RETRY_BASE_CLASSES} ${RETRY_OUTLINE_CLASSES} ${RETRY_INLINE_CLASSES} ${spacing}`;\n    }\n\n    return `${RETRY_BASE_CLASSES} ${spec.retry} ${RETRY_BLOCK_CLASSES} ${spec.retryMargin[this.align()]}`;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n"],"mappings":"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"}

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

@@ -35,9 +35,9 @@ const PADDING_CLASSES = {
 	none: "px-0"
 };
 const BASE_CLASSES = "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)";
-const INTERACTIVE_CLASSES = "transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale)";
+const INTERACTIVE_CLASSES = "cursor-pointer transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale)";
 const CHEVRON_CLASSES = "min-h-(--row-min) gap-3 px-0 hover:text-(--muted-foreground)";
-const CHEVRON_INTERACTIVE_CLASSES = "transition-colors [transition-duration:var(--duration-fast)] ease-out";
+const CHEVRON_INTERACTIVE_CLASSES = "cursor-pointer transition-colors [transition-duration:var(--duration-fast)] ease-out";
 const UNAVAILABLE_CLASSES = "opacity-50 cursor-not-allowed";
 const SELECTED_CLASSES = "bg-(--soft)";
 var UiRow = class UiRow {

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',\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\">Enter manually</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  'cursor-pointer 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 =\n  'cursor-pointer 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\">Enter manually</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

@@ -856,7 +856,7 @@ var UiRowLink = class UiRowLink {
 		...ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
-	classes = computed(() => this.stretch() ? "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)" : "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)", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	classes = computed(() => this.stretch() ? "block max-w-full cursor-pointer 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)" : "block max-w-full cursor-pointer 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)", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",

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/**\n * Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match.\n *\n * @example\n * <td uiTd numeric secondary>12</td>\n */\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 * holding. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/holdings/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/**\n * A control in another cell of a stretched-link row: keeps it clickable above the row-wide link.\n *\n * @example\n * <td uiTd><button uiRowAction type=\"button\">Enter a price</button></td>\n */\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 € · Avg. cost 388,10 €</span>\n * <span uiCellSub tone=\"stale\">Price as 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/**\n * Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match.\n *\n * @example\n * <td uiTd numeric secondary>12</td>\n */\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 * holding. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/holdings/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 cursor-pointer 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 cursor-pointer 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/**\n * A control in another cell of a stretched-link row: keeps it clickable above the row-wide link.\n *\n * @example\n * <td uiTd><button uiRowAction type=\"button\">Enter a price</button></td>\n */\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 € · Avg. cost 388,10 €</span>\n * <span uiCellSub tone=\"stale\">Price as 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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"}