@leabankab/component-library 7.3.0 → 8.1.0

package/dist/components/animations/icons/status-icon.d.ts

@@ -4,6 +4,10 @@ type StatusIconProps = {
     status: StatusIconStatus;
     /** Rendered size in px. */
     size?: number;
+    /**
+     * Colour of the spinner and of the filled check.
+     * @default "primary"
+     */
     color?: AnimationColor;
     /**
      * Accessible name; defaults to the translated label for the current status in

package/dist/components/animations/illustrations/check-animation.d.ts

@@ -1,6 +1,14 @@
 import { AnimationColor, AnimationSize } from '../shared';
 type CheckAnimationProps = {
+    /**
+     * `"sm"` is 90px, `"lg"` 150px.
+     * @default "lg"
+     */
     size?: AnimationSize;
+    /**
+     * Colour of the badge and its halo.
+     * @default "primary"
+     */
     color?: AnimationColor;
     /**
      * Accessible name for the illustration; defaults to the translated word for

package/dist/components/animations/illustrations/pulse-animation.d.ts

@@ -1,5 +1,9 @@
 import { AnimationSize } from '../shared';
 type PulseAnimationProps = {
+    /**
+     * `"sm"` is 90px, `"lg"` 150px.
+     * @default "lg"
+     */
     size?: AnimationSize;
     /**
      * Accessible name for the spinner; defaults to the translated word for
@@ -8,5 +12,5 @@ type PulseAnimationProps = {
      */
     label?: string;
 };
-export declare const PulseAnimation: ({ size, label, }: PulseAnimationProps) => import("react").JSX.Element;
+export declare const PulseAnimation: ({ size, label }: PulseAnimationProps) => import("react").JSX.Element;
 export {};

package/dist/components/animations/illustrations/status-animation.d.ts

@@ -2,8 +2,15 @@ import { AnimationColor, AnimationSize } from '../shared';
 type StatusAnimationProps = {
     /** While `true`, shows the pulse; when it flips to `false`, transitions to the check. */
     loading: boolean;
+    /**
+     * `"sm"` is 90px, `"lg"` 150px.
+     * @default "lg"
+     */
     size?: AnimationSize;
-    /** Colour of the resulting check (and its halo). */
+    /**
+     * Colour of the resulting check (and its halo).
+     * @default "primary"
+     */
     color?: AnimationColor;
     /**
      * Minimum time (ms) the pulse stays visible once mounted in the loading

package/dist/components/animations/shared.d.ts

@@ -1,31 +1,7 @@
-import { SxProps, Theme } from '@mui/material';
 import { ReactNode } from 'react';
-export type AnimationSize = "small" | "large";
-export type AnimationColor = "purple" | "green";
-export declare const colorMap: Record<AnimationColor, {
-    base: string;
-    contrast: string;
-}>;
-export declare const visuallyHidden: {
-    readonly position: "absolute";
-    readonly width: "1px";
-    readonly height: "1px";
-    readonly overflow: "hidden";
-    readonly clip: "rect(0 0 0 0)";
-    readonly whiteSpace: "nowrap";
-};
-export declare const reducedMotionOverride: {
-    readonly "@media (prefers-reduced-motion: reduce)": {
-        readonly animation: "none";
-    };
-};
-export declare const reducedMotionHidden: {
-    readonly "@media (prefers-reduced-motion: reduce)": {
-        readonly animation: "none";
-        readonly opacity: 0;
-    };
-};
-export declare const illustrationBadgeShadow = "rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 30px 60px -20px, rgba(0, 0, 0, 0.25) 0px 18px 36px -18px";
+import { ColorRoles } from '../color-roles';
+export type AnimationSize = "sm" | "lg";
+export type AnimationColor = ColorRoles<"primary" | "tertiary">;
 export type ConfettiParticle = {
     id: number;
     x: number;
@@ -55,13 +31,11 @@ type ConfettiParticlesProps = {
 };
 export declare const ConfettiParticles: ({ particles, variant, delay, duration, useCurrentColor, }: ConfettiParticlesProps) => import("react").JSX.Element[];
 type AnimationBadgeProps = {
+    /** Diameter in px. */
     size: number;
-    base: string;
-    contrast: string;
     iconSize: number;
-    boxShadow?: string;
-    sx?: SxProps<Theme>;
+    className?: string;
     children?: ReactNode;
 };
