jvetrau-ds 0.2.6 → 0.2.7

package/catalog/types.d.ts

@@ -0,0 +1,12 @@
+export type ComponentState = 'default' | 'primary' | 'hover' | 'focus' | 'active' | 'disabled' | 'error' | 'success' | 'checked' | 'unchecked' | 'loading' | 'idle' | 'playing' | 'paused' | string;
+export interface ComponentMeta {
+    name: string;
+    purpose: string;
+    anatomy: string[];
+    states: ComponentState[];
+    props: string[];
+    usage: string[];
+    llmDescription: string;
+    example: string;
+    isPlaceholder?: boolean;
+}

package/components/action-group/action-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const actionGroupMeta: ComponentMeta;

package/components/attach/attach.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const attachMeta: ComponentMeta;

package/components/avatar/avatar.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const avatarMeta: ComponentMeta;

package/components/avatar-upload/avatar-upload.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const avatarUploadMeta: ComponentMeta;

package/components/breadcrumbs/breadcrumbs.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const breadcrumbsMeta: ComponentMeta;

package/components/button/button.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const buttonMeta: ComponentMeta;

package/components/calendar-month/calendar-month.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const calendarMonthMeta: ComponentMeta;

package/components/card/card.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const cardMeta: ComponentMeta;

package/components/card-group/card-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const cardGroupMeta: ComponentMeta;

package/components/checkbox/checkbox.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const checkboxMeta: ComponentMeta;

package/components/course-outline/course-outline.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const courseOutlineMeta: ComponentMeta;

package/components/discussion/discussion.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const discussionMeta: ComponentMeta;

package/components/dropdown/dropdown.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const dropdownMeta: ComponentMeta;

package/components/field/field.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const fieldMeta: ComponentMeta;

package/components/field-group/field-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const fieldGroupMeta: ComponentMeta;

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

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const flipListMeta: ComponentMeta;

package/components/helpers/helpers.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const helpersMeta: ComponentMeta;

package/components/input/input.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const inputMeta: ComponentMeta;

package/components/logo/logo.meta.d.ts

@@ -0,0 +1,10 @@
+export declare const logoMeta: {
+    name: string;
+    purpose: string;
+    anatomy: string[];
+    states: string[];
+    props: string[];
+    usage: string[];
+    llmDescription: string;
+    example: string;
+};

package/components/markdown/markdown.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const markdownMeta: ComponentMeta;

package/components/menu/menu.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const menuMeta: ComponentMeta;

package/components/panel/panel.cjs

@@ -9,6 +9,7 @@ function hasContent(value) {
 }
 const Panel = ({
   layout = "card",
+  overflow = "visible",
   heading,
   headingLevel = 2,
   description,
@@ -20,34 +21,36 @@ const Panel = ({
     "panel",
     className,
     {
-      "panel--transparent": layout === "transparent"
+      "panel--transparent": layout === "transparent",
+      "panel--content-overflow": overflow === "content"
     }
   );
   const HeadingTag = `h${headingLevel}`;
   const hasHeading = hasContent(heading);
   const hasDescription = hasContent(description);
-  const hasHeader = hasHeading || hasDescription;
+  const hasChildren = hasContent(children);
+  const hasBody = hasDescription || hasChildren;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       className: classes,
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel__header", children: [
-          hasHeading && /* @__PURE__ */ jsxRuntime.jsx(
-            HeadingTag,
-            {
-              className: classnames.classnames(
-                "panel__heading",
-                `panel__heading--h${headingLevel}`,
-                {}
-              ),
-              children: heading
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "panel__description", children: description })
-        ] }),
-        hasContent(children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel__content", children })
+        hasHeading && /* @__PURE__ */ jsxRuntime.jsx(
+          HeadingTag,
+          {
+            className: classnames.classnames(
+              "panel__heading",
+              `panel__heading--h${headingLevel}`,
+              {}
+            ),
+            children: heading
+          }
+        ),
+        hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel__body", children: [
+          hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "panel__description", children: description }),
+          hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel__content", children })
+        ] })
       ]
     }
   );

package/components/panel/panel.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":["classnames","jsxs","jsx"],"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,GAAUA,qBAAA;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,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACCA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACCC,cAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWF,qBAAA;AAAA,gBACT,gBAAA;AAAA,gBACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,gBAChC;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACCE,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,mCACjB,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.cjs","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"]}
+{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAcA,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,QAAA,GAAW,SAAA;AAAA,EACX,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,GAAUA,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,aAAA;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,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,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACCC,cAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,qBAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACCC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACCC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.cjs","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  overflow?: 'visible' | 'content';\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  overflow = 'visible',\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      'panel--content-overflow':\n        overflow === 'content',\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 hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\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      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}

package/components/panel/panel.css

@@ -50,16 +50,13 @@
   /* motion */
 }
 
