@ntmats/hc-ui 0.5.0 → 0.6.0

package/README.md

@@ -50,6 +50,19 @@ Both open below the trigger, aligned by its end, 4px away (`side="bottom|top"`,
 
 `SortMenu` (experimental) is HCUI's desktop sort control: a `Chip` (`size="sm"` by default, `triggerClassName` for a class) showing the current option, named "`label`: option", that opens a `Menu` with a `MenuRadioGroup` of `options` (`value`, `label`, optional `hint` and `disabled`), with the `Menu` keyboard and focus. `applied` marks a choice in effect with the ring; other `Menu` props (`align`, `side`, `portal`, `open`, `onOpenChange`) pass through. On phones, compose instead: `IconButton variant="outline" size="lg"` with `aria-haspopup="dialog"` opens a `Sheet` with `SheetOptions` (its card look, as every sheet list).
 
+Options for HCUI's remaining local pieces (unreleased, experimental; opt-in, except the visible changes listed in the CHANGELOG):
+
+- `Button`: `variant="ghost"` (no fill, only the hover and press veil) and `tone="danger"` (danger text on `secondary`, `outline` and `ghost`), e.g. `variant="ghost" tone="danger"` for a text-only destructive action. As a popup trigger (`aria-haspopup`) that is open (`aria-expanded="true"`), `secondary`, `outline` and `ghost` draw the 1.5px ring in the text color, as `Chip`.
+- `IconButton`: `size="xs"` (28px, keeping a 44px touch target) and `tone="muted"` (text-muted). A `ghost` popup trigger keeps its hover fill while open.
+- `Chip`: `variant="muted"` (gray fill without ring; with `onClear` at `md`/`sm`, the main button fills the height and the × is 26px, 5px from the end), `badgePlacement="corner"` (the badge on the top right corner, brand fill, a 2px ring of `--hc-chip-badge-ring`, default `bg-page`), a chip with an `icon` and no label is a circle, and `informative` (disabled but not dimmed).
+- `SheetChips`: `size`, passed to every `Chip`.
+- `Dialog` and `Sheet`: `bodyClassName` (the scrolling body's class). `Sheet header={false}` drops the header (no title, no close button) for content with its own heading and floating close; `aria-label` names the dialog (required by the type), and the body has no padding. The entry animations no longer leave a transform on the dialog, so fixed popups portaled into it are not clipped; a touch inside a portaled popup (`.hc-ui-portal`) does not drag the sheet.
+- `portalContainerFor(node)`: the open `<dialog>` around `node`, else `document.body` (null on the server). Use it for the app's own tips, so they show above a modal `Dialog` or `Sheet` and receive touches instead of staying behind the top layer; `Menu` and `Popover` with `portal` already do this.
+- `Surface`: `as` (`div`, `section`, `article`, `aside`, `ul`, `ol`, `li`) and `tone="muted"` (the `bg-muted-2` card: 20px corners, `shadow-card`).
+- `FilterBar`: `bleed` (negative margin of `--hc-filter-bar-bleed-start`/`-end`, default `--hc-filter-bar-bleed`, given back as padding) and `rowClassName`; the row is `position: relative`, so an absolute popup placed in it is anchored to it.
+- `Dialog size="sm"` no longer forces 38px buttons: they keep their own size.
+- `SegmentedControl`: `optionMinWidth` (px).
+
 `Table` (experimental) is a dense data table on a semantic `<table>`: HCUI's desktop Meta table. `columns` describe it (`key`, `header`, `cell(row, index)` with free content, `align` `start`/`center`/`end`, `numeric` for end-aligned tabular figures, `width` in px or any CSS length, `tone` `muted` or `secondary` for the header and cells, `className` for the header and every cell, such as a class that hides an optional column in a narrow container, and `rowHeader` for the cell that names the row, rendered as `<th scope="row">`); `rows` and `rowKey` give the data, already filtered, formatted and in order. A `sortable` column puts its header text in a button and carries `aria-sort` (`none` until sorted); `sort` (`{ key, direction }`) marks the sorted column, which shows a 12px arrow, and `onSort(key)` reports a press: the new order (toggle, default direction) and sorting the rows are the caller's. `stickyHeader` sticks the header row to the top of the scrolling ancestor at `--hc-table-sticky-top` (HCUI: under its filter band). `onRowClick` makes the rows react to a press and puts the row header's content in a button, so the keyboard reaches each row once (its press does not also reach the row); give a `rowHeader` column, or rows can only be pressed with a pointer. `selectedKey` fills the row open elsewhere (a side panel) with `bg-muted` and sets `aria-current` on its button. Rows are 4px 8px cells with a line under each and the `bg-muted-2` hover; the header is 11px muted text on the surface fill with a line under it. Focus rings are the shared 2px ring unless `--hc-focus-ring-offset` is set. Empty states, pagination ("show more") and the cell content styles are the caller's. It forwards its ref to the `<table>`.
 
 `PageHeader` (experimental) is HCUI's desktop page heading: a row of at least 40px with the `title` (22px semibold on a 27.5px line, pulled up 4px to drop the font's inner space; an `h1` by default, `level` 2 or 3 change only the tag), an optional `count` in muted 13px text inside the heading after a space (hidden at 0) and `actions` at the end, 8px apart. The row wraps when it does not fit. `visuallyHidden` keeps the heading only for assistive technology, for a page whose content already shows its title. Spacing around it is the caller's. As in HCUI, the title's font is set with the `font` shorthand, which drops the `ROND` axis: this reproduces HCUI's look. It forwards its ref to the `<header>`.

package/dist/index.d.ts

@@ -1,13 +1,18 @@
-import { type ButtonHTMLAttributes, type Dispatch, type HTMLAttributes, type InputHTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref, type SetStateAction } from 'react';
-export type SurfaceTone = 'page' | 'main' | 'content' | 'elevated' | 'overlay' | 'card';
-export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+import { type ButtonHTMLAttributes, type Dispatch, type ForwardRefExoticComponent, type RefAttributes, type HTMLAttributes, type InputHTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref, type SetStateAction } from 'react';
+export type SurfaceTone = 'page' | 'main' | 'content' | 'elevated' | 'overlay' | 'card' | 'muted';
+/** Elements a `Surface` may render as. */
+export type SurfaceElement = 'div' | 'section' | 'article' | 'aside' | 'ul' | 'ol' | 'li';
+export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     tone?: SurfaceTone;
-    /** Corner radius of the rounded tones (`content`, `elevated`, `overlay`, `card`): 16, 20 or 24px.
-     * Defaults to `md` (16px), and to `lg` (20px) for `card`, as HCUI's `surface` mixin. */
+    /** Corner radius of the rounded tones (`content`, `elevated`, `overlay`, `card`, `muted`): 16, 20 or 24px.
+     * Defaults to `md` (16px), and to `lg` (20px) for `card` and `muted`, as HCUI's `surface` mixin. */
     radius?: 'md' | 'lg' | 'xl';
+    /** Element to render: `div` (default), or `section`, `article`, `aside`, `ul`, `ol`, `li`
+     * (a list drawn as a card). Lists keep the browser's margin, padding and markers: reset them in the caller's class. */
+    as?: SurfaceElement;
 }
 /** Semantic color role only; placement, elevation and overlay behavior stay local. */
-export declare function Surface({ tone, radius, className, ...props }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function Surface({ tone, radius, as: Element, className, ...props }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
 export interface SegmentedOption<T extends string> {
     value: T;
     label: string;
@@ -31,12 +36,24 @@ export interface SegmentedControlProps<T extends string> extends Omit<HTMLAttrib
     equalWidth?: boolean;
     /** Fixed width of each option in px; implies `equalWidth`. */
     optionWidth?: number;
+    /** Minimum width of each option in px (HCUI's 92px Coleções/Unidades toggle); a longer label still widens its option. */
+    optionMinWidth?: number;
 }
 /** Controlled, single-choice control with radio semantics and roving focus. */
-export declare function SegmentedControl<T extends string>({ label, value, options, onChange, density, orientation, hideLabels, indicator, equalWidth, optionWidth, className, style, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
-export type ButtonVariant = 'secondary' | 'primary' | 'outline' | 'danger';
+export declare function SegmentedControl<T extends string>({ label, value, options, onChange, density, orientation, hideLabels, indicator, equalWidth, optionWidth, optionMinWidth, className, style, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export type ButtonVariant = 'secondary' | 'primary' | 'outline' | 'danger' | 'ghost';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * `secondary` (default, muted fill), `primary`, `outline`, `danger` (filled) or `ghost`
+     * (no fill, only the hover and press veil). A popup trigger (`aria-haspopup`) that is open
+     * (`aria-expanded="true"`) draws a 1.5px ring in the text color, as `Chip` (not on `primary` and `danger`).
+     */
     variant?: ButtonVariant;
+    /**
+     * Text color of the unfilled variants (`secondary`, `outline`, `ghost`): `default` or `danger`
+     * (HCUI's "Fechar e descartar alterações": `variant="ghost" tone="danger"`). Ignored by `primary` and `danger`.
+     */
+    tone?: 'default' | 'danger';
     /** 36, 44 or 52px. */
     size?: 'sm' | 'md' | 'lg';
     /** Decorative icon before the label; pass it already sized (18px in HCUI). */
@@ -53,17 +70,19 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     wrap?: boolean;
 }
 /** Pill button. The caller supplies the label text and handles the action. */
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
 export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
     /** Accessible name and tooltip; required because the button has no text. */
     label: string;
     icon: ReactNode;
-    /** 36, 40 or 44px. The 36px size keeps a 44px touch target. */
-    size?: 'sm' | 'md' | 'lg';
-    tone?: 'primary' | 'secondary';
+    /** 28 (`xs`, dense toolbars and ⋯ triggers), 36, 40 or 44px. `xs` and `sm` keep a 44px touch target. */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Icon color: `primary` (default), `secondary` or `muted` (text-muted, HCUI's ⋯ triggers). */
+    tone?: 'primary' | 'secondary' | 'muted';
     /** Fill: `muted` (default, HCUI `icon-button`), `surface` (surface with the card ring
      * and shadow, HCUI's mobile theme button), `outline` (surface with a 1px border ring,
-     * HCUI's mobile sort button) or `ghost` (no fill until hover). */
+     * HCUI's mobile sort button) or `ghost` (no fill until hover; an open popup trigger,
+     * `aria-haspopup` with `aria-expanded="true"`, keeps the hover look). */
     variant?: 'muted' | 'surface' | 'outline' | 'ghost';
     /** `circle` (default) or `rounded` (a 12px-radius square, HCUI's desktop utilities). */
     shape?: 'circle' | 'rounded';
@@ -74,7 +93,7 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     iconKey?: string | number;
 }
 /** Round icon-only button (back, close, options). */
-export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
 interface ChipBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Toggle state for filters; omit for a plain action chip. */
     selected?: boolean;
@@ -85,8 +104,12 @@ interface ChipBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * desktop quick filters and chosen-value tags); selected turns to the contrast fill.
      */
     size?: 'md' | 'sm' | 'xs';
-    /** `outline` (default), or `quiet`: lighter ring and secondary text, bolder once applied (HCUI's rule filter pills). */
-    variant?: 'outline' | 'quiet';
+    /**
+     * `outline` (default); `quiet`: lighter ring and secondary text, bolder once applied (HCUI's rule
+     * filter pills); `muted`: gray fill without ring (HCUI's search conditions). With `onClear`, a
+     * `muted` chip of `md` or `sm` draws its × at 26px, concentric with the pill's end.
+     */
+    variant?: 'outline' | 'quiet' | 'muted';
     /** A filter with values applied: a 1.5px ring in the primary text color (and primary, bolder text when `quiet`). */
     applied?: boolean;
     /**
@@ -99,6 +122,17 @@ interface ChipBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * `undefined` (e.g. `badge={n || undefined}`) to hide it when nothing is applied.
      */
     badge?: ReactNode;
+    /**
+     * Where the badge goes: `inline` (default, after the label) or `corner` (on the top right
+     * corner, in the brand color with a ring of `--hc-chip-badge-ring`, default `bg-page`; HCUI's
+     * mobile Meta filter button). A chip with an `icon` and no label is a circle.
+     */
+    badgePlacement?: 'inline' | 'corner';
+    /**
+     * Information, not an action: the chip cannot be pressed (the button is disabled) but keeps
+     * its full color instead of dimming (HCUI's Meta era chip when only one era fits the format).
+     */
+    informative?: boolean;
     /**
      * Down chevron at the end. On by default when the chip opens a popup (`aria-haspopup`,
      * which `Menu` and `Popover` give their trigger); `aria-expanded="true"` draws the ring.
@@ -127,7 +161,7 @@ export type ChipProps = ChipBaseProps & ({
  * trigger it takes a `badge` with the number of values applied, `applied`, and the
  * chevron and ring of an open popup; `onClear` adds a remove button.
  */
-export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Chip: ForwardRefExoticComponent<ChipProps & RefAttributes<HTMLButtonElement>>;
 export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
     /** Accessible name of the group (e.g. "Filtros"). */
     label: string;
@@ -147,13 +181,25 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
     density?: 'comfortable' | 'compact';
     /** A band that sticks to the top of the scrolling panel, with the surface fill and 8px above and below (HCUI's desktop filter bar). The offset is `--hc-filter-bar-top`. */
     sticky?: boolean;
+    /**
+     * The bar reaches the panel's edges: a negative margin of `--hc-filter-bar-bleed-start` and
+     * `--hc-filter-bar-bleed-end` (both default to `--hc-filter-bar-bleed`, else 0) given back as
+     * padding, so the content stays in place and a sticky band covers the full width (HCUI's
+     * `.desktop-filter-bar`, which content bleeding to the edge passes under).
+     */
+    bleed?: boolean;
+    /**
+     * Class of the row that holds the filters. The row is `position: relative`, so a popup the
+     * caller places with `position: absolute` inside it is anchored to the row (HCUI's "Mais filtros").
+     */
+    rowClassName?: string;
 }
 /**
  * Layout of a row of filters (`Chip`s) with optional `start`, `end` and `footer` slots.
  * Presentation only: which filters exist, their values, the search rules and persistence
  * are the caller's. A scrolling row bleeds into the page gutter by `--hc-filter-bar-bleed`.
  */
-export declare const FilterBar: import("react").ForwardRefExoticComponent<FilterBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FilterBar: ForwardRefExoticComponent<FilterBarProps & RefAttributes<HTMLDivElement>>;
 export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Accessible name. Visible above the field unless `hideLabel` is set. */
     label: string;
@@ -169,7 +215,7 @@ export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     error?: ReactNode;
 }
 /** Filled pill text field. Value, validation and messages stay with the caller. */
-export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Field: ForwardRefExoticComponent<FieldProps & RefAttributes<HTMLInputElement>>;
 export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
     width?: string | number;
     height?: string | number;
@@ -218,7 +264,7 @@ export type MeterProps = MeterOwnProps & (
  * Bar of a value against a limit (`role="meter"`), with an over-the-limit tone. It
  * renders only spans, so it fits inside a button. Placement (absolute, grid) is the caller's.
  */
-export declare const Meter: import("react").ForwardRefExoticComponent<MeterProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Meter: ForwardRefExoticComponent<MeterProps & RefAttributes<HTMLSpanElement>>;
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /** 20px (touch lists, sheets) or 16px (dense desktop lists). */
     size?: 'sm' | 'md';
@@ -230,7 +276,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * and `<label>` behave as usual. Wrap it in a `<label>` (the whole row becomes the
  * target) or pass `aria-label`; the caller supplies the text.
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
 export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title' | 'open' | 'onClose' | 'onCancel'> {
     /** Controlled: the dialog shows while `open` is true and plays its exit before unmounting. */
     open: boolean;
@@ -254,17 +300,17 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'ti
     size?: 'sm' | 'md';
     /** Esc and a backdrop click ask to close. Default true. */
     dismissible?: boolean;
+    /** Class of the body that holds the children (and scrolls in `md`), e.g. to reserve the scrollbar's gutter. */
+    bodyClassName?: string;
 }
 /**
  * Centered modal dialog on the native `<dialog>` and `showModal()`: the browser
  * keeps it in the top layer, makes the rest of the page inert and traps Tab.
  * The caller owns `open` and the texts; the dialog only asks to close.
  */
-export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const Dialog: ForwardRefExoticComponent<DialogProps & RefAttributes<HTMLDialogElement>>;
 export type SheetPresentation = 'bottom' | 'center' | 'auto';
-export interface SheetProps extends Omit<DialogProps, 'size' | 'actions' | 'description' | 'closeLabel'> {
-    /** Accessible name of the close button, which every sheet shows. */
-    closeLabel: string;
+interface SheetBaseProps extends Omit<DialogProps, 'size' | 'actions' | 'description' | 'closeLabel' | 'title'> {
     /** Slot under the scrolling body, for the buttons (Clear | Done). */
     footer?: ReactNode;
     /**
@@ -276,6 +322,25 @@ export interface SheetProps extends Omit<DialogProps, 'size' | 'actions' | 'desc
     /** Maximum width of the centered panel, in px. Default 440. */
     width?: number;
 }
+/**
+ * `Sheet` props. By default the sheet has a header with the title (its accessible name) and a
+ * close button. `header={false}` drops both: the content brings its own heading and floating
+ * close button (HCUI's unit sheet), and `aria-label` names the dialog. The body then has no
+ * padding, and at the bottom the grabber (drawn above the content) covers its top 16px.
+ */
+export type SheetProps = SheetBaseProps & ({
+    header?: true;
+    /** Visible heading; it names the sheet. */
+    title: ReactNode;
+    /** Accessible name of the close button, which every sheet with a header shows. */
+    closeLabel: string;
+} | {
+    header: false;
+    'aria-label': string;
+    title?: never;
+    closeLabel?: never;
+    closeIcon?: never;
+});
 /**
  * Modal sheet on the `Dialog` base (native `<dialog>`, `showModal()`): the same focus,
  * Tab trap, Esc, focus return, scroll lock, stacking and controlled `open`/`onClose`.
@@ -283,7 +348,7 @@ export interface SheetProps extends Omit<DialogProps, 'size' | 'actions' | 'desc
  * flick) and drag up from the grabber or header to full height; content that has
  * scrolled down scrolls back before the sheet moves.
  */
-export declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const Sheet: ForwardRefExoticComponent<SheetProps & RefAttributes<HTMLDialogElement>>;
 export interface SheetOption<T extends string> {
     value: T;
     label: ReactNode;
@@ -315,9 +380,11 @@ export interface SheetChipsProps<T extends string> extends SheetChoiceProps<T> {
         label: ReactNode;
         disabled?: boolean;
     }[];
+    /** Size of every chip, as `Chip`'s: `md` (default), `sm` or `xs`. */
+    size?: ChipProps['size'];
 }
 /** Single-choice group of `Chip`s that wrap (HCUI's SheetChips), for inside a sheet. */
-export declare function SheetChips<T extends string>({ label, options, value, onChange, className, ...props }: SheetChipsProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SheetChips<T extends string>({ label, options, value, onChange, size, className, ...props }: SheetChipsProps<T>): import("react/jsx-runtime").JSX.Element;
 export type PopupSide = 'bottom' | 'top';
 export type PopupAlign = 'start' | 'end';
 /** Props a trigger receives: spread them on the element that opens the popup. */
@@ -368,6 +435,14 @@ export declare function placePopup(trigger: Rect, size: {
     side: PopupSide;
     align: PopupAlign;
 };
+/**
+ * Where to portal something that floats over `node` (a tip, a tooltip): the open `<dialog>`
+ * around it, else `document.body`. A modal dialog (`Dialog`, `Sheet`) is in the top layer and
+ * makes the rest of the page inert, so a tip portaled to `body` from inside it would stay
+ * behind it and get no touches; inside the dialog it shows above it. `Menu` and `Popover`
+ * with `portal` already do this. On the server (no document) it returns null.
+ */
+export declare function portalContainerFor(node: Element | null | undefined): HTMLElement | null;
 export interface MenuProps extends PopupBaseProps, Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
     /** Accessible name of the menu (`aria-label`). */
     label: string;
@@ -381,7 +456,7 @@ export interface MenuProps extends PopupBaseProps, Omit<HTMLAttributes<HTMLDivEl
  * typing move between items; Enter/Space choose; Esc closes and returns focus to the
  * trigger; Tab closes and moves on; a press outside closes.
  */
-export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<HTMLDivElement>>;
 interface MenuItemBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'role' | 'onSelect'> {
     /** Decorative icon at the end of the row; pass it already sized (15px in HCUI). */
     icon?: ReactNode;
@@ -395,7 +470,7 @@ export interface MenuItemProps extends MenuItemBaseProps {
     onSelect?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 /** An action (`menuitem`). It closes the menu; focus returns to the trigger unless the action moved it. */
-export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLButtonElement>>;
 export interface MenuRadioGroupProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'onChange'> {
     value: T;
     onValueChange: (value: NoInfer<T>) => void;
@@ -408,7 +483,7 @@ export interface MenuItemRadioProps extends MenuItemBaseProps {
     value: string;
 }
 /** A `menuitemradio`: the chosen one is bold with a check. Choosing closes the menu and returns focus to the trigger. */
-export declare const MenuItemRadio: import("react").ForwardRefExoticComponent<MenuItemRadioProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const MenuItemRadio: ForwardRefExoticComponent<MenuItemRadioProps & RefAttributes<HTMLButtonElement>>;
 export interface MenuItemCheckboxProps extends MenuItemBaseProps {
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
@@ -416,7 +491,7 @@ export interface MenuItemCheckboxProps extends MenuItemBaseProps {
     closeOnSelect?: boolean;
 }
 /** A `menuitemcheckbox`: toggles in place, with a check while on. */
-export declare const MenuItemCheckbox: import("react").ForwardRefExoticComponent<MenuItemCheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const MenuItemCheckbox: ForwardRefExoticComponent<MenuItemCheckboxProps & RefAttributes<HTMLButtonElement>>;
 /** A line between groups of items. */
 export declare function MenuSeparator({ className, ...props }: Omit<HTMLAttributes<HTMLDivElement>, 'role'>): import("react/jsx-runtime").JSX.Element;
 /** Plain text inside the menu, such as a question before a destructive choice. Not focusable. */
@@ -465,7 +540,7 @@ export interface PopoverProps extends PopupBaseProps, Omit<HTMLAttributes<HTMLDi
  * not trapped. The caller supplies the content and its texts. Esc is taken before it
  * reaches the content (so an enclosing Dialog stays open): a field inside cannot use it.
  */
-export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Popover: ForwardRefExoticComponent<PopoverProps & RefAttributes<HTMLDivElement>>;
 export type TableSortDirection = 'ascending' | 'descending';
 export interface TableColumn<Row> {
     /** Stable id of the column; it is what `sort.key` and `onSort` name. */
@@ -530,7 +605,7 @@ export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
     visuallyHidden?: boolean;
 }
 /** Desktop page header: one line with the title (22px, semibold) and actions at the end. */
-export declare const PageHeader: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HTMLElement>>;
+export declare const PageHeader: ForwardRefExoticComponent<PageHeaderProps & RefAttributes<HTMLElement>>;
 export interface PanelHeaderStep {
     label: string;
     /** Goes back to this step. The last step is the current one and is never a button. */
@@ -569,14 +644,14 @@ export interface PanelHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
     closeIcon?: ReactNode;
 }
 /** Header of a panel or section: title (or a trail), optional eyebrow, subtitle, icon, actions and close button. */
-export declare const PanelHeader: import("react").ForwardRefExoticComponent<PanelHeaderProps & import("react").RefAttributes<HTMLElement>>;
+export declare const PanelHeader: ForwardRefExoticComponent<PanelHeaderProps & RefAttributes<HTMLElement>>;
 export type ListRowProps = ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * A tappable list row (HCUI's `list-row` mixin): full width, at least 56px, 8px 16px of padding,
  * a 12px gap between its children, a translucent veil on hover and press and the focus ring inside.
  * The content and its semantics (`aria-pressed`, `role="option"`) are the caller's.
  */
-export declare const ListRow: import("react").ForwardRefExoticComponent<ListRowProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ListRow: ForwardRefExoticComponent<ListRowProps & RefAttributes<HTMLButtonElement>>;
 export interface CommandPaletteItem {
     /** Unique among all items. */
     key: string;
@@ -640,7 +715,7 @@ export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDialogEleme
  * into view; Enter selects, ⌘/Ctrl+Enter takes the alternative; the pointer activates the
  * item under it. Texts, results and actions come from the caller.
  */
-export declare const CommandPalette: import("react").ForwardRefExoticComponent<CommandPaletteProps & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const CommandPalette: ForwardRefExoticComponent<CommandPaletteProps & RefAttributes<HTMLDialogElement>>;
 /**
  * Walks a list of image addresses: starts at the first and moves to the next on
  * each load error. Starts over when the list changes. `src` is `undefined` once
@@ -682,7 +757,7 @@ export interface MiniDialViewProps {
  * The dial summarized in small squares: one column per click, one row per value
  * (speed, attack, defense, damage). The cell size is `--hc-mini-dial-cell` (7px).
  */
-export declare const MiniDialView: import("react").ForwardRefExoticComponent<MiniDialViewProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const MiniDialView: ForwardRefExoticComponent<MiniDialViewProps & RefAttributes<HTMLSpanElement>>;
 export interface PowerIconViewProps {
     /** Power color (the circle's fill). */
     color: string;
@@ -693,7 +768,7 @@ export interface PowerIconViewProps {
     size?: number;
 }
 /** Power icon: a circle in the power color with the value symbol on top. */
-export declare const PowerIconView: import("react").ForwardRefExoticComponent<PowerIconViewProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const PowerIconView: ForwardRefExoticComponent<PowerIconViewProps & RefAttributes<HTMLSpanElement>>;
 export interface StatGlyphViewProps {
     /** Address of the symbol, already built. */
     src: string;
@@ -702,7 +777,7 @@ export interface StatGlyphViewProps {
     size?: number;
 }
 /** The value symbol alone (no circle), in neutral gray. Used in the dial legend. */
-export declare const StatGlyphView: import("react").ForwardRefExoticComponent<StatGlyphViewProps & import("react").RefAttributes<HTMLImageElement>>;
+export declare const StatGlyphView: ForwardRefExoticComponent<StatGlyphViewProps & RefAttributes<HTMLImageElement>>;
 export interface SpecialIconViewProps {
     /** Round white background (the image server's `sp/white.svg`), already built. */
     backgroundSrc: string;
@@ -711,7 +786,7 @@ export interface SpecialIconViewProps {
     size?: number;
 }
 /** Special power and trait icon: a white circle with a symbol in the middle. */
-export declare const SpecialIconView: import("react").ForwardRefExoticComponent<SpecialIconViewProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SpecialIconView: ForwardRefExoticComponent<SpecialIconViewProps & RefAttributes<HTMLSpanElement>>;
 export interface EquipmentIconProps {
     size?: number;
 }
@@ -752,7 +827,7 @@ export interface AvatarViewProps {
  * `fallbackSrc` (with `data-fallback` and the muted fill). The image cannot be
  * dragged, selected or opened in a context menu.
  */
-export declare const AvatarView: import("react").ForwardRefExoticComponent<AvatarViewProps & import("react").RefAttributes<HTMLImageElement>>;
+export declare const AvatarView: ForwardRefExoticComponent<AvatarViewProps & RefAttributes<HTMLImageElement>>;
 export interface SetIconViewProps {
     /** Addresses of the set icon, in the order to try. Empty: renders nothing. */
     sources: readonly string[];
@@ -761,7 +836,7 @@ export interface SetIconViewProps {
     title?: string;
 }
 /** Set icon. Tries each address in order and disappears when none loads. Decorative: the set name is next to it. */
-export declare const SetIconView: import("react").ForwardRefExoticComponent<SetIconViewProps & import("react").RefAttributes<HTMLImageElement>>;
+export declare const SetIconView: ForwardRefExoticComponent<SetIconViewProps & RefAttributes<HTMLImageElement>>;
 /** Value rows of the dial, top to bottom (the top row is the click number). */
 export declare const COMBAT_DIAL_STATS: readonly ["speed", "attack", "defense", "damage"];
 export type CombatDialStat = (typeof COMBAT_DIAL_STATS)[number];
@@ -888,7 +963,7 @@ export interface CombatDialViewProps {
  * printed card, the header with the point values. Hover, touch and keyboard on
  * the cells open the tip through `onTipChange`; the caller draws the tip.
  */
-export declare const CombatDialView: import("react").ForwardRefExoticComponent<CombatDialViewProps & import("react").RefAttributes<HTMLElement>>;
+export declare const CombatDialView: ForwardRefExoticComponent<CombatDialViewProps & RefAttributes<HTMLElement>>;
 export declare const PHYSICAL_CARD_WIDTH = 375;
 export declare const PHYSICAL_CARD_HEIGHT = 525;
 export declare const PHYSICAL_CARD_BACK_TABLE_HEIGHT = 440;
@@ -1225,7 +1300,7 @@ export declare function PhysicalCardFocusView({ label, onClose, children }: Phys
  * holding to open the focus view and flipping in it, and opens the tips through
  * `onTipChange`; drawing the tip, translating and copying are the caller's.
  */
-export declare const PhysicalCardView: import("react").ForwardRefExoticComponent<PhysicalCardViewProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PhysicalCardView: ForwardRefExoticComponent<PhysicalCardViewProps & RefAttributes<HTMLDivElement>>;
 /**
  * A faithful port of hcmaps.net's map drawing engine (map.js / tile.js / edge.js /
  * wall.js), the same engine HCUnits uses to draw the map's canvas. It reads the
@@ -1516,7 +1591,7 @@ export interface MapBoardViewProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * the tooltip shows are the caller's. Other attributes (role, focus, keyboard,
  * `aria-*`, `data-*`) go to the container.
  */
-export declare const MapBoardView: import("react").ForwardRefExoticComponent<MapBoardViewProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MapBoardView: ForwardRefExoticComponent<MapBoardViewProps & RefAttributes<HTMLDivElement>>;
 export interface MapBoardPlaceholderProps {
     /** Read by screen readers while the map loads (e.g. "Loading map"). */
     label: string;

package/dist/index.js

@@ -6,8 +6,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { cloneElement, createContext, forwardRef, Fragment, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
-function Surface({ tone = "content", radius, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone, "data-radius": radius });
+function Surface({ tone = "content", radius, as: Element = "div", className, ...props }) {
+  return /* @__PURE__ */ jsx(Element, { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone, "data-radius": radius });
 }
 function SegmentedControl({
   label,
@@ -20,6 +20,7 @@ function SegmentedControl({
   indicator = "static",
   equalWidth = false,
   optionWidth,
+  optionMinWidth,
   className,
   style,
   ...props
@@ -33,7 +34,8 @@ function SegmentedControl({
   const layout = {
     ...equal ? { "--hc-segmented-count": options.length } : {},
     ...slide ? { "--hc-segmented-index": Math.max(knobIndex, 0) } : {},
-    ...optionWidth !== void 0 ? { "--hc-segmented-option-width": `${optionWidth}px` } : {}
+    ...optionWidth !== void 0 ? { "--hc-segmented-option-width": `${optionWidth}px` } : {},
+    ...optionMinWidth !== void 0 ? { "--hc-segmented-option-min-width": `${optionMinWidth}px` } : {}
   };
   const move = (index, key) => {
     if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return false;
@@ -103,7 +105,7 @@ function SegmentedControl({
   );
 }
 var classes = (...names) => names.filter(Boolean).join(" ");
-var Button = forwardRef(function Button2({ variant = "secondary", size = "md", icon, iconEnd, fullWidth = false, loading = false, wrap = false, type = "button", className, children, onClick, ...props }, ref) {
+var Button = forwardRef(function Button2({ variant = "secondary", tone = "default", size = "md", icon, iconEnd, fullWidth = false, loading = false, wrap = false, type = "button", className, children, onClick, ...props }, ref) {
   const handleClick = (event) => {
     if (loading) event.preventDefault();
     else onClick?.(event);
@@ -120,6 +122,7 @@ var Button = forwardRef(function Button2({ variant = "secondary", size = "md", i
       "aria-disabled": loading || props["aria-disabled"],
       "data-variant": variant,
       "data-size": size,
+      "data-tone": tone === "default" ? void 0 : tone,
       "data-full-width": fullWidth || void 0,
       "data-wrap": wrap || void 0,
       children: [
@@ -153,31 +156,33 @@ var glyph = (size, d) => /* @__PURE__ */ jsx("svg", { width: size, height: size,
 var CHEVRON_DOWN = "M6 9L12 15L18 9";
 var XMARK = "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426";
 var visible = (node) => node !== void 0 && node !== null && node !== false && node !== "";
-var Chip = forwardRef(function Chip2({ selected, icon, size = "md", variant = "outline", applied = false, count, badge, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
+var Chip = forwardRef(function Chip2({ selected, icon, size = "md", variant = "outline", applied = false, count, badge, badgePlacement = "inline", informative = false, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
   const popup = props["aria-haspopup"];
   const withChevron = chevron ?? (popup !== void 0 && popup !== false && popup !== "false");
   const look = {
     "data-size": size === "md" ? void 0 : size,
     "data-variant": variant === "outline" ? void 0 : variant,
-    "data-applied": applied || void 0
+    "data-applied": applied || void 0,
+    "data-icon-only": icon && !visible(children) || void 0,
+    "data-informative": informative || void 0
   };
   const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
     children,
     visible(count) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__count", children: count }),
-    visible(badge) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__badge", children: badge }),
+    visible(badge) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__badge", "data-placement": badgePlacement === "corner" ? "corner" : void 0, children: badge }),
     withChevron && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__chevron", "aria-hidden": "true", children: glyph(size === "xs" ? 12 : 14, CHEVRON_DOWN) })
   ] });
   if (!onClear) {
-    return /* @__PURE__ */ jsx("button", { ...props, ref, type, "aria-pressed": selected, className: classes("hc-ui-chip", className), ...look, children: content });
+    return /* @__PURE__ */ jsx("button", { ...props, ...informative ? { disabled: true } : {}, ref, type, "aria-pressed": selected, className: classes("hc-ui-chip", className), ...look, children: content });
   }
   const { style, id, onClick, disabled, ...rest } = props;
   return /* @__PURE__ */ jsxs("span", { className: classes("hc-ui-chip", className), style, ...look, "data-clearable": "", "data-selected": selected || void 0, "data-disabled": disabled || void 0, children: [
-    onClick ? /* @__PURE__ */ jsx("button", { ...rest, id, ref, type, disabled, "aria-pressed": selected, className: "hc-ui-chip__main", onClick, children: content }) : /* @__PURE__ */ jsx("span", { id, className: "hc-ui-chip__main", children: content }),
+    onClick ? /* @__PURE__ */ jsx("button", { ...rest, id, ref, type, disabled: informative || disabled, "aria-pressed": selected, className: "hc-ui-chip__main", onClick, children: content }) : /* @__PURE__ */ jsx("span", { id, className: "hc-ui-chip__main", children: content }),
     /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-chip__clear", "aria-label": clearLabel, title: clearLabel, disabled, onClick: onClear, children: glyph(12, XMARK) })
   ] });
 });
-var FilterBar = forwardRef(function FilterBar2({ label, start, end, footer, layout = "auto", density = "comfortable", sticky = false, className, children, ...props }, ref) {
+var FilterBar = forwardRef(function FilterBar2({ label, start, end, footer, layout = "auto", density = "comfortable", sticky = false, bleed = false, rowClassName, className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -189,10 +194,11 @@ var FilterBar = forwardRef(function FilterBar2({ label, start, end, footer, layo
       "data-layout": layout,
       "data-density": density === "comfortable" ? void 0 : density,
       "data-sticky": sticky || void 0,
+      "data-bleed": bleed || void 0,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "hc-ui-filter-bar__line", children: [
           start && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__start", children: start }),
-          /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__row", children }),
+          /* @__PURE__ */ jsx("div", { className: classes("hc-ui-filter-bar__row", rowClassName), children }),
           end && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__end", children: end })
         ] }),
         footer && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__footer", children: footer })
@@ -323,7 +329,7 @@ var outside = (element, x, y) => {
   const box = element.getBoundingClientRect();
   return x < box.left || x > box.right || y < box.top || y > box.bottom;
 };
-var Dialog = forwardRef(function Dialog2({
+var DialogBase = forwardRef(function Dialog({
   open,
   onClose,
   title,
@@ -334,6 +340,8 @@ var Dialog = forwardRef(function Dialog2({
   closeIcon,
   size = "md",
   dismissible = true,
+  bodyClassName,
+  headerless = false,
   className,
   onClick,
   onPointerDown,
@@ -348,6 +356,7 @@ var Dialog = forwardRef(function Dialog2({
   }, [ref]);
   const id = useId();
   const titleId = `${id}-title`;
+  const bodyId = `${id}-body`;
   const descriptionId = description ? `${id}-description` : void 0;
   const [mounted, setMounted] = useState(open);
   const [closing, setClosing] = useState(false);
@@ -362,7 +371,7 @@ var Dialog = forwardRef(function Dialog2({
   });
   const keepFocus = useRef(null);
   const handleMount = useCallback(() => {
-    const dialog = document.getElementById(titleId)?.closest("dialog");
+    const dialog = (document.getElementById(titleId) ?? document.getElementById(bodyId))?.closest("dialog");
     if (!dialog) return () => {
     };
     const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -381,7 +390,7 @@ var Dialog = forwardRef(function Dialog2({
         if (lost && !dialog.open && trigger?.isConnected) trigger.focus({ preventScroll: true });
       });
     };
-  }, [titleId]);
+  }, [titleId, bodyId]);
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!closing || !dialog) return;
@@ -428,7 +437,7 @@ var Dialog = forwardRef(function Dialog2({
     if (fromBackdrop && latest.current.dismissible && !latest.current.closing) latest.current.onClose();
   };
   if (!mounted) return null;
-  const hasBody = Boolean(description) || children !== void 0 && children !== null && children !== false;
+  const hasBody = headerless || Boolean(description) || children !== void 0 && children !== null && children !== false;
   return /* @__PURE__ */ jsxs(
     "dialog",
     {
@@ -437,7 +446,8 @@ var Dialog = forwardRef(function Dialog2({
       className: classes("hc-ui-dialog", className),
       "data-size": size,
       "data-closing": closing || void 0,
-      "aria-labelledby": titleId,
+      "data-headerless": headerless || void 0,
+      "aria-labelledby": headerless ? void 0 : titleId,
       "aria-describedby": classes(descriptionId, describedBy) || void 0,
       onCancel: handleCancel,
       onClose: handleNativeClose,
@@ -445,11 +455,11 @@ var Dialog = forwardRef(function Dialog2({
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx(DialogMount, { onMount: handleMount }),
-        /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__header", children: [
+        !headerless && /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__header", children: [
           /* @__PURE__ */ jsx("h2", { className: "hc-ui-dialog__title", id: titleId, children: title }),
           closeLabel && /* @__PURE__ */ jsx(IconButton, { className: "hc-ui-dialog__close", label: closeLabel, icon: closeIcon ?? closeGlyph, size: "sm", tone: "secondary", onClick: () => latest.current.onClose() })
         ] }),
-        hasBody && /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__body", children: [
+        hasBody && /* @__PURE__ */ jsxs("div", { className: classes("hc-ui-dialog__body", bodyClassName), id: headerless ? bodyId : void 0, children: [
           description && /* @__PURE__ */ jsx("p", { className: "hc-ui-dialog__description", id: descriptionId, children: description }),
           children
         ] }),
@@ -458,8 +468,9 @@ var Dialog = forwardRef(function Dialog2({
     }
   );
 });
+var Dialog2 = DialogBase;
 var SHEET_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
-var NO_DRAG = 'input, textarea, select, [contenteditable="true"], [data-hc-sheet-nodrag]';
+var NO_DRAG = 'input, textarea, select, [contenteditable="true"], [data-hc-sheet-nodrag], .hc-ui-portal';
 function useSheetDrag(sheet, latest) {
   useEffect(() => {
     const el = sheet;
@@ -591,7 +602,7 @@ function useSheetDrag(sheet, latest) {
     };
   }, [sheet, latest]);
 }
-var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, onClose, className, style, ...props }, ref) {
+var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
   const [node, setNode] = useState(null);
   const setRef = useCallback((element) => {
     setNode(element);
@@ -604,7 +615,7 @@ var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, foo
   useSheetDrag(node, latest);
   const sized = width === 440 ? style : { ...style, "--hc-sheet-width": `${width}px` };
   return /* @__PURE__ */ jsx(
-    Dialog,
+    DialogBase,
     {
       ...props,
       ref: setRef,
@@ -612,6 +623,7 @@ var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, foo
       actions: footer,
       dismissible,
       onClose,
+      headerless: !header,
       className: classes("hc-ui-sheet", className),
       style: sized,
       "data-presentation": presentation
@@ -676,7 +688,7 @@ function SheetOptions({ label, options, value, onChange, className, ...props })
     );
   }) });
 }
-function SheetChips({ label, options, value, onChange, className, ...props }) {
+function SheetChips({ label, options, value, onChange, size = "md", className, ...props }) {
   const item = useRovingRadios(options, value);
   return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-sheet-chips", className), role: "radiogroup", "aria-label": label, children: options.map((option, index) => /* @__PURE__ */ jsx(
     "button",
@@ -687,6 +699,7 @@ function SheetChips({ label, options, value, onChange, className, ...props }) {
       "aria-checked": option.value === value,
       disabled: option.disabled,
       className: "hc-ui-chip",
+      "data-size": size === "md" ? void 0 : size,
       onClick: () => onChange(option.value),
       children: option.label
     },
@@ -716,6 +729,10 @@ function placePopup(trigger, size, boundary, side, align) {
   const finalAlign = !fits(align) && fits(align === "end" ? "start" : "end") ? align === "end" ? "start" : "end" : align;
   return { side: finalSide, align: finalAlign };
 }
+function portalContainerFor(node) {
+  if (typeof document === "undefined") return null;
+  return node?.closest("dialog[open]") ?? document.body;
+}
 var layers = [];
 function themeOf(element) {
   const scoped = element?.closest("[data-theme]")?.getAttribute("data-theme");
@@ -761,7 +778,7 @@ function usePopup({ kind, trigger, open: openProp, defaultOpen = false, onOpenCh
       setContainer(null);
       return;
     }
-    const element = portal instanceof HTMLElement ? portal : triggerRef.current?.closest("dialog[open]") ?? document.body;
+    const element = portal instanceof HTMLElement ? portal : portalContainerFor(triggerRef.current) ?? document.body;
     setContainer({ element, theme: theme ?? themeOf(triggerRef.current) });
   }, [open, portal, theme]);
   const place = useCallback(() => {
@@ -3233,7 +3250,7 @@ export {
   Chip,
   CombatDialView,
   CommandPalette,
-  Dialog,
+  Dialog2 as Dialog,
   EquipmentIcon,
   Field,
   FilterBar,
@@ -3313,6 +3330,7 @@ export {
   physicalCardTiltStyles,
   pickMapScene,
   placePopup,
+  portalContainerFor,
   renderMapThumbnail,
   requestPhysicalCardMotionAccess,
   useImageChain,

package/dist/styles.css

@@ -29,6 +29,13 @@
   border-radius: var(--hc-radius-lg);
   box-shadow: var(--hc-shadow-card);
 }
+/* Muted: the card with the `bg-muted-2` fill (HCUI's `surface` mixin over `bg-muted-2`, as the
+   `SheetOptions` card and HCUI's action lists in sheets). */
+[data-hc-ds] .hc-ui-surface[data-tone='muted'] {
+  background: var(--hc-color-bg-muted-2);
+  border-radius: var(--hc-radius-lg);
+  box-shadow: var(--hc-shadow-card);
+}
 [data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='md'] { border-radius: var(--hc-radius-md); }
 [data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='lg'] { border-radius: var(--hc-radius-lg); }
 [data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='xl'] { border-radius: var(--hc-radius-xl); }
@@ -53,7 +60,8 @@
   align-items: center;
   justify-content: center;
   gap: 6px;
-  min-width: 0;
+  /* `optionMinWidth` sets the custom property; without it, 0 as before. */
+  min-width: var(--hc-segmented-option-min-width, 0);
   min-height: 38px;
   margin: 0;
   padding: 0 var(--hc-space-3);
@@ -224,6 +232,11 @@
 [data-hc-ds] .hc-ui-button[data-variant='primary'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); }
 [data-hc-ds] .hc-ui-button[data-variant='outline'] { background-color: transparent; box-shadow: inset 0 0 0 1px var(--hc-color-border-strong); }
 [data-hc-ds] .hc-ui-button[data-variant='danger'] { color: var(--hc-color-text-on-danger); background-color: var(--hc-color-bg-danger); }
+/* Ghost: no fill, only the veil; `tone="danger"` is HCUI's danger in text only (team-save-menu__btn--danger). */
+[data-hc-ds] .hc-ui-button[data-variant='ghost'] { background-color: transparent; }
+[data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[data-tone='danger'] { color: var(--hc-color-danger); }
+/* An open popup trigger: the 1.5px ring in the text color, as Chip (HCUI's Importar, Entrar and Convidar). */
+[data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true'] { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
 [data-hc-ds] .hc-ui-button[data-size='sm'] { min-height: var(--hc-control-height-chip); padding: 0 var(--hc-space-4); font-size: var(--hc-font-size-sm); }
 [data-hc-ds] .hc-ui-button[data-size='lg'] { min-height: var(--hc-control-height-lg); padding: 0 var(--hc-space-6); font-size: var(--hc-font-size-base); }
 [data-hc-ds] .hc-ui-button[data-full-width] { width: 100%; }
@@ -257,9 +270,12 @@
 }
 [data-hc-ds] .hc-ui-icon-button[data-size='sm'] { width: 36px; height: 36px; overflow: visible; }
 [data-hc-ds] .hc-ui-icon-button[data-size='lg'] { width: 44px; height: 44px; }
+[data-hc-ds] .hc-ui-icon-button[data-size='xs'] { width: 28px; height: 28px; overflow: visible; }
 [data-hc-ds] .hc-ui-icon-button[data-tone='secondary'] { color: var(--hc-color-text-secondary); }
-/* 36px keeps a 44px touch target; the veil stays clipped to the circle. */
+[data-hc-ds] .hc-ui-icon-button[data-tone='muted'] { color: var(--hc-color-text-muted); }
+/* 36 and 28px keep a 44px touch target; the veil stays clipped to the circle. */
 [data-hc-ds] .hc-ui-icon-button[data-size='sm']::before { content: ''; position: absolute; inset: -4px; }
+[data-hc-ds] .hc-ui-icon-button[data-size='xs']::before { content: ''; position: absolute; inset: -8px; }
 /* Fills: surface (HCUI's mobile theme button: surface, card ring and shadow) and ghost
    (HCUI's desktop utilities: no fill, muted fill and primary text on hover). */
 [data-hc-ds] .hc-ui-icon-button[data-variant='surface'] { background-color: var(--hc-color-bg-surface); box-shadow: var(--hc-shadow-card); }
@@ -268,6 +284,8 @@
 @media (hover: hover) {
   [data-hc-ds] .hc-ui-icon-button[data-variant='ghost']:hover:not(:disabled, [aria-pressed='true']) { color: var(--hc-color-text-primary); background-color: var(--hc-color-bg-muted); }
 }
+/* An open popup trigger keeps the hover look, with a mouse or not (HCUI's ⋯ menus). */
+[data-hc-ds] .hc-ui-icon-button[data-variant='ghost'][aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true']:not([aria-pressed='true']) { color: var(--hc-color-text-primary); background-color: var(--hc-color-bg-muted); }
 [data-hc-ds] .hc-ui-icon-button[data-shape='rounded'] { border-radius: var(--hc-radius-sm); }
 [data-hc-ds] .hc-ui-icon-button[aria-pressed='true'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); }
 /* iconKey: the new icon turns in (HCUI's theme sun and moon). */
@@ -381,6 +399,33 @@
 [data-hc-ds] .hc-ui-chip[data-size='xs']:is([aria-pressed='true'], [aria-checked='true'], [data-selected]):hover { color: var(--hc-color-text-on-contrast); background-color: var(--hc-color-bg-contrast); }
 [data-hc-ds] .hc-ui-chip:is([aria-pressed='true'], [aria-checked='true'], [data-selected]) .hc-ui-chip__count { color: inherit; }
 [data-hc-ds] .hc-ui-chip[data-selected] .hc-ui-chip__clear { color: inherit; }
+/* Muted: gray fill without ring (HCUI's search conditions, .search-page__cond). */
+[data-hc-ds] .hc-ui-chip[data-variant='muted'] { background-color: var(--hc-color-bg-muted); box-shadow: none; }
+/* Removable at md and sm: the whole height is the main button, and the 26px × sits 5px from the
+   end, concentric with the pill's curve ((36 - 26) / 2), in the muted color. */
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) { gap: 0; padding: 0 5px 0 0; }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) .hc-ui-chip__main { align-self: stretch; padding: 0 var(--hc-space-1) 0 14px; }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted'][data-size='sm'] .hc-ui-chip__main { padding-left: var(--hc-space-3); }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) .hc-ui-chip__clear { width: 26px; height: 26px; color: var(--hc-color-text-muted); }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-variant='muted']:not([data-size='xs']) .hc-ui-chip__clear svg { width: 14px; height: 14px; }
+/* Only an icon: a circle as tall as the chip. */
+[data-hc-ds] .hc-ui-chip[data-icon-only] { width: var(--hc-control-height-chip); padding: 0; }
+[data-hc-ds] .hc-ui-chip[data-icon-only][data-size='xs'] { width: 26px; }
+/* Corner badge: on the top right corner, brand fill, a ring of the page around it (HCUI's .meta-fchip__count). */
+[data-hc-ds] .hc-ui-chip__badge[data-placement='corner'] {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  padding: 0 var(--hc-space-1);
+  color: var(--hc-color-text-inverse);
+  background-color: var(--hc-color-brand);
+  box-shadow: 0 0 0 2px var(--hc-chip-badge-ring, var(--hc-color-bg-page));
+  font-family: var(--hc-font-mono);
+  font-weight: var(--hc-font-weight-semibold);
+  animation: hc-ui-check-in 260ms var(--hc-ease-pop);
+}
+/* Informative: it cannot be pressed (disabled) but keeps its full color. */
+[data-hc-ds] .hc-ui-chip[data-informative]:disabled { opacity: 1; cursor: default; }
 
 /* FilterBar — a row of filters with start, end and footer slots (HCUI's .desktop-filter-bar,
    .desktop-filter-bar--sheet and .quick-filters). Placement stays with the caller. */
@@ -395,7 +440,13 @@
 [data-hc-ds] .hc-ui-filter-bar__line { display: flex; align-items: center; gap: var(--hc-space-2); min-width: 0; }
 [data-hc-ds] :is(.hc-ui-filter-bar__start, .hc-ui-filter-bar__end) { display: flex; flex: 0 0 auto; align-items: center; gap: var(--hc-space-2); }
 [data-hc-ds] .hc-ui-filter-bar__end { margin-inline-start: auto; }
-[data-hc-ds] .hc-ui-filter-bar__row { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--hc-space-2); min-width: 0; }
+/* Bleed: the bar reaches the panel's edges and gives the space back as padding. */
+[data-hc-ds] .hc-ui-filter-bar[data-bleed] {
+  margin-inline: calc(-1 * var(--hc-filter-bar-bleed-start, var(--hc-filter-bar-bleed, 0px))) calc(-1 * var(--hc-filter-bar-bleed-end, var(--hc-filter-bar-bleed, 0px)));
+  padding-inline: var(--hc-filter-bar-bleed-start, var(--hc-filter-bar-bleed, 0px)) var(--hc-filter-bar-bleed-end, var(--hc-filter-bar-bleed, 0px));
+}
+/* The row anchors what the caller places in it with position: absolute (a popup). */
+[data-hc-ds] .hc-ui-filter-bar__row { position: relative; display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--hc-space-2); min-width: 0; }
 [data-hc-ds] .hc-ui-filter-bar[data-density='compact'] .hc-ui-filter-bar__row { gap: var(--hc-space-1); }
 [data-hc-ds] .hc-ui-filter-bar__footer { margin-top: var(--hc-space-2); }
 /* One line that scrolls sideways. 4px of padding above and below, taken back by the margin,
@@ -503,6 +554,7 @@
   [data-hc-ds] :is(.hc-ui-segmented[data-indicator='slide'], .hc-ui-segmented__indicator) { transition: none; }
   [data-hc-ds] .hc-ui-segmented[data-indicator='slide']:has(.hc-ui-segmented__option:active:not(:disabled)) { transform: none; }
   [data-hc-ds] .hc-ui-icon-button__icon[data-swap] { animation: none; }
+  [data-hc-ds] .hc-ui-chip__badge[data-placement='corner'] { animation: none; }
   [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip) { transition: none; }
   [data-hc-ds] .hc-ui-field__control { transition: none; }
   [data-hc-ds] .hc-ui-button__spinner { animation: none; }
@@ -660,7 +712,9 @@
   font-variation-settings: 'ROND' var(--hc-rond);
   line-height: var(--hc-line-height-md);
   outline: none;
-  animation: hc-ui-dialog-in var(--hc-dur-medium) var(--hc-ease-standard) both;
+  /* `backwards`, not `both`: once in, no transform stays on the dialog. A transform would make
+     it the containing block of fixed popups portaled into it, and its overflow would cut them. */
+  animation: hc-ui-dialog-in var(--hc-dur-medium) var(--hc-ease-standard) backwards;
 }
 [data-hc-ds] .hc-ui-dialog[open] { display: grid; align-content: start; gap: var(--hc-space-2); }
 [data-hc-ds] .hc-ui-dialog::backdrop {
@@ -702,8 +756,6 @@
   gap: var(--hc-space-2);
   margin-top: var(--hc-space-3);
 }
-/* HCUI's confirmation buttons are 38px, between Button sm (36) and md (44). */
-[data-hc-ds] .hc-ui-dialog[data-size='sm'] .hc-ui-dialog__actions .hc-ui-button[data-size='sm'] { min-height: 38px; }
 
 [data-hc-ds] .hc-ui-dialog[data-size='md'] {
   width: min(440px, calc(100vw - 2 * var(--hc-space-6)));
@@ -739,6 +791,8 @@
   box-shadow: 0 -1px 0 var(--hc-color-border);
 }
 [data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__actions > * { flex: 1 1 0; }
+/* Header-less (Sheet header={false}): the content brings its own spacing, heading and close. */
+[data-hc-ds] .hc-ui-dialog[data-size='md'][data-headerless] .hc-ui-dialog__body { gap: 0; padding: 0; }
 
 @keyframes hc-ui-dialog-in {
   from { opacity: 0; transform: translateY(8px) scale(0.97); }
@@ -776,7 +830,7 @@
   padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--hc-space-3));
   border-radius: var(--hc-radius-sheet) var(--hc-radius-sheet) 0 0;
   touch-action: pan-y;
-  animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) both;
+  animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) backwards;
   transition: height 320ms var(--hc-ease-sheet), max-height 320ms var(--hc-ease-sheet);
 }
 [data-hc-ds] .hc-ui-sheet[data-presentation='bottom']::before {
@@ -811,7 +865,7 @@
     padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--hc-space-3));
     border-radius: var(--hc-radius-sheet) var(--hc-radius-sheet) 0 0;
     touch-action: pan-y;
-    animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) both;
+    animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) backwards;
     transition: height 320ms var(--hc-ease-sheet), max-height 320ms var(--hc-ease-sheet);
   }
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto']::before {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",