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

package/components/color-menu/index.js

@@ -15,86 +15,178 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { y as p, b as z, T as f } from "../luzmo-icons-4nDFv1Lq.js";
-import { r as v, x as s, n as h } from "../base-WsynuqaS.js";
-import { r as b } from "../state-Deh-vKYE.js";
-import { e as n } from "../query-D_KR_GUc.js";
-import { F as x } from "../focusable-BxtpnzWp.js";
-import { S as w } from "../sized-mixin-D4ACoVUr.js";
+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);
+  }
+};
+initializeGlobalLuzmoCSSVariables();
+import { TinyColor } from "@ctrl/tinycolor";
+import { luzmoIcon, luzmoAngleUp, luzmoAngleDown } from "@luzmo/icons";
+import { unsafeCSS, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { F as Focusable } from "../focusable-ChCLg1k4.js";
+import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
 import "../color-area/index.js";
 import "../color-field/index.js";
 import "../color-handle/index.js";
-import { T as a } from "../index-HjQa8tew.js";
+import "../color-slider/index.js";
 import "../divider/index.js";
 import "../popover/index.js";
 import "../swatch/index.js";
-const g = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const i = document.createElement("style");
-    i.setAttribute("data-luzmo-vars", ""), i.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(i);
-  }
+const styles = '@charset "UTF-8";:host{width:var(--luzmo-color-menu-width, var(--color-menu-width))}.hue-opacity-text-swatches-container{display:flex;gap:var(--luzmo-color-menu-color-controls-vertical-gap, var(--color-menu-color-controls-vertical-gap));flex-direction:column;padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding, var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding, var(--color-menu-hue-opacity-text-swatches-horizontal-padding))}.swatch-sliders-container{display:flex;gap:var(--luzmo-color-menu-swatch-to-sliders-space, var(--color-menu-swatch-to-sliders-space))}.swatch-example-container{display:flex;align-items:center}.field-container{display:flex;align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space, var(--color-menu-format-field-to-format-space))}.format-container{text-transform:uppercase;position:relative;background:none;border:none;outline:none;height:var(--luzmo-color-menu-format-height, var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size, var(--color-menu-format-font-size));display:flex;align-items:center;color:var(--luzmo-color-menu-format-font-color, var(--color-menu-format-font-color));gap:var(--luzmo-color-menu-format-name-to-icon, var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding, var(--color-menu-format-horizontal-padding))}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover, var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border:var(--luzmo-color-menu-format-indicator-width, var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color, var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius, var(--luzmo-border-radius-s))}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down, var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{display:flex;align-items:center;height:calc(var(--color-menu-format-font-size) / 1.5)}.slider-container{display:flex;flex-direction:column;justify-content:center;gap:var(--luzmo-color-menu-slider-gap, var(--color-menu-slider-gap))}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height, var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luzmo-color-menu-swatches-gap, var(--color-menu-swatches-gap))}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{display:flex;align-items:center;justify-content:center}:host{--luzmo-text-field-icon-size-valid: 0px;--luzmo-text-field-icon-spacing-inline-end-valid: 1px;--luzmo-text-field-text-align: center}:host{--color-menu-width: 290px;--luzmo-text-field-width: 220px;--luzmo-color-slider-control-track-width: 8px;--color-menu-height: 140px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height);--color-menu-format-font-size: var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-3);--color-menu-format-font-color: var(--luzmo-font-color);--color-menu-format-font-color-hover: var(--luzmo-font-color-hover);--color-menu-format-font-color-down: var(--luzmo-font-color-down);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size: 22px}:host([size=s]){--color-menu-width: 260px;--luzmo-text-field-width: 200px;--luzmo-color-slider-control-track-width: 8px;--color-menu-hue-opacity-text-swatches-horizontal-padding: var( --luzmo-spacing-5 );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-4 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-4);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-s);--color-menu-format-font-size: var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-2);--color-menu-swatches-gap: var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size: 20px}:host([size=l]){--color-menu-width: 350px;--luzmo-text-field-width: 240px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-format-height: var(--luzmo-component-height-l);--color-menu-format-font-size: var(--luzmo-font-size);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size: 24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size: 56px}:host([size=xl]){--color-menu-width: 380px;--luzmo-text-field-width: 280px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-color-controls-vertical-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-swatch-to-sliders-space: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-xl);--color-menu-format-font-size: var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-3);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size: 26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size: 64px}';
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
 };
