jvetrau-ds 0.2.4 → 0.2.6

package/components/panel/panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":";;;;AAWA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,sBAAsB,MAAA,KAAW;AAAA,GAClC,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEF,QAAA,EAAA;AAAA,QAAA,CAAA,OAAA,IAAW,WAAA,qBACX,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EACZ,QAAA,EAAA;AAAA,UAAA,OAAA,oBACC,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EACX,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,QAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.js","sourcesContent":["import React from 'react';\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  heading,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('panel', className, {\n    'panel--transparent': layout === 'transparent',\n  });\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {(heading || description) && (\n        <div className=\"panel__header\">\n          {heading && (\n            <h2 className=\"panel__heading\">\n              {heading}\n            </h2>\n          )}\n\n          {description && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {children && (\n        <div className=\"panel__content\">\n          {children}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;"]}
+{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":";;;;AAaA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,YACJ,UAAA,IACA,cAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,UAAA;AAAA,gBACT,gBAAA;AAAA,gBACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,gBAChC;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,wBACjB,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.js","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      'panel--transparent':\n        layout === 'transparent',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasHeader =\n    hasHeading ||\n    hasDescription;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"panel__header\">\n          {hasHeading && (\n            <HeadingTag\n              className={classnames(\n                'panel__heading',\n                `panel__heading--h${headingLevel}`,\n                {},\n              )}\n            >\n              {heading}\n            </HeadingTag>\n          )}\n\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {hasContent(children) && (\n        <div className=\"panel__content\">\n          {children}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/patterns/header/header.cjs

@@ -18,6 +18,7 @@ const Header = ({
   avatar,
   avatarDropdown,
   avatarLabel,
+  avatarOnClick,
   className = "",
   children,
   ...props
@@ -48,6 +49,7 @@ const Header = ({
                 type: "button",
                 className: "header__avatar-trigger",
                 "aria-label": avatarLabel,
+                onClick: avatarOnClick,
                 children: avatar
               }
             )

package/patterns/header/header.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/header/header.tsx"],"names":["classnames","jsxs","jsx","Dropdown"],"mappings":";;;;;;;;;;;AAuCA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAA,GACJ,UAAA,CAAW,IAAI,CAAA,GACX,IAAA,GACA,QAAA;AAEN,EAAA,MAAM,SAAA,GACJ,WAAW,MAAM,CAAA;AAEnB,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,IAAI,CAAA,oBACdC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,QAGD,WAAW,YAAY,CAAA,mCACrB,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,QAGD,SAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EAAA,cAAA,mBACCA,cAAA;AAAA,UAACC,yBAAA;AAAA,UAAA;AAAA,YACE,GAAG,cAAA;AAAA,YACJ,WAAA,EAAY,OAAA;AAAA,YACZ,OAAA,kBACED,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,SAAA,EAAU,wBAAA;AAAA,gBACV,YAAA,EACE,WAAA;AAAA,gBAGD,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,YAIJ,MAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"header.cjs","sourcesContent":["import React from 'react';\n\nimport './header.css';\nimport Dropdown, {\n  type DropdownProps,\n} from '../../components/dropdown';\nimport { classnames } from '../../components/helpers/classnames';\n\ntype HeaderNativeProps =\n  React.HTMLAttributes<HTMLElement>;\n\ntype HeaderBaseProps =\n  HeaderNativeProps & {\n    logo?: React.ReactNode;\n    menu?: React.ReactNode;\n  };\n\ntype HeaderWithoutAvatarDropdown = {\n  avatar?: React.ReactNode;\n  avatarDropdown?: never;\n  avatarLabel?: never;\n};\n\ntype HeaderWithAvatarDropdown = {\n  avatar: React.ReactNode;\n  avatarDropdown: Omit<\n    DropdownProps,\n    'trigger' | 'interaction'\n  >;\n  avatarLabel: string;\n};\n\nexport type HeaderProps =\n  HeaderBaseProps &\n  (\n    | HeaderWithoutAvatarDropdown\n    | HeaderWithAvatarDropdown\n  );\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Header: React.FC<HeaderProps> = ({\n  logo,\n  menu,\n  avatar,\n  avatarDropdown,\n  avatarLabel,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'header',\n    className,\n    {},\n  );\n\n  const resolvedMenu =\n    hasContent(menu)\n      ? menu\n      : children;\n\n  const hasAvatar =\n    hasContent(avatar);\n\n  return (\n    <header\n      className={classes}\n      {...props}\n    >\n      {hasContent(logo) && (\n        <div className=\"header__logo\">\n          {logo}\n        </div>\n      )}\n\n      {hasContent(resolvedMenu) && (\n        <div className=\"header__menu\">\n          {resolvedMenu}\n        </div>\n      )}\n\n      {hasAvatar && (\n        <div className=\"header__avatar\">\n          {avatarDropdown ? (\n            <Dropdown\n              {...avatarDropdown}\n              interaction=\"hover\"\n              trigger={\n                <button\n                  type=\"button\"\n                  className=\"header__avatar-trigger\"\n                  aria-label={\n                    avatarLabel\n                  }\n                >\n                  {avatar}\n                </button>\n              }\n            />\n          ) : (\n            avatar\n          )}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default Header;\n"]}
+{"version":3,"sources":["../../../src/patterns/header/header.tsx"],"names":["classnames","jsxs","jsx","Dropdown"],"mappings":";;;;;;;;;;;AAyCA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAA,GACJ,UAAA,CAAW,IAAI,CAAA,GACX,IAAA,GACA,QAAA;AAEN,EAAA,MAAM,SAAA,GACJ,WAAW,MAAM,CAAA;AAEnB,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,IAAI,CAAA,oBACdC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,QAGD,WAAW,YAAY,CAAA,mCACrB,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,QAGD,SAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EAAA,cAAA,mBACCA,cAAA;AAAA,UAACC,yBAAA;AAAA,UAAA;AAAA,YACE,GAAG,cAAA;AAAA,YACJ,WAAA,EAAY,OAAA;AAAA,YACZ,OAAA,kBACED,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,SAAA,EAAU,wBAAA;AAAA,gBACV,YAAA,EACE,WAAA;AAAA,gBAEF,OAAA,EACE,aAAA;AAAA,gBAGD,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,YAIJ,MAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"header.cjs","sourcesContent":["import React from 'react';\n\nimport './header.css';\nimport Dropdown, {\n  type DropdownProps,\n} from '../../components/dropdown';\nimport { classnames } from '../../components/helpers/classnames';\n\ntype HeaderNativeProps =\n  React.HTMLAttributes<HTMLElement>;\n\ntype HeaderBaseProps =\n  HeaderNativeProps & {\n    logo?: React.ReactNode;\n    menu?: React.ReactNode;\n  };\n\ntype HeaderWithoutAvatarDropdown = {\n  avatar?: React.ReactNode;\n  avatarDropdown?: never;\n  avatarLabel?: never;\n  avatarOnClick?: never;\n};\n\ntype HeaderWithAvatarDropdown = {\n  avatar: React.ReactNode;\n  avatarDropdown: Omit<\n    DropdownProps,\n    'trigger' | 'interaction'\n  >;\n  avatarLabel: string;\n  avatarOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nexport type HeaderProps =\n  HeaderBaseProps &\n  (\n    | HeaderWithoutAvatarDropdown\n    | HeaderWithAvatarDropdown\n  );\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Header: React.FC<HeaderProps> = ({\n  logo,\n  menu,\n  avatar,\n  avatarDropdown,\n  avatarLabel,\n  avatarOnClick,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'header',\n    className,\n    {},\n  );\n\n  const resolvedMenu =\n    hasContent(menu)\n      ? menu\n      : children;\n\n  const hasAvatar =\n    hasContent(avatar);\n\n  return (\n    <header\n      className={classes}\n      {...props}\n    >\n      {hasContent(logo) && (\n        <div className=\"header__logo\">\n          {logo}\n        </div>\n      )}\n\n      {hasContent(resolvedMenu) && (\n        <div className=\"header__menu\">\n          {resolvedMenu}\n        </div>\n      )}\n\n      {hasAvatar && (\n        <div className=\"header__avatar\">\n          {avatarDropdown ? (\n            <Dropdown\n              {...avatarDropdown}\n              interaction=\"hover\"\n              trigger={\n                <button\n                  type=\"button\"\n                  className=\"header__avatar-trigger\"\n                  aria-label={\n                    avatarLabel\n                  }\n                  onClick={\n                    avatarOnClick\n                  }\n                >\n                  {avatar}\n                </button>\n              }\n            />\n          ) : (\n            avatar\n          )}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default Header;\n"]}

package/patterns/header/header.d.ts

@@ -10,11 +10,13 @@ type HeaderWithoutAvatarDropdown = {
     avatar?: React.ReactNode;
     avatarDropdown?: never;
     avatarLabel?: never;
+    avatarOnClick?: never;
 };
 type HeaderWithAvatarDropdown = {
     avatar: React.ReactNode;
     avatarDropdown: Omit<DropdownProps, 'trigger' | 'interaction'>;
     avatarLabel: string;
+    avatarOnClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 export type HeaderProps = HeaderBaseProps & (HeaderWithoutAvatarDropdown | HeaderWithAvatarDropdown);
 declare const Header: React.FC<HeaderProps>;

package/patterns/header/header.js

@@ -12,6 +12,7 @@ const Header = ({
   avatar,
   avatarDropdown,
   avatarLabel,
+  avatarOnClick,
   className = "",
   children,
   ...props
@@ -42,6 +43,7 @@ const Header = ({
                 type: "button",
                 className: "header__avatar-trigger",
                 "aria-label": avatarLabel,
+                onClick: avatarOnClick,
                 children: avatar
               }
             )

package/patterns/header/header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/header/header.tsx"],"names":[],"mappings":";;;;;AAuCA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAA,GACJ,UAAA,CAAW,IAAI,CAAA,GACX,IAAA,GACA,QAAA;AAEN,EAAA,MAAM,SAAA,GACJ,WAAW,MAAM,CAAA;AAEnB,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,IAAI,CAAA,oBACd,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,QAGD,WAAW,YAAY,CAAA,wBACrB,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,QAGD,SAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EAAA,cAAA,mBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,cAAA;AAAA,YACJ,WAAA,EAAY,OAAA;AAAA,YACZ,OAAA,kBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,SAAA,EAAU,wBAAA;AAAA,gBACV,YAAA,EACE,WAAA;AAAA,gBAGD,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,YAIJ,MAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"header.js","sourcesContent":["import React from 'react';\n\nimport './header.css';\nimport Dropdown, {\n  type DropdownProps,\n} from '../../components/dropdown';\nimport { classnames } from '../../components/helpers/classnames';\n\ntype HeaderNativeProps =\n  React.HTMLAttributes<HTMLElement>;\n\ntype HeaderBaseProps =\n  HeaderNativeProps & {\n    logo?: React.ReactNode;\n    menu?: React.ReactNode;\n  };\n\ntype HeaderWithoutAvatarDropdown = {\n  avatar?: React.ReactNode;\n  avatarDropdown?: never;\n  avatarLabel?: never;\n};\n\ntype HeaderWithAvatarDropdown = {\n  avatar: React.ReactNode;\n  avatarDropdown: Omit<\n    DropdownProps,\n    'trigger' | 'interaction'\n  >;\n  avatarLabel: string;\n};\n\nexport type HeaderProps =\n  HeaderBaseProps &\n  (\n    | HeaderWithoutAvatarDropdown\n    | HeaderWithAvatarDropdown\n  );\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Header: React.FC<HeaderProps> = ({\n  logo,\n  menu,\n  avatar,\n  avatarDropdown,\n  avatarLabel,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'header',\n    className,\n    {},\n  );\n\n  const resolvedMenu =\n    hasContent(menu)\n      ? menu\n      : children;\n\n  const hasAvatar =\n    hasContent(avatar);\n\n  return (\n    <header\n      className={classes}\n      {...props}\n    >\n      {hasContent(logo) && (\n        <div className=\"header__logo\">\n          {logo}\n        </div>\n      )}\n\n      {hasContent(resolvedMenu) && (\n        <div className=\"header__menu\">\n          {resolvedMenu}\n        </div>\n      )}\n\n      {hasAvatar && (\n        <div className=\"header__avatar\">\n          {avatarDropdown ? (\n            <Dropdown\n              {...avatarDropdown}\n              interaction=\"hover\"\n              trigger={\n                <button\n                  type=\"button\"\n                  className=\"header__avatar-trigger\"\n                  aria-label={\n                    avatarLabel\n                  }\n                >\n                  {avatar}\n                </button>\n              }\n            />\n          ) : (\n            avatar\n          )}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default Header;\n"]}
+{"version":3,"sources":["../../../src/patterns/header/header.tsx"],"names":[],"mappings":";;;;;AAyCA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAA,GACJ,UAAA,CAAW,IAAI,CAAA,GACX,IAAA,GACA,QAAA;AAEN,EAAA,MAAM,SAAA,GACJ,WAAW,MAAM,CAAA;AAEnB,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,IAAI,CAAA,oBACd,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,QAGD,WAAW,YAAY,CAAA,wBACrB,KAAA,EAAA,EAAI,SAAA,EAAU,gBACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,QAGD,SAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EAAA,cAAA,mBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,cAAA;AAAA,YACJ,WAAA,EAAY,OAAA;AAAA,YACZ,OAAA,kBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,SAAA,EAAU,wBAAA;AAAA,gBACV,YAAA,EACE,WAAA;AAAA,gBAEF,OAAA,EACE,aAAA;AAAA,gBAGD,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,YAIJ,MAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"header.js","sourcesContent":["import React from 'react';\n\nimport './header.css';\nimport Dropdown, {\n  type DropdownProps,\n} from '../../components/dropdown';\nimport { classnames } from '../../components/helpers/classnames';\n\ntype HeaderNativeProps =\n  React.HTMLAttributes<HTMLElement>;\n\ntype HeaderBaseProps =\n  HeaderNativeProps & {\n    logo?: React.ReactNode;\n    menu?: React.ReactNode;\n  };\n\ntype HeaderWithoutAvatarDropdown = {\n  avatar?: React.ReactNode;\n  avatarDropdown?: never;\n  avatarLabel?: never;\n  avatarOnClick?: never;\n};\n\ntype HeaderWithAvatarDropdown = {\n  avatar: React.ReactNode;\n  avatarDropdown: Omit<\n    DropdownProps,\n    'trigger' | 'interaction'\n  >;\n  avatarLabel: string;\n  avatarOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nexport type HeaderProps =\n  HeaderBaseProps &\n  (\n    | HeaderWithoutAvatarDropdown\n    | HeaderWithAvatarDropdown\n  );\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Header: React.FC<HeaderProps> = ({\n  logo,\n  menu,\n  avatar,\n  avatarDropdown,\n  avatarLabel,\n  avatarOnClick,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'header',\n    className,\n    {},\n  );\n\n  const resolvedMenu =\n    hasContent(menu)\n      ? menu\n      : children;\n\n  const hasAvatar =\n    hasContent(avatar);\n\n  return (\n    <header\n      className={classes}\n      {...props}\n    >\n      {hasContent(logo) && (\n        <div className=\"header__logo\">\n          {logo}\n        </div>\n      )}\n\n      {hasContent(resolvedMenu) && (\n        <div className=\"header__menu\">\n          {resolvedMenu}\n        </div>\n      )}\n\n      {hasAvatar && (\n        <div className=\"header__avatar\">\n          {avatarDropdown ? (\n            <Dropdown\n              {...avatarDropdown}\n              interaction=\"hover\"\n              trigger={\n                <button\n                  type=\"button\"\n                  className=\"header__avatar-trigger\"\n                  aria-label={\n                    avatarLabel\n                  }\n                  onClick={\n                    avatarOnClick\n                  }\n                >\n                  {avatar}\n                </button>\n              }\n            />\n          ) : (\n            avatar\n          )}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default Header;\n"]}

package/patterns/modal/modal.cjs

@@ -3,66 +3,99 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('./modal.css');
+var Button = require('../../components/button');
 var classnames = require('../../components/helpers/classnames');
+var Panel = require('../../components/panel');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+var Panel__default = /*#__PURE__*/_interopDefault(Panel);
 
 const Modal = ({
   open,
   onClose,
-  ariaLabel,
+  heading,
+  description,
+  closeLabel,
   presentation = "dialog",
   size = "default",
   closeOnBackdrop = true,
   closeOnEscape = true,
   className = "",
   children,
+  onClick,
   ...props
 }) => {
+  const dialogRef = react.useRef(null);
+  const classes = classnames.classnames(
+    "modal",
+    className,
+    {
+      "modal--wide": size === "wide",
+      "modal--fullscreen": presentation === "fullscreen"
+    }
+  );
+  const panelLayout = presentation === "fullscreen" ? "transparent" : "card";
   react.useEffect(() => {
-    if (!open || !closeOnEscape) {
+    const dialog = dialogRef.current;
+    if (!dialog) {
       return;
     }
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onClose();
+    if (open) {
+      if (!dialog.open) {
+        dialog.showModal();
       }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open, closeOnEscape, onClose]);
-  if (!open) {
-    return null;
-  }
-  const classes = classnames.classnames("modal", className, {
-    "modal--wide": size === "wide",
-    "modal--fullscreen": presentation === "fullscreen"
-  });
-  const handleBackdropClick = () => {
-    if (!closeOnBackdrop) {
+      return;
+    }
+    if (dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+  const handleCancel = (event) => {
+    event.preventDefault();
+    if (!closeOnEscape) {
+      return;
+    }
+    onClose();
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || !closeOnBackdrop || event.target !== event.currentTarget) {
       return;
     }
     onClose();
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "dialog",
     {
+      ...props,
+      ref: dialogRef,
       className: classes,
-      onClick: handleBackdropClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "modal__content",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": ariaLabel,
-          onClick: (event) => {
-            event.stopPropagation();
-          },
-          ...props,
-          children
-        }
-      )
+      onCancel: handleCancel,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal__surface", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Panel__default.default,
+          {
+            layout: panelLayout,
+            heading,
+            description,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button__default.default,
+          {
+            type: "button",
+            mode: "toolbar",
+            icon: "close",
+            className: "modal__close",
+            "aria-label": closeLabel,
+            onClick: onClose
+          }
+        )
+      ] })
     }
   );
 };

package/patterns/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":["useEffect","classnames","jsx"],"mappings":";;;;;;;AAeA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,aAAA,EAAe;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyB;AAC9C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAElD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACvD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,aAAA,EAAe,OAAO,CAAC,CAAA;AAEjC,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAA,GAAUC,qBAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,eAAe,IAAA,KAAS,MAAA;AAAA,IACxB,qBAAqB,YAAA,KAAiB;AAAA,GACvC,CAAA;AAED,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,IAAI,CAAC,eAAA,EAAiB;AACpB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,OAAA,EAAS,mBAAA;AAAA,MAET,QAAA,kBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,gBAAA;AAAA,UACV,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UACX,YAAA,EAAY,SAAA;AAAA,UACZ,OAAA,EAAS,CAAC,KAAA,KAAU;AAClB,YAAA,KAAA,CAAM,eAAA,EAAgB;AAAA,UACxB,CAAA;AAAA,UACC,GAAG,KAAA;AAAA,UAEH;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.cjs","sourcesContent":["import React, { useEffect } from 'react';\nimport './modal.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface ModalProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n  ariaLabel: string;\n  presentation?: 'dialog' | 'fullscreen';\n  size?: 'default' | 'wide';\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  ariaLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  ...props\n}) => {\n  useEffect(() => {\n    if (!open || !closeOnEscape) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open, closeOnEscape, onClose]);\n\n  if (!open) {\n    return null;\n  }\n\n  const classes = classnames('modal', className, {\n    'modal--wide': size === 'wide',\n    'modal--fullscreen': presentation === 'fullscreen',\n  });\n\n  const handleBackdropClick = () => {\n    if (!closeOnBackdrop) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <div\n      className={classes}\n      onClick={handleBackdropClick}\n    >\n      <div\n        className=\"modal__content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        onClick={(event) => {\n          event.stopPropagation();\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Modal;"]}
+{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":["useRef","classnames","useEffect","jsx","jsxs","Panel","Button"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJA,aAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAAD,cAAA;AAAA,UAACE,sBAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEAF,cAAA;AAAA,UAACG,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.cjs","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}

package/patterns/modal/modal.css

@@ -2,7 +2,7 @@
   /* color */
   --modal-backdrop-bg: rgb(0 0 0 / 40%);
 
-  background: var(--modal-backdrop-bg);
+  color: inherit;
 
   /* typography */
 
@@ -10,17 +10,36 @@
   --modal-padding: var(--size-grid-padding-horz);
   --modal-content-width: min(640px, 100%);
   --modal-content-width-wide: min(1120px, 100%);
-  --modal-content-height-fullscreen: 100%;
+  --modal-close-offset: var(--padding-container);
+
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+
+  margin: 0;
+  padding: var(--modal-padding);
 
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
+  border: 0;
 
   display: flex;
   align-items: center;
   justify-content: center;
 
-  padding: var(--modal-padding);
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal::backdrop {
+  /* color */
+  background: var(--modal-backdrop-bg);
+
+  /* typography */
+
+  /* size */
 
   /* border */
 
@@ -29,14 +48,17 @@
   /* motion */
 }
 
-.modal__content {
+.modal__surface {
   /* color */
 
   /* typography */
 
   /* size */
+  position: relative;
+
   width: var(--modal-content-width);
   max-height: 100%;
+
   overflow: auto;
 
   /* border */
@@ -46,34 +68,90 @@
   /* motion */
 }
 
-.modal--wide .modal__content {
+.modal__close {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  top: var(--modal-close-offset);
+  right: var(--modal-close-offset);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal--wide .modal__surface {
+  /* color */
+
+  /* typography */
+
   /* size */
   width: var(--modal-content-width-wide);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .modal--fullscreen {
+  /* color */
+
+  /* typography */
+
   /* size */
-  align-items: flex-start;
+  align-items: stretch;
   justify-content: stretch;
 
   padding: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.modal--fullscreen .modal__content {
+.modal--fullscreen .modal__surface {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
+  align-items: stretch;
 
   width: 100%;
-  height: var(--modal-content-height-fullscreen);
-
+  height: 100%;
   max-height: none;
+
+  overflow: auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.modal--fullscreen .modal__content > * {
+.modal--fullscreen .panel {
+  /* color */
+
+  /* typography */
+
   /* size */
   flex: 1;
-  width: 100%;
   min-height: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }

package/patterns/modal/modal.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
 import './modal.css';
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+type ModalNativeProps = Omit<React.DialogHTMLAttributes<HTMLDialogElement>, 'children' | 'onCancel' | 'onClose' | 'open'>;
+export interface ModalProps extends ModalNativeProps {
     open: boolean;
     onClose: () => void;
-    ariaLabel: string;
+    heading?: React.ReactNode;
+    description?: React.ReactNode;
+    closeLabel: string;
     presentation?: 'dialog' | 'fullscreen';
     size?: 'default' | 'wide';
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;
+    children?: React.ReactNode;
 }
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/patterns/modal/modal.js

@@ -1,66 +1,94 @@
-import { jsx } from 'react/jsx-runtime';
-import { useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import './modal.css';
+import Button from '../../components/button';
 import { classnames } from '../../components/helpers/classnames';
+import Panel from '../../components/panel';
 
 const Modal = ({
   open,
   onClose,
-  ariaLabel,
+  heading,
+  description,
+  closeLabel,
   presentation = "dialog",
   size = "default",
   closeOnBackdrop = true,
   closeOnEscape = true,
   className = "",
   children,
+  onClick,
   ...props
 }) => {
+  const dialogRef = useRef(null);
+  const classes = classnames(
+    "modal",
+    className,
+    {
+      "modal--wide": size === "wide",
+      "modal--fullscreen": presentation === "fullscreen"
+    }
+  );
+  const panelLayout = presentation === "fullscreen" ? "transparent" : "card";
   useEffect(() => {
-    if (!open || !closeOnEscape) {
+    const dialog = dialogRef.current;
+    if (!dialog) {
       return;
     }
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onClose();
+    if (open) {
+      if (!dialog.open) {
+        dialog.showModal();
       }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open, closeOnEscape, onClose]);
-  if (!open) {
-    return null;
-  }
-  const classes = classnames("modal", className, {
-    "modal--wide": size === "wide",
-    "modal--fullscreen": presentation === "fullscreen"
-  });
-  const handleBackdropClick = () => {
-    if (!closeOnBackdrop) {
+      return;
+    }
+    if (dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+  const handleCancel = (event) => {
+    event.preventDefault();
+    if (!closeOnEscape) {
+      return;
+    }
+    onClose();
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || !closeOnBackdrop || event.target !== event.currentTarget) {
       return;
     }
     onClose();
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    "dialog",
     {
+      ...props,
+      ref: dialogRef,
       className: classes,
-      onClick: handleBackdropClick,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "modal__content",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": ariaLabel,
-          onClick: (event) => {
-            event.stopPropagation();
-          },
-          ...props,
-          children
-        }
-      )
+      onCancel: handleCancel,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs("div", { className: "modal__surface", children: [
+        /* @__PURE__ */ jsx(
+          Panel,
+          {
+            layout: panelLayout,
+            heading,
+            description,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            mode: "toolbar",
+            icon: "close",
+            className: "modal__close",
+            "aria-label": closeLabel,
+            onClick: onClose
+          }
+        )
+      ] })
     }
   );
 };

package/patterns/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":[],"mappings":";;;;;AAeA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,aAAA,EAAe;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyB;AAC9C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAElD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACvD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,aAAA,EAAe,OAAO,CAAC,CAAA;AAEjC,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,eAAe,IAAA,KAAS,MAAA;AAAA,IACxB,qBAAqB,YAAA,KAAiB;AAAA,GACvC,CAAA;AAED,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,IAAI,CAAC,eAAA,EAAiB;AACpB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,OAAA,EAAS,mBAAA;AAAA,MAET,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,gBAAA;AAAA,UACV,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UACX,YAAA,EAAY,SAAA;AAAA,UACZ,OAAA,EAAS,CAAC,KAAA,KAAU;AAClB,YAAA,KAAA,CAAM,eAAA,EAAgB;AAAA,UACxB,CAAA;AAAA,UACC,GAAG,KAAA;AAAA,UAEH;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.js","sourcesContent":["import React, { useEffect } from 'react';\nimport './modal.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface ModalProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n  ariaLabel: string;\n  presentation?: 'dialog' | 'fullscreen';\n  size?: 'default' | 'wide';\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  ariaLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  ...props\n}) => {\n  useEffect(() => {\n    if (!open || !closeOnEscape) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open, closeOnEscape, onClose]);\n\n  if (!open) {\n    return null;\n  }\n\n  const classes = classnames('modal', className, {\n    'modal--wide': size === 'wide',\n    'modal--fullscreen': presentation === 'fullscreen',\n  });\n\n  const handleBackdropClick = () => {\n    if (!closeOnBackdrop) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <div\n      className={classes}\n      onClick={handleBackdropClick}\n    >\n      <div\n        className=\"modal__content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        onClick={(event) => {\n          event.stopPropagation();\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Modal;"]}
+{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":[],"mappings":";;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJ,OAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.js","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}