-export declare const AnimationBadge: ({ size, base, contrast, iconSize, boxShadow, sx, children, }: AnimationBadgeProps) => import("react").JSX.Element;
+export declare const AnimationBadge: ({ size, iconSize, className, children, }: AnimationBadgeProps) => import("react").JSX.Element;
 export {};

package/dist/components/animations/spinner.d.ts

@@ -0,0 +1,18 @@
+type SpinnerProps = {
+    /** Diameter in px. */
+    size: number;
+    /** Stroke width, in the units of a 44px circle. */
+    thickness?: number;
+    /**
+     * Accessible name. With one, the spinner is a `progressbar`; without, it is
+     * hidden from assistive tech and its parent says what is loading.
+     */
+    label?: string;
+    className?: string;
+};
+/**
+ * An indeterminate spinner: an arc in the current colour that turns at a
+ * constant speed. Internal to the animations.
+ */
+export declare const Spinner: ({ size, thickness, label, className, }: SpinnerProps) => import("react").JSX.Element;
+export {};

package/dist/components/animations/use-animation-labels.d.ts

@@ -1,6 +1 @@
-/**
- * Translated accessible names for the status animations (`StatusIcon`,
- * `StatusAnimation`, `CheckAnimation`, `PulseAnimation`). Each component takes
- * a label prop so a consumer can say something more specific than "loading".
- */
 export declare const useAnimationLabels: () => Record<"pending" | "loading" | "done" | "confirmed", string>;

package/dist/components/buttons/action-button.d.ts

@@ -1,18 +1,16 @@
-import { ButtonProps as MuiButtonProps } from '@mui/material';
-import { ElementType } from 'react';
-type ActionButtonProps<C extends ElementType = "button"> = Omit<MuiButtonProps<C>, "variant"> & {
-    component?: C;
-};
+import { ButtonRootProps } from './button-base';
+export type ActionButtonProps = Omit<ButtonRootProps, "loading">;
 /**
  * A pill-shaped call-to-action button with a built-in arrow icon.
  *
  * Used for primary navigation actions on the website, such as hero sections
- * and landing pages. Supports polymorphic rendering:
+ * and landing pages. To render a link, pass it through `render`; an element
+ * with `href` or `to` is rendered as a real link, without button semantics:
  *
  * ```tsx
- * <ActionButton component={Link} to="/loans">Se våra lån</ActionButton>
- * <ActionButton component={NextLink} href="/loans">Se våra lån</ActionButton>
+ * <ActionButton render={<a href="/lan" />}>Se våra lån</ActionButton>
+ * <ActionButton render={<NextLink href="/lan" />}>Se våra lån</ActionButton>
+ * <ActionButton render={<RouterLink to="/lan" />}>Se våra lån</ActionButton>
  * ```
  */
-export declare const ActionButton: ({ children, ...rest }: ActionButtonProps) => import("react").JSX.Element;
-export {};
+export declare function ActionButton({ children, className, ...rest }: ActionButtonProps): import("react").JSX.Element;

package/dist/components/buttons/button-base.d.ts

@@ -1,8 +1,20 @@
 import { Button as BaseButton } from '@base-ui/react/button';
+import { Ref } from 'react';
+import { ColorRoles } from '../color-roles';
 export type ButtonVariant = "solid" | "outline" | "ghost";
-export type ButtonColor = "accent" | "neutral" | "danger";
+export type ButtonColor = ColorRoles<"primary" | "secondary" | "error">;
 export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonBaseProps = Omit<BaseButton.Props, "color"> & {
+export type ButtonRootProps = Omit<BaseButton.Props, "color" | "ref"> & {
+    /**
+     * Shows the busy state: the button is disabled, keeps its colour at reduced
+     * opacity and sets `aria-busy`.
+     * @default false
+     */
+    loading?: boolean;
+    /** The rendered element: the `<button>`, or the link passed to `render`. */
+    ref?: Ref<HTMLElement>;
+};
+export type ButtonBaseProps = ButtonRootProps & {
     /**
      * Visual weight.
      * - `"solid"` — filled, for the main action.
@@ -12,23 +24,25 @@ export type ButtonBaseProps = Omit<BaseButton.Props, "color"> & {
      */
     variant?: ButtonVariant;
     /**
-     * Colour scheme. `"danger"` is for destructive actions.
-     * @default "accent"
+     * Colour scheme: `"primary"` is the brand purple, `"secondary"` the
+     * near-black, `"error"` is for destructive actions.
+     * @default "primary"
      */
     color?: ButtonColor;
     /**
      * @default "md"
      */
     size?: ButtonSize;
-    /**
-     * Shows the busy state: the button is disabled, keeps its colour at reduced
-     * opacity and sets `aria-busy`.
-     * @default false
-     */
-    loading?: boolean;
 };
+/**
+ * A button, or the link passed to `render`, with the disabled and busy states
+ * wired. It has no look of its own: the class comes from the caller. Internal
+ * — not exported from the package.
+ */
+export declare function ButtonRoot({ loading, disabled, className, render, nativeButton, focusableWhenDisabled, ref, ...rest }: ButtonRootProps): import("react").JSX.Element;
 /**
  * The root shared by `Button`, `IconButton`, `CloseButton` and
- * `DownloadTrigger`. Internal — not exported from the package.
+ * `DownloadTrigger`: `ButtonRoot` with the button look. Internal — not
+ * exported from the package.
  */
-export declare const ButtonBase: import('react').ForwardRefExoticComponent<Omit<ButtonBaseProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export declare function ButtonBase({ variant, color, size, className, ...rest }: ButtonBaseProps): import("react").JSX.Element;

package/dist/components/buttons/button.d.ts

@@ -15,7 +15,7 @@ export type ButtonProps = ButtonBaseProps & {
 /**
  * A button built on Base UI's `Button` primitive and styled with Lea's design
  * tokens. Pick a `variant` (`solid`, `outline`, `ghost`), a `color`
- * (`accent`, `neutral`, `danger`) and a `size` (`sm`, `md`, `lg`).
+ * (`primary`, `secondary`, `error`) and a `size` (`sm`, `md`, `lg`).
  *
  * ```tsx
  * <Button variant="outline" startIcon={<Plus aria-hidden />}>Add</Button>
@@ -33,4 +33,4 @@ export type ButtonProps = ButtonBaseProps & {
  *
  * For a link inside running text, use `Link` instead.
  */
-export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export declare function Button({ startIcon, endIcon, loading, loadingLabel, children, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/components/buttons/close-button.d.ts

@@ -11,4 +11,4 @@ export type CloseButtonProps = Omit<ButtonBaseProps, "children" | "aria-label" |
  * <CloseButton onClick={() => setOpen(false)} />
  * ```
  */
-export declare const CloseButton: import('react').ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export declare function CloseButton({ label, variant, color, ...rest }: CloseButtonProps): import("react").JSX.Element;

package/dist/components/buttons/icon-button.d.ts

@@ -26,17 +26,5 @@ export type IconButtonProps = Omit<ButtonBaseProps, "children" | "aria-label" |
  * </IconButton>
  * ```
  */
-export declare const IconButton: import('react').ForwardRefExoticComponent<(Omit<Omit<ButtonBaseProps, "children" | "aria-label" | "aria-labelledby"> & {
-    "aria-label": string;
-    "aria-labelledby"?: never;
-} & {
-    /** The icon. Mark it `aria-hidden` — the name comes from `aria-label`. */
-    children: ReactNode;
-}, "ref"> | Omit<Omit<ButtonBaseProps, "children" | "aria-label" | "aria-labelledby"> & {
-    "aria-labelledby": string;
-    "aria-label"?: never;
-} & {
-    /** The icon. Mark it `aria-hidden` — the name comes from `aria-label`. */
-    children: ReactNode;
-}, "ref">) & import('react').RefAttributes<HTMLElement>>;
+export declare function IconButton({ loading, className, children, ...rest }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/buttons/skip-link.d.ts

@@ -1,6 +1,23 @@
-type SkipLinkProps = {
+import { ReactNode } from 'react';
+import { ButtonBaseProps } from './button-base';
+export type SkipLinkProps = Pick<ButtonBaseProps, "className" | "style"> & {
+    /** The id of the main content, as a fragment: `#main`. */
     href: string;
-    children: React.ReactNode;
+    children: ReactNode;
 };
-export default function SkipLink({ href, children }: SkipLinkProps): import("react").JSX.Element;
-export {};
+/**
+ * A link for keyboard users to jump past the header to the main content. It
+ * stays hidden until it receives focus, so place it first in the page and it
+ * is the first thing the Tab key reaches:
+ *
+ * ```tsx
+ * <body>
+ *   <SkipLink href="#main">Hopp til hovedinnhold</SkipLink>
+ *   <AppHeader />
+ *   <main id="main" tabIndex={-1}>…</main>
+ * </body>
+ * ```
+ *
+ * It is positioned against the page, so no ancestor should be positioned.
+ */
+export declare function SkipLink({ href, children, className, style }: SkipLinkProps): import("react").JSX.Element;

package/dist/components/color-roles.d.ts

@@ -0,0 +1,8 @@
+import { ColorRole } from '../theme/token-types';
+/**
+ * A component's own subset of `ColorRole`:
+ * `ColorRoles<"primary" | "secondary" | "error">`. A name outside the shared
+ * vocabulary is a type error, where `Extract` would quietly drop it. Internal:
+ * not exported from the package.
+ */
+export type ColorRoles<Role extends ColorRole> = Role;

package/dist/components/data-display/card.d.ts

@@ -1,6 +1,56 @@
-import { CardProps as MuiCardProps } from '@mui/material';
+import { useRender } from '@base-ui/react/use-render';
+import { Ref } from 'react';
+import { ColorRoles } from '../color-roles';
+export type CardColor = ColorRoles<"primary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error">;
+export type CardVariant = "outlined" | "filled";
+export type CardProps = Omit<useRender.ComponentProps<"div">, "ref" | "color"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * A tint for the card. Left out, the card is white.
+     * - A brand tint: `"primary"` (purple), `"tertiary"` (teal) or `"neutral"`
+     *   (grey).
+     * - A status: `"success"` (teal), `"info"` (blue), `"warning"` (amber) or
+     *   `"error"` (red).
+     */
+    color?: CardColor;
+    /**
+     * With a 1px border, or without one. The card keeps its size either way, so
+     * the two line up in a row.
+     * @default "outlined"
+     */
+    variant?: CardVariant;
+};
 /**
- * A surface container that wraps MUI `Card` with Lea's design tokens for
- * radius, elevation, and colours. Use it to group related content on a page.
+ * A flat surface that groups related content: white, with a 1px border and
+ * rounded corners. It has no padding of its own, so an image or a divider can
+ * run edge to edge; put text in `CardContent`.
+ *
+ * Set `color` for a tint, and `variant="filled"` to drop the border:
+ *
+ * ```tsx
+ * <Card color="primary" variant="filled">…</Card>
+ * ```
+ *
+ * ```tsx
+ * <Card>
+ *   <CardContent>
+ *     <Text textStyle="heading-sm">Forbrukslån</Text>
+ *     <Text color="text.subtle">150 000 kr over 10 år</Text>
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * Renders a `div`; pass `render` for another element, e.g.
+ * `render={<section />}` or `render={<li />}`.
  */
-export declare const Card: ({ ...props }: MuiCardProps) => import("react").JSX.Element;
+export declare function Card({ render, ref, className, color, variant, ...rest }: CardProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export type CardContentProps = Omit<useRender.ComponentProps<"div">, "ref"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+};
+/**
+ * The padded area of a `Card`. A card can hold several, separated by whatever
+ * sits between them.
+ */
+export declare function CardContent({ render, ref, className, ...rest }: CardContentProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/data-display/chip.d.ts

@@ -1,11 +1,53 @@
-import { ChipProps as MuiChipProps } from '@mui/material';
-export type ChipProps = MuiChipProps;
+import { ComponentProps, MouseEvent, ReactNode } from 'react';
+import { ColorRoles } from '../color-roles';
+export type ChipColor = ColorRoles<"primary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error">;
+export type ChipVariant = "filled" | "outlined";
+export type ChipSize = "sm" | "md";
+export type ChipProps = Omit<ComponentProps<"span">, "children" | "color"> & {
+    /** The text of the chip. */
+    label: ReactNode;
+    /**
+     * What the chip stands for.
+     * - A tag without a status: `"primary"` (purple), `"tertiary"` (teal) or
+     *   `"neutral"` (grey).
+     * - A status: `"success"` (teal), `"info"` (blue), `"warning"` (amber) or
+     *   `"error"` (red).
+     * @default "primary"
+     */
+    color?: ChipColor;
+    /**
+     * Tinted fill, or a border on a transparent background.
+     * @default "filled"
+     */
+    variant?: ChipVariant;
+    /**
+     * @default "md"
+     */
+    size?: ChipSize;
+    /** Icon before the label. Mark a decorative icon `aria-hidden`. */
+    icon?: ReactNode;
+    /**
+     * Shows a remove button after the label and is called when it is pressed.
+     * The button is named in the `LeaProvider` language and includes the label,
+     * so a row of chips reads unambiguously: "Fjern Medlånetaker".
+     */
+    onDelete?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible name of the remove button, when the default does not fit. */
+    deleteLabel?: string;
+    /** Dims the chip and disables its remove button. */
+    disabled?: boolean;
+};
 /**
- * A compact label for tags, statuses, or filter selections, styled with Lea's
- * design tokens on top of MUI `Chip`.
+ * A compact label for tags, statuses, or filter selections.
  *
- * With `onDelete`, the delete affordance is named in the `LeaProvider` language
- * and includes the chip's own label, so a row of chips reads unambiguously.
- * Pass `deleteIcon` to supply a different glyph and name.
+ * ```tsx
+ * <Chip label="Medlånetaker" />
+ * <Chip label="Verifisert" color="success" icon={<CircleCheck size={16} aria-hidden />} />
+ * <Chip label="Oslo" variant="outlined" onDelete={() => remove("oslo")} />
+ * ```
+ *
+ * The chip itself is not interactive; only its remove button is. Inside a
+ * widget that moves focus itself, `tabIndex={-1}` takes the chip and its
+ * remove button out of the tab order.
  */
-export declare const Chip: ({ label, onDelete, deleteIcon, ...rest }: ChipProps) => import("react").JSX.Element;
+export declare function Chip({ label, color, variant, size, icon, onDelete, deleteLabel, disabled, className, tabIndex, ...rest }: ChipProps): import("react").JSX.Element;

package/dist/components/data-display/data-field.d.ts

@@ -1,12 +1,23 @@
-import { BoxProps } from '@mui/material';
-import { ReactNode } from 'react';
-export type DataFieldProps = Omit<BoxProps, "children"> & {
+import { ComponentProps, ReactNode } from 'react';
+export type DataFieldProps = Omit<ComponentProps<"div">, "children"> & {
     label: ReactNode;
     value: ReactNode;
+    /**
+     * Draws a line under the row, for stacking several into a summary.
+     * @default true
+     */
     divider?: boolean;
 };
 /**
  * A single label/value row for presenting read-only details, with an optional
  * bottom divider so several fields can be stacked into a summary list.
+ *
+ * ```tsx
+ * <DataField label="Lånebeløp" value="150 000 kr" />
+ * <DataField label="Månedsbeløp" value="1 316 kr" divider={false} />
+ * ```
+ *
+ * Text passed as `label` or `value` is set in the label and value styles. Any
+ * other element is rendered as it is, for a side that needs richer content.
  */
-export declare const DataField: ({ label, value, divider, sx, ...rest }: DataFieldProps) => import("react").JSX.Element;
+export declare const DataField: ({ label, value, divider, className, ...rest }: DataFieldProps) => import("react").JSX.Element;

package/dist/components/data-display/tooltip.d.ts

@@ -1,37 +1,89 @@
-import { TooltipProps as MuiTooltipProps } from '@mui/material';
-import { SxProps, Theme } from '@mui/material/styles';
-import { ReactElement, ReactNode } from 'react';
-import { TooltipSurfaceVariant, TooltipTriggerVariant } from '../../theme/components/tooltip.theme';
-export type { TooltipSurfaceVariant, TooltipTriggerVariant };
-type WrappedTooltipProps = Omit<MuiTooltipProps, "children"> & {
-    children: ReactElement;
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+export type TooltipTriggerVariant = "icon" | "filled" | "outlined";
+export type TooltipSurfaceVariant = "light" | "dark";
+export type TooltipOpenOn = "hover" | "click";
+type Side = "top" | "bottom" | "left" | "right";
+export type TooltipPlacement = Side | `${Side}-start` | `${Side}-end`;
+type SharedProps = {
+    /** What the tooltip says. Nothing is shown while it is empty. */
+    title: ReactNode;
+    /**
+     * How the tooltip opens.
+     * - `"hover"`: on mouse hover and on keyboard focus. It does not open on
+     *   touch, so use it for a hint the control works without.
+     * - `"click"`: on click, tap, Enter or Space, and on mouse hover too. It
+     *   stays open until dismissed, so use it for information people need.
+     *
+     * Defaults to `"hover"` around `children` and to `"click"` for the
+     * built-in trigger.
+     */
+    openOn?: TooltipOpenOn;
+    /**
+     * Where the tooltip sits against its trigger. It moves to another side when
+     * there is no room.
+     * @default "top"
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Colours of the bubble: black text on white, or white text on black.
+     * @default "light"
+     */
+    surfaceVariant?: TooltipSurfaceVariant;
+};
+type WrappedTooltipProps = SharedProps & {
+    /**
+     * The trigger: one element that takes a `ref` and spreads its props, such
+     * as a `Button`. It needs an accessible name of its own.
+     */
+    children: ReactElement<TriggerElementProps>;
     ariaLabel?: never;
     triggerIcon?: never;
     triggerVariant?: never;
-    triggerSx?: never;
-    surfaceVariant?: TooltipSurfaceVariant;
+    className?: never;
+    style?: never;
 };
-type TriggerTooltipProps = Omit<MuiTooltipProps, "children"> & {
+type TriggerTooltipProps = SharedProps & {
     children?: never;
     /** Accessible name for the built-in trigger button. */
     ariaLabel: string;
-    /** Trigger icon or content. Defaults to `InfoIcon`. */
+    /** Trigger icon or content. Defaults to an "i" in a circle. */
     triggerIcon?: ReactNode;
-    /** Visual style of the built-in trigger button. @default "icon" */
+    /**
+     * Visual style of the built-in trigger button.
+     * @default "icon"
+     */
     triggerVariant?: TooltipTriggerVariant;
-    /** Optional `sx` override for the built-in trigger button. */
-    triggerSx?: SxProps<Theme>;
-    /** Tooltip bubble colour treatment. @default "light" */
-    surfaceVariant?: TooltipSurfaceVariant;
+    /** Class on the built-in trigger button. */
+    className?: string;
+    /** Inline style on the built-in trigger button. */
+    style?: CSSProperties;
 };
 export type TooltipProps = WrappedTooltipProps | TriggerTooltipProps;
+type TriggerElementProps = {
+    id?: string;
+    "aria-describedby"?: string;
+};
 /**
- * Tooltip wrapper around MUI's `Tooltip`.
+ * A small bubble of text anchored to a trigger, on Base UI's `Tooltip` and
+ * `Popover`.
  *
  * Use it two ways:
- * - **Wrapped child:** pass `children` to decorate any trigger you already have.
- * - **Built-in trigger:** omit `children` and pass `ariaLabel`; a small trigger
- *   button is rendered for you, styled by `triggerVariant` and optionally
- *   extended via `triggerSx`.
+ * - **Around a child:** pass `children` to add a hint to a control you already
+ *   have. It opens on hover and keyboard focus and describes the control.
+ * - **Built-in trigger:** omit `children` and pass `ariaLabel`; a small info
+ *   button is rendered for you. It opens on click, so it works on touch.
+ *
+ * ```tsx
+ * <Tooltip title="Kopier kontonummer">
+ *   <IconButton aria-label="Kopier">…</IconButton>
+ * </Tooltip>
+ *
+ * <Tooltip title="Beløpet du betaler hver måned." ariaLabel="Mer informasjon" />
+ * ```
+ *
+ * `openOn` switches either one: `openOn="click"` around a button makes it a
+ * disclosure, and `openOn="hover"` makes the info button a plain hint. On
+ * hover the trigger must work without the tooltip, since touch never shows it.
  */
-export declare const Tooltip: ({ title, placement, children, ariaLabel, triggerIcon, triggerVariant, triggerSx, surfaceVariant, slotProps, id: suppliedId, ...rest }: TooltipProps) => import("react").JSX.Element;
+export declare function Tooltip({ title, openOn, placement, surfaceVariant, children, ariaLabel, triggerIcon, triggerVariant, className, style, }: TooltipProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export {};

package/dist/components/feedback/alert-parts.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithRef, ReactNode, SyntheticEvent } from 'react';
-export type AlertSeverity = "success" | "info" | "warning" | "error";
-export type AlertColor = AlertSeverity | "purple" | "grey";
+import { ColorRoles } from '../color-roles';
+export type AlertSeverity = ColorRoles<"success" | "info" | "warning" | "error">;
+export type AlertColor = AlertSeverity | ColorRoles<"primary" | "neutral">;
 export type AlertVariant = "standard" | "filled" | "outlined";
 export type AlertSize = "sm" | "lg";
 export type AlertProps = Omit<ComponentPropsWithRef<"div">, "color"> & {
@@ -10,8 +11,8 @@ export type AlertProps = Omit<ComponentPropsWithRef<"div">, "color"> & {
      */
     severity?: AlertSeverity;
     /**
-     * Colour scheme. Defaults to the colour of `severity`. `"purple"` and
-     * `"grey"` carry no status meaning.
+     * Colour scheme. Defaults to the colour of `severity`. `"primary"` (the
+     * brand purple) and `"neutral"` (grey) carry no status meaning.
      */
     color?: AlertColor;
     /**
@@ -41,12 +42,10 @@ export type AlertProps = Omit<ComponentPropsWithRef<"div">, "color"> & {
 export declare function resolveAlert({ severity, color, variant, size, icon, action, onClose, closeLabel, role, children, ...rest }: AlertProps): {
     rootProps: {
         role: import('react').AriaRole;
-        "data-color": "purple" | "grey" | "success" | "error" | "info" | "warning";
+        "data-color": AlertColor;
         "data-variant": AlertVariant;
         "data-size": AlertSize;
-        content?: string | undefined | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
-        hidden?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import('react').CSSProperties | undefined;
         title?: string | undefined | undefined;
@@ -63,19 +62,21 @@ export declare function resolveAlert({ severity, color, variant, size, icon, act
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        className?: string | undefined | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
         prefix?: string | undefined | undefined;