@esri/solutions-components 0.10.4 → 0.10.6

package/dist/esm/calcite-chip_2.entry.js

@@ -4,24 +4,24 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f04fa1.js';
-import { s as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted } from './dom-adaa346d.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-c3166a45.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-22159fb9.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-8a1c50b8.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-f6556a2c.js';
-import { i as isActivationKey } from './key-bc256b99.js';
-import { g as getIconScale } from './component-ea2e5ffe.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0618f140.js';
-import { g as guid } from './guid-58589598.js';
-import { g as getAncestors, i as isSingleLike, a as getDepth } from './utils-9290add7.js';
-import './resources-60c8dbbc.js';
-import './browser-f1924ed5.js';
-import './observers-2621ada9.js';
+import { s as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted } from './dom-982585e7.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-869378d9.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-5371b7ab.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-1d03c7ff.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-53748f98.js';
+import { i as isActivationKey } from './key-7f394a98.js';
+import { g as getIconScale } from './component-e3f05da5.js';
+import { i as isBrowser } from './browser-8c71dd57.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-33053690.js';
+import { g as guid } from './guid-5c959cfd.js';
+import { g as getAncestors, i as isSingleLike, a as getDepth } from './utils-ac0f19ea.js';
+import './resources-3bc82696.js';
+import './observers-0f4a5f9e.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.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$1 = {
     title: "title",
@@ -33,23 +33,25 @@ const CSS$1 = {
     imageSlotted: "image--slotted",
     closable: "closable",
     multiple: "multiple",
+    single: "single",
     selectable: "selectable",
     selectIcon: "select-icon",
     selectIconActive: "select-icon--active",
     nonInteractive: "non-interactive",
     isCircle: "is-circle",
+    selected: "selected",
 };
