@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/radio-card.js

@@ -1,6 +1,6 @@
 import { n as o, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.DMSLciL5.js";
-import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
+import { c as u } from "../chunks/component.styles.CRO4Odto.js";
+import { c as p } from "../chunks/custom-element.L4WJXn1j.js";
 import { H as m } from "../chunks/slot.j5oheLJC.js";
 import { w as h } from "../chunks/watch.BCJD77bD.js";
 import { i as f, x as g } from "../chunks/lit-element.jLBm65_O.js";
@@ -10,154 +10,7 @@ import { e as v } from "../chunks/class-map.BiVq-cVR.js";
 import _ from "./card.js";
 import C from "./line-clamp.js";
 import y from "./radio.js";
-const k = f`
-  :host {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
-    --label-color: var(--cx-input-label-color);
-    --label-text-align: left;
-    --description-color: var(--cx-input-label-color);
-    --description-text-align: left;
-    --toggle-size: var(--cx-toggle-size-large);
-  }
-
-  :host(:focus-visible) {
-    outline: 0px;
-  }
-
-  .radio-card {
-    --border-radius: var(--cx-border-radius-large);
-    --box-shadow: none;
-    --padding: var(--cx-spacing-small);
-    --image-border-radius: var(--cx-border-radius-medium);
-    cursor: pointer;
-    width: var(--card-width, 100%);
-    height: var(--card-height, 100%);
-  }
-
-  .radio-card--checked:not(.radio-card--grouped)::part(base) {
-    height: 100%;
-  }
-
-  .radio-card--grouped::part(base) {
-    border-radius: 0;
-    border-top-width: 0;
-    height: 100%;
-  }
-
-  .radio-card--grouped.radio-card--horizontal::part(base) {
-    border-left-width: 0;
-    border-top-width: var(--border-width);
-  }
-
-  :host(:first-child) .radio-card--grouped::part(base) {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-top-width: var(--border-width);
-  }
-
-  :host(:last-child) .radio-card--grouped::part(base) {
-    border-bottom-left-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :host(:first-child) .radio-card--grouped.radio-card--horizontal::part(base) {
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-left-width: var(--border-width);
-  }
-
-  :host(:last-child) .radio-card--grouped.radio-card--horizontal::part(base) {
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .radio-card::part(image) {
-    background-color: transparent;
-  }
-
-  .radio-card--compact::part(image) {
-    display: none;
-  }
-
-  .radio-card--checked:not(.radio-card--grouped) {
-    --border-color: var(--cx-color-primary);
-  }
-
-  .radio-card--checked::part(base) {
-    background-color: var(--cx-color-primary-50);
-  }
-
-  .radio-card--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .radio-card__label {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--cx-spacing-2x-small);
-    text-transform: var(--cx-radio-card-label-text-transform, none);
-  }
-
-  .radio-card__description {
-    margin-left: calc(var(--toggle-size) + 0.5em);
-  }
-
-  .radio-card__description > cx-line-clamp {
-    color: var(--description-color);
-    line-height: var(--cx-line-height-medium);
-    text-align: var(--description-text-align);
-  }
-
-  .radio-card__label > cx-line-clamp {
-    color: var(--label-color);
-    flex: 1 1 auto;
-    text-align: var(--label-text-align);
-  }
-
-  .radio-card--has-suffix .radio-card__label__suffix {
-    width: 3rem;
-  }
-
-  .radio-card__label__suffix {
-    display: flex;
-    justify-content: flex-end;
-    height: fit-content;
-  }
-
-  .radio-card__image::slotted(img),
-  .radio-card__image::slotted(svg) {
-    border-radius: var(--cx-border-radius-small);
-    width: 100%;
-  }
-
-  .radio-card__image::slotted(*) {
-    display: flex;
-    flex-direction: column;
-  }
-
-  cx-radio {
-    --toggle-size: var(--toggle-size);
-  }
-
-  cx-radio::part(base) {
-    align-items: center;
-    width: 100%;
-  }
-`;
+const k = f`:host{--label-color:var(--cx-input-label-color);--label-text-align:left;--description-color:var(--cx-input-label-color);--description-text-align:left;--toggle-size:var(--cx-toggle-size-large);flex-direction:column;align-items:center;width:100%;display:flex;position:relative}:host(:focus-visible){outline:0}.radio-card{--border-radius:var(--cx-border-radius-large);--box-shadow:none;--padding:var(--cx-spacing-small);--image-border-radius:var(--cx-border-radius-medium);cursor:pointer;width:var(--card-width,100%);height:var(--card-height,100%)}.radio-card--checked:not(.radio-card--grouped)::part(base){height:100%}.radio-card--grouped::part(base){border-top-width:0;border-radius:0;height:100%}.radio-card--grouped.radio-card--horizontal::part(base){border-left-width:0;border-top-width:var(--border-width)}:host(:first-child) .radio-card--grouped::part(base){border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-top-width:var(--border-width);border-bottom-right-radius:0;border-bottom-left-radius:0}:host(:last-child) .radio-card--grouped::part(base){border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-top-left-radius:0;border-top-right-radius:0}:host(:first-child) .radio-card--grouped.radio-card--horizontal::part(base){border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius);border-left-width:var(--border-width);border-top-right-radius:0;border-bottom-right-radius:0}:host(:last-child) .radio-card--grouped.radio-card--horizontal::part(base){border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.radio-card::part(image){background-color:#0000}.radio-card--compact::part(image){display:none}.radio-card--checked:not(.radio-card--grouped){--border-color:var(--cx-color-primary)}.radio-card--checked::part(base){background-color:var(--cx-color-primary-50)}.radio-card--disabled{opacity:.5;cursor:default}.radio-card__label{justify-content:space-between;align-items:center;gap:var(--cx-spacing-2x-small);text-transform:var(--cx-radio-card-label-text-transform,none);display:flex}.radio-card__description{margin-left:calc(var(--toggle-size) + .5em)}.radio-card__description>cx-line-clamp{color:var(--description-color);line-height:var(--cx-line-height-medium);text-align:var(--description-text-align)}.radio-card__label>cx-line-clamp{color:var(--label-color);text-align:var(--label-text-align);flex:auto}.radio-card--has-suffix .radio-card__label__suffix{width:3rem}.radio-card__label__suffix{justify-content:flex-end;height:fit-content;display:flex}.radio-card__image::slotted(img),.radio-card__image::slotted(svg){border-radius:var(--cx-border-radius-small);width:100%}.radio-card__image::slotted(*){flex-direction:column;display:flex}cx-radio{--toggle-size:var(--toggle-size)}cx-radio::part(base){align-items:center;width:100%}`;
 var w = Object.defineProperty, A = Object.getOwnPropertyDescriptor, e = (i, a, s, d) => {
   for (var t = d > 1 ? void 0 : d ? A(a, s) : a, l = i.length - 1, c; l >= 0; l--)
     (c = i[l]) && (t = (d ? c(a, s, t) : c(t)) || t);
@@ -190,9 +43,7 @@ let r = class extends b {
   }
   render() {
     const i = this.parentElement?.getAttribute("compact") !== null, a = this.parentElement?.getAttribute("horizontal") !== null;
-    return g`<cx-card
-      part="base"
-      class=${v({
+    return g`<cx-card part="base" class=${v({
       "radio-card": !0,
       "radio-card--checked": this.checked,
       "radio-card--compact": !this.querySelector('[slot="image"]'),
@@ -201,29 +52,10 @@ let r = class extends b {
       "radio-card--grouped": i,
       "radio-card--has-suffix": this.hasSlotController.test("suffix"),
       "radio-card--horizontal": a
-    })}
-    >
-      <slot name="image" slot="image" class="radio-card__image"></slot>
-      <cx-radio
-        ?disabled=${this.disabled}
-        ?hide-indicator=${this.hideIndicator}
-      >
-        <div class="radio-card__label">
-          <cx-line-clamp lines=${this.disabledLineClamp ? 0 : 1}>
-            <slot></slot>
-          </cx-line-clamp>
-          <slot name="suffix" class="radio-card__label__suffix"></slot>
-        </div>
-      </cx-radio>
-      <div class="radio-card__description">
-        <cx-line-clamp lines=${this.disabledLineClamp ? 0 : 3}>
-          <slot name="help-text"></slot>
-        </cx-line-clamp>
-      </div>
-    </cx-card>`;
+    })}><slot name="image" slot="image" class="radio-card__image"></slot><cx-radio ?disabled=${this.disabled} ?hide-indicator=${this.hideIndicator}><div class="radio-card__label"><cx-line-clamp lines=${this.disabledLineClamp ? 0 : 1}><slot></slot></cx-line-clamp><slot name="suffix" class="radio-card__label__suffix"></slot></div></cx-radio><div class="radio-card__description"><cx-line-clamp lines=${this.disabledLineClamp ? 0 : 3}><slot name="help-text"></slot></cx-line-clamp></div></cx-card>`;
   }
 };
-r.styles = [p, k];
+r.styles = [u, k];
 r.dependencies = {
   "cx-card": _,
   "cx-line-clamp": C,
@@ -257,7 +89,7 @@ e([
   h("disabled", { waitUntilFirstUpdate: !0 })
 ], r.prototype, "handleDisabledChange", 1);
 r = e([
-  u("cx-radio-card")
+  p("cx-radio-card")
 ], r);
 export {
   r as default

package/library/components/radio-group.js

@@ -1,6 +1,6 @@
 import { n as d, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
-import { f as y } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
+import { f as y } from "../chunks/form-control.styles.CaGWmeAS.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as x } from "../chunks/default-value.COZopaet.js";
 import { F as b, c as C, a as w, v as R } from "../chunks/form.DgwYWi0O.js";
@@ -12,72 +12,11 @@ import { e as m } from "../chunks/query.BBf1UFkC.js";
 import { e as c } from "../chunks/class-map.BiVq-cVR.js";
 import { o as _ } from "../chunks/style-map.llVFPd__.js";
 import A from "./button-group.js";
-const M = E`
-  :host {
-    display: block;
-    --radio-group-gap: var(--cx-spacing-x-small);
-  }
-
-  .form-control {
-    position: relative;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .form-control__label {
-    padding: 0;
-  }
-
-  .radio-group {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--radio-group-gap);
-  }
-
-  .radio-group--compact {
-    --radio-group-gap: 0px;
-  }
-
-  .radio-group--horizontal {
-    align-items: stretch;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  .radio-group--horizontal slot::slotted(cx-radio-card) {
-    flex-basis: calc(
-      100% / var(--radio-group-columns) - var(--radio-group-gap) /
-        var(--radio-group-columns) * (var(--radio-group-columns) - 1)
-    );
-  }
-
-  .radio-group--horizontal.radio-group--filled slot::slotted(cx-radio-card) {
-    flex-basis: auto;
-  }
-
-  .radio-group--required .radio-group__label::after {
-    content: var(--cx-input-required-content);
-    margin-inline-start: var(--cx-input-required-content-offset);
-  }
-
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-`;
-var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? S(t, a) : t, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (r = (s ? n(t, a, r) : n(r)) || r);
-  return s && r && k(t, a, r), r;
+const M = E`:host{--radio-group-gap:var(--cx-spacing-x-small);display:block}.form-control{border:none;margin:0;padding:0;position:relative}.form-control__label{padding:0}.radio-group{align-items:flex-start;gap:var(--radio-group-gap);flex-direction:column;display:flex}.radio-group--compact{--radio-group-gap:0px}.radio-group--horizontal{flex-flow:wrap;align-items:stretch}.radio-group--horizontal slot::slotted(cx-radio-card){flex-basis:calc(100% / var(--radio-group-columns) - var(--radio-group-gap) / var(--radio-group-columns) * (var(--radio-group-columns) - 1))}.radio-group--horizontal.radio-group--filled slot::slotted(cx-radio-card){flex-basis:auto}.radio-group--required .radio-group__label:after{content:var(--cx-input-required-content);margin-inline-start:var(--cx-input-required-content-offset)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;
+var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, s, a) => {
+  for (var r = a > 1 ? void 0 : a ? S(t, s) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (r = (a ? n(t, s, r) : n(r)) || r);
+  return a && r && k(t, s, r), r;
 };
 let o = class extends f {
   constructor() {
@@ -108,23 +47,23 @@ let o = class extends f {
     ];
   }
   handleRadioClick(e) {
-    const t = e.target.closest("cx-radio, cx-radio-button, cx-radio-card"), a = this.getAllRadios(), s = this.value;
-    !t || t.disabled || (this.value = t.value, a.forEach((r) => r.checked = r === t), this.value !== s && (this.emit("cx-change"), this.emit("cx-input")));
+    const t = e.target.closest("cx-radio, cx-radio-button, cx-radio-card"), s = this.getAllRadios(), a = this.value;
+    !t || t.disabled || (this.value = t.value, s.forEach((r) => r.checked = r === t), this.value !== a && (this.emit("cx-change"), this.emit("cx-input")));
   }
   handleKeyDown(e) {
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(
       e.key
     ))
       return;
-    const t = this.getAllRadios().filter((n) => !n.disabled), a = t.find((n) => n.checked) ?? t[0], s = e.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(e.key) ? -1 : 1, r = this.value;
-    let l = t.indexOf(a) + s;
+    const t = this.getAllRadios().filter((n) => !n.disabled), s = t.find((n) => n.checked) ?? t[0], a = e.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(e.key) ? -1 : 1, r = this.value;
+    let l = t.indexOf(s) + a;
     l < 0 && (l = t.length - 1), l > t.length - 1 && (l = 0), this.getAllRadios().forEach((n) => {
       n.checked = !1, this.hasButtonGroup || n.setAttribute("tabindex", "-1");
     }), this.value = t[l].value, t[l].checked = !0, this.hasButtonGroup ? t[l].shadowRoot.querySelector("button").focus() : (t[l].setAttribute("tabindex", "0"), t[l].focus()), this.value !== r && (this.emit("cx-change"), this.emit("cx-input")), e.preventDefault();
   }
   handleLabelClick() {
-    const e = this.getAllRadios(), a = e.find((s) => s.checked) || e[0];
-    a && a.focus();
+    const e = this.getAllRadios(), s = e.find((a) => a.checked) || e[0];
+    s && s.focus();
   }
   handleInvalid(e) {
     this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(e);
@@ -187,93 +126,23 @@ let o = class extends f {
     this.customValidityMessage = e, this.errorMessage = e, this.validationInput.setCustomValidity(e), this.formControlController.updateValidity();
   }
   render() {
-    const e = this.hasSlotController.test("label"), t = this.hasSlotController.test("help-text"), a = this.label ? !0 : !!e, s = this.helpText ? !0 : !!t, r = u`
-      <slot
-        @slotchange=${this.syncRadios}
-        @click=${this.handleRadioClick}
-        @keydown=${this.handleKeyDown}
-      ></slot>
-    `;
-    return u`
-      <fieldset
-        part="form-control"
-        class=${c({
+    const e = this.hasSlotController.test("label"), t = this.hasSlotController.test("help-text"), s = this.label ? !0 : !!e, a = this.helpText ? !0 : !!t, r = u`<slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>`;
+    return u`<fieldset part="form-control" class=${c({
       "form-control": !0,
-      "form-control--has-help-text": s,
-      "form-control--has-label": a,
+      "form-control--has-help-text": a,
+      "form-control--has-label": s,
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--radio-group": !0,
       "form-control--small": this.size === "small"
-    })}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="help-text"
-        aria-errormessage="error-message"
-      >
-        <label
-          part="form-control-label"
-          id="label"
-          class="form-control__label"
-          aria-hidden=${a ? "false" : "true"}
-          @click=${this.handleLabelClick}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <div part="form-control-input" class="form-control-input">
-          <div class="visually-hidden">
-            <div id="error-message" aria-live="assertive">
-              ${this.errorMessage}
-            </div>
-            <label class="radio-group__validation">
-              <input
-                type="text"
-                class="radio-group__validation-input"
-                ?required=${this.required}
-                tabindex="-1"
-                hidden
-                @invalid=${this.handleInvalid}
-              />
-            </label>
-          </div>
-
-          ${this.hasButtonGroup ? u`
-                <cx-button-group
-                  part="button-group"
-                  exportparts="base:button-group__base"
-                  role="presentation"
-                >
-                  ${r}
-                </cx-button-group>
-              ` : u`
-              <div
-                role="radiogroup"
-                class=${c({
+    })} role="radiogroup" aria-labelledby="label" aria-describedby="help-text" aria-errormessage="error-message"><label part="form-control-label" id="label" class="form-control__label" aria-hidden=${s ? "false" : "true"} @click=${this.handleLabelClick}><slot name="label">${this.label}</slot></label><div part="form-control-input" class="form-control-input"><div class="visually-hidden"><div id="error-message" aria-live="assertive">${this.errorMessage}</div><label class="radio-group__validation"><input type="text" class="radio-group__validation-input" ?required=${this.required} tabindex="-1" hidden @invalid=${this.handleInvalid}></label></div>${this.hasButtonGroup ? u`<cx-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${r}</cx-button-group>` : u`<div role="radiogroup" class=${c({
       "radio-group": !0,
       "radio-group--compact": this.compact,
       "radio-group--filled": this.itemsPerRow < 1,
       "radio-group--horizontal": this.horizontal
-    })}
-                style=${_({
+    })} style=${_({
       "--radio-group-columns": this.itemsPerRow
-    })}
-              >
-                ${r}
-              </div>
-            `}
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${s ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </fieldset>
-    `;
+    })}>${r}</div>`}</div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${a ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></fieldset>`;
   }
 };
 o.styles = [

package/library/components/radio.js

@@ -1,157 +1,17 @@
 import { n as r, C as p } 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 f } from "../chunks/custom-element.L4WJXn1j.js";
 import { H as v } from "../chunks/slot.j5oheLJC.js";
 import { w as h } from "../chunks/watch.BCJD77bD.js";
-import { i as g, b as m, x as k } from "../chunks/lit-element.jLBm65_O.js";
+import { i as g, b as m, x } from "../chunks/lit-element.jLBm65_O.js";
 import { r as u } from "../chunks/state.CSDxrqLd.js";
 import { e as n } from "../chunks/class-map.BiVq-cVR.js";
-import x from "./icon.js";
-const _ = g`
-  :host {
-    display: block;
-  }
-
-  :host(:focus-visible) {
-    outline: 0px;
-  }
-
-  .radio {
-    display: inline-flex;
-    align-items: top;
-    font-family: var(--cx-input-font-family);
-    font-size: var(--cx-input-font-size-medium);
-    font-weight: var(--cx-input-font-weight);
-    color: var(--cx-input-label-color);
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .radio--small {
-    --toggle-size: var(--cx-toggle-size-small);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .radio--medium {
-    --toggle-size: var(--cx-toggle-size-medium);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .radio--large {
-    --toggle-size: var(--cx-toggle-size-large);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .radio__checked-icon {
-    display: inline-flex;
-  }
-
-  .radio__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: 50%;
-    background-color: var(--cx-input-background-color);
-    color: transparent;
-    transition:
-      var(--cx-transition-fast) border-color,
-      var(--cx-transition-fast) background-color,
-      var(--cx-transition-fast) color,
-      var(--cx-transition-fast) box-shadow;
-  }
-
-  .radio__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border-color: var(--cx-input-border-color-hover);
-    background-color: var(--cx-input-background-color-hover);
-  }
-
-  /* Checked */
-  .radio--checked .radio__control {
-    color: var(--checked-color, var(--cx-color-primary));
-    border-color: var(--checked-border-color, var(--cx-color-primary));
-    background-color: var(
-      --checked-background-color,
-      var(--cx-color-neutral-0)
-    );
-  }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border-color: var(--checked-hover-border-color, var(--cx-color-primary));
-    background-color: var(
-      --checked-hover-background-color,
-      var(--cx-color-neutral-0)
-    );
-  }
-
-  /* Checked + focus */
-  :host(:focus-visible) .radio__control {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .radio__control.radio__control--hidden {
-    display: none;
-  }
-
-  /* Disabled */
-  .radio--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-  .radio:not(.radio--checked) svg circle {
-    opacity: 0;
-  }
-
-  .radio__label {
-    display: inline-block;
-    color: var(--cx-input-label-color);
-    flex: 1;
-    line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
-    user-select: none;
-    -webkit-user-select: none;
-    text-transform: var(--cx-radio-label-text-transform, none);
-  }
-
-  .radio__label--hidden {
-    display: none;
-  }
-
-  svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-`, y = (i) => m`
-  <svg part="checked-icon svg" class="radio__icon" viewBox="0 0 16 16">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g fill="currentColor">
-        <circle cx="8" cy="8" r="${i}"></circle>
-      </g>
-    </g>
-  </svg>
-`;
-var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, o = (i, a, c, s) => {
-  for (var t = s > 1 ? void 0 : s ? z(a, c) : a, l = i.length - 1, d; l >= 0; l--)
-    (d = i[l]) && (t = (s ? d(a, c, t) : d(t)) || t);
-  return s && t && C(a, c, t), t;
+import k from "./icon.js";
+const _ = g`:host{display:block}:host(:focus-visible){outline:0}.radio{align-items:top;font-family:var(--cx-input-font-family);font-size:var(--cx-input-font-size-medium);font-weight:var(--cx-input-font-weight);color:var(--cx-input-label-color);vertical-align:middle;cursor:pointer;display:inline-flex}.radio--small{--toggle-size:var(--cx-toggle-size-small);font-size:var(--cx-input-font-size-small)}.radio--medium{--toggle-size:var(--cx-toggle-size-medium);font-size:var(--cx-input-font-size-small)}.radio--large{--toggle-size:var(--cx-toggle-size-large);font-size:var(--cx-input-font-size-small)}.radio__checked-icon{display:inline-flex}.radio__control{width:var(--toggle-size);height:var(--toggle-size);border:solid var(--cx-input-border-width) var(--cx-input-border-color);background-color:var(--cx-input-background-color);color:#0000;transition:var(--cx-transition-fast) border-color, var(--cx-transition-fast) background-color, var(--cx-transition-fast) color, var(--cx-transition-fast) box-shadow;border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.radio__input{opacity:0;pointer-events:none;margin:0;padding:0;position:absolute}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--cx-input-border-color-hover);background-color:var(--cx-input-background-color-hover)}.radio--checked .radio__control{color:var(--checked-color,var(--cx-color-primary));border-color:var(--checked-border-color,var(--cx-color-primary));background-color:var(--checked-background-color,var(--cx-color-neutral-0))}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{border-color:var(--checked-hover-border-color,var(--cx-color-primary));background-color:var(--checked-hover-background-color,var(--cx-color-neutral-0))}:host(:focus-visible) .radio__control{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.radio__control.radio__control--hidden{display:none}.radio--disabled{opacity:.5;cursor:default}.radio:not(.radio--checked) svg circle{opacity:0}.radio__label{color:var(--cx-input-label-color);line-height:var(--toggle-size);-webkit-user-select:none;user-select:none;text-transform:var(--cx-radio-label-text-transform,none);flex:1;margin-inline-start:.5em;display:inline-block}.radio__label--hidden{display:none}svg{width:100%;height:100%;display:block}`, y = (i) => m`<svg part="checked-icon svg" class="radio__icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="currentColor"><circle cx="8" cy="8" r="${i}"></circle></g></g></svg>`;
+var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (i, a, l, s) => {
+  for (var t = s > 1 ? void 0 : s ? C(a, l) : a, c = i.length - 1, d; c >= 0; c--)
+    (d = i[c]) && (t = (s ? d(a, l, t) : d(t)) || t);
+  return s && t && z(a, l, t), t;
 };
 let e = class extends p {
   constructor() {
@@ -179,10 +39,7 @@ let e = class extends p {
     this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
   }
   render() {
-    return k`
-      <span
-        part="base"
-        class=${n({
+    return x`<span part="base" class=${n({
       radio: !0,
       "radio--checked": this.checked,
       "radio--disabled": this.disabled,
@@ -190,31 +47,17 @@ let e = class extends p {
       "radio--large": this.size === "large",
       "radio--medium": this.size === "medium",
       "radio--small": this.size === "small"
-    })}
-      >
-        <span
-          part=${`control${this.checked ? " control--checked" : ""}`}
-          class=${n({
+    })}><span part=${`control${this.checked ? " control--checked" : ""}`} class=${n({
       radio__control: !0,
       "radio__control--hidden": this.hideIndicator
-    })}
-        >
-          ${this.checked ? y(this.checkedIconRadius) : ""}
-        </span>
-
-        <slot
-          part="label"
-          class=${n({
+    })}>${this.checked ? y(this.checkedIconRadius) : ""}</span><slot part="label" class=${n({
       radio__label: !0,
       "radio__label--hidden": !this.hasSlotController.test("[default]")
-    })}
-        ></slot>
-      </span>
-    `;
+    })}></slot></span>`;
   }
 };
 e.styles = [b, _];
-e.dependencies = { "cx-icon": x };
+e.dependencies = { "cx-icon": k };
 o([
   u()
 ], e.prototype, "checked", 2);