@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/checkbox.js

@@ -1,6 +1,6 @@
 import { n as r, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as k } from "../chunks/component.styles.DMSLciL5.js";
-import { f as v } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { c as k } from "../chunks/component.styles.CRO4Odto.js";
+import { f as v } from "../chunks/form-control.styles.CaGWmeAS.js";
 import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as y } from "../chunks/default-value.COZopaet.js";
 import { F as _ } from "../chunks/form.DgwYWi0O.js";
@@ -10,188 +10,12 @@ import { i as $, x as n } from "../chunks/lit-element.jLBm65_O.js";
 import { r as w } from "../chunks/state.CSDxrqLd.js";
 import { e as z } from "../chunks/query.BBf1UFkC.js";
 import { e as d } from "../chunks/class-map.BiVq-cVR.js";
-import { o as u } from "../chunks/if-defined.BRoBj_Rp.js";
-import { l as p } from "../chunks/live.SCz6M8Gs.js";
+import { o as p } from "../chunks/if-defined.BRoBj_Rp.js";
+import { l as u } from "../chunks/live.SCz6M8Gs.js";
 import { n as F } from "../chunks/when.Dr1es41R.js";
 import V from "./icon.js";
 var x = /* @__PURE__ */ ((e) => (e.Large = "large", e.Medium = "medium", e.Small = "small", e))(x || {}), m = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.Left = "left", e.Right = "right", e.Top = "top", e))(m || {});
-const H = $`
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  :host {
-    display: inline-block;
-    white-space: normal;
-    padding: var(--checkbox-padding, 0);
-    margin: var(--checkbox-margin, 0);
-  }
-
-  :host([data-user-invalid])::part(control) {
-    border-color: var(--cx-input-invalid-border-color);
-  }
-
-  :host([data-user-invalid])::part(label) {
-    color: var(--cx-input-invalid-color);
-  }
-
-  :host([data-user-invalid])::part(control) {
-    outline: none;
-  }
-
-  :host(:focus-within[data-user-invalid])::part(control) {
-    border-color: var(--cx-input-invalid-border-color);
-    box-shadow: var(--cx-input-invalid-shadow);
-  }
-
-  .checkbox {
-    position: relative;
-    display: inline-flex;
-    align-items: flex-start;
-    font-family: var(--cx-input-font-family);
-    font-weight: var(--cx-input-font-weight);
-    color: var(--label-color, var(--cx-color-neutral));
-    vertical-align: middle;
-    cursor: pointer;
-    box-sizing: border-box;
-    gap: var(--checkbox-label-gap, var(--cx-spacing-x-small));
-  }
-
-  .checkbox--label-left {
-    flex-direction: row-reverse;
-  }
-
-  .checkbox--label-top {
-    flex-direction: column-reverse;
-    align-items: flex-start;
-  }
-
-  .checkbox--label-bottom {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .checkbox--small {
-    --toggle-size: var(--cx-toggle-size-small);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .checkbox--medium {
-    --toggle-size: var(--cx-toggle-size-medium);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .checkbox--large {
-    --toggle-size: var(--cx-toggle-size-large);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .form-control {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .checkbox__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-    border: solid var(--cx-input-border-width) var(--cx-input-border-color);
-    border-radius: var(--cx-border-radius-small);
-    background-color: var(--cx-input-background-color);
-    color: var(--cx-color-neutral-0);
-    transition:
-      var(--cx-transition-fast) border-color,
-      var(--cx-transition-fast) background-color,
-      var(--cx-transition-fast) color,
-      var(--cx-transition-fast) box-shadow;
-  }
-
-  .checkbox__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-
-  .checkbox__checked-icon,
-  .checkbox__indeterminate-icon {
-    display: inline-flex;
-  }
-
-  /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
-    .checkbox__control:hover {
-    border-color: var(--cx-input-border-color-hover);
-    background-color: var(--cx-input-background-color-hover);
-  }
-
-  /* Focus */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
-    .checkbox__input:focus-visible
-    ~ .checkbox__control {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  /* Checked/indeterminate */
-  .checkbox--checked .checkbox__control,
-  .checkbox--indeterminate .checkbox__control {
-    border-color: var(--cx-color-primary);
-    background-color: var(--cx-color-primary);
-  }
-
-  /* Checked/indeterminate + hover */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
-    .checkbox__control:hover {
-    border-color: var(--cx-color-primary-500);
-    background-color: var(--cx-color-primary-500);
-  }
-
-  /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled)
-    .checkbox__input:focus-visible
-    ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
-    .checkbox__input:focus-visible
-    ~ .checkbox__control {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  /* Disabled */
-  .checkbox--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .checkbox__label {
-    width: var(--label-width, auto);
-    display: inline-block;
-    color: var(--label-color, var(--cx-color-neutral));
-    font: var(--label-font, var(--cx-font-label-small));
-    line-height: var(--toggle-size);
-    user-select: none;
-    -webkit-user-select: none;
-    text-transform: var(--cx-checkbox-label-text-transform, none);
-    pointer-events: none;
-  }
-
-  .form-control__help-text {
-    font: var(--help-text-font, var(--cx-font-label-x-small));
-    color: var(--help-text-color, var(--cx-color-neutral-600));
-  }
-
-  :host([required]) .checkbox__label::after {
-    color: var(--cx-input-required-content-color);
-    content: var(--cx-input-required-content);
-    margin-inline-start: var(--cx-input-required-content-offset);
-  }
-`;
+const H = $`:host([disabled]){pointer-events:none}:host{white-space:normal;padding:var(--checkbox-padding,0);margin:var(--checkbox-margin,0);display:inline-block}:host([data-user-invalid])::part(control){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid])::part(label){color:var(--cx-input-invalid-color)}:host([data-user-invalid])::part(control){outline:none}:host(:focus-within[data-user-invalid])::part(control){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.checkbox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);color:var(--label-color,var(--cx-color-neutral));vertical-align:middle;cursor:pointer;box-sizing:border-box;align-items:flex-start;gap:var(--checkbox-label-gap,var(--cx-spacing-x-small));display:inline-flex;position:relative}.checkbox--label-left{flex-direction:row-reverse}.checkbox--label-top{flex-direction:column-reverse;align-items:flex-start}.checkbox--label-bottom{flex-direction:column;align-items:flex-start}.checkbox--small{--toggle-size:var(--cx-toggle-size-small);font-size:var(--cx-input-font-size-small)}.checkbox--medium{--toggle-size:var(--cx-toggle-size-medium);font-size:var(--cx-input-font-size-small)}.checkbox--large{--toggle-size:var(--cx-toggle-size-large);font-size:var(--cx-input-font-size-small)}.form-control{flex-direction:column;display:flex}.checkbox__control{width:var(--toggle-size);height:var(--toggle-size);border:solid var(--cx-input-border-width) var(--cx-input-border-color);border-radius:var(--cx-border-radius-small);background-color:var(--cx-input-background-color);color:var(--cx-color-neutral-0);transition:var(--cx-transition-fast) border-color, var(--cx-transition-fast) background-color, var(--cx-transition-fast) color, var(--cx-transition-fast) box-shadow;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.checkbox__input{opacity:0;pointer-events:none;margin:0;padding:0;position:absolute}.checkbox__checked-icon,.checkbox__indeterminate-icon{display:inline-flex}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--cx-input-border-color-hover);background-color:var(--cx-input-background-color-hover)}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--cx-color-primary);background-color:var(--cx-color-primary)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--cx-color-primary-500);background-color:var(--cx-color-primary-500)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.checkbox--disabled{opacity:.5;cursor:default}.checkbox__label{width:var(--label-width,auto);color:var(--label-color,var(--cx-color-neutral));font:var(--label-font,var(--cx-font-label-small));line-height:var(--toggle-size);-webkit-user-select:none;user-select:none;text-transform:var(--cx-checkbox-label-text-transform,none);pointer-events:none;display:inline-block}.form-control__help-text{font:var(--help-text-font,var(--cx-font-label-x-small));color:var(--help-text-color,var(--cx-color-neutral-600))}:host([required]) .checkbox__label:after{color:var(--cx-input-required-content-color);content:var(--cx-input-required-content);margin-inline-start:var(--cx-input-required-content-offset)}`;
 var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (e, i, l, a) => {
   for (var c = a > 1 ? void 0 : a ? q(i, l) : i, s = e.length - 1, h; s >= 0; s--)
     (h = e[s]) && (c = (a ? h(i, l, c) : h(c)) || c);
@@ -289,17 +113,11 @@ let t = class extends f {
   }
   render() {
     const e = this.hasSlotController.test("help-text"), i = this.helpText ? !0 : !!e, l = this.hasSlotController.test("[default]");
-    return n`
-      <div
-        class=${d({
+    return n`<div class=${d({
       "form-control": !0,
       [`form-control--${this.size}`]: !0,
       "form-control--has-help-text": i
-    })}
-      >
-        <div
-          part="base"
-          class=${d({
+    })}><div part="base" class=${d({
       checkbox: !0,
       "checkbox--checked": this.checked,
       "checkbox--disabled": this.disabled,
@@ -307,70 +125,11 @@ let t = class extends f {
       "checkbox--indeterminate": this.indeterminate,
       [`checkbox--label-${this.labelPlacement}`]: !0,
       [`checkbox--${this.size}`]: !0
-    })}
-        >
-          <input
-            id="checkbox"
-            aria-label=${u(this.ariaLabel?.trim() || void 0)}
-            class="checkbox__input"
-            type="checkbox"
-            title=${this.title}
-            name=${this.name}
-            .value=${u(this.value)}
-            .indeterminate=${p(this.indeterminate)}
-            .checked=${p(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            aria-checked=${this.checked ? "true" : "false"}
-            aria-describedby="help-text"
-            @change=${this.handleChange}
-            @invalid=${this.handleInvalid}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-          />
-
-          <span
-            part="control${this.checked ? " control--checked" : ""}${this.indeterminate ? " control--indeterminate" : ""}"
-            class="checkbox__control"
-          >
-            ${this.checked ? n`
-                  <slot name="checked-icon">
-                    <cx-icon
-                      part="checked-icon"
-                      class="checkbox__checked-icon"
-                      name="check"
-                    ></cx-icon>
-                  </slot>
-                ` : ""}
-            ${!this.checked && this.indeterminate ? n`
-                  <slot name="indeterminate-icon">
-                    <cx-icon
-                      part="indeterminate-icon"
-                      class="checkbox__indeterminate-icon"
-                      name="remove"
-                    ></cx-icon>
-                  </slot>
-                ` : ""}
-          </span>
-          ${F(
+    })}><input id="checkbox" aria-label=${p(this.ariaLabel?.trim() || void 0)} class="checkbox__input" type="checkbox" title=${this.title} name=${this.name} .value=${p(this.value)} .indeterminate=${u(this.indeterminate)} .checked=${u(this.checked)} .disabled=${this.disabled} .required=${this.required} aria-checked=${this.checked ? "true" : "false"} aria-describedby="help-text" @change=${this.handleChange} @invalid=${this.handleInvalid} @blur=${this.handleBlur} @focus=${this.handleFocus}><span part="control${this.checked ? " control--checked" : ""}${this.indeterminate ? " control--indeterminate" : ""}" class="checkbox__control">${this.checked ? n`<slot name="checked-icon"><cx-icon part="checked-icon" class="checkbox__checked-icon" name="check"></cx-icon></slot>` : ""}
+            ${!this.checked && this.indeterminate ? n`<slot name="indeterminate-icon"><cx-icon part="indeterminate-icon" class="checkbox__indeterminate-icon" name="remove"></cx-icon></slot>` : ""}</span>${F(
       l,
-      () => n`
-              <label for="checkbox" part="label" class="checkbox__label">
-                <slot></slot>
-              </label>
-            `
-    )}
-        </div>
-        <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>
-    `;
+      () => n`<label for="checkbox" part="label" class="checkbox__label"><slot></slot></label>`
+    )}</div><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>`;
   }
 };
 t.styles = [