-const SLOTS = {
+const SLOTS$1 = {
     image: "image",
 };
 const ICONS = {
     close: "x",
-    unchecked: "circle",
     checkedSingle: "circle-f",
-    checked: "check-circle-f",
+    uncheckedMultiple: "square",
+    checkedMultiple: "check-square-f",
 };
 
-const chipCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-s-internal:0.25rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=s]) .close,:host([scale=s]) .select-icon--active{block-size:1rem;inline-size:1rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=s]) .container.is-circle{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-s-internal:0.375rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=m]) .close,:host([scale=m]) .image-container,:host([scale=m]) .select-icon--active{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]) .container.is-circle{block-size:2rem;inline-size:2rem}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-s-internal:0.5rem;--calcite-chip-spacing-l-internal:0.75rem}:host([scale=l]) .image-container,:host([scale=l]) .close,:host([scale=l]) .select-icon--active{block-size:2rem;inline-size:2rem}:host([scale=l]) .container.is-circle{block-size:2.75rem;inline-size:2.75rem}:host{display:inline-flex;cursor:default;border-radius:9999px}.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);font-weight:var(--calcite-font-weight-medium);outline-color:transparent}.container:not(.is-circle){padding-inline:var(--calcite-chip-spacing-s-internal)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .container.image--slotted{padding-inline-start:calc(0.125rem / 2)}:host([scale=s]) .container.is-circle{padding-inline:0}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.container.closable{padding-inline-end:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted{padding-inline-start:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).image--slotted .image-container~.chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).selectable:not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.selectable):not(.text--slotted) .chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text-slotted).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container{margin-inline-end:0}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container~.chip-icon{margin-inline-start:calc(var(--calcite-chip-spacing-s-internal) * 2)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline:var(--calcite-chip-spacing-s-internal)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none}.close{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-1);outline-color:transparent;transition: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 var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-color-transparent-hover);--calcite-chip-transparent-press:var(--calcite-color-transparent-press)}.close:hover{background-color:var(--calcite-chip-transparent-hover)}.close:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:active{background-color:var(--calcite-chip-transparent-press)}.close calcite-icon{color:inherit}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:relative;visibility:hidden;inline-size:0;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out}.select-icon.select-icon--active{visibility:visible;opacity:0.5}.container:not(.is-circle).image--slotted .select-icon.select-icon--active{margin-inline-end:var(--calcite-chip-spacing-s-internal)}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([kind=neutral]){background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host([kind=neutral]) .container{border-color:transparent}:host([kind=neutral]) .close{color:var(--calcite-color-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([kind=inverse]){background-color:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .container{border-color:transparent}:host([kind=inverse]) .close{color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([kind=brand]){background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) .container{border-color:transparent}:host([kind=brand]) .close{color:var(--calcite-color-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}:host([appearance=outline-fill]) .close,:host([appearance=outline]) .close{color:var(--calcite-color-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-color-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]) .container,:host([kind=neutral][appearance=outline]) .container{border-color:var(--calcite-color-border-1)}:host([kind=inverse][appearance=outline-fill]) .container,:host([kind=inverse][appearance=outline]) .container{border-color:var(--calcite-color-border-inverse)}:host([kind=brand][appearance=outline-fill]) .container,:host([kind=brand][appearance=outline]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-color-text-inverse)}:host([closed]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const chipCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.container,.select-icon,.title{padding-inline-start:var(--calcite-internal-chip-padding-start);padding-inline-end:var(--calcite-internal-chip-padding-end)}.select-icon:not(.select-icon--active){padding-inline:0}:host([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-s-internal:0.25rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=s]) .close,:host([scale=s]) .select-icon--active{block-size:1rem;inline-size:1rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=s]) .container.is-circle,:host([scale=s]) .container.is-circle.image--slotted{block-size:1.5rem;inline-size:1.5rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-px)}:host([scale=s]) .multiple .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .multiple.image--slotted .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=s]) .multiple.image--slotted.text--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container.image--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container:not(.is-circle):not(.multiple):not(.image-slotted) .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-xs)}:host([scale=s]) .container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active{padding-inline-start:var(--calcite-spacing-base);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][closable]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-s-internal:0.375rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=m]) .close,:host([scale=m]) .image-container,:host([scale=m]) .select-icon--active{block-size:1.5rem;inline-size:1.5rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=m]) .container.is-circle,:host([scale=m]) .container.is-circle.image--slotted{block-size:2rem;inline-size:2rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-px)}:host([scale=m]) .multiple .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-base);--calcite-internal-chip-padding-end:var(--calcite-spacing-base)}:host([scale=m]) .multiple.image--slotted .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=m]) .multiple.image--slotted.text--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=m]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=m]) .container.image--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=m]) .container:not(.is-circle):not(.multiple):not(.image-slotted) .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-px)}:host([scale=m]) .container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][closable]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-s-internal:0.5rem;--calcite-chip-spacing-l-internal:0.75rem}:host([scale=l]) .image-container,:host([scale=l]) .close,:host([scale=l]) .select-icon--active{block-size:2rem;inline-size:2rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=l]) .container.is-circle,:host([scale=l]) .container.is-circle.image--slotted{block-size:2.75rem;inline-size:2.75rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=l]) .multiple .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=l]) .multiple.image--slotted .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-md)}:host([scale=l]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-sm);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=l]) .container.image--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=l]) .container:not(.is-circle):not(.multiple):not(.image-slotted) .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=l]) .container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][closable]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-sm);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host{display:inline-flex;cursor:default;border-radius:9999px}.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);font-weight:var(--calcite-font-weight-medium);outline-color:transparent}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .container.selectable.single.image--slotted{--calcite-internal-chip-padding-end:calc(0.125rem / 2)}:host([scale=s]) .container:not(.selected):not(.multiple).image--slotted{--calcite-internal-chip-padding-start:calc(0.125rem / 2)}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--calcite-internal-chip-padding-start:var(--calcite-chip-spacing-s-internal);--calcite-internal-chip-padding-end:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.container:not(.is-circle).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).image--slotted .image-container~.chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).selectable:not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.selectable):not(.text--slotted) .chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text-slotted).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container{margin-inline-end:0}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container~.chip-icon{margin-inline-start:calc(var(--calcite-chip-spacing-s-internal) * 2)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline:var(--calcite-chip-spacing-s-internal)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none}.close{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-1);outline-color:transparent;transition: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 var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-color-transparent-hover);--calcite-chip-transparent-press:var(--calcite-color-transparent-press);--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}.close:hover{background-color:var(--calcite-chip-transparent-hover)}.close:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:active{background-color:var(--calcite-chip-transparent-press)}.close calcite-icon{color:inherit}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:relative;visibility:hidden;inline-size:0;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out}.select-icon.select-icon--active{visibility:visible;opacity:0.5}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}.multiple .select-icon{display:flex;align-items:center;justify-content:center}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([kind=neutral]){background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host([kind=neutral]) .container{border-color:transparent}:host([kind=neutral]) .close{color:var(--calcite-color-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([kind=inverse]){background-color:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .container{border-color:transparent}:host([kind=inverse]) .close{color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([kind=brand]){background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) .container{border-color:transparent}:host([kind=brand]) .close{color:var(--calcite-color-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}:host([appearance=outline-fill]) .close,:host([appearance=outline]) .close{color:var(--calcite-color-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-color-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]) .container,:host([kind=neutral][appearance=outline]) .container{border-color:var(--calcite-color-border-1)}:host([kind=inverse][appearance=outline-fill]) .container,:host([kind=inverse][appearance=outline]) .container{border-color:var(--calcite-color-border-inverse)}:host([kind=brand][appearance=outline-fill]) .container,:host([kind=brand][appearance=outline]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-color-text-inverse)}:host([closed]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteChipStyle0 = chipCss;
 
 const Chip = class {
@@ -146,7 +148,7 @@ const Chip = class {
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
-        {
+        if (isBrowser()) {
             await setUpMessages(this);
             this.updateHasText();
         }
@@ -215,16 +217,16 @@ const Chip = class {
     //
     //--------------------------------------------------------------------------
     renderChipImage() {
-        return (h("div", { class: CSS$1.imageContainer }, h("slot", { name: SLOTS.image, onSlotchange: this.handleSlotImageChange })));
+        return (h("div", { class: CSS$1.imageContainer }, h("slot", { name: SLOTS$1.image, onSlotchange: this.handleSlotImageChange })));
     }
     renderSelectionIcon() {
-        const icon = this.selectionMode === "multiple" && this.selected
-            ? ICONS.checked
-            : this.selectionMode === "multiple"
-                ? ICONS.unchecked
-                : this.selected
-                    ? ICONS.checkedSingle
-                    : undefined;
+        const icon = this.selectionMode === "multiple"
+            ? this.selected
+                ? ICONS.checkedMultiple
+                : ICONS.uncheckedMultiple
+            : this.selected
+                ? ICONS.checkedSingle
+                : undefined;
         return (h("div", { class: {
                 [CSS$1.selectIcon]: true,
                 [CSS$1.selectIconActive]: this.selectionMode === "multiple" || this.selected,
@@ -246,7 +248,7 @@ const Chip = class {
                 : this.interactive
                     ? "button"
                     : undefined;
-        return (h(Host, { key: 'cb78643416dd22830dfe6e7d6c42a4e07baf62fa' }, h(InteractiveContainer, { key: '7e96047819c7f823aaeabef5c74ca8ff1602c15b', disabled: disabled }, h("div", { key: '34e57dc8c3cfdf2f225d83d7cc9a7adfedd788ae', "aria-checked": this.selectionMode !== "none" && this.interactive
+        return (h(Host, { key: '6d76da5a2ae7a51ceffa4d1ca67d2f610b900a1c' }, h(InteractiveContainer, { key: 'fd0190d60cffb6d0f564a91f55b0e4f69663fb5b', disabled: disabled }, h("div", { key: '825b342318201ee13735f9b6e830f26b0fb4e137', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? toAriaBoolean(this.selected)
                 : undefined, "aria-disabled": disableInteraction ? toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
                 [CSS$1.container]: true,
@@ -254,6 +256,8 @@ const Chip = class {
                 [CSS$1.imageSlotted]: this.hasImage,
                 [CSS$1.selectable]: this.selectionMode !== "none",
                 [CSS$1.multiple]: this.selectionMode === "multiple",
+                [CSS$1.single]: this.selectionMode === "single" || this.selectionMode === "single-persist",
+                [CSS$1.selected]: this.selected,
                 [CSS$1.closable]: this.closable,
                 [CSS$1.nonInteractive]: !this.interactive,
                 [CSS$1.isCircle]: !this.closable &&
@@ -261,7 +265,7 @@ const Chip = class {
                     (!this.icon || !this.hasImage) &&
                     (this.selectionMode === "none" ||
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), h("span", { key: '0e748e3745a3338e2f317728894702b9fb0d370d', class: CSS$1.title }, h("slot", { key: 'd21ba7e9353d591b955517f1a254d22d3599e37b', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
+            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), h("span", { key: '0b3d668d66e359ecc3690ad87033e7e49a9250ef', class: CSS$1.title }, h("slot", { key: 'ff1af06039b94df6108f5e371e23ad9debfd388e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -276,24 +280,31 @@ Chip.style = CalciteChipStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
-    icon: "icon",
-    iconActive: "icon--active",
-    iconIndent: "icon--indent",
+    active: "label--active",
+    centerContent: "center-content",
+    container: "container",
     custom: "icon--custom",
+    description: "description",
     dot: "icon--dot",
-    single: "label--single",
+    filterMatch: "filter-match",
+    icon: "icon",
+    iconActive: "icon--active",
     label: "label",
-    active: "label--active",
+    scale: (scale) => `scale--${scale}`,
     selected: "label--selected",
-    title: "title",
+    shortText: "short-text",
+    single: "label--single",
     textContainer: "text-container",
-    filterMatch: "filter-match",
+    title: "title",
+};
+const SLOTS = {
+    contentEnd: "content-end",
 };
 
-const comboboxItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot::before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}.filter-match{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-current)}";
+const comboboxItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.375rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-combobox-item-spacing-unit-l);padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value)}:host([disabled]) .label{cursor:default}.label--selected{color:var(--calcite-color-text-1)}.label--selected .title{font-weight:var(--calcite-font-weight-medium)}.label--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--custom{margin-block-start:-1px;color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot::before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}.filter-match{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-current)}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}:host([selected]) .description,:host(:hover) .description{color:var(--calcite-color-text-2)}.short-text{color:var(--calcite-color-text-3);white-space:nowrap}.title{color:var(--calcite-color-text-1)}.title,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}";
 const CalciteComboboxItemStyle0 = comboboxItemCss;
 
 const ComboboxItem = class {
@@ -303,19 +314,22 @@ const ComboboxItem = class {
         this.itemClickHandler = () => {
             this.toggleSelected();
         };
-        this.disabled = false;
-        this.selected = false;
         this.active = false;
         this.ancestors = undefined;
+        this.description = undefined;
+        this.disabled = false;
+        this.filterDisabled = undefined;
+        this.filterTextMatchPattern = undefined;
         this.guid = guid();
         this.icon = undefined;
         this.iconFlipRtl = false;
+        this.metadata = undefined;
+        this.scale = "m";
+        this.selected = false;
+        this.selectionMode = "multiple";
+        this.shortHeading = undefined;
         this.textLabel = undefined;
-        this.filterTextMatchPattern = undefined;
         this.value = undefined;
-        this.filterDisabled = undefined;
-        this.selectionMode = "multiple";
-        this.scale = "m";
     }
     selectedWatchHandler() {
         this.calciteComboboxItemChange.emit();
@@ -358,18 +372,15 @@ const ComboboxItem = class {
         return this.icon ? (h("calcite-icon", { class: {
                 [CSS.custom]: !!this.icon,
                 [CSS.iconActive]: this.icon && this.selected,
-                [CSS.iconIndent]: true,
             }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: getIconScale(this.scale) })) : null;
     }
     renderSelectIndicator(showDot, iconPath) {
         return showDot ? (h("span", { class: {
                 [CSS.icon]: true,
                 [CSS.dot]: true,
-                [CSS.iconIndent]: true,
             } })) : (h("calcite-icon", { class: {
                 [CSS.icon]: true,
                 [CSS.iconActive]: this.selected,
-                [CSS.iconIndent]: true,
             }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: getIconScale(this.scale) }));
     }
     renderChildren() {
@@ -382,22 +393,26 @@ const ComboboxItem = class {
         const { disabled } = this;
         const isSingleSelect = isSingleLike(this.selectionMode);
         const showDot = isSingleSelect && !disabled;
-        const defaultIcon = isSingleSelect ? "dot" : "check";
-        const iconPath = disabled ? "" : defaultIcon;
+        const defaultIcon = isSingleSelect ? undefined : "check";
+        const iconPath = disabled ? undefined : defaultIcon;
         const classes = {
             [CSS.label]: true,
             [CSS.selected]: this.selected,
             [CSS.active]: this.active,
             [CSS.single]: isSingleSelect,
         };
-        const depth = getDepth(this.el);
-        return (h(Host, { key: '24539cb8c385eba17113acbc986c5313782abc6c', "aria-hidden": "true" }, h(InteractiveContainer, { key: '115e856cd8a456a8d70431f87f81cae4b5ed3197', disabled: disabled }, h("div", { key: 'c440f95366563eddee178c1d0e89bea535699dd4', class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { key: '5cce5bf58b17ff1ab86d7eb009ff3084bbf487ba', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("span", { key: '6b0055d09916fe03b37d90e2d1ac5b59a47ad3bc', class: "title" }, this.renderTextContent())), this.renderChildren()))));
+        const depth = getDepth(this.el) + 1;
+        return (h(Host, { key: '7d54536c9f70be5d8824bf53156879074c632d7d', "aria-hidden": "true" }, h(InteractiveContainer, { key: '67eeab82142a11bcd97bf9d21e768ac1309eb78c', disabled: disabled }, h("div", { key: 'c0cf97d6111ca6e09f26750060c669d091265b08', class: {
+                [CSS.container]: true,
+                [CSS.scale(this.scale)]: true,
+            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { key: '36699561d3c82ff081e5f3b281e97711b2527596', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("div", { key: 'c07e0ddb3c248c610eedd80fee70dba0116c88cf', class: CSS.centerContent }, h("div", { key: '6a7050585ca580a5f0648753ddba28e3c71a8ea7', class: CSS.title }, this.renderTextContent(this.textLabel)), this.description ? (h("div", { class: CSS.description }, this.renderTextContent(this.description))) : null), this.shortHeading ? (h("div", { class: CSS.shortText }, this.renderTextContent(this.shortHeading))) : null, h("slot", { key: '73bb84b567866bd1c6a74ba84d1459d1a8c47add', name: SLOTS.contentEnd })), this.renderChildren()))));
     }
-    renderTextContent() {
-        if (!this.filterTextMatchPattern) {
-            return this.textLabel;
+    renderTextContent(text) {
+        const pattern = this.filterTextMatchPattern;
+        if (!pattern || !text) {
+            return text;
         }
-        const parts = this.textLabel.split(this.filterTextMatchPattern);
+        const parts = text.split(pattern);
         if (parts.length > 1) {
             // we only highlight the first match
             parts[1] = h("mark", { class: CSS.filterMatch }, parts[1]);

package/dist/esm/calcite-color-picker-hex-input_2.entry.js

@@ -4,16 +4,17 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement, F as Fragment } from './index-e3f04fa1.js';
-import { a as Color, q as isLonghandHex, r as isValidHex, s as rgbToHex, n as normalizeHex, o as opacityToAlpha, h as hexify, u as hexChar, O as OPACITY_LIMITS, c as alphaToOpacity } from './utils-63c1b697.js';
-import { e as focusElement, y as getModeName } from './dom-adaa346d.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3166a45.js';
-import './guid-58589598.js';
-import './resources-60c8dbbc.js';
+import { a as Color, q as isLonghandHex, r as isShorthandHex, s as isValidHex, u as rgbToHex, n as normalizeHex, o as opacityToAlpha, h as hexify, v as hexChar, O as OPACITY_LIMITS, c as alphaToOpacity } from './utils-67264f4a.js';
+import { e as focusElement, y as getModeName } from './dom-982585e7.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-869378d9.js';
+import './guid-5c959cfd.js';
+import './resources-3bc82696.js';
+import './browser-8c71dd57.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.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$1 = {
     container: "container",
@@ -36,8 +37,10 @@ const ColorPickerHexInput = class {
             const { allowEmpty, internalColor } = this;
             const willClearValue = allowEmpty && !inputValue;
             const isLonghand = isLonghandHex(hex);
-            // ensure modified pasted hex values are committed since we prevent default to remove the # char.
-            this.onHexInputChange();
+            if (isShorthandHex(hex, this.alphaChannel)) {
+                // ensure modified pasted hex values are committed since we prevent default to remove the # char.
+                this.onHexInputChange();
+            }
             if (willClearValue || (isValidHex(hex) && isLonghand)) {
                 return;
             }
@@ -61,6 +64,9 @@ const ColorPickerHexInput = class {
             node.value =
                 allowEmpty && !internalColor ? "" : this.formatOpacityForInternalInput(internalColor);
         };
+        this.onOpacityInputInput = () => {
+            this.onOpacityInputChange();
+        };
         this.onHexInputChange = () => {
             const nodeValue = this.hexInputNode.value;
             let value = nodeValue;
@@ -86,7 +92,12 @@ const ColorPickerHexInput = class {
             }
             this.internalSetValue(value, this.value);
         };
-        this.onHexInput = () => {
+        this.onInputFocus = (event) => {
+            event.type === "calciteInternalInputTextFocus"
+                ? this.hexInputNode.selectText()
+                : this.opacityInputNode.selectText();
+        };
+        this.onHexInputInput = () => {
             const hexInputValue = `#${this.hexInputNode.value}`;
             const oldValue = this.value;
             if (isValidHex(hexInputValue, this.alphaChannel) &&
@@ -99,7 +110,7 @@ const ColorPickerHexInput = class {
             const { alphaChannel, hexInputNode, internalColor, value } = this;
             const { key } = event;
             const composedPath = event.composedPath();
-            if (key === "Tab" || key === "Enter") {
+            if ((key === "Tab" && isShorthandHex(value, this.alphaChannel)) || key === "Enter") {
                 if (composedPath.includes(hexInputNode)) {
                     this.onHexInputChange();
                 }
@@ -193,7 +204,7 @@ const ColorPickerHexInput = class {
         const hexInputValue = this.formatHexForInternalInput(value);
         const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
         const inputScale = scale === "l" ? "m" : "s";
-        return (h("div", { key: '9939540e0bf570287d03276311c4d077e2ce1ae4', class: CSS$1.container }, h("calcite-input-text", { key: 'd2b6ab840fbd55bf16c6c5efe46d51e65b909cde', class: CSS$1.hexInput, label: messages?.hex || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (h("calcite-input-number", { class: CSS$1.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
+        return (h("div", { key: '7f3098ef31cae459bb4816fbea34cc74c174ec87', class: CSS$1.container }, h("calcite-input-text", { key: '66b3c778e3340ac4f9b91c4198b964c26c6a7347', class: CSS$1.hexInput, label: messages?.hex || hexLabel, maxLength: this.alphaChannel ? 8 : 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInputInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onCalciteInternalInputTextFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (h("calcite-input-number", { class: CSS$1.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberInput: this.onOpacityInputInput, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onCalciteInternalInputNumberFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
     }
     //--------------------------------------------------------------------------
     //
@@ -272,7 +283,7 @@ ColorPickerHexInput.style = CalciteColorPickerHexInputStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     swatch: "swatch",

package/dist/esm/calcite-color-picker.entry.js

@@ -4,19 +4,19 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e3f04fa1.js';
-import { C as CSSColorMode, n as normalizeHex, h as hexify, a as Color, o as opacityToAlpha, b as CSS, c as alphaToOpacity, D as DEFAULT_COLOR, d as DIMENSIONS, e as alphaCompatible, g as getSliderWidth, p as parseMode, f as normalizeColor, i as colorEqual, H as HSV_LIMITS, O as OPACITY_LIMITS, t as toNonAlphaMode, j as normalizeAlpha, k as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, l as DEFAULT_STORAGE_KEY_PREFIX, m as toAlphaMode, R as RGB_LIMITS } from './utils-63c1b697.js';
-import { i as isPrimaryPointerButton, a as getElementDir } from './dom-adaa346d.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-8a1c50b8.js';
-import { i as isActivationKey } from './key-bc256b99.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3166a45.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-f6556a2c.js';
-import { r as remap, c as clamp, a as closeToRangeEdge } from './math-fd9c999c.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-22159fb9.js';
+import { C as CSSColorMode, n as normalizeHex, h as hexify, a as Color, o as opacityToAlpha, b as CSS, c as alphaToOpacity, D as DEFAULT_COLOR, d as DIMENSIONS, e as alphaCompatible, g as getSliderWidth, p as parseMode, f as normalizeColor, i as colorEqual, R as RGB_LIMITS, H as HSV_LIMITS, O as OPACITY_LIMITS, t as toNonAlphaMode, j as normalizeAlpha, k as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, l as DEFAULT_STORAGE_KEY_PREFIX, m as toAlphaMode } from './utils-67264f4a.js';
+import { i as isPrimaryPointerButton, a as getElementDir, f as focusFirstTabbable } from './dom-982585e7.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-1d03c7ff.js';
+import { i as isActivationKey } from './key-7f394a98.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-869378d9.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-53748f98.js';
+import { r as remap, c as clamp, a as closeToRangeEdge } from './math-dbb62ccf.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-5371b7ab.js';
 import { t as throttle } from './throttle-aed86bf3.js';
-import './guid-58589598.js';
-import './resources-60c8dbbc.js';
-import './browser-f1924ed5.js';
-import './observers-2621ada9.js';
+import './guid-5c959cfd.js';
+import './resources-3bc82696.js';
+import './browser-8c71dd57.js';
+import './observers-0f4a5f9e.js';
 import './debounce-6e9ade8c.js';
 
 const colorPickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}: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{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{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:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action: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-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:6px}.hex-and-channels-group{inline-size:100%}.hex-and-channels-group,.control-section{display:flex;flex-direction:row;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;row-gap:0.125rem}.channel[data-channel-index=\"3\"]{inline-size:159px}:host([scale=s]) .channels{flex-wrap:wrap}:host([scale=s]) .channel{flex-basis:30%;flex-grow:1}:host([scale=s]) .channel[data-channel-index=\"3\"]{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .channel[data-channel-index=\"3\"]{inline-size:131px}.saved-colors{display:grid;gap:0.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}";
@@ -29,8 +29,10 @@ const ColorPicker = class {
         this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 6);
         this.calciteColorPickerInput = createEvent(this, "calciteColorPickerInput", 6);
         this.internalColorUpdateContext = null;
+        this.isActiveChannelInputEmpty = false;
         this.mode = CSSColorMode.HEX;
         this.shiftKeyChannelAdjustment = 0;
+        this.upOrDownArrowKeyTracker = null;
         this.handleTabActivate = (event) => {
             this.channelMode = event.currentTarget.getAttribute("data-color-mode");
             this.updateChannelsFromColor(this.color);
@@ -94,8 +96,11 @@ const ColorPicker = class {
                     ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
                     : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
             let inputValue;
-            if (this.isClearable && !input.value) {
+            if (!input.value) {
                 inputValue = "";
+                this.isActiveChannelInputEmpty = true;
+                // reset this to allow typing in new value, when channel input is cleared after ArrowUp or ArrowDown have been pressed
+                this.upOrDownArrowKeyTracker = null;
             }
             else {
                 const value = Number(input.value);
@@ -108,6 +113,22 @@ const ColorPicker = class {
                 // we treat nudging as a change event since the input won't emit when modifying the value directly
                 this.handleChannelChange(event);
             }
+            else if (inputValue !== "") {
+                this.handleChannelChange(event);
+            }
+        };
+        this.handleChannelBlur = (event) => {
+            const input = event.currentTarget;
+            const channelIndex = Number(input.getAttribute("data-channel-index"));
+            const channels = [...this.channels];
+            const restoreValueDueToEmptyInput = !input.value && !this.isClearable;
+            if (restoreValueDueToEmptyInput) {
+                input.value = channels[channelIndex]?.toString();
+            }
+        };
+        this.handleChannelFocus = (event) => {
+            const input = event.currentTarget;
+            input.selectText();
         };
         this.handleChannelChange = (event) => {
             const input = event.currentTarget;
@@ -120,7 +141,17 @@ const ColorPicker = class {
                 return;
             }
             const isAlphaChannel = channelIndex === 3;
-            const value = Number(input.value);
+            if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {
+                input.value =
+                    this.upOrDownArrowKeyTracker === "up"
+                        ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex)
+                            ? channels[channelIndex] + 1
+                            : this.getChannelInputLimit(channelIndex)).toString()
+                        : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();
+                this.isActiveChannelInputEmpty = false;
+                this.upOrDownArrowKeyTracker = null;
+            }
+            const value = input.value ? Number(input.value) : channels[channelIndex];
             channels[channelIndex] = isAlphaChannel ? opacityToAlpha(value) : value;
             this.updateColorFromChannels(channels);
         };
@@ -142,7 +173,7 @@ const ColorPicker = class {
                 bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureColorFieldColor(offsetX, offsetY);
-            this.colorFieldScopeNode.focus();
+            this.focusScope(this.colorFieldScopeNode);
         };
         this.handleHueSliderPointerDown = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -156,7 +187,7 @@ const ColorPicker = class {
                 bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureHueSliderColor(offsetX);
-            this.hueScopeNode.focus();
+            this.focusScope(this.hueScopeNode);
         };
         this.handleOpacitySliderPointerDown = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -170,7 +201,7 @@ const ColorPicker = class {
                 bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureOpacitySliderValue(offsetX);
-            this.opacityScopeNode.focus();
+            this.focusScope(this.opacityScopeNode);
         };
         this.globalPointerUpHandler = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -259,7 +290,7 @@ const ColorPicker = class {
             }))));
         };
         this.renderChannel = (value, index, ariaLabel, direction, suffix) => {
-            return (h("calcite-input-number", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
+            return (h("calcite-input-number", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onCalciteInternalInputNumberBlur: this.handleChannelBlur, onCalciteInternalInputNumberFocus: this.handleChannelFocus, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
                 // workaround to ensure input borders overlap as desired
                 // this is because the build transforms margin-left to its
                 // logical-prop, which is undesired as channels are always ltr
@@ -475,6 +506,22 @@ const ColorPicker = class {
                 : key === "ArrowDown" && shiftKey
                     ? -complementaryBump
                     : 0;
+        if (key === "ArrowUp") {
+            this.upOrDownArrowKeyTracker = "up";
+        }
+        if (key === "ArrowDown") {
+            this.upOrDownArrowKeyTracker = "down";
+        }
+    }
+    getChannelInputLimit(channelIndex) {
+        return this.channelMode === "rgb"
+            ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
+            : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    }
+    focusScope(focusEl) {
+        requestAnimationFrame(() => {
+            focusEl.focus();
+        });
     }
     //--------------------------------------------------------------------------
     //
@@ -484,7 +531,7 @@ const ColorPicker = class {
     /** Sets focus on the component's first focusable element. */
     async setFocus() {
         await componentFocusable(this);
-        this.el.focus();
+        focusFirstTabbable(this.el);
     }
     //--------------------------------------------------------------------------
     //
@@ -552,10 +599,10 @@ const ColorPicker = class {
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (h(InteractiveContainer, { key: 'ed8d6d887db9dc3d3e345b52b290094bde5541a8', disabled: this.disabled }, h("div", { key: '06f7fc8c31b3165de13f20219d7c138f162e059d', class: CSS.container }, h("div", { key: '79d751d245545fe729cb62660436ac67589a4be8', class: CSS.controlAndScope }, h("canvas", { key: '6fa2716d392b2f41f7c96e21d6e30c7738df4191', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: 'c51f4c15946f87bb71674c3aadd024cbd7514d55', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (h(InteractiveContainer, { key: '3fdda1fd2366d3ffb3405dfa28a8424d78586a61', disabled: this.disabled }, h("div", { key: 'b3e95f63a7b4a9f49587fa458bf663cf82ff6961', class: CSS.container }, h("div", { key: '5770ab5094e87956f0f8a49e16f1a9418cc6e7ff', class: CSS.controlAndScope }, h("canvas", { key: '3773e30ddb17777a93b6091e4accc71e890f8cbb', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: '66dfba03f7a7e35f50c1fc0f23ccb0c0cf91c247', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), h("div", { key: '6f93b38c9b16234cd5bd68edbc6c44ed4351fab4', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: 'dd12a18e453040e5af19c1e37ccbec3573cfd06b', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: 'cf3b9c928b0d43f912726d13b584afd90f028aa5', class: CSS.sliders }, h("div", { key: '77906dfdb66f64405ae2a62c942064d66eccf22d', class: CSS.controlAndScope }, h("canvas", { key: '1b8ed2fd600e16ddd34c3e3d97ee7c3c3fc21125', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '73cb98a5adfd188433c434c0f832ac660f00966f', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), h("div", { key: '61100b2e5e07a647b75641afe11e7dcfb6df3dd1', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: '3fd47b8fb737f322646f136a22ec5281c12dcdcb', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: 'df7ed65ad05057a4a8c81239f1dc2f3341ea18fb', class: CSS.sliders }, h("div", { key: '5bc288a2e4da751f6e4a1b3a1b0b1294c6421306', class: CSS.controlAndScope }, h("canvas", { key: 'b350822aefb25ca6521d21a376c59885666798c5', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '5ba9570cb05da8620030918757acd21b57c844eb', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR).round().alpha(), class: { [CSS.scope]: true, [CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
@@ -898,7 +945,6 @@ const ColorPicker = class {
     getAdjustedScopePosition(left, top) {
         return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
     }
-    static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {