Add container

Author: MrEssex

docs/assets/styles/code-previews.css

@@ -15,7 +15,8 @@
   background-color: rgb(var(--zn-panel));
   min-width: 20rem;
   max-width: 100%;
-  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
+  /*padding: 1.5rem 3.25rem 1.5rem 1.5rem;*/
+  padding-right: 1.75rem;
 }
 
 /* Block the preview while dragging to prevent iframes from intercepting drag events */

docs/assets/styles/docs.css

@@ -4,7 +4,7 @@
   --docs-border-color: rgb(var(--zn-border-color));
   --docs-border-width: 1px;
   --docs-border-radius: 10px;
-  --docs-content-max-width: 860px;
+  --docs-content-max-width: 1400px;
   --docs-sidebar-width: 320px;
   --docs-sidebar-transition-speed: 250ms;
   --docs-content-toc-max-width: 260px;
@@ -1094,141 +1094,6 @@ html.sidebar-open #menu-toggle {
   margin-bottom: var(--docs-content-vertical-spacing);
 }
 
-/* Print styles */
-@media print {
-  a:not(.anchor-heading)[href]::after {
-    content: ' (' attr(href) ')';
-  }
-
-  details,
-  pre,
-  .callout {
-    border: solid var(--docs-border-width) var(--docs-border-color);
-  }
-
-  details summary {
-    list-style: none;
-  }
-
-  details summary span {
-    padding-left: 0;
-  }
-
-  details summary::marker,
-  details summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .callout::before {
-    border: solid var(--docs-border-width) var(--docs-border-color);
-  }
-
-  .component-page__navigation,
-  .copy-code-button,
-  .code-preview__buttons,
-  .code-preview__resizer {
-    display: none !important;
-  }
-
-  .flavor-html .code-preview__source--html,
-  .flavor-react .code-preview__source--react {
-    display: block !important;
-  }
-
-  .flavor-html .code-preview__source--html > pre,
-  .flavor-react .code-preview__source--react > pre {
-    border: none;
-  }
-
-  .code-preview__source-group {
-    border-bottom: solid 1px var(--zn-color-neutral-200);
-    border-bottom-left-radius: var(--zn-border-radius-medium);
-    border-bottom-right-radius: var(--zn-border-radius-medium);
-  }
-
-  #sidebar {
-    display: none;
-  }
-
-  #content {
-    margin-left: 0;
-  }
-
-  #menu-toggle,
-  #icon-toolbar,
-  .external-link__icon {
-    display: none;
-  }
-}
-
-/* Splash */
-
-.splash {
-  display: flex;
-  padding-top: 2rem;
-}
-
-.splash-start {
-  min-width: 420px;
-}
-
-.splash-start h1 {
-  font-size: var(--zn-font-size-large);
-  font-weight: var(--zn-font-weight-normal);
-}
-
-.splash li img {
-  width: 1em;
-  height: 1em;
-  vertical-align: -2px;
-}
-
-.splash-end {
-  display: flex;
-  align-items: flex-end;
-  width: auto;
-  padding-left: 1rem;
-}
-
-.splash-image {
-  width: 100%;
-  height: auto;
-}
-
-.splash-logo {
-  max-width: 22rem;
-}
-
-.splash-start h1:first-of-type {
-  font-size: var(--zn-font-size-large);
-  margin: 0 0 0.5rem 0;
-}
-
-@media screen and (max-width: 1280px) {
-  .splash {
-    display: block;
-  }
-
-  .splash-start {
-    min-width: 0;
-    padding-bottom: 1rem;
-  }
-
-  .splash-end {
-    padding: 0;
-  }
-
-  .splash-image {
-    display: block;
-    max-width: 400px;
-  }
-
-  /* Shields */
-  .splash + p {
-    margin-top: 2rem;
-  }
-}
-
 /* Component headers */
 
 .component-header h1 {
@@ -1294,97 +1159,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
   white-space: nowrap;
 }
 
-/* Border radius demo */
-
-.border-radius-demo {
-  width: 3rem;
-  height: 3rem;
-  background: var(--zn-color-primary-600);
-}
-
-/* Transition demo */
-
-.transition-demo {
-  position: relative;
-  background: var(--zn-color-neutral-200);
-  width: 8rem;
-  height: 2rem;
-}
-
-.transition-demo:after {
-  content: '';
-  position: absolute;
-  background-color: var(--zn-color-primary-600);
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  transition-duration: inherit;
-  transition-property: width;
-}
-
-.transition-demo:hover:after {
-  width: 100%;
-}
-
-/* Spacing demo */
-
-.spacing-demo {
-  width: 100px;
-  background: var(--zn-color-primary-600);
-}
-
-/* Elevation demo */
-
-.elevation-demo {
-  background: transparent;
-  border-radius: 3px;
-  width: 4rem;
-  height: 4rem;
-  margin: 1rem;
-}
-
-/* Color palettes */
-
-.color-palette {
-  display: grid;
-  grid-template-columns: 200px repeat(11, 1fr);
-  gap: 1rem var(--zn-spacing-2x-small);
-  margin: 2rem 0;
-}
-
-.color-palette__name {
-  font-size: var(--zn-font-size-medium);
-  font-weight: var(--zn-font-weight-semibold);
-  grid-template-columns: repeat(11, 1fr);
-}
-
-.color-palette__name code {
-  background: none;
-  font-size: var(--zn-font-size-x-small);
-}
-
-.color-palette__example {
-  font-size: var(--zn-font-size-x-small);
-  text-align: center;
-}
-
-.color-palette__swatch {
-  height: 3rem;
-  border-radius: var(--zn-border-radius-small);
+/** Container Demo */
+zn-container::part(base) {
+  background-color: var(--zn-color-primary-300);
 }
-
-.color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px var(--zn-color-neutral-300);
-}
-
-@media screen and (max-width: 1200px) {
-  .color-palette {
-    grid-template-columns: repeat(6, 1fr);
-  }
-
-  .color-palette__name {
-    grid-column-start: span 6;
-  }
-}
-

docs/pages/components/container.md

@@ -0,0 +1,91 @@
+---
+meta:
+  title: Container
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-container>
+  <div
+    style="position:relative; height: 16rem; overflow: hidden; border: 1px dashed rgb(229, 231, 235); opacity: 0.75;">
+    <svg fill="none"
+         style="position: absolute; inset: 0; width: 100%; height: 100%; background-color: rgb(255, 255, 255); stroke: rgba(0, 0, 0, 0.1);">
+      <defs>
+        <pattern id="pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff" x="0" y="0" width="10" height="10"
+                 patternUnits="userSpaceOnUse">
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff)" width="100%" height="100%"></rect>
+    </svg>
+  </div>
+</zn-container>
+```
+
+## Examples
+
+### Padded Container
+
+```html:preview
+<zn-container padded>
+  <div
+    style="position:relative; height: 16rem; overflow: hidden; border: 1px dashed rgb(229, 231, 235); opacity: 0.75;">
+    <svg fill="none"
+         style="position: absolute; inset: 0; width: 100%; height: 100%; background-color: rgb(255, 255, 255); stroke: rgba(0, 0, 0, 0.1);">
+      <defs>
+        <pattern id="pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff" x="0" y="0" width="10" height="10"
+                 patternUnits="userSpaceOnUse">
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff)" width="100%" height="100%"></rect>
+    </svg>
+  </div>
+</zn-container>
+```
+
+### Breakpoint Container
+
+```html:preview
+<zn-container breakpoint>
+  <div
+    style="position:relative; height: 16rem; overflow: hidden; border: 1px dashed rgb(229, 231, 235); opacity: 0.75;">
+    <svg fill="none"
+         style="position: absolute; inset: 0; width: 100%; height: 100%; background-color: rgb(255, 255, 255); stroke: rgba(0, 0, 0, 0.1);">
+      <defs>
+        <pattern id="pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff" x="0" y="0" width="10" height="10"
+                 patternUnits="userSpaceOnUse">
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff)" width="100%" height="100%"></rect>
+    </svg>
+  </div>
+</zn-container>
+```
+
+### Padded Breakpoint Container
+
+```html:preview
+<zn-container padded breakpoint>
+  <div
+    style="position:relative; height: 16rem; overflow: hidden; border: 1px dashed rgb(229, 231, 235); opacity: 0.75;">
+    <svg fill="none"
+         style="position: absolute; inset: 0; width: 100%; height: 100%; background-color: rgb(255, 255, 255); stroke: rgba(0, 0, 0, 0.1);">
+      <defs>
+        <pattern id="pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff" x="0" y="0" width="10" height="10"
+                 patternUnits="userSpaceOnUse">
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-2e2e2dfb-58b7-4019-82fc-58ca045f95ff)" width="100%" height="100%"></rect>
+    </svg>
+  </div>
+</zn-container>
+```
+
+TODO
+
+[component-metadata:zn-container]

src/components/container/container.component.ts

@@ -0,0 +1,34 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './container.scss';
+
+/**
+ * @summary Layout container, used to wrap content with optional padding and breakpoint width.
+ * @documentation https://zinc.style/components/container
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class ZnContainer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Boolean}) padded: boolean;
+  @property({type: Boolean}) breakpoint: boolean;
+
+  render() {
+    return html`
+      <div part="base" class=${classMap({
+        'container': true,
+        'container--padded': this.padded,
+        'container--breakpoint': this.breakpoint,
+      })}>
+        <slot></slot>
+      </div>`;
+  }
+}