@joanroucoux/cairn-ui 0.7.2 → 0.8.1

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

@@ -0,0 +1,128 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, inject, ElementRef, DestroyRef, Component } from '@angular/core';
+import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
+
+/** Available button variants. `ButtonVariant` is derived from this tuple. */
+const BUTTON_VARIANTS = [
+    'primary',
+    'outline',
+    'ghost',
+    'destructive',
+    'quiet',
+    'quiet-destructive',
+    'outline-destructive',
+    'quiet-glow',
+    'tonal',
+];
+/** Available button sizes. */
+const BUTTON_SIZES = [
+    'compact',
+    'slim',
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    'xxl',
+    'tall',
+    'block',
+    'icon',
+    'icon-sm',
+];
+const BASE_CLASSES = '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-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';
+const RING_OUTSIDE = 'focus-visible:outline-offset-2';
+const RING_INSIDE = 'focus-visible:-outline-offset-2';
+const OUTLINE = 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)';
+const VARIANT_CLASSES = {
+    primary: `${RING_OUTSIDE} bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)`,
+    outline: `${RING_OUTSIDE} ${OUTLINE} text-(--foreground)`,
+    ghost: `${RING_OUTSIDE} bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)`,
+    destructive: `${RING_OUTSIDE} bg-(--destructive) text-(--destructive-foreground)`,
+    tonal: `${RING_OUTSIDE} bg-(--muted) text-(--foreground) lg:bg-transparent lg:hover:bg-(--glow)`,
+    'quiet-glow': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground)`,
+    quiet: `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) active:bg-(--soft)`,
+    'quiet-destructive': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,
+    'outline-destructive': `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`,
+};
+const SIZE_CLASSES = {
+    compact: 'h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden',
+    slim: 'h-11 lg:h-8 gap-1.5 px-2.5 text-label',
+    xs: 'h-8 gap-1.5 px-2.5 text-label',
+    sm: 'h-9 gap-2 px-3 text-label',
+    md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>span>svg:first-child]:pl-3',
+    lg: 'h-11 gap-2 px-[18px] text-label',
+    xl: 'h-[50px] gap-2 px-6 text-body',
+    xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>span>svg:first-child]:pl-4',
+    tall: 'h-12 lg:h-10 gap-2 px-4 text-body',
+    block: 'h-[50px] lg:h-11 gap-2 px-4 text-body',
+    icon: 'size-(--row-min) gap-2 p-0',
+    'icon-sm': 'size-11 pointer-fine:size-9 gap-2 p-0',
+};
+/**
+ * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
+ *
+ * @example
+ * <button ui-button variant="destructive">Delete</button>
+ * <button ui-button size="icon" variant="ghost" aria-label="More actions">...</button>
+ */
+class UiButton {
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    inactive = computed(() => this.loading() || this.busy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inactive" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+        const host = inject(ElementRef).nativeElement;
+        const guard = (event) => {
+            if (this.inactive()) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        host.addEventListener('click', guard, { capture: true });
+        inject(DestroyRef).onDestroy(() => host.removeEventListener('click', guard, { capture: true }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiButton, isStandalone: true, selector: "button[ui-button], a[ui-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-busy": "inactive() || null", "attr.aria-disabled": "inactive() || null" } }, ngImport: i0, template: `
+    @if (loading()) {
+      <span
+        aria-hidden="true"
+        class="rounded-pill animate-cairn-spin absolute inset-0 m-auto size-4 border-2 border-current border-r-transparent"
+      ></span>
+    }
+    <span class="contents" [class.text-transparent]="loading()"><ng-content /></span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[ui-button], a[ui-button]',
+                    template: `
+    @if (loading()) {
+      <span
+        aria-hidden="true"
+        class="rounded-pill animate-cairn-spin absolute inset-0 m-auto size-4 border-2 border-current border-r-transparent"
+      ></span>
+    }
+    <span class="contents" [class.text-transparent]="loading()"><ng-content /></span>
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-busy]': 'inactive() || null',
+                        '[attr.aria-disabled]': 'inactive() || null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BUTTON_SIZES, BUTTON_VARIANTS, UiButton };
+//# sourceMappingURL=joanroucoux-cairn-ui-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-button.mjs","sources":["../../../projects/ui/button/button.ts","../../../projects/ui/button/joanroucoux-cairn-ui-button.ts"],"sourcesContent":["import { Component, DestroyRef, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Available button variants. `ButtonVariant` is derived from this tuple. */\nexport const BUTTON_VARIANTS = [\n  'primary',\n  'outline',\n  'ghost',\n  'destructive',\n  'quiet',\n  'quiet-destructive',\n  'outline-destructive',\n  'quiet-glow',\n  'tonal',\n] as const;\nexport type ButtonVariant = (typeof BUTTON_VARIANTS)[number];\n\n/** Available button sizes. */\nexport const BUTTON_SIZES = [\n  'compact',\n  'slim',\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  'xxl',\n  'tall',\n  'block',\n  'icon',\n  'icon-sm',\n] as const;\nexport type ButtonSize = (typeof BUTTON_SIZES)[number];\n\nconst 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-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';\n\nconst RING_OUTSIDE = 'focus-visible:outline-offset-2';\nconst RING_INSIDE = 'focus-visible:-outline-offset-2';\nconst OUTLINE = 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)';\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary: `${RING_OUTSIDE} bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)`,\n  outline: `${RING_OUTSIDE} ${OUTLINE} text-(--foreground)`,\n  ghost: `${RING_OUTSIDE} bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)`,\n  destructive: `${RING_OUTSIDE} bg-(--destructive) text-(--destructive-foreground)`,\n  tonal: `${RING_OUTSIDE} bg-(--muted) text-(--foreground) lg:bg-transparent lg:hover:bg-(--glow)`,\n  'quiet-glow': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground)`,\n  quiet: `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) active:bg-(--soft)`,\n  'quiet-destructive': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,\n  'outline-destructive': `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`,\n};\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  compact:\n    'h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden',\n  slim: 'h-11 lg:h-8 gap-1.5 px-2.5 text-label',\n  xs: 'h-8 gap-1.5 px-2.5 text-label',\n  sm: 'h-9 gap-2 px-3 text-label',\n  md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>span>svg:first-child]:pl-3',\n  lg: 'h-11 gap-2 px-[18px] text-label',\n  xl: 'h-[50px] gap-2 px-6 text-body',\n  xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>span>svg:first-child]:pl-4',\n  tall: 'h-12 lg:h-10 gap-2 px-4 text-body',\n  block: 'h-[50px] lg:h-11 gap-2 px-4 text-body',\n  icon: 'size-(--row-min) gap-2 p-0',\n  'icon-sm': 'size-11 pointer-fine:size-9 gap-2 p-0',\n};\n\n/**\n * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.\n *\n * @example\n * <button ui-button variant=\"destructive\">Delete</button>\n * <button ui-button size=\"icon\" variant=\"ghost\" aria-label=\"More actions\">...</button>\n */\n@Component({\n  selector: 'button[ui-button], a[ui-button]',\n  template: `\n    @if (loading()) {\n      <span\n        aria-hidden=\"true\"\n        class=\"rounded-pill animate-cairn-spin absolute inset-0 m-auto size-4 border-2 border-current border-r-transparent\"\n      ></span>\n    }\n    <span class=\"contents\" [class.text-transparent]=\"loading()\"><ng-content /></span>\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-busy]': 'inactive() || null',\n    '[attr.aria-disabled]': 'inactive() || null',\n  },\n})\nexport class UiButton {\n  readonly variant = input<ButtonVariant>('primary');\n  readonly size = input<ButtonSize>('md');\n  readonly loading = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n\n  protected readonly inactive = computed(() => this.loading() || this.busy());\n\n  protected readonly classes = computed(\n    () =>\n      `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`,\n  );\n\n  constructor() {\n    holdTransitionsUntilRendered();\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const guard = (event: Event): void => {\n      if (this.inactive()) {\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 * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,146 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
+
+/** Available card variants. `CardVariant` is derived from this tuple. */
+const CARD_VARIANTS = ['default', 'elevated', 'inset'];
+/** Available card paddings. `CardPadding` is derived from this tuple. */
+const CARD_PADDINGS = ['none', 'xs', 'sm', 'md', 'list', 'rows', 'recap', 'panel'];
+/** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */
+const CARD_SURFACES = ['always', 'lg', 'max-lg'];
+/** Border of the card surface; `auto` follows the variant. `CardBorder` is derived from this tuple. */
+const CARD_BORDERS = ['auto', 'none', 'border', 'hairline'];
+const BASE_CLASSES = 'block';
+const VARIANT_CLASSES = {
+    default: {
+        always: 'rounded-container bg-(--card) text-(--card-foreground)',
+        lg: 'lg:rounded-container lg:bg-(--card) lg:text-(--card-foreground)',
+        'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:text-(--card-foreground)',
+    },
+    elevated: {
+        always: 'rounded-container bg-(--elevated) text-(--foreground)',
+        lg: 'lg:rounded-container lg:bg-(--elevated) lg:text-(--foreground)',
+        'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:text-(--foreground)',
+    },
+    inset: {
+        always: 'rounded-control bg-(--background) text-(--foreground)',
+        lg: 'lg:rounded-control lg:bg-(--background) lg:text-(--foreground)',
+        'max-lg': 'max-lg:rounded-control max-lg:bg-(--background) max-lg:text-(--foreground)',
+    },
+};
+const AUTO_BORDERS = {
+    default: 'border',
+    elevated: 'hairline',
+    inset: 'none',
+};
+const BORDER_CLASSES = {
+    none: { always: '', lg: '', 'max-lg': '' },
+    border: {
+        always: 'shadow-[inset_0_0_0_1px_var(--border)]',
+        lg: 'lg:shadow-[inset_0_0_0_1px_var(--border)]',
+        'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--border)]',
+    },
+    hairline: {
+        always: 'shadow-[inset_0_0_0_1px_var(--hairline)]',
+        lg: 'lg:shadow-[inset_0_0_0_1px_var(--hairline)]',
+        'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--hairline)]',
+    },
+};
+const PADDING_CLASSES = {
+    none: {
+        always: 'p-0',
+        lg: 'lg:p-0',
+        'max-lg': 'max-lg:p-0',
+    },
+    xs: {
+        always: 'p-1',
+        lg: 'lg:p-1',
+        'max-lg': 'max-lg:p-1',
+    },
+    sm: {
+        always: 'p-3',
+        lg: 'lg:p-3',
+        'max-lg': 'max-lg:p-3',
+    },
+    md: {
+        always: 'p-(--inset-card)',
+        lg: 'lg:p-(--inset-card)',
+        'max-lg': 'max-lg:p-(--inset-card)',
+    },
+    list: {
+        always: 'px-2 py-3',
+        lg: 'lg:px-2 lg:py-3',
+        'max-lg': 'max-lg:px-2 max-lg:py-3',
+    },
+    rows: {
+        always: 'px-(--inset-card) py-1',
+        lg: 'lg:px-(--inset-card) lg:py-1',
+        'max-lg': 'max-lg:px-(--inset-card) max-lg:py-1',
+    },
+    recap: {
+        always: 'px-3 py-1',
+        lg: 'lg:px-3 lg:py-1',
+        'max-lg': 'max-lg:px-3 max-lg:py-1',
+    },
+    panel: {
+        always: 'px-3 py-2.5 lg:px-4 lg:py-3',
+        lg: 'lg:px-4 lg:py-3',
+        'max-lg': 'max-lg:px-3 max-lg:py-2.5',
+    },
+};
+/**
+ * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the
+ * fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and
+ * plain on an iPhone, or the reverse. `variant="inset"` is the `--background` box that sits inside a
+ * card or a dialog: a picked title, a results list, a recap, an empty-state panel.
+ *
+ * @example
+ * <ui-card variant="elevated" padding="sm">Total</ui-card>
+ * <ui-card variant="inset" border="hairline" padding="xs">Results</ui-card>
+ * <ui-card padding="none" clip>Table that touches the edges, clipped to the corners</ui-card>
+ * <ui-card surface="max-lg">Card on an iPhone, plain on a desktop</ui-card>
+ */
+class UiCard {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    padding = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    surface = input('always', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    border = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    clip = input(false, { ...(ngDevMode ? { debugName: "clip" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => {
+        const variant = this.variant();
+        const surface = this.surface();
+        const border = this.border();
+        return [
+            BASE_CLASSES,
+            VARIANT_CLASSES[variant][surface],
+            BORDER_CLASSES[border === 'auto' ? AUTO_BORDERS[variant] : border][surface],
+            PADDING_CLASSES[this.padding()][surface],
+            this.clip() ? 'overflow-hidden' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiCard, isStandalone: true, selector: "ui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, clip: { classPropertyName: "clip", publicName: "clip", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card',
+                    template: '<ng-content />',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], clip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clip", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, UiCard };
+//# sourceMappingURL=joanroucoux-cairn-ui-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-card.mjs","sources":["../../../projects/ui/card/card.ts","../../../projects/ui/card/joanroucoux-cairn-ui-card.ts"],"sourcesContent":["import { Component, booleanAttribute, computed, input } from '@angular/core';\n\n/** Available card variants. `CardVariant` is derived from this tuple. */\nexport const CARD_VARIANTS = ['default', 'elevated', 'inset'] as const;\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\n\n/** Available card paddings. `CardPadding` is derived from this tuple. */\nexport const CARD_PADDINGS = ['none', 'xs', 'sm', 'md', 'list', 'rows', 'recap', 'panel'] as const;\nexport type CardPadding = (typeof CARD_PADDINGS)[number];\n\n/** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */\nexport const CARD_SURFACES = ['always', 'lg', 'max-lg'] as const;\nexport type CardSurface = (typeof CARD_SURFACES)[number];\n\n/** Border of the card surface; `auto` follows the variant. `CardBorder` is derived from this tuple. */\nexport const CARD_BORDERS = ['auto', 'none', 'border', 'hairline'] as const;\nexport type CardBorder = (typeof CARD_BORDERS)[number];\n\nconst BASE_CLASSES = 'block';\n\nconst VARIANT_CLASSES: Record<CardVariant, Record<CardSurface, string>> = {\n  default: {\n    always: 'rounded-container bg-(--card) text-(--card-foreground)',\n    lg: 'lg:rounded-container lg:bg-(--card) lg:text-(--card-foreground)',\n    'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:text-(--card-foreground)',\n  },\n  elevated: {\n    always: 'rounded-container bg-(--elevated) text-(--foreground)',\n    lg: 'lg:rounded-container lg:bg-(--elevated) lg:text-(--foreground)',\n    'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:text-(--foreground)',\n  },\n  inset: {\n    always: 'rounded-control bg-(--background) text-(--foreground)',\n    lg: 'lg:rounded-control lg:bg-(--background) lg:text-(--foreground)',\n    'max-lg': 'max-lg:rounded-control max-lg:bg-(--background) max-lg:text-(--foreground)',\n  },\n};\n\nconst AUTO_BORDERS: Record<CardVariant, Exclude<CardBorder, 'auto'>> = {\n  default: 'border',\n  elevated: 'hairline',\n  inset: 'none',\n};\n\nconst BORDER_CLASSES: Record<Exclude<CardBorder, 'auto'>, Record<CardSurface, string>> = {\n  none: { always: '', lg: '', 'max-lg': '' },\n  border: {\n    always: 'shadow-[inset_0_0_0_1px_var(--border)]',\n    lg: 'lg:shadow-[inset_0_0_0_1px_var(--border)]',\n    'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--border)]',\n  },\n  hairline: {\n    always: 'shadow-[inset_0_0_0_1px_var(--hairline)]',\n    lg: 'lg:shadow-[inset_0_0_0_1px_var(--hairline)]',\n    'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--hairline)]',\n  },\n};\n\nconst PADDING_CLASSES: Record<CardPadding, Record<CardSurface, string>> = {\n  none: {\n    always: 'p-0',\n    lg: 'lg:p-0',\n    'max-lg': 'max-lg:p-0',\n  },\n  xs: {\n    always: 'p-1',\n    lg: 'lg:p-1',\n    'max-lg': 'max-lg:p-1',\n  },\n  sm: {\n    always: 'p-3',\n    lg: 'lg:p-3',\n    'max-lg': 'max-lg:p-3',\n  },\n  md: {\n    always: 'p-(--inset-card)',\n    lg: 'lg:p-(--inset-card)',\n    'max-lg': 'max-lg:p-(--inset-card)',\n  },\n  list: {\n    always: 'px-2 py-3',\n    lg: 'lg:px-2 lg:py-3',\n    'max-lg': 'max-lg:px-2 max-lg:py-3',\n  },\n  rows: {\n    always: 'px-(--inset-card) py-1',\n    lg: 'lg:px-(--inset-card) lg:py-1',\n    'max-lg': 'max-lg:px-(--inset-card) max-lg:py-1',\n  },\n  recap: {\n    always: 'px-3 py-1',\n    lg: 'lg:px-3 lg:py-1',\n    'max-lg': 'max-lg:px-3 max-lg:py-1',\n  },\n  panel: {\n    always: 'px-3 py-2.5 lg:px-4 lg:py-3',\n    lg: 'lg:px-4 lg:py-3',\n    'max-lg': 'max-lg:px-3 max-lg:py-2.5',\n  },\n};\n\n/**\n * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the\n * fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and\n * plain on an iPhone, or the reverse. `variant=\"inset\"` is the `--background` box that sits inside a\n * card or a dialog: a picked title, a results list, a recap, an empty-state panel.\n *\n * @example\n * <ui-card variant=\"elevated\" padding=\"sm\">Total</ui-card>\n * <ui-card variant=\"inset\" border=\"hairline\" padding=\"xs\">Results</ui-card>\n * <ui-card padding=\"none\" clip>Table that touches the edges, clipped to the corners</ui-card>\n * <ui-card surface=\"max-lg\">Card on an iPhone, plain on a desktop</ui-card>\n */\n@Component({\n  selector: 'ui-card',\n  template: '<ng-content />',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiCard {\n  readonly variant = input<CardVariant>('default');\n  readonly padding = input<CardPadding>('md');\n  readonly surface = input<CardSurface>('always');\n  readonly border = input<CardBorder>('auto');\n  readonly clip = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() => {\n    const variant = this.variant();\n    const surface = this.surface();\n    const border = this.border();\n\n    return [\n      BASE_CLASSES,\n      VARIANT_CLASSES[variant][surface],\n      BORDER_CLASSES[border === 'auto' ? AUTO_BORDERS[variant] : border][surface],\n      PADDING_CLASSES[this.padding()][surface],\n      this.clip() ? 'overflow-hidden' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-choice-chips.mjs

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { input, model, booleanAttribute, output, inject, ElementRef, viewChildren, computed, forwardRef, Component } from '@angular/core';
+import { UI_CONTROL } from '@joanroucoux/cairn-ui/control';
+import { CONTROL_SURFACE_CLASSES } from '@joanroucoux/cairn-ui/input';
+
+const CHIP_CLASSES = 'h-10 px-3.5 pointer-fine:h-8 pointer-fine:px-3 rounded-pill text-label font-medium cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)';
+const SELECTED_CLASSES = 'bg-(--primary) text-(--primary-foreground)';
+const UNSELECTED_CLASSES = 'text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';
+const nextId = (() => {
+    let count = 0;
+    return () => `ui-choice-chips-${++count}`;
+})();
+/**
+ * Exclusive choice among a handful of named options, shown as wrapping pills: an account envelope,
+ * a category, a frequency. Binds to Signal Forms with `[formField]`.
+ *
+ * @example
+ * <ui-choice-chips label="Envelope" [options]="envelopes" [(value)]="envelope" />
+ *
+ * @example
+ * <ui-choice-chips label="Envelope" [options]="envelopes" [formField]="form.envelope" />
+ */
+class UiChoiceChips {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledby = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    surface = input('background', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    touch = output();
+    labelId = nextId();
+    #host = inject(ElementRef);
+    radios = viewChildren('radio', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.ariaLabelledby() ?? (this.label() ? this.labelId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    chipClasses(optionValue) {
+        const state = optionValue === this.value()
+            ? SELECTED_CLASSES
+            : `${CONTROL_SURFACE_CLASSES[this.surface()]} ${UNSELECTED_CLASSES}`;
+        return `${CHIP_CLASSES} ${state}`;
+    }
+    tabIndexFor(optionValue) {
+        const opts = this.options();
+        const tabStopValue = opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value;
+        return optionValue === tabStopValue ? 0 : -1;
+    }
+    select(optionValue) {
+        this.value.set(optionValue);
+    }
+    onFocusOut(event) {
+        if (!this.#host.nativeElement.contains(event.relatedTarget)) {
+            this.touch.emit();
+        }
+    }
+    onKeydown(event, index) {
+        const opts = this.options();
+        const target = {
+            ArrowRight: index + 1,
+            ArrowDown: index + 1,
+            ArrowLeft: index - 1,
+            ArrowUp: index - 1,
+            Home: 0,
+            End: opts.length - 1,
+        }[event.key];
+        if (target === undefined) {
+            return;
+        }
+        event.preventDefault();
+        const nextIndex = ((target % opts.length) + opts.length) % opts.length;
+        this.value.set(opts[nextIndex].value);
+        this.radios()[nextIndex].nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiChoiceChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiChoiceChips, isStandalone: true, selector: "ui-choice-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiChoiceChips) }], viewQueries: [{ propertyName: "radios", predicate: ["radio"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="flex flex-col gap-1.5"
+      role="radiogroup"
+      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="labelledBy()"
+      [attr.aria-required]="required() || null"
+      (focusout)="onFocusOut($event)"
+    >
+      @if (label()) {
+        <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
+          label()
+        }}</span>
+      }
+
+      <div class="flex flex-wrap gap-1.5">
+        @for (option of options(); track option.value; let index = $index) {
+          <button
+            #radio
+            role="radio"
+            type="button"
+            [attr.aria-checked]="option.value === value()"
+            [attr.tabindex]="tabIndexFor(option.value)"
+            [class]="chipClasses(option.value)"
+            [disabled]="disabled()"
+            (click)="select(option.value)"
+            (keydown)="onKeydown($event, index)"
+          >
+            {{ option.label }}
+          </button>
+        }
+      </div>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiChoiceChips, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-choice-chips',
+                    template: `
+    <div
+      class="flex flex-col gap-1.5"
+      role="radiogroup"
+      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="labelledBy()"
+      [attr.aria-required]="required() || null"
+      (focusout)="onFocusOut($event)"
+    >
+      @if (label()) {
+        <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
+          label()
+        }}</span>
+      }
+
+      <div class="flex flex-wrap gap-1.5">
+        @for (option of options(); track option.value; let index = $index) {
+          <button
+            #radio
+            role="radio"
+            type="button"
+            [attr.aria-checked]="option.value === value()"
+            [attr.tabindex]="tabIndexFor(option.value)"
+            [class]="chipClasses(option.value)"
+            [disabled]="disabled()"
+            (click)="select(option.value)"
+            (keydown)="onKeydown($event, index)"
+          >
+            {{ option.label }}
+          </button>
+        }
+      </div>
+    </div>
+  `,
+                    providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiChoiceChips) }],
+                }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiChoiceChips };
+//# sourceMappingURL=joanroucoux-cairn-ui-choice-chips.mjs.map

package/fesm2022/joanroucoux-cairn-ui-choice-chips.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-choice-chips.mjs","sources":["../../../projects/ui/choice-chips/choice-chips.ts","../../../projects/ui/choice-chips/joanroucoux-cairn-ui-choice-chips.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  output,\n  viewChildren,\n} from '@angular/core';\n\nimport { UI_CONTROL, type UiControl, type UiControlError } from '@joanroucoux/cairn-ui/control';\nimport { CONTROL_SURFACE_CLASSES, type ControlSurface } from '@joanroucoux/cairn-ui/input';\n\nexport type ChoiceChipOption = {\n  value: string;\n  label: string;\n};\n\nconst CHIP_CLASSES =\n  'h-10 px-3.5 pointer-fine:h-8 pointer-fine:px-3 rounded-pill text-label font-medium cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)';\n\nconst SELECTED_CLASSES = 'bg-(--primary) text-(--primary-foreground)';\n\nconst UNSELECTED_CLASSES = 'text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';\n\nconst nextId = (() => {\n  let count = 0;\n\n  return (): string => `ui-choice-chips-${++count}`;\n})();\n\n/**\n * Exclusive choice among a handful of named options, shown as wrapping pills: an account envelope,\n * a category, a frequency. Binds to Signal Forms with `[formField]`.\n *\n * @example\n * <ui-choice-chips label=\"Envelope\" [options]=\"envelopes\" [(value)]=\"envelope\" />\n *\n * @example\n * <ui-choice-chips label=\"Envelope\" [options]=\"envelopes\" [formField]=\"form.envelope\" />\n */\n@Component({\n  selector: 'ui-choice-chips',\n  template: `\n    <div\n      class=\"flex flex-col gap-1.5\"\n      role=\"radiogroup\"\n      [attr.aria-invalid]=\"invalid() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      @if (label()) {\n        <span class=\"text-label leading-[17px] font-medium text-(--muted-foreground)\" [id]=\"labelId\">{{\n          label()\n        }}</span>\n      }\n\n      <div class=\"flex flex-wrap gap-1.5\">\n        @for (option of options(); track option.value; let index = $index) {\n          <button\n            #radio\n            role=\"radio\"\n            type=\"button\"\n            [attr.aria-checked]=\"option.value === value()\"\n            [attr.tabindex]=\"tabIndexFor(option.value)\"\n            [class]=\"chipClasses(option.value)\"\n            [disabled]=\"disabled()\"\n            (click)=\"select(option.value)\"\n            (keydown)=\"onKeydown($event, index)\"\n          >\n            {{ option.label }}\n          </button>\n        }\n      </div>\n    </div>\n  `,\n  providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiChoiceChips) }],\n})\nexport class UiChoiceChips implements UiControl {\n  readonly options = input.required<ChoiceChipOption[]>();\n  readonly value = model.required<string>();\n  readonly label = input<string>();\n  readonly ariaLabel = input<string>();\n  readonly ariaLabelledby = input<string>();\n  readonly surface = input<ControlSurface>('background');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly errors = input<readonly UiControlError[]>([]);\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly touched = input(false);\n  readonly touch = output<void>();\n\n  protected readonly labelId = nextId();\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected readonly radios = viewChildren<ElementRef<HTMLButtonElement>>('radio');\n\n  protected readonly labelledBy = computed(() => this.ariaLabelledby() ?? (this.label() ? this.labelId : null));\n\n  protected chipClasses(optionValue: string): string {\n    const state =\n      optionValue === this.value()\n        ? SELECTED_CLASSES\n        : `${CONTROL_SURFACE_CLASSES[this.surface()]} ${UNSELECTED_CLASSES}`;\n\n    return `${CHIP_CLASSES} ${state}`;\n  }\n\n  protected tabIndexFor(optionValue: string): number {\n    const opts = this.options();\n    const tabStopValue = opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value;\n\n    return optionValue === tabStopValue ? 0 : -1;\n  }\n\n  protected select(optionValue: string): void {\n    this.value.set(optionValue);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    if (!this.#host.nativeElement.contains(event.relatedTarget as Node | null)) {\n      this.touch.emit();\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent, index: number): void {\n    const opts = this.options();\n    const target = {\n      ArrowRight: index + 1,\n      ArrowDown: index + 1,\n      ArrowLeft: index - 1,\n      ArrowUp: index - 1,\n      Home: 0,\n      End: opts.length - 1,\n    }[event.key];\n\n    if (target === undefined) {\n      return;\n    }\n    event.preventDefault();\n\n    const nextIndex = ((target % opts.length) + opts.length) % opts.length;\n\n    this.value.set(opts[nextIndex]!.value);\n    this.radios()[nextIndex]!.nativeElement.focus();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Resolves to the styled control projected into a field.
+ *
+ * Angular's `[formField]` directive fills any input named `errors` or `touched` on the directives
+ * sitting on its host element, so a control declaring them receives its own validation state with
+ * nothing written at the call site. This token is how the field finds whichever control was
+ * projected into it.
+ */
+const UI_CONTROL = new InjectionToken('UI_CONTROL');
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UI_CONTROL };
+//# sourceMappingURL=joanroucoux-cairn-ui-control.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-control.mjs","sources":["../../../projects/ui/control/control.ts","../../../projects/ui/control/joanroucoux-cairn-ui-control.ts"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * The part of a validation error this library reads. Angular's own `ValidationError` satisfies it,\n * which is how a Signal Forms error reaches a field without this package depending on\n * `@angular/forms`.\n */\nexport type UiControlError = { readonly message?: string };\n\n/** What a styled control offers the field wrapped around it. */\nexport type UiControl = {\n  readonly errors: Signal<readonly UiControlError[]>;\n  readonly touched: Signal<boolean>;\n};\n\n/**\n * Resolves to the styled control projected into a field.\n *\n * Angular's `[formField]` directive fills any input named `errors` or `touched` on the directives\n * sitting on its host element, so a control declaring them receives its own validation state with\n * nothing written at the call site. This token is how the field finds whichever control was\n * projected into it.\n */\nexport const UI_CONTROL = new InjectionToken<UiControl>('UI_CONTROL');\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAeA;;;;;;;AAOG;MACU,UAAU,GAAG,IAAI,cAAc,CAAY,YAAY;;ACvBpE;;AAEG;;;;"}