@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.16

package/components/swatch/index.js

@@ -15,34 +15,50 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { p as z, R as v } from "../luzmo-icons-NEyaMpEM.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);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.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(styleElement);
   }
 };
-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);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 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;
+initializeGlobalLuzmoCSSVariables();
+import { luzmoIcon, luzmoDash } from "@luzmo/icons";
+import { html, unsafeCSS } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+import { F as Focusable } from "../focusable-ChCLg1k4.js";
+import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import { a as LuzmoElement } from "../base-DmeVy0cq.js";
+import { R as RovingTabindexController } from "../roving-tabindex-DPF9NmrH.js";
+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 a extends m(y, {
+class LuzmoSwatch extends SizedMixin(Focusable, {
   validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
-  noDefaultSize: !0
+  noDefaultSize: true
 }) {
   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`
+    super(...arguments);
+    this.color = "";
+    this.label = "";
+    this.mixedValue = false;
+    this.nothing = false;
+    this.role = "button";
+    this.selected = false;
+    this.readonly = false;
+    this.renderDisabled = () => html`
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="disabled-icon"
@@ -59,48 +75,59 @@ class a extends m(y, {
         fill="var(--swatch-disabled-icon-stroke-color)"
       />
     </svg>
-  `, this.renderMixedValue = () => z(v);
+  `;
+    this.renderMixedValue = () => luzmoIcon(luzmoDash);
   }
   static get styles() {
-    return [p(A)];
+    return [unsafeCSS(styles$1)];
   }
   get value() {
     return this._value || this.color || this.label;
   }
-  set value(e) {
-    if (e === this._value)
+  set value(value) {
+    if (value === this._value) {
       return;
-    const o = this.value;
-    this._value = e, this.requestUpdate("value", o);
+    }
+    const oldValue = this.value;
+    this._value = value;
+    this.requestUpdate("value", oldValue);
   }
   get focusElement() {
     return this;
   }
-  toggle(e) {
-    this.readonly || (this.selected = e ?? !this.selected);
+  toggle(force) {
+    if (!this.readonly) {
+      this.selected = force ?? !this.selected;
+    }
   }
   handleClick() {
-    if (this.disabled || this.mixedValue)
+    if (this.disabled || this.mixedValue) {
       return;
-    this.toggle(), this.dispatchEvent(
+    }
+    this.toggle();
+    const applyDefault = this.dispatchEvent(
       new Event("change", {
-        cancelable: !0,
-        bubbles: !0
+        cancelable: true,
+        bubbles: true
       })
-    ) || this.toggle();
+    );
+    if (!applyDefault) {
+      this.toggle();
+    }
   }
-  handleKeydown(e) {
-    const { code: o } = e;
-    switch (o) {
+  handleKeydown(event) {
+    const { code } = event;
+    switch (code) {
       case "Space": {
-        e.preventDefault(), this.addEventListener("keyup", this.handleKeyup);
+        event.preventDefault();
+        this.addEventListener("keyup", this.handleKeyup);
         break;
       }
     }
   }
-  handleKeypress(e) {
-    const { code: o } = e;
-    switch (o) {
+  handleKeypress(event) {
+    const { code } = event;
+    switch (code) {
       case "Enter":
       case "NumpadEnter": {
         this.click();
@@ -108,105 +135,154 @@ class a extends m(y, {
       }
     }
   }
-  handleKeyup(e) {
-    const { code: o } = e;
-    switch (o) {
+  handleKeyup(event) {
+    const { code } = event;
+    switch (code) {
       case "Space": {
-        this.removeEventListener("keyup", this.handleKeyup), this.click();
+        this.removeEventListener("keyup", this.handleKeyup);
+        this.click();
         break;
       }
     }
   }
   render() {
-    return u`
+    return html`
       <div
         class="opacity-checkerboard fill"
-        style=${x(
+        style=${ifDefined(
       this.color ? `--picked-color: ${this.color}` : void 0
     )}
       >
         <slot name="image"></slot>
-        ${b(this.disabled, this.renderDisabled)}
-        ${b(this.mixedValue, this.renderMixedValue)}
+        ${when(this.disabled, this.renderDisabled)}
+        ${when(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");
+  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");
+      }
     }
-    (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");
+  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");
+    }
   }
 }
-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;
+__decorateClass$1([
+  property({ reflect: true })
+], LuzmoSwatch.prototype, "border", 2);
+__decorateClass$1([
+  property()
+], LuzmoSwatch.prototype, "color", 2);
+__decorateClass$1([
+  property()
+], LuzmoSwatch.prototype, "label", 2);
+__decorateClass$1([
+  property({ type: Boolean, reflect: true, attribute: "mixed-value" })
+], LuzmoSwatch.prototype, "mixedValue", 2);
+__decorateClass$1([
+  property({ type: Boolean, reflect: true })
+], LuzmoSwatch.prototype, "nothing", 2);
+__decorateClass$1([
+  property({ reflect: true })
+], LuzmoSwatch.prototype, "role", 2);
+__decorateClass$1([
+  property({ reflect: true })
+], LuzmoSwatch.prototype, "rounding", 2);
+__decorateClass$1([
+  property({ type: Boolean, reflect: true })
+], LuzmoSwatch.prototype, "selected", 2);
+__decorateClass$1([
+  property({ type: Boolean, reflect: true })
+], LuzmoSwatch.prototype, "readonly", 2);
+__decorateClass$1([
+  property({ reflect: true })
+], LuzmoSwatch.prototype, "shape", 2);
+__decorateClass$1([
+  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 d extends m(w, {
+class LuzmoSwatchGroup extends SizedMixin(LuzmoElement, {
   validSizes: ["xs", "s", "m", "l"],
-  noDefaultSize: !0
+  noDefaultSize: true
 }) {
   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;
+    super();
+    this._selected = [];
+    this.selectedSet = /* @__PURE__ */ new Set();
+    this.rovingTabindexController = new 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: (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, {
+      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(this, {
       config: {
-        attributes: !0,
-        childList: !0,
-        subtree: !0
+        attributes: true,
+        childList: true,
+        subtree: true
       },
       callback: () => {
         this.manageChange();
@@ -214,129 +290,198 @@ class d extends m(w, {
     });
   }
   static get styles() {
-    return [p(D)];
+    return [unsafeCSS(styles)];
   }
   get selected() {
     return this._selected;
   }
-  set selected(e) {
-    if (e === this.selected)
+  set selected(selected) {
+    if (selected === this.selected) {
       return;
-    const o = this.selected;
-    this._selected = e, this.requestUpdate("selected", o);
+    }
+    const oldSelected = this.selected;
+    this._selected = selected;
+    this.requestUpdate("selected", oldSelected);
   }
-  focus(e) {
-    this.rovingTabindexController.focus(e);
+  focus(options) {
+    this.rovingTabindexController.focus(options);
   }
-  handleChange(e) {
-    e.stopPropagation();
-    const o = this.selected;
+  handleChange(event) {
+    event.stopPropagation();
+    const oldSelected = this.selected;
     if (!this.selects) {
-      e.preventDefault();
+      event.preventDefault();
       return;
     }
     if (this.selects === "single") {
-      const { target: t } = e;
-      if (t.tabIndex = 0, t.selected = !0, this.selectedSet.has(t.value))
+      const { target } = event;
+      target.tabIndex = 0;
+      target.selected = true;
+      if (this.selectedSet.has(target.value)) {
         return;
-      this.selectedSet.clear(), this.selectedSet.add(t.value), this.rovingTabindexController.elements.forEach((s) => {
-        s !== t && (s.selected = !1);
+      }
+      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: t } = e;
-      t.selected ? this.selectedSet.add(t.value) : this.selectedSet.delete(t.value);
+      const { target } = event;
+      if (target.selected) {
+        this.selectedSet.add(target.value);
+      } else {
+        this.selectedSet.delete(target.value);
+      }
     }
-    this._selected = [...this.selectedSet], this.dispatchEvent(
+    this._selected = [...this.selectedSet];
+    const applyDefault = this.dispatchEvent(
       new Event("change", {
-        cancelable: !0,
-        bubbles: !0
+        cancelable: true,
+        bubbles: true
       })
-    ) || (this._selected = o, e.preventDefault());
+    );
+    if (!applyDefault) {
+      this._selected = oldSelected;
+      event.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;
+  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(e) {
-    const o = [];
-    if (!e.has("selects"))
-      return o;
-    this.selects ? this.setAttribute(
-      "role",
-      this.selects === "single" ? "radiogroup" : "group"
-    ) : this.removeAttribute("role");
-    const r = {
+  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"
-    }, t = this.selects ? r[this.selects] : "button";
-    return o.push((s) => {
-      s.setAttribute("role", t);
-    }), o;
+    };
+    const swatchRole = this.selects ? swatchRoles[this.selects] : "button";
+    selectionSwatchActions.push((swatch) => {
+      swatch.setAttribute("role", swatchRole);
+    });
+    return selectionSwatchActions;
   }
   render() {
-    return u`
+    return html`
       <slot
         @change=${this.handleChange}
         @slotchange=${this.manageChange}
       ></slot>
     `;
   }
-  willUpdate(e) {
-    const o = [
-      ...this.getPassthroughSwatchActions(e),
-      ...this.getSelectionSwatchActions(e)
+  willUpdate(changes) {
+    const swatchActions = [
+      ...this.getPassthroughSwatchActions(changes),
+      ...this.getSelectionSwatchActions(changes)
     ];
-    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);
+    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);
         });
-      }), e.has("selected") && (this._selected = [...r.values()].filter(
-        (i) => t.has(i)
-      ));
+      });
+      if (changes.has("selected")) {
+        this._selected = [...nextSelected.values()].filter(
+          (selectedValue) => currentValues.has(selectedValue)
+        );
+      }
     };
-    this.hasUpdated ? s() : this.renderRoot.addEventListener(
-      "slotchange",
-      () => {
-        requestAnimationFrame(s);
-      },
-      { once: !0 }
-    );
+    if (this.hasUpdated) {
+      doActions();
+    } else {
+      this.renderRoot.addEventListener(
+        "slotchange",
+        () => {
+          requestAnimationFrame(doActions);
+        },
+        { once: true }
+      );
+    }
   }
 }
-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);
+__decorateClass([
+  property({ reflect: true })
+], LuzmoSwatchGroup.prototype, "border", 2);
+__decorateClass([
+  property({ reflect: true })
+], LuzmoSwatchGroup.prototype, "density", 2);
+__decorateClass([
+  property({ reflect: true })
+], LuzmoSwatchGroup.prototype, "rounding", 2);
+__decorateClass([
+  property({ type: Array })
+], LuzmoSwatchGroup.prototype, "selected", 1);
+__decorateClass([
+  property()
+], LuzmoSwatchGroup.prototype, "selects", 2);
+__decorateClass([
+  property({ reflect: true })
+], LuzmoSwatchGroup.prototype, "shape", 2);
+__decorateClass([
+  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);
+}
 export {
-  a as LuzmoSwatch,
-  d as LuzmoSwatchGroup
+  LuzmoSwatch,
+  LuzmoSwatchGroup
 };