jvetrau-ds 0.1.21 → 0.1.22

package/index.cjs

@@ -23,6 +23,8 @@ var avatar = require('./components/avatar');
 var header = require('./patterns/header');
 var footer = require('./patterns/footer');
 var screenHeader = require('./patterns/screen-header');
+var form = require('./patterns/form');
+var masthead = require('./patterns/masthead');
 var foundation = require('./layouts/foundation');
 var base = require('./layouts/base');
 var sidebar = require('./layouts/sidebar');
@@ -55,6 +57,8 @@ var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var header__default = /*#__PURE__*/_interopDefault(header);
 var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
+var form__default = /*#__PURE__*/_interopDefault(form);
+var masthead__default = /*#__PURE__*/_interopDefault(masthead);
 var foundation__default = /*#__PURE__*/_interopDefault(foundation);
 var base__default = /*#__PURE__*/_interopDefault(base);
 var sidebar__default = /*#__PURE__*/_interopDefault(sidebar);
@@ -156,6 +160,14 @@ Object.defineProperty(exports, "ScreenHeader", {
   enumerable: true,
   get: function () { return screenHeader__default.default; }
 });
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () { return form__default.default; }
+});
+Object.defineProperty(exports, "Masthead", {
+  enumerable: true,
+  get: function () { return masthead__default.default; }
+});
 Object.defineProperty(exports, "LayoutFoundation", {
   enumerable: true,
   get: function () { return foundation__default.default; }

package/index.d.cts

@@ -21,6 +21,8 @@ export { default as Avatar, AvatarProps } from './components/avatar/avatar.cjs';
 export { default as Header, HeaderProps } from './patterns/header/header.cjs';
 export { default as Footer, FooterProps } from './patterns/footer/footer.cjs';
 export { default as ScreenHeader, ScreenHeaderProps } from './patterns/screen-header/screen-header.cjs';
+export { default as Form, FormProps } from './patterns/form/form.cjs';
+export { default as Masthead, MastheadProps } from './patterns/masthead/masthead.cjs';
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './layouts/foundation/foundation.cjs';
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.cjs';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.cjs';

package/index.d.ts

@@ -21,6 +21,8 @@ export { default as Avatar, AvatarProps } from './components/avatar/avatar.js';
 export { default as Header, HeaderProps } from './patterns/header/header.js';
 export { default as Footer, FooterProps } from './patterns/footer/footer.js';
 export { default as ScreenHeader, ScreenHeaderProps } from './patterns/screen-header/screen-header.js';
+export { default as Form, FormProps } from './patterns/form/form.js';
+export { default as Masthead, MastheadProps } from './patterns/masthead/masthead.js';
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './layouts/foundation/foundation.js';
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.js';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.js';

package/index.js

@@ -21,6 +21,8 @@ export { default as Avatar } from './components/avatar';
 export { default as Header } from './patterns/header';
 export { default as Footer } from './patterns/footer';
 export { default as ScreenHeader } from './patterns/screen-header';
+export { default as Form } from './patterns/form';
+export { default as Masthead } from './patterns/masthead';
 export { default as LayoutFoundation } from './layouts/foundation';
 export { default as LayoutBase } from './layouts/base';
 export { default as LayoutSidebar } from './layouts/sidebar';

package/layouts/base/base.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var LayoutFoundation = require('../foundation');
 require('./base.css');
+var classnames = require('../../components/helpers/classnames');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,17 +17,22 @@ const LayoutBase = ({
   className = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const contentClasses = classnames.classnames("layout-base__content", "", {
+    "layout-base__content--narrow": width === "narrow",
+    "layout-base__content--wide": width === "wide",
+    "layout-base__content--full": width === "full"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
     LayoutFoundation__default.default,
     {
-      width,
+      width: "full",
       className,
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-base", children: [
         header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__header", children: header }),
-        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-base__main", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-base__main", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children }) }),
         footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
-      ]
+      ] })
     }
   );
 };

