@joanroucoux/cairn-ui 0.8.2 → 0.9.1

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-async.mjs","sources":["../../../projects/ui/async/delayed-state.ts","../../../projects/ui/async/async.ts","../../../projects/ui/async/joanroucoux-cairn-ui-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, so a fast call never flashes a skeleton and a\n * slow one never blinks. Until then the previous state stays on screen (a reload keeps its content);\n * `null` means nothing to draw yet, for a first load still under 150 ms. 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. `AsyncState` is derived from this tuple. */\nexport const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'] as const;\nexport type AsyncState = (typeof ASYNC_STATES)[number];\n\n/** Looks of the error block. `AsyncVariant` is derived from this tuple. */\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 centred from 64rem. `AsyncAlign` is derived from this tuple. */\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 gap-1.5 pl-2.5 pr-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.\n *\n * @example\n * <ui-async [state]=\"totalState()\" errorTitle=\"Total could not be loaded\" errorMessage=\"The server did not answer.\" retryLabel=\"Retry\" (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    @switch (shown()) {\n      @case (null) {}\n      @case ('loading') {\n        <ng-content select=\"[asyncLoading]\" />\n      }\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            <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            {{ retryLabel() }}\n          </button>\n        </div>\n      }\n      @case ('empty') {\n        <ng-content select=\"[asyncEmpty]\" />\n      }\n      @default {\n        <ng-content />\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  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      return `${RETRY_BASE_CLASSES} ${RETRY_OUTLINE_CLASSES} ${RETRY_INLINE_CLASSES}`;\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"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 nothing to draw yet (a first load under 150 ms). 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 centred 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.\n *\n * @example\n * <ui-async [state]=\"totalState()\" errorTitle=\"Total could not be loaded\" errorMessage=\"The server did not answer.\" retryLabel=\"Retry\" (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    @switch (shown()) {\n      @case (null) {}\n      @case ('loading') {\n        <ng-content select=\"[asyncLoading]\" />\n      }\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  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 honours `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-avatar.mjs

@@ -1,71 +1,148 @@
-import * as i0 from '@angular/core';
-import { input, computed, Component, Directive } from '@angular/core';
-
-/** Available avatar sizes. `AvatarSize` is derived from this tuple. */
-const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'];
-const BASE_CLASSES = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';
+import * as i0 from "@angular/core";
+import { Component, Directive, computed, input } from "@angular/core";
+const AVATAR_SIZES = [
+	"sm",
+	"md",
+	"lg",
+	"auto"
+];
+const BASE_CLASSES = "inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums";
 const SIZE_CLASSES = {
-    sm: 'size-8 text-caption',
-    md: 'size-[34px] text-label',
-    lg: 'size-14 text-title',
-    auto: 'size-[34px] text-label lg:size-8 lg:text-caption',
+	sm: "size-8 text-caption",
+	md: "size-[34px] text-label",
+	lg: "size-14 text-title",
+	auto: "size-[34px] text-label lg:size-8 lg:text-caption"
 };
-/**
- * Initials in a disc, standing in for a person. Single-user application: there is exactly one.
- *
- * @example
- * <ui-avatar initials="JR" label="My account" />
- */
-class UiAvatar {
-    initials = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiAvatar, isStandalone: true, selector: "ui-avatar", inputs: { initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "label()", "class": "classes()" } }, ngImport: i0, template: '<span aria-hidden="true">{{ initials() }}</span>', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-avatar',
-                    template: '<span aria-hidden="true">{{ initials() }}</span>',
-                    host: {
-                        role: 'img',
-                        '[attr.aria-label]': 'label()',
-                        '[class]': 'classes()',
-                    },
-                }]
-        }], propDecorators: { initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-/**
- * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
- * glow on hover and the press scale. On the current page (`aria-current="page"`, which `routerLinkActive`
- * sets through `ariaCurrentWhenActive`) it holds a soft halo, drawn at once when the route changes. The avatar
- * itself keeps its own size.
- *
- * @example
- * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
- */
-class UiAvatarLink {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'a[uiAvatarLink], button[uiAvatarLink]',
-                    host: {
-                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
-                    },
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var UiAvatar = class UiAvatar {
+	initials = input.required(...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiAvatar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiAvatar,
+		isStandalone: true,
+		selector: "ui-avatar",
+		inputs: {
+			initials: {
+				classPropertyName: "initials",
+				publicName: "initials",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "img" },
+			properties: {
+				"attr.aria-label": "label()",
+				"class": "classes()"
+			}
+		},
+		ngImport: i0,
+		template: "<span aria-hidden=\"true\">{{ initials() }}</span>",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiAvatar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-avatar",
+			template: "<span aria-hidden=\"true\">{{ initials() }}</span>",
+			host: {
+				role: "img",
+				"[attr.aria-label]": "label()",
+				"[class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		initials: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "initials",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
+	}
+});
+var UiAvatarLink = class UiAvatarLink {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiAvatarLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiAvatarLink,
+		isStandalone: true,
+		selector: "a[uiAvatarLink], button[uiAvatarLink]",
+		host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiAvatarLink,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[uiAvatarLink], button[uiAvatarLink]",
+			host: { class: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }
+		}]
+	}]
+});
 export { AVATAR_SIZES, UiAvatar, UiAvatarLink };
