@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/swatch/index.cjs

@@ -15,43 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const icons = require("@luzmo/icons");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ifDefined_js = require("lit/directives/if-defined.js");
-const when_js = require("lit/directives/when.js");
-const focusable = require("../focusable-BPrTcZPd.cjs");
-const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
-const mutationController_js = require("@lit-labs/observers/mutation-controller.js");
-const base = require("../base-COw9n7UR.cjs");
-const rovingTabindex = require("../roving-tabindex-AsmAh2In.cjs");
-const styles$1 = '@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);background-color:var(--luzmo-swatch-focus-indicator-background-color, var(--luzmo-background-color));z-index:-1;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 __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
-};
-class LuzmoSwatch extends sizedMixin.SizedMixin(focusable.Focusable, {
-  validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
-  noDefaultSize: true
-}) {
-  constructor() {
-    super(...arguments);
-    this.color = "";
-    this.label = "";
-    this.mixedValue = false;
-    this.nothing = false;
-    this.role = "button";
-    this.selected = false;
-    this.readonly = false;
-    this.renderDisabled = () => lit.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../luzmo-icons-CtA-TJPd.cjs"),r=require("../base-Cy0MQrPT.cjs"),g=require("../if-defined-DaXWqfzc.cjs"),b=require("../when-CDZyJPvd.cjs"),v=require("../focusable-B_KwfEec.cjs"),p=require("../sized-mixin-WPHH0a_D.cjs"),w=require("../mutation-controller-DkOMCW-c.cjs"),m=require("../query-assigned-elements-DsKsfk7G.cjs"),z=require("../roving-tabindex-By_fCy_e.cjs"),x='@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);background-color:var(--luzmo-swatch-focus-indicator-background-color, var(--luzmo-background-color));z-index:-1;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 y=Object.defineProperty,k=Object.getOwnPropertyDescriptor,l=(h,e,t,o)=>{for(var s=o>1?void 0:o?k(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&y(e,t,s),s};class c extends p.SizedMixin(v.Focusable,{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=()=>r.x`
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="disabled-icon"
@@ -68,411 +32,18 @@ class LuzmoSwatch extends sizedMixin.SizedMixin(focusable.Focusable, {
         fill="var(--swatch-disabled-icon-stroke-color)"
       />
     </svg>
-  `;
-    this.renderMixedValue = () => icons.luzmoIcon(icons.luzmoDash);
-  }
-  static get styles() {
-    return [lit.unsafeCSS(styles$1)];
-  }
-  get value() {
-    return this._value || this.color || this.label;
-  }
-  set value(value) {
-    if (value === this._value) {
-      return;
-    }
-    const oldValue = this.value;
-    this._value = value;
-    this.requestUpdate("value", oldValue);
-  }
-  get focusElement() {
-    return this;
-  }
-  toggle(force) {
-    if (!this.readonly) {
-      this.selected = force ?? !this.selected;
-    }
-  }
-  handleClick() {
-    if (this.disabled || this.mixedValue) {
-      return;
-    }
-    this.toggle();
-    const applyDefault = this.dispatchEvent(
-      new Event("change", {
-        cancelable: true,
-        bubbles: true
-      })
-    );
-    if (!applyDefault) {
-      this.toggle();
-    }
-  }
-  handleKeydown(event) {
-    const { code } = event;
-    switch (code) {
-      case "Space": {
-        event.preventDefault();
-        this.addEventListener("keyup", this.handleKeyup);
-        break;
-      }
-    }
-  }
-  handleKeypress(event) {
-    const { code } = event;
-    switch (code) {
-      case "Enter":
-      case "NumpadEnter": {
-        this.click();
-        break;
-      }
-    }
-  }
-  handleKeyup(event) {
-    const { code } = event;
-    switch (code) {
-      case "Space": {
-        this.removeEventListener("keyup", this.handleKeyup);
-        this.click();
-        break;
-      }
-    }
-  }
-  render() {
-    return lit.html`
+  `,this.renderMixedValue=()=>u.T3(u.R)}static get styles(){return[r.r(x)]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}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:t}=e;switch(t){case"Space":{e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break}}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":{this.click();break}}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":{this.removeEventListener("keyup",this.handleKeyup),this.click();break}}}render(){return r.x`
       <div
         class="opacity-checkerboard fill"
-        style=${ifDefined_js.ifDefined(
-      this.color ? `--picked-color: ${this.color}` : void 0
-    )}
+        style=${g.o(this.color?`--picked-color: ${this.color}`:void 0)}
       >
         <slot name="image"></slot>
-        ${when_js.when(this.disabled, this.renderDisabled)}
-        ${when_js.when(this.mixedValue, this.renderMixedValue)}
+        ${b.n(this.disabled,this.renderDisabled)}
+        ${b.n(this.mixedValue,this.renderMixedValue)}
       </div>
-    `;
-  }
-  willUpdate(changes) {
-    var _a;
-    if (!this.getAttribute("role")) {
-      this.setAttribute("role", "button");
-    }
-    if ((changes.has("selected") || changes.has("role")) && !this.readonly) {
-      const selectedAttribute = this.role === "button" ? "aria-pressed" : "aria-checked";
-      const removedSelectedAttribute = this.role === "button" ? "aria-checked" : "aria-pressed";
-      if (changes.has("role")) {
-        this.removeAttribute(removedSelectedAttribute);
-      }
-      this.setAttribute(selectedAttribute, this.selected ? "true" : "false");
-    }
-    if (changes.has("label") || changes.has("color") || changes.has("mixedValue")) {
-      if (this.label !== this.color && ((_a = this.label) == null ? void 0 : _a.length)) {
-        this.setAttribute("aria-label", this.label);
-      } else if (this.color) {
-        this.setAttribute("aria-label", this.color);
-      } else if (this.mixedValue) {
-        this.setAttribute("aria-label", "Mixed");
-      } else {
-        this.removeAttribute("aria-label");
-      }
-    }
-  }
-  firstUpdated(changes) {
-    super.firstUpdated(changes);
-    this.addEventListener("click", this.handleClick);
-    this.addEventListener("keydown", this.handleKeydown);
-    this.addEventListener("keypress", this.handleKeypress);
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-  }
-}
-__decorateClass$1([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatch.prototype, "border", 2);
-__decorateClass$1([
-  decorators_js.property()
-], LuzmoSwatch.prototype, "color", 2);
-__decorateClass$1([
-  decorators_js.property()
-], LuzmoSwatch.prototype, "label", 2);
-__decorateClass$1([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "mixed-value" })
-], LuzmoSwatch.prototype, "mixedValue", 2);
-__decorateClass$1([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoSwatch.prototype, "nothing", 2);
-__decorateClass$1([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatch.prototype, "role", 2);
-__decorateClass$1([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatch.prototype, "rounding", 2);
-__decorateClass$1([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoSwatch.prototype, "selected", 2);
-__decorateClass$1([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoSwatch.prototype, "readonly", 2);
-__decorateClass$1([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatch.prototype, "shape", 2);
-__decorateClass$1([
-  decorators_js.property()
-], LuzmoSwatch.prototype, "value", 1);
-const styles = ":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 __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-class LuzmoSwatchGroup extends sizedMixin.SizedMixin(base.LuzmoElement, {
-  validSizes: ["xs", "s", "m", "l"],
-  noDefaultSize: true
-}) {
-  constructor() {
-    super();
-    this._selected = [];
-    this.selectedSet = /* @__PURE__ */ new Set();
-    this.rovingTabindexController = new rovingTabindex.RovingTabindexController(this, {
-      focusInIndex: (elements) => {
-        let firstEnabledIndex = -1;
-        const firstSelectedIndex = elements.findIndex((el, index) => {
-          if (!elements[firstEnabledIndex] && !el.disabled) {
-            firstEnabledIndex = index;
-          }
-          return el.selected && !el.disabled;
-        });
-        return elements[firstSelectedIndex] ? firstSelectedIndex : firstEnabledIndex;
-      },
-      elements: () => this.swatches,
-      isFocusableElement: (el) => !el.disabled
-    });
-    this.manageChange = async () => {
-      const presentSet = /* @__PURE__ */ new Set();
-      this.selectedSet = new Set(this.selected);
-      await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));
-      this.swatches.forEach((swatch) => {
-        presentSet.add(swatch.value);
-        if (swatch.selected) {
-          this.selectedSet.add(swatch.value);
-        }
-      });
-      this.selectedSet.forEach((value) => {
-        if (!presentSet.has(value)) {
-          this.selectedSet.delete(value);
-        }
-      });
-      this._selected = [...this.selectedSet];
-      this.rovingTabindexController.clearElementCache();
-    };
-    new mutationController_js.MutationController(this, {
-      config: {
-        attributes: true,
-        childList: true,
-        subtree: true
-      },
-      callback: () => {
-        this.manageChange();
-      }
-    });
-  }
-  static get styles() {
-    return [lit.unsafeCSS(styles)];
-  }
-  get selected() {
-    return this._selected;
-  }
-  set selected(selected) {
-    if (selected === this.selected) {
-      return;
-    }
-    const oldSelected = this.selected;
-    this._selected = selected;
-    this.requestUpdate("selected", oldSelected);
-  }
-  focus(options) {
-    this.rovingTabindexController.focus(options);
-  }
-  handleChange(event) {
-    event.stopPropagation();
-    const oldSelected = this.selected;
-    if (!this.selects) {
-      event.preventDefault();
-      return;
-    }
-    if (this.selects === "single") {
-      const { target } = event;
-      target.tabIndex = 0;
-      target.selected = true;
-      if (this.selectedSet.has(target.value)) {
-        return;
-      }
-      this.selectedSet.clear();
-      this.selectedSet.add(target.value);
-      this.rovingTabindexController.elements.forEach((child) => {
-        if (child === target) {
-          return;
-        }
-        child.selected = false;
-      });
-    } else if (this.selects === "multiple") {
-      const { target } = event;
-      if (target.selected) {
-        this.selectedSet.add(target.value);
-      } else {
-        this.selectedSet.delete(target.value);
-      }
-    }
-    this._selected = [...this.selectedSet];
-    const applyDefault = this.dispatchEvent(
-      new Event("change", {
-        cancelable: true,
-        bubbles: true
-      })
-    );
-    if (!applyDefault) {
-      this._selected = oldSelected;
-      event.preventDefault();
-    }
-  }
-  getPassthroughSwatchActions(changes) {
-    const targetValues = {};
-    if (changes.has("selects") && (this.selects || changes.get("selects") !== void 0)) {
-      targetValues.selects = this.selects;
-    }
-    if (changes.has("border") && (this.border || changes.get("border") !== void 0)) {
-      targetValues.border = this.border;
-    }
-    if (changes.has("rounding") && (this.rounding || changes.get("rounding") !== void 0)) {
-      targetValues.rounding = this.rounding;
-    }
-    if (changes.has("size") && (this.size !== "m" || changes.get("size") !== void 0)) {
-      targetValues.size = this.size;
-    }
-    if (changes.has("shape") && (this.shape || changes.get("shape") !== void 0)) {
-      targetValues.shape = this.shape;
-    }
-    const passThroughSwatchActions = [];
-    if (Object.keys(targetValues).length > 0) {
-      passThroughSwatchActions.push((swatch) => {
-        if ("border" in targetValues) {
-          swatch.border = targetValues.border;
-        }
-        if ("rounding" in targetValues) {
-          swatch.rounding = targetValues.rounding;
-        }
-        if ("shape" in targetValues) {
-          swatch.shape = targetValues.shape;
-        }
-        if ("size" in targetValues) {
-          swatch.size = targetValues.size;
-        }
-      });
-    }
-    return passThroughSwatchActions;
-  }
-  getSelectionSwatchActions(changes) {
-    const selectionSwatchActions = [];
-    if (!changes.has("selects")) {
-      return selectionSwatchActions;
-    }
-    if (this.selects) {
-      this.setAttribute(
-        "role",
-        this.selects === "single" ? "radiogroup" : "group"
-      );
-    } else {
-      this.removeAttribute("role");
-    }
-    const swatchRoles = {
-      single: "radio",
-      multiple: "checkbox"
-    };
-    const swatchRole = this.selects ? swatchRoles[this.selects] : "button";
-    selectionSwatchActions.push((swatch) => {
-      swatch.setAttribute("role", swatchRole);
-    });
-    return selectionSwatchActions;
-  }
-  render() {
-    return lit.html`
+    `}willUpdate(e){var t;if(this.getAttribute("role")||this.setAttribute("role","button"),(e.has("selected")||e.has("role"))&&!this.readonly){const o=this.role==="button"?"aria-pressed":"aria-checked",s=this.role==="button"?"aria-checked":"aria-pressed";e.has("role")&&this.removeAttribute(s),this.setAttribute(o,this.selected?"true":"false")}(e.has("label")||e.has("color")||e.has("mixedValue"))&&(this.label!==this.color&&((t=this.label)!=null&&t.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")}}l([r.n({reflect:!0})],c.prototype,"border",2);l([r.n()],c.prototype,"color",2);l([r.n()],c.prototype,"label",2);l([r.n({type:Boolean,reflect:!0,attribute:"mixed-value"})],c.prototype,"mixedValue",2);l([r.n({type:Boolean,reflect:!0})],c.prototype,"nothing",2);l([r.n({reflect:!0})],c.prototype,"role",2);l([r.n({reflect:!0})],c.prototype,"rounding",2);l([r.n({type:Boolean,reflect:!0})],c.prototype,"selected",2);l([r.n({type:Boolean,reflect:!0})],c.prototype,"readonly",2);l([r.n({reflect:!0})],c.prototype,"shape",2);l([r.n()],c.prototype,"value",1);const S=":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 C=Object.defineProperty,A=Object.getOwnPropertyDescriptor,d=(h,e,t,o)=>{for(var s=o>1?void 0:o?A(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&C(e,t,s),s};class n extends p.SizedMixin(r.LuzmoElement,{validSizes:["xs","s","m","l"],noDefaultSize:!0}){constructor(){super(),this._selected=[],this.selectedSet=new Set,this.rovingTabindexController=new z.RovingTabindexController(this,{focusInIndex:e=>{let t=-1;const o=e.findIndex((s,i)=>(!e[t]&&!s.disabled&&(t=i),s.selected&&!s.disabled));return e[o]?o:t},elements:()=>this.swatches,isFocusableElement:e=>!e.disabled}),this.manageChange=async()=>{const e=new Set;this.selectedSet=new Set(this.selected),await Promise.all(this.swatches.map(t=>t.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 w.s(this,{config:{attributes:!0,childList:!0,subtree:!0},callback:()=>{this.manageChange()}})}static get styles(){return[r.r(S)]}get selected(){return this._selected}set selected(e){if(e===this.selected)return;const t=this.selected;this._selected=e,this.requestUpdate("selected",t)}focus(e){this.rovingTabindexController.focus(e)}handleChange(e){e.stopPropagation();const t=this.selected;if(!this.selects){e.preventDefault();return}if(this.selects==="single"){const{target:s}=e;if(s.tabIndex=0,s.selected=!0,this.selectedSet.has(s.value))return;this.selectedSet.clear(),this.selectedSet.add(s.value),this.rovingTabindexController.elements.forEach(i=>{i!==s&&(i.selected=!1)})}else if(this.selects==="multiple"){const{target:s}=e;s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value)}this._selected=[...this.selectedSet],this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||(this._selected=t,e.preventDefault())}getPassthroughSwatchActions(e){const 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);const o=[];return Object.keys(t).length>0&&o.push(s=>{"border"in t&&(s.border=t.border),"rounding"in t&&(s.rounding=t.rounding),"shape"in t&&(s.shape=t.shape),"size"in t&&(s.size=t.size)}),o}getSelectionSwatchActions(e){const t=[];if(!e.has("selects"))return t;this.selects?this.setAttribute("role",this.selects==="single"?"radiogroup":"group"):this.removeAttribute("role");const o={single:"radio",multiple:"checkbox"},s=this.selects?o[this.selects]:"button";return t.push(i=>{i.setAttribute("role",s)}),t}render(){return r.x`
       <slot
         @change=${this.handleChange}
         @slotchange=${this.manageChange}
       ></slot>
-    `;
-  }
-  willUpdate(changes) {
-    const swatchActions = [
-      ...this.getPassthroughSwatchActions(changes),
-      ...this.getSelectionSwatchActions(changes)
-    ];
-    let nextSelected = new Set(this.selected);
-    const currentValues = /* @__PURE__ */ new Set();
-    if (changes.has("selected")) {
-      swatchActions.push((swatch) => {
-        currentValues.add(swatch.value);
-        swatch.selected = nextSelected.has(swatch.value) || !this.hasUpdated && swatch.selected ? true : false;
-      });
-    }
-    const doActions = () => {
-      nextSelected = new Set(this.selected);
-      this.swatches.forEach((swatch) => {
-        swatchActions.forEach((action) => {
-          action(swatch);
-        });
-      });
-      if (changes.has("selected")) {
-        this._selected = [...nextSelected.values()].filter(
-          (selectedValue) => currentValues.has(selectedValue)
-        );
-      }
-    };
-    if (this.hasUpdated) {
-      doActions();
-    } else {
-      this.renderRoot.addEventListener(
-        "slotchange",
-        () => {
-          requestAnimationFrame(doActions);
-        },
-        { once: true }
-      );
-    }
-  }
-}
-__decorateClass([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatchGroup.prototype, "border", 2);
-__decorateClass([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatchGroup.prototype, "density", 2);
-__decorateClass([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatchGroup.prototype, "rounding", 2);
-__decorateClass([
-  decorators_js.property({ type: Array })
-], LuzmoSwatchGroup.prototype, "selected", 1);
-__decorateClass([
-  decorators_js.property()
-], LuzmoSwatchGroup.prototype, "selects", 2);
-__decorateClass([
-  decorators_js.property({ reflect: true })
-], LuzmoSwatchGroup.prototype, "shape", 2);
-__decorateClass([
-  decorators_js.queryAssignedElements({ flatten: true })
-], LuzmoSwatchGroup.prototype, "swatches", 2);
-if (!customElements.get("luzmo-swatch")) {
-  customElements.define("luzmo-swatch", LuzmoSwatch);
-}
-if (!customElements.get("luzmo-swatch-group")) {
-  customElements.define("luzmo-swatch-group", LuzmoSwatchGroup);
-}
-exports.LuzmoSwatch = LuzmoSwatch;
-exports.LuzmoSwatchGroup = LuzmoSwatchGroup;
+    `}willUpdate(e){const t=[...this.getPassthroughSwatchActions(e),...this.getSelectionSwatchActions(e)];let o=new Set(this.selected);const s=new Set;e.has("selected")&&t.push(a=>{s.add(a.value),a.selected=!!(o.has(a.value)||!this.hasUpdated&&a.selected)});const i=()=>{o=new Set(this.selected),this.swatches.forEach(a=>{t.forEach(f=>{f(a)})}),e.has("selected")&&(this._selected=[...o.values()].filter(a=>s.has(a)))};this.hasUpdated?i():this.renderRoot.addEventListener("slotchange",()=>{requestAnimationFrame(i)},{once:!0})}}d([r.n({reflect:!0})],n.prototype,"border",2);d([r.n({reflect:!0})],n.prototype,"density",2);d([r.n({reflect:!0})],n.prototype,"rounding",2);d([r.n({type:Array})],n.prototype,"selected",1);d([r.n()],n.prototype,"selects",2);d([r.n({reflect:!0})],n.prototype,"shape",2);d([m.o({flatten:!0})],n.prototype,"swatches",2);customElements.get("luzmo-swatch")||customElements.define("luzmo-swatch",c);customElements.get("luzmo-swatch-group")||customElements.define("luzmo-swatch-group",n);exports.LuzmoSwatch=c;exports.LuzmoSwatchGroup=n;