import { Color } from '@ionic/core'; /** Color variant for the badge/text pill. */ export type PillColor = Color; /** Font weight for the badge label. */ export type PillWeight = 'normal' | 'medium' | 'bold'; /** Size of the badge pill. */ export type PillSize = 'small' | 'medium' | 'large'; /** * A single action button rendered as a small circle icon inside a notification pill. */ export interface PillAction { /** ionicons icon name */ icon: string; /** Identifier emitted on click */ token: string; /** Accessible label (falls back to token) */ ariaLabel?: string; } /** * Notification-pill content. Activates notification mode when provided. * * Renders as a wide dark pill: icon ﹒ time · title ﹒ [action buttons]. */ export interface PillNotification { /** ionicons icon name shown on the left */ icon?: string; /** Icon color (Ionic color name or CSS). Default: 'warning' */ iconColor?: string; /** Short time/age label (e.g. '2h', 'now', '3min ago') */ time?: string; /** Notification title */ title: string; /** Optional secondary body text */ body?: string; /** Circle icon buttons on the right (dismiss, snooze, etc.) */ actions?: PillAction[]; } /** * Configuration for `val-pill`. * * Two modes — whichever field is present takes precedence: * * 1. **Notification mode** — provide `notification`. Renders a wide dark pill * with icon + time + title + circle action buttons. * * 2. **Badge mode** — provide `label`. Renders a compact coloured badge. * * @example Badge * ```html * * ``` * * @example Notification * ```html * * ``` */ export type PillMetadata = { token?: string; /** Presence activates notification mode */ notification?: PillNotification; /** Presence activates badge mode (overrides notification mode) */ label?: string; /** Badge color variant. Default: 'medium' */ color?: PillColor; /** Font weight. Default: 'medium' */ weight?: PillWeight; /** Badge size. Default: 'small' */ size?: PillSize; /** Optional leading ionicons icon */ icon?: string; /** Makes the badge interactive: pointer cursor + emits pillClick */ clickable?: boolean; /** Solid fill instead of the default soft/tinted fill */ solid?: boolean; /** Accessible label override. Falls back to `label` */ ariaLabel?: string; }; /** Emitted by a clickable badge pill. */ export interface PillClickEvent { token?: string; label?: string; } /** Emitted when a notification-pill action button is pressed. */ export interface PillActionEvent { /** Token of the action button pressed */ actionToken: string; /** Pill token if set */ pillToken?: string; }