@orangelogic/design-system 2.0.0-29DUO2-beta-2 → 2.0.0-29IORR-beta-1

package/library/components/color-swatch-group.js

@@ -1,16 +1,16 @@
 import "./space.js";
-import "../chunks/table.DNTm_GMS.js";
-import "../chunks/typography.oDzoLbZS.js";
+import "../chunks/table.Cs5a0duW.js";
+import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/color-swatch.C0oPHfOu.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C as w } from "../chunks/color-swatch-group.p3Sdqlat.js";
-import "../chunks/content-builder.D_phDrlo.js";
+import "../chunks/color-swatch.2HS4bc3N.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as w } from "../chunks/color-swatch-group.BoVb3qVt.js";
+import "../chunks/toast.B2cJgW5u.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";
-import "../chunks/i18n.C0iakJkV.js";
-import "../chunks/watch.q1sEjPWL.js";
-import "../chunks/responsive.CrX-HUow.js";
+import "../chunks/i18n.BFqTRDCA.js";
+import "../chunks/watch.BCJD77bD.js";
+import "../chunks/responsive.BndCeSg0.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/color-swatch.js

@@ -2,15 +2,15 @@ import "./copy-button.js";
 import "./line-clamp.js";
 import "./resize-observer.js";
 import "./space.js";
-import "../chunks/typography.oDzoLbZS.js";
+import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C as q } from "../chunks/color-swatch.C0oPHfOu.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as q } from "../chunks/color-swatch.2HS4bc3N.js";
 import "../chunks/color.vLD2sNTs.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";
-import "../chunks/i18n.C0iakJkV.js";
-import "../chunks/watch.q1sEjPWL.js";
+import "../chunks/i18n.BFqTRDCA.js";
+import "../chunks/watch.BCJD77bD.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/confirm-popover.js

@@ -1,12 +1,12 @@
-import "../chunks/button.KnE3mcyM.js";
-import "../chunks/dialog.CKP1W_u1.js";
+import "../chunks/button.CauAHfdl.js";
+import "../chunks/dialog.2UW1LNm1.js";
 import "./dropdown.js";
-import "../chunks/typography.oDzoLbZS.js";
+import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C as x } from "../chunks/confirm-popover.DlN4hgLS.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as x } from "../chunks/confirm-popover.DmGAMS8X.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.C0iakJkV.js";
+import "../chunks/i18n.BFqTRDCA.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/query.BBf1UFkC.js";
 import "../chunks/class-map.BiVq-cVR.js";

package/library/components/copy-button.js

@@ -1,9 +1,9 @@
 import { n as r, C as y } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "../chunks/component.styles.DMSLciL5.js";
+import { c as m } from "../chunks/component.styles.CRO4Odto.js";
 import { c as f } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as g } from "../chunks/i18n.C0iakJkV.js";
+import { L as g } from "../chunks/i18n.BFqTRDCA.js";
 import { H as x } from "../chunks/slot.j5oheLJC.js";
-import { w as v } from "../chunks/watch.q1sEjPWL.js";
+import { w as v } from "../chunks/watch.BCJD77bD.js";
 import { i as _, x as b } from "../chunks/lit-element.jLBm65_O.js";
 import { r as u } from "../chunks/state.CSDxrqLd.js";
 import { e as p } from "../chunks/query.BBf1UFkC.js";
@@ -12,205 +12,9 @@ import { n as C } from "../chunks/when.Dr1es41R.js";
 import { s as d, g as h } from "../chunks/animation-registry.HmpwNuGH.js";
 import z from "./icon.js";
 import k from "./tooltip.js";
