@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/divider.js

@@ -1,76 +1,14 @@
 import { n as c, C as d } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.DMSLciL5.js";
+import { c as p } from "../chunks/component.styles.CRO4Odto.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as h } from "../chunks/watch.BCJD77bD.js";
 import { i as b, x as g } from "../chunks/lit-element.jLBm65_O.js";
 import { n as f } from "../chunks/when.Dr1es41R.js";
-const u = b`
-  :host {
-    --color: var(--cx-panel-border-color);
-    --label-color: var(--cx-color-neutral-600);
-    --label-font-size: var(--cx-font-size-small);
-    --width: var(--cx-panel-border-width);
-    --spacing: var(--cx-spacing-medium);
-    --border-style: solid;
-    --padding: var(--spacing);
-  }
-
-  /**
-   * Horizontal divider
-   */
-  :host(:not([vertical])) {
-    display: block;
-    width: 100%;
-  }
-
-  :host(:not([vertical]):not([use-padding])) {
-    padding: var(--spacing) 0;
-  }
-
-  .divider__label {
-    display: block;
-    text-align: center;
-    margin-bottom: var(--cx-spacing-2x-small);
-    color: var(--label-color);
-    font-size: var(--label-font-size);
-  }
-
-  :host(:not([vertical]))::after {
-    display: block;
-    content: ' ';
-    border-top: var(--border-style) var(--width) var(--color);
-  }
-
-  /**
-   *  Vertical divider
-   */
-  :host([vertical]) {
-    display: inline-block;
-    height: 100%;
-  }
-
-  :host([vertical]:not([use-padding])) {
-    padding: 0 var(--spacing);
-  }
-
-  :host([vertical])::after {
-    display: inline-block;
-    content: ' ';
-    height: 100%;
-    border-left: var(--border-style) var(--width) var(--color);
-  }
-
-  /**
-   * Apply use-padding
-   */
-  :host([use-padding]) {
-    padding: var(--padding);
-  }
-`;
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (a, l, i, o) => {
+const m = b`:host{--color:var(--cx-panel-border-color);--label-color:var(--cx-color-neutral-600);--label-font-size:var(--cx-font-size-small);--width:var(--cx-panel-border-width);--spacing:var(--cx-spacing-medium);--border-style:solid;--padding:var(--spacing)}:host(:not([vertical])){width:100%;display:block}:host(:not([vertical]):not([use-padding])){padding:var(--spacing) 0}.divider__label{text-align:center;margin-bottom:var(--cx-spacing-2x-small);color:var(--label-color);font-size:var(--label-font-size);display:block}:host(:not([vertical])):after{content:" ";border-top:var(--border-style) var(--width) var(--color);display:block}:host([vertical]){height:100%;display:inline-block}:host([vertical]:not([use-padding])){padding:0 var(--spacing)}:host([vertical]):after{content:" ";border-left:var(--border-style) var(--width) var(--color);height:100%;display:inline-block}:host([use-padding]){padding:var(--padding)}`;
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (a, l, i, o) => {
   for (var e = o > 1 ? void 0 : o ? y(l, i) : l, s = a.length - 1, n; s >= 0; s--)
     (n = a[s]) && (e = (o ? n(l, i, e) : n(e)) || e);
-  return o && e && m(l, i, e), e;
+  return o && e && u(l, i, e), e;
 };
 let t = class extends d {
   constructor() {
@@ -93,7 +31,7 @@ let t = class extends d {
     );
   }
 };
-t.styles = [p, u];
+t.styles = [p, m];
 r([
   c({ reflect: !0, type: Boolean })
 ], t.prototype, "vertical", 2);

package/library/components/dot-pagination.js

@@ -1,5 +1,5 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
+import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/index.Cpamj0jB.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
@@ -13,7 +13,7 @@ import "../chunks/if-defined.BRoBj_Rp.js";
 import "../chunks/map.D8heArFD.js";
 import "../chunks/when.Dr1es41R.js";
 import "./tooltip.js";
-import { C as g } from "../chunks/dot-pagination.CIVxMAAS.js";
+import { C as g } from "../chunks/dot-pagination.C26bQ3vy.js";
 export {
   g as default
 };

package/library/components/dot-status.js

@@ -1,78 +1,16 @@
-import { n as l, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "../chunks/component.styles.DMSLciL5.js";
+import { n as a, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as m } from "../chunks/component.styles.CRO4Odto.js";
 import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as f, x as v } from "../chunks/lit-element.jLBm65_O.js";
 import { e as x } from "../chunks/class-map.BiVq-cVR.js";
-var n = /* @__PURE__ */ ((s) => (s.Busy = "busy", s.Error = "error", s.Idle = "idle", s.Success = "success", s))(n || {}), d = /* @__PURE__ */ ((s) => (s.Large = "large", s.Medium = "medium", s.Small = "small", s))(d || {});
-const y = f`
-  :host {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-
-  :host([size='small']) {
-    --dot-size: var(--cx-font-size-small);
-  }
-
-  :host([size='medium']) {
-    --dot-size: var(--cx-font-size-medium);
-  }
-
-  :host([size='large']) {
-    --dot-size: var(--cx-font-size-large);
-  }
-
-  .dot-status {
-    width: var(--dot-size, var(--cx-font-size-medium));
-    height: var(--dot-size, var(--cx-font-size-medium));
-    border-radius: 50%;
-    background-color: var(--dot-color, var(--cx-color-neutral-300));
-    flex-shrink: 0;
-  }
-
-  /* Status modifiers */
-  :host([status='idle']) {
-    --dot-color: var(--cx-color-neutral-300);
-  }
-
-  :host([status='busy']) {
-    --dot-color: var(--cx-color-warning);
-  }
-
-  :host([status='success']) {
-    --dot-color: var(--cx-color-success);
-  }
-
-  :host([status='error']) {
-    --dot-color: var(--cx-color-danger);
-  }
-
-  /* Pulse animation */
-  .dot-status--pulse {
-    --pulse-color: var(--dot-color, var(--cx-color-neutral-300));
-    animation: pulse 1.5s infinite;
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--pulse-color);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-`;
-var b = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (s, o, i, a) => {
-  for (var t = a > 1 ? void 0 : a ? z(o, i) : o, c = s.length - 1, u; c >= 0; c--)
-    (u = s[c]) && (t = (a ? u(o, i, t) : u(t)) || t);
-  return a && t && b(o, i, t), t;
+var n = /* @__PURE__ */ ((e) => (e.Busy = "busy", e.Error = "error", e.Idle = "idle", e.Success = "success", e))(n || {}), d = /* @__PURE__ */ ((e) => (e.Large = "large", e.Medium = "medium", e.Small = "small", e))(d || {});
+const y = f`:host{cursor:pointer;justify-content:center;align-items:center;display:inline-flex}:host([size=small]){--dot-size:var(--cx-font-size-small)}:host([size=medium]){--dot-size:var(--cx-font-size-medium)}:host([size=large]){--dot-size:var(--cx-font-size-large)}.dot-status{width:var(--dot-size,var(--cx-font-size-medium));height:var(--dot-size,var(--cx-font-size-medium));background-color:var(--dot-color,var(--cx-color-neutral-300));border-radius:50%;flex-shrink:0}:host([status=idle]){--dot-color:var(--cx-color-neutral-300)}:host([status=busy]){--dot-color:var(--cx-color-warning)}:host([status=success]){--dot-color:var(--cx-color-success)}:host([status=error]){--dot-color:var(--cx-color-danger)}.dot-status--pulse{--pulse-color:var(--dot-color,var(--cx-color-neutral-300));animation:1.5s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 .5rem #0000}to{box-shadow:0 0 #0000}}`;
+var b = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (e, o, i, l) => {
+  for (var t = l > 1 ? void 0 : l ? z(o, i) : o, c = e.length - 1, u; c >= 0; c--)
+    (u = e[c]) && (t = (l ? u(o, i, t) : u(t)) || t);
+  return l && t && b(o, i, t), t;
 };
-let e = class extends p {
+let s = class extends p {
   constructor() {
     super(...arguments), this.status = n.Idle, this.size = d.Medium, this.pulse = !1, this.label = "";
   }
@@ -82,38 +20,30 @@ let e = class extends p {
     });
   }
   render() {
-    const s = this.label || this.status;
-    return v`
-      <span
-        part="base"
-        role="status"
-        aria-label=${s}
-        class=${x({
+    const e = this.label || this.status;
+    return v`<span part="base" role="status" aria-label=${e} class=${x({
       "dot-status": !0,
       "dot-status--pulse": this.pulse
-    })}
-        @click=${this.handleClick}
-      ></span>
-    `;
+    })} @click=${this.handleClick}></span>`;
   }
 };
-e.styles = [m, y];
-e.dependencies = {};
+s.styles = [m, y];
+s.dependencies = {};
 r([
-  l({ reflect: !0, type: String })
-], e.prototype, "status", 2);
+  a({ reflect: !0, type: String })
+], s.prototype, "status", 2);
 r([
-  l({ reflect: !0, type: String })
-], e.prototype, "size", 2);
+  a({ reflect: !0, type: String })
+], s.prototype, "size", 2);
 r([
-  l({ reflect: !0, type: Boolean })
-], e.prototype, "pulse", 2);
+  a({ reflect: !0, type: Boolean })
+], s.prototype, "pulse", 2);
 r([
-  l({ reflect: !0 })
-], e.prototype, "label", 2);
-e = r([
+  a({ reflect: !0 })
+], s.prototype, "label", 2);
+s = r([
   h("cx-dot-status")
-], e);
+], s);
 export {
-  e as default
+  s as default
 };

