@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/swatch/index.js

@@ -15,328 +15,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { y as z, R as v } from "../luzmo-icons-4nDFv1Lq.js";
-import { x as u, r as p, n as l, a as w } from "../base-WsynuqaS.js";
-import { o as x } from "../if-defined-DOaE2coe.js";
-import { n as b } from "../when-CDK1Tt5Y.js";
-import { F as y } from "../focusable-BxtpnzWp.js";
-import { S as m } from "../sized-mixin-D4ACoVUr.js";
-import { s as k } from "../mutation-controller-DH7YOCyj.js";
-import { o as S } from "../query-assigned-elements-DjfhL1cl.js";
-import { R as C } from "../roving-tabindex-DOg4z6ZU.js";
-const g = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const c = document.createElement("style");
-    c.setAttribute("data-luzmo-vars", ""), c.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(c);
-  }
-};
-g();
-const A = '@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-negative-color);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';
-var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (c, e, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? _(e, o) : e, s = c.length - 1, i; s >= 0; s--)
-    (i = c[s]) && (t = (r ? i(e, o, t) : i(t)) || t);
-  return r && t && E(e, o, t), t;
-};
-class a extends m(y, {
-  validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
-  noDefaultSize: !0
-}) {
-  constructor() {
-    super(...arguments), this.color = "", this.label = "", this.mixedValue = !1, this.nothing = !1, this.role = "button", this.selected = !1, this.readonly = !1, this.renderDisabled = () => u`
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="disabled-icon"
-      viewBox="0 0 20 20"
-    >
-      <path
-        d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
-        stroke="none"
-        fill="var(--swatch-disabled-icon-color)"
-      />
-      <path
-        d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
-        stroke="none"
-        fill="var(--swatch-disabled-icon-stroke-color)"
-      />
-    </svg>
-  `, this.renderMixedValue = () => z(v);
-  }
-  static get styles() {
-    return [p(A)];
-  }
-  get value() {
-    return this._value || this.color || this.label;
-  }
-  set value(e) {
-    if (e === this._value)
-      return;
-    const o = this.value;
-    this._value = e, this.requestUpdate("value", o);
-  }
-  get focusElement() {
-    return this;
-  }
-  toggle(e) {
-    this.readonly || (this.selected = e ?? !this.selected);
-  }
-  handleClick() {
-    if (this.disabled || this.mixedValue)
-      return;
-    this.toggle(), this.dispatchEvent(
-      new Event("change", {
-        cancelable: !0,
-        bubbles: !0
-      })
-    ) || this.toggle();
-  }
-  handleKeydown(e) {
-    const { code: o } = e;
-    switch (o) {
-      case "Space": {
-        e.preventDefault(), this.addEventListener("keyup", this.handleKeyup);
-        break;
-      }
-    }
-  }
-  handleKeypress(e) {
-    const { code: o } = e;
-    switch (o) {
-      case "Enter":
-      case "NumpadEnter": {
-        this.click();
-        break;
-      }
-    }
-  }
-  handleKeyup(e) {
-    const { code: o } = e;
-    switch (o) {
-      case "Space": {
-        this.removeEventListener("keyup", this.handleKeyup), this.click();
-        break;
-      }
-    }
-  }
-  render() {
-    return u`
-      <div
-        class="opacity-checkerboard fill"
-        style=${x(
-      this.color ? `--picked-color: ${this.color}` : void 0
-    )}
-      >
-        <slot name="image"></slot>
-        ${b(this.disabled, this.renderDisabled)}
-        ${b(this.mixedValue, this.renderMixedValue)}
-      </div>
-    `;
-  }
-  willUpdate(e) {
-    var o;
-    if (this.getAttribute("role") || this.setAttribute("role", "button"), (e.has("selected") || e.has("role")) && !this.readonly) {
-      const r = this.role === "button" ? "aria-pressed" : "aria-checked", t = this.role === "button" ? "aria-checked" : "aria-pressed";
-      e.has("role") && this.removeAttribute(t), this.setAttribute(r, this.selected ? "true" : "false");
-    }
-    (e.has("label") || e.has("color") || e.has("mixedValue")) && (this.label !== this.color && ((o = this.label) != null && o.length) ? this.setAttribute("aria-label", this.label) : this.color ? this.setAttribute("aria-label", this.color) : this.mixedValue ? this.setAttribute("aria-label", "Mixed") : this.removeAttribute("aria-label"));
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("keypress", this.handleKeypress), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
-  }
-}
-n([
-  l({ reflect: !0 })
-], a.prototype, "border", 2);
-n([
-  l()
-], a.prototype, "color", 2);
-n([
-  l()
-], a.prototype, "label", 2);
-n([
-  l({ type: Boolean, reflect: !0, attribute: "mixed-value" })
-], a.prototype, "mixedValue", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "nothing", 2);
-n([
-  l({ reflect: !0 })
-], a.prototype, "role", 2);
-n([
-  l({ reflect: !0 })
-], a.prototype, "rounding", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "selected", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "readonly", 2);
-n([
-  l({ reflect: !0 })
-], a.prototype, "shape", 2);
-n([
-  l()
-], a.prototype, "value", 1);
-const D = ":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular, var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact, var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious, var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact: 2px;--swatch-group-spacing-regular: 4px;--swatch-group-spacing-spacious: 8px}";
-var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, h = (c, e, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? M(e, o) : e, s = c.length - 1, i; s >= 0; s--)
-    (i = c[s]) && (t = (r ? i(e, o, t) : i(t)) || t);
-  return r && t && L(e, o, t), t;
-};
-class d extends m(w, {
-  validSizes: ["xs", "s", "m", "l"],
-  noDefaultSize: !0
-}) {
-  constructor() {
-    super(), this._selected = [], this.selectedSet = /* @__PURE__ */ new Set(), this.rovingTabindexController = new C(this, {
-      focusInIndex: (e) => {
-        let o = -1;
-        const r = e.findIndex((t, s) => (!e[o] && !t.disabled && (o = s), t.selected && !t.disabled));
-        return e[r] ? r : o;
-      },
-      elements: () => this.swatches,
-      isFocusableElement: (e) => !e.disabled
-    }), this.manageChange = async () => {
-      const e = /* @__PURE__ */ new Set();
-      this.selectedSet = new Set(this.selected), await Promise.all(this.swatches.map((o) => o.updateComplete)), this.swatches.forEach((o) => {
-        e.add(o.value), o.selected && this.selectedSet.add(o.value);
-      }), this.selectedSet.forEach((o) => {
-        e.has(o) || this.selectedSet.delete(o);
-      }), this._selected = [...this.selectedSet], this.rovingTabindexController.clearElementCache();
-    }, new k(this, {
-      config: {
-        attributes: !0,
-        childList: !0,
-        subtree: !0
-      },
-      callback: () => {
-        this.manageChange();
-      }
-    });
-  }
-  static get styles() {
-    return [p(D)];
-  }
-  get selected() {
-    return this._selected;
-  }
-  set selected(e) {
-    if (e === this.selected)
-      return;
-    const o = this.selected;
-    this._selected = e, this.requestUpdate("selected", o);
-  }
-  focus(e) {
-    this.rovingTabindexController.focus(e);
-  }
-  handleChange(e) {
-    e.stopPropagation();
-    const o = this.selected;
-    if (!this.selects) {
-      e.preventDefault();
-      return;
-    }
-    if (this.selects === "single") {
-      const { target: t } = e;
-      if (t.tabIndex = 0, t.selected = !0, this.selectedSet.has(t.value))
-        return;
-      this.selectedSet.clear(), this.selectedSet.add(t.value), this.rovingTabindexController.elements.forEach((s) => {
-        s !== t && (s.selected = !1);
-      });
-    } else if (this.selects === "multiple") {
-      const { target: t } = e;
-      t.selected ? this.selectedSet.add(t.value) : this.selectedSet.delete(t.value);
-    }
-    this._selected = [...this.selectedSet], this.dispatchEvent(
-      new Event("change", {
-        cancelable: !0,
-        bubbles: !0
-      })
-    ) || (this._selected = o, e.preventDefault());
-  }
-  getPassthroughSwatchActions(e) {
-    const o = {};
-    e.has("selects") && (this.selects || e.get("selects") !== void 0) && (o.selects = this.selects), e.has("border") && (this.border || e.get("border") !== void 0) && (o.border = this.border), e.has("rounding") && (this.rounding || e.get("rounding") !== void 0) && (o.rounding = this.rounding), e.has("size") && (this.size !== "m" || e.get("size") !== void 0) && (o.size = this.size), e.has("shape") && (this.shape || e.get("shape") !== void 0) && (o.shape = this.shape);
-    const r = [];
-    return Object.keys(o).length > 0 && r.push((t) => {
-      "border" in o && (t.border = o.border), "rounding" in o && (t.rounding = o.rounding), "shape" in o && (t.shape = o.shape), "size" in o && (t.size = o.size);
-    }), r;
-  }
-  getSelectionSwatchActions(e) {
-    const o = [];
-    if (!e.has("selects"))
-      return o;
-    this.selects ? this.setAttribute(
-      "role",
-      this.selects === "single" ? "radiogroup" : "group"
-    ) : this.removeAttribute("role");
-    const r = {
-      single: "radio",
-      multiple: "checkbox"
-    }, t = this.selects ? r[this.selects] : "button";
-    return o.push((s) => {
-      s.setAttribute("role", t);
-    }), o;
-  }
-  render() {
-    return u`
-      <slot
-        @change=${this.handleChange}
-        @slotchange=${this.manageChange}
-      ></slot>
-    `;
-  }
-  willUpdate(e) {
-    const o = [
-      ...this.getPassthroughSwatchActions(e),
-      ...this.getSelectionSwatchActions(e)
-    ];
-    let r = new Set(this.selected);
-    const t = /* @__PURE__ */ new Set();
-    e.has("selected") && o.push((i) => {
-      t.add(i.value), i.selected = !!(r.has(i.value) || !this.hasUpdated && i.selected);
-    });
-    const s = () => {
-      r = new Set(this.selected), this.swatches.forEach((i) => {
-        o.forEach((f) => {
-          f(i);
-        });
-      }), e.has("selected") && (this._selected = [...r.values()].filter(
-        (i) => t.has(i)
-      ));
-    };
-    this.hasUpdated ? s() : this.renderRoot.addEventListener(
-      "slotchange",
-      () => {
-        requestAnimationFrame(s);
-      },
-      { once: !0 }
-    );
-  }
-}
-h([
-  l({ reflect: !0 })
-], d.prototype, "border", 2);
-h([
-  l({ reflect: !0 })
-], d.prototype, "density", 2);
-h([
-  l({ reflect: !0 })
-], d.prototype, "rounding", 2);
-h([
-  l({ type: Array })
-], d.prototype, "selected", 1);
-h([
-  l()
-], d.prototype, "selects", 2);
-h([
-  l({ reflect: !0 })
-], d.prototype, "shape", 2);
-h([
-  S({ flatten: !0 })
-], d.prototype, "swatches", 2);
-customElements.get("luzmo-swatch") || customElements.define("luzmo-swatch", a);
-customElements.get("luzmo-swatch-group") || customElements.define("luzmo-swatch-group", d);
-export {
-  a as LuzmoSwatch,
-  d as LuzmoSwatchGroup
-};
+(() => {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let e = document.createElement("style");
+		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 45%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-informative-color: #1670dd;--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
+	}
+})();
+import { n as e, t } from "../swatch-BLuV-hlF.js";
+export { e as LuzmoSwatch, t as LuzmoSwatchGroup };

