@stackone/malachite 2.33.1 → 2.34.0

package/dist/components/Surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport { paintOnChild } from './asChild';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isRenderableNode } from './renderableNode';\nimport {\n    FOREGROUND_RESET,\n    SELECTED_ROW_ACCENT,\n    SELECTED_ROW_BACKGROUND,\n    SELECTED_ROW_FOREGROUND,\n    SELECTED_TEXT_CONTEXT,\n} from './selectedRow';\n\nexport interface SurfaceProps {\n    children?: React.ReactNode;\n    padding?: boolean;\n    /**\n     * Content overflow. Defaults to `hidden` so children are clipped to the rounded\n     * corners. Use `clip` to keep the rounded clipping WITHOUT creating a scroll\n     * container — so a `position: sticky` descendant still pins (unlike `hidden`,\n     * which traps it). `visible` disables clipping entirely.\n     */\n    overflow?: 'hidden' | 'visible' | 'clip';\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\ninterface SurfaceRowChromeProps {\n    children?: React.ReactNode;\n    /** Renders a bottom divider — omit on the last row in a Surface. */\n    divider?: boolean;\n    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */\n    disabled?: boolean;\n    /** Announces the row as selected — `aria-checked` under a `radio`/`checkbox` role,\n     *  `aria-current` otherwise — and paints `Table`'s selected treatment unless `selection`\n     *  says not to. */\n    selected?: boolean;\n    /** How a `selected` row shows it. `highlight` paints the treatment; `announce` leaves the\n     *  visual to a control inside the row and only sets the ARIA state. Defaults to `announce`\n     *  under `role=\"checkbox\"` and `highlight` otherwise. */\n    selection?: 'highlight' | 'announce';\n    /**\n     * Tints the whole row by what it reports. `muted` is a row whose subject is inactive —\n     * not disabled: it stays interactive. `success` and `error` are for a row that carries\n     * an outcome, where the result belongs to the whole line rather than to one cell in it.\n     */\n    tone?: 'default' | 'muted' | 'success' | 'error';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/** Stays an interface under its original name: a consumer may `extends` it. */\nexport interface SurfaceRowProps extends SurfaceRowChromeProps {\n    asChild?: false;\n    /**\n     * When provided, the whole row becomes clickable: it renders as a `<button>`\n     * (or `<a>` when `href` is set), so the entire row is the click target with\n     * native focus + Enter/Space — no manual tabIndex/key handlers. For a\n     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the\n     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).\n     */\n    onClick?: (event: React.MouseEvent) => void;\n    /** Renders the clickable row as an anchor instead of a button. */\n    href?: string;\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\n/**\n * The outcome tones reuse the tag tokens rather than minting row ones, so a row saying \"this\n * passed\" and a tag saying it are the same green wherever the two sit together.\n */\nconst TONE_CLASSES: Record<NonNullable<SurfaceRowProps['tone']>, string> = {\n    default: '',\n    muted: 'bg-[var(--malachite-card-dimmed-background)]',\n    success: 'bg-[var(--malachite-tag-success-background)]',\n    error: 'bg-[var(--malachite-tag-error-background)]',\n};\n\n/**\n * The text an outcome tone carries with it, through the same context channel a selected row\n * uses, so `Typography` inside the row follows the tint instead of staying near-black on it.\n * `color` as well, for row content that is not Typography.\n *\n * Only the outcome tones. `muted` dims its subject rather than recolouring it, and its\n * foreground is the ordinary one.\n */\nconst TONE_FOREGROUNDS: Partial<Record<NonNullable<SurfaceRowProps['tone']>, string>> = {\n    success: 'var(--malachite-tag-success-foreground)',\n    error: 'var(--malachite-tag-error-foreground)',\n};\n\nexport interface SurfaceRowAsChildProps extends SurfaceRowChromeProps {\n    asChild: true;\n    children: React.ReactElement;\n}\n\nexport type AnySurfaceRowProps = SurfaceRowProps | SurfaceRowAsChildProps;\n\nconst TRIPLE_SHADOW =\n    '0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)';\n\n/**\n * A single full-bleed row inside a <Surface>. Owns the row chrome — hover\n * highlight, colour transition and an optional bottom divider — so consumers\n * compose their own content inside without re-implementing design-system styling.\n * Pass `onClick`/`href` to make the entire row clickable (rendered as a real\n * button/anchor, so keyboard navigation works natively).\n */\nconst SurfaceRow: React.FC<AnySurfaceRowProps> = (props) => {\n    const {\n        children,\n        divider = false,\n        disabled = false,\n        selected,\n        selection,\n        tone = 'default',\n        className = '',\n        style,\n    } = props;\n    const asChild = props.asChild === true;\n    const { onClick, href, trailing, role } = asChild\n        ? ({} as SurfaceRowProps)\n        : (props as SurfaceRowProps);\n    const ariaLabel = asChild ? undefined : (props as SurfaceRowProps)['aria-label'];\n    const ariaLabelledBy = asChild ? undefined : (props as SurfaceRowProps)['aria-labelledby'];\n    const interactive = Boolean(onClick || href);\n    // `asChild` is interactive for the hover affordance only, not the focus/reset classes.\n    const hover =\n        disabled && (interactive || asChild)\n            ? ''\n            : 'transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]';\n\n    // A class, not an inline colour, which would outrank the hover utility. It replaces the\n    // button reset's `bg-transparent` rather than joining it: same specificity, so the winner\n    // would be whichever Tailwind emitted last.\n    const tinted = tone !== 'default';\n    const toneClass = TONE_CLASSES[tone];\n\n    const chromeClasses = [\n        'w-full text-left border-0',\n        toneClass,\n        divider ? 'border-b border-solid border-[var(--malachite-card-border)]' : '',\n        hover,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const controlClasses = [\n        interactive\n            ? `appearance-none ${tinted ? '' : 'bg-transparent'} p-0 ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, className].filter(Boolean).join(' ');\n\n    const paints = selection ? selection === 'highlight' : role !== 'checkbox';\n\n    // A gradient layer so the tint composites over hover, and an inset shadow because\n    // `ring-*` silently doesn't paint in a shadow root.\n    const selectedStyle: React.CSSProperties =\n        selected && paints\n            ? {\n                  backgroundImage: `linear-gradient(${SELECTED_ROW_BACKGROUND}, ${SELECTED_ROW_BACKGROUND})`,\n                  color: SELECTED_ROW_FOREGROUND,\n                  boxShadow: `inset 2px 0 0 ${SELECTED_ROW_ACCENT}`,\n                  ...SELECTED_TEXT_CONTEXT,\n              }\n            : {};\n\n    const toneForeground = TONE_FOREGROUNDS[tone];\n    const toneStyle: React.CSSProperties = toneForeground\n        ? ({\n              color: toneForeground,\n              '--malachite-ctx-text-primary': toneForeground,\n          } as React.CSSProperties)\n        : {};\n\n    // `selected` last of the two: a row can be both, and selection is the state the reader is\n    // acting on, so it wins the colour.\n    const rowStyle = { ...toneStyle, ...selectedStyle, ...style };\n\n    const ariaChecked = role === 'radio' || role === 'checkbox' ? Boolean(selected) : undefined;\n    // `aria-current`, not `aria-pressed`: a selected row is one of many choices, not a toggle\n    // (same call as `Dropdown`'s options). A role that carries its own state uses that instead.\n    const ariaCurrent = ariaChecked === undefined && selected ? true : undefined;\n\n    // Everything a control would have carried, for the branches that render none: the row\n    // element is then the only thing assistive tech sees. `aria-disabled` because there is no\n    // control to be natively disabled — and it is inert without a role, like the name.\n    const rowFallbackAria = {\n        role,\n        'aria-checked': ariaChecked,\n        'aria-current': ariaCurrent,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-disabled': role && disabled ? true : undefined,\n    };\n\n    if (asChild) {\n        return paintOnChild(children, classes, rowStyle);\n    }\n\n    if (isRenderableNode(trailing)) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </a>\n            ) : onClick ? (\n                <button\n                    type=\"button\"\n                    onClick={onClick}\n                    disabled={disabled}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </button>\n            ) : (\n                // The set goes here, not on the wrapper: `radio` and `checkbox` make their\n                // descendants presentational, which would bury a control in the trailing slot.\n                <div className=\"flex-1 min-w-0\" {...rowFallbackAria}>\n                    {children}\n                </div>\n            );\n\n        return (\n            <div\n                className={[chromeClasses, 'flex items-center', className]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div className=\"shrink-0 flex items-center\">{trailing}</div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </a>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                className={classes}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <div className={classes} style={rowStyle} {...rowFallbackAria}>\n            {children}\n        </div>\n    );\n};\n\nexport interface SurfaceExpandableRowProps {\n    /** The row itself, laid out across the line. May hold its own controls. */\n    header: React.ReactNode;\n    /** The body, rendered beneath the row while it is open. */\n    children?: React.ReactNode;\n    expanded: boolean;\n    /** Omit for a row that cannot open. The arrow's space is still reserved, so a list of\n     *  rows stays in one column whether or not each one has a body. */\n    onToggle?: (expanded: boolean) => void;\n    /**\n     * Pins the row while its body scrolls, so a long body never leaves the reader without\n     * the line it belongs to. Offset by whatever is already pinned above it.\n     */\n    sticky?: boolean;\n    stickyTopOffset?: number;\n    divider?: boolean;\n    tone?: SurfaceRowProps['tone'];\n    /** Names the disclosure control, which is otherwise only an arrow. */\n    'aria-label'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * Stops a click inside it from toggling the row, for the cells that hold controls.\n *\n * Explicit rather than sniffing the event's target for an interactive ancestor: a control\n * rendering into a shadow root retargets the event to its host, so the sniff would miss\n * exactly the components most likely to sit in a row.\n */\nconst ExpandableRowControls: React.FC<{\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}> = ({ children, className = '', style }) => (\n    <div className={className} style={style} onClick={(event) => event.stopPropagation()}>\n        {children}\n    </div>\n);\n\n/**\n * A row that opens to reveal a body, for a line that carries its own controls.\n *\n * Not `Accordion`: that puts its header inside the toggle button, so a header holding a\n * dropdown or a second button is invalid. Here the row surface takes the click and a cell\n * opts out with `ExpandableRow.Controls`, while the arrow stays a real button so the\n * keyboard reaches it.\n */\n/**\n * The space before the header: the arrow's own inset, its glyph and the gap after it.\n * Exported so a consumer aligning a column header above these rows offsets by the same\n * amount instead of guessing at it.\n */\nexport const EXPANDABLE_ROW_LEAD_PX = 39;\n\nconst SurfaceExpandableRow: React.FC<SurfaceExpandableRowProps> & {\n    Controls: typeof ExpandableRowControls;\n} = Object.assign(\n    ({\n        header,\n        children,\n        expanded,\n        onToggle,\n        sticky = false,\n        stickyTopOffset = 0,\n        divider = false,\n        tone = 'default',\n        'aria-label': ariaLabel,\n        className = '',\n        style,\n    }: SurfaceExpandableRowProps) => {\n        const bodyId = React.useId();\n        const toggle = onToggle ? () => onToggle(!expanded) : undefined;\n\n        return (\n            <SurfaceRow divider={divider} tone={tone} className={className} style={style}>\n                {/* `group` so the arrow takes its hover state from the whole row. */}\n                <div\n                    className={`group flex items-center w-full ${toggle ? 'cursor-pointer' : ''} ${\n                        sticky && expanded\n                            ? 'sticky z-[1] bg-[var(--malachite-card-background)]'\n                            : ''\n                    }`}\n                    style={sticky && expanded ? { top: stickyTopOffset } : undefined}\n                    // Presentational: the arrow below is the keyboard control, and this only\n                    // widens the pointer target.\n                    onClick={toggle}\n                    role=\"presentation\"\n                >\n                    {/* Reserved whether or not this row opens, so a list stays in one column.\n                        The inset and gap match Accordion's header. */}\n                    <span className=\"shrink-0 flex items-center pl-[16px] pr-[12px]\">\n                        {toggle && (\n                            <button\n                                type=\"button\"\n                                className={`appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${FOCUS_RING_INSET}`}\n                                aria-expanded={expanded}\n                                aria-controls={bodyId}\n                                aria-label={ariaLabel}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    toggle();\n                                }}\n                            >\n                                <DisclosureArrow expanded={expanded} />\n                            </button>\n                        )}\n                    </span>\n                    {header}\n                </div>\n                {expanded && <div id={bodyId}>{children}</div>}\n            </SurfaceRow>\n        );\n    },\n    { Controls: ExpandableRowControls },\n);\n\ninterface SurfaceComponent extends React.FC<SurfaceProps> {\n    Row: React.FC<AnySurfaceRowProps>;\n    ExpandableRow: typeof SurfaceExpandableRow;\n}\n\nconst Surface = (({\n    children,\n    padding = false,\n    overflow = 'hidden',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}: SurfaceProps) => {\n    // Literal class names (not interpolated) so Tailwind's JIT emits them.\n    const overflowClass =\n        overflow === 'clip'\n            ? 'overflow-clip'\n            : overflow === 'visible'\n              ? 'overflow-visible'\n              : 'overflow-hidden';\n    return (\n        <div\n            className={`w-full rounded-[var(--malachite-radius-xxl,14px)] ${overflowClass} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${padding ? 'py-3 px-4' : ''} ${className}`}\n            style={{ boxShadow: TRIPLE_SHADOW, ...FOREGROUND_RESET, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {children}\n        </div>\n    );\n}) as SurfaceComponent;\n\nSurface.Row = SurfaceRow;\nSurface.ExpandableRow = SurfaceExpandableRow;\n\nexport default Surface;\nexport { Surface, SurfaceRow, SurfaceExpandableRow };\n"],"names":["TONE_CLASSES","TONE_FOREGROUNDS","TRIPLE_SHADOW","SurfaceRow","props","children","divider","disabled","selected","selection","tone","className","style","asChild","onClick","href","trailing","role","ariaLabel","ariaLabelledBy","interactive","hover","tinted","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","paintOnChild","isRenderableNode","control","jsx","jsxs","ExpandableRowControls","event","EXPANDABLE_ROW_LEAD_PX","SurfaceExpandableRow","header","expanded","onToggle","sticky","stickyTopOffset","bodyId","React","toggle","DisclosureArrow","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":"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"}
+{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport { paintOnChild } from './asChild';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { isRenderableNode } from './renderableNode';\nimport {\n    FOREGROUND_RESET,\n    SELECTED_ROW_ACCENT,\n    SELECTED_ROW_BACKGROUND,\n    SELECTED_ROW_FOREGROUND,\n    SELECTED_TEXT_CONTEXT,\n} from './selectedRow';\n\nexport interface SurfaceProps {\n    children?: React.ReactNode;\n    padding?: boolean;\n    /**\n     * Content overflow. Defaults to `hidden` so children are clipped to the rounded\n     * corners. Use `clip` to keep the rounded clipping WITHOUT creating a scroll\n     * container — so a `position: sticky` descendant still pins (unlike `hidden`,\n     * which traps it). `visible` disables clipping entirely.\n     */\n    overflow?: 'hidden' | 'visible' | 'clip';\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\ninterface SurfaceRowChromeProps {\n    children?: React.ReactNode;\n    /** Renders a bottom divider — omit on the last row in a Surface. */\n    divider?: boolean;\n    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */\n    disabled?: boolean;\n    /** Announces the row as selected — `aria-checked` under a `radio`/`checkbox` role,\n     *  `aria-current` otherwise — and paints `Table`'s selected treatment unless `selection`\n     *  says not to. */\n    selected?: boolean;\n    /** How a `selected` row shows it. `highlight` paints the treatment; `announce` leaves the\n     *  visual to a control inside the row and only sets the ARIA state. Defaults to `announce`\n     *  under `role=\"checkbox\"` and `highlight` otherwise. */\n    selection?: 'highlight' | 'announce';\n    /**\n     * Tints the whole row by what it reports. `muted` is a row whose subject is inactive —\n     * not disabled: it stays interactive. `success` and `error` are for a row that carries\n     * an outcome, where the result belongs to the whole line rather than to one cell in it.\n     */\n    tone?: 'default' | 'muted' | 'success' | 'error';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/** Stays an interface under its original name: a consumer may `extends` it. */\nexport interface SurfaceRowProps extends SurfaceRowChromeProps {\n    asChild?: false;\n    /**\n     * When provided, the whole row becomes clickable: it renders as a `<button>`\n     * (or `<a>` when `href` is set), so the entire row is the click target with\n     * native focus + Enter/Space — no manual tabIndex/key handlers. For a\n     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the\n     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).\n     */\n    onClick?: (event: React.MouseEvent) => void;\n    /** Renders the clickable row as an anchor instead of a button. */\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\n/**\n * The outcome tones reuse the tag tokens rather than minting row ones, so a row saying \"this\n * passed\" and a tag saying it are the same green wherever the two sit together.\n */\nconst TONE_CLASSES: Record<NonNullable<SurfaceRowProps['tone']>, string> = {\n    default: '',\n    muted: 'bg-[var(--malachite-card-dimmed-background)]',\n    success: 'bg-[var(--malachite-tag-success-background)]',\n    error: 'bg-[var(--malachite-tag-error-background)]',\n};\n\n/**\n * The text an outcome tone carries with it, through the same context channel a selected row\n * uses, so `Typography` inside the row follows the tint instead of staying near-black on it.\n * `color` as well, for row content that is not Typography.\n *\n * Only the outcome tones. `muted` dims its subject rather than recolouring it, and its\n * foreground is the ordinary one.\n */\nconst TONE_FOREGROUNDS: Partial<Record<NonNullable<SurfaceRowProps['tone']>, string>> = {\n    success: 'var(--malachite-tag-success-foreground)',\n    error: 'var(--malachite-tag-error-foreground)',\n};\n\nexport interface SurfaceRowAsChildProps extends SurfaceRowChromeProps {\n    asChild: true;\n    children: React.ReactElement;\n}\n\nexport type AnySurfaceRowProps = SurfaceRowProps | SurfaceRowAsChildProps;\n\nconst TRIPLE_SHADOW =\n    '0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)';\n\n/**\n * A single full-bleed row inside a <Surface>. Owns the row chrome — hover\n * highlight, colour transition and an optional bottom divider — so consumers\n * compose their own content inside without re-implementing design-system styling.\n * Pass `onClick`/`href` to make the entire row clickable (rendered as a real\n * button/anchor, so keyboard navigation works natively).\n */\nconst SurfaceRow: React.FC<AnySurfaceRowProps> = (props) => {\n    const {\n        children,\n        divider = false,\n        disabled = false,\n        selected,\n        selection,\n        tone = 'default',\n        className = '',\n        style,\n    } = props;\n    const asChild = props.asChild === true;\n    const { onClick, href: rawHref, target, rel, trailing, role } = asChild\n        ? ({} as SurfaceRowProps)\n        : (props as SurfaceRowProps);\n    // A rejected href (e.g. `javascript:`) leaves the row a button or a plain row, never an anchor.\n    const href = safeHref(rawHref);\n    const ariaLabel = asChild ? undefined : (props as SurfaceRowProps)['aria-label'];\n    const ariaLabelledBy = asChild ? undefined : (props as SurfaceRowProps)['aria-labelledby'];\n    const interactive = Boolean(onClick || href);\n    // `asChild` is interactive for the hover affordance only, not the focus/reset classes.\n    const hover =\n        disabled && (interactive || asChild)\n            ? ''\n            : 'transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]';\n\n    // A class, not an inline colour, which would outrank the hover utility. It replaces the\n    // button reset's `bg-transparent` rather than joining it: same specificity, so the winner\n    // would be whichever Tailwind emitted last.\n    const tinted = tone !== 'default';\n    const toneClass = TONE_CLASSES[tone];\n\n    const chromeClasses = [\n        'w-full text-left border-0',\n        toneClass,\n        divider ? 'border-b border-solid border-[var(--malachite-card-border)]' : '',\n        hover,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const controlClasses = [\n        interactive\n            ? `appearance-none ${tinted ? '' : 'bg-transparent'} p-0 ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, className].filter(Boolean).join(' ');\n\n    const paints = selection ? selection === 'highlight' : role !== 'checkbox';\n\n    // A gradient layer so the tint composites over hover, and an inset shadow because\n    // `ring-*` silently doesn't paint in a shadow root.\n    const selectedStyle: React.CSSProperties =\n        selected && paints\n            ? {\n                  backgroundImage: `linear-gradient(${SELECTED_ROW_BACKGROUND}, ${SELECTED_ROW_BACKGROUND})`,\n                  color: SELECTED_ROW_FOREGROUND,\n                  boxShadow: `inset 2px 0 0 ${SELECTED_ROW_ACCENT}`,\n                  ...SELECTED_TEXT_CONTEXT,\n              }\n            : {};\n\n    const toneForeground = TONE_FOREGROUNDS[tone];\n    const toneStyle: React.CSSProperties = toneForeground\n        ? ({\n              color: toneForeground,\n              '--malachite-ctx-text-primary': toneForeground,\n          } as React.CSSProperties)\n        : {};\n\n    // `selected` last of the two: a row can be both, and selection is the state the reader is\n    // acting on, so it wins the colour.\n    const rowStyle = { ...toneStyle, ...selectedStyle, ...style };\n\n    const ariaChecked = role === 'radio' || role === 'checkbox' ? Boolean(selected) : undefined;\n    // `aria-current`, not `aria-pressed`: a selected row is one of many choices, not a toggle\n    // (same call as `Dropdown`'s options). A role that carries its own state uses that instead.\n    const ariaCurrent = ariaChecked === undefined && selected ? true : undefined;\n\n    // Everything a control would have carried, for the branches that render none: the row\n    // element is then the only thing assistive tech sees. `aria-disabled` because there is no\n    // control to be natively disabled — and it is inert without a role, like the name.\n    const rowFallbackAria = {\n        role,\n        'aria-checked': ariaChecked,\n        'aria-current': ariaCurrent,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-disabled': role && disabled ? true : undefined,\n    };\n\n    if (asChild) {\n        return paintOnChild(children, classes, rowStyle);\n    }\n\n    if (isRenderableNode(trailing)) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </a>\n            ) : onClick ? (\n                <button\n                    type=\"button\"\n                    onClick={onClick}\n                    disabled={disabled}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </button>\n            ) : (\n                // The set goes here, not on the wrapper: `radio` and `checkbox` make their\n                // descendants presentational, which would bury a control in the trailing slot.\n                <div className=\"flex-1 min-w-0\" {...rowFallbackAria}>\n                    {children}\n                </div>\n            );\n\n        return (\n            <div\n                className={[chromeClasses, 'flex items-center', className]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div className=\"shrink-0 flex items-center\">{trailing}</div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                target={target}\n                rel={resolveRel(rel, target)}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </a>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                className={classes}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <div className={classes} style={rowStyle} {...rowFallbackAria}>\n            {children}\n        </div>\n    );\n};\n\nexport interface SurfaceExpandableRowProps {\n    /** The row itself, laid out across the line. May hold its own controls. */\n    header: React.ReactNode;\n    /** The body, rendered beneath the row while it is open. */\n    children?: React.ReactNode;\n    expanded: boolean;\n    /** Omit for a row that cannot open. The arrow's space is still reserved, so a list of\n     *  rows stays in one column whether or not each one has a body. */\n    onToggle?: (expanded: boolean) => void;\n    /**\n     * Pins the row while its body scrolls, so a long body never leaves the reader without\n     * the line it belongs to. Offset by whatever is already pinned above it.\n     */\n    sticky?: boolean;\n    stickyTopOffset?: number;\n    divider?: boolean;\n    tone?: SurfaceRowProps['tone'];\n    /** Names the disclosure control, which is otherwise only an arrow. */\n    'aria-label'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * Stops a click inside it from toggling the row, for the cells that hold controls.\n *\n * Explicit rather than sniffing the event's target for an interactive ancestor: a control\n * rendering into a shadow root retargets the event to its host, so the sniff would miss\n * exactly the components most likely to sit in a row.\n */\nconst ExpandableRowControls: React.FC<{\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}> = ({ children, className = '', style }) => (\n    <div className={className} style={style} onClick={(event) => event.stopPropagation()}>\n        {children}\n    </div>\n);\n\n/**\n * A row that opens to reveal a body, for a line that carries its own controls.\n *\n * Not `Accordion`: that puts its header inside the toggle button, so a header holding a\n * dropdown or a second button is invalid. Here the row surface takes the click and a cell\n * opts out with `ExpandableRow.Controls`, while the arrow stays a real button so the\n * keyboard reaches it.\n */\n/**\n * The space before the header: the arrow's own inset, its glyph and the gap after it.\n * Exported so a consumer aligning a column header above these rows offsets by the same\n * amount instead of guessing at it.\n */\nexport const EXPANDABLE_ROW_LEAD_PX = 39;\n\nconst SurfaceExpandableRow: React.FC<SurfaceExpandableRowProps> & {\n    Controls: typeof ExpandableRowControls;\n} = Object.assign(\n    ({\n        header,\n        children,\n        expanded,\n        onToggle,\n        sticky = false,\n        stickyTopOffset = 0,\n        divider = false,\n        tone = 'default',\n        'aria-label': ariaLabel,\n        className = '',\n        style,\n    }: SurfaceExpandableRowProps) => {\n        const bodyId = React.useId();\n        const toggle = onToggle ? () => onToggle(!expanded) : undefined;\n\n        return (\n            <SurfaceRow divider={divider} tone={tone} className={className} style={style}>\n                {/* `group` so the arrow takes its hover state from the whole row. */}\n                <div\n                    className={`group flex items-center w-full ${toggle ? 'cursor-pointer' : ''} ${\n                        sticky && expanded\n                            ? 'sticky z-[1] bg-[var(--malachite-card-background)]'\n                            : ''\n                    }`}\n                    style={sticky && expanded ? { top: stickyTopOffset } : undefined}\n                    // Presentational: the arrow below is the keyboard control, and this only\n                    // widens the pointer target.\n                    onClick={toggle}\n                    role=\"presentation\"\n                >\n                    {/* Reserved whether or not this row opens, so a list stays in one column.\n                        The inset and gap match Accordion's header. */}\n                    <span className=\"shrink-0 flex items-center pl-[16px] pr-[12px]\">\n                        {toggle && (\n                            <button\n                                type=\"button\"\n                                className={`appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${FOCUS_RING_INSET}`}\n                                aria-expanded={expanded}\n                                aria-controls={bodyId}\n                                aria-label={ariaLabel}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    toggle();\n                                }}\n                            >\n                                <DisclosureArrow expanded={expanded} />\n                            </button>\n                        )}\n                    </span>\n                    {header}\n                </div>\n                {expanded && <div id={bodyId}>{children}</div>}\n            </SurfaceRow>\n        );\n    },\n    { Controls: ExpandableRowControls },\n);\n\ninterface SurfaceComponent extends React.FC<SurfaceProps> {\n    Row: React.FC<AnySurfaceRowProps>;\n    ExpandableRow: typeof SurfaceExpandableRow;\n}\n\nconst Surface = (({\n    children,\n    padding = false,\n    overflow = 'hidden',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}: SurfaceProps) => {\n    // Literal class names (not interpolated) so Tailwind's JIT emits them.\n    const overflowClass =\n        overflow === 'clip'\n            ? 'overflow-clip'\n            : overflow === 'visible'\n              ? 'overflow-visible'\n              : 'overflow-hidden';\n    return (\n        <div\n            className={`w-full rounded-[var(--malachite-radius-xxl,14px)] ${overflowClass} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${padding ? 'py-3 px-4' : ''} ${className}`}\n            style={{ boxShadow: TRIPLE_SHADOW, ...FOREGROUND_RESET, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {children}\n        </div>\n    );\n}) as SurfaceComponent;\n\nSurface.Row = SurfaceRow;\nSurface.ExpandableRow = SurfaceExpandableRow;\n\nexport default Surface;\nexport { Surface, SurfaceRow, SurfaceExpandableRow };\n"],"names":["TONE_CLASSES","TONE_FOREGROUNDS","TRIPLE_SHADOW","SurfaceRow","props","children","divider","disabled","selected","selection","tone","className","style","asChild","onClick","rawHref","target","rel","trailing","role","href","safeHref","ariaLabel","ariaLabelledBy","interactive","hover","tinted","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","paintOnChild","isRenderableNode","control","jsx","resolveRel","jsxs","ExpandableRowControls","event","EXPANDABLE_ROW_LEAD_PX","SurfaceExpandableRow","header","expanded","onToggle","sticky","stickyTopOffset","bodyId","React","toggle","DisclosureArrow","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":"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"}

package/dist/components/cardStripGeometry.js

@@ -0,0 +1,47 @@
+import { CARD_FLARE_PX as s } from "./SelectableCard.js";
+const r = 1, m = 0.8, R = (t) => {
+  const [n, i] = Array.from(t.children), o = n && i ? i.getBoundingClientRect().left - n.getBoundingClientRect().left : (n == null ? void 0 : n.getBoundingClientRect().width) ?? 0, e = t.clientWidth - s * 2;
+  return o <= 0 ? e * m : Math.max(1, Math.floor(e / o)) * o;
+}, l = (t, n) => {
+  const i = n.getBoundingClientRect(), o = t.getBoundingClientRect(), e = t.scrollLeft + (i.left - o.left);
+  return {
+    left: e,
+    right: e + i.width,
+    visibleFrom: t.scrollLeft + s,
+    visibleTo: t.scrollLeft + t.clientWidth - s
+  };
+}, d = (t, n) => {
+  if (!t.contains(n))
+    return !1;
+  const { left: i, right: o, visibleFrom: e, visibleTo: f } = l(t, n);
+  return i >= e - r && o <= f + r;
+}, h = (t) => {
+  const n = t.getBoundingClientRect().left;
+  return Array.from(t.children).map(
+    (i) => t.scrollLeft + (i.getBoundingClientRect().left - n) - s
+  );
+}, L = (t, n, i) => {
+  if (!t.contains(n) || d(t, n))
+    return null;
+  const { left: o, right: e, visibleTo: f } = l(t, n);
+  if (e <= f)
+    return o - s;
+  const a = e - t.clientWidth + s;
+  return i ? Math.min(
+    ...h(t).filter((u) => u >= a - r),
+    o - s
+  ) : a;
+}, v = (t, n, i) => {
+  const o = t.scrollLeft, e = o + n * R(t);
+  if (!i)
+    return e;
+  const f = (c) => n * (c - o) > r, a = (c) => n * (e - c) > -r, u = h(t).filter((c) => f(c) && a(c)), g = n > 0 ? Math.max(...u) : Math.min(...u);
+  return Number.isFinite(g) ? g : e;
+};
+export {
+  r as EDGE_EPSILON_PX,
+  d as isCardInView,
+  v as pageTargetFor,
+  L as revealTargetFor
+};
+//# sourceMappingURL=cardStripGeometry.js.map

package/dist/components/cardStripGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardStripGeometry.js","sources":["../../src/components/cardStripGeometry.ts"],"sourcesContent":["import { CARD_FLARE_PX } from './SelectableCard';\n\n// Scroll geometry for CardStrip's track. Positions are scrollLeft values on the scroller.\n\nexport const EDGE_EPSILON_PX = 1;\nconst SCROLL_STEP_RATIO = 0.8;\n\nconst scrollStepFor = (scroller: HTMLElement): number => {\n    const [first, second] = Array.from(scroller.children);\n    const pitch =\n        first && second\n            ? second.getBoundingClientRect().left - first.getBoundingClientRect().left\n            : (first?.getBoundingClientRect().width ?? 0);\n    // `clientWidth` counts the flare padding, which is not width a card can be read in.\n    const visible = scroller.clientWidth - CARD_FLARE_PX * 2;\n\n    if (pitch <= 0) {\n        return visible * SCROLL_STEP_RATIO;\n    }\n\n    return Math.max(1, Math.floor(visible / pitch)) * pitch;\n};\n\nconst trackSpan = (scroller: HTMLElement, card: HTMLElement) => {\n    // Against the scroller: the cards' `offsetParent` is not it.\n    const cardRect = card.getBoundingClientRect();\n    const viewRect = scroller.getBoundingClientRect();\n    const left = scroller.scrollLeft + (cardRect.left - viewRect.left);\n    return {\n        left,\n        right: left + cardRect.width,\n        visibleFrom: scroller.scrollLeft + CARD_FLARE_PX,\n        visibleTo: scroller.scrollLeft + scroller.clientWidth - CARD_FLARE_PX,\n    };\n};\n\nexport const isCardInView = (scroller: HTMLElement, card: HTMLElement): boolean => {\n    if (!scroller.contains(card)) {\n        return false;\n    }\n    const { left, right, visibleFrom, visibleTo } = trackSpan(scroller, card);\n    return left >= visibleFrom - EDGE_EPSILON_PX && right <= visibleTo + EDGE_EPSILON_PX;\n};\n\n/** The scroll positions that start each slot, which are the track's snap points. */\nconst slotStarts = (scroller: HTMLElement): number[] => {\n    const viewLeft = scroller.getBoundingClientRect().left;\n    return Array.from(scroller.children).map(\n        (slot) =>\n            scroller.scrollLeft + (slot.getBoundingClientRect().left - viewLeft) - CARD_FLARE_PX,\n    );\n};\n\n// Positioned rather than `scrollIntoView`, which a snapped track pulls back to the nearest snap.\nexport const revealTargetFor = (\n    scroller: HTMLElement,\n    card: HTMLElement,\n    snap: boolean,\n): number | null => {\n    if (!scroller.contains(card) || isCardInView(scroller, card)) {\n        return null;\n    }\n    const { left, right, visibleTo } = trackSpan(scroller, card);\n    if (right <= visibleTo) {\n        return left - CARD_FLARE_PX;\n    }\n    const fitsFrom = right - scroller.clientWidth + CARD_FLARE_PX;\n    if (!snap) {\n        return fitsFrom;\n    }\n    // Land on a card boundary: proximity snapping pulls any other stop back short of the card.\n    return Math.min(\n        ...slotStarts(scroller).filter((start) => start >= fitsFrom - EDGE_EPSILON_PX),\n        left - CARD_FLARE_PX,\n    );\n};\n\n/** Where an arrow press pages to: a whole view of cards, onto a card boundary when snapping. */\nexport const pageTargetFor = (scroller: HTMLElement, direction: -1 | 1, snap: boolean): number => {\n    const from = scroller.scrollLeft;\n    const to = from + direction * scrollStepFor(scroller);\n    if (!snap) {\n        return to;\n    }\n    // Onto the nearest card boundary, also from a stop between cards (the clamped end). The\n    // epsilon absorbs fractional scroll positions, which otherwise pick the boundary already here.\n    const ahead = (start: number): boolean => direction * (start - from) > EDGE_EPSILON_PX;\n    const within = (start: number): boolean => direction * (to - start) > -EDGE_EPSILON_PX;\n    const starts = slotStarts(scroller).filter((start) => ahead(start) && within(start));\n    const onto = direction > 0 ? Math.max(...starts) : Math.min(...starts);\n    return Number.isFinite(onto) ? onto : to;\n};\n"],"names":["EDGE_EPSILON_PX","SCROLL_STEP_RATIO","scrollStepFor","scroller","first","second","pitch","visible","CARD_FLARE_PX","trackSpan","card","cardRect","viewRect","left","isCardInView","right","visibleFrom","visibleTo","slotStarts","viewLeft","slot","revealTargetFor","snap","fitsFrom","start","pageTargetFor","direction","from","to","ahead","within","starts","onto"],"mappings":";AAIO,MAAMA,IAAkB,GACzBC,IAAoB,KAEpBC,IAAgB,CAACC,MAAkC;AACrD,QAAM,CAACC,GAAOC,CAAM,IAAI,MAAM,KAAKF,EAAS,QAAQ,GAC9CG,IACFF,KAASC,IACHA,EAAO,wBAAwB,OAAOD,EAAM,sBAAA,EAAwB,QACnEA,KAAA,gBAAAA,EAAO,wBAAwB,UAAS,GAE7CG,IAAUJ,EAAS,cAAcK,IAAgB;AAEvD,SAAIF,KAAS,IACFC,IAAUN,IAGd,KAAK,IAAI,GAAG,KAAK,MAAMM,IAAUD,CAAK,CAAC,IAAIA;AACtD,GAEMG,IAAY,CAACN,GAAuBO,MAAsB;AAE5D,QAAMC,IAAWD,EAAK,sBAAA,GAChBE,IAAWT,EAAS,sBAAA,GACpBU,IAAOV,EAAS,cAAcQ,EAAS,OAAOC,EAAS;AAC7D,SAAO;AAAA,IACH,MAAAC;AAAA,IACA,OAAOA,IAAOF,EAAS;AAAA,IACvB,aAAaR,EAAS,aAAaK;AAAA,IACnC,WAAWL,EAAS,aAAaA,EAAS,cAAcK;AAAA,EAAA;AAEhE,GAEaM,IAAe,CAACX,GAAuBO,MAA+B;AAC/E,MAAI,CAACP,EAAS,SAASO,CAAI;AACvB,WAAO;AAEX,QAAM,EAAE,MAAAG,GAAM,OAAAE,GAAO,aAAAC,GAAa,WAAAC,MAAcR,EAAUN,GAAUO,CAAI;AACxE,SAAOG,KAAQG,IAAchB,KAAmBe,KAASE,IAAYjB;AACzE,GAGMkB,IAAa,CAACf,MAAoC;AACpD,QAAMgB,IAAWhB,EAAS,sBAAA,EAAwB;AAClD,SAAO,MAAM,KAAKA,EAAS,QAAQ,EAAE;AAAA,IACjC,CAACiB,MACGjB,EAAS,cAAciB,EAAK,wBAAwB,OAAOD,KAAYX;AAAA,EAAA;AAEnF,GAGaa,IAAkB,CAC3BlB,GACAO,GACAY,MACgB;AAChB,MAAI,CAACnB,EAAS,SAASO,CAAI,KAAKI,EAAaX,GAAUO,CAAI;AACvD,WAAO;AAEX,QAAM,EAAE,MAAAG,GAAM,OAAAE,GAAO,WAAAE,MAAcR,EAAUN,GAAUO,CAAI;AAC3D,MAAIK,KAASE;AACT,WAAOJ,IAAOL;AAElB,QAAMe,IAAWR,IAAQZ,EAAS,cAAcK;AAChD,SAAKc,IAIE,KAAK;AAAA,IACR,GAAGJ,EAAWf,CAAQ,EAAE,OAAO,CAACqB,MAAUA,KAASD,IAAWvB,CAAe;AAAA,IAC7Ea,IAAOL;AAAA,EAAA,IALAe;AAOf,GAGaE,IAAgB,CAACtB,GAAuBuB,GAAmBJ,MAA0B;AAC9F,QAAMK,IAAOxB,EAAS,YAChByB,IAAKD,IAAOD,IAAYxB,EAAcC,CAAQ;AACpD,MAAI,CAACmB;AACD,WAAOM;AAIX,QAAMC,IAAQ,CAACL,MAA2BE,KAAaF,IAAQG,KAAQ3B,GACjE8B,IAAS,CAACN,MAA2BE,KAAaE,IAAKJ,KAAS,CAACxB,GACjE+B,IAASb,EAAWf,CAAQ,EAAE,OAAO,CAACqB,MAAUK,EAAML,CAAK,KAAKM,EAAON,CAAK,CAAC,GAC7EQ,IAAON,IAAY,IAAI,KAAK,IAAI,GAAGK,CAAM,IAAI,KAAK,IAAI,GAAGA,CAAM;AACrE,SAAO,OAAO,SAASC,CAAI,IAAIA,IAAOJ;AAC1C;"}

package/dist/components/linkRel.js

@@ -0,0 +1,9 @@
+const s = (o, n) => {
+  if ((n == null ? void 0 : n.toLowerCase()) !== "_blank") return o;
+  const e = new Set(o == null ? void 0 : o.split(/\s+/).filter(Boolean));
+  return e.add("noopener"), e.add("noreferrer"), [...e].join(" ");
+};
+export {
+  s as resolveRel
+};
+//# sourceMappingURL=linkRel.js.map

package/dist/components/linkRel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkRel.js","sources":["../../src/components/linkRel.ts"],"sourcesContent":["import type { HTMLAttributeAnchorTarget } from 'react';\n\n// Merged, never replaced: a caller's own `rel` must not drop `_blank`'s noopener/noreferrer.\nexport const resolveRel = (\n    rel: string | undefined,\n    target: HTMLAttributeAnchorTarget | undefined,\n): string | undefined => {\n    // Browsers match the `_blank` keyword case-insensitively, so this must too.\n    if (target?.toLowerCase() !== '_blank') return rel;\n\n    const tokens = new Set(rel?.split(/\\s+/).filter(Boolean));\n    tokens.add('noopener');\n    tokens.add('noreferrer');\n    return [...tokens].join(' ');\n};\n"],"names":["resolveRel","rel","target","tokens"],"mappings":"AAGO,MAAMA,IAAa,CACtBC,GACAC,MACqB;AAErB,OAAIA,KAAA,gBAAAA,EAAQ,mBAAkB,SAAU,QAAOD;AAE/C,QAAME,IAAS,IAAI,IAAIF,KAAA,gBAAAA,EAAK,MAAM,OAAO,OAAO,QAAQ;AACxD,SAAAE,EAAO,IAAI,UAAU,GACrBA,EAAO,IAAI,YAAY,GAChB,CAAC,GAAGA,CAAM,EAAE,KAAK,GAAG;AAC/B;"}

package/dist/index.d.ts

@@ -143,6 +143,8 @@ declare interface AlertProps {
     children?: default_2.ReactNode;
     isExpanded?: boolean;
     onToggle?: (expanded: boolean) => void;
+    /** A control at the end of the alert — a link or button that resolves what it reports. */
+    action?: default_2.ReactNode;
 }
 
 export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';
@@ -3392,7 +3394,11 @@ declare interface PillButtonProps {
     tone?: PillButtonTone;
     /** Sits after the label — a caret on a pill that opens a menu. */
     trailingIcon?: default_2.ReactNode;
-    onClick?: () => void;
+    onClick?: (event: default_2.MouseEvent<HTMLElement>) => void;
+    /** Renders the pill as a real anchor, so a link pill keeps cmd-click, copy-link and the status bar. */
+    href?: string;
+    target?: default_2.HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 
 /**
@@ -4210,6 +4216,8 @@ export declare interface SurfaceRowProps extends SurfaceRowChromeProps {
     onClick?: (event: default_2.MouseEvent) => void;
     /** Renders the clickable row as an anchor instead of a button. */
     href?: string;
+    target?: default_2.HTMLAttributeAnchorTarget;
+    rel?: string;
     /** Content pinned right, outside the row button, so it may hold its own control. */
     trailing?: default_2.ReactNode;
     /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */