@tmorrow/cre8-wc 2.3.3 → 2.3.5

package/dist/assets/container-grid.stories-Dnnlrhpk.js

@@ -0,0 +1,975 @@
+import{a as T,b as e}from"./iframe-DgoqrgRr.js";import"./f-po-CDPxLfff.js";import{s as $}from"./spread-Cc0YLoqh.js";import"./grid-item-DdpNu2ee.js";import{C as G,n as y}from"./cre8-element-D4jUl3yv.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bh0SnORx.js";import"./_commonjsHelpers-DaWZu8wl.js";const U=T`.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
+
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+body {
+  font-family: var(--cre8-typography-body-default-font-family);
+  font-size: var(--cre8-typography-body-default-font-size);
+  font-weight: var(--cre8-typography-body-default-font-weight);
+  line-height: var(--cre8-typography-body-default-line-height);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+:host {
+  --cre8-z-index-1: 1;
+  --cre8-z-index-50: 50;
+  --cre8-z-index-100: 100;
+  --cre8-z-index-200: 200;
+  --cre8-z-index-1030: 1030;
+  --cre8-anim-fade-quick: 0.35s;
+  --cre8-anim-ease: ease;
+}
+
+@keyframes fadeIn {
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFwd {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideOutRight {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideUp {
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (width >= 481px) {
+  @keyframes slideInFwd {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+}
+@media (width >= 48rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 330px;
+      height: 330px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 330px;
+      height: 330px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 60rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 460px;
+      height: 460px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 460px;
+      height: 460px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 75rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 592px;
+      height: 591px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 87.5rem) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 120px));
+    }
+  }
+}
+@media (width >= 2200px) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 592px));
+    }
+  }
+}
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-bg-color);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 1;
+  }
+}
+:root {
+  --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/**
+ * 1) Same layout vocabulary as \`cre8-grid\` - stacked to N-across patterns -
+ * but keyed to this element's own rendered width via \`@container\` instead
+ * of the viewport via \`@media\`. Establishes its own containment context, so
+ * it breaks into columns based on the space it is actually given: inside a
+ * narrow sidebar on a wide viewport, or a wide main column on a narrow one.
+ */
+.cre8-c-container-grid {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin: -0.75rem;
+}
+
+/**
+ * Grid with no gap in between items
+ */
+.cre8-c-container-grid--gap-none {
+  margin: 0;
+}
+
+/**
+ * Small gap grid
+ * 1) Spacing between grid items is smaller than default
+ */
+.cre8-c-container-grid--gap-sm {
+  margin: -0.25rem;
+}
+
+/**
+ * Large gap grid
+ * 1) Spacing between grid items is larger than default
+ */
+.cre8-c-container-grid--gap-lg {
+  margin: -1rem;
+}
+
+/**
+ * Side by Side Grid
+ * 1) Grid that stays 2 items per row regardless of its own width
+ */
+.cre8-c-container-grid--side-by-side {
+  flex-direction: row;
+}
+
+/**
+ * 2up grid
+ * 1) Stacked items when this element is narrow, 2 items per row once it has
+ * enough of its own width to fit them
+ */
+@container (min-width: 768px) {
+  .cre8-c-container-grid--2up {
+    flex-direction: row;
+  }
+}
+.cre8-c-container-grid--2up {
+  /**
+  * 2up grid that breaks faster
+  * 1) Grid that breaks from 1 to 2up at a smaller container width than the default
+  */
+}
+@container (min-width: 560px) {
+  .cre8-c-container-grid--2up.cre8-c-container-grid--break-faster {
+    flex-direction: row;
+  }
+}
+.cre8-c-container-grid--2up {
+  /**
+  * 2up grid that breaks slower
+  * 1) Grid that breaks from 1 to 2up at a larger container width than the default
+  */
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower {
+    flex-direction: column;
+  }
+}
+@container (min-width: 1400px) {
+  .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower {
+    flex-direction: row;
+  }
+}
+
+/**
+ * 3up grid
+ * 1) Stacked items when narrow, 3 items per row once this element is wide enough
+ */
+@container (min-width: 768px) {
+  .cre8-c-container-grid--3up {
+    flex-direction: row;
+  }
+}
+
+/**
+ * 1 to 3up grid
+ * 1) Stacked items when narrow, 3 items per row once this element is wide enough
+ */
+@container (min-width: 960px) {
+  .cre8-c-container-grid--1-3up {
+    flex-direction: row;
+  }
+}
+.cre8-c-container-grid--1-3up {
+  /**
+  * 1 to 3 up grid that breaks faster
+  * 1) Grid that breaks from 1 to 3up at a smaller container width than the default
+  */
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-faster {
+    flex-direction: row;
+  }
+}
+.cre8-c-container-grid--1-3up {
+  /**
+  * 1 to 3up grid that breaks slower
+  * 1) Grid that breaks from 1 to 3up at a larger container width than the default
+  */
+}
+@container (min-width: 960px) {
+  .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower {
+    flex-direction: column;
+  }
+}
+@container (min-width: 1200px) {
+  .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower {
+    flex-direction: row;
+  }
+}
+
+/**
+ * 1 to 2 to 4up grid
+ * 1) Stacked when narrow, 2 items per row at medium container widths, 4 items
+ * per row once this element is wide enough
+ */
+@container (min-width: 560px) {
+  .cre8-c-container-grid--1-2-4up {
+    flex-direction: row;
+  }
+}
+
+/**
+ * 1 to 4up grid
+ * 1) Stacked when narrow, 4 items per row once this element is wide enough
+ */
+@container (min-width: 768px) {
+  .cre8-c-container-grid--1-4up {
+    flex-direction: row;
+  }
+}
+
+/**
+ * 1 to 2 to 4up grid
+ * 1) Stacked when narrow, 2 items per row at small/medium container widths,
+ * 3 items per row at medium widths, and 4 items per row once wide enough
+ */
+@container (min-width: 560px) {
+  .cre8-c-container-grid--4up {
+    flex-direction: row;
+  }
+}
+
+/**
+  * Slotted grid item within 4up Grid
+  */
+.cre8-c-container-grid--2-4-6up {
+  flex-direction: row;
+}
+
+/**
+ * Slotted grid item
+ */
+::slotted(cre8-grid-item) {
+  display: block;
+  padding: 0.75rem;
+  /**
+  * Slotted grid item within grid with no gap between items
+  */
+}
+.cre8-c-container-grid--gap-none > ::slotted(cre8-grid-item) {
+  padding: 0;
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within grid with small gap between items
+  */
+}
+.cre8-c-container-grid--gap-sm > ::slotted(cre8-grid-item) {
+  padding: 0.25rem;
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within grid with large gap between items
+  */
+}
+.cre8-c-container-grid--gap-lg > ::slotted(cre8-grid-item) {
+  padding: 1rem;
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within side by side grid
+  * 1) Grid that stays 2 items per row regardless of its own width
+  */
+}
+.cre8-c-container-grid--side-by-side > ::slotted(cre8-grid-item) {
+  width: 50%;
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up Grid
+  */
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--2up > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up break faster (small to large container widths) Grid
+  */
+}
+@container (min-width: 560px) {
+  .cre8-c-container-grid--2up.cre8-c-container-grid--break-faster > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up break slower (small to large container widths) Grid
+  */
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 100%;
+  }
+}
+@container (min-width: 1400px) {
+  .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 3up Grid
+  */
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--3up > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
+}
+@container (min-width: 960px) {
+  .cre8-c-container-grid--3up > ::slotted(cre8-grid-item) {
+    width: 33.3333%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1-3up Grid
+  */
+}
+@container (min-width: 960px) {
+  .cre8-c-container-grid--1-3up > ::slotted(cre8-grid-item) {
+    width: 33.3333%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1 to 3up break faster (small to large container widths) grid
+  */
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-faster > ::slotted(cre8-grid-item) {
+    width: 33.33%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up break slower (small to large container widths) Grid
+  */
+}
+@container (min-width: 960px) {
+  .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 100%;
+  }
+}
+@container (min-width: 1200px) {
+  .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 33.33%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1-2-4up Grid
+  */
+}
+@container (min-width: 560px) {
+  .cre8-c-container-grid--1-2-4up > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
+}
+@container (min-width: 960px) {
+  .cre8-c-container-grid--1-2-4up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1-2-4up Grid
+  */
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--1-4up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 4up Grid
+  */
+}
+@container (min-width: 560px) {
+  .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
+}
+@container (min-width: 768px) {
+  .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {
+    width: 33.3333%;
+  }
+}
+@container (min-width: 960px) {
+  .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
+}
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 4up Grid
+  */
+}
+.cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {
+  width: 50%;
+}
+@container (min-width: 960px) {
+  .cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
+}
+@container (min-width: 1200px) {
+  .cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {
+    width: 16.66%;
+  }
+}`;var F=Object.defineProperty,k=(t,o,d,O)=>{for(var a=void 0,v=t.length-1,S;v>=0;v--)(S=t[v])&&(a=S(o,d,a)||a);return a&&F(o,d,a),a};const z=class z extends G{render(){const o=this.componentClassNames("cre8-c-container-grid",{"cre8-c-container-grid--side-by-side":this.variant==="side-by-side","cre8-c-container-grid--2up":this.variant==="2up","cre8-c-container-grid--3up":this.variant==="3up","cre8-c-container-grid--1-3up":this.variant==="1-3up","cre8-c-container-grid--4up":this.variant==="4up","cre8-c-container-grid--1-4up":this.variant==="1-4up","cre8-c-container-grid--1-2-4up":this.variant==="1-2-4up","cre8-c-container-grid--2-4-6up":this.variant==="2-4-6up","cre8-c-container-grid--gap-none":this.gap==="none","cre8-c-container-grid--gap-sm":this.gap==="sm","cre8-c-container-grid--gap-lg":this.gap==="lg","cre8-c-container-grid--break-faster":this.break==="faster","cre8-c-container-grid--break-slower":this.break==="slower"});return e`
+      <div class="${o}">
+        <slot></slot>
+      </div>
+    `}};z.styles=[U];let n=z;k([y()],n.prototype,"variant");k([y()],n.prototype,"gap");k([y()],n.prototype,"break");customElements.get("cre8-container-grid")===void 0&&customElements.define("cre8-container-grid",n);const r=(t=6)=>e`${Array.from({length:t},(o,d)=>e`
+  <cre8-grid-item>
+    <f-po>Grid Item ${d+1}</f-po>
+  </cre8-grid-item>
+`)}`,i=t=>e`<div style="resize: horizontal; overflow: auto; min-width: 240px; max-width: 100%; width: 600px; border: 1px dashed var(--cre8-color-border-default); padding: 8px;">${t}</div>`,P={title:"cre8 Components/Container Grid",component:"cre8-container-grid",parameters:{status:{type:"inProgress"}}},c=t=>i(e`<cre8-container-grid ${$(t)}>${r()}</cre8-container-grid>`),s=()=>i(e`<cre8-container-grid variant="side-by-side">${r()}</cre8-container-grid>`),m=()=>i(e`<cre8-container-grid variant="2up">${r()}</cre8-container-grid>`),p=()=>i(e`<cre8-container-grid variant="2up" break="faster">${r()}</cre8-container-grid>`),g=()=>i(e`<cre8-container-grid variant="2up" break="slower">${r()}</cre8-container-grid>`),l=()=>i(e`<cre8-container-grid variant="3up">${r()}</cre8-container-grid>`),h=()=>i(e`<cre8-container-grid variant="1-3up">${r(3)}</cre8-container-grid>`),u=()=>i(e`<cre8-container-grid variant="1-4up">${r(4)}</cre8-container-grid>`),w=()=>i(e`<cre8-container-grid variant="1-2-4up">${r(4)}</cre8-container-grid>`),f=()=>i(e`<cre8-container-grid variant="4up">${r(8)}</cre8-container-grid>`),x=()=>i(e`<cre8-container-grid variant="2-4-6up">${r(12)}</cre8-container-grid>`),b=()=>e`<div style="display: flex; gap: 16px;">
+  <div style="width: 220px;">
+    <p><strong>Narrow sidebar (220px)</strong></p>
+    <cre8-container-grid variant="1-2-4up">${r(4)}</cre8-container-grid>
+  </div>
+  <div style="flex: 1;">
+    <p><strong>Wide main column</strong></p>
+    <cre8-container-grid variant="1-2-4up">${r(4)}</cre8-container-grid>
+  </div>
+</div>
+<p style="color: var(--cre8-color-content-subtle);">Both grids share one <code>variant="1-2-4up"</code>. The viewport is identical for both; each one's column count comes from its own box, which <code>cre8-grid</code> - keyed to the viewport - cannot do.</p>`;c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:"args => resizable(html`<cre8-container-grid ${spread(args)}>${items()}</cre8-container-grid>`)",...c.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="side-by-side">${items()}</cre8-container-grid>`)',...s.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="2up">${items()}</cre8-container-grid>`)',...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="2up" break="faster">${items()}</cre8-container-grid>`)',...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="2up" break="slower">${items()}</cre8-container-grid>`)',...g.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="3up">${items()}</cre8-container-grid>`)',...l.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="1-3up">${items(3)}</cre8-container-grid>`)',...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="1-4up">${items(4)}</cre8-container-grid>`)',...u.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="1-2-4up">${items(4)}</cre8-container-grid>`)',...w.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="4up">${items(8)}</cre8-container-grid>`)',...f.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:'() => resizable(html`<cre8-container-grid variant="2-4-6up">${items(12)}</cre8-container-grid>`)',...x.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`() => html\`<div style="display: flex; gap: 16px;">
+  <div style="width: 220px;">
+    <p><strong>Narrow sidebar (220px)</strong></p>
+    <cre8-container-grid variant="1-2-4up">\${items(4)}</cre8-container-grid>
+  </div>
+  <div style="flex: 1;">
+    <p><strong>Wide main column</strong></p>
+    <cre8-container-grid variant="1-2-4up">\${items(4)}</cre8-container-grid>
+  </div>
+</div>
+<p style="color: var(--cre8-color-content-subtle);">Both grids share one <code>variant="1-2-4up"</code>. The viewport is identical for both; each one's column count comes from its own box, which <code>cre8-grid</code> - keyed to the viewport - cannot do.</p>\``,...b.parameters?.docs?.source}}};const j=["Default","SideBySide","TwoUp","TwoUpBreakFaster","TwoUpBreakSlower","ThreeUp","OneToThreeUp","OneToFourUp","OneToTwoToFourUp","FourUp","TwoTo4to6Up","SidebarVsMain"];export{c as Default,f as FourUp,u as OneToFourUp,h as OneToThreeUp,w as OneToTwoToFourUp,s as SideBySide,b as SidebarVsMain,l as ThreeUp,x as TwoTo4to6Up,m as TwoUp,p as TwoUpBreakFaster,g as TwoUpBreakSlower,j as __namedExportsOrder,P as default};