@compsych-ui-components/angular 8.0.3 → 8.0.5

package/lib/chip/chip.d.ts

@@ -0,0 +1,108 @@
+import { SafeHtml } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+import * as i1 from "../card-base/ripple.directive";
+/** Figma "Style". */
+export type ChipVariant = 'tonal' | 'outlined' | 'filled';
+/** Figma "Usage". `inverse` pairs with the tonal style only. */
+export type ChipUsage = 'neutral' | 'informative' | 'positive' | 'danger' | 'warning' | 'inverse';
+/** Chip dimensions — 20 / 24 / 32 / 40 tall. */
+export type ChipSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Chip — Figma "Chip" component set (Core Components › Molecules, node 14:942).
+ *
+ * Three axes: Style (Tonal / Outlined / Filled) × Usage (Neutral / Informative /
+ * Positive / Danger / Warning, plus Inverse on Tonal only) × Size (sm / md / lg /
+ * xl = 20 / 24 / 32 / 40). Booleans: leading icon, dismissible, badge — all off by
+ * default, as in Figma.
+ *
+ * Chips are INTERACTIVE BY DEFAULT (ruled 2026-09-02, Jean — the Material 3
+ * convention: every chip is something you press; a read-only status marker is a
+ * Badge). The icon + label render inside a real `<button>` whose hit area is the
+ * whole pill; `(click)` on the host is the chip's action. The interaction recipe is
+ * Button's (ruled 2026-08-24): the chip's own foreground as an 8% state layer,
+ * 120ms hover-in / 240ms release, the level-2 elevation lift, the shared press
+ * ripple, and the Focus Ring drawn around the pill. The Figma set authors no State
+ * variants — recorded as a reconciliation; the recipe follows them the day they
+ * exist. `[interactive]="false"` opts a chip out (a display-only tag inside another
+ * control) — then the host is a plain pill with no role.
+ *
+ * The dismiss affordance is a SIBLING button, never nested in the primary one
+ * (nested interactive controls are invalid); it emits `dismiss` and stops its click
+ * at the host so the chip's action does not fire. It is ALWAYS the outermost
+ * element — icon, label, badge, then the x (ruled 2026-09-02, Jean; the Figma file
+ * orders the badge after the Close Button). With a trailing control the pill's end
+ * padding tightens so the control sits concentric with the pill's end, and a
+ * leading icon mirrors that inset at the start (ruled 2026-09-02; the file authors
+ * symmetric padding).
+ *
+ * Colour recipe (usage → sys tokens; neutral maps to the surface family):
+ *   tonal     bg `<usage>`-container         fg on-`<usage>`-container
+ *   filled    bg `<usage>`, white content    (neutral: plain white pill — Figma
+ *             authors a level-2 elevation on it; ruled 2026-08-24 that chips carry
+ *             no resting shadow, Figma queued to update)
+ *   outlined  border `<usage>`-container, label `<usage>`, icon = label (neutral:
+ *             outline / on-surface). EXCEPT warning: label and icon take
+ *             on-warning-container — an accessibility exception ruled 2026-09-02
+ *             (sys-warning on white is 3.09:1).
+ *   inverse   transparent-white-20 + backdrop blur, white content — for placement
+ *             on photos. Tonal only, per the Figma set.
+ *
+ * Figma reconciliations this implementation carries (flagged to design, majority
+ * pattern followed instead):
+ *   - Outlined/Informative binds primary-family colours in the file where its three
+ *     status siblings all use their own family. Implemented info-family.
+ *   - The Warning badge count binds on-surface in the file where every other usage
+ *     uses the usage foreground. Implemented as the usage foreground.
+ *   - The counter inverts on filled-status and inverse chips for AA (see chip.css).
+ *
+ * @example
+ * ```html
+ * <compsych-chip label="Active" variant="tonal" usage="positive" size="md" />
+ * <compsych-chip label="Filter" leadingIcon="tag" [dismissible]="true"
+ *                (dismiss)="remove()" (click)="apply()" />
+ * ```
+ */
+export declare class ChipComponent {
+    /** Figma "Style". Defaults to Tonal, as the set does. */
+    readonly variant: import("@angular/core").InputSignal<ChipVariant>;
+    /** Figma "Usage". `inverse` pairs with the tonal style only. */
+    readonly usage: import("@angular/core").InputSignal<ChipUsage>;
+    readonly size: import("@angular/core").InputSignal<ChipSize>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    /** Lucide icon name for the leading slot (Figma "Leading Icon" + swap). */
+    readonly leadingIcon: import("@angular/core").InputSignal<string | undefined>;
+    /** Shows the dismiss affordance (Figma "Dismissible"). */
+    readonly dismissible: import("@angular/core").InputSignal<boolean>;
+    /** Badge count (Figma "Badge"). Undefined = no badge. */
+    readonly badge: import("@angular/core").InputSignal<string | number | undefined>;
+    /** Accessible name for the dismiss button. */
+    readonly dismissLabel: import("@angular/core").InputSignal<string>;
+    /**
+     * Chips are interactive by default (ruled 2026-09-02): icon + label sit in a real
+     * button and `(click)` on the host is the action. `false` renders a display-only
+     * pill — no role, no state layer, no ripple.
+     */
+    readonly interactive: import("@angular/core").InputSignal<boolean>;
+    /** Disables the primary button (interactive chips only). */
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    /** Emitted by the dismiss button. The host app removes the chip. */
+    readonly dismiss: import("@angular/core").OutputEmitterRef<void>;
+    private readonly sanitizer;
+    private readonly ripple;
+    private static nextId;
+    /** Links the primary button to its counter (aria-describedby). */
+    protected readonly badgeId: string;
+    constructor();
+    /** Leading icon px per size (Figma: 16 at sm/md, 20 at lg/xl). */
+    readonly iconPx: import("@angular/core").Signal<20 | 16>;
+    /** Dismiss "x" px per size (Figma close slot: 12 at sm/md, 16 at lg/xl). */
+    readonly xPx: import("@angular/core").Signal<16 | 12>;
+    protected readonly leadingIconSvg: import("@angular/core").Signal<SafeHtml | null>;
+    protected readonly dismissIconSvg: import("@angular/core").Signal<SafeHtml>;
+    /** Renders a sized Lucide glyph at the DS absolute stroke weight for that size. */
+    private iconSvg;
+    /** Dismiss is its own action — it must not also fire the chip's. */
+    protected onDismiss(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "compsych-chip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "usage": { "alias": "usage"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, [{ directive: typeof i1.RippleDirective; inputs: {}; outputs: {}; }]>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych-ui-components/angular",
-  "version": "8.0.3",
+  "version": "8.0.5",
   "description": "Angular UI components for compsych",
   "publishConfig": {
     "access": "public",