@esri/calcite-components 3.1.0-next.8 → 3.1.0

package/dist/components/calcite-carousel-item/customElement.js

@@ -5,7 +5,7 @@ import { g as c } from "../../chunks/guid.js";
 import { css as n } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.8 */
+v3.1.0 */
 const e = {
   container: "container",
   selected: "selected"

package/dist/components/calcite-checkbox/customElement.js

@@ -1,5 +1,5 @@
 import { C as c, c as a } from "../../chunks/runtime.js";
-import { html as l, svg as r } from "lit-html";
+import { svg as l, html as r } from "lit-html";
 import { createRef as n, ref as h } from "lit-html/directives/ref.js";
 import { LitElement as d, createEvent as t, safeClassMap as o, nothing as i } from "@arcgis/lumina";
 import { g } from "../../chunks/dom.js";
@@ -11,7 +11,7 @@ import { c as C } from "../../chunks/component.js";
 import { css as z } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.8 */
+v3.1.0 */
 const s = {
   toggle: "toggle",
   check: "check-svg"
@@ -84,10 +84,10 @@ class I extends d {
   // #region Rendering
   render() {
     const e = g(this.el) === "rtl";
-    return f({ disabled: this.disabled, children: l`<div .ariaChecked=${this.checked} .ariaLabel=${y(this)} class=${o({
+    return f({ disabled: this.disabled, children: r`<div .ariaChecked=${this.checked} .ariaLabel=${y(this)} class=${o({
       [s.toggle]: !0,
       [c.rtl]: e
-    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? i} ${h(this.toggleEl)}><svg aria-hidden=true class=${o(s.check)} viewBox="0 0 16 16">${r`<path d=${this.getPath() ?? i} />`}</svg><slot></slot></div>${u({ component: this })}` });
+    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? i} ${h(this.toggleEl)}><svg aria-hidden=true class=${o(s.check)} viewBox="0 0 16 16">${l`<path d=${this.getPath() ?? i} />`}</svg><slot></slot></div>${u({ component: this })}` });
   }
 }
 a("calcite-checkbox", I);

package/dist/components/calcite-chip/customElement.js

@@ -1,7 +1,7 @@
 import { i as h, c as d } from "../../chunks/runtime.js";
-import { html as t } from "lit";
+import { html as i } from "lit";
 import { createRef as o, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as v, createEvent as a, safeClassMap as i } from "@arcgis/lumina";
+import { LitElement as v, createEvent as a, safeClassMap as t } from "@arcgis/lumina";
 import { a as m } from "../../chunks/dom.js";
 import { c as g, g as n } from "../../chunks/component.js";
 import { u, I as b } from "../../chunks/interactive.js";
@@ -10,7 +10,7 @@ import { u as f } from "../../chunks/useT9n.js";
 import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.8 */
+v3.1.0 */
 const c = {
   title: "title",
   close: "close",
@@ -35,7 +35,7 @@ const c = {
   checkedSingle: "circle-f",
   uncheckedMultiple: "square",
   checkedMultiple: "check-square-f"
-}, y = k`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-flex;cursor:default;border-radius:var(--calcite-chip-corner-radius, 9999px)}:host([closed]){display:none}:host([appearance=outline]) .container,:host([appearance=outline-fill]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([appearance=outline]) .close,:host([appearance=outline-fill]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([appearance=outline]):host([kind=brand]) .container,:host([appearance=outline-fill]):host([kind=brand]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-brand))}:host([appearance=outline]):host([kind=inverse]) .container,:host([appearance=outline-fill]):host([kind=inverse]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]) .container,:host([appearance=outline-fill]):host([kind=neutral]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]) .container{background-color:transparent}:host([appearance=outline-fill]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]) .container{border-color:transparent}:host([appearance=solid]):host([kind=brand]) .container,:host([appearance=solid]):host([kind=inverse]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-inverse))}:host([appearance=solid]):host([kind=brand]) .close,:host([appearance=solid]):host([kind=inverse]) .close{outline-color:var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=inverse]) .close:hover{background-color:var(--calcite-color-inverse-hover)}:host([appearance=solid]):host([kind=inverse]) .close:active{background-color:var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=neutral]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-2))}:host([kind=neutral]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([kind=neutral]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([selected]) .select-icon{opacity:1}:host([appearance=solid]):host([kind=neutral]) .container.selectable:hover{background-color:var(--calcite-color-foreground-3)}:host([appearance=solid]):host([kind=neutral]) .container.selectable:active{background-color:var(--calcite-color-border-3)}:host([appearance=solid]):host([kind=inverse]) .container.selectable:hover{background-color:var(--calcite-color-inverse-hover)}:host([appearance=solid]):host([kind=inverse]) .container.selectable:active{background-color:var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=brand]) .container.selectable:hover{background-color:var(--calcite-color-brand-hover)}:host([appearance=solid]):host([kind=brand]) .container.selectable:active{background-color:var(--calcite-color-brand-press)}:host([appearance=outline-fill]):host([kind=neutral]) .container.selectable:hover{background-color:var(--calcite-color-foreground-2);border-color:var(--calcite-color-border-input)}:host([appearance=outline-fill]):host([kind=neutral]) .container.selectable:active{background-color:var(--calcite-color-foreground-3);border-color:var(--calcite-color-text-3)}:host([appearance=outline-fill]):host([kind=inverse]) .container.selectable:hover,:host([appearance=outline-fill]):host([kind=brand]) .container.selectable:hover{background-color:var(--calcite-color-foreground-2)}:host([appearance=outline-fill]):host([kind=inverse]) .container.selectable:active,:host([appearance=outline-fill]):host([kind=brand]) .container.selectable:active{background-color:var(--calcite-color-foreground-3)}:host([appearance=outline]):host([kind=neutral]) .container.selectable:hover{background-color:var(--calcite-color-transparent-hover);border-color:var(--calcite-color-border-input)}:host([appearance=outline]):host([kind=neutral]) .container.selectable:active{background-color:var(--calcite-color-transparent-press);border-color:var(--calcite-color-text-3)}:host([appearance=outline]):host([kind=inverse]) .container.selectable:hover,:host([appearance=outline]):host([kind=brand]) .container.selectable:hover{background-color:var(--calcite-color-transparent-hover)}:host([appearance=outline]):host([kind=inverse]) .container.selectable:active,:host([appearance=outline]):host([kind=brand]) .container.selectable:active{background-color:var(--calcite-color-transparent-press)}:host([scale=s]) .container{--calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--2);--calcite-internal-chip-icon-size: var(--calcite-size-xs, 1rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-image-size: var(--calcite-spacing-xl, 1.25rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-close-size: var(--calcite-size-xs, 1rem) }:host([scale=s]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px)}:host([scale=s]) .container.image--slotted:has(.chip-icon),:host([scale=s]) .container.image--slotted.text--slotted,:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.image--slotted:not(.text--slotted,:has(.chip-icon)),:host([scale=s]) .container.image--slotted:not(.selectable){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=s]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.multiple:not(.is-circle).image--slotted:not(.text--slotted){--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container{--calcite-internal-chip-block-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--1);--calcite-internal-chip-icon-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-image-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-close-size: var(--calcite-size-sm, 1.5rem) }:host([scale=m]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=m]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.image--slotted:has(.chip-icon),:host([scale=m]) .container.image--slotted.text--slotted,:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=m]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.multiple:not(.is-circle){--calcite-internal-chip-select-space-x-end: .125rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=m]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container{--calcite-internal-chip-block-size: 2.75rem ;--calcite-internal-chip-container-space-x-end: .5rem ;--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-font-size: var(--calcite-font-size-0);--calcite-internal-chip-icon-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-icon-space: .5rem ;--calcite-internal-chip-image-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-title-space: .5rem ;--calcite-internal-close-size: var(--calcite-size-md, 2rem) }:host([scale=l]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.image--slotted:has(.chip-icon),:host([scale=l]) .container.image--slotted.text--slotted,:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .5rem }:host([scale=l]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=l]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: .5rem }:host([scale=l]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .75rem }:host([scale=l]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) }.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;border-radius:var(--calcite-chip-corner-radius, 9999px);border-width:var(--calcite-border-width-sm);border-style:solid;font-size:var(--calcite-internal-chip-font-size, var(--calcite-font-size));padding-inline-start:var(--calcite-internal-chip-container-space-x-start);padding-inline-end:var(--calcite-internal-chip-container-space-x-end);block-size:var(--calcite-internal-chip-block-size, auto);inline-size:var(--calcite-internal-chip-inline-size, auto);min-inline-size:var(--calcite-internal-chip-block-size, auto)}.container:hover .select-icon--active{opacity:var(--calcite-opacity-full, 1)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container:not(.text--slotted) .title,.container:not(.image--slotted) .image-container{display:none}.container.is-circle .chip-icon,.container.is-circle .image-container{padding:var(--calcite-spacing-none, 0)}.title{padding-inline:var(--calcite-internal-chip-title-space)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none;block-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));padding-inline-start:var(--calcite-spacing-none, 0);padding-inline-end:var(--calcite-internal-chip-image-space-x-end, 0)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));padding-inline:var(--calcite-internal-chip-icon-space, var(--calcite-spacing-xs, .375rem))}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:absolute;visibility:hidden;inline-size:auto;opacity:0;transition:opacity .15s ease-in-out,inline-size .15s ease-in-out;color:var(--calcite-chip-select-icon-color, currentColor)}.select-icon.select-icon--active{position:relative;visibility:visible;opacity:var(--calcite-opacity-half, .5);color:var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor))}.multiple .select-icon{display:flex;align-items:center;justify-content:center}.multiple .select-icon,.single .select-icon--active{padding-inline-start:var(--calcite-internal-chip-select-space-x-start);padding-inline-end:var(--calcite-internal-chip-select-space-x-end);block-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem))}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.close{margin:0;cursor:pointer;align-items:center;border-radius:50%;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-close-background-color, var(--calcite-color-transparent));-webkit-appearance:none;display:flex;align-content:center;justify-content:center;color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));block-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));padding:0}.close:hover,.close:focus{background-color:var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:active{background-color:var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))}.close calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+}, y = k`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-flex;cursor:default;border-radius:var(--calcite-chip-corner-radius, 9999px)}:host([closed]){display:none}:host([appearance=outline]) .container,:host([appearance=outline-fill]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([appearance=outline]) .close,:host([appearance=outline-fill]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-brand))}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]){--calcite-internal-chip-background-color: transparent}:host([appearance=outline-fill]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]){--calcite-internal-chip-border-color: transparent}:host([appearance=solid]):host([kind=brand]) .container,:host([appearance=solid]):host([kind=inverse]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-inverse))}:host([appearance=solid]):host([kind=brand]) .close,:host([appearance=solid]):host([kind=inverse]) .close{outline-color:var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=inverse]) .close:hover{background-color:var(--calcite-color-inverse-hover)}:host([appearance=solid]):host([kind=inverse]) .close:active{background-color:var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2))}:host([kind=neutral]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([kind=neutral]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([selected]) .select-icon{opacity:1}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-border-3)}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-inverse-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-brand-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline-fill]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3)}:host([appearance=outline]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press)}:host([scale=s]) .container{--calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--2);--calcite-internal-chip-icon-size: var(--calcite-size-xs, 1rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-image-size: var(--calcite-spacing-xl, 1.25rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-close-size: var(--calcite-size-xs, 1rem) }:host([scale=s]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px)}:host([scale=s]) .container.image--slotted:has(.chip-icon),:host([scale=s]) .container.image--slotted.text--slotted,:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.image--slotted:not(.text--slotted,:has(.chip-icon)),:host([scale=s]) .container.image--slotted:not(.selectable){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=s]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.multiple:not(.is-circle).image--slotted:not(.text--slotted){--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container{--calcite-internal-chip-block-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--1);--calcite-internal-chip-icon-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-image-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-close-size: var(--calcite-size-sm, 1.5rem) }:host([scale=m]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=m]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.image--slotted:has(.chip-icon),:host([scale=m]) .container.image--slotted.text--slotted,:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=m]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.multiple:not(.is-circle){--calcite-internal-chip-select-space-x-end: .125rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=m]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container{--calcite-internal-chip-block-size: 2.75rem ;--calcite-internal-chip-container-space-x-end: .5rem ;--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-font-size: var(--calcite-font-size-0);--calcite-internal-chip-icon-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-icon-space: .5rem ;--calcite-internal-chip-image-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-title-space: .5rem ;--calcite-internal-close-size: var(--calcite-size-md, 2rem) }:host([scale=l]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.image--slotted:has(.chip-icon),:host([scale=l]) .container.image--slotted.text--slotted,:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .5rem }:host([scale=l]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=l]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: .5rem }:host([scale=l]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .75rem }:host([scale=l]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) }.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;background-color:var(--calcite-internal-chip-background-color);border-color:var(--calcite-internal-chip-border-color);border-radius:var(--calcite-chip-corner-radius, 9999px);border-width:var(--calcite-border-width-sm);border-style:solid;font-size:var(--calcite-internal-chip-font-size, var(--calcite-font-size));padding-inline-start:var(--calcite-internal-chip-container-space-x-start);padding-inline-end:var(--calcite-internal-chip-container-space-x-end);block-size:var(--calcite-internal-chip-block-size, auto);inline-size:var(--calcite-internal-chip-inline-size, auto);min-inline-size:var(--calcite-internal-chip-block-size, auto)}.container:hover .select-icon--active{opacity:var(--calcite-opacity-full, 1)}.container.selectable{cursor:pointer}.container.selectable:hover{background-color:var(--calcite-internal-chip-selectable-hover-background-color);border-color:var(--calcite-internal-chip-selectable-hover-border-color)}.container.selectable:active{background-color:var(--calcite-internal-chip-selectable-active-background-color);border-color:var(--calcite-internal-chip-selectable-active-border-color)}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container:not(.text--slotted) .title,.container:not(.image--slotted) .image-container{display:none}.container.is-circle .chip-icon,.container.is-circle .image-container{padding:var(--calcite-spacing-none, 0)}.title{padding-inline:var(--calcite-internal-chip-title-space)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none;block-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));padding-inline-start:var(--calcite-spacing-none, 0);padding-inline-end:var(--calcite-internal-chip-image-space-x-end, 0)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));padding-inline:var(--calcite-internal-chip-icon-space, var(--calcite-spacing-xs, .375rem))}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:absolute;visibility:hidden;inline-size:auto;opacity:0;transition:opacity .15s ease-in-out,inline-size .15s ease-in-out;color:var(--calcite-chip-select-icon-color, currentColor)}.select-icon.select-icon--active{position:relative;visibility:visible;opacity:var(--calcite-opacity-half, .5);color:var(--calcite-chip-select-icon-color-press, var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor)))}.multiple .select-icon{display:flex;align-items:center;justify-content:center}.multiple .select-icon,.single .select-icon--active{padding-inline-start:var(--calcite-internal-chip-select-space-x-start);padding-inline-end:var(--calcite-internal-chip-select-space-x-end);block-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem))}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.close{margin:0;cursor:pointer;align-items:center;border-radius:50%;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-close-background-color, var(--calcite-color-transparent));-webkit-appearance:none;display:flex;align-content:center;justify-content:center;color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));block-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));padding:0}.close:hover,.close:focus{background-color:var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:active{background-color:var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))}.close calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class C extends v {
   // #endregion
   // #region Lifecycle
@@ -117,24 +117,24 @@ class C extends v {
   // #endregion
   // #region Rendering
   renderChipImage() {
-    return t`<div class=${i(c.imageContainer)}><slot name=${z.image} @slotchange=${this.handleSlotImageChange}></slot></div>`;
+    return i`<div class=${t(c.imageContainer)}><slot name=${z.image} @slotchange=${this.handleSlotImageChange}></slot></div>`;
   }
   renderSelectionIcon() {
     const e = this.selectionMode === "multiple" ? this.selected ? l.checkedMultiple : l.uncheckedMultiple : this.selected ? l.checkedSingle : void 0;
-    return t`<div class=${i({
+    return i`<div class=${t({
       [c.selectIcon]: !0,
       [c.selectIconActive]: this.selectionMode === "multiple" || this.selected
-    })}>${e ? t`<calcite-icon .icon=${e} .scale=${n(this.scale)}></calcite-icon>` : null}</div>`;
+    })}>${e ? i`<calcite-icon .icon=${e} .scale=${n(this.scale)}></calcite-icon>` : null}</div>`;
   }
   renderCloseButton() {
-    return t`<button .ariaLabel=${this.messages.dismissLabel} class=${i(c.close)} @click=${this.close} @keydown=${this.closeButtonKeyDownHandler} .tabIndex=${this.disabled ? -1 : 0} ${r(this.closeButtonEl)}><calcite-icon .icon=${l.close} .scale=${n(this.scale)}></calcite-icon></button>`;
+    return i`<button .ariaLabel=${this.messages.dismissLabel} class=${t(c.close)} @click=${this.close} @keydown=${this.closeButtonKeyDownHandler} .tabIndex=${this.disabled ? -1 : 0} ${r(this.closeButtonEl)}><calcite-icon .icon=${l.close} .scale=${n(this.scale)}></calcite-icon></button>`;
   }
   renderIcon() {
-    return t`<calcite-icon class=${i(c.chipIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.icon} .scale=${n(this.scale)}></calcite-icon>`;
+    return i`<calcite-icon class=${t(c.chipIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.icon} .scale=${n(this.scale)}></calcite-icon>`;
   }
   render() {
     const { disabled: e } = this, s = e || !e && !this.interactive, p = this.selectionMode === "multiple" && this.interactive ? "checkbox" : this.selectionMode !== "none" && this.interactive ? "radio" : this.interactive ? "button" : "img";
-    return b({ disabled: e, children: t`<div .ariaChecked=${this.selectionMode !== "none" && this.interactive ? this.selected : void 0} .ariaLabel=${this.label} class=${i({
+    return b({ disabled: e, children: i`<div .ariaChecked=${this.selectionMode !== "none" && this.interactive ? this.selected : void 0} .ariaLabel=${this.label} class=${t({
       [c.container]: !0,
       [c.textSlotted]: this.hasText,
       [c.imageSlotted]: this.hasImage,
@@ -145,7 +145,7 @@ class C extends v {
       [c.closable]: this.closable,
       [c.nonInteractive]: !this.interactive,
       [c.isCircle]: !this.closable && !this.hasText && (!this.icon || !this.hasImage) && (this.selectionMode === "none" || !!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)
-    })} @click=${this.handleEmittingEvent} .role=${p} .tabIndex=${s ? -1 : 0} ${r(this.containerEl)}>${this.selectionMode !== "none" && this.renderSelectionIcon() || ""}${this.renderChipImage()}${this.icon && this.renderIcon() || ""}<span class=${i(c.title)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></span>${this.closable && this.renderCloseButton() || ""}</div>` });
+    })} @click=${this.handleEmittingEvent} .role=${p} .tabIndex=${s ? -1 : 0} ${r(this.containerEl)}>${this.selectionMode !== "none" && this.renderSelectionIcon() || ""}${this.renderChipImage()}${this.icon && this.renderIcon() || ""}<span class=${t(c.title)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></span>${this.closable && this.renderCloseButton() || ""}</div>` });
   }
 }
 d("calcite-chip", C);

package/dist/components/calcite-chip-group/customElement.js

@@ -8,7 +8,7 @@ import { c as f } from "../../chunks/component.js";
 import { css as u } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.8 */
+v3.1.0 */
 const g = u`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class I extends r {
   // #endregion

package/dist/components/calcite-color-picker/customElement.js

@@ -2,30 +2,31 @@ import { c as se } from "../../chunks/runtime.js";
 import { ref as v } from "lit-html/directives/ref.js";
 import { repeat as le } from "lit-html/directives/repeat.js";
 import { keyed as I } from "lit-html/directives/keyed.js";
-import { D as g, e as E, S as $, g as ne, f as re, n as O, h as S, p as K, C as b, j as P, k as x, l as ce, m as H, O as y, R as A, H as p, q as n, o as U, t as he, s as j, u as W, v as de, c as R, w as N } from "../../chunks/utils4.js";
-import { throttle as _ } from "lodash-es";
-import { html as u, nothing as D } from "lit";
-import { LitElement as pe, createEvent as B, safeClassMap as c, safeStyleMap as k } from "@arcgis/lumina";
-import { i as V, h as ue, g as Ce } from "../../chunks/dom.js";
-import { u as fe, I as me } from "../../chunks/interactive.js";
-import { i as ge } from "../../chunks/key.js";
-import { c as ve } from "../../chunks/component.js";
-import { c as Se, r as X, a as be } from "../../chunks/math.js";
-import { u as ye } from "../../chunks/useT9n.js";
-import { c as we } from "../../chunks/observers.js";
+import S from "color";
+import { throttle as E } from "lodash-es";
+import { html as u, nothing as $ } from "lit";
+import { LitElement as ne, createEvent as K, safeClassMap as c, safeStyleMap as x } from "@arcgis/lumina";
+import { i as H, h as re, g as ce } from "../../chunks/dom.js";
+import { u as he, I as de } from "../../chunks/interactive.js";
+import { i as pe } from "../../chunks/key.js";
+import { c as ue } from "../../chunks/component.js";
+import { c as Ce, r as U, a as fe } from "../../chunks/math.js";
+import { u as me } from "../../chunks/useT9n.js";
+import { c as ge } from "../../chunks/observers.js";
+import { D as g, C as j, S as A, g as ve, e as Se, n as O, h as b, p as W, f as P, j as D, k as be, l as N, O as y, R as k, H as p, m as n, o as _, t as ye, q as B, s as V, u as we, c as R, v as X } from "../../chunks/utils4.js";
 import { css as $e } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.8 */
+v3.1.0 */
 const xe = $e`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: 8px}:host([scale=s]) .saved-colors{gap:.25rem;grid-template-columns:repeat(auto-fill,20px)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: 12px}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: 16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill,32px)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors{display:grid;gap:.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill,24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`, q = 16;
-class Ae extends pe {
+class Ae extends ne {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this._color = g, this.internalColorUpdateContext = null, this.isActiveChannelInputEmpty = !1, this.mode = E.HEX, this.resizeObserver = we("resize", (e) => this.resizeCanvas(e)), this.shiftKeyChannelAdjustment = 0, this.upOrDownArrowKeyTracker = null, this._valueWasSet = !1, this.channelMode = "rgb", this.channels = this.toChannels(g), this.staticDimensions = $.m, this.savedColors = [], this.allowEmpty = !1, this.alphaChannel = !1, this.channelsDisabled = !1, this.clearable = !1, this.disabled = !1, this.format = "auto", this.hexDisabled = !1, this.messages = ye({ blocking: !0 }), this.savedDisabled = !1, this.scale = "m", this.calciteColorPickerChange = B({ cancelable: !1 }), this.calciteColorPickerInput = B({ cancelable: !1 }), this.captureColorFieldColor = (e, t, i = !0) => {
+    super(), this._color = g, this.internalColorUpdateContext = null, this.isActiveChannelInputEmpty = !1, this.mode = j.HEX, this.resizeObserver = ge("resize", (e) => this.resizeCanvas(e)), this.shiftKeyChannelAdjustment = 0, this.upOrDownArrowKeyTracker = null, this._valueWasSet = !1, this.channelMode = "rgb", this.channels = this.toChannels(g), this.staticDimensions = A.m, this.savedColors = [], this.allowEmpty = !1, this.alphaChannel = !1, this.channelsDisabled = !1, this.clearable = !1, this.disabled = !1, this.format = "auto", this.hexDisabled = !1, this.messages = me({ blocking: !0 }), this.savedDisabled = !1, this.scale = "m", this.calciteColorPickerChange = K({ cancelable: !1 }), this.calciteColorPickerInput = K({ cancelable: !1 }), this.captureColorFieldColor = (e, t, i = !0) => {
       const { width: o, height: a } = this.dynamicDimensions.colorField, s = Math.round(p.s / o * e), l = Math.round(p.v / a * (a - t));
       this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(s).value(l), i);
-    }, this.drawColorControls = _((e = "all") => {
+    }, this.drawColorControls = E((e = "all") => {
       (e === "all" || e === "color-field") && this.colorFieldRenderingContext && this.drawColorField(), (e === "all" || e === "hue-slider") && this.hueSliderRenderingContext && this.drawHueSlider(), this.alphaChannel && (e === "all" || e === "opacity-slider") && this.opacitySliderRenderingContext && this.drawOpacitySlider();
     }, q), this.globalPointerMoveHandler = (e) => {
       const { activeCanvasInfo: t, el: i } = this;
@@ -36,22 +37,22 @@ class Ae extends pe {
       const { clientX: r, clientY: h } = e;
       o.canvas.matches(":hover") ? (s = r - a.x, l = h - a.y) : (r < a.x + a.width && r > a.x ? s = r - a.x : r < a.x ? s = 0 : s = a.width, h < a.y + a.height && h > a.y ? l = h - a.y : h < a.y ? l = 0 : l = a.height), o === this.colorFieldRenderingContext ? this.captureColorFieldColor(s, l, !1) : o === this.hueSliderRenderingContext ? this.captureHueSliderColor(s) : o === this.opacitySliderRenderingContext && this.captureOpacitySliderValue(s);
     }, this.globalPointerUpHandler = (e) => {
-      if (!V(e))
+      if (!H(e))
         return;
       const t = this.activeCanvasInfo;
       this.activeCanvasInfo = null, this.drawColorControls(), t && this.calciteColorPickerChange.emit();
-    }, this.resizeCanvas = _((e) => {
+    }, this.resizeCanvas = E((e) => {
       if (!this.hasUpdated)
         return;
       const [t] = e, i = Math.floor(t.contentBoxSize[0].inlineSize);
       this.dynamicDimensions.colorField.width !== i && (this.updateDynamicDimensions(i), this.updateCanvasSize(), this.drawColorControls());
     }, q), this.updateDynamicDimensions = (e) => {
       const t = {
-        width: ne(e, this.staticDimensions, this.alphaChannel),
+        width: ve(e, this.staticDimensions, this.alphaChannel),
         height: this.staticDimensions.slider.height
       };
       this.dynamicDimensions = {
-        colorField: re(e),
+        colorField: Se(e),
         slider: t
       };
     }, this.listen("keydown", this.handleChannelKeyUpOrDown, { capture: !0 }), this.listen("keyup", this.handleChannelKeyUpOrDown, { capture: !0 });
@@ -101,23 +102,23 @@ class Ae extends pe {
   // #region Public Methods
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await ve(this), ue(this.el);
+    await ue(this), re(this.el);
   }
   connectedCallback() {
     super.connectedCallback(), this.observeResize();
   }
   async load() {
-    this._valueWasSet || (this._value ??= O(S(g, this.alphaChannel))), this.handleAllowEmptyOrClearableChange();
-    const { isClearable: e, color: t, format: i, value: o } = this, a = e && !o, s = K(o), l = a || i === "auto" && s || i === s, r = a ? null : l ? b(o) : t;
-    l || this.showIncompatibleColorWarning(o, i), this.setMode(i, !1), this.internalColorSet(r, !1, "initial"), this.updateStaticDimensions(this.scale), this.updateDynamicDimensions($[this.scale].minWidth);
+    this._valueWasSet || (this._value ??= O(b(g, this.alphaChannel))), this.handleAllowEmptyOrClearableChange();
+    const { isClearable: e, color: t, format: i, value: o } = this, a = e && !o, s = W(o), l = a || i === "auto" && s || i === s, r = a ? null : l ? S(o) : t;
+    l || this.showIncompatibleColorWarning(o, i), this.setMode(i, !1), this.internalColorSet(r, !1, "initial"), this.updateStaticDimensions(this.scale), this.updateDynamicDimensions(A[this.scale].minWidth);
     const h = `${P}${this.storageId}`;
     this.storageId && localStorage.getItem(h) && (this.savedColors = JSON.parse(localStorage.getItem(h)));
   }
   willUpdate(e) {
-    (e.has("allowEmpty") && (this.hasUpdated || this.allowEmpty !== !1) || e.has("clearable") && (this.hasUpdated || this.clearable !== !1)) && this.handleAllowEmptyOrClearableChange(), e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) && this.handleAlphaChannelChange(this.alphaChannel), this.hasUpdated && (e.has("alphaChannel") && this.alphaChannel !== !1 || e.has("staticDimensions") && this.staticDimensions !== $.m) && this.handleAlphaChannelDimensionsChange(), (e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) || e.has("format") && (this.hasUpdated || this.format !== "auto")) && this.handleFormatOrAlphaChannelChange(), e.has("scale") && (this.hasUpdated || this.scale !== "m") && this.handleScaleChange(this.scale);
+    (e.has("allowEmpty") && (this.hasUpdated || this.allowEmpty !== !1) || e.has("clearable") && (this.hasUpdated || this.clearable !== !1)) && this.handleAllowEmptyOrClearableChange(), e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) && this.handleAlphaChannelChange(this.alphaChannel), this.hasUpdated && (e.has("alphaChannel") && this.alphaChannel !== !1 || e.has("staticDimensions") && this.staticDimensions !== A.m) && this.handleAlphaChannelDimensionsChange(), (e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) || e.has("format") && (this.hasUpdated || this.format !== "auto")) && this.handleFormatOrAlphaChannelChange(), e.has("scale") && (this.hasUpdated || this.scale !== "m") && this.handleScaleChange(this.scale);
   }
   updated() {
-    fe(this);
+    he(this);
   }
   loaded() {
     this.handleAlphaChannelDimensionsChange();
@@ -135,7 +136,7 @@ class Ae extends pe {
   }
   handleAlphaChannelChange(e) {
     const { format: t } = this;
-    e && t !== "auto" && !x(t) && (console.warn(`ignoring alphaChannel as the current format (${t}) does not support alpha`), this.alphaChannel = !1);
+    e && t !== "auto" && !D(t) && (console.warn(`ignoring alphaChannel as the current format (${t}) does not support alpha`), this.alphaChannel = !1);
   }
   handleAlphaChannelDimensionsChange() {
     this.drawColorControls();
@@ -153,7 +154,7 @@ class Ae extends pe {
     const { isClearable: i, format: o } = this, a = !i || e;
     let s = !1;
     if (a) {
-      const d = K(e);
+      const d = W(e);
       if (!d || o !== "auto" && d !== o) {
         this.showIncompatibleColorWarning(e, o), this._value = t;
         return;
@@ -167,7 +168,7 @@ class Ae extends pe {
       this.calciteColorPickerInput.emit(), l || this.calciteColorPickerChange.emit();
       return;
     }
-    const r = i && !e ? null : b(e != null && typeof e == "object" && x(this.mode) ? ce(e) : e), h = !H(r, this.color);
+    const r = i && !e ? null : S(e != null && typeof e == "object" && D(this.mode) ? be(e) : e), h = !N(r, this.color);
     (s || h) && this.internalColorSet(r, this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")) || this.internalColorUpdateContext === "internal", "internal");
   }
   handleTabActivate(e) {
@@ -202,21 +203,21 @@ class Ae extends pe {
       this.internalColorSet(null);
       return;
     }
-    const s = i && O(S(i, x(this.mode)));
-    a !== s && this.internalColorSet(b(a));
+    const s = i && O(b(i, D(this.mode)));
+    a !== s && this.internalColorSet(S(a));
   }
   handleSavedColorSelect(e) {
     const t = e.currentTarget;
-    this.internalColorSet(b(t.color));
+    this.internalColorSet(S(t.color));
   }
   handleChannelInput(e) {
-    const t = e.currentTarget, i = Number(t.getAttribute("data-channel-index")), a = i === 3 ? y.max : this.channelMode === "rgb" ? A[Object.keys(A)[i]] : p[Object.keys(p)[i]];
+    const t = e.currentTarget, i = Number(t.getAttribute("data-channel-index")), a = i === 3 ? y.max : this.channelMode === "rgb" ? k[Object.keys(k)[i]] : p[Object.keys(p)[i]];
     let s;
     if (!t.value)
       s = "", this.isActiveChannelInputEmpty = !0, this.upOrDownArrowKeyTracker = null;
     else {
       const r = Number(t.value) + this.shiftKeyChannelAdjustment;
-      s = Se(r, 0, a).toString();
+      s = Ce(r, 0, a).toString();
     }
     t.value = s, s !== "" && this.shiftKeyChannelAdjustment !== 0 ? this.handleChannelChange(e) : s !== "" && this.handleChannelChange(e);
   }
@@ -242,7 +243,7 @@ class Ae extends pe {
     this.shiftKeyChannelAdjustment = t === "ArrowUp" && i ? o : t === "ArrowDown" && i ? -9 : 0, t === "ArrowUp" && (this.upOrDownArrowKeyTracker = "up"), t === "ArrowDown" && (this.upOrDownArrowKeyTracker = "down");
   }
   getChannelInputLimit(e) {
-    return this.channelMode === "rgb" ? A[Object.keys(A)[e]] : p[Object.keys(p)[e]];
+    return this.channelMode === "rgb" ? k[Object.keys(k)[e]] : p[Object.keys(p)[e]];
   }
   handleChannelChange(e) {
     const t = e.currentTarget, i = Number(t.getAttribute("data-channel-index")), o = [...this.channels];
@@ -253,10 +254,10 @@ class Ae extends pe {
     const s = i === 3;
     this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker && (t.value = this.upOrDownArrowKeyTracker === "up" ? (o[i] + 1 <= this.getChannelInputLimit(i) ? o[i] + 1 : this.getChannelInputLimit(i)).toString() : (o[i] - 1 >= 0 ? o[i] - 1 : 0).toString(), this.isActiveChannelInputEmpty = !1, this.upOrDownArrowKeyTracker = null);
     const l = t.value ? Number(t.value) : o[i];
-    o[i] = s ? U(l) : l, this.updateColorFromChannels(o);
+    o[i] = s ? _(l) : l, this.updateColorFromChannels(o);
   }
   handleSavedColorKeyDown(e) {
-    ge(e.key) && (e.preventDefault(), this.handleSavedColorSelect(e));
+    pe(e.key) && (e.preventDefault(), this.handleSavedColorSelect(e));
   }
   handleColorFieldPointerDown(e) {
     this.handleCanvasControlPointerDown(e, this.colorFieldRenderingContext, this.captureColorFieldColor, this.colorFieldScopeNode);
@@ -273,7 +274,7 @@ class Ae extends pe {
     this.handleCanvasControlPointerDown(e, this.opacitySliderRenderingContext, this.captureOpacitySliderValue, this.opacityScopeNode);
   }
   handleCanvasControlPointerDown(e, t, i, o) {
-    V(e) && (window.addEventListener("pointermove", this.globalPointerMoveHandler), window.addEventListener("pointerup", this.globalPointerUpHandler, {
+    H(e) && (window.addEventListener("pointermove", this.globalPointerMoveHandler), window.addEventListener("pointerup", this.globalPointerUpHandler, {
       once: !0
     }), this.activeCanvasInfo = {
       context: t,
@@ -297,34 +298,34 @@ class Ae extends pe {
     this.mode = this.ensureCompatibleMode(i, t);
   }
   ensureCompatibleMode(e, t) {
-    const { alphaChannel: i } = this, o = x(e);
+    const { alphaChannel: i } = this, o = D(e);
     if (i && !o) {
-      const a = he(e);
+      const a = ye(e);
       return t && console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`), a;
     }
     if (!i && o) {
-      const a = j(e);
+      const a = B(e);
       return t && console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`), a;
     }
     return e;
   }
   captureHueSliderColor(e) {
-    const t = W / this.effectiveSliderWidth * e;
+    const t = V / this.effectiveSliderWidth * e;
     this.internalColorSet(this.baseColorFieldColor.hue(t), !1);
   }
   captureOpacitySliderValue(e) {
-    const t = U(y.max / this.effectiveSliderWidth * e);
+    const t = _(y.max / this.effectiveSliderWidth * e);
     this.internalColorSet(this.baseColorFieldColor.alpha(t), !1);
   }
   internalColorSet(e, t = !0, i = "user-interaction") {
-    t && H(e, this.color) || (this.internalColorUpdateContext = i, this.color = e, this.value = this.toValue(e), this.internalColorUpdateContext = null);
+    t && N(e, this.color) || (this.internalColorUpdateContext = i, this.color = e, this.value = this.toValue(e), this.internalColorUpdateContext = null);
   }
   toValue(e, t = this.mode) {
     if (!e)
       return null;
     if (t.includes("hex")) {
-      const a = t === E.HEXA;
-      return O(S(e.round(), a), a);
+      const a = t === j.HEXA;
+      return O(b(e.round(), a), a);
     }
     if (t.includes("-css")) {
       const a = e[t.replace("-css", "").replace("a", "")]().round().string();
@@ -336,19 +337,19 @@ class Ae extends pe {
     }
     const o = (
       /* Color() does not support hsva, hsla nor rgba, so we use the non-alpha mode */
-      e[j(t)]().round().object()
+      e[B(t)]().round().object()
     );
-    return t.endsWith("a") ? de(o) : o;
+    return t.endsWith("a") ? we(o) : o;
   }
   getSliderCapSpacing() {
     const { staticDimensions: { slider: { height: e }, thumb: { radius: t } } } = this;
     return t * 2 - e;
   }
   updateStaticDimensions(e = "m") {
-    this.staticDimensions = $[e];
+    this.staticDimensions = A[e];
   }
   deleteColor() {
-    const e = S(this.color, this.alphaChannel);
+    const e = b(this.color, this.alphaChannel);
     if (!(this.savedColors.indexOf(e) > -1))
       return;
     const i = this.savedColors.filter((a) => a !== e);
@@ -357,7 +358,7 @@ class Ae extends pe {
     this.storageId && localStorage.setItem(o, JSON.stringify(i));
   }
   saveColor() {
-    const e = S(this.color, this.alphaChannel);
+    const e = b(this.color, this.alphaChannel);
     if (this.savedColors.indexOf(e) > -1)
       return;
     const i = [...this.savedColors, e];
@@ -420,7 +421,7 @@ class Ae extends pe {
     const { color: e } = this;
     if (!e)
       return;
-    const t = e.hsv().saturationv(100).value(100), { staticDimensions: { thumb: { radius: i } } } = this, o = this.effectiveSliderWidth, a = t.hue() / (W / o), s = i, l = this.getSliderBoundX(a, o, i);
+    const t = e.hsv().saturationv(100).value(100), { staticDimensions: { thumb: { radius: i } } } = this, o = this.effectiveSliderWidth, a = t.hue() / (V / o), s = i, l = this.getSliderBoundX(a, o, i);
     requestAnimationFrame(() => {
       this.hueScopeLeft = l;
     }), this.drawThumb(this.hueSliderRenderingContext, i, l, s, t, !1);
@@ -437,7 +438,7 @@ class Ae extends pe {
     ], h = 1 / (r.length - 1);
     let d = 0;
     r.forEach((C) => {
-      l.addColorStop(d, b(C).string()), d += h;
+      l.addColorStop(d, S(C).string()), d += h;
     }), e.clearRect(0, 0, s, t + this.getSliderCapSpacing() * 2), this.drawSliderPath(e, t, s, o, a), e.fillStyle = l, e.fill(), e.strokeStyle = "rgba(0,0,0,0.3)", e.lineWidth = 1, e.stroke(), this.drawActiveHueSliderColor();
   }
   drawOpacitySlider() {
@@ -470,8 +471,8 @@ class Ae extends pe {
     }), this.drawThumb(this.opacitySliderRenderingContext, i, l, s, t, !0);
   }
   getSliderBoundX(e, t, i) {
-    const o = be(e, t, i);
-    return o === 0 ? e : o === -1 ? X(e, 0, t, i, i * 2) : X(e, 0, t, t - i * 2, t - i);
+    const o = fe(e, t, i);
+    return o === 0 ? e : o === -1 ? U(e, 0, t, i, i * 2) : U(e, 0, t, t - i * 2, t - i);
   }
   storeOpacityScope(e) {
     this.opacityScopeNode = e;
@@ -490,7 +491,7 @@ class Ae extends pe {
     }
   }
   updateColorFromChannels(e) {
-    this.internalColorSet(b(e, this.channelMode));
+    this.internalColorSet(S(e, this.channelMode));
   }
   updateChannelsFromColor(e) {
     this.channels = e ? this.toChannels(e) : [null, null, null, null];
@@ -500,19 +501,19 @@ class Ae extends pe {
     return i.length === 3 && i.push(1), i;
   }
   getAdjustedScopePosition(e, t) {
-    return [e - N / 2, t - N / 2];
+    return [e - X / 2, t - X / 2];
   }
   // #endregion
   // #region Rendering
   render() {
-    const { channelsDisabled: e, color: t, colorFieldScopeLeft: i, colorFieldScopeTop: o, staticDimensions: { thumb: { radius: a } }, hexDisabled: s, hueScopeLeft: l, messages: r, alphaChannel: h, opacityScopeLeft: d, savedColors: C, savedDisabled: f, scale: m, scopeOrientation: w } = this, M = this.effectiveSliderWidth, z = t ? S(t, h) : null, G = a, Y = l ?? M * g.hue() / p.h, J = a, Z = d ?? M * R(g.alpha()) / y.max, L = t === void 0, F = w === "vertical", [Q, ee] = this.getAdjustedScopePosition(i, o), [te, ie] = this.getAdjustedScopePosition(Y, G), [oe, ae] = this.getAdjustedScopePosition(Z, J);
-    return me({ disabled: this.disabled, children: u`<div class=${c(n.container)}><div class=${c(n.controlAndScope)}><canvas class=${c(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${v(this.initColorField)}></canvas><div .ariaLabel=${F ? r.value : r.saturation} .ariaValueMax=${F ? p.v : p.s} aria-valuemin=0 .ariaValueNow=${(F ? t?.saturationv() : t?.value()) || "0"} class=${c({ [n.scope]: !0, [n.colorFieldScope]: !0 })} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${k({
+    const { channelsDisabled: e, color: t, colorFieldScopeLeft: i, colorFieldScopeTop: o, staticDimensions: { thumb: { radius: a } }, hexDisabled: s, hueScopeLeft: l, messages: r, alphaChannel: h, opacityScopeLeft: d, savedColors: C, savedDisabled: f, scale: m, scopeOrientation: w } = this, M = this.effectiveSliderWidth, z = t ? b(t, h) : null, G = a, Y = l ?? M * g.hue() / p.h, J = a, Z = d ?? M * R(g.alpha()) / y.max, L = t === void 0, F = w === "vertical", [Q, ee] = this.getAdjustedScopePosition(i, o), [te, ie] = this.getAdjustedScopePosition(Y, G), [oe, ae] = this.getAdjustedScopePosition(Z, J);
+    return de({ disabled: this.disabled, children: u`<div class=${c(n.container)}><div class=${c(n.controlAndScope)}><canvas class=${c(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${v(this.initColorField)}></canvas><div .ariaLabel=${F ? r.value : r.saturation} .ariaValueMax=${F ? p.v : p.s} aria-valuemin=0 .ariaValueNow=${(F ? t?.saturationv() : t?.value()) || "0"} class=${c({ [n.scope]: !0, [n.colorFieldScope]: !0 })} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${x({
       top: `${ee || 0}px`,
       left: `${Q || 0}px`
-    })} tabindex=0 ${v(this.storeColorFieldScope)}></div></div><div class=${c(n.previewAndSliders)}><calcite-color-picker-swatch class=${c(n.preview)} .color=${z} .scale=${this.alphaChannel ? "l" : this.scale}></calcite-color-picker-swatch><div class=${c(n.sliders)}><div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.hueSlider]: !0 })} @pointerdown=${this.handleHueSliderPointerDown} ${v(this.initHueSlider)}></canvas><div .ariaLabel=${r.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue() || g.round().hue()} class=${c({ [n.scope]: !0, [n.hueScope]: !0 })} @keydown=${this.handleHueScopeKeyDown} role=slider style=${k({
+    })} tabindex=0 ${v(this.storeColorFieldScope)}></div></div><div class=${c(n.previewAndSliders)}><calcite-color-picker-swatch class=${c(n.preview)} .color=${z} .scale=${this.alphaChannel ? "l" : this.scale}></calcite-color-picker-swatch><div class=${c(n.sliders)}><div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.hueSlider]: !0 })} @pointerdown=${this.handleHueSliderPointerDown} ${v(this.initHueSlider)}></canvas><div .ariaLabel=${r.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue() || g.round().hue()} class=${c({ [n.scope]: !0, [n.hueScope]: !0 })} @keydown=${this.handleHueScopeKeyDown} role=slider style=${x({
       top: `${ie}px`,
       left: `${te}px`
-    })} tabindex=0 ${v(this.storeHueScope)}></div></div>${h ? u`<div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.opacitySlider]: !0 })} @pointerdown=${this.handleOpacitySliderPointerDown} ${v(this.initOpacitySlider)}></canvas><div .ariaLabel=${r.opacity} .ariaValueMax=${y.max} .ariaValueMin=${y.min} .ariaValueNow=${(t || g).round().alpha()} class=${c({ [n.scope]: !0, [n.opacityScope]: !0 })} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${k({
+    })} tabindex=0 ${v(this.storeHueScope)}></div></div>${h ? u`<div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.opacitySlider]: !0 })} @pointerdown=${this.handleOpacitySliderPointerDown} ${v(this.initOpacitySlider)}></canvas><div .ariaLabel=${r.opacity} .ariaValueMax=${y.max} .ariaValueMin=${y.min} .ariaValueNow=${(t || g).round().alpha()} class=${c({ [n.scope]: !0, [n.opacityScope]: !0 })} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${x({
       top: `${ae}px`,
       left: `${oe}px`
     })} tabindex=0 ${v(this.storeOpacityScope)}></div></div>` : null}</div></div>${s && e ? null : u`<div class=${c({
@@ -525,17 +526,17 @@ class Ae extends pe {
   }
   renderChannelsTabTitle(e) {
     const { channelMode: t, messages: i } = this, o = e === t, a = e === "rgb" ? i.rgb : i.hsv;
-    return I(e, u`<calcite-tab-title class=${c(n.colorMode)} data-color-mode=${e ?? D} @calciteTabsActivate=${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`);
+    return I(e, u`<calcite-tab-title class=${c(n.colorMode)} data-color-mode=${e ?? $} @calciteTabsActivate=${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`);
   }
   renderChannelsTab(e) {
-    const { isClearable: t, channelMode: i, channels: o, messages: a, alphaChannel: s } = this, l = e === i, h = e === "rgb" ? [a.red, a.green, a.blue] : [a.hue, a.saturation, a.value], d = Ce(this.el), C = s ? o : o.slice(0, 3);
+    const { isClearable: t, channelMode: i, channels: o, messages: a, alphaChannel: s } = this, l = e === i, h = e === "rgb" ? [a.red, a.green, a.blue] : [a.hue, a.saturation, a.value], d = ce(this.el), C = s ? o : o.slice(0, 3);
     return I(e, u`<calcite-tab class=${c(n.control)} .selected=${l}><div class=${c(n.channels)} dir=ltr>${C.map((f, m) => {
       const w = m === 3;
       return w && (f = t && !f ? f : R(f)), this.renderChannel(f, m, h[m], d, w ? "%" : "");
     })}</div></calcite-tab>`);
   }
   renderChannel(e, t, i, o, a) {
-    return I(t, u`<calcite-input-number class=${c(n.channel)} data-channel-index=${t ?? D} dir=${o ?? D} .label=${i} lang=${this.messages._lang ?? D} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale === "l" ? "m" : "s"} style=${k({
+    return I(t, u`<calcite-input-number class=${c(n.channel)} data-channel-index=${t ?? $} dir=${o ?? $} .label=${i} lang=${this.messages._lang ?? $} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale === "l" ? "m" : "s"} style=${x({
       marginLeft: t > 0 && !(this.scale === "s" && this.alphaChannel && t === 3) ? "-1px" : ""
     })} .suffixText=${a} .value=${e?.toString()}></calcite-input-number>`);
   }

package/dist/components/calcite-color-picker/interfaces.d.ts

@@ -1,7 +1,7 @@
-import { default as Color } from 'color';
+import { ColorInstance } from 'color';
 export type ColorMode = "rgb" | "hsv";
 export type Channels = [number, number, number, number];
-export type InternalColor = Color;
+export type InternalColor = ColorInstance;
 export type ColorValue = string | RGB | RGBA | HSV | HSVA | HSL | HSLA;
 export interface RGB {
     r: number;

package/dist/components/calcite-color-picker/resources.d.ts

@@ -1,4 +1,3 @@
-import { default as Color } from 'color';
 export declare const CSS: {
     channel: string;
     channels: string;
@@ -31,7 +30,7 @@ export declare const CSS: {
     sliders: string;
     splitSection: string;
 };
-export declare const DEFAULT_COLOR: Color<"#007AC2">;
+export declare const DEFAULT_COLOR: import('color').ColorInstance;
 export declare const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
 export declare const RGB_LIMITS: {
     r: number;

package/dist/components/calcite-color-picker/utils.d.ts

@@ -1,4 +1,4 @@
-import { default as Color } from 'color';
+import { ColorInstance as Color } from 'color';
 import { Dimensions, Scale } from '../interfaces';
 import { ColorValue, HSLA, HSVA, RGB, RGBA } from './interfaces';
 import { STATIC_DIMENSIONS } from './resources';

package/dist/components/calcite-color-picker-hex-input/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="../../index.d.ts" />
-import { default as Color } from 'color';
+import { ColorInstance } from 'color';
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Scale } from '../interfaces';