@twentyfirstmedia/elements 0.6.0 → 0.8.0

package/dist/elements.d.ts

@@ -2982,6 +2982,608 @@ export interface QrCodeProps extends BaseProps {
   label?: string;
 }
 
+/* ── Life: wellbeing, health, goals, AI insights, consent ── */
+export interface Habit {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  /** One entry per day, oldest first, today last: true done, false missed, null no data. */
+  days: (boolean | null)[];
+  /** Days in a row (shown as "12-day streak"). */
+  streak?: number;
+  /** A short target, e.g. "8 glasses" or "3× a week". */
+  goal?: string;
+}
+export interface HabitTrackerProps extends BaseProps {
+  habits: Habit[];
+  /** Labels of the day columns, oldest first (default: weekday initials ending today). */
+  dayLabels?: string[];
+  /** Today's box of a habit was toggled. */
+  onToggle?: (id: string, done: boolean) => void;
+  /** Accessible name of the list (default "Habits"). */
+  label?: string;
+}
+export type MoodLevel = 1 | 2 | 3 | 4 | 5;
+export interface MoodPickerProps extends BaseProps {
+  value?: MoodLevel | null;
+  defaultValue?: MoodLevel | null;
+  onChange?: (mood: MoodLevel) => void;
+  /** The question (default "How are you feeling?"). */
+  label?: ReactNode;
+  /** Words for the five levels, lowest first (default Awful, Low, Okay, Good, Great). */
+  levels?: [string, string, string, string, string];
+  /** Only the faces; the words stay as accessible names. */
+  compact?: boolean;
+}
+export interface VitalTileProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  label: string;
+  value: number;
+  unit?: string;
+  icon?: IconName;
+  /** The healthy range [low, high]; the tile says whether the value is below, in or above it. */
+  normal?: [number, number];
+  /** The whole scale of the band [min, max] (default: the normal range with room on both sides). */
+  scale?: [number, number];
+  /** Recent values, oldest first, drawn as a sparkline. */
+  trend?: number[];
+  /** Under the value: when it was measured, the source … */
+  caption?: ReactNode;
+  /** Digits after the decimal point (default 0). */
+  digits?: number;
+}
+export interface ActivityRing {
+  label: string;
+  value: number;
+  goal: number;
+  unit?: string;
+  tint?: Tint;
+}
+export interface ActivityRingsProps extends BaseProps {
+  /** Outer ring first. */
+  rings: ActivityRing[];
+  /** Diameter of the rings (default 132). */
+  size?: number;
+  /** Hide the legend beside the rings. */
+  legend?: boolean;
+  /** Accessible name (default "Activity"). */
+  label?: string;
+}
+export type SleepStage = "awake" | "rem" | "light" | "deep";
+export interface SleepSegment {
+  stage: SleepStage;
+  start: Date | string | number;
+  end: Date | string | number;
+}
+export interface SleepChartProps extends BaseProps {
+  /** The night in order, from falling asleep to getting up. */
+  segments: SleepSegment[];
+  /** Accessible name (default "Sleep stages"). */
+  label?: string;
+  /** Hide the totals per stage under the chart. */
+  summary?: boolean;
+}
+export interface MedicationItem {
+  id: string;
+  name: string;
+  dose?: string;
+  /** When, as shown ("08:00", "With breakfast"). */
+  time: string;
+  /** Set by the app, which knows the clock: default "taken" when `taken`, else "due". */
+  status?: "taken" | "due" | "missed" | "upcoming";
+  taken?: boolean;
+  note?: string;
+  icon?: IconName;
+}
+export interface MedicationListProps extends BaseProps {
+  items: MedicationItem[];
+  /** "Mark as taken" was pressed. */
+  onTake?: (id: string) => void;
+  /** Accessible name (default "Medication"). */
+  label?: string;
+}
+export interface JournalEntryProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  date: Date | string | number;
+  title?: string;
+  mood?: MoodLevel;
+  tags?: string[];
+  children?: ReactNode;
+  /** Buttons at the end (edit, share …). */
+  actions?: ReactNode;
+}
+export interface GoalCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  value: number;
+  target: number;
+  /** How to show value and target (default number). */
+  format?: "number" | "money" | "percent";
+  /** Unit after numbers ("km", "books"). */
+  unit?: string;
+  currency?: string;
+  due?: Date | string | number;
+  icon?: IconName;
+  tint?: Tint;
+  milestones?: { label: string; done?: boolean }[];
+  /** A note under the progress ("€250 a month keeps you on track"). */
+  note?: ReactNode;
+}
+export interface InsightCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  children?: ReactNode;
+  icon?: IconName;
+  tone?: "info" | "success" | "warning" | "highlight";
+  /** Above the title: area and time ("Money · 2 h ago"). */
+  meta?: ReactNode;
+  /** Where the insight comes from, as chips (like chat sources). */
+  sources?: Source[];
+  /** Why the assistant shows it; folded away behind "Why am I seeing this?". */
+  why?: ReactNode;
+  onAccept?: () => void;
+  acceptLabel?: string;
+  onSnooze?: () => void;
+  onDismiss?: () => void;
+}
+export interface ConsentScope {
+  id: string;
+  label: string;
+  description?: string;
+  granted: boolean;
+  /** Needed for the connection to work at all: shown, not switchable. */
+  required?: boolean;
+  /** What the permission allows: reading, acting (sending, booking, switching) or moving money. */
+  level?: "read" | "act" | "money";
+  /** The assistant asks you before it uses this permission. */
+  asksFirst?: boolean;
+}
+export interface ConsentConnector {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  /** What the assistant uses it for. */
+  purpose?: ReactNode;
+  scopes: ConsentScope[];
+  lastUsed?: Date | string | number;
+}
+export interface ConsentListProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  connectors: ConsentConnector[];
+  onScopeChange?: (connectorId: string, scopeId: string, granted: boolean) => void;
+  onRevoke?: (connectorId: string) => void;
+  /** Accessible name (default "Data access"). */
+  label?: string;
+}
+
+/* ── Life: money, insurance, deadlines, documents ── */
+export interface BudgetCategory {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  spent: number;
+  limit: number;
+}
+export interface BudgetListProps extends BaseProps {
+  categories: BudgetCategory[];
+  currency?: string;
+  /** A category was picked (to show its transactions). */
+  onSelect?: (id: string) => void;
+  /** Accessible name (default "Budgets"). */
+  label?: string;
+}
+export interface Subscription {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  amount: number;
+  period: "week" | "month" | "year";
+  /** Next charge. */
+  next?: Date | string | number;
+  status?: "active" | "trial" | "cancelled";
+  category?: string;
+}
+export interface SubscriptionListProps extends BaseProps {
+  items: Subscription[];
+  currency?: string;
+  /** "Manage" on a subscription (cancel, change plan …). */
+  onManage?: (id: string) => void;
+  /** Hide the monthly and yearly totals. */
+  totals?: boolean;
+  /** Accessible name (default "Subscriptions"). */
+  label?: string;
+}
+export interface NetWorthCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  assets: { label: string; value: number; icon?: IconName }[];
+  liabilities?: { label: string; value: number; icon?: IconName }[];
+  /** Net worth over time, oldest first. */
+  history?: number[];
+  /** Change over `changeLabel` (e.g. +1,240 "since October"). */
+  change?: number;
+  changeLabel?: string;
+  currency?: string;
+  title?: string;
+}
+export interface DeadlineItem {
+  id: string;
+  title: string;
+  /** What kind: "Contract", "ID card", "Tax" … */
+  kind?: string;
+  icon?: IconName;
+  date: Date | string | number;
+  amount?: number;
+  done?: boolean;
+  note?: string;
+}
+export interface DeadlineListProps extends BaseProps {
+  items: DeadlineItem[];
+  /** The day to count from (default: now). Set it for server rendering and stable output. */
+  today?: Date | string | number;
+  /** Days ahead that count as soon (default 14). */
+  soon?: number;
+  currency?: string;
+  onDone?: (id: string) => void;
+  /** Accessible name (default "Deadlines"). */
+  label?: string;
+}
+export interface PolicyCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  /** The kind of insurance: "Household contents", "Liability" … */
+  type: string;
+  insurer: string;
+  icon?: IconName;
+  tint?: Tint;
+  policyNumber?: string;
+  /** Show only the last four characters of the policy number. */
+  maskNumber?: boolean;
+  /** Sum insured: a number (money) or text ("unlimited"). */
+  coverage?: number | ReactNode;
+  premium?: { amount: number; period: "month" | "quarter" | "year" };
+  deductible?: number;
+  renews?: Date | string | number;
+  status?: "active" | "pending" | "expiring" | "lapsed";
+  currency?: string;
+  /** Buttons at the foot (documents, report a claim …). */
+  actions?: ReactNode;
+}
+export interface CoverageRow {
+  id: string;
+  risk: string;
+  status: "covered" | "partial" | "none";
+  note?: ReactNode;
+  /** Which policy covers it. */
+  policy?: string;
+}
+export interface CoverageMatrixProps extends BaseProps {
+  rows: CoverageRow[];
+  /** Accessible name and caption (default "Coverage"). */
+  label?: string;
+}
+export interface ClaimStep {
+  label: string;
+  date?: Date | string | number;
+  state: "done" | "current" | "todo" | "failed";
+  note?: ReactNode;
+}
+export interface ClaimTimelineProps extends BaseProps {
+  title: string;
+  /** Reference and insurer under the title. */
+  meta?: ReactNode;
+  amount?: number;
+  currency?: string;
+  steps: ClaimStep[];
+}
+export interface LifeDocument {
+  id: string;
+  title: string;
+  category?: string;
+  icon?: IconName;
+  holder?: string;
+  expires?: Date | string | number;
+  /** "PDF · 240 KB" */
+  meta?: string;
+}
+export interface DocumentListProps extends BaseProps {
+  documents: LifeDocument[];
+  /** The day to count expiry from (default: now). */
+  today?: Date | string | number;
+  /** Days ahead that count as expiring soon (default 60). */
+  soon?: number;
+  onOpen?: (id: string) => void;
+  /** Accessible name (default "Documents"). */
+  label?: string;
+}
+
+/* ── Connectors: services an assistant reads from and acts in ── */
+/** The state of a connected service. */
+export type ServiceState = "connected" | "syncing" | "error" | "paused" | "off";
+export interface ServiceMarkProps extends BaseProps {
+  /** The service's name: the accessible name, and the monogram when there is no icon or logo. */
+  name: string;
+  /** A brand logo (`brandGmail` …) or a line icon. */
+  icon?: IconName;
+  /** Your own logo (an `<img>` or `<svg>`) instead of the icon. */
+  logo?: ReactNode;
+  /** Letters for the monogram (default: the initials of `name`). */
+  monogram?: string;
+  /** 24, 36 (default) or 48 px. */
+  size?: "sm" | "md" | "lg";
+  tint?: Tint | "plain";
+  /** A dot in the corner with the state in words for screen readers. */
+  status?: ServiceState;
+  /** Hidden from screen readers when the name is written next to it. */
+  decorative?: boolean;
+}
+export interface Connector {
+  id: string;
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+  /** Letters shown when there is neither icon nor logo (default: the initials of `name`). */
+  monogram?: string;
+  tint?: Tint | "plain";
+  /** The group it is listed under ("Health & fitness", "Money" …). */
+  category: string;
+  description?: ReactNode;
+  /** `available` (default), `connected`, `error` (needs a reconnect) or `soon`. */
+  state?: "available" | "connected" | "error" | "soon";
+  /** A hint under the description: "Needs the iPhone app", "Import an export file". */
+  note?: ReactNode;
+  /** The connected account ("mara@gmail.com"). */
+  account?: string;
+}
+export interface ConnectorGalleryProps extends BaseProps {
+  connectors: Connector[];
+  /** Order of the groups; categories not listed follow in the order they appear. */
+  categories?: string[];
+  onConnect?: (id: string) => void;
+  /** Opens a connected (or failing) connector. */
+  onOpen?: (id: string) => void;
+  /** A search field and category chips above the grid (default true). */
+  filters?: boolean;
+  /** Accessible name (default "Connectors"). */
+  label?: string;
+}
+export interface SyncStatusProps extends BaseProps {
+  state: "synced" | "syncing" | "error" | "paused" | "never";
+  /** The last successful sync. */
+  last?: Date | string | number;
+  /** The next planned sync. */
+  next?: Date | string | number;
+  /** "Now" for the relative times; pass it so server and client render the same. */
+  now?: Date | string | number;
+  /** What the last sync brought: `{ label: "emails", value: 1204 }`. */
+  counts?: { label: string; value: number }[];
+  /** Why the sync failed. */
+  error?: ReactNode;
+  onSync?: () => void;
+  /** One line: state and time only. */
+  compact?: boolean;
+}
+export interface AgentAction {
+  id: string;
+  /** The service the action used. */
+  service?: { name: string; icon?: IconName; logo?: ReactNode };
+  /** Which agent did it ("Assistant", "Money agent"). */
+  agent?: string;
+  /** What happened, in a sentence: "Moved the dentist to Friday, 10:00". */
+  text: ReactNode;
+  at: Date | string | number;
+  /** `read` (looked something up), `act` (changed something) or `money`. */
+  kind?: "read" | "act" | "money";
+  /** `done` (default), `waiting` for your approval, `declined`, `undone` or `failed`. */
+  state?: "done" | "waiting" | "declined" | "undone" | "failed";
+  detail?: ReactNode;
+}
+export interface AgentActivityProps extends BaseProps {
+  items: AgentAction[];
+  /** "Now" for the day headings; pass it so server and client render the same. */
+  now?: Date | string | number;
+  /** Offers "Undo" on finished actions that changed something. */
+  onUndo?: (id: string) => void;
+  /** Opens an action that waits for your approval. */
+  onReview?: (id: string) => void;
+  /** Accessible name (default "Agent activity"). */
+  label?: string;
+}
+export interface ConnectionItem {
+  id: string;
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+  monogram?: string;
+  tint?: Tint | "plain";
+  /** The connected account ("mara@gmail.com", "Giro ••• 4410"). */
+  account?: ReactNode;
+  state: ServiceState;
+  /** How fresh the data is, shown as a compact `SyncStatus`. */
+  sync?: { state: SyncStatusProps["state"]; last?: Date | string | number };
+}
+export interface ConnectionListProps extends BaseProps {
+  items: ConnectionItem[];
+  /** "Now" for the relative times; pass it so server and client render the same. */
+  now?: Date | string | number;
+  onManage?: (id: string) => void;
+  /** Shown instead of "Manage" on connections in the `error` state. */
+  onReconnect?: (id: string) => void;
+  /** Accessible name (default "Connections"). */
+  label?: string;
+}
+
+/* ── Connected data: home, car, media, workouts, calls, bookings, golf, investments ── */
+/** The service a value comes from, shown as a small mark. */
+export interface ServiceRef {
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+}
+export interface DeviceTileProps extends BaseProps {
+  name: string;
+  room?: string;
+  icon?: IconName;
+  /** The kind sets the default icon and which controls appear. */
+  kind?: "switch" | "light" | "thermostat" | "vacuum" | "purifier" | "camera" | "lock" | "sensor";
+  /** On or off; with `onToggle` a switch. */
+  on?: boolean;
+  onToggle?: (on: boolean) => void;
+  /** The main reading: "21.5 °C", "Cleaning", "AQI 12". */
+  value?: ReactNode;
+  /** A line under the value: "Heating to 22 °C", "Kitchen · 18 m² left". */
+  status?: ReactNode;
+  /** Thermostat target in °C; with `onTarget` a − / + stepper (steps of `step`, default 0.5). */
+  target?: number;
+  onTarget?: (value: number) => void;
+  step?: number;
+  /** Battery in percent (vacuums, sensors, locks). */
+  battery?: number;
+  /** Quick actions: "Start", "Dock", "Boost". */
+  actions?: { label: string; icon?: IconName; onClick?: () => void }[];
+  /** The device does not answer. */
+  offline?: boolean;
+  service?: ServiceRef;
+}
+export interface VehicleCardProps extends BaseProps {
+  name: string;
+  model?: string;
+  /** Battery (or tank) in percent. */
+  battery: number;
+  /** Range in km. */
+  range?: number;
+  /** The charge limit in percent, marked on the bar. */
+  limit?: number;
+  charging?: "charging" | "complete" | "plugged" | "unplugged";
+  /** Charging power in kW while charging. */
+  power?: number;
+  /** When charging reaches the limit. */
+  until?: Date | string | number;
+  locked?: boolean;
+  /** Inside temperature in °C. */
+  inside?: number;
+  climateOn?: boolean;
+  location?: ReactNode;
+  onLock?: (locked: boolean) => void;
+  onClimate?: (on: boolean) => void;
+  service?: ServiceRef;
+}
+export interface NowPlayingProps extends BaseProps {
+  title: string;
+  artist?: string;
+  album?: string;
+  /** Cover art: an `<img>`. */
+  art?: ReactNode;
+  /** Position and length in seconds. */
+  position?: number;
+  duration?: number;
+  playing?: boolean;
+  /** Where it plays: "Living room speaker". */
+  device?: string;
+  onPlayPause?: () => void;
+  onNext?: () => void;
+  onPrevious?: () => void;
+  service?: ServiceRef;
+}
+export interface WorkoutCardProps extends BaseProps {
+  /** "Run", "Ride", "Strength", "Golf" … */
+  type: string;
+  icon?: IconName;
+  date: Date | string | number;
+  /** Minutes. */
+  duration: number;
+  /** Kilometres. */
+  distance?: number;
+  calories?: number;
+  /** Average heart rate in bpm. */
+  heartRate?: number;
+  /** Minutes in heart-rate zones 1–5. */
+  zones?: number[];
+  service?: ServiceRef;
+}
+export interface CallItem {
+  id: string;
+  name: string;
+  number?: string;
+  direction: "incoming" | "outgoing" | "missed";
+  at: Date | string | number;
+  /** Seconds. */
+  duration?: number;
+  /** What the call was about (an assistant's summary). */
+  summary?: ReactNode;
+}
+export interface CallLogProps extends BaseProps {
+  calls: CallItem[];
+  /** "Now" for the day headings. */
+  now?: Date | string | number;
+  onCall?: (id: string) => void;
+  onOpen?: (id: string) => void;
+  /** Accessible name (default "Calls"). */
+  label?: string;
+}
+export interface ReservationCardProps extends BaseProps {
+  kind: "stay" | "flight" | "train" | "ride" | "order" | "event";
+  title: string;
+  /** "Hotel Atlantic · 2 nights", "LH 2024 · Seat 14A". */
+  subtitle?: ReactNode;
+  start: Date | string | number;
+  end?: Date | string | number;
+  /** Where: an address, airport codes, a restaurant. */
+  place?: ReactNode;
+  /** Booking or order number. */
+  code?: string;
+  status?: "confirmed" | "pending" | "cancelled" | "delayed" | "onTheWay" | "delivered";
+  /** Extra words for the status: "+25 min", "Arrives 19:40". */
+  statusText?: string;
+  service?: ServiceRef;
+  actions?: ReactNode;
+}
+export interface GolfHole {
+  par: number;
+  strokes?: number;
+  putts?: number;
+}
+export interface ScorecardProps extends BaseProps {
+  course: string;
+  date?: Date | string | number;
+  /** 9 or 18 holes. */
+  holes: GolfHole[];
+  /** Tee and course rating: "Yellow · CR 71.2 / SR 128". */
+  tee?: string;
+  service?: ServiceRef;
+}
+export interface Holding {
+  id: string;
+  name: string;
+  /** Ticker or ISIN. */
+  symbol?: string;
+  value: number;
+  /** Change in percent over `period`. */
+  change?: number;
+  /** Share of the portfolio in percent. */
+  weight?: number;
+}
+export interface HoldingsListProps extends BaseProps {
+  holdings: Holding[];
+  currency?: string;
+  /** The period of `change` ("today", "1 year"). */
+  period?: string;
+  onSelect?: (id: string) => void;
+  /** Accessible name (default "Holdings"). */
+  label?: string;
+}
+
 export interface IconProps {
   name: IconName;
   /** Pixel size (default 16; 14 in chips and badges, 20 in navigation). */
@@ -3045,6 +3647,68 @@ export type TfTwoFactorSetupElement = TfElement<TwoFactorSetupProps>;
 export type TfColorFieldElement = TfElement<ColorFieldProps>;
 /** `<tf-qr-code>`: A QR code drawn as SVG and encoded on the device, so the text (a sign-in secret, an invite link) never goes to a service. */
 export type TfQrCodeElement = TfElement<QrCodeProps>;
+/** `<tf-habit-tracker>`: Habits with their last days as a row of marks: done, missed or no entry, today's mark a toggle. */
+export type TfHabitTrackerElement = TfElement<HabitTrackerProps>;
+/** `<tf-mood-picker>`: A five-step mood scale with faces and words, as a radio group. */
+export type TfMoodPickerElement = TfElement<MoodPickerProps>;
+/** `<tf-vital-tile>`: One health value with its healthy range: the value, a band with the normal zone and a marker, a status in words (in range, below, above) and an optional trend. */
+export type TfVitalTileElement = TfElement<VitalTileProps>;
+/** `<tf-activity-rings>`: Concentric progress rings for daily goals (move, exercise, stand, steps, water) with a legend. */
+export type TfActivityRingsElement = TfElement<ActivityRingsProps>;
+/** `<tf-sleep-chart>`: A night as sleep stages over time, one lane per stage (awake, REM, light, deep), with the time asleep and the time per stage. */
+export type TfSleepChartElement = TfElement<SleepChartProps>;
+/** `<tf-medication-list>`: Today's doses in order, each with its time, name, dose, a status in words and a "taken" button. */
+export type TfMedicationListElement = TfElement<MedicationListProps>;
+/** `<tf-journal-entry>`: A journal or diary entry: the date, the mood of the day, a title, the text and tags, with room for actions such as edit or share. */
+export type TfJournalEntryElement = TfElement<JournalEntryProps>;
+/** `<tf-goal-card>`: A goal with its progress toward a target, a due date, milestones and a note. */
+export type TfGoalCardElement = TfElement<GoalCardProps>;
+/** `<tf-insight-card>`: Something the assistant noticed: what, where it comes from, why it is shown and what to do. */
+export type TfInsightCardElement = TfElement<InsightCardProps>;
+/** `<tf-consent-list>`: What each connected source lets the assistant read or do: one card per source with its purpose, last use and a switch per scope, plus "Revoke access". */
+export type TfConsentListElement = TfElement<ConsentListProps>;
+/** `<tf-budget-list>`: Spending per category against its limit: spent and limit, a bar, and what is left or over in words. */
+export type TfBudgetListElement = TfElement<BudgetListProps>;
+/** `<tf-subscription-list>`: Recurring payments with their next charge, trial and cancelled states, and what they cost together a month and a year. */
+export type TfSubscriptionListElement = TfElement<SubscriptionListProps>;
+/** `<tf-net-worth-card>`: What you own minus what you owe: the total, its change and trend, and the assets and liabilities behind it. */
+export type TfNetWorthCardElement = TfElement<NetWorthCardProps>;
+/** `<tf-deadline-list>`: Bills, renewals, notice periods and expiring documents in date order, each with "Today", "In 12 days" or "Overdue by 3 days" in words. */
+export type TfDeadlineListElement = TfElement<DeadlineListProps>;
+/** `<tf-policy-card>`: One insurance policy: type and insurer, sum insured, premium, deductible, policy number, renewal date and status (active, pending, expiring, lapsed), with room for actions. */
+export type TfPolicyCardElement = TfElement<PolicyCardProps>;
+/** `<tf-coverage-matrix>`: Life risks and whether a policy covers them: covered, partly or not covered, with the policy and a note, and a count of each above the table. */
+export type TfCoverageMatrixElement = TfElement<CoverageMatrixProps>;
+/** `<tf-claim-timeline>`: An insurance claim from report to payout: steps that are done, current, still to come or failed, with dates and notes, and the amount claimed. */
+export type TfClaimTimelineElement = TfElement<ClaimTimelineProps>;
+/** `<tf-document-list>`: Important papers (IDs, contracts, policies, certificates) with category, holder and expiry: "Expired", "Expires in 19 days" or "Valid until May 2031". */
+export type TfDocumentListElement = TfElement<DocumentListProps>;
+/** `<tf-service-mark>`: A connected service's mark: its brand logo from the icon library (brandGmail, brandTesla …), your own logo, or a monogram for a service without a logo ("KS" for a local nursery). */
+export type TfServiceMarkElement = TfElement<ServiceMarkProps>;
+/** `<tf-connector-gallery>`: Every service an assistant can connect to, grouped by category, with a search field and category chips. */
+export type TfConnectorGalleryElement = TfElement<ConnectorGalleryProps>;
+/** `<tf-connection-list>`: The services you are connected to: mark with state dot, the connected account, how fresh the data is (a compact SyncStatus) and Manage, or Reconnect for a connection that needs attention. */
+export type TfConnectionListElement = TfElement<ConnectionListProps>;
+/** `<tf-sync-status>`: When a connected service last synced, in words ("Synced 6 minutes ago"), when it syncs next, what the last sync brought ("1,204 emails") and why a sync failed, with "Sync now". */
+export type TfSyncStatusElement = TfElement<SyncStatusProps>;
+/** `<tf-agent-activity>`: What agents did with your connected services, newest first and grouped by day: each action with its service, agent and time, whether it read something, changed something or touched money, and its state (waiting for you, declined, undone, fa */
+export type TfAgentActivityElement = TfElement<AgentActivityProps>;
+/** `<tf-device-tile>`: A smart-home device (from Google Home, Apple Home, SmartThings, tado°, Dyson, eufy, Dreame …): its reading, its state and the controls its kind needs. */
+export type TfDeviceTileElement = TfElement<DeviceTileProps>;
+/** `<tf-vehicle-card>`: An electric car: charge in percent with the limit marked on the bar, range, charging state with power and when it is done, lock and climate as buttons, the inside temperature and where it is. */
+export type TfVehicleCardElement = TfElement<VehicleCardProps>;
+/** `<tf-now-playing>`: What is playing (Spotify, a speaker, a podcast app): cover, title and artist, the device, progress with times and previous / play-pause / next. */
+export type TfNowPlayingElement = TfElement<NowPlayingProps>;
+/** `<tf-workout-card>`: One workout from Apple Fitness, Strava, Garmin or a golf app: type, time, duration, distance, calories, average heart rate and minutes in each heart-rate zone as a bar with a legend in words. */
+export type TfWorkoutCardElement = TfElement<WorkoutCardProps>;
+/** `<tf-call-log>`: Your calls grouped by day: incoming, outgoing and missed with time and length, and what the call was about when an assistant summarised it. */
+export type TfCallLogElement = TfElement<CallLogProps>;
+/** `<tf-reservation-card>`: A booking or order: a stay, flight, train, ride, delivery or ticket with its dates, place, booking number and status (confirmed, pending, delayed, on the way, delivered, cancelled) plus a note like "+25 min". */
+export type TfReservationCardElement = TfElement<ReservationCardProps>;
+/** `<tf-scorecard>`: A round of golf: par and strokes for each hole in the usual marks (circle for a birdie, double circle for an eagle, square for a bogey, double square for worse), putts, Out, In and the total against par. */
+export type TfScorecardElement = TfElement<ScorecardProps>;
+/** `<tf-holdings-list>`: Positions in a portfolio: name and ISIN or ticker, value, change over a period (arrow, sign and colour) and the share of the portfolio as a bar. */
+export type TfHoldingsListElement = TfElement<HoldingsListProps>;
 /** `<tf-agent-card>`: One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails). */
 export type TfAgentCardElement = TfElement<AgentCardProps>;
 /** `<tf-agent-details>`: The AgentDetails component as a custom element. */
@@ -3459,6 +4123,37 @@ declare global {
     "tf-two-factor-setup": TfTwoFactorSetupElement;
     "tf-color-field": TfColorFieldElement;
     "tf-qr-code": TfQrCodeElement;
+    "tf-habit-tracker": TfHabitTrackerElement;
+    "tf-mood-picker": TfMoodPickerElement;
+    "tf-vital-tile": TfVitalTileElement;
+    "tf-activity-rings": TfActivityRingsElement;
+    "tf-sleep-chart": TfSleepChartElement;
+    "tf-medication-list": TfMedicationListElement;
+    "tf-journal-entry": TfJournalEntryElement;
+    "tf-goal-card": TfGoalCardElement;
+    "tf-insight-card": TfInsightCardElement;
+    "tf-consent-list": TfConsentListElement;
+    "tf-budget-list": TfBudgetListElement;
+    "tf-subscription-list": TfSubscriptionListElement;
+    "tf-net-worth-card": TfNetWorthCardElement;
+    "tf-deadline-list": TfDeadlineListElement;
+    "tf-policy-card": TfPolicyCardElement;
+    "tf-coverage-matrix": TfCoverageMatrixElement;
+    "tf-claim-timeline": TfClaimTimelineElement;
+    "tf-document-list": TfDocumentListElement;
+    "tf-service-mark": TfServiceMarkElement;
+    "tf-connector-gallery": TfConnectorGalleryElement;
+    "tf-connection-list": TfConnectionListElement;
+    "tf-sync-status": TfSyncStatusElement;
+    "tf-agent-activity": TfAgentActivityElement;
+    "tf-device-tile": TfDeviceTileElement;
+    "tf-vehicle-card": TfVehicleCardElement;
+    "tf-now-playing": TfNowPlayingElement;
+    "tf-workout-card": TfWorkoutCardElement;
+    "tf-call-log": TfCallLogElement;
+    "tf-reservation-card": TfReservationCardElement;
+    "tf-scorecard": TfScorecardElement;
+    "tf-holdings-list": TfHoldingsListElement;
     "tf-agent-card": TfAgentCardElement;
     "tf-agent-details": TfAgentDetailsElement;
     "tf-chat-list": TfChatListElement;