package/layouts/base/base.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACEA,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EACb,QAAA,EACH,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  return (\n    <LayoutFoundation\n      width={width}\n      className={className}\n      {...props}\n    >\n      {header && (\n        <div className=\"layout-base__header\">\n          {header}\n        </div>\n      )}\n\n      <main className=\"layout-base__main\">\n        {children}\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}
+{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsx","LayoutFoundation","jsxs"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAU,mBAAA,EACd,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={className}\n      {...props}\n    >\n      <div className=\"layout-base\">\n        {header && (\n          <div className=\"layout-base__header\">\n            {header}\n          </div>\n        )}\n\n        <main className=\"layout-base__main\">\n          <div className={contentClasses}>\n            {children}\n          </div>\n        </main>\n\n        {footer && (\n          <div className=\"layout-base__footer\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}

package/layouts/base/base.css

@@ -1,3 +1,25 @@
+.layout-base {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  min-height: calc(
+    100dvh -
+    (var(--layout-foundation-padding-vert) * 2)
+  );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-base__header {
   /* color */
 
@@ -19,7 +41,37 @@
   /* typography */
 
   /* size */
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
+  min-width: 0;
+
+  flex: 1;
+
+  padding:
+    var(--layout-foundation-padding-vert)
+    var(--layout-foundation-padding-horz);
+
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__content {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --layout-base-content-width: 960px;
+
   width: 100%;
+  max-width: var(--layout-base-content-width);
 
   /* border */
 
@@ -28,6 +80,18 @@
   /* motion */
 }
 
+.layout-base__content--narrow {
+  --layout-base-content-width: 720px;
+}
+
+.layout-base__content--wide {
+  --layout-base-content-width: 1200px;
+}
+
+.layout-base__content--full {
+  max-width: none;
+}
+
 .layout-base__footer {
   /* color */
 

package/layouts/base/base.js

@@ -1,6 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import LayoutFoundation from '../foundation';
 import './base.css';
+import { classnames } from '../../components/helpers/classnames';
 
 const LayoutBase = ({
   width = "default",
@@ -10,17 +11,22 @@ const LayoutBase = ({
   className = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(
+  const contentClasses = classnames("layout-base__content", "", {
+    "layout-base__content--narrow": width === "narrow",
+    "layout-base__content--wide": width === "wide",
+    "layout-base__content--full": width === "full"
+  });
+  return /* @__PURE__ */ jsx(
     LayoutFoundation,
     {
-      width,
+      width: "full",
       className,
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "layout-base", children: [
         header && /* @__PURE__ */ jsx("div", { className: "layout-base__header", children: header }),
-        /* @__PURE__ */ jsx("main", { className: "layout-base__main", children }),
+        /* @__PURE__ */ jsx("main", { className: "layout-base__main", children: /* @__PURE__ */ jsx("div", { className: contentClasses, children }) }),
         footer && /* @__PURE__ */ jsx("div", { className: "layout-base__footer", children: footer })
-      ]
+      ] })
     }
   );
 };

package/layouts/base/base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;AAaA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACE,IAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EACb,QAAA,EACH,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  return (\n    <LayoutFoundation\n      width={width}\n      className={className}\n      {...props}\n    >\n      {header && (\n        <div className=\"layout-base__header\">\n          {header}\n        </div>\n      )}\n\n      <main className=\"layout-base__main\">\n        {children}\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}
+{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;AAcA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,UAAK,SAAA,EAAU,mBAAA,EACd,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={className}\n      {...props}\n    >\n      <div className=\"layout-base\">\n        {header && (\n          <div className=\"layout-base__header\">\n            {header}\n          </div>\n        )}\n\n        <main className=\"layout-base__main\">\n          <div className={contentClasses}>\n            {children}\n          </div>\n        </main>\n\n        {footer && (\n          <div className=\"layout-base__footer\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}

package/layouts/foundation/foundation.cjs

@@ -5,7 +5,7 @@ require('./foundation.css');
 var classnames = require('../../components/helpers/classnames');
 
 const LayoutFoundation = ({
-  width = "default",
+  width = "full",
   className = "",
   children,
   ...props

package/layouts/foundation/foundation.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/foundation/foundation.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAeA,MAAM,mBAAoD,CAAC;AAAA,EACzD,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,mBAAA,EAAqB,SAAA,EAAW;AAAA,IACzD,6BAA6B,KAAA,KAAU,QAAA;AAAA,IACvC,2BAA2B,KAAA,KAAU,MAAA;AAAA,IACrC,2BAA2B,KAAA,KAAU;AAAA,GACtC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"foundation.cjs","sourcesContent":["import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n  | 'narrow'\n  | 'default'\n  | 'wide'\n  | 'full';\n\nexport interface LayoutFoundationProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n  width = 'default',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('layout-foundation', className, {\n    'layout-foundation--narrow': width === 'narrow',\n    'layout-foundation--wide': width === 'wide',\n    'layout-foundation--full': width === 'full',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"layout-foundation__grid\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default LayoutFoundation;"]}
+{"version":3,"sources":["../../../src/layouts/foundation/foundation.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAeA,MAAM,mBAAoD,CAAC;AAAA,EACzD,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,mBAAA,EAAqB,SAAA,EAAW;AAAA,IACzD,6BAA6B,KAAA,KAAU,QAAA;AAAA,IACvC,2BAA2B,KAAA,KAAU,MAAA;AAAA,IACrC,2BAA2B,KAAA,KAAU;AAAA,GACtC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"foundation.cjs","sourcesContent":["import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n  | 'narrow'\n  | 'default'\n  | 'wide'\n  | 'full';\n\nexport interface LayoutFoundationProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n  width = 'full',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('layout-foundation', className, {\n    'layout-foundation--narrow': width === 'narrow',\n    'layout-foundation--wide': width === 'wide',\n    'layout-foundation--full': width === 'full',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"layout-foundation__grid\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default LayoutFoundation;"]}

package/layouts/foundation/foundation.css

@@ -11,6 +11,9 @@
   --layout-foundation-columns: 12;
   --layout-foundation-gap: var(--size-grid-margin);
 
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
   min-height: 100dvh;
   max-width: var(--layout-foundation-width);
@@ -45,11 +48,14 @@
   display: grid;
   grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
   gap: var(--layout-foundation-gap);
+
   width: 100%;
   min-height: 100dvh;
+
   padding:
     var(--layout-foundation-padding-vert)
     var(--layout-foundation-padding-horz);
+
   box-sizing: border-box;
 
   /* border */

package/layouts/foundation/foundation.js

@@ -3,7 +3,7 @@ import './foundation.css';
 import { classnames } from '../../components/helpers/classnames';
 
 const LayoutFoundation = ({
-  width = "default",
+  width = "full",
   className = "",
   children,
   ...props

package/layouts/foundation/foundation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/foundation/foundation.tsx"],"names":[],"mappings":";;;;AAeA,MAAM,mBAAoD,CAAC;AAAA,EACzD,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,mBAAA,EAAqB,SAAA,EAAW;AAAA,IACzD,6BAA6B,KAAA,KAAU,QAAA;AAAA,IACvC,2BAA2B,KAAA,KAAU,MAAA;AAAA,IACrC,2BAA2B,KAAA,KAAU;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"foundation.js","sourcesContent":["import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n  | 'narrow'\n  | 'default'\n  | 'wide'\n  | 'full';\n\nexport interface LayoutFoundationProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n  width = 'default',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('layout-foundation', className, {\n    'layout-foundation--narrow': width === 'narrow',\n    'layout-foundation--wide': width === 'wide',\n    'layout-foundation--full': width === 'full',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"layout-foundation__grid\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default LayoutFoundation;"]}
+{"version":3,"sources":["../../../src/layouts/foundation/foundation.tsx"],"names":[],"mappings":";;;;AAeA,MAAM,mBAAoD,CAAC;AAAA,EACzD,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,mBAAA,EAAqB,SAAA,EAAW;AAAA,IACzD,6BAA6B,KAAA,KAAU,QAAA;AAAA,IACvC,2BAA2B,KAAA,KAAU,MAAA;AAAA,IACrC,2BAA2B,KAAA,KAAU;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"foundation.js","sourcesContent":["import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n  | 'narrow'\n  | 'default'\n  | 'wide'\n  | 'full';\n\nexport interface LayoutFoundationProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n  width = 'full',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('layout-foundation', className, {\n    'layout-foundation--narrow': width === 'narrow',\n    'layout-foundation--wide': width === 'wide',\n    'layout-foundation--full': width === 'full',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"layout-foundation__grid\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default LayoutFoundation;"]}

package/package.json

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

package/patterns/form/form.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./form.css');
+var classnames = require('../../components/helpers/classnames');
+
+const Form = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames("form", className, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var form_default = Form;
+
+module.exports = form_default;
+//# sourceMappingURL=form.cjs.map
+//# sourceMappingURL=form.cjs.map

package/patterns/form/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/patterns/form/form.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAOA,MAAM,OAA4B,CAAC;AAAA,EACjC,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,MAAA,EAAQ,SAAA,EAAW,EAAE,CAAA;AAEhD,EAAA,uBACEC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"form.cjs","sourcesContent":["import React from 'react';\nimport './form.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface FormProps\n  extends React.FormHTMLAttributes<HTMLFormElement> {}\n\nconst Form: React.FC<FormProps> = ({\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('form', className, {});\n\n  return (\n    <form\n      className={classes}\n      {...props}\n    >\n      {children}\n    </form>\n  );\n};\n\nexport default Form;"]}

package/patterns/form/form.css

@@ -0,0 +1,19 @@
+.form {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --form-gap: var(--margin-form-field-vert);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/patterns/form/form.d.cts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+}
+declare const Form: React.FC<FormProps>;
+
+export { type FormProps, Form as default };

package/patterns/form/form.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+}
+declare const Form: React.FC<FormProps>;
+
+export { type FormProps, Form as default };

package/patterns/form/form.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import './form.css';
+import { classnames } from '../../components/helpers/classnames';
+
+const Form = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("form", className, {});
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var form_default = Form;
+
+export { form_default as default };
+//# sourceMappingURL=form.js.map
+//# sourceMappingURL=form.js.map

package/patterns/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/patterns/form/form.tsx"],"names":[],"mappings":";;;;AAOA,MAAM,OAA4B,CAAC;AAAA,EACjC,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,MAAA,EAAQ,SAAA,EAAW,EAAE,CAAA;AAEhD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"form.js","sourcesContent":["import React from 'react';\nimport './form.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface FormProps\n  extends React.FormHTMLAttributes<HTMLFormElement> {}\n\nconst Form: React.FC<FormProps> = ({\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('form', className, {});\n\n  return (\n    <form\n      className={classes}\n      {...props}\n    >\n      {children}\n    </form>\n  );\n};\n\nexport default Form;"]}

package/patterns/form/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var form = require('./form');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var form__default = /*#__PURE__*/_interopDefault(form);
+
+
+
+module.exports = form__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/patterns/form/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/patterns/form/index.d.cts

@@ -0,0 +1,2 @@
+export { FormProps, default } from './form.cjs';
+import 'react';

package/patterns/form/index.d.ts

@@ -0,0 +1,2 @@
+export { FormProps, default } from './form.js';
+import 'react';

package/patterns/form/index.js

@@ -0,0 +1,3 @@
+export { default } from './form';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/patterns/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/patterns/index.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var header = require('./header');
+var footer = require('./footer');
+var screenHeader = require('./screen-header');
+var form = require('./form');
+var masthead = require('./masthead');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var header__default = /*#__PURE__*/_interopDefault(header);
+var footer__default = /*#__PURE__*/_interopDefault(footer);
+var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
+var form__default = /*#__PURE__*/_interopDefault(form);
+var masthead__default = /*#__PURE__*/_interopDefault(masthead);
+
+
+
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function () { return header__default.default; }
+});
+Object.defineProperty(exports, "Footer", {
+  enumerable: true,
+  get: function () { return footer__default.default; }
+});
+Object.defineProperty(exports, "ScreenHeader", {
+  enumerable: true,
+  get: function () { return screenHeader__default.default; }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () { return form__default.default; }
+});
+Object.defineProperty(exports, "Masthead", {
+  enumerable: true,
+  get: function () { return masthead__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/patterns/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/patterns/index.d.cts

@@ -0,0 +1,6 @@
+export { default as Header, HeaderProps } from './header/header.cjs';
+export { default as Footer, FooterProps } from './footer/footer.cjs';
+export { default as ScreenHeader, ScreenHeaderProps } from './screen-header/screen-header.cjs';
+export { default as Form, FormProps } from './form/form.cjs';
+export { default as Masthead, MastheadProps } from './masthead/masthead.cjs';
+import 'react';

package/patterns/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Header, HeaderProps } from './header/header.js';
+export { default as Footer, FooterProps } from './footer/footer.js';
+export { default as ScreenHeader, ScreenHeaderProps } from './screen-header/screen-header.js';
+export { default as Form, FormProps } from './form/form.js';
+export { default as Masthead, MastheadProps } from './masthead/masthead.js';
+import 'react';

package/patterns/index.js

@@ -0,0 +1,7 @@
+export { default as Header } from './header';
+export { default as Footer } from './footer';
+export { default as ScreenHeader } from './screen-header';
+export { default as Form } from './form';
+export { default as Masthead } from './masthead';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/patterns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/patterns/masthead/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var masthead = require('./masthead');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var masthead__default = /*#__PURE__*/_interopDefault(masthead);
+
+
+
+module.exports = masthead__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/patterns/masthead/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/patterns/masthead/index.d.cts

@@ -0,0 +1,2 @@
+export { MastheadProps, default } from './masthead.cjs';
+import 'react';

package/patterns/masthead/index.d.ts

@@ -0,0 +1,2 @@
+export { MastheadProps, default } from './masthead.js';
+import 'react';

package/patterns/masthead/index.js

@@ -0,0 +1,3 @@
+export { default } from './masthead';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/patterns/masthead/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/patterns/masthead/masthead.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./masthead.css');
+var classnames = require('../../components/helpers/classnames');
+
+const Masthead = ({
+  logo,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames("masthead", className, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      className: classes,
+      ...props,
+      children: (logo || children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "masthead__logo", children: logo || children })
+    }
+  );
+};
+var masthead_default = Masthead;
+
+module.exports = masthead_default;
+//# sourceMappingURL=masthead.cjs.map
+//# sourceMappingURL=masthead.cjs.map

package/patterns/masthead/masthead.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/patterns/masthead/masthead.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,UAAA,EAAY,SAAA,EAAW,EAAE,CAAA;AAEpD,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEF,mBAAQ,QAAA,qBACRA,cAAA,CAAC,SAAI,SAAA,EAAU,gBAAA,EACZ,kBAAQ,QAAA,EACX;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"masthead.cjs","sourcesContent":["import React from 'react';\nimport './masthead.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface MastheadProps\n  extends React.HTMLAttributes<HTMLElement> {\n  logo?: React.ReactNode;\n}\n\nconst Masthead: React.FC<MastheadProps> = ({\n  logo,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('masthead', className, {});\n\n  return (\n    <header\n      className={classes}\n      {...props}\n    >\n      {(logo || children) && (\n        <div className=\"masthead__logo\">\n          {logo || children}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default Masthead;"]}

package/patterns/masthead/masthead.css

@@ -0,0 +1,25 @@
+.masthead {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.masthead__logo {
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/patterns/masthead/masthead.d.cts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+interface MastheadProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+}
+declare const Masthead: React.FC<MastheadProps>;
+
+export { type MastheadProps, Masthead as default };

package/patterns/masthead/masthead.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+interface MastheadProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+}
+declare const Masthead: React.FC<MastheadProps>;
+
+export { type MastheadProps, Masthead as default };

package/patterns/masthead/masthead.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import './masthead.css';
+import { classnames } from '../../components/helpers/classnames';
+
+const Masthead = ({
+  logo,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("masthead", className, {});
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: classes,
+      ...props,
+      children: (logo || children) && /* @__PURE__ */ jsx("div", { className: "masthead__logo", children: logo || children })
+    }
+  );
+};
+var masthead_default = Masthead;
+
+export { masthead_default as default };
+//# sourceMappingURL=masthead.js.map
+//# sourceMappingURL=masthead.js.map

package/patterns/masthead/masthead.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/patterns/masthead/masthead.tsx"],"names":[],"mappings":";;;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,UAAA,EAAY,SAAA,EAAW,EAAE,CAAA;AAEpD,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEF,mBAAQ,QAAA,qBACR,GAAA,CAAC,SAAI,SAAA,EAAU,gBAAA,EACZ,kBAAQ,QAAA,EACX;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"masthead.js","sourcesContent":["import React from 'react';\nimport './masthead.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface MastheadProps\n  extends React.HTMLAttributes<HTMLElement> {\n  logo?: React.ReactNode;\n}\n\nconst Masthead: React.FC<MastheadProps> = ({\n  logo,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('masthead', className, {});\n\n  return (\n    <header\n      className={classes}\n      {...props}\n    >\n      {(logo || children) && (\n        <div className=\"masthead__logo\">\n          {logo || children}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default Masthead;"]}

package/styles.css

@@ -2480,6 +2480,27 @@
   }
 }
 
+/* src/patterns/form/form.css */
+.form {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --form-gap: var(--margin-form-field-vert);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/patterns/header/header.css */
 .header {
   /* color */
@@ -2563,6 +2584,33 @@
   /* motion */
 }
 
+/* src/patterns/masthead/masthead.css */
+.masthead {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.masthead__logo {
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* src/patterns/screen-header/screen-header.css */
 .screen-header {
   /* color */
@@ -2693,6 +2741,28 @@
 }
 
 /* src/layouts/base/base.css */
+.layout-base {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  min-height: calc(
+    100dvh -
+    (var(--layout-foundation-padding-vert) * 2)
+  );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-base__header {
   /* color */
 
@@ -2714,7 +2784,19 @@
   /* typography */
 
   /* size */
+  display: flex;
+  justify-content: center;
+
   width: 100%;
+  min-width: 0;
+
+  flex: 1;
+
+  padding:
+    var(--layout-foundation-padding-vert)
+    var(--layout-foundation-padding-horz);
+
+  box-sizing: border-box;
 
   /* border */
 
@@ -2723,6 +2805,36 @@
   /* motion */
 }
 
+.layout-base__content {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --layout-base-content-width: 960px;
+
+  width: 100%;
+  max-width: var(--layout-base-content-width);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__content--narrow {
+  --layout-base-content-width: 720px;
+}
+
+.layout-base__content--wide {
+  --layout-base-content-width: 1200px;
+}
+
+.layout-base__content--full {
+  max-width: none;
+}
+
 .layout-base__footer {
   /* color */
 
@@ -2752,6 +2864,9 @@
   --layout-foundation-columns: 12;
   --layout-foundation-gap: var(--size-grid-margin);
 
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
   min-height: 100dvh;
   max-width: var(--layout-foundation-width);
@@ -2786,11 +2901,14 @@
   display: grid;
   grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
   gap: var(--layout-foundation-gap);
+
   width: 100%;
   min-height: 100dvh;
+
   padding:
     var(--layout-foundation-padding-vert)
     var(--layout-foundation-padding-horz);
+
   box-sizing: border-box;
 
   /* border */