package/library/components/drawer.js

@@ -1,5 +1,5 @@
 import { n, C } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as k } from "../chunks/component.styles.DMSLciL5.js";
+import { c as k } from "../chunks/component.styles.CRO4Odto.js";
 import { a as d, s as p } from "../chunks/animate.El-MpOws.js";
 import { c as z } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as v } from "../chunks/event.mFzZi4sr.js";
@@ -16,188 +16,8 @@ import { o as b } from "../chunks/if-defined.BRoBj_Rp.js";
 import { n as A } from "../chunks/when.Dr1es41R.js";
 import { c as x } from "../chunks/capitalize.CNStXZBq.js";
 import { s as i, g as c } from "../chunks/animation-registry.HmpwNuGH.js";
-import { C as q } from "../chunks/icon-button.C3eqeQl9.js";
-const D = P`
-  :host {
-    --size: 25rem;
-    --header-spacing: var(--cx-spacing-large);
-    --body-spacing: var(--cx-spacing-large);
-    --footer-spacing: var(--cx-spacing-large);
-    --font-family: var(--cx-font-sans);
-
-    display: contents;
-  }
-
-  .drawer {
-    top: 0;
-    inset-inline-start: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-    overflow: hidden;
-  }
-
-  .drawer--open {
-    width: 100%;
-    height: 100%;
-  }
-
-  .drawer--persistent.drawer--open {
-    width: var(--size);
-    min-width: var(--size);
-  }
-
-  .drawer--contained {
-    position: absolute;
-    z-index: initial;
-  }
-
-  .drawer--persistent {
-    position: relative;
-  }
-
-  .drawer--fixed {
-    position: fixed;
-    z-index: var(--cx-z-index-drawer);
-  }
-
-  .drawer__panel {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    z-index: 2;
-    max-width: 100%;
-    max-height: 100%;
-    background-color: var(--cx-panel-background-color);
-    box-shadow: var(--cx-shadow-large);
-    overflow: auto;
-    pointer-events: all;
-  }
-
-  .drawer__panel:focus {
-    outline: none;
-  }
-
-  .drawer--top .drawer__panel {
-    top: 0;
-    inset-inline-end: auto;
-    bottom: auto;
-    inset-inline-start: 0;
-    width: 100%;
-    height: var(--size);
-  }
-
-  .drawer--end .drawer__panel {
-    top: 0;
-    inset-inline-end: 0;
-    bottom: auto;
-    inset-inline-start: auto;
-    width: var(--size);
-    height: 100%;
-  }
-
-  .drawer--bottom .drawer__panel {
-    top: auto;
-    inset-inline-end: auto;
-    bottom: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    height: var(--size);
-  }
-
-  .drawer--start .drawer__panel {
-    top: 0;
-    inset-inline-end: auto;
-    bottom: auto;
-    inset-inline-start: 0;
-    width: var(--size);
-    height: 100%;
-  }
-
-  .drawer__header {
-    display: flex;
-    gap: var(--cx-spacing-small);
-    padding: var(--header-spacing);
-    border-bottom: solid 1px var(--cx-input-border-color);
-    font-family: var(--font-family);
-  }
-
-  .drawer__title {
-    flex: 1 1 auto;
-    font: inherit;
-    font-size: var(--cx-font-size-large);
-    font-weight: var(--cx-font-weight-semibold);
-    line-height: var(--cx-line-height-medium);
-    margin: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .drawer__header-actions {
-    flex-shrink: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: end;
-    gap: var(--cx-spacing-2x-small);
-  }
-
-  .drawer__header-actions cx-icon-button,
-  .drawer__header-actions ::slotted(cx-icon-button) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--cx-font-size-medium);
-  }
-
-  .drawer__body {
-    flex: 1 1 auto;
-    display: block;
-    padding: var(--body-spacing);
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    font-family: var(--font-family);
-  }
-
-  .drawer__footer {
-    text-align: right;
-    padding: var(--footer-spacing);
-    font-family: var(--font-family);
-  }
-
-  .drawer__footer ::slotted(cx-button:not(:last-of-type)) {
-    margin-inline-end: var(--cx-spacing-x-small);
-  }
-
-  .drawer:not(.drawer--has-footer) .drawer__footer {
-    display: none;
-  }
-
-  .drawer__overlay {
-    display: block;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--cx-overlay-background-color);
-    pointer-events: all;
-  }
-
-  .drawer--contained .drawer__overlay {
-    opacity: 0;
-    position: absolute;
-  }
-
-  .drawer__overlay--disabled {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    .drawer__panel {
-      border: solid 1px var(--cx-color-neutral-0);
-    }
-  }
-`;
+import { C as q } from "../chunks/icon-button.BuhCp--_.js";
+const D = P`:host{--size:25rem;--header-spacing:var(--cx-spacing-large);--body-spacing:var(--cx-spacing-large);--footer-spacing:var(--cx-spacing-large);--font-family:var(--cx-font-sans);display:contents}.drawer{top:0;pointer-events:none;width:0;height:0;inset-inline-start:0;overflow:hidden}.drawer--open{width:100%;height:100%}.drawer--persistent.drawer--open{width:var(--size);min-width:var(--size)}.drawer--contained{z-index:initial;position:absolute}.drawer--persistent{position:relative}.drawer--fixed{z-index:var(--cx-z-index-drawer);position:fixed}.drawer__panel{z-index:2;background-color:var(--cx-panel-background-color);max-width:100%;max-height:100%;box-shadow:var(--cx-shadow-large);pointer-events:all;flex-direction:column;display:flex;position:absolute;overflow:auto}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:100%;height:var(--size);inset-inline-start:0}.drawer--end .drawer__panel{top:0;inset-inline-end:0;bottom:auto;width:var(--size);height:100%;inset-inline-start:auto}.drawer--bottom .drawer__panel{top:auto;inset-inline-end:auto;bottom:0;width:100%;height:var(--size);inset-inline-start:0}.drawer--start .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:var(--size);height:100%;inset-inline-start:0}.drawer__header{gap:var(--cx-spacing-small);padding:var(--header-spacing);border-bottom:solid 1px var(--cx-input-border-color);font-family:var(--font-family);display:flex}.drawer__title{font:inherit;font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-semibold);line-height:var(--cx-line-height-medium);flex:auto;align-items:center;margin:0;display:flex}.drawer__header-actions{justify-content:end;gap:var(--cx-spacing-2x-small);flex-wrap:wrap;flex-shrink:0;display:flex}.drawer__header-actions cx-icon-button,.drawer__header-actions ::slotted(cx-icon-button){font-size:var(--cx-font-size-medium);flex:none;align-items:center;display:flex}.drawer__body{padding:var(--body-spacing);-webkit-overflow-scrolling:touch;font-family:var(--font-family);flex:auto;display:block;overflow:auto}.drawer__footer{text-align:right;padding:var(--footer-spacing);font-family:var(--font-family)}.drawer__footer ::slotted(cx-button:not(:last-of-type)){margin-inline-end:var(--cx-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{background-color:var(--cx-overlay-background-color);pointer-events:all;display:block;position:fixed;inset:0}.drawer--contained .drawer__overlay{opacity:0;position:absolute}.drawer__overlay--disabled{display:none}@media (forced-colors:active){.drawer__panel{border:solid 1px var(--cx-color-neutral-0)}}`;
 var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, o, r, l) => {
   for (var s = l > 1 ? void 0 : l ? E(o, r) : o, h = e.length - 1, f; h >= 0; h--)
     (f = e[h]) && (s = (l ? f(o, r, s) : f(s)) || s);
@@ -325,10 +145,7 @@ let t = class extends C {
   }
   render() {
     const e = this.variant === "persistent";
-    return y`
-      <div
-        part="base"
-        class=${g({
+    return y`<div part="base" class=${g({
       drawer: !0,
       "drawer--bottom": this.placement === "bottom",
       "drawer--contained": this.contained,
@@ -340,61 +157,13 @@ let t = class extends C {
       "drawer--rtl": this.localize.dir() === "rtl",
       "drawer--start": this.placement === "start",
       "drawer--top": this.placement === "top"
-    })}
-      >
-        <div
-          part="overlay"
-          class=${g({
+    })}><div part="overlay" class=${g({
       drawer__overlay: !0,
       "drawer__overlay--disabled": e
-    })}
-          @click=${this.handleOverlayClick}
-          tabindex="-1"
-        ></div>
-
-        <div
-          part="panel"
-          class="drawer__panel"
-          role="dialog"
-          aria-modal="true"
-          aria-hidden=${this.open ? "false" : "true"}
-          aria-label=${b(this.noHeader ? this.label : void 0)}
-          aria-labelledby=${b(this.noHeader ? void 0 : "title")}
-          tabindex="0"
-        >
-          ${this.noHeader ? "" : y`
-                <header part="header" class="drawer__header">
-                  <h2 part="title" class="drawer__title" id="title">
-                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                    <slot name="label">
-                      ${this.label.length > 0 ? this.label : "\uFEFF"}
-                    </slot>
-                  </h2>
-                  <div part="header-actions" class="drawer__header-actions">
-                    <slot name="header-actions"></slot>
-                    ${A(
+    })} @click=${this.handleOverlayClick} tabindex="-1"></div><div part="panel" class="drawer__panel" role="dialog" aria-modal="true" aria-hidden=${this.open ? "false" : "true"} aria-label=${b(this.noHeader ? this.label : void 0)} aria-labelledby=${b(this.noHeader ? void 0 : "title")} tabindex="0">${this.noHeader ? "" : y`<header part="header" class="drawer__header"><h2 part="title" class="drawer__title" id="title"><!-- If there's no label, use an invisible character to prevent the header from collapsing --><slot name="label">${this.label.length > 0 ? this.label : "\uFEFF"}</slot></h2><div part="header-actions" class="drawer__header-actions"><slot name="header-actions"></slot>${A(
       !this.noCloseButton,
-      () => y`<cx-icon-button
-                          part="close-button"
-                          exportparts="base:close-button__base"
-                          class="drawer__close"
-                          name="close"
-                          label=${this.localize.term("close")}
-                          @click=${this.handleCloseButtonClick}
-                        ></cx-icon-button>`
-    )}
-                  </div>
-                </header>
-              `}
-
-          <slot part="body" class="drawer__body"></slot>
-
-          <footer part="footer" class="drawer__footer">
-            <slot name="footer"></slot>
-          </footer>
-        </div>
-      </div>
-    `;
+      () => y`<cx-icon-button part="close-button" exportparts="base:close-button__base" class="drawer__close" name="close" label=${this.localize.term("close")} @click=${this.handleCloseButtonClick}></cx-icon-button>`
+    )}</div></header>`}<slot part="body" class="drawer__body"></slot><footer part="footer" class="drawer__footer"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 t.styles = [k, D];