-const I = _`
-  :host {
-    --error-color: var(--cx-color-danger);
-    --success-color: var(--cx-color-success);
-
-    --background-color: light-dark(
-      var(--cx-color-primary),
-      var(--cx-color-primary)
-    );
-    --color: light-dark(
-      var(--cx-color-neutral-0),
-      var(--cx-color-neutral-1000)
-    );
-    display: inline-block;
-    position: relative;
-    width: auto;
-    cursor: pointer;
-    line-height: normal;
-    max-width: 100%;
-  }
-
-  .copy-button {
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: center;
-    width: 100%;
-    max-width: 100%;
-    border-style: solid;
-    border-width: var(--cx-input-border-width);
-    font-family: var(--cx-input-font-family);
-    font-weight: var(--cx-font-weight-regular);
-    text-decoration: none;
-    text-transform: var(--cx-button-text-transform, none);
-    user-select: none;
-    -webkit-user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 0;
-    transition:
-      var(--cx-transition-x-fast) background-color,
-      var(--cx-transition-x-fast) color,
-      var(--cx-transition-x-fast) border,
-      var(--cx-transition-x-fast) box-shadow;
-    cursor: inherit;
-  }
-
-  .copy-button__label {
-    max-width: 100%;
-  }
-
-  .copy-button::-moz-focus-inner {
-    border: 0;
-  }
-
-  .copy-button:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .copy-button {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--cx-color-neutral);
-  }
-
-  .copy-button.copy-button--has-label:hover:not(.copy-button--disabled),
-  .copy-button.copy-button--has-label.copy-button--focused:not(
-      .copy-button--disabled
-    ) {
-    background-color: var(--cx-color-neutral-100);
-    border-color: var(--cx-color-neutral-100);
-    color: var(--cx-color-neutral);
-  }
-
-  .copy-button.copy-button--has-label:active:not(.copy-button--disabled) {
-    background-color: var(--cx-color-neutral-200);
-    border-color: var(--cx-color-neutral-200);
-    color: var(--cx-color-neutral);
-  }
-
-  .copy-button--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  /* When disabled, prevent mouse events from bubbling up from children */
-  .copy-button--disabled * {
-    pointer-events: none;
-  }
-
-  /* make icon slots overlapped each other using grid */
-  .copy-button__icon-wrapper {
-    display: inline-grid;
-    grid-template-columns: 1fr;
-    background: none;
-    border: none;
-  }
-
-  .copy-button__icon-wrapper slot {
-    grid-row-start: 1;
-    grid-column-start: 1;
-    display: inline-flex;
-  }
-
-  .copy-button__icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-
-  .copy-button--copy-success .copy-button__icon {
-    color: var(--success-color);
-  }
-
-  .copy-button--copy-error .copy-button__icon {
-    color: var(--error-color);
-  }
-
-  .copy-button__label {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .copy-button {
-    background-color: var(--button-background-color, unset);
-  }
-
-  .copy-button--small {
-    height: auto;
-    min-height: var(--cx-input-height-small);
-    font-size: var(--button-font-size, var(--cx-button-font-size-medium));
-    border-radius: var(--cx-button-border-radius-small);
-  }
-
-  .copy-button--small .copy-button__icon {
-    --font-size: var(--button-font-size, var(--cx-font-size-medium));
-  }
-
-  .copy-button--medium {
-    height: auto;
-    min-height: var(--cx-input-height-medium);
-    font-size: var(--button-font-size, var(--cx-button-font-size-medium));
-    border-radius: var(--cx-button-border-radius-medium);
-  }
-
-  .copy-button--large {
-    height: auto;
-    min-height: var(--cx-input-height-large);
-    font-size: var(--button-font-size, var(--cx-button-font-size-medium));
-    border-radius: var(--cx-button-border-radius-large);
-  }
-
-  .copy-button--x-large {
-    height: auto;
-    min-height: var(--cx-input-height-x-large);
-    font-size: var(--button-font-size, var(--cx-button-font-size-medium));
-    border-radius: var(--cx-button-border-radius-large);
-  }
-
-  /*
-   * Button spacing
-   */
-
-  .copy-button--small {
-    padding: var(--button-padding, 0 var(--cx-spacing-x-small));
-  }
-
-  .copy-button--medium {
-    padding: var(--button-padding, 0 var(--cx-spacing-medium));
-  }
-
-  .copy-button--large {
-    padding: var(--button-padding, 0 var(--cx-spacing-large));
-  }
-
-  .copy-button--x-large {
-    padding: var(--button-padding, 0 var(--cx-spacing-x-large));
-  }
-
-  .copy-button--has-label:not(.copy-button--no-icon).copy-button--small
-    .copy-button__label,
-  .copy-button--has-label:not(.copy-button--no-icon).copy-button--medium
-    .copy-button__label,
-  .copy-button--has-label:not(.copy-button--no-icon).copy-button--large
-    .copy-button__label,
-  .copy-button--has-label:not(.copy-button--no-icon).copy-button--x-large
-    .copy-button__label {
-    padding-inline-start: var(--cx-spacing-x-small);
-  }
-`;
-var L = Object.defineProperty, S = Object.getOwnPropertyDescriptor, o = (e, a, c, n) => {
-  for (var i = n > 1 ? void 0 : n ? S(a, c) : a, s = e.length - 1, l; s >= 0; s--)
+const I = _`:host{--error-color:var(--cx-color-danger);--success-color:var(--cx-color-success);--background-color:light-dark(var(--cx-color-primary),var(--cx-color-primary));--color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));cursor:pointer;width:auto;max-width:100%;line-height:normal;display:inline-block;position:relative}.copy-button{border-style:solid;border-width:var(--cx-input-border-width);width:100%;max-width:100%;font-family:var(--cx-input-font-family);font-weight:var(--cx-font-weight-regular);text-transform:var(--cx-button-text-transform,none);-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;transition:var(--cx-transition-x-fast) background-color, var(--cx-transition-x-fast) color, var(--cx-transition-x-fast) border, var(--cx-transition-x-fast) box-shadow;cursor:inherit;justify-content:center;align-items:stretch;padding:0;text-decoration:none;display:inline-flex}.copy-button__label{max-width:100%}.copy-button::-moz-focus-inner{border:0}.copy-button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.copy-button{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.copy-button.copy-button--has-label:hover:not(.copy-button--disabled),.copy-button.copy-button--has-label.copy-button--focused:not(.copy-button--disabled){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.copy-button.copy-button--has-label:active:not(.copy-button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.copy-button--disabled{opacity:.5;cursor:default}.copy-button--disabled *{pointer-events:none}.copy-button__icon-wrapper{background:0 0;border:none;grid-template-columns:1fr;display:inline-grid}.copy-button__icon-wrapper slot{grid-row-start:1;grid-column-start:1;display:inline-flex}.copy-button__icon{pointer-events:none;flex:none;align-items:center;display:flex}.copy-button--copy-success .copy-button__icon{color:var(--success-color)}.copy-button--copy-error .copy-button__icon{color:var(--error-color)}.copy-button__label{justify-content:center;align-items:center;line-height:1;display:inline-flex}.copy-button{background-color:var(--button-background-color,unset)}.copy-button--small{height:auto;min-height:var(--cx-input-height-small);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-small)}.copy-button--small .copy-button__icon{--font-size:var(--button-font-size,var(--cx-font-size-medium))}.copy-button--medium{height:auto;min-height:var(--cx-input-height-medium);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-medium)}.copy-button--large{height:auto;min-height:var(--cx-input-height-large);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-large)}.copy-button--x-large{height:auto;min-height:var(--cx-input-height-x-large);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-large)}.copy-button--small{padding:var(--button-padding,0 var(--cx-spacing-x-small))}.copy-button--medium{padding:var(--button-padding,0 var(--cx-spacing-medium))}.copy-button--large{padding:var(--button-padding,0 var(--cx-spacing-large))}.copy-button--x-large{padding:var(--button-padding,0 var(--cx-spacing-x-large))}.copy-button--has-label:not(.copy-button--no-icon).copy-button--small .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--medium .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--large .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--x-large .copy-button__label{padding-inline-start:var(--cx-spacing-x-small)}`;
+var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (e, a, c, n) => {
+  for (var i = n > 1 ? void 0 : n ? F(a, c) : a, s = e.length - 1, l; s >= 0; s--)
     (l = e[s]) && (i = (n ? l(a, c, i) : l(i)) || i);
   return n && i && L(a, c, i), i;
 };
@@ -276,21 +80,12 @@ let t = class extends y {
     await this.updateComplete, this.tooltip.content = this.getTooltipContent();
   }
   render() {
-    return b`
-      <cx-tooltip
-        placement=${this.tooltipPlacement}
-        distance=${this.tooltipDistance}
-        ?disabled=${this.disabled}
-        ?hoist=${this.hoist}
-        exportparts="
+    return b`<cx-tooltip placement=${this.tooltipPlacement} distance=${this.tooltipDistance} ?disabled=${this.disabled} ?hoist=${this.hoist} exportparts="
           base:tooltip__base,
           base__popup:tooltip__base__popup,
           base__arrow:tooltip__base__arrow,
           body:tooltip__body
-        "
-      >
-        <button
-          class=${w({
+        "><button class=${w({
       "copy-button": !0,
       "copy-button--copy-error": this.status === "error",
       "copy-button--copy-success": this.status === "success",
@@ -302,50 +97,10 @@ let t = class extends y {
       "copy-button--no-icon": this.noIcon,
       "copy-button--small": this.size === "small",
       "copy-button--x-large": this.size === "x-large"
-    })}
-          aria-label=${this.label}
-          part="button"
-          type="button"
-          ?disabled=${this.disabled}
-          @click=${this.handleCopy}
-          @keydown=${this.handleKeyDown}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-        >
-          ${C(
+    })} aria-label=${this.label} part="button" type="button" ?disabled=${this.disabled} @click=${this.handleCopy} @keydown=${this.handleKeyDown} @blur=${this.handleBlur} @focus=${this.handleFocus}>${C(
       !this.noIcon,
-      () => b`
-              <div part="icon-wrapper" class="copy-button__icon-wrapper">
-                <slot
-                  part="copy-icon"
-                  name="copy-icon"
-                  class="copy-button__icon"
-                >
-                  <cx-icon name="content_copy"></cx-icon>
-                </slot>
-                <slot
-                  part="success-icon"
-                  name="success-icon"
-                  hidden
-                  class="copy-button__icon"
-                >
-                  <cx-icon name="check"></cx-icon>
-                </slot>
-                <slot
-                  part="error-icon"
-                  name="error-icon"
-                  hidden
-                  class="copy-button__icon"
-                >
-                  <cx-icon name="close"></cx-icon>
-                </slot>
-              </div>
-            `
-    )}
-          <slot part="label" class="copy-button__label"></slot>
-        </button>
-      </cx-tooltip>
-    `;
+      () => b`<div part="icon-wrapper" class="copy-button__icon-wrapper"><slot part="copy-icon" name="copy-icon" class="copy-button__icon"><cx-icon name="content_copy"></cx-icon></slot><slot part="success-icon" name="success-icon" hidden class="copy-button__icon"><cx-icon name="check"></cx-icon></slot><slot part="error-icon" name="error-icon" hidden class="copy-button__icon"><cx-icon name="close"></cx-icon></slot></div>`
+    )}<slot part="label" class="copy-button__label"></slot></button></cx-tooltip>`;
   }
 };
 t.styles = [m, I];

