@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/breadcrumb-item.js

@@ -1,103 +1,20 @@
-import { n as p, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as d } from "../chunks/component.styles.DMSLciL5.js";
-import { c as f } from "../chunks/custom-element.L4WJXn1j.js";
+import { n as p, C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as f } from "../chunks/component.styles.CRO4Odto.js";
+import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
 import { H as h } from "../chunks/slot.j5oheLJC.js";
 import { w as u } from "../chunks/watch.BCJD77bD.js";
-import { i as x, x as s } from "../chunks/lit-element.jLBm65_O.js";
+import { i as x, x as o } from "../chunks/lit-element.jLBm65_O.js";
 import { r as _ } from "../chunks/state.CSDxrqLd.js";
 import { e as g } from "../chunks/query.BBf1UFkC.js";
 import { e as y } from "../chunks/class-map.BiVq-cVR.js";
-import { o as c } from "../chunks/if-defined.BRoBj_Rp.js";
-const v = x`
-  :host {
-    display: inline-flex;
-  }
-
-  .breadcrumb-item {
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-small);
-    font-weight: var(--cx-font-weight-semibold);
-    color: var(--cx-color-neutral);
-    line-height: var(--cx-line-height-large);
-    white-space: nowrap;
-  }
-
-  .breadcrumb-item__label {
-    display: inline-block;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-decoration: none;
-    color: inherit;
-    background: none;
-    border: none;
-    border-radius: var(--cx-border-radius-small);
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    transition: var(--cx-transition-fast) --color;
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label {
-    color: var(--cx-color-primary);
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: var(--cx-color-primary);
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
-    color: var(--cx-color-primary);
-  }
-
-  .breadcrumb-item__label:focus {
-    outline: none;
-  }
-
-  .breadcrumb-item__label:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .breadcrumb-item__prefix,
-  .breadcrumb-item__suffix {
-    display: none;
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
-    display: inline-flex;
-    margin-inline-end: var(--cx-spacing-x-small);
-  }
-
-  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
-    display: inline-flex;
-    margin-inline-start: var(--cx-spacing-x-small);
-  }
-
-  :host(:last-of-type) .breadcrumb-item__separator {
-    display: none;
-  }
-
-  .breadcrumb-item__separator {
-    display: inline-flex;
-    align-items: center;
-    margin: 0 var(--cx-spacing-x-small);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;
-var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, t = (i, a, l, o) => {
-  for (var r = o > 1 ? void 0 : o ? C(a, l) : a, n = i.length - 1, m; n >= 0; n--)
-    (m = i[n]) && (r = (o ? m(a, l, r) : m(r)) || r);
-  return o && r && w(a, l, r), r;
+import { o as b } from "../chunks/if-defined.BRoBj_Rp.js";
+const v = x`:host{display:inline-flex}.breadcrumb-item{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-semibold);color:var(--cx-color-neutral);line-height:var(--cx-line-height-large);white-space:nowrap;align-items:center;display:inline-flex}.breadcrumb-item__label{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;border-radius:var(--cx-border-radius-small);cursor:pointer;transition:var(--cx-transition-fast) --color;background:0 0;border:none;margin:0;padding:0;text-decoration:none;display:inline-block}:host(:not(:last-of-type)) .breadcrumb-item__label,:host(:not(:last-of-type)) .breadcrumb-item__label:hover,:host(:not(:last-of-type)) .breadcrumb-item__label:active{color:var(--cx-color-primary)}.breadcrumb-item__label:focus{outline:none}.breadcrumb-item__label:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.breadcrumb-item__prefix,.breadcrumb-item__suffix{flex:none;align-items:center;display:flex}.breadcrumb-item--has-prefix .breadcrumb-item__prefix{margin-inline-end:var(--cx-spacing-x-small);display:inline-flex}.breadcrumb-item--has-suffix .breadcrumb-item__suffix{margin-inline-start:var(--cx-spacing-x-small);display:inline-flex}:host(:last-of-type) .breadcrumb-item__separator{display:none}.breadcrumb-item__separator{margin:0 var(--cx-spacing-x-small);-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex}`;
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (i, a, l, s) => {
+  for (var t = s > 1 ? void 0 : s ? C(a, l) : a, n = i.length - 1, m; n >= 0; n--)
+    (m = i[n]) && (t = (s ? m(a, l, t) : m(t)) || t);
+  return s && t && w(a, l, t), t;
 };
-let e = class extends b {
+let e = class extends c {
   constructor() {
     super(...arguments), this.hasSlotController = new h(
       this,
@@ -124,84 +41,36 @@ let e = class extends b {
     this.setRenderType();
   }
   render() {
-    return s`
-      <div
-        part="base"
-        class=${y({
+    return o`<div part="base" class=${y({
       "breadcrumb-item": !0,
       "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
       "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
-    })}
-      >
-        <span part="prefix" class="breadcrumb-item__prefix">
-          <slot name="prefix"></slot>
-        </span>
-
-        ${this.renderType === "link" ? s`
-              <a
-                part="label"
-                class="breadcrumb-item__label breadcrumb-item__label--link"
-                href=${this.href}
-                target=${c(this.target ? this.target : void 0)}
-                rel=${c(this.target ? this.rel : void 0)}
-              >
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </a>
-            ` : ""}
-        ${this.renderType === "button" ? s`
-              <button
-                part="label"
-                type="button"
-                class="breadcrumb-item__label breadcrumb-item__label--button"
-              >
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </button>
-            ` : ""}
-        ${this.renderType === "dropdown" ? s`
-              <div
-                part="label"
-                class="breadcrumb-item__label breadcrumb-item__label--drop-down"
-              >
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </div>
-            ` : ""}
-
-        <span part="suffix" class="breadcrumb-item__suffix">
-          <slot name="suffix"></slot>
-        </span>
-
-        <span
-          part="separator"
-          class="breadcrumb-item__separator"
-          aria-hidden="true"
-        >
-          <slot name="separator"></slot>
-        </span>
-      </div>
-    `;
+    })}><span part="prefix" class="breadcrumb-item__prefix"><slot name="prefix"></slot></span>${this.renderType === "link" ? o`<a part="label" class="breadcrumb-item__label breadcrumb-item__label--link" href=${this.href} target=${b(this.target ? this.target : void 0)} rel=${b(this.target ? this.rel : void 0)}><slot @slotchange=${this.handleSlotChange}></slot></a>` : ""}
+        ${this.renderType === "button" ? o`<button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button"><slot @slotchange=${this.handleSlotChange}></slot></button>` : ""}
+        ${this.renderType === "dropdown" ? o`<div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down"><slot @slotchange=${this.handleSlotChange}></slot></div>` : ""}<span part="suffix" class="breadcrumb-item__suffix"><slot name="suffix"></slot></span><span part="separator" class="breadcrumb-item__separator" aria-hidden="true"><slot name="separator"></slot></span></div>`;
   }
 };
-e.styles = [d, v];
-t([
+e.styles = [f, v];
+r([
   g("slot:not([name])")
 ], e.prototype, "defaultSlot", 2);
-t([
+r([
   _()
 ], e.prototype, "renderType", 2);
-t([
+r([
   p()
 ], e.prototype, "href", 2);
-t([
+r([
   p()
 ], e.prototype, "target", 2);
-t([
+r([
   p()
 ], e.prototype, "rel", 2);
-t([
+r([
   u("href", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "hrefChanged", 1);
-e = t([
-  f("cx-breadcrumb-item")
+e = r([
+  d("cx-breadcrumb-item")
 ], e);
 export {
   e as default

package/library/components/breadcrumb.js

@@ -1,17 +1,11 @@
 import { n as p, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as d } from "../chunks/component.styles.DMSLciL5.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as u } from "../chunks/i18n.BUW7B9hr.js";
 import { i as f, x as b } from "../chunks/lit-element.jLBm65_O.js";
 import { e as c } from "../chunks/query.BBf1UFkC.js";
 import g from "./icon.js";
-const S = f`
-  .breadcrumb {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-`;
+const S = f`.breadcrumb{flex-wrap:wrap;align-items:center;display:flex}`;
 var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (s, e, r, t) => {
   for (var a = t > 1 ? void 0 : t ? v(e, r) : e, i = s.length - 1, n; i >= 0; i--)
     (n = s[i]) && (a = (t ? n(e, r, a) : n(a)) || a);
@@ -42,19 +36,7 @@ let o = class extends h {
     });
   }
   render() {
-    return this.separatorDir !== this.localize.dir() && (this.separatorDir = this.localize.dir(), this.updateComplete.then(() => this.handleSlotChange())), b`
-      <nav part="base" class="breadcrumb" aria-label=${this.label}>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </nav>
-
-      <span hidden aria-hidden="true" style="display: none">
-        <slot name="separator" @slotchange=${this.handleSlotChange}>
-          <cx-icon
-            name=${this.localize.dir() === "rtl" ? "chevron_left" : "chevron_right"}
-          ></cx-icon>
-        </slot>
-      </span>
-    `;
+    return this.separatorDir !== this.localize.dir() && (this.separatorDir = this.localize.dir(), this.updateComplete.then(() => this.handleSlotChange())), b`<nav part="base" class="breadcrumb" aria-label=${this.label}><slot @slotchange=${this.handleSlotChange}></slot></nav><span hidden aria-hidden="true" style="display: none"><slot name="separator" @slotchange=${this.handleSlotChange}><cx-icon name=${this.localize.dir() === "rtl" ? "chevron_left" : "chevron_right"}></cx-icon></slot></span>`;
   }
 };
 o.styles = [d, S];

package/library/components/button-group.js

@@ -1,22 +1,10 @@
 import { n as i, C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
 import { c as p } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as d, x as f } from "../chunks/lit-element.jLBm65_O.js";
 import { r as h } from "../chunks/state.CSDxrqLd.js";
 import { e as x } from "../chunks/query.BBf1UFkC.js";
-const _ = d`
-  :host {
-    display: inline-block;
-  }
-
-  .button-group {
-    display: flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-    row-gap: var(--cx-spacing-x-small);
-    overflow: unset;
-  }
-`;
+const _ = d`:host{display:inline-block}.button-group{row-gap:var(--cx-spacing-x-small);overflow:hidden;overflow:unset;flex-wrap:wrap;display:flex}`;
 var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (t, o, r, e) => {
   for (var u = e > 1 ? void 0 : e ? v(o, r) : o, l = t.length - 1, b; l >= 0; l--)
     (b = t[l]) && (u = (e ? b(o, r, u) : b(u)) || u);
@@ -60,20 +48,7 @@ let n = class extends c {
     });
   }
   render() {
-    return f`
-      <div
-        part="base"
-        class="button-group"
-        role=${this.disableRole ? "presentation" : "group"}
-        aria-label=${this.label}
-        @focusout=${this.handleBlur}
-        @focusin=${this.handleFocus}
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
+    return f`<div part="base" class="button-group" role=${this.disableRole ? "presentation" : "group"} aria-label=${this.label} @focusout=${this.handleBlur} @focusin=${this.handleFocus} @mouseover=${this.handleMouseOver} @mouseout=${this.handleMouseOut}><slot @slotchange=${this.handleSlotChange}></slot></div>`;
   }
 };
 n.styles = [g, _];

