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

package/library/components/tab.js

@@ -1,221 +1,15 @@
 import { n as a, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as u } from "../chunks/component.styles.DMSLciL5.js";
+import { c as u } from "../chunks/component.styles.CRO4Odto.js";
 import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as x } from "../chunks/i18n.C0iakJkV.js";
+import { L as x } from "../chunks/i18n.BFqTRDCA.js";
 import { H as f } from "../chunks/slot.j5oheLJC.js";
-import { w as p } from "../chunks/watch.q1sEjPWL.js";
+import { w as p } from "../chunks/watch.BCJD77bD.js";
 import { i as b, x as d } from "../chunks/lit-element.jLBm65_O.js";
 import { e as _ } from "../chunks/query.BBf1UFkC.js";
 import { e as n } from "../chunks/class-map.BiVq-cVR.js";
-import g from "./icon-button.js";
+import { C as g } from "../chunks/icon-button.rKe0N4VB.js";
 import y from "./line-clamp.js";
-const w = b`
-  .tab {
-    display: inline-flex;
-    align-items: center;
-    border-radius: var(--cx-border-radius-small);
-    padding: var(--tab-padding, var(--cx-spacing-x-small));
-    font: var(--cx-font-label-small);
-    font-weight: var(--cx-font-weight-medium);
-    white-space: nowrap;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: pointer;
-    transition:
-      var(--transition-speed) box-shadow,
-      var(--transition-speed) color;
-    max-width: var(--tab-max-width, none);
-  }
-
-  .tab__label {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .tab__label::part(content) {
-    word-break: break-all;
-  }
-
-  .tab.tab--default {
-    color: var(--tab-color, var(--cx-color-neutral-700));
-    background-color: var(--tab-background-color, transparent);
-  }
-
-  .tab.tab--button {
-    color: var(--tab-color, var(--cx-color-neutral-600));
-    background-color: var(--tab-background-color, transparent);
-    border-radius: var(--tab-border-radius, 10px);
-  }
-
-  .tab.tab.tab--default:hover:not(.tab--disabled) {
-    color: var(--cx-color-primary);
-  }
-
-  .tab.tab.tab--button:hover:not(.tab--disabled):not(.tab--active) {
-    color: var(--cx-color-neutral-800);
-  }
-
-  .tab.tab--default.tab--active:not(.tab--disabled) {
-    color: var(--tab-active-color, var(--cx-color-primary));
-    background-color: var(--tab-active-background-color, transparent);
-  }
-
-  .tab.tab--button.tab--active:not(.tab--disabled) {
-    background-color: var(
-      --tab-active-background-color,
-      var(--cx-color-neutral-200)
-    );
-    color: var(--tab-active-color, var(--cx-color-neutral-800));
-  }
-
-  .tab.tab--closable {
-    padding-inline-end: var(--cx-spacing-small);
-  }
-
-  .tab.tab--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .tab__close-button {
-    font-size: var(--cx-font-size-small);
-    margin-inline-start: var(--cx-spacing-small);
-  }
-
-  .tab__close-button::part(base) {
-    padding: var(--cx-spacing-3x-small);
-  }
-
-  @media (forced-colors: active) {
-    .tab.tab--active:not(.tab--disabled) {
-      outline: solid 1px transparent;
-      outline-offset: -3px;
-    }
-  }
-`, k = b`
-  .timeline-item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cx-spacing-small);
-    font-family: var(--cx-font-sans);
-    font-size: var(--timeline-item-font-size, var(--cx-font-size-small));
-    font-weight: var(--cx-font-weight-regular);
-    border-radius: var(--cx-border-radius-small);
-    padding: var(
-      --tab-padding,
-      var(--cx-spacing-x-small) var(--cx-spacing-small)
-    );
-    white-space: nowrap;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: pointer;
-    transition:
-      var(--transition-speed) box-shadow,
-      var(--transition-speed) color;
-    max-width: var(--tab-max-width, none);
-    position: relative;
-  }
-
-  .timeline-item--single {
-    align-items: center;
-  }
-
-  .timeline-item__content {
-    --timeline-item-content-width: var(--min-tab-width);
-
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: var(--cx-spacing-x-large);
-    position: relative;
-    left: calc(
-      var(--i) / (var(--n) - 1) *
-      (100% - var(--timeline-item-content-width))
-    );
-    transition: left 400ms linear;
-    width: var(--timeline-item-content-width);
-  }
-
-  .timeline-item__label {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .timeline-item__label::part(content) {
-    word-break: break-all;
-  }
-
-  .timeline-item {
-    color: var(--marker-color, var(--cx-color-neutral-700));
-    background-color: var(--tab-background-color, transparent);
-  }
-
-  .timeline-item.timeline-item--active:not(.timeline-item--disabled),
-  :host(:hover) .timeline-item:not(.timeline-item--disabled) {
-    color: var(--marker-active-color, var(--cx-color-primary));
-  }
-
-  .timeline-item.timeline-item--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  @media (forced-colors: active) {
-    .timeline-item.timeline-item--active:not(.timeline-item--disabled) {
-      outline: solid 1px transparent;
-      outline-offset: -3px;
-    }
-  }
-
-  .timeline-item__thumbnail {
-    width: var(--marker-image-width, 120px);
-    height: var(--marker-image-height, 100px);
-    max-width: 100%;
-    overflow: hidden;
-    display: block;
-    border-radius: var(--marker-image-border-radius, var(--cx-border-radius-small));
-  }
-
-  .timeline-item.timeline-item--active:not(.timeline-item--disabled)
-    .timeline-item__thumbnail:not(.timeline-item__thumbnail--empty),
-  :host(:hover) .timeline-item:not(.timeline-item--disabled)
-    .timeline-item__thumbnail:not(.timeline-item__thumbnail--empty) {
-    outline: 4px solid var(--marker-active-color, var(--cx-color-primary));
-  }
-
-  .timeline-item__thumbnail.timeline-item__thumbnail--empty {
-    display: none;
-  }
-
-  .timeline-item__thumbnail::slotted(img) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .timeline-item__indicator {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    isolation: isolate;
-  }
-
-  .timeline-item__indicator__dot {
-    width: var(--cx-spacing-small);
-    height: var(--cx-spacing-small);
-    border-radius: var(--cx-border-radius-circle);
-    background-color: var(--marker-color);
-    display: block;
-    z-index: 1;
-  }
-
-  .timeline-item__indicator__dot--active:not(.timeline-item__indicator__dot--disabled),
-  :host(:hover) .timeline-item__indicator__dot:not(.timeline-item__indicator__dot--disabled) {
-    background-color: var(--marker-active-color);
-  }
-`, C = b`
+const w = b`.tab{border-radius:var(--cx-border-radius-small);padding:var(--tab-padding,var(--cx-spacing-x-small));font:var(--cx-font-label-small);font-weight:var(--cx-font-weight-medium);white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;transition:var(--transition-speed) box-shadow, var(--transition-speed) color;max-width:var(--tab-max-width,none);align-items:center;display:inline-flex}.tab__label{flex:auto;min-width:0}.tab__label::part(content){word-break:break-all}.tab.tab--default{color:var(--tab-color,var(--cx-color-neutral-700));background-color:var(--tab-background-color,transparent)}.tab.tab--button{color:var(--tab-color,var(--cx-color-neutral-600));background-color:var(--tab-background-color,transparent);border-radius:var(--tab-border-radius,10px)}.tab.tab.tab--default:hover:not(.tab--disabled){color:var(--cx-color-primary)}.tab.tab.tab--button:hover:not(.tab--disabled):not(.tab--active){color:var(--cx-color-neutral-800)}.tab.tab--default.tab--active:not(.tab--disabled){color:var(--tab-active-color,var(--cx-color-primary));background-color:var(--tab-active-background-color,transparent)}.tab.tab--button.tab--active:not(.tab--disabled){background-color:var(--tab-active-background-color,var(--cx-color-neutral-200));color:var(--tab-active-color,var(--cx-color-neutral-800))}.tab.tab--closable{padding-inline-end:var(--cx-spacing-small)}.tab.tab--disabled{opacity:.5;cursor:default}.tab__close-button{font-size:var(--cx-font-size-small);margin-inline-start:var(--cx-spacing-small)}.tab__close-button::part(base){padding:var(--cx-spacing-3x-small)}@media (forced-colors:active){.tab.tab--active:not(.tab--disabled){outline-offset:-3px;outline:1px solid #0000}}`, k = b`.timeline-item{gap:var(--cx-spacing-small);font-family:var(--cx-font-sans);font-size:var(--timeline-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-font-weight-regular);border-radius:var(--cx-border-radius-small);padding:var(--tab-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;transition:var(--transition-speed) box-shadow, var(--transition-speed) color;max-width:var(--tab-max-width,none);flex-direction:column;display:flex;position:relative}.timeline-item--single{align-items:center}.timeline-item__content{--timeline-item-content-width:var(--min-tab-width);align-items:center;gap:var(--cx-spacing-x-large);left:calc(var(--i) / (var(--n) - 1) * (100% - var(--timeline-item-content-width)));width:var(--timeline-item-content-width);flex-direction:column;transition:left .4s linear;display:flex;position:relative}.timeline-item__label{flex:auto;min-width:0}.timeline-item__label::part(content){word-break:break-all}.timeline-item{color:var(--marker-color,var(--cx-color-neutral-700));background-color:var(--tab-background-color,transparent)}.timeline-item.timeline-item--active:not(.timeline-item--disabled),:host(:hover) .timeline-item:not(.timeline-item--disabled){color:var(--marker-active-color,var(--cx-color-primary))}.timeline-item.timeline-item--disabled{opacity:.5;cursor:default}@media (forced-colors:active){.timeline-item.timeline-item--active:not(.timeline-item--disabled){outline-offset:-3px;outline:1px solid #0000}}.timeline-item__thumbnail{width:var(--marker-image-width,120px);height:var(--marker-image-height,100px);border-radius:var(--marker-image-border-radius,var(--cx-border-radius-small));max-width:100%;display:block;overflow:hidden}.timeline-item.timeline-item--active:not(.timeline-item--disabled) .timeline-item__thumbnail:not(.timeline-item__thumbnail--empty),:host(:hover) .timeline-item:not(.timeline-item--disabled) .timeline-item__thumbnail:not(.timeline-item__thumbnail--empty){outline:4px solid var(--marker-active-color,var(--cx-color-primary))}.timeline-item__thumbnail.timeline-item__thumbnail--empty{display:none}.timeline-item__thumbnail::slotted(img){object-fit:cover;width:100%;height:100%}.timeline-item__indicator{isolation:isolate;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.timeline-item__indicator__dot{width:var(--cx-spacing-small);height:var(--cx-spacing-small);border-radius:var(--cx-border-radius-circle);background-color:var(--marker-color);z-index:1;display:block}.timeline-item__indicator__dot--active:not(.timeline-item__indicator__dot--disabled),:host(:hover) .timeline-item__indicator__dot:not(.timeline-item__indicator__dot--disabled){background-color:var(--marker-active-color)}`, C = b`
   :host {
     display: inline-block;
     flex: 0 0 auto;
@@ -262,68 +56,28 @@ let I = 0, t = class extends v {
     this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.disabled && !this.active ? this.tabIndex = -1 : this.tabIndex = 0;
   }
   renderNormalTab(i) {
-    return d`
-      <div
-        part="base"
-        class=${n({
+    return d`<div part="base" class=${n({
       tab: !0,
       "tab--active": this.active,
       "tab--closable": this.closable,
       "tab--disabled": this.disabled,
       [`tab--${i}`]: !0
-    })}
-      >
-        <cx-line-clamp part="label" class="tab__label" lines="1">
-          <slot></slot>
-        </cx-line-clamp>
-        ${this.closable ? d`
-              <cx-icon-button
-                part="close-button"
-                exportparts="base:close-button__base"
-                name="close"
-                label=${this.localize.term("close")}
-                class="tab__close-button"
-                @click=${this.handleCloseClick}
-                tabindex="-1"
-              ></cx-icon-button>
-            ` : ""}
-      </div>
-    `;
+    })}><cx-line-clamp part="label" class="tab__label" lines="1"><slot></slot></cx-line-clamp>${this.closable ? d`<cx-icon-button part="close-button" exportparts="base:close-button__base" name="close" label=${this.localize.term("close")} class="tab__close-button" @click=${this.handleCloseClick} tabindex="-1"></cx-icon-button>` : ""}</div>`;
   }
   renderTimelineTab() {
-    return d`
-      <div
-        part="base"
-        class=${n({
+    return d`<div part="base" class=${n({
       "timeline-item": !0,
       "timeline-item--active": this.active,
       "timeline-item--disabled": this.disabled,
       "timeline-item--single": this.single
-    })}
-      >
-        <div class="timeline-item__content">
-          <div class="timeline-item__indicator">
-            <div
-              class=${n({
+    })}><div class="timeline-item__content"><div class="timeline-item__indicator"><div class=${n({
       "timeline-item__indicator__dot": !0,
       "timeline-item__indicator__dot--active": this.active,
       "timeline-item__indicator__dot--disabled": this.disabled
-    })}
-            ></div>
-          </div>
-          <cx-line-clamp part="label" class="timeline-item__label" lines="1">
-            <slot></slot>
-          </cx-line-clamp>
-          <slot
-            name="thumbnail"
-            class=${n({
+    })}></div></div><cx-line-clamp part="label" class="timeline-item__label" lines="1"><slot></slot></cx-line-clamp><slot name="thumbnail" class=${n({
       "timeline-item__thumbnail": !0,
       "timeline-item__thumbnail--empty": !this.hasSlotController.test("thumbnail")
-    })}
-          ></slot>
-        </div>
-      </div>
-    `;
+    })}></slot></div></div>`;
   }
   render() {
     this.id = this.id.length > 0 ? this.id : this.componentId;

package/library/components/table.js

@@ -1,19 +1,19 @@
-import "../chunks/button.KnE3mcyM.js";
+import "../chunks/button.CauAHfdl.js";
 import "./checkbox.js";
 import "./divider.js";
 import "./format-number.js";
-import "./icon-button.js";
+import "../chunks/icon-button.rKe0N4VB.js";
 import "./select.js";
 import "./space.js";
 import "./spinner.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import "../chunks/overlayscrollbars.XhGWx9Zk.js";
-import "../chunks/pagination.C30LoTya.js";
-import { A as F, i as P, j as S, d as g, g as v, b as y, k as A, l as D, c as I, a0 as f, a1 as h, D as E, m as G, E as j, n as H, F as K, o as L, p as V, q as k, G as q, r as B, s as J, t as N, I as O, u as Q, K as U, v as W, M as X, w as Y, x as Z, y as _, z as $, B as oo, J as eo, L as ao, P as so, e as lo, N as to, h as uo, O as ro, Q as Mo, U as io, V as po, f as mo, R as no, X as Co, W as Ro, S as co, Y as bo, Z as wo, T as To, a as xo, _ as zo, $ as Fo, C as Po } from "../chunks/table.DNTm_GMS.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import "../chunks/overlayscrollbars.BMav4RQ4.js";
+import "../chunks/pagination.DaD9Yul6.js";
+import { A as F, i as P, j as S, d as g, g as v, b as y, k as A, l as D, c as I, a0 as f, a1 as h, D as E, m as G, E as j, n as H, F as K, o as L, p as V, q as k, G as q, r as B, s as J, t as N, I as O, u as Q, K as U, v as W, M as X, w as Y, x as Z, y as _, z as $, B as oo, J as eo, L as ao, P as so, e as lo, N as to, h as uo, O as ro, Q as Mo, U as io, V as po, f as mo, R as no, X as Co, W as Ro, S as co, Y as bo, Z as wo, T as To, a as xo, _ as zo, $ as Fo, C as Po } from "../chunks/table.WNd284in.js";
 import "../chunks/custom-element.L4WJXn1j.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/tag.js

@@ -1,147 +1,16 @@
-import { n as i, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.DMSLciL5.js";
+import { n as c, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as p } from "../chunks/component.styles.CRO4Odto.js";
 import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as v } from "../chunks/i18n.C0iakJkV.js";
+import { L as v } from "../chunks/i18n.BFqTRDCA.js";
 import { i as d, x as g } from "../chunks/lit-element.jLBm65_O.js";
 import { e as x } from "../chunks/class-map.BiVq-cVR.js";
-import h from "./icon-button.js";
+import { C as h } from "../chunks/icon-button.rKe0N4VB.js";
 import b from "./line-clamp.js";
-const f = d`
-  :host {
-    display: inline-block;
-  }
-
-  .tag {
-    display: flex;
-    align-items: center;
-    border: solid 1px;
-    line-height: 1;
-    white-space: nowrap;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .tag__remove::part(base) {
-    color: inherit;
-    padding: 0;
-  }
-
-  /*
-   * Variant modifiers
-   */
-
-  .tag--primary {
-    background-color: var(--cx-color-primary-50);
-    border-color: var(--cx-color-primary-300);
-    color: var(--cx-color-primary-800);
-  }
-
-  .tag--primary:active > cx-icon-button {
-    color: var(--cx-color-primary);
-  }
-
-  .tag--success {
-    background-color: var(--cx-color-success-50);
-    border-color: var(--cx-color-success-200);
-    color: var(--cx-color-success-800);
-  }
-
-  .tag--success:active > cx-icon-button {
-    color: var(--cx-color-success);
-  }
-
-  .tag--neutral {
-    background-color: var(--cx-color-neutral-50);
-    border-color: var(--cx-color-neutral-200);
-    color: var(--cx-color-neutral-800);
-  }
-
-  .tag--neutral:active > cx-icon-button {
-    color: var(--cx-color-neutral-600);
-  }
-
-  .tag--warning {
-    background-color: var(--cx-color-warning-50);
-    border-color: var(--cx-color-warning-200);
-    color: var(--cx-color-warning-800);
-  }
-
-  .tag--warning:active > cx-icon-button {
-    color: var(--cx-color-warning);
-  }
-
-  .tag--danger {
-    background-color: var(--cx-color-danger-50);
-    border-color: var(--cx-color-danger-200);
-    color: var(--cx-color-danger-800);
-  }
-
-  .tag--danger:active > cx-icon-button {
-    color: var(--cx-color-danger);
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .tag--small {
-    font-size: var(--cx-button-font-size-small);
-    height: calc(var(--cx-input-height-small) * 0.8);
-    line-height: calc(
-      var(--cx-input-height-small) - var(--cx-input-border-width) * 2
-    );
-    border-radius: var(--cx-input-border-radius-small);
-    padding: 0 var(--cx-spacing-x-small);
-  }
-
-  .tag--medium {
-    font-size: var(--cx-button-font-size-medium);
-    height: calc(var(--cx-input-height-medium) * 0.8);
-    line-height: calc(
-      var(--cx-input-height-medium) - var(--cx-input-border-width) * 2
-    );
-    border-radius: var(--cx-input-border-radius-medium);
-    padding: 0 var(--cx-spacing-small);
-  }
-
-  .tag--large {
-    font-size: var(--cx-button-font-size-large);
-    height: calc(var(--cx-input-height-large) * 0.8);
-    line-height: calc(
-      var(--cx-input-height-large) - var(--cx-input-border-width) * 2
-    );
-    border-radius: var(--cx-input-border-radius-large);
-    padding: 0 var(--cx-spacing-medium);
-  }
-
-  .tag--small .tag__remove::part(icon) {
-    --font-size: var(--cx-font-size-small);
-  }
-
-  .tag--medium .tag__remove::part(icon) {
-    --font-size: var(--cx-font-size-medium);
-  }
-
-  .tag--large .tag__remove::part(icon) {
-    --font-size: var(--cx-font-size-large);
-  }
-
-  /*
-   * Pill modifier
-   */
-
-  .tag--pill {
-    border-radius: var(--cx-border-radius-pill);
-  }
-
-  .tag--removable {
-    padding-inline-end: 0;
-  }
-`;
-var z = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, t, c, o) => {
-  for (var a = o > 1 ? void 0 : o ? _(t, c) : t, l = s.length - 1, n; l >= 0; l--)
-    (n = s[l]) && (a = (o ? n(t, c, a) : n(a)) || a);
-  return o && a && z(t, c, a), a;
+const f = d`:host{display:inline-block}.tag{white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid;align-items:center;line-height:1;display:flex}.tag__remove::part(base){color:inherit;padding:0}.tag--primary{background-color:var(--cx-color-primary-50);border-color:var(--cx-color-primary-300);color:var(--cx-color-primary-800)}.tag--primary:active>cx-icon-button{color:var(--cx-color-primary)}.tag--success{background-color:var(--cx-color-success-50);border-color:var(--cx-color-success-200);color:var(--cx-color-success-800)}.tag--success:active>cx-icon-button{color:var(--cx-color-success)}.tag--neutral{background-color:var(--cx-color-neutral-50);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral-800)}.tag--neutral:active>cx-icon-button{color:var(--cx-color-neutral-600)}.tag--warning{background-color:var(--cx-color-warning-50);border-color:var(--cx-color-warning-200);color:var(--cx-color-warning-800)}.tag--warning:active>cx-icon-button{color:var(--cx-color-warning)}.tag--danger{background-color:var(--cx-color-danger-50);border-color:var(--cx-color-danger-200);color:var(--cx-color-danger-800)}.tag--danger:active>cx-icon-button{color:var(--cx-color-danger)}.tag--small{font-size:var(--cx-button-font-size-small);height:calc(var(--cx-input-height-small) * .8);line-height:calc(var(--cx-input-height-small) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-small);padding:0 var(--cx-spacing-x-small)}.tag--medium{font-size:var(--cx-button-font-size-medium);height:calc(var(--cx-input-height-medium) * .8);line-height:calc(var(--cx-input-height-medium) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-medium);padding:0 var(--cx-spacing-small)}.tag--large{font-size:var(--cx-button-font-size-large);height:calc(var(--cx-input-height-large) * .8);line-height:calc(var(--cx-input-height-large) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-large);padding:0 var(--cx-spacing-medium)}.tag--small .tag__remove::part(icon){--font-size:var(--cx-font-size-small)}.tag--medium .tag__remove::part(icon){--font-size:var(--cx-font-size-medium)}.tag--large .tag__remove::part(icon){--font-size:var(--cx-font-size-large)}.tag--pill{border-radius:var(--cx-border-radius-pill)}.tag--removable{padding-inline-end:0}`;
+var z = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? _(t, i) : t, l = s.length - 1, n; l >= 0; l--)
+    (n = s[l]) && (a = (o ? n(t, i, a) : n(a)) || a);
+  return o && a && z(t, i, a), a;
 };
 let r = class extends m {
   constructor() {
@@ -151,10 +20,7 @@ let r = class extends m {
     this.emit("cx-remove");
   }
   render() {
-    return g`
-      <span
-        part="base"
-        class=${x({
+    return g`<span part="base" class=${x({
       tag: !0,
       "tag--danger": this.variant === "danger",
       "tag--large": this.size === "large",
@@ -169,24 +35,7 @@ let r = class extends m {
       "tag--success": this.variant === "success",
       "tag--text": this.variant === "text",
       "tag--warning": this.variant === "warning"
-    })}
-      >
-        <cx-line-clamp class="tag__content" lines="1">
-          <slot part="content"></slot>
-        </cx-line-clamp>
-        ${this.removable ? g`
-              <cx-icon-button
-                part="remove-button"
-                exportparts="base:remove-button__base"
-                name="close"
-                label=${this.localize.term("remove")}
-                class="tag__remove"
-                @click=${this.handleRemoveClick}
-                tabindex="-1"
-              ></cx-icon-button>
-            ` : ""}
-      </span>
-    `;
+    })}><cx-line-clamp class="tag__content" lines="1"><slot part="content"></slot></cx-line-clamp>${this.removable ? g`<cx-icon-button part="remove-button" exportparts="base:remove-button__base" name="close" label=${this.localize.term("remove")} class="tag__remove" @click=${this.handleRemoveClick} tabindex="-1"></cx-icon-button>` : ""}</span>`;
   }
 };
 r.styles = [p, f];
@@ -195,16 +44,16 @@ r.dependencies = {
   "cx-line-clamp": b
 };
 e([
-  i({ reflect: !0 })
+  c({ reflect: !0 })
 ], r.prototype, "variant", 2);
 e([
-  i({ reflect: !0 })
+  c({ reflect: !0 })
 ], r.prototype, "size", 2);
 e([
-  i({ reflect: !0, type: Boolean })
+  c({ reflect: !0, type: Boolean })
 ], r.prototype, "pill", 2);
 e([
-  i({ type: Boolean })
+  c({ type: Boolean })
 ], r.prototype, "removable", 2);
 r = e([
   u("cx-tag")