package/library/components/corner-position-input-group.js

@@ -1,27 +1,14 @@
 import u from "./input.js";
-import { C as h } from "../chunks/option.DnpkE8Xi.js";
+import { C as h } from "../chunks/option.COnEtd3X.js";
 import m from "./select.js";
 import x from "./space.js";
 import { n as l, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as C } from "../chunks/component.styles.DMSLciL5.js";
+import { c as C } from "../chunks/component.styles.CRO4Odto.js";
 import { C as o } from "../chunks/index.Cpamj0jB.js";
 import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as _ } from "../chunks/i18n.C0iakJkV.js";
+import { L as _ } from "../chunks/i18n.BFqTRDCA.js";
 import { i as v, x as y } from "../chunks/lit-element.jLBm65_O.js";
-const $ = v`
-  :host {
-    display: block;
-    width: 100%;
-  }
-
-  .corner-position-input-group__inputs {
-    width: 100%;
-  }
-
-  .corner-position-input-group__input {
-    flex: 1;
-  }
-`;
+const $ = v`:host{width:100%;display:block}.corner-position-input-group__inputs{width:100%}.corner-position-input-group__input{flex:1}`;
 var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, r = (e, t, f, n) => {
   for (var i = n > 1 ? void 0 : n ? Y(t, f) : t, c = e.length - 1, a; c >= 0; c--)
     (a = e[c]) && (i = (n ? a(t, f, i) : a(i)) || i);
@@ -79,47 +66,7 @@ let s = class extends g {
     });
   }
   render() {
-    return y`<cx-space
-      class="corner-position-input-group"
-      direction="vertical"
-    >
-      <cx-select
-        class="corner-position-input-group__select"
-        value=${this.position}
-        label="Position"
-        name="position"
-        hoist
-        @cx-change=${this.handlePositionChange}
-      >
-        <cx-option value=${o.TopLeft}>Top Left</cx-option>
-        <cx-option value=${o.TopRight}>Top Right</cx-option>
-        <cx-option value=${o.BottomLeft}>Bottom Left</cx-option>
-        <cx-option value=${o.BottomRight}>Bottom Right</cx-option>
-      </cx-select>
-      <cx-space
-        class="corner-position-input-group__inputs"
-        direction="horizontal"
-      >
-        <cx-input
-          class="corner-position-input-group__input"
-          value=${this.offsetY}
-          label=${this.localize.term(this.offsetYKey)}
-          name="offset-y"
-          mask=${p.mask}
-          .maskBlocks=${p.maskBlocks}
-          @cx-change=${this.handleOffsetYChange}
-        ></cx-input>
-        <cx-input
-          class="corner-position-input-group__input"
-          value=${this.offsetX}
-          label=${this.localize.term(this.offsetXKey)}
-          name="offset-x"
-          mask=${p.mask}
-          .maskBlocks=${p.maskBlocks}
-          @cx-change=${this.handleOffsetXChange}
-        ></cx-input>
-      </cx-space>
-    </cx-space>`;
+    return y`<cx-space class="corner-position-input-group" direction="vertical"><cx-select class="corner-position-input-group__select" value=${this.position} label="Position" name="position" hoist @cx-change=${this.handlePositionChange}><cx-option value=${o.TopLeft}>Top Left</cx-option><cx-option value=${o.TopRight}>Top Right</cx-option><cx-option value=${o.BottomLeft}>Bottom Left</cx-option><cx-option value=${o.BottomRight}>Bottom Right</cx-option></cx-select><cx-space class="corner-position-input-group__inputs" direction="horizontal"><cx-input class="corner-position-input-group__input" value=${this.offsetY} label=${this.localize.term(this.offsetYKey)} name="offset-y" mask=${p.mask} .maskBlocks=${p.maskBlocks} @cx-change=${this.handleOffsetYChange}></cx-input><cx-input class="corner-position-input-group__input" value=${this.offsetX} label=${this.localize.term(this.offsetXKey)} name="offset-x" mask=${p.mask} .maskBlocks=${p.maskBlocks} @cx-change=${this.handleOffsetXChange}></cx-input></cx-space></cx-space>`;
   }
 };
 s.styles = [C, $];