-.panel__header {
+.panel--content-overflow {
   /* color */
 
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
-  gap: var(--panel-title-gap);
-  width: 100%;
+  overflow: hidden;
 
   /* border */
 
@@ -75,6 +72,7 @@
   /* typography */
 
   /* size */
+  flex: 0 0 auto;
   margin: 0;
 
   /* border */
@@ -122,6 +120,24 @@
   /* motion */
 }
 
+.panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--panel-title-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .panel__description {
   /* color */
   color: inherit;
@@ -155,5 +171,23 @@
 
   /* depth */
 
+  /* motion */
+}
+
+.panel--content-overflow .panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 1;
+  min-height: 0;
+
+  overflow: auto;
+
+  /* border */
+
+  /* depth */
+
   /* motion */
 }

package/components/panel/panel.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './panel.css';
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
     layout?: 'card' | 'transparent';
+    overflow?: 'visible' | 'content';
     heading?: React.ReactNode;
     headingLevel?: 2 | 3;
     description?: React.ReactNode;

package/components/panel/panel.js

@@ -7,6 +7,7 @@ function hasContent(value) {
 }
 const Panel = ({
   layout = "card",
+  overflow = "visible",
   heading,
   headingLevel = 2,
   description,
@@ -18,34 +19,36 @@ const Panel = ({
     "panel",
     className,
     {
-      "panel--transparent": layout === "transparent"
+      "panel--transparent": layout === "transparent",
+      "panel--content-overflow": overflow === "content"
     }
   );
   const HeadingTag = `h${headingLevel}`;
   const hasHeading = hasContent(heading);
   const hasDescription = hasContent(description);
-  const hasHeader = hasHeading || hasDescription;
+  const hasChildren = hasContent(children);
+  const hasBody = hasDescription || hasChildren;
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: classes,
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs("div", { className: "panel__header", children: [
-          hasHeading && /* @__PURE__ */ jsx(
-            HeadingTag,
-            {
-              className: classnames(
-                "panel__heading",
-                `panel__heading--h${headingLevel}`,
-                {}
-              ),
-              children: heading
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsx("p", { className: "panel__description", children: description })
-        ] }),
-        hasContent(children) && /* @__PURE__ */ jsx("div", { className: "panel__content", children })
+        hasHeading && /* @__PURE__ */ jsx(
+          HeadingTag,
+          {
+            className: classnames(
+              "panel__heading",
+              `panel__heading--h${headingLevel}`,
+              {}
+            ),
+            children: heading
+          }
+        ),
+        hasBody && /* @__PURE__ */ jsxs("div", { className: "panel__body", children: [
+          hasDescription && /* @__PURE__ */ jsx("p", { className: "panel__description", children: description }),
+          hasChildren && /* @__PURE__ */ jsx("div", { className: "panel__content", children })
+        ] })
       ]
     }
   );

package/components/panel/panel.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":";;;;AAcA,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,QAAA,GAAW,SAAA;AAAA,EACX,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;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,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,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;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  overflow?: 'visible' | 'content';\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  overflow = 'visible',\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      'panel--content-overflow':\n        overflow === 'content',\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 hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\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      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}

package/components/panel/panel.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const panelMeta: ComponentMeta;

package/components/progressbar/progressbar.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const progressBarMeta: ComponentMeta;

package/components/radio/radio.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const radioMeta: ComponentMeta;

package/components/richedit/richedit.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const richEditMeta: ComponentMeta;

package/components/search/search.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const searchMeta: ComponentMeta;

package/components/select/select.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const selectMeta: ComponentMeta;

package/components/tabs/tabs.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const tabsMeta: ComponentMeta;

package/components/tag/tag.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const tagMeta: ComponentMeta;

package/components/textarea/textarea.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const textareaMeta: ComponentMeta;

package/components/video/video.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const videoMeta: ComponentMeta;

package/icons/icons.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../catalog/types';
+export declare const iconMeta: ComponentMeta;

package/package.json

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

package/patterns/form/form.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const formMeta: ComponentMeta;

package/patterns/header/header.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const headerMeta: ComponentMeta;

package/patterns/masthead/masthead.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const mastheadMeta: ComponentMeta;

package/patterns/modal/modal.cjs

@@ -79,6 +79,7 @@ const Modal = ({
           Panel__default.default,
           {
             layout: panelLayout,
+            overflow: "content",
             heading,
             description,
             children

package/patterns/modal/modal.cjs.map

@@ -1 +1 @@
-{"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"]}
+{"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,QAAA,EAAS,SAAA;AAAA,YACT,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          overflow=\"content\"\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

@@ -1,7 +1,8 @@
 .modal {
   /* color */
-  --modal-backdrop-bg: rgb(0 0 0 / 40%);
+  --modal-color: var(--color-text-container);
 
+  background: transparent;
   color: inherit;
 
   /* typography */
@@ -20,11 +21,39 @@
   margin: 0;
   padding: var(--modal-padding);
 
+  align-items: center;
+  justify-content: center;
+
+  /* border */
   border: 0;
 
+  /* depth */
+
+  /* motion */
+}
+
+.modal:not([open]) {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal[open] {
+  /* color */
+
+  /* typography */
+
+  /* size */
   display: flex;
-  align-items: center;
-  justify-content: center;
 
   /* border */
 
@@ -35,7 +64,7 @@
 
 .modal::backdrop {
   /* color */
-  background: var(--modal-backdrop-bg);
+  background: rgb(0 0 0 / 40%);
 
   /* typography */
 
@@ -56,10 +85,28 @@
   /* size */
   position: relative;
 
+  display: flex;
+  flex-direction: column;
+
   width: var(--modal-content-width);
   max-height: 100%;
 
-  overflow: auto;
+  overflow: hidden;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal__surface > .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  min-height: 0;
 
   /* border */
 
@@ -70,6 +117,7 @@
 
 .modal__close {
   /* color */
+  color: var(--modal-color);
 
   /* typography */
 
@@ -102,6 +150,7 @@
 
 .modal--fullscreen {
   /* color */
+  --modal-color: var(--color-text);
 
   /* typography */
 
@@ -131,7 +180,7 @@
   height: 100%;
   max-height: none;
 
-  overflow: auto;
+  overflow: hidden;
 
   /* border */
 
@@ -147,7 +196,7 @@
 
   /* size */
   flex: 1;
-  min-height: 100%;
+  min-height: 0;
 
   /* border */
 

package/patterns/modal/modal.js

@@ -72,6 +72,7 @@ const Modal = ({
           Panel,
           {
             layout: panelLayout,
+            overflow: "content",
             heading,
             description,
             children

package/patterns/modal/modal.js.map

@@ -1 +1 @@
-{"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"]}
+{"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,QAAA,EAAS,SAAA;AAAA,YACT,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          overflow=\"content\"\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.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const modalMeta: ComponentMeta;

package/styles.css

@@ -3614,16 +3614,13 @@
   /* motion */
 }
 
-.panel__header {
+.panel--content-overflow {
   /* color */
 
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
-  gap: var(--panel-title-gap);
-  width: 100%;
+  overflow: hidden;
 
   /* border */
 
@@ -3639,6 +3636,7 @@
   /* typography */
 
   /* size */
+  flex: 0 0 auto;
   margin: 0;
 
   /* border */
@@ -3686,6 +3684,24 @@
   /* motion */
 }
 
+.panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--panel-title-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .panel__description {
   /* color */
   color: inherit;
@@ -3722,6 +3738,24 @@
   /* motion */
 }
 
+.panel--content-overflow .panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 1;
+  min-height: 0;
+
+  overflow: auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/progressbar/progressbar.css */
 .progressbar {
   /* color */
@@ -5220,8 +5254,9 @@
 /* src/patterns/modal/modal.css */
 .modal {
   /* color */
-  --modal-backdrop-bg: rgb(0 0 0 / 40%);
+  --modal-color: var(--color-text-container);
 
+  background: transparent;
   color: inherit;
 
   /* typography */
@@ -5240,11 +5275,39 @@
   margin: 0;
   padding: var(--modal-padding);
 
+  align-items: center;
+  justify-content: center;
+
+  /* border */
   border: 0;
 
+  /* depth */
+
+  /* motion */
+}
+
+.modal:not([open]) {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal[open] {
+  /* color */
+
+  /* typography */
+
+  /* size */
   display: flex;
-  align-items: center;
-  justify-content: center;
 
   /* border */
 
@@ -5255,7 +5318,7 @@
 
 .modal::backdrop {
   /* color */
-  background: var(--modal-backdrop-bg);
+  background: rgb(0 0 0 / 40%);
 
   /* typography */
 
@@ -5276,10 +5339,28 @@
   /* size */
   position: relative;
 
+  display: flex;
+  flex-direction: column;
+
   width: var(--modal-content-width);
   max-height: 100%;
 
-  overflow: auto;
+  overflow: hidden;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal__surface > .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  min-height: 0;
 
   /* border */
 
@@ -5290,6 +5371,7 @@
 
 .modal__close {
   /* color */
+  color: var(--modal-color);
 
   /* typography */
 
@@ -5322,6 +5404,7 @@
 
 .modal--fullscreen {
   /* color */
+  --modal-color: var(--color-text);
 
   /* typography */
 
@@ -5351,7 +5434,7 @@
   height: 100%;
   max-height: none;
 
-  overflow: auto;
+  overflow: hidden;
 
   /* border */
 
@@ -5367,7 +5450,7 @@
 
   /* size */
   flex: 1;
-  min-height: 100%;
+  min-height: 0;
 
   /* border */