jvetrau-ds 0.1.44 → 0.2.1

package/components/button/button.cjs

@@ -3,43 +3,68 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('./button.css');
-var classnames = require('../helpers/classnames');
 var Icon = require('../../icons/icon');
+var classnames = require('../helpers/classnames');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Icon__default = /*#__PURE__*/_interopDefault(Icon);
 
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
 const Button = ({
-  state = "default",
+  mode = "default",
+  rank = "default",
+  density = "default",
+  loading = false,
   icon,
   className = "",
   disabled = false,
   children,
   ...props
 }) => {
-  const isIconOnly = !!icon && !children;
-  const classes = classnames.classnames("button", className, {
-    "button--primary": state === "primary",
-    "button--disabled": disabled,
-    "button--icon-only": isIconOnly
-  });
+  const hasIcon = hasContent(icon);
+  const hasChildren = hasContent(children);
+  const isIconOnly = hasIcon && !hasChildren;
+  const isDisabled = disabled || loading;
+  const classes = classnames.classnames(
+    "button",
+    className,
+    {
+      "button--primary": rank === "primary",
+      "button--link": rank === "link",
+      "button--compact": density === "compact",
+      "button--toolbar": mode === "toolbar",
+      "button--disabled": isDisabled,
+      "button--loading": loading,
+      "button--icon-only": isIconOnly
+    }
+  );
   let resolvedIcon = icon;
   if (react.isValidElement(icon) && icon.type === Icon__default.default) {
     const iconElement = icon;
-    resolvedIcon = react.cloneElement(iconElement, {
-      size: iconElement.props.size ?? "base",
-      className: classnames.classnames("button__icon", iconElement.props.className),
-      "aria-hidden": iconElement.props["aria-hidden"] ?? true,
-      focusable: iconElement.props.focusable ?? false
-    });
+    resolvedIcon = react.cloneElement(
+      iconElement,
+      {
+        size: iconElement.props.size ?? "base",
+        className: classnames.classnames(
+          "button__icon",
+          iconElement.props.className
+        ),
+        "aria-hidden": iconElement.props["aria-hidden"] ?? true,
+        focusable: iconElement.props.focusable ?? false
+      }
+    );
   }
+  const resolvedAriaBusy = loading ? true : props["aria-busy"];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      className: classes,
-      disabled,
       ...props,
+      className: classes,
+      disabled: isDisabled,
+      "aria-busy": resolvedAriaBusy,
       children: [
         resolvedIcon,
         children

package/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","isValidElement","Icon","cloneElement","jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAIC,oBAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAASC,qBAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAeC,mBAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,MAAA;AAAA,MAChC,SAAA,EAAWH,qBAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACEI,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.cjs","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 'base',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","isValidElement","Icon","cloneElement","jsxs"],"mappings":";;;;;;;;;;;;AA6DA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,WAAW,IAAI,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,WAAW,QAAQ,CAAA;AAEvC,EAAA,MAAM,UAAA,GACJ,WAAW,CAAC,WAAA;AAEd,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,gBACE,IAAA,KAAS,MAAA;AAAA,MACX,mBACE,OAAA,KAAY,SAAA;AAAA,MACd,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,kBAAA,EACE,UAAA;AAAA,MACF,iBAAA,EACE,OAAA;AAAA,MACF,mBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IACEC,oBAAA,CAAe,IAAI,CAAA,IACnB,IAAA,CAAK,SAASC,qBAAA,EACd;AACA,IAAA,MAAM,WAAA,GACJ,IAAA;AAEF,IAAA,YAAA,GAAeC,kBAAA;AAAA,MACb,WAAA;AAAA,MACA;AAAA,QACE,IAAA,EACE,WAAA,CAAY,KAAA,CAAM,IAAA,IAClB,MAAA;AAAA,QACF,SAAA,EAAWH,qBAAA;AAAA,UACT,cAAA;AAAA,UACA,YAAY,KAAA,CAAM;AAAA,SACpB;AAAA,QACA,aAAA,EACE,WAAA,CAAY,KAAA,CACV,aACF,CAAA,IAAK,IAAA;AAAA,QACP,SAAA,EACE,WAAA,CAAY,KAAA,CACT,SAAA,IAAa;AAAA;AACpB,KACF;AAAA,EACF;AAEA,EAAA,MAAM,gBAAA,GACJ,OAAA,GACI,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAEvB,EAAA,uBACEI,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,WAAA,EAAW,gBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.cjs","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\n\nimport './button.css';\nimport Icon, { type IconProps } from '../../icons/icon';\nimport { classnames } from '../helpers/classnames';\n\nexport type ButtonRank =\n  | 'default'\n  | 'primary'\n  | 'link';\n\nexport type ButtonDensity =\n  | 'default'\n  | 'compact';\n\ntype ButtonNativeProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n>;\n\ninterface ButtonSharedProps\n  extends ButtonNativeProps {\n  density?: ButtonDensity;\n  loading?: boolean;\n}\n\ntype RegularButtonContentProps =\n  | {\n      children: React.ReactNode;\n      icon?: React.ReactNode;\n    }\n  | {\n      children?: never;\n      icon: React.ReactNode;\n      'aria-label': string;\n    };\n\ntype RegularButtonProps =\n  ButtonSharedProps &\n  RegularButtonContentProps & {\n    mode?: 'default';\n    rank?: ButtonRank;\n  };\n\ntype ToolbarButtonProps =\n  ButtonSharedProps & {\n    mode: 'toolbar';\n    icon: React.ReactNode;\n    children?: never;\n    rank?: never;\n    'aria-label': string;\n  };\n\nexport type ButtonProps =\n  | RegularButtonProps\n  | ToolbarButtonProps;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  mode = 'default',\n  rank = 'default',\n  density = 'default',\n  loading = false,\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const hasIcon = hasContent(icon);\n  const hasChildren = hasContent(children);\n\n  const isIconOnly =\n    hasIcon && !hasChildren;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'button',\n    className,\n    {\n      'button--primary':\n        rank === 'primary',\n      'button--link':\n        rank === 'link',\n      'button--compact':\n        density === 'compact',\n      'button--toolbar':\n        mode === 'toolbar',\n      'button--disabled':\n        isDisabled,\n      'button--loading':\n        loading,\n      'button--icon-only':\n        isIconOnly,\n    },\n  );\n\n  let resolvedIcon = icon;\n\n  if (\n    isValidElement(icon) &&\n    icon.type === Icon\n  ) {\n    const iconElement =\n      icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(\n      iconElement,\n      {\n        size:\n          iconElement.props.size ??\n          'base',\n        className: classnames(\n          'button__icon',\n          iconElement.props.className,\n        ),\n        'aria-hidden':\n          iconElement.props[\n            'aria-hidden'\n          ] ?? true,\n        focusable:\n          iconElement.props\n            .focusable ?? false,\n      },\n    );\n  }\n\n  const resolvedAriaBusy =\n    loading\n      ? true\n      : props['aria-busy'];\n\n  return (\n    <button\n      {...props}\n      className={classes}\n      disabled={isDisabled}\n      aria-busy={resolvedAriaBusy}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"]}

package/components/button/button.css

@@ -1,9 +1,13 @@
 .button {
   /* color */
-  --button-bg: var(--color-primary-2);
-  --button-color: var(--color-text-primary-2);
+  --button-bg: var(--color-control);
+  --button-color: var(--color-text-control);
   --button-bg-disabled: var(--color-bg-disabled);
-  --button-color-disabled: var(--color-text-disabled, var(--color-text-control));
+  --button-color-disabled: var(
+    --color-text-disabled,
+    var(--color-text-control)
+  );
+  --button-focus-color: var(--button-bg);
 
   background: var(--button-bg);
   color: var(--button-color);
@@ -13,7 +17,9 @@
   --button-font-weight: var(--font-control-weight);
   --button-font-size: var(--font-control);
   --button-line-height: var(--font-control-line);
-  --button-letter-spacing: var(--font-control-letter-spacing);
+  --button-letter-spacing: var(
+    --font-control-letter-spacing
+  );
 
   font-family: var(--button-font-family);
   font-size: var(--button-font-size);
@@ -25,7 +31,9 @@
   --button-gap: var(--margin-icon);
   --button-height: var(--size-control-height);
   --button-padding-x: var(--padding-control-button-horz);
-  --button-padding-icon-only: var(--padding-control-button-icon-horz);
+  --button-padding-icon-only: var(
+    --padding-control-button-icon-horz
+  );
 
   display: inline-flex;
   align-items: center;
@@ -52,7 +60,8 @@
 
   cursor: pointer;
   user-select: none;
-  transition: opacity var(--button-transition-duration) ease;
+  transition:
+    opacity var(--button-transition-duration) ease;
 }
 
 .button__icon {
@@ -78,7 +87,10 @@
 }
 
 .button:focus-visible {
-  outline: var(--button-focus-width) solid var(--button-bg);
+  outline:
+    var(--button-focus-width)
+    solid
+    var(--button-focus-color);
   outline-offset: var(--button-focus-offset);
 }
 
@@ -94,11 +106,72 @@
   cursor: not-allowed;
 }
 
+/* Rank */
+
 .button--primary {
   --button-bg: var(--color-primary-2);
   --button-color: var(--color-text-primary-2);
+  --button-focus-color: var(--color-primary-2);
 }
 
+.button--link {
+  --button-bg: transparent;
+  --button-color: var(--color-link);
+  --button-focus-color: var(--color-link);
+}
+
+.button--link:disabled,
+.button--link.button--disabled {
+  background: transparent;
+}
+
+/* Density */
+
+.button--compact {
+  /*
+   * Compact presentation is intentionally left
+   * token-driven but visually unfinished.
+   *
+   * Add compact control dimensions when the
+   * corresponding semantic tokens are available.
+   */
+}
+
+/* Mode */
+
+.button--toolbar {
+  --button-bg: transparent;
+  --button-color: var(--color-text);
+  --button-focus-color: var(--color-text);
+
+  background: transparent;
+  padding-inline: 0;
+}
+
+.button--toolbar:disabled,
+.button--toolbar.button--disabled {
+  background: transparent;
+}
+
+/* State */
+
+.button--loading {
+  /*
+   * Loading behavior is already defined by the
+   * component contract:
+   * disabled + aria-busy.
+   *
+   * Spinner and visual treatment can be added
+   * later without changing the public API.
+   */
+}
+
+/* Content */
+
 .button--icon-only {
   padding-inline: var(--button-padding-icon-only);
+}
+
+.button--toolbar.button--icon-only {
+  padding-inline: 0;
 }

package/components/button/button.d.ts

@@ -1,8 +1,31 @@
 import React from 'react';
 import './button.css';
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    state?: 'default' | 'primary';
-    icon?: React.ReactNode;
+export type ButtonRank = 'default' | 'primary' | 'link';
+export type ButtonDensity = 'default' | 'compact';
+type ButtonNativeProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+interface ButtonSharedProps extends ButtonNativeProps {
+    density?: ButtonDensity;
+    loading?: boolean;
 }
+type RegularButtonContentProps = {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+} | {
+    children?: never;
+    icon: React.ReactNode;
+    'aria-label': string;
+};
+type RegularButtonProps = ButtonSharedProps & RegularButtonContentProps & {
+    mode?: 'default';
+    rank?: ButtonRank;
+};
+type ToolbarButtonProps = ButtonSharedProps & {
+    mode: 'toolbar';
+    icon: React.ReactNode;
+    children?: never;
+    rank?: never;
+    'aria-label': string;
+};
+export type ButtonProps = RegularButtonProps | ToolbarButtonProps;
 declare const Button: React.FC<ButtonProps>;
 export default Button;

package/components/button/button.js

@@ -1,39 +1,64 @@
 import { jsxs } from 'react/jsx-runtime';
 import { isValidElement, cloneElement } from 'react';
 import './button.css';
-import { classnames } from '../helpers/classnames';
 import Icon from '../../icons/icon';
+import { classnames } from '../helpers/classnames';
 
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
 const Button = ({
-  state = "default",
+  mode = "default",
+  rank = "default",
+  density = "default",
+  loading = false,
   icon,
   className = "",
   disabled = false,
   children,
   ...props
 }) => {
-  const isIconOnly = !!icon && !children;
-  const classes = classnames("button", className, {
-    "button--primary": state === "primary",
-    "button--disabled": disabled,
-    "button--icon-only": isIconOnly
-  });
+  const hasIcon = hasContent(icon);
+  const hasChildren = hasContent(children);
+  const isIconOnly = hasIcon && !hasChildren;
+  const isDisabled = disabled || loading;
+  const classes = classnames(
+    "button",
+    className,
+    {
+      "button--primary": rank === "primary",
+      "button--link": rank === "link",
+      "button--compact": density === "compact",
+      "button--toolbar": mode === "toolbar",
+      "button--disabled": isDisabled,
+      "button--loading": loading,
+      "button--icon-only": isIconOnly
+    }
+  );
   let resolvedIcon = icon;
   if (isValidElement(icon) && icon.type === Icon) {
     const iconElement = icon;
-    resolvedIcon = cloneElement(iconElement, {
-      size: iconElement.props.size ?? "base",
-      className: classnames("button__icon", iconElement.props.className),
-      "aria-hidden": iconElement.props["aria-hidden"] ?? true,
-      focusable: iconElement.props.focusable ?? false
-    });
+    resolvedIcon = cloneElement(
+      iconElement,
+      {
+        size: iconElement.props.size ?? "base",
+        className: classnames(
+          "button__icon",
+          iconElement.props.className
+        ),
+        "aria-hidden": iconElement.props["aria-hidden"] ?? true,
+        focusable: iconElement.props.focusable ?? false
+      }
+    );
   }
+  const resolvedAriaBusy = loading ? true : props["aria-busy"];
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: classes,
-      disabled,
       ...props,
+      className: classes,
+      disabled: isDisabled,
+      "aria-busy": resolvedAriaBusy,
       children: [
         resolvedIcon,
         children

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAI,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAAS,IAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAe,aAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,MAAA;AAAA,MAChC,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.js","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 'base',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;;AA6DA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,WAAW,IAAI,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,WAAW,QAAQ,CAAA;AAEvC,EAAA,MAAM,UAAA,GACJ,WAAW,CAAC,WAAA;AAEd,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,gBACE,IAAA,KAAS,MAAA;AAAA,MACX,mBACE,OAAA,KAAY,SAAA;AAAA,MACd,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,kBAAA,EACE,UAAA;AAAA,MACF,iBAAA,EACE,OAAA;AAAA,MACF,mBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IACE,cAAA,CAAe,IAAI,CAAA,IACnB,IAAA,CAAK,SAAS,IAAA,EACd;AACA,IAAA,MAAM,WAAA,GACJ,IAAA;AAEF,IAAA,YAAA,GAAe,YAAA;AAAA,MACb,WAAA;AAAA,MACA;AAAA,QACE,IAAA,EACE,WAAA,CAAY,KAAA,CAAM,IAAA,IAClB,MAAA;AAAA,QACF,SAAA,EAAW,UAAA;AAAA,UACT,cAAA;AAAA,UACA,YAAY,KAAA,CAAM;AAAA,SACpB;AAAA,QACA,aAAA,EACE,WAAA,CAAY,KAAA,CACV,aACF,CAAA,IAAK,IAAA;AAAA,QACP,SAAA,EACE,WAAA,CAAY,KAAA,CACT,SAAA,IAAa;AAAA;AACpB,KACF;AAAA,EACF;AAEA,EAAA,MAAM,gBAAA,GACJ,OAAA,GACI,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAEvB,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,WAAA,EAAW,gBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.js","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\n\nimport './button.css';\nimport Icon, { type IconProps } from '../../icons/icon';\nimport { classnames } from '../helpers/classnames';\n\nexport type ButtonRank =\n  | 'default'\n  | 'primary'\n  | 'link';\n\nexport type ButtonDensity =\n  | 'default'\n  | 'compact';\n\ntype ButtonNativeProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n>;\n\ninterface ButtonSharedProps\n  extends ButtonNativeProps {\n  density?: ButtonDensity;\n  loading?: boolean;\n}\n\ntype RegularButtonContentProps =\n  | {\n      children: React.ReactNode;\n      icon?: React.ReactNode;\n    }\n  | {\n      children?: never;\n      icon: React.ReactNode;\n      'aria-label': string;\n    };\n\ntype RegularButtonProps =\n  ButtonSharedProps &\n  RegularButtonContentProps & {\n    mode?: 'default';\n    rank?: ButtonRank;\n  };\n\ntype ToolbarButtonProps =\n  ButtonSharedProps & {\n    mode: 'toolbar';\n    icon: React.ReactNode;\n    children?: never;\n    rank?: never;\n    'aria-label': string;\n  };\n\nexport type ButtonProps =\n  | RegularButtonProps\n  | ToolbarButtonProps;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  mode = 'default',\n  rank = 'default',\n  density = 'default',\n  loading = false,\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const hasIcon = hasContent(icon);\n  const hasChildren = hasContent(children);\n\n  const isIconOnly =\n    hasIcon && !hasChildren;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'button',\n    className,\n    {\n      'button--primary':\n        rank === 'primary',\n      'button--link':\n        rank === 'link',\n      'button--compact':\n        density === 'compact',\n      'button--toolbar':\n        mode === 'toolbar',\n      'button--disabled':\n        isDisabled,\n      'button--loading':\n        loading,\n      'button--icon-only':\n        isIconOnly,\n    },\n  );\n\n  let resolvedIcon = icon;\n\n  if (\n    isValidElement(icon) &&\n    icon.type === Icon\n  ) {\n    const iconElement =\n      icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(\n      iconElement,\n      {\n        size:\n          iconElement.props.size ??\n          'base',\n        className: classnames(\n          'button__icon',\n          iconElement.props.className,\n        ),\n        'aria-hidden':\n          iconElement.props[\n            'aria-hidden'\n          ] ?? true,\n        focusable:\n          iconElement.props\n            .focusable ?? false,\n      },\n    );\n  }\n\n  const resolvedAriaBusy =\n    loading\n      ? true\n      : props['aria-busy'];\n\n  return (\n    <button\n      {...props}\n      className={classes}\n      disabled={isDisabled}\n      aria-busy={resolvedAriaBusy}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"]}

package/components/flip-list/flip-list.cjs

@@ -12,36 +12,49 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function hasContent(value) {
   return value !== null && value !== void 0;
 }
-function getInitialOpenItemId(items, defaultOpenId) {
-  if (defaultOpenId === void 0) {
+function normalizeOpenItemId(items, openId) {
+  if (openId === null || openId === void 0) {
     return null;
   }
   const hasMatchingItem = items.some(
-    (item) => item.id === defaultOpenId
+    (item) => item.id === openId
   );
-  return hasMatchingItem ? defaultOpenId : null;
+  return hasMatchingItem ? openId : null;
 }
 const FlipList = ({
   items,
+  openId,
   defaultOpenId,
-  scrollToDefaultOpen = false,
+  onOpenChange,
+  scrollToInitialOpen = false,
   className = "",
   ...props
 }) => {
   const componentId = React__default.default.useId();
+  const isControlled = openId !== void 0;
   const initialOpenItemIdRef = React__default.default.useRef(
-    getInitialOpenItemId(
+    normalizeOpenItemId(
       items,
-      defaultOpenId
+      isControlled ? openId : defaultOpenId
     )
   );
-  const shouldScrollInitiallyRef = React__default.default.useRef(scrollToDefaultOpen);
+  const shouldScrollInitiallyRef = React__default.default.useRef(scrollToInitialOpen);
   const initialOpenItemRef = React__default.default.useRef(
     null
   );
   const hasScrolledInitiallyRef = React__default.default.useRef(false);
-  const [openItemId, setOpenItemId] = React__default.default.useState(
-    initialOpenItemIdRef.current
+  const [
+    uncontrolledOpenItemId,
+    setUncontrolledOpenItemId
+  ] = React__default.default.useState(
+    () => normalizeOpenItemId(
+      items,
+      defaultOpenId
+    )
+  );
+  const resolvedOpenItemId = normalizeOpenItemId(
+    items,
+    isControlled ? openId : uncontrolledOpenItemId
   );
   React__default.default.useEffect(() => {
     if (hasScrolledInitiallyRef.current || !shouldScrollInitiallyRef.current || initialOpenItemIdRef.current === null || !initialOpenItemRef.current) {
@@ -62,9 +75,13 @@ const FlipList = ({
     {}
   );
   const toggleItem = (itemId) => {
-    setOpenItemId(
-      (current) => current === itemId ? null : itemId
-    );
+    const nextOpenItemId = resolvedOpenItemId === itemId ? null : itemId;
+    if (!isControlled) {
+      setUncontrolledOpenItemId(
+        nextOpenItemId
+      );
+    }
+    onOpenChange?.(nextOpenItemId);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -72,7 +89,10 @@ const FlipList = ({
       className: classes,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
-        const isOpen = openItemId === item.id;
+        const isOpen = resolvedOpenItemId === item.id;
+        const hasStatus = hasContent(
+          item.status
+        );
         const hasMeta = hasContent(
           item.meta
         );
@@ -101,8 +121,11 @@ const FlipList = ({
                   "aria-controls": contentId,
                   onClick: () => toggleItem(item.id),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__title", children: item.title }),
-                    hasMeta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__meta", children: item.meta })
+                    hasStatus && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__status", children: item.status }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flip-list__main", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__title", children: item.title }),
+                      hasMeta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__meta", children: item.meta })
+                    ] })
                   ]
                 }
               ),

package/components/flip-list/flip-list.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Item opened during the initial render.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Scrolls the initially opened item into view once\n   * after mounting.\n   *\n   * Has no effect without a valid defaultOpenId.\n   * Manual item opening never triggers scrolling.\n   */\n  scrollToDefaultOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialOpenItemId(\n  items: FlipListItem[],\n  defaultOpenId: React.Key | undefined,\n): OpenItemId {\n  if (defaultOpenId === undefined) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === defaultOpenId,\n  );\n\n  return hasMatchingItem\n    ? defaultOpenId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  defaultOpenId,\n  scrollToDefaultOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      getInitialOpenItemId(\n        items,\n        defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToDefaultOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [openItemId, setOpenItemId] =\n    React.useState<OpenItemId>(\n      initialOpenItemIdRef.current,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    setOpenItemId((current) =>\n      current === itemId\n        ? null\n        : itemId,\n    );\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            openItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;"]}
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  status?: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasStatus = hasContent(\n            item.status,\n          );\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                {hasStatus && (\n                  <span className=\"flip-list__status\">\n                    {item.status}\n                  </span>\n                )}\n\n                <span className=\"flip-list__main\">\n                  <span className=\"flip-list__title\">\n                    {item.title}\n                  </span>\n\n                  {hasMeta && (\n                    <span className=\"flip-list__meta\">\n                      {item.meta}\n                    </span>\n                  )}\n                </span>\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}

package/components/flip-list/flip-list.css

@@ -133,9 +133,8 @@
 
   /* size */
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--flip-list-trigger-column-gap);
+  flex-direction: column;
+  align-items: stretch;
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -170,6 +169,53 @@
   /* motion */
 }
 
+.flip-list__status {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --flip-list-status-gap:
+    var(--margin-tag);
+
+  display: block;
+  align-self: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  margin:
+    0
+    0
+    var(--flip-list-status-gap)
+    0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--flip-list-trigger-column-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__title {
   /* color */
   color: inherit;

package/components/flip-list/flip-list.d.ts

@@ -3,26 +3,51 @@ import './flip-list.css';
 export interface FlipListItem {
     id: React.Key;
     title: React.ReactNode;
+    status?: React.ReactNode;
     meta?: React.ReactNode;
     content: React.ReactNode;
 }
 export interface FlipListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     items: FlipListItem[];
     /**
-     * Item opened during the initial render.
+     * Currently opened item in controlled mode.
+     *
+     * `null` means that all items are closed.
+     *
+     * When this prop is provided, FlipList does not
+     * own the opened-item state.
+     */
+    openId?: React.Key | null;
+    /**
+     * Item opened during the initial render
+     * in uncontrolled mode.
      *
      * Later changes to this prop do not control
      * the component state.
      */
     defaultOpenId?: React.Key;
     /**
-     * Scrolls the initially opened item into view once
-     * after mounting.
+     * Called when the user requests a change
+     * of the opened item.
+     *
+     * Receives the item id when an item is opened,
+     * and `null` when the currently opened item
+     * is closed.
+     */
+    onOpenChange?: (id: React.Key | null) => void;
+    /**
+     * Scrolls the item that is open during
+     * the initial render into view once.
+     *
+     * In uncontrolled mode, the initial item comes
+     * from `defaultOpenId`.
+     *
+     * In controlled mode, the initial item comes
+     * from `openId`.
      *
-     * Has no effect without a valid defaultOpenId.
-     * Manual item opening never triggers scrolling.
+     * Later state changes never trigger scrolling.
      */
-    scrollToDefaultOpen?: boolean;
+    scrollToInitialOpen?: boolean;
 }
 declare const FlipList: React.FC<FlipListProps>;
 export default FlipList;