package/library/components/cropper.js

@@ -1,12 +1,12 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
+import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/asset-link-format.BSRDqHg7.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";
 import "../chunks/when.Dr1es41R.js";
-import { C as l } from "../chunks/cropper.tSDgXKqJ.js";
+import { C as l } from "../chunks/cropper.ZU2Dy-MM.js";
 export {
   l as default
 };

package/library/components/details.js

@@ -1,125 +1,16 @@
 import { n as c, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as v } from "../chunks/component.styles.DMSLciL5.js";
+import { c as v } from "../chunks/component.styles.CRO4Odto.js";
 import { s as h, a as p, b as m } from "../chunks/animate.El-MpOws.js";
 import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as u } from "../chunks/event.mFzZi4sr.js";
-import { L as g } from "../chunks/i18n.C0iakJkV.js";
-import { w as _ } from "../chunks/watch.q1sEjPWL.js";
+import { L as g } from "../chunks/i18n.BFqTRDCA.js";
+import { w as _ } from "../chunks/watch.BCJD77bD.js";
 import { i as w, x as k } from "../chunks/lit-element.jLBm65_O.js";
 import { e as l } from "../chunks/query.BBf1UFkC.js";
 import { e as C } from "../chunks/class-map.BiVq-cVR.js";
 import { s as y, g as f } from "../chunks/animation-registry.HmpwNuGH.js";
 import D from "./icon.js";