package/components/swatch-BLuV-hlF.js

@@ -0,0 +1,271 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "./decorate-aGxJUVxg.js";
+import { n } from "./sized-mixin-DaBoZkVS.js";
+import { t as r } from "./focusable-BmS8IzhH.js";
+import { t as i } from "./roving-tabindex-BP6mQbXf.js";
+import { html as a, unsafeCSS as o } from "lit";
+import { property as s, queryAssignedElements as c } from "lit/decorators.js";
+import { luzmoDash as l, luzmoIcon as u } from "@luzmo/icons";
+import { when as d } from "lit/directives/when.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { MutationController as p } from "@lit-labs/observers/mutation-controller.js";
+//#region src/components/swatch/swatch.module.scss?inline
+var m = "@media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size,var(--swatch-size));block-size:var(--luzmo-swatch-size,var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size,var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size,var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius,var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--luzmo-swatch-inner-border-color-selected,var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--picked-color,transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness,var(--swatch-slash-thickness));content:\"\";background:var(--highcontrast-swatch-fill-foreground-color,var(--luzmo-swatch-slash-icon-color,var(--swatch-slash-icon-color)));block-size:200%;position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon,:host([disabled]) .disabled-icon{display:block}:host:before{content:\"\";opacity:0;pointer-events:none;position:absolute;inset:0;border-width:var(--luzmo-swatch-border-thickness-selected,var(--swatch-border-thickness-selected))!important;border-style:solid!important;border-color:var(--highcontrast-swatch-border-color-selected,var(--luzmo-swatch-border-color-selected,var(--swatch-border-color-selected)))!important}:host:after{content:\"\";inset:calc(var(--luzmo-swatch-focus-indicator-gap,var(--swatch-focus-indicator-gap)) * -2);background-color:var(--luzmo-swatch-focus-indicator-background-color,var(--luzmo-background-color));z-index:-1;opacity:0;border-radius:var(--luzmo-swatch-focus-indicator-border-radius,var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute;border-width:var(--luzmo-swatch-focus-indicator-width,var(--swatch-focus-indicator-width))!important;border-style:solid!important;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-swatch-focus-indicator-color,var(--swatch-focus-indicator-color)))!important}:host(:focus-visible):after{opacity:1}.fill{box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius,var(--swatch-border-radius));justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness,var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color,var(--luzmo-swatch-border-color,var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius,var(--swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:var(--picked-color,transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--luzmo-swatch-disabled-icon-color,var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--luzmo-swatch-disabled-icon-color,var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--luzmo-swatch-disabled-icon-color,var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color,var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size,var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size,var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected,var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap,var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size,var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected,var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap,var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size,var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected,var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap,var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;block-size:100%;inline-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out, height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size:var(--luzmo-component-height-xl);--swatch-disabled-icon-size:24px;--swatch-slash-thickness:6px}:host([size=l]){--swatch-size:var(--luzmo-component-height-l);--swatch-disabled-icon-size:20px;--swatch-slash-thickness:5px}:host([size=s]){--swatch-size:var(--luzmo-component-height-s);--swatch-disabled-icon-size:16px;--swatch-slash-thickness:3px}:host([size=xs]){--swatch-size:var(--luzmo-component-height-xs);--swatch-disabled-icon-size:16px;--swatch-slash-thickness:2px}:host([size=xxs]){--swatch-size:var(--luzmo-component-height-xxs);--swatch-disabled-icon-size:14px;--swatch-slash-thickness:2px}:host{--swatch-size:var(--luzmo-component-height);--swatch-disabled-icon-size:18px;--swatch-slash-thickness:4px;--swatch-border-radius:var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius:var(--luzmo-border-radius-s);--swatch-border-thickness:var(--luzmo-border-width);--swatch-border-thickness-selected:var(--luzmo-border-width);--swatch-focus-indicator-width:var(--luzmo-indicator-width);--swatch-focus-indicator-gap:var(--luzmo-indicator-gap);--swatch-border-color:var(--luzmo-border-color-down);--swatch-icon-border-color:var(--luzmo-border-color);--swatch-border-color-selected:var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected:var(--luzmo-background-color);--swatch-disabled-icon-color:#fff;--swatch-dash-icon-color:var(--luzmo-font-color);--swatch-slash-icon-color:var(--luzmo-negative-color);--swatch-focus-indicator-color:var(--luzmo-primary)}.fill:before,:host([border=none]) .fill:before{background:var(--picked-color,transparent)}:host .is-image .fill:before{background:0 0}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light,#fff) 0 25%, var(--luzmo-swatch-checkerboard-dark,#e6e6e6) 0 50%) var(--luzmo-swatch-checkerboard-position,left top)/calc(var(--luzmo-swatch-checkerboard-size,8px) * 2) calc(var(--luzmo-swatch-checkerboard-size,8px) * 2)}", h = class extends n(r, {
+	validSizes: [
+		"xxs",
+		"xs",
+		"s",
+		"m",
+		"l",
+		"xl"
+	],
+	noDefaultSize: !0
+}) {
+	constructor(...e) {
+		super(...e), this.color = "", this.label = "", this.mixedValue = !1, this.nothing = !1, this.role = "button", this.selected = !1, this.readonly = !1, this.renderDisabled = () => a`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="disabled-icon"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
+        stroke="none"
+        fill="var(--swatch-disabled-icon-color)"
+      />
+      <path
+        d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
+        stroke="none"
+        fill="var(--swatch-disabled-icon-stroke-color)"
+      />
+    </svg>
+  `, this.renderMixedValue = () => u(l);
+	}
+	static get styles() {
+		return [o(m)];
+	}
+	get value() {
+		return this._value || this.color || this.label;
+	}
+	set value(e) {
+		if (e === this._value) return;
+		let t = this.value;
+		this._value = e, this.requestUpdate("value", t);
+	}
+	get focusElement() {
+		return this;
+	}
+	toggle(e) {
+		this.readonly || (this.selected = e ?? !this.selected);
+	}
+	handleClick() {
+		this.disabled || this.mixedValue || (this.toggle(), this.dispatchEvent(new Event("change", {
+			cancelable: !0,
+			bubbles: !0
+		})) || this.toggle());
+	}
+	handleKeydown(e) {
+		let { code: t } = e;
+		switch (t) {
+			case "Space":
+				e.preventDefault(), this.addEventListener("keyup", this.handleKeyup);
+				break;
+			/* c8 ignore next 2 */
+			default: break;
+		}
+	}
+	handleKeypress(e) {
+		let { code: t } = e;
+		switch (t) {
+			case "Enter":
+			case "NumpadEnter":
+				this.click();
+				break;
+			/* c8 ignore next 2 */
+			default: break;
+		}
+	}
+	handleKeyup(e) {
+		let { code: t } = e;
+		switch (t) {
+			case "Space":
+				this.removeEventListener("keyup", this.handleKeyup), this.click();
+				break;
+			/* c8 ignore next 2 */
+			default: break;
+		}
+	}
+	render() {
+		return a`
+      <div
+        class="opacity-checkerboard fill"
+        style=${f(this.color ? `--picked-color: ${this.color}` : void 0)}
+      >
+        <slot name="image"></slot>
+        ${d(this.disabled, this.renderDisabled)}
+        ${d(this.mixedValue, this.renderMixedValue)}
+      </div>
+    `;
+	}
+	willUpdate(e) {
+		if (this.getAttribute("role") || this.setAttribute("role", "button"), (e.has("selected") || e.has("role")) && !this.readonly) {
+			let t = this.role === "button" ? "aria-pressed" : "aria-checked", n = this.role === "button" ? "aria-checked" : "aria-pressed";
+			e.has("role") && this.removeAttribute(n), this.setAttribute(t, this.selected ? "true" : "false");
+		}
+		(e.has("label") || e.has("color") || e.has("mixedValue") || e.has("nothing")) && (this.label !== this.color && this.label?.length ? this.setAttribute("aria-label", this.label) : this.color ? this.setAttribute("aria-label", this.color) : this.mixedValue ? this.setAttribute("aria-label", "Mixed") : this.nothing ? this.setAttribute("aria-label", "None") : this.removeAttribute("aria-label"));
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("keypress", this.handleKeypress), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
+	}
+};
+t([s({ reflect: !0 })], h.prototype, "border", void 0), t([s()], h.prototype, "color", void 0), t([s()], h.prototype, "label", void 0), t([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "mixed-value"
+})], h.prototype, "mixedValue", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "nothing", void 0), t([s({ reflect: !0 })], h.prototype, "role", void 0), t([s({ reflect: !0 })], h.prototype, "rounding", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "selected", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "readonly", void 0), t([s({ reflect: !0 })], h.prototype, "shape", void 0), t([s()], h.prototype, "value", null);
+//#endregion
+//#region src/components/swatch/swatch-group.module.scss?inline
+var g = ":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular,var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact,var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious,var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact:2px;--swatch-group-spacing-regular:4px;--swatch-group-spacing-spacious:8px}", _ = class extends n(e, {
+	validSizes: [
+		"xs",
+		"s",
+		"m",
+		"l"
+	],
+	noDefaultSize: !0
+}) {
+	static get styles() {
+		return [o(g)];
+	}
+	get selected() {
+		return this._selected;
+	}
+	set selected(e) {
+		if (e === this.selected) return;
+		let t = this.selected;
+		this._selected = e, this.requestUpdate("selected", t);
+	}
+	constructor() {
+		super(), this._selected = [], this.selectedSet = /* @__PURE__ */ new Set(), this.rovingTabindexController = new i(this, {
+			focusInIndex: (e) => {
+				let t = -1, n = e.findIndex((n, r) => (!e[t] && !n.disabled && (t = r), n.selected && !n.disabled));
+				return e[n] ? n : t;
+			},
+			elements: () => this.swatches,
+			isFocusableElement: (e) => !e.disabled
+		}), this.manageChange = async () => {
+			let e = /* @__PURE__ */ new Set();
+			this.selectedSet = new Set(this.selected), await Promise.all(this.swatches.map((e) => e.updateComplete)), this.swatches.forEach((t) => {
+				e.add(t.value), t.selected && this.selectedSet.add(t.value);
+			}), this.selectedSet.forEach((t) => {
+				e.has(t) || this.selectedSet.delete(t);
+			}), this._selected = [...this.selectedSet], this.rovingTabindexController.clearElementCache();
+		}, new p(this, {
+			config: {
+				attributes: !0,
+				childList: !0,
+				subtree: !0
+			},
+			callback: () => {
+				this.manageChange();
+			}
+		});
+	}
+	focus(e) {
+		this.rovingTabindexController.focus(e);
+	}
+	handleChange(e) {
+		e.stopPropagation();
+		let t = this.selected;
+		if (!this.selects) {
+			e.preventDefault();
+			return;
+		}
+		if (this.selects === "single") {
+			let { target: t } = e;
+			if (t.tabIndex = 0, t.selected = !0, this.selectedSet.has(t.value)) return;
+			this.selectedSet.clear(), this.selectedSet.add(t.value), this.rovingTabindexController.elements.forEach((e) => {
+				e !== t && (e.selected = !1);
+			});
+		} else if (this.selects === "multiple") {
+			let { target: t } = e;
+			t.selected ? this.selectedSet.add(t.value) : this.selectedSet.delete(t.value);
+		}
+		this._selected = [...this.selectedSet], this.dispatchEvent(new Event("change", {
+			cancelable: !0,
+			bubbles: !0
+		})) || (this._selected = t, e.preventDefault());
+	}
+	getPassthroughSwatchActions(e) {
+		let t = {};
+		e.has("selects") && (this.selects || e.get("selects") !== void 0) && (t.selects = this.selects), e.has("border") && (this.border || e.get("border") !== void 0) && (t.border = this.border), e.has("rounding") && (this.rounding || e.get("rounding") !== void 0) && (t.rounding = this.rounding), e.has("size") && (this.size !== "m" || e.get("size") !== void 0) && (t.size = this.size), e.has("shape") && (this.shape || e.get("shape") !== void 0) && (t.shape = this.shape);
+		let n = [];
+		return Object.keys(t).length > 0 && n.push((e) => {
+			"border" in t && (e.border = t.border), "rounding" in t && (e.rounding = t.rounding), "shape" in t && (e.shape = t.shape), "size" in t && (e.size = t.size);
+		}), n;
+	}
+	getSelectionSwatchActions(e) {
+		let t = [];
+		if (!e.has("selects")) return t;
+		this.selects ? this.setAttribute("role", this.selects === "single" ? "radiogroup" : "group") : this.removeAttribute("role");
+		let n = this.selects ? {
+			single: "radio",
+			multiple: "checkbox"
+		}[this.selects] : "button";
+		return t.push((e) => {
+			e.setAttribute("role", n);
+		}), t;
+	}
+	render() {
+		return a`
+      <slot
+        @change=${this.handleChange}
+        @slotchange=${this.manageChange}
+      ></slot>
+    `;
+	}
+	willUpdate(e) {
+		let t = [...this.getPassthroughSwatchActions(e), ...this.getSelectionSwatchActions(e)], n = new Set(this.selected), r = /* @__PURE__ */ new Set();
+		e.has("selected") && t.push((e) => {
+			r.add(e.value), e.selected = !!(n.has(e.value) || !this.hasUpdated && e.selected);
+		});
+		let i = () => {
+			n = new Set(this.selected), this.swatches.forEach((e) => {
+				t.forEach((t) => {
+					t(e);
+				});
+			}), e.has("selected") && (this._selected = [...n.values()].filter((e) => r.has(e)));
+		};
+		this.hasUpdated ? i() : this.renderRoot.addEventListener("slotchange", () => {
+			requestAnimationFrame(i);
+		}, { once: !0 });
+	}
+};
+t([s({ reflect: !0 })], _.prototype, "border", void 0), t([s({ reflect: !0 })], _.prototype, "density", void 0), t([s({ reflect: !0 })], _.prototype, "rounding", void 0), t([s({ type: Array })], _.prototype, "selected", null), t([s()], _.prototype, "selects", void 0), t([s({ reflect: !0 })], _.prototype, "shape", void 0), t([c({ flatten: !0 })], _.prototype, "swatches", void 0), customElements.get("luzmo-swatch") || customElements.define("luzmo-swatch", h), customElements.get("luzmo-swatch-group") || customElements.define("luzmo-swatch-group", _);
+//#endregion
+export { h as n, _ as t };