-g();
-const C = '@charset "UTF-8";:host{width:var(--luzmo-color-menu-width, var(--color-menu-width))}.hue-opacity-text-swatches-container{display:flex;gap:var(--luzmo-color-menu-color-controls-vertical-gap, var(--color-menu-color-controls-vertical-gap));flex-direction:column;padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding, var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding, var(--color-menu-hue-opacity-text-swatches-horizontal-padding))}.swatch-sliders-container{display:flex;gap:var(--luzmo-color-menu-swatch-to-sliders-space, var(--color-menu-swatch-to-sliders-space))}.swatch-example-container{display:flex;align-items:center}.field-container{display:flex;align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space, var(--color-menu-format-field-to-format-space))}.format-container{text-transform:uppercase;position:relative;background:none;border:none;outline:none;height:var(--luzmo-color-menu-format-height, var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size, var(--color-menu-format-font-size));display:flex;align-items:center;color:var(--luzmo-color-menu-format-font-color, var(--color-menu-format-font-color));gap:var(--luzmo-color-menu-format-name-to-icon, var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding, var(--color-menu-format-horizontal-padding))}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover, var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border:var(--luzmo-color-menu-format-indicator-width, var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color, var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius, var(--luzmo-border-radius-s))}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down, var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{display:flex;align-items:center;height:calc(var(--color-menu-format-font-size) / 1.5)}.slider-container{display:flex;flex-direction:column;justify-content:center;gap:var(--luzmo-color-menu-slider-gap, var(--color-menu-slider-gap))}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height, var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luzmo-color-menu-swatches-gap, var(--color-menu-swatches-gap))}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{display:flex;align-items:center;justify-content:center}:host{--luzmo-text-field-icon-size-valid: 0px;--luzmo-text-field-icon-spacing-inline-end-valid: 1px;--luzmo-text-field-text-align: center}:host{--color-menu-width: 290px;--luzmo-text-field-width: 220px;--luzmo-color-slider-control-track-width: 8px;--color-menu-height: 140px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height);--color-menu-format-font-size: var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-3);--color-menu-format-font-color: var(--luzmo-font-color);--color-menu-format-font-color-hover: var(--luzmo-font-color-hover);--color-menu-format-font-color-down: var(--luzmo-font-color-down);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size: 22px}:host([size=s]){--color-menu-width: 260px;--luzmo-text-field-width: 200px;--luzmo-color-slider-control-track-width: 8px;--color-menu-hue-opacity-text-swatches-horizontal-padding: var( --luzmo-spacing-5 );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-4 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-4);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-s);--color-menu-format-font-size: var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-2);--color-menu-swatches-gap: var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size: 20px}:host([size=l]){--color-menu-width: 350px;--luzmo-text-field-width: 240px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-format-height: var(--luzmo-component-height-l);--color-menu-format-font-size: var(--luzmo-font-size);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size: 24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size: 56px}:host([size=xl]){--color-menu-width: 380px;--luzmo-text-field-width: 280px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-color-controls-vertical-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-swatch-to-sliders-space: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-xl);--color-menu-format-font-size: var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-3);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size: 26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size: 64px}';
-var y = Object.defineProperty, t = (i, r, o, e) => {
-  for (var c = void 0, m = i.length - 1, d; m >= 0; m--)
-    (d = i[m]) && (c = d(r, o, c) || c);
-  return c && y(r, o, c), c;
-};
-const u = class u extends w(x) {
+const _LuzmoColorMenu = class _LuzmoColorMenu extends SizedMixin(Focusable) {
   constructor() {
-    super(...arguments), this.color = "rgb(255, 0, 0)", this.noAlphaChannel = !1, this._alpha = 1, this._rgbColor = "rgb(255, 0, 0)", this._rgbaColor = "rgb(255, 0, 0, 1)", this._previousColor = "rgb(255, 0, 0)";
+    super(...arguments);
+    this.color = "rgb(255, 0, 0)";
+    this.noAlphaChannel = false;
+    this._alpha = 1;
+    this._rgbColor = "rgb(255, 0, 0)";
+    this._rgbaColor = "rgb(255, 0, 0, 1)";
+    this._previousColor = "rgb(255, 0, 0)";
   }
-  setColor(r) {
-    var e;
-    const o = new a((e = r == null ? void 0 : r.target) == null ? void 0 : e.color);
-    this._format = o.format === "name" ? "rgb" : o.format, this._rgbaColor = o.toRgbString(), this._alpha = this.noAlphaChannel ? 1 : o.getAlpha(), this._rgbColor = o.setAlpha(1).toRgbString(), this.hueSliderElement.color = this._rgbColor, this.areaElement.color = this._rgbColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.swatchElement.color = this._rgbaColor, this.colorFieldElement.value = this.formatTextField(o), this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  setColor(event) {
+    var _a;
+    const color = new TinyColor((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.color);
+    this._format = color.format === "name" ? "rgb" : color.format;
+    this._rgbaColor = color.toRgbString();
+    this._alpha = this.noAlphaChannel ? 1 : color.getAlpha();
+    this._rgbColor = color.setAlpha(1).toRgbString();
+    this.hueSliderElement.color = this._rgbColor;
+    this.areaElement.color = this._rgbColor;
+    if (!this.noAlphaChannel) {
+      this.opacitySliderElement.color = this._rgbaColor;
+    }
+    this.swatchElement.color = this._rgbaColor;
+    this.colorFieldElement.value = this.formatTextField(color);
+    this._previousColor = this._rgbaColor;
+    this.color = this._rgbaColor;
+    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
   }
-  handleAreaChange(r) {
-    r.stopPropagation(), r.preventDefault(), this._rgbColor = this.areaElement.color;
-    const o = new a(this._rgbColor);
-    this._rgbaColor = o.setAlpha(this._alpha).toRgbString(), this.colorFieldElement.value = this._rgbaColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.colorFieldElement.value = this.formatTextField(o), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  handleAreaChange(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this._rgbColor = this.areaElement.color;
+    const newColor = new TinyColor(this._rgbColor);
+    this._rgbaColor = newColor.setAlpha(this._alpha).toRgbString();
+    this.colorFieldElement.value = this._rgbaColor;
+    if (!this.noAlphaChannel) {
+      this.opacitySliderElement.color = this._rgbaColor;
+    }
+    this.colorFieldElement.value = this.formatTextField(newColor);
+    this.swatchElement.color = this._rgbaColor;
+    this._previousColor = this._rgbaColor;
+    this.color = this._rgbaColor;
+    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
   }
   get focusElement() {
     return this.areaElement || this.colorFieldElement || this;
   }
-  handleHueSliderChange(r) {
-    r.stopPropagation(), r.preventDefault();
-    const o = new a(this._rgbColor).toHsl();
-    o.h = this.hueSliderElement.value;
-    const e = new a(o);
-    this._rgbColor = e.toRgbString(), this._rgbaColor = e.setAlpha(this._alpha).toRgbString(), this.areaElement.color = `hsla(${o.h}, ${o.s * 100}%, ${o.l * 100}%, ${o.a})`, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.colorFieldElement.value = this.formatTextField(e), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  handleHueSliderChange(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const color = new TinyColor(this._rgbColor).toHsl();
+    color.h = this.hueSliderElement.value;
+    const newColor = new TinyColor(color);
+    this._rgbColor = newColor.toRgbString();
+    this._rgbaColor = newColor.setAlpha(this._alpha).toRgbString();
+    this.areaElement.color = `hsla(${color.h}, ${color.s * 100}%, ${color.l * 100}%, ${color.a})`;
+    if (!this.noAlphaChannel) {
+      this.opacitySliderElement.color = this._rgbaColor;
+    }
+    this.colorFieldElement.value = this.formatTextField(newColor);
+    this.swatchElement.color = this._rgbaColor;
+    this._previousColor = this._rgbaColor;
+    this.color = this._rgbaColor;
+    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
   }
-  handleOpacitySliderChange(r) {
-    r.stopPropagation(), r.preventDefault(), this._alpha = this.opacitySliderElement.sliderHandlePosition / 100;
-    const o = new a(this._rgbColor).setAlpha(this._alpha);
-    this._rgbaColor = o.toRgbString(), this.colorFieldElement.value = this.formatTextField(o), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  handleOpacitySliderChange(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this._alpha = this.opacitySliderElement.sliderHandlePosition / 100;
+    const newColor = new TinyColor(this._rgbColor).setAlpha(this._alpha);
+    this._rgbaColor = newColor.toRgbString();
+    this.colorFieldElement.value = this.formatTextField(newColor);
+    this.swatchElement.color = this._rgbaColor;
+    this._previousColor = this._rgbaColor;
+    this.color = this._rgbaColor;
+    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
   }
-  handleFieldChange(r) {
-    if (r.stopPropagation(), r.preventDefault(), this.colorFieldElement.checkValidity()) {
-      const o = new a(this.colorFieldElement.value);
-      this._format = o.format, this._rgbaColor = o.toRgbString(), this._alpha = o.getAlpha(), this._rgbColor = o.setAlpha(1).toRgbString(), this.noAlphaChannel && (this._rgbaColor = this._rgbColor, this._alpha = 1), this.hueSliderElement.color = this._rgbColor, this.areaElement.color = this._rgbColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  handleFieldChange(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (this.colorFieldElement.checkValidity()) {
+      const color = new TinyColor(this.colorFieldElement.value);
+      this._format = color.format;
+      this._rgbaColor = color.toRgbString();
+      this._alpha = color.getAlpha();
+      this._rgbColor = color.setAlpha(1).toRgbString();
+      if (this.noAlphaChannel) {
+        this._rgbaColor = this._rgbColor;
+        this._alpha = 1;
+      }
+      this.hueSliderElement.color = this._rgbColor;
+      this.areaElement.color = this._rgbColor;
+      if (!this.noAlphaChannel) {
+        this.opacitySliderElement.color = this._rgbaColor;
+      }
+      this.swatchElement.color = this._rgbaColor;
+      this._previousColor = this._rgbaColor;
+      this.color = this._rgbaColor;
+      this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
     }
   }
-  formatTextField(r) {
-    return this._format === "hsl" ? r.toHslString() : this._format === "hex" ? this.noAlphaChannel ? r.toHexString() : r.toHex8String() : (this._format === "name" && (this._format = "rgb"), r.toRgbString());
+  formatTextField(tinyColor) {
+    if (this._format === "hsl") {
+      return tinyColor.toHslString();
+    } else if (this._format === "hex") {
+      return this.noAlphaChannel ? tinyColor.toHexString() : tinyColor.toHex8String();
+    } else if (this._format === "name") {
+      this._format = "rgb";
+    }
+    return tinyColor.toRgbString();
   }
   cycleFormat() {
-    const r = ["rgb", "hsl", "hex"];
-    this._format = r[(r.indexOf(this._format) + 1) % r.length];
-    const o = new a(this.color), e = this.formatTextField(o);
-    this.colorFieldElement.value = e;
+    const formats = ["rgb", "hsl", "hex"];
+    this._format = formats[(formats.indexOf(this._format) + 1) % formats.length];
+    const color = new TinyColor(this.color);
+    const colorString = this.formatTextField(color);
+    this.colorFieldElement.value = colorString;
   }
-  updated(r) {
-    if (r.has("color") && this.color !== this._previousColor) {
+  updated(changedProperties) {
+    if (changedProperties.has("color") && this.color !== this._previousColor) {
       this._previousColor = this.color;
-      const o = new a(this.color);
-      this._alpha = o.getAlpha(), this._rgbColor = o.setAlpha(1).toRgbString(), this._rgbaColor = o.setAlpha(this._alpha).toRgbString(), this.areaElement.color = this._rgbColor, this.hueSliderElement.color = this._rgbColor, this.colorFieldElement.value = this._rgbaColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.swatchElement.color = this._rgbaColor, this._format = "rgb";
+      const color = new TinyColor(this.color);
+      this._alpha = color.getAlpha();
+      this._rgbColor = color.setAlpha(1).toRgbString();
+      this._rgbaColor = color.setAlpha(this._alpha).toRgbString();
+      this.areaElement.color = this._rgbColor;
+      this.hueSliderElement.color = this._rgbColor;
+      this.colorFieldElement.value = this._rgbaColor;
+      if (!this.noAlphaChannel) {
+        this.opacitySliderElement.color = this._rgbaColor;
+      }
+      this.swatchElement.color = this._rgbaColor;
+      this._format = "rgb";
+    }
+    if (changedProperties.has("noAlphaChannel") && !this.noAlphaChannel) {
+      this.opacitySliderElement.color = this._rgbaColor;
     }
-    r.has("noAlphaChannel") && !this.noAlphaChannel && (this.opacitySliderElement.color = this._rgbaColor);
   }
   renderOpacitySlider() {
-    return s`
+    return html`
       <luzmo-color-slider
         id="luzmo-opacity-slider"
         mode="opacity"
@@ -104,8 +196,8 @@ const u = class u extends w(x) {
     `;
   }
   render() {
-    var r;
-    return s`
+    var _a;
+    return html`
       <div id="color-menu" tabindex="0">
         <luzmo-color-area
           .size=${this.size}
@@ -143,20 +235,20 @@ const u = class u extends w(x) {
             >
               <div class="format-label">${this._format}</div>
               <div class="change-format-icon">
-                <div class="angle-icon">${p(z)}</div>
-                <div class="angle-icon">${p(f)}</div>
+                <div class="angle-icon">${luzmoIcon(luzmoAngleUp)}</div>
+                <div class="angle-icon">${luzmoIcon(luzmoAngleDown)}</div>
               </div>
             </button>
           </div>
-          ${((r = this.swatches) == null ? void 0 : r.length) > 0 ? s`
+          ${((_a = this.swatches) == null ? void 0 : _a.length) > 0 ? html`
                 <luzmo-divider></luzmo-divider>
                 <div class="swatches-container">
                   ${this.swatches.map(
-      (o) => s`
+      (color) => html`
                       <div class="swatch-choice">
                         <luzmo-swatch
                           @click=${this.setColor}
-                          .color=${o}
+                          .color=${color}
                           .size=${this.size}
                           readonly
                         >
@@ -171,36 +263,38 @@ const u = class u extends w(x) {
     `;
   }
 };
-u.styles = v(C);
-let l = u;
-t([
-  h({ type: String, reflect: !0 })
-], l.prototype, "color");
-t([
-  h({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
-], l.prototype, "noAlphaChannel");
-t([
-  h({ type: Array, reflect: !0 })
-], l.prototype, "swatches");
-t([
-  n("luzmo-color-area")
-], l.prototype, "areaElement");
-t([
-  n("#luzmo-hue-slider")
-], l.prototype, "hueSliderElement");
-t([
-  n("#luzmo-opacity-slider")
-], l.prototype, "opacitySliderElement");
-t([
-  n("luzmo-color-field")
-], l.prototype, "colorFieldElement");
-t([
-  n("luzmo-swatch")
-], l.prototype, "swatchElement");
-t([
-  b()
-], l.prototype, "_format");
-customElements.get("luzmo-color-menu") || customElements.define("luzmo-color-menu", l);
+_LuzmoColorMenu.styles = unsafeCSS(styles);
+let LuzmoColorMenu = _LuzmoColorMenu;
+__decorateClass([
+  property({ type: String, reflect: true })
+], LuzmoColorMenu.prototype, "color");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "no-alpha-channel" })
+], LuzmoColorMenu.prototype, "noAlphaChannel");
+__decorateClass([
+  property({ type: Array, reflect: true })
+], LuzmoColorMenu.prototype, "swatches");
+__decorateClass([
+  query("luzmo-color-area")
+], LuzmoColorMenu.prototype, "areaElement");
+__decorateClass([
+  query("#luzmo-hue-slider")
+], LuzmoColorMenu.prototype, "hueSliderElement");
+__decorateClass([
+  query("#luzmo-opacity-slider")
+], LuzmoColorMenu.prototype, "opacitySliderElement");
+__decorateClass([
+  query("luzmo-color-field")
+], LuzmoColorMenu.prototype, "colorFieldElement");
+__decorateClass([
+  query("luzmo-swatch")
+], LuzmoColorMenu.prototype, "swatchElement");
+__decorateClass([
+  state()
+], LuzmoColorMenu.prototype, "_format");
+if (!customElements.get("luzmo-color-menu")) {
+  customElements.define("luzmo-color-menu", LuzmoColorMenu);
+}
 export {
-  l as LuzmoColorMenu
+  LuzmoColorMenu
 };

package/components/color-palette/index.cjs

@@ -15,4 +15,92 @@
  * 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 r=require("../base-CBCg3yyw.cjs"),u=require("../focusable-EbipgXRh.cjs"),n=require("../sized-mixin-CPxE5C96.cjs"),h=":host{box-sizing:border-box}:host([focused]),:host(:focus-visible){outline:none}:host([focused]) #palette,:host(:focus-visible) #palette{border:var(--luzmo-color-palette-focus-indicator-width, var(--color-palette-focus-indicator-width)) solid var(--luzmo-color-palette-focus-indicator-color, var(--color-palette-focus-indicator-color))!important}:host([disabled]){pointer-events:none;cursor:not-allowed}:host([disabled]) #palette{opacity:var(--luzmo-color-palette-disabled-opacity, .3);border-color:transparent!important;background-color:var(--luzmo-color-palette-disabled-background-color, var(--color-palette-disabled-background-color))!important}:host([selected]) #palette{border-color:var(--luzmo-color-palette-selected-border-color, var(--color-palette-selected-border-color));background-color:var(--luzmo-color-palette-selected-background-color, var(--color-palette-selected-background-color))}:host:hover #palette{border-color:var(--luzmo-color-palette-hover-border-color, var(--color-palette-hover-border-color))}#palette{box-sizing:border-box;height:100%;width:fit-content;padding:var(--luzmo-color-palette-padding, var(--color-palette-padding));border:var(--luzmo-color-palette-border-width, var(--color-palette-border-width)) solid transparent;cursor:pointer;border-radius:var(--luzmo-color-palette-border-radius, var(--color-palette-border-radius));display:flex}#palette>div{box-sizing:border-box;border:var(--luzmo-color-palette-color-border-width, var(--color-palette-color-border-width)) solid var(--luzmo-color-palette-color-border-color, var(--color-palette-color-border-color));height:var(--luzmo-color-palette-color-height, var(--color-palette-color-height));width:var(--luzmo-color-palette-color-width, var(--color-palette-color-width))}#palette:hover{background-color:var(--luzmo-color-palette-hover-background-color, var(--color-palette-hover-background-color))}#palette:focus-visible{outline:none}:host(:not([reverse]):not([horizontal])) #palette{flex-direction:column}:host(:not([reverse]):not([horizontal])) #palette>div:not(:first-child){border-top:0}:host(:not([reverse]):not([horizontal])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host(:not([reverse]):not([horizontal])) #palette>div:last-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette{flex-direction:column-reverse}:host([reverse]:not([horizontal])) #palette>div:not(:first-child){border-bottom:0}:host([reverse]:not([horizontal])) #palette>div:first-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette>div:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette{flex-direction:row}:host([horizontal]:not([reverse])) #palette>div:not(:first-child){border-left:0}:host([horizontal]:not([reverse])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette>div:last-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette{flex-direction:row-reverse}:host([horizontal][reverse]) #palette>div:not(:first-child){border-right:0}:host([horizontal][reverse]) #palette>div:first-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette>div:last-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host{--color-palette-padding: var(--luzmo-spacing-1);--color-palette-background-color: transparent;--color-palette-hover-background-color: var( --luzmo-background-color-highlight );--color-palette-selected-border-color: var(--luzmo-border-color-down);--color-palette-selected-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-disabled-background-color: transparent;--color-palette-border-width: var(--luzmo-border-width);--color-palette-hover-border-color: var(--luzmo-border-color);--color-palette-focus-indicator-width: var(--luzmo-indicator-width);--color-palette-focus-indicator-color: var(--luzmo-indicator-color);--color-palette-color-width: var(--luzmo-spacing-5);--color-palette-color-height: 1.25rem;--color-palette-color-border-radius: var(--luzmo-border-radius);--color-palette-color-border-width: var(--luzmo-border-width);--color-palette-color-border-color: var(--luzmo-border-color);--color-palette-border-radius: calc( var(--color-palette-color-border-radius) + var(--color-palette-padding) )}:host([horizontal]){--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-color-width: 1.25rem}:host([size=s]){--color-palette-color-width: .75rem;--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-padding: var(--luzmo-spacing-1);--color-palette-color-border-radius: var(--luzmo-border-radius-s)}:host([size=s][horizontal]){--color-palette-color-height: .75rem;--color-palette-color-width: var(--luzmo-spacing-5)}:host([size=l]){--color-palette-color-width: 1.25rem;--color-palette-color-height: 1.5rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-l)}:host([size=l][horizontal]){--color-palette-color-height: 1.25rem;--color-palette-color-width: 1.5rem}:host([size=xl]){--color-palette-color-width: 1.5rem;--color-palette-color-height: 1.75rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-xl)}:host([size=xl][horizontal]){--color-palette-color-height: 1.5rem;--color-palette-color-width: 1.75rem}";var b=Object.defineProperty,t=(i,e,a,s)=>{for(var l=void 0,d=i.length-1,p;d>=0;d--)(p=i[d])&&(l=p(e,a,l)||l);return l&&b(e,a,l),l};const c=class c extends n.SizedMixin(u.Focusable,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.selected=!1,this.active=!1,this.reverse=!1,this.horizontal=!1}get focusElement(){return this}render(){var a;const e=(a=this.colors)==null?void 0:a.map(s=>r.x`<div class="color" style="background-color: ${s}"></div>`);return r.x` <div id="palette">${e}</div> `}firstUpdated(e){super.firstUpdated(e)}updated(e){super.updated(e),e.has("selected")&&this.setAttribute("tabindex",this.selected?"0":"-1"),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}};c.styles=r.r(h);let o=c;t([r.n({type:Boolean,reflect:!0})],o.prototype,"disabled");t([r.n({type:Boolean,reflect:!0})],o.prototype,"focused");t([r.n({type:Boolean,reflect:!0})],o.prototype,"selected");t([r.n({type:Boolean,reflect:!0})],o.prototype,"active");t([r.n({type:String,reflect:!0})],o.prototype,"value");t([r.n({type:Array,reflect:!0})],o.prototype,"colors");t([r.n({type:Boolean,reflect:!0})],o.prototype,"reverse");t([r.n({type:Boolean,reflect:!0})],o.prototype,"horizontal");customElements.get("luzmo-color-palette")||customElements.define("luzmo-color-palette",o);exports.LuzmoColorPalette=o;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const focusable = require("../focusable-BPrTcZPd.cjs");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+const styles = ":host{box-sizing:border-box}:host([focused]),:host(:focus-visible){outline:none}:host([focused]) #palette,:host(:focus-visible) #palette{border:var(--luzmo-color-palette-focus-indicator-width, var(--color-palette-focus-indicator-width)) solid var(--luzmo-color-palette-focus-indicator-color, var(--color-palette-focus-indicator-color))!important}:host([disabled]){pointer-events:none;cursor:not-allowed}:host([disabled]) #palette{opacity:var(--luzmo-color-palette-disabled-opacity, .3);border-color:transparent!important;background-color:var(--luzmo-color-palette-disabled-background-color, var(--color-palette-disabled-background-color))!important}:host([selected]) #palette{border-color:var(--luzmo-color-palette-selected-border-color, var(--color-palette-selected-border-color));background-color:var(--luzmo-color-palette-selected-background-color, var(--color-palette-selected-background-color))}:host:hover #palette{border-color:var(--luzmo-color-palette-hover-border-color, var(--color-palette-hover-border-color))}#palette{box-sizing:border-box;height:100%;width:fit-content;padding:var(--luzmo-color-palette-padding, var(--color-palette-padding));border:var(--luzmo-color-palette-border-width, var(--color-palette-border-width)) solid transparent;cursor:pointer;border-radius:var(--luzmo-color-palette-border-radius, var(--color-palette-border-radius));display:flex}#palette>div{box-sizing:border-box;border:var(--luzmo-color-palette-color-border-width, var(--color-palette-color-border-width)) solid var(--luzmo-color-palette-color-border-color, var(--color-palette-color-border-color));height:var(--luzmo-color-palette-color-height, var(--color-palette-color-height));width:var(--luzmo-color-palette-color-width, var(--color-palette-color-width))}#palette:hover{background-color:var(--luzmo-color-palette-hover-background-color, var(--color-palette-hover-background-color))}#palette:focus-visible{outline:none}:host(:not([reverse]):not([horizontal])) #palette{flex-direction:column}:host(:not([reverse]):not([horizontal])) #palette>div:not(:first-child){border-top:0}:host(:not([reverse]):not([horizontal])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host(:not([reverse]):not([horizontal])) #palette>div:last-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette{flex-direction:column-reverse}:host([reverse]:not([horizontal])) #palette>div:not(:first-child){border-bottom:0}:host([reverse]:not([horizontal])) #palette>div:first-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette>div:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette{flex-direction:row}:host([horizontal]:not([reverse])) #palette>div:not(:first-child){border-left:0}:host([horizontal]:not([reverse])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette>div:last-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette{flex-direction:row-reverse}:host([horizontal][reverse]) #palette>div:not(:first-child){border-right:0}:host([horizontal][reverse]) #palette>div:first-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette>div:last-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host{--color-palette-padding: var(--luzmo-spacing-1);--color-palette-background-color: transparent;--color-palette-hover-background-color: var( --luzmo-background-color-highlight );--color-palette-selected-border-color: var(--luzmo-border-color-down);--color-palette-selected-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-disabled-background-color: transparent;--color-palette-border-width: var(--luzmo-border-width);--color-palette-hover-border-color: var(--luzmo-border-color);--color-palette-focus-indicator-width: var(--luzmo-indicator-width);--color-palette-focus-indicator-color: var(--luzmo-indicator-color);--color-palette-color-width: var(--luzmo-spacing-5);--color-palette-color-height: 1.25rem;--color-palette-color-border-radius: var(--luzmo-border-radius);--color-palette-color-border-width: var(--luzmo-border-width);--color-palette-color-border-color: var(--luzmo-border-color);--color-palette-border-radius: calc( var(--color-palette-color-border-radius) + var(--color-palette-padding) )}:host([horizontal]){--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-color-width: 1.25rem}:host([size=s]){--color-palette-color-width: .75rem;--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-padding: var(--luzmo-spacing-1);--color-palette-color-border-radius: var(--luzmo-border-radius-s)}:host([size=s][horizontal]){--color-palette-color-height: .75rem;--color-palette-color-width: var(--luzmo-spacing-5)}:host([size=l]){--color-palette-color-width: 1.25rem;--color-palette-color-height: 1.5rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-l)}:host([size=l][horizontal]){--color-palette-color-height: 1.25rem;--color-palette-color-width: 1.5rem}:host([size=xl]){--color-palette-color-width: 1.5rem;--color-palette-color-height: 1.75rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-xl)}:host([size=xl][horizontal]){--color-palette-color-height: 1.5rem;--color-palette-color-width: 1.75rem}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _LuzmoColorPalette = class _LuzmoColorPalette extends sizedMixin.SizedMixin(focusable.Focusable, {
+  validSizes: ["s", "m", "l", "xl"],
+  noDefaultSize: true
+}) {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.selected = false;
+    this.active = false;
+    this.reverse = false;
+    this.horizontal = false;
+  }
+  /**
+   * @internal
+   */
+  get focusElement() {
+    return this;
+  }
+  render() {
+    var _a;
+    const renderColors = (_a = this.colors) == null ? void 0 : _a.map((color) => {
+      return lit.html`<div class="color" style="background-color: ${color}"></div>`;
+    });
+    return lit.html` <div id="palette">${renderColors}</div> `;
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("selected")) {
+      this.setAttribute("tabindex", this.selected ? "0" : "-1");
+    }
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
+    }
+  }
+};
+_LuzmoColorPalette.styles = lit.unsafeCSS(styles);
+let LuzmoColorPalette = _LuzmoColorPalette;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorPalette.prototype, "disabled");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorPalette.prototype, "focused");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorPalette.prototype, "selected");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorPalette.prototype, "active");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoColorPalette.prototype, "value");
+__decorateClass([
+  decorators_js.property({ type: Array, reflect: true })
+], LuzmoColorPalette.prototype, "colors");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorPalette.prototype, "reverse");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorPalette.prototype, "horizontal");
+if (!customElements.get("luzmo-color-palette")) {
+  customElements.define("luzmo-color-palette", LuzmoColorPalette);
+}
+exports.LuzmoColorPalette = LuzmoColorPalette;