package/library/components/button.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C as h } from "../chunks/button.DS64Tr8Z.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as h } from "../chunks/button.B-ktz-w4.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/form.DgwYWi0O.js";
 import "../chunks/i18n.BUW7B9hr.js";
@@ -14,7 +14,7 @@ import "../chunks/when.Dr1es41R.js";
 import "../chunks/static.UA3G1Deq.js";
 import "./icon.js";
 import "./spinner.js";
-import "../chunks/button.styles.Dl5IQLHU.js";
+import "../chunks/button.styles.CKqn956w.js";
 export {
   h as default
 };

package/library/components/card.js

@@ -1,120 +1,10 @@
 import { n as c, C as n } 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 p } from "../chunks/custom-element.L4WJXn1j.js";
 import { H as b } from "../chunks/slot.j5oheLJC.js";
 import { i as v, x as m } from "../chunks/lit-element.jLBm65_O.js";
 import { e as g } from "../chunks/class-map.BiVq-cVR.js";
-const f = v`
-  :host {
-    --border-color: var(--cx-color-neutral-200);
-    --border-radius: var(--cx-border-radius-x-large);
-    --box-shadow: var(--cx-shadow-x-small);
-    --image-border-radius: var(--cx-border-radius-x-large);
-    --border-width: 1px;
-    --padding: var(--cx-spacing-large);
-
-    display: inline-block;
-    width: var(--card-width, auto);
-    height: var(--card-height, auto);
-  }
-
-  .card {
-    display: flex;
-    flex-direction: column;
-    background-color: var(--cx-panel-background-color);
-    box-shadow: var(--box-shadow);
-    border: solid var(--border-width) var(--border-color);
-    border-radius: var(--border-radius);
-    padding: var(--padding);
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-  }
-
-  .card--interactive {
-    --border-color: var(--cx-color-primary-300);
-
-    box-shadow: none;
-    cursor: pointer;
-    transition: box-shadow 0.2s ease-in-out;
-  }
-
-  .card--interactive:hover {
-    box-shadow: var(--cx-shadow-medium);
-  }
-
-  .card--disabled::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: rgb(from var(--cx-color-neutral-0) r g b / 50%);
-    z-index: 1;
-  }
-
-  .card__image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--cx-color-neutral-100);
-    border-radius: var(--image-border-radius);
-    margin: calc(-1 * var(--border-width));
-    overflow: hidden;
-    margin-bottom: var(--padding);
-    flex-shrink: 0;
-  }
-
-  .card__image::slotted(img) {
-    display: block;
-    height: auto;
-    width: 100%;
-  }
-
-  .card:not(.card--has-image) .card__image {
-    display: none;
-  }
-
-  .card__header {
-    display: block;
-    border-bottom: solid var(--header-border-width, var(--border-width))
-      var(--border-color);
-    padding-bottom: var(--padding);
-    margin-bottom: var(--padding);
-  }
-
-  .card:not(.card--has-header) .card__header {
-    display: none;
-  }
-
-  .card__title {
-    display: block;
-    font-size: var(--cx-font-size-large);
-    font-weight: var(--cx-font-weight-bold);
-  }
-
-  .card:not(.card--has-title) .card__title {
-    display: none;
-  }
-
-  .card__body {
-    display: block;
-    width: 100%;
-  }
-
-  .card--has-footer .card__footer {
-    display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding-top: var(--padding);
-    margin-top: var(--padding);
-  }
-
-  .card:not(.card--has-footer) .card__footer {
-    display: none;
-  }
-`;
+const f = v`:host{--border-color:var(--cx-color-neutral-200);--border-radius:var(--cx-border-radius-x-large);--box-shadow:var(--cx-shadow-x-small);--image-border-radius:var(--cx-border-radius-x-large);--border-width:1px;--padding:var(--cx-spacing-large);width:var(--card-width,auto);height:var(--card-height,auto);display:inline-block}.card{background-color:var(--cx-panel-background-color);box-shadow:var(--box-shadow);border:solid var(--border-width) var(--border-color);border-radius:var(--border-radius);padding:var(--padding);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:auto}.card--interactive{--border-color:var(--cx-color-primary-300);box-shadow:none;cursor:pointer;transition:box-shadow .2s ease-in-out}.card--interactive:hover{box-shadow:var(--cx-shadow-medium)}.card--disabled:before{content:"";background-color:rgb(from var(--cx-color-neutral-0) r g b / 50%);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.card__image{background-color:var(--cx-color-neutral-100);border-radius:var(--image-border-radius);margin:calc(-1 * var(--border-width));margin-bottom:var(--padding);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.card__image::slotted(img){width:100%;height:auto;display:block}.card:not(.card--has-image) .card__image{display:none}.card__header{border-bottom:solid var(--header-border-width,var(--border-width)) var(--border-color);padding-bottom:var(--padding);margin-bottom:var(--padding);display:block}.card:not(.card--has-header) .card__header{display:none}.card__title{font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-bold);display:block}.card:not(.card--has-title) .card__title{display:none}.card__body{width:100%;display:block}.card--has-footer .card__footer{border-top:solid var(--border-width) var(--border-color);padding-top:var(--padding);margin-top:var(--padding);display:block}.card:not(.card--has-footer) .card__footer{display:none}`;
 var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (o, e, d, t) => {
   for (var r = t > 1 ? void 0 : t ? _(e, d) : e, i = o.length - 1, s; i >= 0; i--)
     (s = o[i]) && (r = (t ? s(e, d, r) : s(r)) || r);
@@ -133,10 +23,7 @@ let a = class extends n {
     this.disabled && o.preventDefault();
   }
   render() {
-    return m`
-      <div
-        part="base"
-        class=${g({
+    return m`<div part="base" class=${g({
       card: !0,
       "card--disabled": this.disabled,
       "card--has-footer": this.hasSlotController.test("footer"),
@@ -144,16 +31,7 @@ let a = class extends n {
       "card--has-image": this.hasSlotController.test("image"),
       "card--has-title": this.hasSlotController.test("title"),
       "card--interactive": this.interactive
-    })}
-        @click=${this.handleClick}
-      >
-        <slot name="image" part="image" class="card__image"></slot>
-        <slot name="header" part="header" class="card__header"></slot>
-        <slot name="title" part="title" class="card__title"></slot>
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" class="card__footer"></slot>
-      </div>
-    `;
+    })} @click=${this.handleClick}><slot name="image" part="image" class="card__image"></slot><slot name="header" part="header" class="card__header"></slot><slot name="title" part="title" class="card__title"></slot><slot part="body" class="card__body"></slot><slot name="footer" part="footer" class="card__footer"></slot></div>`;
   }
 };
 a.styles = [h, f];