-const O = w`
-  :host {
-    display: block;
-    --details-background-color: inherit;
-    --details-border: inherit;
-  }
-
-  ::slotted(cx-column) {
-    padding: var(--cx-spacing-3x-small);
-    min-height: max(var(--min-height), 100px);
-    max-height: var(--max-height, 100%);
-    overflow: auto;
-  }
-
-  .details {
-    border: var(--details-border, solid 1px var(--cx-color-neutral-200));
-    background-color: var(--details-background-color, --cx-color-neutral-0);
-    overflow-anchor: none;
-  }
-
-  .details--disabled {
-    opacity: 0.5;
-  }
-
-  .details__header {
-    display: flex;
-    align-items: center;
-    border-radius: var(--header-border-radius, var(--cx-border-radius-small));
-    padding: var(--header-padding, var(--cx-spacing-small));
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: pointer;
-    color: var(--header-color, var(--cx-color-neutral));
-    font-weight: var(--cx-font-weight-semibold);
-    font-size: var(--header-font-size, var(--cx-font-size-medium));
-    background-color: var(--header-background-color, var(--cx-color-neutral-0));
-    border: var(--header-border) solid;
-  }
-
-  .details--open .details__header {
-    background-color: var(
-      --header-active-background-color,
-      var(--cx-color-neutral-0)
-    );
-    color: var(--header-active-color, var(--cx-color-neutral));
-    border: var(--header-active-border) solid;
-  }
-
-  .details__header::-webkit-details-marker {
-    display: none;
-  }
-
-  .details__header:focus {
-    outline: none;
-  }
-
-  .details__header:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: calc(1px + var(--cx-focus-ring-offset));
-  }
-
-  .details--disabled .details__header {
-    cursor: default;
-  }
-
-  .details--disabled .details__header:focus-visible {
-    outline: none;
-    box-shadow: none;
-  }
-
-  .details__summary {
-    flex: 1 1 auto;
-    display: flex;
-    align-items: center;
-    font: var(--cx-font-label-medium);
-  }
-
-  .details__summary-icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    transition: var(--cx-transition-medium) rotate ease;
-  }
-
-  .details--open .details__summary-icon {
-    rotate: 90deg;
-  }
-
-  .details--open.details--rtl .details__summary-icon {
-    rotate: -90deg;
-  }
-
-  .details--open slot[name='expand-icon'],
-  .details:not(.details--open) slot[name='collapse-icon'] {
-    display: none;
-  }
-
-  .details__body {
-    overflow: hidden;
-  }
-
-  .details__content {
-    display: block;
-    padding: var(
-      --content-padding,
-      var(--cx-spacing-small) var(--cx-spacing-medium) var(--cx-spacing-small)
-        var(--cx-spacing-medium)
-    );
-  }
-`;
+const O = w`:host{--details-background-color:inherit;--details-border:inherit;display:block}::slotted(cx-column){padding:var(--cx-spacing-3x-small);min-height:max(var(--min-height), 100px);max-height:var(--max-height,100%);overflow:auto}.details{border:var(--details-border,solid 1px var(--cx-color-neutral-200));border-width:var(--details-border-width,1px);background-color:var(--details-background-color,--cx-color-neutral-0);overflow-anchor:none}.details--disabled{opacity:.5}.details__header{border-radius:var(--header-border-radius,var(--cx-border-radius-small));padding:var(--header-padding,var(--cx-spacing-small));-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--header-color,var(--cx-color-neutral));font-weight:var(--cx-font-weight-semibold);font-size:var(--header-font-size,var(--cx-font-size-medium));background-color:var(--header-background-color,var(--cx-color-neutral-0));border:var(--header-border) solid;align-items:center;display:flex}.details--open .details__header{background-color:var(--header-active-background-color,var(--cx-color-neutral-0));color:var(--header-active-color,var(--cx-color-neutral));border:var(--header-active-border) solid}.details__header::-webkit-details-marker{display:none}.details__header:focus{outline:none}.details__header:focus-visible{outline:var(--cx-focus-ring);outline-offset:calc(1px + var(--cx-focus-ring-offset))}.details--disabled .details__header{cursor:default}.details--disabled .details__header:focus-visible{box-shadow:none;outline:none}.details__summary{font:var(--cx-font-label-medium);flex:auto;align-items:center;display:flex}.details__summary-icon{transition:var(--cx-transition-medium) rotate ease;flex:none;align-items:center;display:flex}.details--open .details__summary-icon{rotate:90deg}.details--open.details--rtl .details__summary-icon{rotate:-90deg}.details--open slot[name=expand-icon],.details:not(.details--open) slot[name=collapse-icon]{display:none}.details__body{overflow:hidden}.details__content{padding:var(--content-padding,var(--cx-spacing-small) var(--cx-spacing-medium) var(--cx-spacing-small) var(--cx-spacing-medium));display:block}`;
 var $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, i = (e, a, s, r) => {
   for (var o = r > 1 ? void 0 : r ? z(a, s) : a, d = e.length - 1, n; d >= 0; d--)
     (n = e[d]) && (o = (r ? n(a, s, o) : n(o)) || o);
@@ -190,49 +81,12 @@ let t = class extends b {
   }
   render() {
     const e = this.localize.dir() === "rtl";
-    return k`
-      <details
-        part="base"
-        class=${C({
+    return k`<details part="base" class=${C({
       details: !0,
       "details--disabled": this.disabled,
       "details--open": this.open,
       "details--rtl": e
-    })}
-      >
-        <summary
-          part="header"
-          id="header"
-          class="details__header"
-          role="button"
-          aria-expanded=${this.open ? "true" : "false"}
-          aria-controls="content"
-          aria-disabled=${this.disabled ? "true" : "false"}
-          tabindex=${this.disabled ? "-1" : "0"}
-          @click=${this.handleSummaryClick}
-          @keydown=${this.handleSummaryKeyDown}
-        >
-          <slot name="summary" part="summary" class="details__summary">
-            ${this.summary}
-          </slot>
-          <span part="summary-icon" class="details__summary-icon">
-            <slot name="expand-icon">
-              <cx-icon
-                name=${e ? "chevron_left" : "chevron_right"}
-              ></cx-icon>
-            </slot>
-            <slot name="collapse-icon">
-              <cx-icon
-                name=${e ? "chevron_left" : "chevron_right"}
-              ></cx-icon>
-            </slot>
-          </span>
-        </summary>
-        <div class="details__body" role="region" aria-labelledby="header">
-          <slot part="content" id="content" class="details__content"></slot>
-        </div>
-      </details>
-    `;
+    })}><summary part="header" id="header" class="details__header" role="button" aria-expanded=${this.open ? "true" : "false"} aria-controls="content" aria-disabled=${this.disabled ? "true" : "false"} tabindex=${this.disabled ? "-1" : "0"} @click=${this.handleSummaryClick} @keydown=${this.handleSummaryKeyDown}><slot name="summary" part="summary" class="details__summary">${this.summary}</slot><span part="summary-icon" class="details__summary-icon"><slot name="expand-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot><slot name="collapse-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot></span></summary><div class="details__body" role="region" aria-labelledby="header"><slot part="content" id="content" class="details__content"></slot></div></details>`;
   }
 };
 t.styles = [v, O];