ionbase-ui 0.10.0 → 0.11.0

package/dist/components/Modal.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { AriaModalOverlayProps } from 'react-aria';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+export type ModalAlign = 'left' | 'center';
+export interface ModalProps extends AriaModalOverlayProps {
+    /** Whether the modal is shown. */
+    isOpen?: boolean;
+    /** Called with the next open state — `false` when the modal asks to close. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Matches the Figma `Size` variant. */
+    size?: ModalSize;
+    /** Matches the Figma `Align` variant. */
+    align?: ModalAlign;
+    /** Required: the dialog's accessible name, wired via `aria-labelledby`. */
+    title: React.ReactNode;
+    /** Supporting copy under the title. */
+    description?: React.ReactNode;
+    /**
+     * The featured slot above the title — an icon or an illustration. Rendered
+     * inside a circular container that hugs it.
+     */
+    media?: React.ReactNode;
+    /** Action row. Right-aligned when `align="left"`, centred when `"center"`. */
+    footer?: React.ReactNode;
+    /** Show the close button. Defaults to `true`. */
+    showClose?: boolean;
+    /** Accessible name for the close button. */
+    closeLabel?: string;
+    /** Body content. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Modal — Figma `Modal` (792:1537).
+ *
+ * `Size` x `Align`, with the sections as props rather than variants. The panel
+ * hugs its content at every size except `fullscreen`, which fills the viewport
+ * and pushes the actions to the bottom edge.
+ *
+ * RENDERS NOTHING WHEN CLOSED, and mounts into a portal when open. Both come
+ * from React Aria's `Overlay`, and both matter: a modal left in the tree while
+ * closed is still focusable by keyboard, and one rendered inline inherits any
+ * `overflow: hidden` or stacking context from wherever it was written.
+ *
+ * The scrim is part of this component in code, unlike in Figma — see the note
+ * in modal.css.
+ */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;AAC1D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAkB3C,MAAM,WAAW,UAAW,SAAQ,qBAAqB;IACvD,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uCAAuC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0FD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,mFAUhB,CAAC"}

package/dist/components/Modal.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { Overlay, useModalOverlay, useDialog, useButton, mergeProps, } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+/** The close glyph from Figma's `Close` slot, inlined for the same reason
+ *  Select's and PhoneInput's chevrons are: it is part of the component, not a
+ *  slot a caller fills, and `ionbase-ui` deliberately does not depend on
+ *  `ionbase-icons`. */
+const CloseIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function ModalDialog(props, forwardedRef) {
+    const { state, size = 'md', align = 'left', title, description, media, footer, showClose = true, closeLabel = 'Close dialog', children, className, } = props;
+    const panelRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => panelRef.current);
+    /*
+     * `useModalOverlay` supplies what makes this a modal rather than a styled
+     * box: it traps focus inside the panel, marks everything outside it
+     * `aria-hidden`, prevents the page behind from scrolling, and closes on
+     * Escape and on an outside click. `useDialog` adds the dialog role and
+     * moves focus in on open.
+     */
+    const { modalProps, underlayProps } = useModalOverlay(props, state, panelRef);
+    const { dialogProps, titleProps } = useDialog({ role: 'dialog' }, panelRef);
+    const closeRef = useRef(null);
+    const { buttonProps: closeButtonProps } = useButton({ onPress: () => state.close(), 'aria-label': closeLabel }, closeRef);
+    const panelClassNames = [
+        'ion-modal',
+        `ion-modal--${size}`,
+        `ion-modal--${align}`,
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ...underlayProps, className: "ion-modal__scrim", children: _jsxs("div", { ...mergeProps(modalProps, dialogProps), ref: panelRef, className: panelClassNames, children: [_jsxs("div", { className: "ion-modal__header", children: [_jsxs("div", { className: "ion-modal__heading", children: [media && (_jsx("div", { className: "ion-modal__media", "aria-hidden": "true", children: media })), _jsx("h2", { ...titleProps, className: "ion-modal__title", children: title }), description && (_jsx("p", { className: "ion-modal__description", children: description }))] }), showClose && (_jsx("button", { ...closeButtonProps, ref: closeRef, type: "button", className: "ion-modal__close", children: _jsx(CloseIcon, {}) }))] }), children && _jsx("div", { className: "ion-modal__body", children: children }), footer && _jsx("div", { className: "ion-modal__footer", children: footer })] }) }));
+}
+const ModalDialogWithRef = forwardRef(ModalDialog);
+/**
+ * Modal — Figma `Modal` (792:1537).
+ *
+ * `Size` x `Align`, with the sections as props rather than variants. The panel
+ * hugs its content at every size except `fullscreen`, which fills the viewport
+ * and pushes the actions to the bottom edge.
+ *
+ * RENDERS NOTHING WHEN CLOSED, and mounts into a portal when open. Both come
+ * from React Aria's `Overlay`, and both matter: a modal left in the tree while
+ * closed is still focusable by keyboard, and one rendered inline inherits any
+ * `overflow: hidden` or stacking context from wherever it was written.
+ *
+ * The scrim is part of this component in code, unlike in Figma — see the note
+ * in modal.css.
+ */
+export const Modal = forwardRef((props, ref) => {
+    const state = useOverlayTriggerState(props);
+    if (!state.isOpen)
+        return null;
+    return (_jsx(Overlay, { children: _jsx(ModalDialogWithRef, { ...props, state: state, ref: ref }) }));
+});
+Modal.displayName = 'Modal';
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/components/index.d.ts