-//# sourceMappingURL=joanroucoux-cairn-ui-avatar.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-avatar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-avatar.mjs","sources":["../../../projects/ui/avatar/avatar.ts","../../../projects/ui/avatar/joanroucoux-cairn-ui-avatar.ts"],"sourcesContent":["import { Component, Directive, computed, input } from '@angular/core';\n\n/** Available avatar sizes. `AvatarSize` is derived from this tuple. */\nexport const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'] as const;\nexport type AvatarSize = (typeof AVATAR_SIZES)[number];\n\nconst BASE_CLASSES = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';\n\nconst SIZE_CLASSES: Record<AvatarSize, string> = {\n  sm: 'size-8 text-caption',\n  md: 'size-[34px] text-label',\n  lg: 'size-14 text-title',\n  auto: 'size-[34px] text-label lg:size-8 lg:text-caption',\n};\n\n/**\n * Initials in a disc, standing in for a person. Single-user application: there is exactly one.\n *\n * @example\n * <ui-avatar initials=\"JR\" label=\"My account\" />\n */\n@Component({\n  selector: 'ui-avatar',\n  template: '<span aria-hidden=\"true\">{{ initials() }}</span>',\n  host: {\n    role: 'img',\n    '[attr.aria-label]': 'label()',\n    '[class]': 'classes()',\n  },\n})\nexport class UiAvatar {\n  readonly initials = input.required<string>();\n  readonly label = input.required<string>();\n  readonly size = input<AvatarSize>('md');\n\n  protected readonly classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`);\n}\n\n/**\n * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a\n * glow on hover and the press scale. On the current page (`aria-current=\"page\"`, which `routerLinkActive`\n * sets through `ariaCurrentWhenActive`) it holds a soft halo, drawn at once when the route changes. The avatar\n * itself keeps its own size.\n *\n * @example\n * <a uiAvatarLink routerLink=\"/profile\"><ui-avatar initials=\"JR\" label=\"Profile\" size=\"auto\" /></a>\n */\n@Directive({\n  selector: 'a[uiAvatarLink], button[uiAvatarLink]',\n  host: {\n    class:\n      'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n  },\n})\nexport class UiAvatarLink {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;AACO,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM;AAGrD,MAAM,YAAY,GAAG,4FAA4F;AAEjH,MAAM,YAAY,GAA+B;AAC/C,IAAA,EAAE,EAAE,qBAAqB;AACzB,IAAA,EAAE,EAAE,wBAAwB;AAC5B,IAAA,EAAE,EAAE,oBAAoB;AACxB,IAAA,IAAI,EAAE,kDAAkD;CACzD;AAED;;;;;AAKG;MAUU,QAAQ,CAAA;IACV,QAAQ,GAAG,KAAK,CAAC,QAAQ;iFAAU;IACnC,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,IAAI,GAAG,KAAK,CAAa,IAAI;6EAAC;AAEpB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,CAAE;gFAAC;uGALhF,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,0iBAPT,kDAAkD,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAOjD,QAAQ,EAAA,UAAA,EAAA,CAAA;kBATpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,QAAQ,EAAE,kDAAkD;AAC5D,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,KAAK;AACX,wBAAA,mBAAmB,EAAE,SAAS;AAC9B,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;AASD;;;;;;;;AAQG;MAQU,YAAY,CAAA;uGAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qcAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uCAAuC;AACjD,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EACH,qcAAqc;AACxc,qBAAA;AACF,iBAAA;;;ACrDD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-avatar.mjs","names":[],"sources":["../../../projects/ui/avatar/avatar.ts"],"sourcesContent":["import { Component, Directive, computed, input } from '@angular/core';\n\n/** Available avatar sizes. */\nexport const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'] as const;\nexport type AvatarSize = (typeof AVATAR_SIZES)[number];\n\nconst BASE_CLASSES = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';\n\nconst SIZE_CLASSES: Record<AvatarSize, string> = {\n  sm: 'size-8 text-caption',\n  md: 'size-[34px] text-label',\n  lg: 'size-14 text-title',\n  auto: 'size-[34px] text-label lg:size-8 lg:text-caption',\n};\n\n/**\n * Initials in a disc, standing in for a person.\n *\n * @example\n * <ui-avatar initials=\"JR\" label=\"My account\" />\n */\n@Component({\n  selector: 'ui-avatar',\n  template: '<span aria-hidden=\"true\">{{ initials() }}</span>',\n  host: {\n    role: 'img',\n    '[attr.aria-label]': 'label()',\n    '[class]': 'classes()',\n  },\n})\nexport class UiAvatar {\n  readonly initials = input.required<string>();\n  readonly label = input.required<string>();\n  readonly size = input<AvatarSize>('md');\n\n  protected readonly classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`);\n}\n\n/**\n * Round hit area around a `ui-avatar` that links somewhere. On the current page\n * (`aria-current=\"page\"`, set by `routerLinkActive` through `ariaCurrentWhenActive`) it holds a\n * soft halo.\n *\n * @example\n * <a uiAvatarLink routerLink=\"/profile\"><ui-avatar initials=\"JR\" label=\"Profile\" size=\"auto\" /></a>\n */\n@Directive({\n  selector: 'a[uiAvatarLink], button[uiAvatarLink]',\n  host: {\n    class:\n      'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n  },\n})\nexport class UiAvatarLink {}\n"],"mappings":";;AAGA,MAAa,eAAe;CAAC;CAAM;CAAM;CAAM;AAAM;AAGrD,MAAM,eAAe;AAErB,MAAM,eAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACP;AAiBD,IAAa,WAAb,MAAa,SAAQ;CACV,WAAW,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,UAAU,eAAe,GAAG,aAAY,GAAI,aAAa,KAAK,KAAI,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CALhF,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,MAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,SAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAPT;EAAkD,UAAA;CAAA,CAAA;;AAOjD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EATpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;GACV,MAAM;IACJ,MAAM;IACN,qBAAqB;IACrB,WAAW;GACZ;EACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBD,IAAa,eAAb,MAAa,aAAY;CAAZ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,scAAA;EAAA,UAAA;CAAA,CAAA;;AAAZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAPxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EACJ,OACE,scACH;EACF,CAAA"}

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

@@ -1,34 +1,60 @@
-import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
-import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
-
-/** Available back link sizes. `BackLinkSize` is derived from this tuple. */
-const BACK_LINK_SIZES = ['md', 'sm', 'header'];
-const BASE_CLASSES = 'inline-flex items-center gap-0.5 rounded-control text-body 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)';
+import * as i0 from "@angular/core";
+import { Component, ElementRef, HostAttributeToken, computed, inject, input } from "@angular/core";
+import { holdTransitionsUntilRendered } from "@joanroucoux/cairn-ui/motion";
+const BACK_LINK_SIZES = [
+	"md",
+	"sm",
+	"header",
+	"inline"
+];
+const BASE_CLASSES = "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)";
 const SIZE_CLASSES = {
-    md: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:outline-offset-2',
-    sm: 'h-9 pr-2 pl-0.5 text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',
-    header: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:-outline-offset-2',
+	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"
+};
+const CHEVRON = {
+	md: 22,
+	sm: 22,
+	header: 24,
+	inline: 18
 };
-const CHEVRON = { md: 22, sm: 22, header: 24 };
-/**
- * Link back to the parent screen: a chevron and the name of the destination.
- *
- * @example
- * <a ui-back-link routerLink="/accounts">Accounts</a>
- */
-class UiBackLink {
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    chevron = computed(() => CHEVRON[this.size()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "chevron" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        holdTransitionsUntilRendered();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBackLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiBackLink, isStandalone: true, selector: "a[ui-back-link]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+var UiBackLink = class UiBackLink {
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	type = inject(new HostAttributeToken("type"), { optional: true }) ?? (inject(ElementRef).nativeElement.tagName === "BUTTON" ? "button" : null);
+	chevron = computed(() => CHEVRON[this.size()], ...ngDevMode ? [{ debugName: "chevron" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		holdTransitionsUntilRendered();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiBackLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiBackLink,
+		isStandalone: true,
+		selector: "a[ui-back-link], button[ui-back-link]",
+		inputs: { size: {
+			classPropertyName: "size",
+			publicName: "size",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.type": "type"
+		} },
+		ngImport: i0,
+		template: `
     <svg
       aria-hidden="true"
       fill="none"
@@ -43,13 +69,20 @@ class UiBackLink {
       <path d="m15 18-6-6 6-6" />
     </svg>
     <ng-content />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBackLink, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'a[ui-back-link]',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiBackLink,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[ui-back-link], button[ui-back-link]",
+			template: `
     <svg
       aria-hidden="true"
       fill="none"
@@ -65,15 +98,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </svg>
     <ng-content />
   `,
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: {
+				"[class]": "classes()",
+				"[attr.type]": "type"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { size: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "size",
+			required: false
+		}]
+	}] }
+});
 export { BACK_LINK_SIZES, UiBackLink };
-//# sourceMappingURL=joanroucoux-cairn-ui-back-link.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-back-link.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-back-link.mjs","sources":["../../../projects/ui/back-link/back-link.ts","../../../projects/ui/back-link/joanroucoux-cairn-ui-back-link.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Available back link sizes. `BackLinkSize` is derived from this tuple. */\nexport const BACK_LINK_SIZES = ['md', 'sm', 'header'] as const;\nexport type BackLinkSize = (typeof BACK_LINK_SIZES)[number];\n\nconst BASE_CLASSES =\n  'inline-flex items-center gap-0.5 rounded-control text-body 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-(--foreground) focus-visible:outline-offset-2',\n  sm: 'h-9 pr-2 pl-0.5 text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',\n  header: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:-outline-offset-2',\n};\n\nconst CHEVRON: Record<BackLinkSize, number> = { md: 22, sm: 22, header: 24 };\n\n/**\n * Link back to the parent screen: a chevron and the name of the destination.\n *\n * @example\n * <a ui-back-link routerLink=\"/accounts\">Accounts</a>\n */\n@Component({\n  selector: 'a[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  },\n})\nexport class UiBackLink {\n  readonly size = input<BackLinkSize>('md');\n\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;AACO,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ;AAGpD,MAAM,YAAY,GAChB,qWAAqW;AAEvW,MAAM,YAAY,GAAiC;AACjD,IAAA,EAAE,EAAE,mEAAmE;AACvE,IAAA,EAAE,EAAE,sHAAsH;AAC1H,IAAA,MAAM,EAAE,oEAAoE;CAC7E;AAED,MAAM,OAAO,GAAiC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;AAE5E;;;;;AAKG;MAuBU,UAAU,CAAA;IACZ,IAAI,GAAG,KAAK,CAAe,IAAI;6EAAC;AAEtB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gFAAC;AAC9C,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,CAAE;gFAAC;AAE3F,IAAA,WAAA,GAAA;AACE,QAAA,4BAA4B,EAAE;IAChC;uGARW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBX;;;;;;;;;;;;;;;AAeT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAKU,UAAU,EAAA,UAAA,EAAA,CAAA;kBAtBtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;AAeT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;;AC9CD;;AAEG;;;;"}
+{"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"}