@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/components/sidebar.js

@@ -1,9 +1,9 @@
 import b from "./divider.js";
 import v from "./icon.js";
-import { C as u } from "../chunks/icon-button.C3eqeQl9.js";
+import { C as u } from "../chunks/icon-button.BuhCp--_.js";
 import _ from "./resize-observer.js";
-import { n, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as f } from "../chunks/component.styles.DMSLciL5.js";
+import { n as d, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as f } from "../chunks/component.styles.CRO4Odto.js";
 import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as y } from "../chunks/drag.DXEXVXPv.js";
 import { H as C } from "../chunks/slot.j5oheLJC.js";
@@ -12,176 +12,10 @@ import { i as z, E as h, x as l } from "../chunks/lit-element.jLBm65_O.js";
 import { r as w } from "../chunks/state.CSDxrqLd.js";
 import { e as $ } from "../chunks/query.BBf1UFkC.js";
 import { e as p } from "../chunks/class-map.BiVq-cVR.js";
-const k = z`
-  /* Host styles */
-  :host {
-    display: block;
-
-    --_background-color: var(--background-color, var(--cx-color-neutral-0));
-    --_hint-color: var(--hint-color, var(--cx-color-primary-300));
-    --closed-width: 0px;
-  }
-
-  /* Layout containers */
-  .sidebar {
-    display: grid;
-    grid-template-areas: 'main';
-    position: relative;
-  }
-
-  .sidebar,
-  .group--opened,
-  .group--closed,
-  .group_content,
-  .open_trigger {
-    height: 100%;
-  }
-
-  .group--opened,
-  .group--closed {
-    grid-area: main;
-  }
-
-  /* Content sections */
-  .sidebar__header {
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    position: relative;
-  }
-  .sidebar--no-header .sidebar__header {
-    display: none;
-  }
-
-  .content {
-    padding: var(--cx-spacing-small);
-    padding-bottom: var(--cx-spacing-small);
-    flex-grow: 1;
-  }
-
-  /* Dividers */
-  .sidebar__divider {
-    --spacing: 6px;
-    position: absolute;
-    top: 0;
-  }
-
-  .sidebar__divider:hover {
-    --color: var(--_hint-color);
-    cursor: col-resize;
-  }
-
-  /* Disable resize interaction when not resizable */
-  .sidebar--not-resizable .sidebar__divider {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  .sidebar--not-resizable .sidebar__divider:hover {
-    --color: inherit;
-    cursor: default;
-  }
-
-  .sidebar--left .sidebar__divider {
-    right: calc(0px - var(--spacing));
-  }
-
-  .sidebar--right .sidebar__divider {
-    left: calc(0px - var(--spacing));
-  }
-
-  /* Trigger elements */
-  .close_trigger {
-    visibility: hidden;
-    position: absolute;
-    top: max(calc(var(--header-height) / 2), 32px);
-    transform: translateY(-50%);
-  }
-
-  .close_trigger > cx-icon-button::part(base) {
-    background-color: var(--cx-color-neutral-0);
-  }
-
-  .sidebar--left .close_trigger {
-    right: 0;
-    transform: translate(50%, -50%);
-  }
-
-  .sidebar--right .close_trigger {
-    left: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .sidebar--opened:hover .close_trigger {
-    visibility: visible;
-  }
-
-  .open_trigger {
-    padding: var(--cx-spacing-medium);
-    cursor: pointer;
-    background-color: var(--_background-color);
-    position: relative;
-  }
-
-  .open_trigger_hint {
-    --spacing: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  .open_trigger:hover .open_trigger_hint {
-    --color: var(--_hint-color);
-  }
-
-  /* Group containers */
-  .group_container {
-    overflow-x: clip;
-  }
-
-  .group--opened,
-  .group--closed {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .group--closed {
-    width: var(--closed-width);
-  }
-
-  .group_content {
-    background-color: var(--_background-color);
-    contain: inline-size;
-    overflow-x: clip;
-  }
-
-  .group--opened .group_content {
-    width: var(--size);
-    min-width: var(--min-width);
-    max-width: var(--max-width);
-  }
-
-  /* State-based visibility */
-  .sidebar--opened .group--opened {
-    visibility: visible;
-  }
-
-  .sidebar--opened .group--closed {
-    visibility: hidden;
-    width: 0;
-  }
-
-  .sidebar:not(.sidebar--opened) .group--closed {
-    visibility: visible;
-  }
-
-  .sidebar:not(.sidebar--opened) .group--opened {
-    contain: inline-size;
-    visibility: hidden;
-    width: 0;
-  }
-`;
-var S = Object.defineProperty, D = Object.getOwnPropertyDescriptor, r = (e, o, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? D(o, t) : o, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (s = (a ? c(o, t, s) : c(s)) || s);
+const k = z`:host{--_background-color:var(--background-color,var(--cx-color-neutral-0));--_hint-color:var(--hint-color,var(--cx-color-primary-300));--closed-width:0px;display:block}.sidebar{grid-template-areas:"main";display:grid;position:relative}.sidebar,.group--opened,.group--closed,.group_content,.open_trigger{height:100%}.group--opened,.group--closed{grid-area:main}.sidebar__header{padding:var(--cx-spacing-x-small) var(--cx-spacing-small);position:relative}.sidebar--no-header .sidebar__header{display:none}.content{padding:var(--cx-spacing-small);padding-bottom:var(--cx-spacing-small);flex-grow:1}.sidebar__divider{--spacing:6px;position:absolute;top:0}.sidebar__divider:hover{--color:var(--_hint-color);cursor:col-resize}.sidebar--not-resizable .sidebar__divider{cursor:default;pointer-events:none}.sidebar--not-resizable .sidebar__divider:hover{--color:inherit;cursor:default}.sidebar--left .sidebar__divider{right:calc(0px - var(--spacing))}.sidebar--right .sidebar__divider{left:calc(0px - var(--spacing))}.close_trigger{visibility:hidden;top:max(calc(var(--header-height) / 2), 32px);position:absolute;transform:translateY(-50%)}.close_trigger>cx-icon-button::part(base){background-color:var(--cx-color-neutral-0)}.sidebar--left .close_trigger{right:0;transform:translate(50%,-50%)}.sidebar--right .close_trigger{left:0;transform:translate(-50%,-50%)}.sidebar--opened:hover .close_trigger{visibility:visible}.open_trigger{padding:var(--cx-spacing-medium);cursor:pointer;background-color:var(--_background-color);position:relative}.open_trigger_hint{--spacing:0;position:absolute;top:0;right:0}.open_trigger:hover .open_trigger_hint{--color:var(--_hint-color)}.group_container{overflow-x:clip}.group--opened,.group--closed{flex-direction:column;display:flex}.group--closed{width:var(--closed-width)}.group_content{background-color:var(--_background-color);contain:inline-size;overflow-x:clip}.group--opened .group_content{width:var(--size);min-width:var(--min-width);max-width:var(--max-width)}.sidebar--opened .group--opened{visibility:visible}.sidebar--opened .group--closed{visibility:hidden;width:0}.sidebar:not(.sidebar--opened) .group--closed{visibility:visible}.sidebar:not(.sidebar--opened) .group--opened{contain:inline-size;visibility:hidden;width:0}`;
+var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (e, o, t, a) => {
+  for (var s = a > 1 ? void 0 : a ? B(o, t) : o, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (s = (a ? c(o, t, s) : c(s)) || s);
   return a && s && S(o, t, s), s;
 };
 let i = class extends m {
@@ -232,57 +66,17 @@ let i = class extends m {
   }
   render() {
     const e = this.hasSlotController.test("header");
-    return l`<div
-      part="base"
-      class=${p({
+    return l`<div part="base" class=${p({
       sidebar: !0,
       "sidebar--left": this.side === "left",
       "sidebar--no-header": !e,
       "sidebar--not-resizable": !this.resizable,
       "sidebar--opened": this.open,
       "sidebar--right": this.side === "right"
-    })}
-    >
-      <div class=${p({
+    })}><div class=${p({
       "group--closed": !this.open,
       "group--opened": this.open
-    })}>
-        <div class="group_content">
-          <cx-resize-observer @cx-resize=${this.handleResize}>
-            <div part="header" class="sidebar__header">
-              <slot name="header"></slot>
-            </div>
-          </cx-resize-observer>
-          ${e ? l`<cx-divider style="--spacing:0"></cx-divider>` : h}
-          <div part="content" class="content"><slot></slot></div>
-        </div>
-        <cx-divider
-          class="sidebar__divider"
-          vertical
-          @mousedown=${this.handleDrag}
-          @touchstart=${this.handleDrag}
-        ></cx-divider>
-        ${this.collapsible ? l`<div class="close_trigger" @click=${this.handleCloseTriggerClick}>
-              <cx-icon-button
-                outline
-                size="small"
-                name=${this.side === "right" ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left"}
-              ></cx-icon-button>
-            </div>` : h}
-      </div>
-      ${this.collapsible ? l`<div class="group--closed">
-            <div class="group_content">
-              <div class="open_trigger" @click=${this.handleOpenTriggerClick}>
-                <slot name="open_trigger">
-                  <cx-icon
-                    name=${this.side === "right" ? "keyboard_double_arrow_left" : "keyboard_double_arrow_right"}
-                  ></cx-icon>
-                </slot>
-                <cx-divider class="open_trigger_hint" vertical></cx-divider>
-              </div>
-            </div>
-          </div>` : h}
-    </div>`;
+    })}><div class="group_content"><cx-resize-observer @cx-resize=${this.handleResize}><div part="header" class="sidebar__header"><slot name="header"></slot></div></cx-resize-observer>${e ? l`<cx-divider style="--spacing:0"></cx-divider>` : h}<div part="content" class="content"><slot></slot></div></div><cx-divider class="sidebar__divider" vertical @mousedown=${this.handleDrag} @touchstart=${this.handleDrag}></cx-divider>${this.collapsible ? l`<div class="close_trigger" @click=${this.handleCloseTriggerClick}><cx-icon-button outline size="small" name=${this.side === "right" ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left"}></cx-icon-button></div>` : h}</div>${this.collapsible ? l`<div class="group--closed"><div class="group_content"><div class="open_trigger" @click=${this.handleOpenTriggerClick}><slot name="open_trigger"><cx-icon name=${this.side === "right" ? "keyboard_double_arrow_left" : "keyboard_double_arrow_right"}></cx-icon></slot><cx-divider class="open_trigger_hint" vertical></cx-divider></div></div></div>` : h}</div>`;
   }
 };
 i.styles = [f, k];
@@ -296,16 +90,16 @@ r([
   $(".sidebar__header")
 ], i.prototype, "header", 2);
 r([
-  n({ reflect: !0 })
+  d({ reflect: !0 })
 ], i.prototype, "side", 2);
 r([
-  n({ reflect: !0, type: Boolean })
+  d({ reflect: !0, type: Boolean })
 ], i.prototype, "open", 2);
 r([
-  n({ reflect: !0, type: Boolean })
+  d({ reflect: !0, type: Boolean })
 ], i.prototype, "collapsible", 2);
 r([
-  n({ reflect: !0, type: Boolean })
+  d({ reflect: !0, type: Boolean })
 ], i.prototype, "resizable", 2);
 r([
   w()

package/library/components/size-input-group.js

@@ -1,10 +1,10 @@
-import { C as x } from "../chunks/icon-button.C3eqeQl9.js";
+import { C as x } from "../chunks/icon-button.BuhCp--_.js";
 import d from "./input.js";
 import g from "./select.js";
 import v from "./space.js";
 import k from "./tooltip.js";
 import { n as u, C as P } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as $ } from "../chunks/component.styles.DMSLciL5.js";
+import { c as $ } from "../chunks/component.styles.CRO4Odto.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as _ } from "../chunks/default-value.COZopaet.js";
 import { L as y } from "../chunks/i18n.BUW7B9hr.js";
@@ -14,17 +14,7 @@ import { r as c } from "../chunks/state.CSDxrqLd.js";
 import { e as m } from "../chunks/query.BBf1UFkC.js";
 import { n as f } from "../chunks/when.Dr1es41R.js";
 var i = /* @__PURE__ */ ((t) => (t.Percentage = "percentage", t.Pixel = "pixel", t))(i || {});
-const z = w`
-  :host {
-    display: block;
-    width: 100%;
-  }
-
-  .size-input-group__width,
-  .size-input-group__height {
-    flex: 1;
-  }
-`;
+const z = w`:host{width:100%;display:block}.size-input-group__width,.size-input-group__height{flex:1}`;
 var C = Object.defineProperty, R = Object.getOwnPropertyDescriptor, s = (t, e, r, n) => {
   for (var l = n > 1 ? void 0 : n ? R(e, r) : e, o = t.length - 1, p; o >= 0; o--)
     (p = t[o]) && (l = (n ? p(e, r, l) : p(l)) || l);
@@ -70,19 +60,7 @@ let a = class extends P {
   }
   render() {
     let t = this.value[0], e = this.value[1];
-    return this.useMask || (t = Number.isNaN(parseFloat(this.value[0])) ? "" : String(parseFloat(this.value[0])), e = Number.isNaN(parseFloat(this.value[1])) ? "" : String(parseFloat(this.value[1]))), h`<cx-space
-      spacing="x-small"
-      align-items="center"
-      wrap="nowrap"
-      class="size-input-group"
-    >
-      <cx-input
-        part="width"
-        class="size-input-group__width"
-        value=${t}
-        label=${this.localize.term("width")}
-        mask=${this.mask}
-        .maskBlocks=${{
+    return this.useMask || (t = Number.isNaN(parseFloat(this.value[0])) ? "" : String(parseFloat(this.value[0])), e = Number.isNaN(parseFloat(this.value[1])) ? "" : String(parseFloat(this.value[1]))), h`<cx-space spacing="x-small" align-items="center" wrap="nowrap" class="size-input-group"><cx-input part="width" class="size-input-group__width" value=${t} label=${this.localize.term("width")} mask=${this.mask} .maskBlocks=${{
       num: {
         mask: Number,
         max: this.unit === i.Percentage ? 100 : void 0,
@@ -90,35 +68,10 @@ let a = class extends P {
         scale: 0,
         thousandsSeparator: ""
       }
-    }}
-        .form=${this.closest("form")}
-        @cx-change=${this.handleInputChange}
-        @cx-input=${this.handleWidthInput}
-      ></cx-input>
-      ${f(
+    }} .form=${this.closest("form")} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthInput}></cx-input>${f(
       this.unit === i.Pixel && this.canSetAspectRatio,
-      () => h`
-          <cx-icon-button
-            part="keep-aspect-ratio"
-            class="size-input-group__keep-aspect-ratio"
-            name=${this.keepRatio ? "insert_link" : "link_off"}
-            title=${this.localize.term("keepAspectRatio")}
-            @click=${this.handleKeepRatioClick}
-          ></cx-icon-button>
-        `
-    )}
-      <cx-tooltip
-        content=${this.localize.term("disabledHeightInputHelpText")}
-        ?disabled=${this.unit === i.Pixel}
-      >
-        <cx-input
-          part="height"
-          class="size-input-group__height"
-          value=${e}
-          label=${this.localize.term("height")}
-          ?disabled=${this.unit === i.Percentage}
-          mask=${this.mask}
-          .maskBlocks=${{
+      () => h`<cx-icon-button part="keep-aspect-ratio" class="size-input-group__keep-aspect-ratio" name=${this.keepRatio ? "insert_link" : "link_off"} title=${this.localize.term("keepAspectRatio")} @click=${this.handleKeepRatioClick}></cx-icon-button>`
+    )}<cx-tooltip content=${this.localize.term("disabledHeightInputHelpText")} ?disabled=${this.unit === i.Pixel}><cx-input part="height" class="size-input-group__height" value=${e} label=${this.localize.term("height")} ?disabled=${this.unit === i.Percentage} mask=${this.mask} .maskBlocks=${{
       num: {
         mask: Number,
         max: this.unit === i.Percentage ? 100 : void 0,
@@ -126,28 +79,10 @@ let a = class extends P {
         scale: 0,
         thousandsSeparator: ""
       }
-    }}
-          .form=${this.closest("form")}
-          @cx-input=${this.handleHeightInput}
-        ></cx-input>
-      </cx-tooltip>
-      ${f(
+    }} .form=${this.closest("form")} @cx-input=${this.handleHeightInput}></cx-input></cx-tooltip>${f(
       this.canSetUnit,
-      () => h`
-          <cx-select
-            part="unit"
-            class="size-input-group__unit"
-            label=${this.localize.term("unit")}
-            value=${this.unit}
-            .form=${this.closest("form")}
-            @cx-change=${this.handleUnitChange}
-          >
-            <cx-option value=${i.Pixel}>px</cx-option>
-            <cx-option value=${i.Percentage}>%</cx-option>
-          </cx-select>
-        `
-    )}
-    </cx-space>`;
+      () => h`<cx-select part="unit" class="size-input-group__unit" label=${this.localize.term("unit")} value=${this.unit} .form=${this.closest("form")} @cx-change=${this.handleUnitChange}><cx-option value=${i.Pixel}>px</cx-option><cx-option value=${i.Percentage}>%</cx-option></cx-select>`
+    )}</cx-space>`;
   }
 };
 a.styles = [$, z];

package/library/components/skeleton.js

@@ -1,100 +1,27 @@
-import { n as c, C as d } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.DMSLciL5.js";
+import { n as c, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as f, x as m } from "../chunks/lit-element.jLBm65_O.js";
 import { e as v } from "../chunks/class-map.BiVq-cVR.js";
-const h = f`
-  :host {
-    --border-radius: var(--cx-border-radius-pill);
-    --color: var(--cx-color-neutral-200);
-    --sheen-color: var(--cx-color-neutral-300);
-
-    display: block;
-    position: relative;
-  }
-
-  .skeleton {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    min-height: 1rem;
-  }
-
-  .skeleton__indicator {
-    flex: 1 1 auto;
-    background: var(--color);
-    border-radius: var(--border-radius);
-  }
-
-  .skeleton--sheen .skeleton__indicator {
-    background: linear-gradient(
-      270deg,
-      var(--sheen-color),
-      var(--color),
-      var(--color),
-      var(--sheen-color)
-    );
-    background-size: 400% 100%;
-    animation: sheen 8s ease-in-out infinite;
-  }
-
-  .skeleton--pulse .skeleton__indicator {
-    animation: pulse 2s ease-in-out 0.5s infinite;
-  }
-
-  /* Forced colors mode */
-  @media (forced-colors: active) {
-    :host {
-      --color: GrayText;
-    }
-  }
-
-  @keyframes sheen {
-    0% {
-      background-position: 200% 0;
-    }
-    to {
-      background-position: -200% 0;
-    }
-  }
-
-  @keyframes pulse {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.4;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;
+const h = f`:host{--border-radius:var(--cx-border-radius-pill);--color:var(--cx-color-neutral-200);--sheen-color:var(--cx-color-neutral-300);display:block;position:relative}.skeleton{width:100%;height:100%;min-height:1rem;display:flex}.skeleton__indicator{background:var(--color);border-radius:var(--border-radius);flex:auto}.skeleton--sheen .skeleton__indicator{background:linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));background-size:400% 100%;animation:8s ease-in-out infinite sheen}.skeleton--pulse .skeleton__indicator{animation:2s ease-in-out .5s infinite pulse}@media (forced-colors:active){:host{--color:GrayText}}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}`;
 var k = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (a, o, s, r) => {
   for (var e = r > 1 ? void 0 : r ? _(o, s) : o, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (e = (r ? i(o, s, e) : i(e)) || e);
   return r && e && k(o, s, e), e;
 };
-let t = class extends d {
+let t = class extends p {
   constructor() {
     super(...arguments), this.effect = "none";
   }
   render() {
-    return m`
-      <div
-        part="base"
-        class=${v({
+    return m`<div part="base" class=${v({
       skeleton: !0,
       "skeleton--pulse": this.effect === "pulse",
       "skeleton--sheen": this.effect === "sheen"
-    })}
-      >
-        <div part="indicator" class="skeleton__indicator"></div>
-      </div>
-    `;
+    })}><div part="indicator" class="skeleton__indicator"></div></div>`;
   }
 };
-t.styles = [p, h];
+t.styles = [d, h];
 l([
   c()
 ], t.prototype, "effect", 2);

package/library/components/space.js

@@ -1,149 +1,12 @@
 import { n as a, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as l } from "../chunks/component.styles.DMSLciL5.js";
+import { c as l } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as f, x as h } from "../chunks/lit-element.jLBm65_O.js";
-const u = f`
-  :host {
-    display: flex;
-    flex-direction: var(--spacing-container-direction, horizontal);
-    gap: var(--spacing-container-gap, var(--cx-spacing-medium));
-    align-items: var(--spacing-container-align-items, normal);
-    flex-wrap: var(--spacing-container-wrap, nowrap);
-    justify-content: var(--spacing-container-justify-content, normal);
-  }
-
-  :host([direction='vertical']) {
-    --spacing-container-direction: column;
-  }
-
-  :host([direction='horizontal']) {
-    --spacing-container-direction: row;
-    --spacing-container-align-items: center;
-  }
-
-  /* #region Spacing */
-  :host([spacing='3x-small']) {
-    --spacing-container-gap: var(--cx-spacing-3x-small);
-  }
-  :host([spacing='2x-small']) {
-    --spacing-container-gap: var(--cx-spacing-2x-small);
-  }
-  :host([spacing='x-small']) {
-    --spacing-container-gap: var(--cx-spacing-x-small);
-  }
-  :host([spacing='small']) {
-    --spacing-container-gap: var(--cx-spacing-small);
-  }
-  :host([spacing='medium']) {
-    --spacing-container-gap: var(--cx-spacing-medium);
-  }
-  :host([spacing='large']) {
-    --spacing-container-gap: var(--cx-spacing-large);
-  }
-  :host([spacing='x-large']) {
-    --spacing-container-gap: var(--cx-spacing-x-large);
-  }
-  :host([spacing='2x-large']) {
-    --spacing-container-gap: var(--cx-spacing-2x-large);
-  }
-  :host([spacing='3x-large']) {
-    --spacing-container-gap: var(--cx-spacing-3x-large);
-  }
-  :host([spacing='4x-large']) {
-    --spacing-container-gap: var(--cx-spacing-4x-large);
-  }
-
-  /* #endregion */
-
-  /* #region Wrap */
-  :host([wrap='wrap']) {
-    --spacing-container-wrap: wrap;
-  }
-
-  :host([wrap='nowrap']) {
-    --spacing-container-wrap: nowrap;
-  }
-
-  :host([wrap='wrap-reverse']) {
-    --spacing-container-wrap: wrap-reverse;
-  }
-  /* #endregion */
-
-  /* #region Justify content */
-  :host([justify-content='start']) {
-    --spacing-container-justify-content: start;
-  }
-  :host([justify-content='end']) {
-    --spacing-container-justify-content: end;
-  }
-  :host([justify-content='flex-start']) {
-    --spacing-container-justify-content: flex-start;
-  }
-  :host([justify-content='flex-end']) {
-    --spacing-container-justify-content: flex-end;
-  }
-  :host([justify-content='center']) {
-    --spacing-container-justify-content: center;
-  }
-  :host([justify-content='left']) {
-    --spacing-container-justify-content: left;
-  }
-  :host([justify-content='right']) {
-    --spacing-container-justify-content: right;
-  }
-  :host([justify-content='normal']) {
-    --spacing-container-justify-content: normal;
-  }
-  :host([justify-content='space-between']) {
-    --spacing-container-justify-content: space-between;
-  }
-  :host([justify-content='space-around']) {
-    --spacing-container-justify-content: space-around;
-  }
-  :host([justify-content='space-evenly']) {
-    --spacing-container-justify-content: space-evenly;
-  }
-  :host([justify-content='stretch']) {
-    --spacing-container-justify-content: stretch;
-  }
-  /* #endregion */
-
-  /* #region Align items */
-  :host([align-items='normal']) {
-    --spacing-container-align-items: normal;
-  }
-  :host([align-items='center']) {
-    --spacing-container-align-items: center;
-  }
-  :host([align-items='start']) {
-    --spacing-container-align-items: start;
-  }
-  :host([align-items='end']) {
-    --spacing-container-align-items: end;
-  }
-  :host([align-items='baseline']) {
-    --spacing-container-align-items: baseline;
-  }
-  :host([align-items='stretch']) {
-    --spacing-container-align-items: stretch;
-  }
-  :host([align-items='flex-start']) {
-    --spacing-container-align-items: flex-start;
-  }
-  :host([align-items='flex-end']) {
-    --spacing-container-align-items: flex-end;
-  }
-  /* #endregion */
-
-  :host([direction='vertical'][block]) ::slotted(*) {
-    display: block;
-    width: 100%;
-  }
-`;
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (p, i, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? x(i, r) : i, c = p.length - 1, o; c >= 0; c--)
-    (o = p[c]) && (n = (s ? o(i, r, n) : o(n)) || n);
-  return s && n && y(i, r, n), n;
+const u = f`:host{flex-direction:var(--spacing-container-direction,horizontal);gap:var(--spacing-container-gap,var(--cx-spacing-medium));align-items:var(--spacing-container-align-items,normal);flex-wrap:var(--spacing-container-wrap,nowrap);justify-content:var(--spacing-container-justify-content,normal);display:flex}:host([direction=vertical]){--spacing-container-direction:column}:host([direction=horizontal]){--spacing-container-direction:row;--spacing-container-align-items:center}:host([spacing="3x-small"]){--spacing-container-gap:var(--cx-spacing-3x-small)}:host([spacing="2x-small"]){--spacing-container-gap:var(--cx-spacing-2x-small)}:host([spacing=x-small]){--spacing-container-gap:var(--cx-spacing-x-small)}:host([spacing=small]){--spacing-container-gap:var(--cx-spacing-small)}:host([spacing=medium]){--spacing-container-gap:var(--cx-spacing-medium)}:host([spacing=large]){--spacing-container-gap:var(--cx-spacing-large)}:host([spacing=x-large]){--spacing-container-gap:var(--cx-spacing-x-large)}:host([spacing="2x-large"]){--spacing-container-gap:var(--cx-spacing-2x-large)}:host([spacing="3x-large"]){--spacing-container-gap:var(--cx-spacing-3x-large)}:host([spacing="4x-large"]){--spacing-container-gap:var(--cx-spacing-4x-large)}:host([wrap=wrap]){--spacing-container-wrap:wrap}:host([wrap=nowrap]){--spacing-container-wrap:nowrap}:host([wrap=wrap-reverse]){--spacing-container-wrap:wrap-reverse}:host([justify-content=start]){--spacing-container-justify-content:start}:host([justify-content=end]){--spacing-container-justify-content:end}:host([justify-content=flex-start]){--spacing-container-justify-content:flex-start}:host([justify-content=flex-end]){--spacing-container-justify-content:flex-end}:host([justify-content=center]){--spacing-container-justify-content:center}:host([justify-content=left]){--spacing-container-justify-content:left}:host([justify-content=right]){--spacing-container-justify-content:right}:host([justify-content=normal]){--spacing-container-justify-content:normal}:host([justify-content=space-between]){--spacing-container-justify-content:space-between}:host([justify-content=space-around]){--spacing-container-justify-content:space-around}:host([justify-content=space-evenly]){--spacing-container-justify-content:space-evenly}:host([justify-content=stretch]){--spacing-container-justify-content:stretch}:host([align-items=normal]){--spacing-container-align-items:normal}:host([align-items=center]){--spacing-container-align-items:center}:host([align-items=start]){--spacing-container-align-items:start}:host([align-items=end]){--spacing-container-align-items:end}:host([align-items=baseline]){--spacing-container-align-items:baseline}:host([align-items=stretch]){--spacing-container-align-items:stretch}:host([align-items=flex-start]){--spacing-container-align-items:flex-start}:host([align-items=flex-end]){--spacing-container-align-items:flex-end}:host([direction=vertical][block]) ::slotted(*){width:100%;display:block}`;
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (p, i, c, s) => {
+  for (var n = s > 1 ? void 0 : s ? x(i, c) : i, r = p.length - 1, o; r >= 0; r--)
+    (o = p[r]) && (n = (s ? o(i, c, n) : o(n)) || n);
+  return s && n && y(i, c, n), n;
 };
 let t = class extends g {
   constructor() {