@@ -26,6 +26,8 @@ export { Logo, LogoMark } from './Logo.js';
 export type { LogoProps, LogoMarkProps, LogoSize, LogoWordmark, } from './Logo.js';
 export { Divider } from './Divider.js';
 export type { DividerProps, DividerOrientation } from './Divider.js';
+export { Modal } from './Modal.js';
+export type { ModalProps, ModalSize, ModalAlign } from './Modal.js';
 export { Link } from './Link.js';
 export type { LinkProps, LinkVariant } from './Link.js';
 export { NavItem } from './NavItem.js';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9E,YAAY,EACV,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -12,6 +12,7 @@ export { Avatar, AvatarGroup } from './Avatar.js';
 export { Header } from './Header.js';
 export { Logo, LogoMark } from './Logo.js';
 export { Divider } from './Divider.js';
+export { Modal } from './Modal.js';
 export { Link } from './Link.js';
 export { NavItem } from './NavItem.js';
 export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/styles/index.css

@@ -43,6 +43,7 @@
 @import url('./table.css');
 @import url('./divider.css');
 @import url('./link.css');
+@import url('./modal.css');
 @import url('./nav-item.css');
 @import url('./scroll-progress.css');
 @import url('./full-card.css');

package/dist/styles/modal.css

@@ -0,0 +1,235 @@
+/*
+ * Modal
+ *
+ * Measured from Figma `Modal` (792:1537). Four sizes x two alignments.
+ *
+ * THE SCRIM IS IN THIS COMPONENT, AND IN FIGMA IT IS NOT
+ *
+ * Figma models the panel alone so it can be dropped into any layout, and binds
+ * `surface/scrim` on a separate `Overlay — usage` frame instead. In code that
+ * split would be useless: nothing can render a modal without also rendering
+ * what sits behind it, so the scrim lives here.
+ *
+ * The consequence is that `bindings.json` records the panel's tokens but not
+ * the scrim, because the export only walks components and the scrim is on a
+ * frame. `surface/scrim` therefore still reads as unbound in any "which roles
+ * have no consumer" sweep. It has one — this file.
+ */
+.ion-modal__scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-24);
+  background-color: var(--surface-scrim);
+}
+
+.ion-modal {
+  /*
+   * Size is a set of slots defaulting to Medium, the same shape Button and
+   * Input use — a size modifier reassigns the width rather than restating the
+   * whole box.
+   */
+  --ion-modal-width: 560px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-20);
+  width: var(--ion-modal-width);
+
+  /*
+   * Never taller than the viewport it sits in. Figma's panels hug their
+   * content because a Figma frame has no viewport to overflow; a real one
+   * does, and a dialog taller than the screen becomes unreachable at both
+   * ends. The scrim's padding is subtracted so the panel never touches the
+   * edges.
+   */
+  max-width: 100%;
+  max-height: 100%;
+  padding: var(--spacing-24);
+  background-color: var(--surface-overlay);
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--ion-shadow-shadow-xl);
+}
+
+.ion-modal--sm {
+  --ion-modal-width: 400px;
+}
+
+.ion-modal--lg {
+  --ion-modal-width: 720px;
+}
+
+/*
+ * Fullscreen is a different layout, not another width.
+ *
+ * It meets the viewport edges, so radius, border and shadow are removed rather
+ * than reduced — there is nothing for them to sit against. The scrim's padding
+ * goes too, or the "fullscreen" panel would float in a 24px frame.
+ */
+.ion-modal--fullscreen {
+  --ion-modal-width: 100%;
+
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.ion-modal__scrim:has(.ion-modal--fullscreen) {
+  padding: 0;
+}
+
+.ion-modal__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+}
+
+.ion-modal__heading {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.ion-modal__title {
+  margin: 0;
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-h5);
+  line-height: var(--type-h5-line-height);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ion-modal__description {
+  margin: 0;
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-regular);
+}
+
+/*
+ * The featured slot. Circular, hugging whatever is put in it, so an icon and a
+ * spot illustration both sit correctly without a second variant.
+ */
+.ion-modal__media {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-48);
+  height: var(--spacing-48);
+  background-color: var(--surface-primary-subtle);
+  border-radius: var(--radius-full);
+  color: var(--icon-primary);
+}
+
+.ion-modal__media svg {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+}
+
+/*
+ * 32px, not the 20px glyph it contains. WCAG 2.2 SC 2.5.8 asks for a 24x24
+ * minimum pointer target and the icon alone would fail it. Do not shrink this
+ * to fit the icon.
+ */
+.ion-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--icon-secondary);
+  cursor: pointer;
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-modal__close svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+@media (hover: hover) {
+  .ion-modal__close:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-modal__close:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * The body is the only part that scrolls. Capping the panel and letting this
+ * flex-shrink keeps the header and actions in place while long content moves
+ * underneath them — which is the whole reason a dialog has a header at all.
+ */
+.ion-modal__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+.ion-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-12);
+  flex-shrink: 0;
+}
+
+/*
+ * Centred alignment.
+ *
+ * THE SPACER IS REQUIRED HERE TOO, and assuming otherwise was wrong.
+ *
+ * The heading is a flex item beside the close button, so it does not span the
+ * panel — centring inside it lands the title and media 24px left of the
+ * panel's true centre, which is half the close button plus its gap. Exactly
+ * the same 24px Figma showed, for exactly the same reason, and the story
+ * `CentredContentIsActuallyCentred` measured it.
+ *
+ * A `::before` rather than a real element, and gated on `:has()` so it exists
+ * only when the close button does — mirroring Figma, where the spacer is bound
+ * to the same `Show Close` property. A spacer that outlived the button would
+ * push the content 24px the other way: the same bug mirrored.
+ *
+ * The actions centre too. Right-aligned buttons under centred copy read as
+ * broken.
+ */
+.ion-modal--center .ion-modal__header:has(.ion-modal__close)::before {
+  content: '';
+  flex-shrink: 0;
+  width: var(--spacing-32);
+}
+
+.ion-modal--center .ion-modal__heading {
+  align-items: center;
+  text-align: center;
+}
+
+.ion-modal--center .ion-modal__body {
+  text-align: center;
+}
+
+.ion-modal--center .ion-modal__footer {
+  justify-content: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",