@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/stepper-wizard.js

@@ -3,17 +3,13 @@ import m from "./resize-observer.js";
 import x from "./step.js";
 import f from "./stepper.js";
 import { n as d, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as b } from "../chunks/component.styles.DMSLciL5.js";
+import { c as b } from "../chunks/component.styles.CRO4Odto.js";
 import { c as $ } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as v, x as a } from "../chunks/lit-element.jLBm65_O.js";
 import { c as y } from "../chunks/repeat.DbF2p5ae.js";
 import { o as W } from "../chunks/style-map.llVFPd__.js";
 import { n as l } from "../chunks/when.Dr1es41R.js";
-const C = v`
-  :host {
-    display: block;
-  }
-`;
+const C = v`:host{display:block}`;
 var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (t, r, n, o) => {
   for (var e = o > 1 ? void 0 : o ? w(r, n) : r, p = t.length - 1, s; p >= 0; p--)
     (s = t[p]) && (e = (o ? s(r, n, e) : s(e)) || e);
@@ -36,52 +32,22 @@ let i = class extends u {
     this.requestUpdate("columnCount");
   }
   render() {
-    return a`
-      <cx-resize-observer @cx-resize=${this.handleResize}>
-        <div>
-          <cx-stepper items-per-row=${this.columnCount}>
-            ${y(
+    return a`<cx-resize-observer @cx-resize=${this.handleResize}><div><cx-stepper items-per-row=${this.columnCount}>${y(
       this.data,
       (t) => t.id,
-      (t) => a`<cx-step
-                  slot="step"
-                  data-id=${t.id}
-                  .completed=${t.state === "Done"}
-                  .disabled=${this.disabled || t.state === "Disabled"}
-                  .readonly=${t.readonly}
-                  .active=${t.state === "Active"}
-                  .color=${t.color}
-                  .description=${t.description ?? ""}
-                  style=${W({
+      (t) => a`<cx-step slot="step" data-id=${t.id} .completed=${t.state === "Done"} .disabled=${this.disabled || t.state === "Disabled"} .readonly=${t.readonly} .active=${t.state === "Active"} .color=${t.color} .description=${t.description ?? ""} style=${W({
         maxWidth: `${this.maxWidth}px`,
         minWidth: `${this.minWidth}px`
-      })}
-                >
-                  ${l(
+      })}>${l(
         t.state === "Done",
-        () => a`
-                      <cx-icon
-                        slot="prefix"
-                        variant="filled"
-                        name="check_circle"
-                      ></cx-icon>
-                    `,
+        () => a`<cx-icon slot="prefix" variant="filled" name="check_circle"></cx-icon>`,
         () => a`${l(
           t.icon,
-          () => a`<cx-icon
-                            slot="prefix"
-                            variant=${t.iconVariant || "outlined"}
-                            name=${t.icon}
-                          ></cx-icon>`
+          () => a`<cx-icon slot="prefix" variant=${t.iconVariant || "outlined"} name=${t.icon}></cx-icon>`
         )}`
       )}
-                  ${t.name}
-                </cx-step>`
-    )}
-          </cx-stepper>
-        </div>
-      </cx-resize-observer>
-    `;
+                  ${t.name}</cx-step>`
+    )}</cx-stepper></div></cx-resize-observer>`;
   }
 };
 i.styles = [b, C];

package/library/components/stepper.js

@@ -1,57 +1,40 @@
 import { n, C as c } 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 { w as u } from "../chunks/watch.BCJD77bD.js";
-import { i as d, x as h } from "../chunks/lit-element.jLBm65_O.js";
+import { i as h, x as d } from "../chunks/lit-element.jLBm65_O.js";
 import { e as x } from "../chunks/query.BBf1UFkC.js";
 import { e as v } from "../chunks/class-map.BiVq-cVR.js";
-import { o as g } from "../chunks/style-map.llVFPd__.js";
-import w from "./step.js";
-const y = d`
-  .stepper {
-    display: flex;
-    max-width: 100%;
-    flex-wrap: wrap;
-    row-gap: var(--cx-spacing-2x-small);
-  }
-
-  .stepper--vertical {
-    flex-direction: column;
-    /* gap: var(--cx-spacing-medium); */
-  }
-`;
-var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (o, t, s, p) => {
-  for (var r = p > 1 ? void 0 : p ? b(t, s) : t, a = o.length - 1, l; a >= 0; a--)
-    (l = o[a]) && (r = (p ? l(t, s, r) : l(r)) || r);
-  return p && r && S(t, s, r), r;
+import { o as w } from "../chunks/style-map.llVFPd__.js";
+import g from "./step.js";
+const y = h`.stepper{row-gap:var(--cx-spacing-2x-small);flex-wrap:wrap;max-width:100%;display:flex}.stepper--vertical{flex-direction:column}`;
+var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (s, t, o, p) => {
+  for (var r = p > 1 ? void 0 : p ? b(t, o) : t, a = s.length - 1, l; a >= 0; a--)
+    (l = s[a]) && (r = (p ? l(t, o, r) : l(r)) || r);
+  return p && r && S(t, o, r), r;
 };
 let e = class extends c {
   constructor() {
     super(...arguments), this.direction = "horizontal", this.itemsPerRow = 5;
   }
   handleSlotChange() {
-    const o = this.stepSlot.assignedElements();
-    o.forEach((t, s) => {
-      t.setAttribute("index", s.toString()), this.direction === "vertical" ? t.setAttribute("round", "") : t.removeAttribute("round"), s === o.length - 1 && t.setAttribute("last", "");
+    const s = this.stepSlot.assignedElements();
+    s.forEach((t, o) => {
+      t.setAttribute("index", o.toString()), this.direction === "vertical" ? t.setAttribute("round", "") : t.removeAttribute("round"), o === s.length - 1 && t.setAttribute("last", "");
     });
   }
   render() {
-    return h`<div
-      class=${v({
+    return d`<div class=${v({
       stepper: !0,
       "stepper--vertical": this.direction === "vertical"
-    })}
-      style=${g({
+    })} style=${w({
       "--columns": Math.max(this.itemsPerRow, 1).toString()
-    })}
-    >
-      <slot name="step" @slotchange=${this.handleSlotChange}></slot>
-    </div>`;
+    })}><slot name="step" @slotchange=${this.handleSlotChange}></slot></div>`;
   }
 };
 e.styles = [m, y];
 e.dependencies = {
-  "cx-step": w
+  "cx-step": g
 };
 i([
   x('slot[name="step"]')

package/library/components/switch.js

@@ -1,6 +1,6 @@
 import { n as r, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "../chunks/component.styles.DMSLciL5.js";
-import { f } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { c as m } from "../chunks/component.styles.CRO4Odto.js";
+import { f } from "../chunks/form-control.styles.CaGWmeAS.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as w } from "../chunks/default-value.COZopaet.js";
 import { F as b } from "../chunks/form.DgwYWi0O.js";
@@ -8,220 +8,11 @@ import { H as x } from "../chunks/slot.j5oheLJC.js";
 import { w as u } from "../chunks/watch.BCJD77bD.js";
 import { i as _, x as n } from "../chunks/lit-element.jLBm65_O.js";
 import { r as g } from "../chunks/state.CSDxrqLd.js";
-import { e as k } from "../chunks/query.BBf1UFkC.js";
+import { e as y } from "../chunks/query.BBf1UFkC.js";
 import { e as d } from "../chunks/class-map.BiVq-cVR.js";
-import { o as y } from "../chunks/if-defined.BRoBj_Rp.js";
-import { l as C } from "../chunks/live.SCz6M8Gs.js";
-const z = _`
-  :host {
-    display: inline-block;
-    --thumb-color: var(--cx-color-neutral-0);
-    --thumb-offset: 4px;
-    --control-color: var(--cx-color-neutral-300);
-  }
-
-  :host([size='small']) {
-    --height: var(--cx-toggle-size-small);
-    --thumb-size: calc(var(--cx-toggle-size-small) - var(--thumb-offset));
-    --width: calc(var(--height) * 1.75);
-
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  :host([size='medium']) {
-    --height: var(--cx-toggle-size-medium);
-    --thumb-size: calc(var(--cx-toggle-size-medium) - var(--thumb-offset));
-    --width: calc(var(--height) * 1.6);
-
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  :host([size='large']) {
-    --height: var(--cx-toggle-size-large);
-    --thumb-size: calc(var(--cx-toggle-size-large) - var(--thumb-offset));
-    --width: calc(var(--height) * 1.6);
-
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .switch {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--cx-input-font-family);
-    font-size: inherit;
-    font-weight: var(--cx-input-font-weight);
-    color: var(--cx-input-label-color);
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .switch__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--width);
-    height: var(--height);
-    background-color: var(--control-color);
-    border: solid var(--cx-input-border-width) var(--control-color);
-    border-radius: var(--height);
-    transition:
-      var(--cx-transition-fast) border-color,
-      var(--cx-transition-fast) background-color;
-  }
-
-  .switch__control .switch__thumb {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    background-color: var(--thumb-color);
-    border-radius: 50%;
-    border: solid var(--cx-input-border-width) var(--control-color);
-    transition:
-      var(--cx-transition-fast) translate ease,
-      var(--cx-transition-fast) background-color,
-      var(--cx-transition-fast) border-color,
-      var(--cx-transition-fast) box-shadow;
-    transform: translateX(calc((var(--width) - var(--height)) / -2));
-  }
-  @supports (translate: 0px) {
-    .switch__control .switch__thumb {
-      translate: calc((var(--width) - var(--height)) / -2);
-      transform: none;
-    }
-  }
-
-  .switch__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: var(--control-color);
-    border-color: var(--control-color);
-  }
-
-  .switch:not(.switch--checked):not(.switch--disabled)
-    .switch__control:hover
-    .switch__thumb {
-    background-color: var(--thumb-color);
-    border-color: var(--control-color);
-  }
-
-  /* Focus */
-  .switch:not(.switch--disabled)
-    .switch__input:focus-visible
-    ~ .switch__control {
-    background-color: var(--control-color);
-    border-color: var(--control-color);
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  /* Checked */
-  .switch--checked .switch__control {
-    background-color: var(--cx-color-primary);
-    border-color: var(--cx-color-primary);
-  }
-
-  .switch--checked .switch__control .switch__thumb {
-    background-color: var(--thumb-color);
-    border-color: var(--cx-color-primary);
-    transform: translateX(calc((var(--width) - var(--height)) / 2));
-  }
-
-  @supports (translate: 0px) {
-    .switch--checked .switch__control .switch__thumb {
-      translate: calc((var(--width) - var(--height)) / 2);
-      transform: none;
-    }
-  }
-
-  /* Checked + hover */
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
-    background-color: var(--cx-color-primary-500);
-    border-color: var(--cx-color-primary-500);
-  }
-
-  .switch.switch--checked:not(.switch--disabled)
-    .switch__control:hover
-    .switch__thumb {
-    background-color: var(--thumb-color);
-    border-color: var(--cx-color-primary-500);
-  }
-
-  /* Checked + focus */
-  .switch.switch--checked:not(.switch--disabled)
-    .switch__input:focus-visible
-    ~ .switch__control {
-    background-color: var(--cx-color-primary-500);
-    border-color: var(--cx-color-primary-500);
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  /* Disabled */
-  .switch--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .switch__label {
-    display: inline-block;
-    line-height: var(--height);
-    margin-inline-start: 0.5em;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  :host([required]) .switch__label::after {
-    color: var(--cx-input-required-content-color);
-    content: var(--cx-input-required-content);
-    margin-inline-start: var(--cx-input-required-content-offset);
-  }
-
-  @media (forced-colors: active) {
-    .switch.switch--checked:not(.switch--disabled)
-      .switch__control:hover
-      .switch__thumb,
-    .switch--checked .switch__control .switch__thumb {
-      background-color: ButtonText;
-    }
-  }
-
-  .switch__icon {
-    user-select: none;
-    font-size: var(--cx-input-font-size-large);
-  }
-
-  .switch:not(.switch--checked) .switch__icon {
-    color: var(--control-color);
-  }
-
-  .switch.switch--checked .switch__icon {
-    color: var(--cx-color-primary);
-  }
-
-  :host([size='small']) .switch__icon {
-    font-size: var(--cx-font-size-x-small);
-  }
-
-  :host([size='medium']) .switch__icon {
-    font-size: var(--cx-font-size-small);
-  }
-
-  :host([size='large']) .switch__icon {
-    font-size: var(--cx-font-size-medium);
-  }
-`;
+import { o as k } from "../chunks/if-defined.BRoBj_Rp.js";
+import { l as z } from "../chunks/live.SCz6M8Gs.js";
+const C = _`:host{--thumb-color:var(--cx-color-neutral-0);--thumb-offset:4px;--control-color:var(--cx-color-neutral-300);display:inline-block}:host([size=small]){--height:var(--cx-toggle-size-small);--thumb-size:calc(var(--cx-toggle-size-small) - var(--thumb-offset));--width:calc(var(--height) * 1.75);font-size:var(--cx-input-font-size-small)}:host([size=medium]){--height:var(--cx-toggle-size-medium);--thumb-size:calc(var(--cx-toggle-size-medium) - var(--thumb-offset));--width:calc(var(--height) * 1.6);font-size:var(--cx-input-font-size-small)}:host([size=large]){--height:var(--cx-toggle-size-large);--thumb-size:calc(var(--cx-toggle-size-large) - var(--thumb-offset));--width:calc(var(--height) * 1.6);font-size:var(--cx-input-font-size-small)}.switch{font-family:var(--cx-input-font-family);font-size:inherit;font-weight:var(--cx-input-font-weight);color:var(--cx-input-label-color);vertical-align:middle;cursor:pointer;align-items:center;display:inline-flex;position:relative}.switch__control{width:var(--width);height:var(--height);background-color:var(--control-color);border:solid var(--cx-input-border-width) var(--control-color);border-radius:var(--height);transition:var(--cx-transition-fast) border-color, var(--cx-transition-fast) background-color;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--thumb-color);border:solid var(--cx-input-border-width) var(--control-color);transition:var(--cx-transition-fast) translate ease, var(--cx-transition-fast) background-color, var(--cx-transition-fast) border-color, var(--cx-transition-fast) box-shadow;transform:translateX(calc((var(--width) - var(--height)) / -2));border-radius:50%;justify-content:center;align-items:center;display:inline-flex}@supports (translate:0px){.switch__control .switch__thumb{translate:calc((var(--width) - var(--height)) / -2);transform:none}}.switch__input{opacity:0;pointer-events:none;margin:0;padding:0;position:absolute}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--control-color);border-color:var(--control-color)}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb{background-color:var(--thumb-color);border-color:var(--control-color)}.switch:not(.switch--disabled) .switch__input:focus-visible~.switch__control{background-color:var(--control-color);border-color:var(--control-color);outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.switch--checked .switch__control{background-color:var(--cx-color-primary);border-color:var(--cx-color-primary)}.switch--checked .switch__control .switch__thumb{background-color:var(--thumb-color);border-color:var(--cx-color-primary);transform:translateX(calc((var(--width) - var(--height)) / 2))}@supports (translate:0px){.switch--checked .switch__control .switch__thumb{translate:calc((var(--width) - var(--height)) / 2);transform:none}}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--cx-color-primary-500);border-color:var(--cx-color-primary-500)}.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb{background-color:var(--thumb-color);border-color:var(--cx-color-primary-500)}.switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible~.switch__control{background-color:var(--cx-color-primary-500);border-color:var(--cx-color-primary-500);outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.switch--disabled{opacity:.5;cursor:default}.switch__label{line-height:var(--height);-webkit-user-select:none;user-select:none;margin-inline-start:.5em;display:inline-block}:host([required]) .switch__label:after{color:var(--cx-input-required-content-color);content:var(--cx-input-required-content);margin-inline-start:var(--cx-input-required-content-offset)}@media (forced-colors:active){.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,.switch--checked .switch__control .switch__thumb{background-color:buttontext}}.switch__icon{user-select:none;font-size:var(--cx-input-font-size-large)}.switch:not(.switch--checked) .switch__icon{color:var(--control-color)}.switch.switch--checked .switch__icon{color:var(--cx-color-primary)}:host([size=small]) .switch__icon{font-size:var(--cx-font-size-x-small)}:host([size=medium]) .switch__icon{font-size:var(--cx-font-size-small)}:host([size=large]) .switch__icon{font-size:var(--cx-font-size-medium)}`;
 var $ = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (t, i, l, s) => {
   for (var c = s > 1 ? void 0 : s ? F(i, l) : i, a = t.length - 1, h; a >= 0; a--)
     (h = t[a]) && (c = (s ? h(i, l, c) : h(c)) || c);
@@ -306,19 +97,13 @@ let e = class extends p {
   }
   render() {
     const t = this.hasSlotController.test("help-text"), i = this.helpText ? !0 : !!t;
-    return n`
-      <div
-        class=${d({
+    return n`<div class=${d({
       "form-control": !0,
       "form-control--has-help-text": i,
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--small": this.size === "small"
-    })}
-      >
-        <label
-          part="base"
-          class=${d({
+    })}><label part="base" class=${d({
       switch: !0,
       "switch--checked": this.checked,
       "switch--disabled": this.disabled,
@@ -326,64 +111,16 @@ let e = class extends p {
       "switch--large": this.size === "large",
       "switch--medium": this.size === "medium",
       "switch--small": this.size === "small"
-    })}
-        >
-          <input
-            class="switch__input"
-            type="checkbox"
-            title=${this.title}
-            name=${this.name}
-            .value=${y(this.value)}
-            .checked=${C(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            role="switch"
-            aria-checked=${this.checked ? "true" : "false"}
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @invalid=${this.handleInvalid}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-            @keydown=${this.handleKeyDown}
-          />
-          <span part="control" class="switch__control">
-            <span part="thumb" class="switch__thumb">
-              ${this.showIcon ? this.checked ? n`<cx-icon
-                      part="checked-icon"
-                      class="switch__icon"
-                      name="check"
-                    ></cx-icon>` : n`<cx-icon
-                      part="unchecked-icon"
-                      class="switch__icon"
-                      name="close"
-                    ></cx-icon>` : ""}
-            </span>
-          </span>
-
-          <div part="label" class="switch__label">
-            <slot></slot>
-          </div>
-        </label>
-
-        <div
-          aria-hidden=${i ? "false" : "true"}
-          class="form-control__help-text"
-          id="help-text"
-          part="form-control-help-text"
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
+    })}><input class="switch__input" type="checkbox" title=${this.title} name=${this.name} .value=${k(this.value)} .checked=${z(this.checked)} .disabled=${this.disabled} .required=${this.required} role="switch" aria-checked=${this.checked ? "true" : "false"} @click=${this.handleClick} @input=${this.handleInput} @invalid=${this.handleInvalid} @blur=${this.handleBlur} @focus=${this.handleFocus} @keydown=${this.handleKeyDown}><span part="control" class="switch__control"><span part="thumb" class="switch__thumb">${this.showIcon ? this.checked ? n`<cx-icon part="checked-icon" class="switch__icon" name="check"></cx-icon>` : n`<cx-icon part="unchecked-icon" class="switch__icon" name="close"></cx-icon>` : ""}</span></span><div part="label" class="switch__label"><slot></slot></div></label><div aria-hidden=${i ? "false" : "true"} class="form-control__help-text" id="help-text" part="form-control-help-text"><slot name="help-text">${this.helpText}</slot></div></div>`;
   }
 };
 e.styles = [
   m,
   f,
-  z
+  C
 ];
 o([
-  k('input[type="checkbox"]')
+  y('input[type="checkbox"]')
 ], e.prototype, "input", 2);
 o([
   g()

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C as A } from "../chunks/tab-group.Dg6a82ei.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as A } from "../chunks/tab-group.9HbDE1AF.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/scroll.xtO5yojm.js";
@@ -18,9 +18,9 @@ import "../chunks/guard.D4axKaMo.js";
 import "../chunks/map.D8heArFD.js";
 import "../chunks/style-map.llVFPd__.js";
 import "../chunks/when.Dr1es41R.js";
-import "../chunks/button.DS64Tr8Z.js";
+import "../chunks/button.B-ktz-w4.js";
 import "./dropdown.js";
-import "../chunks/icon-button.C3eqeQl9.js";
+import "../chunks/icon-button.BuhCp--_.js";
 import "./menu.js";
 import "./menu-item.js";
 import "./tab.js";

package/library/components/tab-panel.js

@@ -1,32 +1,10 @@
 import { n as p, C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as h } from "../chunks/component.styles.DMSLciL5.js";
+import { c as h } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as d } from "../chunks/watch.BCJD77bD.js";
 import { i as v, x as f } from "../chunks/lit-element.jLBm65_O.js";
 import { e as u } from "../chunks/class-map.BiVq-cVR.js";
-const b = v`
-  :host {
-    --padding: 0;
-
-    display: none;
-  }
-
-  ::slotted(cx-column) {
-    padding: var(--cx-spacing-3x-small);
-    min-height: max(var(--min-height), 24px);
-    max-height: var(--max-height, 100%);
-    overflow: auto;
-  }
-
-  :host([active]) {
-    display: block;
-  }
-
-  .tab-panel {
-    display: block;
-    padding: var(--padding);
-  }
-`;
+const b = v`:host{--padding:0;display:none}::slotted(cx-column){padding:var(--cx-spacing-3x-small);min-height:max(var(--min-height), 24px);max-height:var(--max-height,100%);overflow:auto}:host([active]){display:block}.tab-panel{padding:var(--padding);display:block}`;
 var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (l, a, i, r) => {
   for (var t = r > 1 ? void 0 : r ? g(a, i) : a, o = l.length - 1, n; o >= 0; o--)
     (n = l[o]) && (t = (r ? n(a, i, t) : n(t)) || t);
@@ -43,15 +21,10 @@ let y = 0, e = class extends c {
     this.setAttribute("aria-hidden", this.active ? "false" : "true");
   }
   render() {
-    return f`
-      <slot
-        part="base"
-        class=${u({
+    return f`<slot part="base" class=${u({
       "tab-panel": !0,
       "tab-panel--active": this.active
-    })}
-      ></slot>
-    `;
+    })}></slot>`;
   }
 };
 e.styles = [h, b];