igniteui-webcomponents 7.4.0 → 7.4.1

package/CHANGELOG.md

@@ -4,6 +4,43 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [7.4.1] - 2026-09-25
+### Added
+- #### AI-Assisted Development
+  - New `igniteui-wc-grids` skill. It helps an agent pick the grid package, register the grid, apply one theme, inject the theme into a Shadow DOM, set the layout and set up sorting and filtering. [#2376](https://github.com/IgniteUI/igniteui-webcomponents/pull/2376)
+- #### Virtual scroll
+  - `keyFunction` property. It returns the key of an item, so an item keeps its element while it is in the rendered window, also when it moves in `data`. Without it, the index is the key. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+
+### Changed
+- #### AI-Assisted Development
+  - All skills now declare the MIT license, and their descriptions state when to use them and when to use a different skill. [#2400](https://github.com/IgniteUI/igniteui-webcomponents/pull/2400)
+  - The `igniteui-wc-figma-to-app` skill now supports Figma files from any UI kit, not only the Indigo.Design UI Kits. Its guidance now agrees with the current Figma, theming and component APIs, and its steps are in separate reference files, so an agent loads less text. [#2400](https://github.com/IgniteUI/igniteui-webcomponents/pull/2400) [#2404](https://github.com/IgniteUI/igniteui-webcomponents/pull/2404)
+- #### Virtual scroll
+  - **Behavior change:** Item elements are now recycled. An item that stays in the rendered window keeps its element, and the elements of the items that leave show the items that enter. Before, each element showed the item at its window position, so each scroll updated every rendered item. DOM state that the item template does not bind, for example the state of a checkbox without a `checked` binding, stays with the element and shows on the item that enters. The `itemTemplate` documentation shows how to bind this state or get new DOM for each item. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+  - The average measured item size now replaces `estimatedItemSize` for the items that are not measured yet, so the scrollbar follows the real content when the estimate is wrong. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+
+### Fixed
+- #### Virtual scroll
+  - `scrollToIndex` with `block: 'nearest'` now aligns an item after the viewport to the end of the viewport, as native `scrollIntoView` does. Before, it aligned each item out of view to the start, so a scroll to the next item moved a full page. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+- #### Checkbox, Switch, Radio
+  - A `<label>` element bound through `for`, or wrapping the component, now names the control and a click on it focuses and toggles the control, as for a native checkbox or radio. Before, the control had no accessible name and the click did nothing. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The host `aria-labelledby` now names the control. Before, the component copied the ID into its shadow root, where it did not resolve. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Rating, Slider
+  - A `<label>` element bound through `for`, or wrapping the component, now names the control, and a click on it focuses the control. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The host `aria-labelledby` now names the control. The slider now also follows a change of the host `aria-label` after the first render. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The slider value tooltip is hidden from assistive technology, because `aria-valuetext` already carries the value. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Color picker
+  - In `default` mode, an external `<label>` and the host `aria-labelledby` and `aria-label` now name the trigger button. Before, it was always "Open color picker". [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - In `input` mode, the text input no longer carries `aria-expanded`, which ARIA does not allow on a text input. The swatch button in the prefix still reflects the open state. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### File input
+  - A click on an external `<label>` now focuses the native input and opens the file picker, as for a native file input. Before, the focus went to the browse button. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Combo
+  - The `label` property and an external `<label>` now name the input. Before, the selection status text ("No options selected") replaced them. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Combo, Color picker, Date picker, Date range picker, Date time input, File input, Input, Mask input, Select, Textarea
+  - The host `aria-labelledby` and `aria-label` now name the native editor. All form associated components use one naming order: the host `aria-labelledby`, then the external `<label>` elements, then the own label, then the host `aria-label`. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - A `<label>` element added after the first render now names the control from its first focus. Before, it did not name the control until the next render. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The helper text `aria-describedby` of the input editors now stays after a re-render. Before, a re-render removed it. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+
 ## [7.4.0] - 2026-09-23
 ### Added
 - #### Breadcrumbs
@@ -1664,6 +1701,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.4.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.4.0...7.4.1
 [7.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.2...7.4.0
 [7.3.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.1...7.3.2
 [7.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.0...7.3.1

package/components/checkbox/checkbox-base.d.ts

@@ -42,6 +42,8 @@ export declare class IgcCheckboxBaseComponent extends IgcCheckboxBaseComponent_b
     focus(options?: FocusOptions): void;
     /** Removes focus from the control. */
     blur(): void;
+    /** Focuses and toggles the control, as a native checkbox label does. */
+    protected _handleLabelActivation(): void;
     protected _handleSlotChange(): void;
     protected _handleClick(event: PointerEvent): void;
 }

package/components/checkbox/checkbox-base.js

@@ -56,6 +56,10 @@ let IgcCheckboxBaseComponent = class IgcCheckboxBaseComponent extends FormAssoci
     blur() {
         this._input.blur();
     }
+    _handleLabelActivation() {
+        this._input.focus();
+        this._input.click();
+    }
     _handleSlotChange() {
         this._hideLabel = !this._slots.hasAssignedNodes('[default]');
     }

package/components/checkbox/checkbox-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport { checkBoxValidators } from './validators.js';\n\nexport interface IgcCheckboxChangeEventArgs {\n  checked: boolean;\n  value?: string;\n}\n\nexport interface IgcCheckboxComponentEventMap {\n  igcChange: CustomEvent<IgcCheckboxChangeEventArgs>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n@blazorDeepImport\nexport class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixin(\n  EventEmitterMixin<IgcCheckboxComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  protected override get __validators() {\n    return checkBoxValidators;\n  }\n\n  protected readonly _slots = addSlotController(this, {\n    slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n    onChange: this._handleSlotChange,\n  });\n\n  protected readonly _focusRingManager = addKeyboardFocusRing(this);\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: false,\n    transformers: FormValueBooleanTransformers,\n  });\n  protected _value!: string;\n\n  @query('input', true)\n  protected readonly _input!: HTMLInputElement;\n\n  @state()\n  protected _hideLabel = true;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._value = value;\n    if (this.checked) {\n      this._formValue.setValueAndFormState(this.checked);\n    }\n  }\n\n  public get value(): string {\n    return this._value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public set checked(value: boolean) {\n    this._formValue.setValueAndFormState(value);\n  }\n\n  public get checked(): boolean {\n    return this._formValue.value;\n  }\n\n  /**\n   * The label position of the control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: ToggleLabelPosition = 'after';\n\n  /** Simulates a click on the control. */\n  public override click(): void {\n    this._input.click();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the control. */\n  public override focus(options?: FocusOptions): void {\n    this._input.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the control. */\n  public override blur(): void {\n    this._input.blur();\n  }\n\n  protected _handleSlotChange(): void {\n    this._hideLabel = !this._slots.hasAssignedNodes('[default]');\n  }\n\n  protected _handleClick(event: PointerEvent): void {\n    event.stopPropagation();\n\n    this._setTouchedState();\n    this.checked = !this.checked;\n    this.emitEvent('igcChange', {\n      detail: { checked: this.checked, value: this.value },\n    });\n  }\n}\n"]}
+{"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport { checkBoxValidators } from './validators.js';\n\nexport interface IgcCheckboxChangeEventArgs {\n  checked: boolean;\n  value?: string;\n}\n\nexport interface IgcCheckboxComponentEventMap {\n  igcChange: CustomEvent<IgcCheckboxChangeEventArgs>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n@blazorDeepImport\nexport class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixin(\n  EventEmitterMixin<IgcCheckboxComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  protected override get __validators() {\n    return checkBoxValidators;\n  }\n\n  protected readonly _slots = addSlotController(this, {\n    slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n    onChange: this._handleSlotChange,\n  });\n\n  protected readonly _focusRingManager = addKeyboardFocusRing(this);\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: false,\n    transformers: FormValueBooleanTransformers,\n  });\n  protected _value!: string;\n\n  @query('input', true)\n  protected readonly _input!: HTMLInputElement;\n\n  @state()\n  protected _hideLabel = true;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._value = value;\n    if (this.checked) {\n      this._formValue.setValueAndFormState(this.checked);\n    }\n  }\n\n  public get value(): string {\n    return this._value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public set checked(value: boolean) {\n    this._formValue.setValueAndFormState(value);\n  }\n\n  public get checked(): boolean {\n    return this._formValue.value;\n  }\n\n  /**\n   * The label position of the control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: ToggleLabelPosition = 'after';\n\n  /** Simulates a click on the control. */\n  public override click(): void {\n    this._input.click();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the control. */\n  public override focus(options?: FocusOptions): void {\n    this._input.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the control. */\n  public override blur(): void {\n    this._input.blur();\n  }\n\n  /** Focuses and toggles the control, as a native checkbox label does. */\n  protected override _handleLabelActivation(): void {\n    this._input.focus();\n    this._input.click();\n  }\n\n  protected _handleSlotChange(): void {\n    this._hideLabel = !this._slots.hasAssignedNodes('[default]');\n  }\n\n  protected _handleClick(event: PointerEvent): void {\n    event.stopPropagation();\n\n    this._setTouchedState();\n    this.checked = !this.checked;\n    this.emitEvent('igcChange', {\n      detail: { checked: this.checked, value: this.value },\n    });\n  }\n}\n"]}

package/components/checkbox/checkbox.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { helperText } from '#internals/controllers/aria-projection.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { partMap } from '#internals/part-map.js';
 import { renderToggleShell } from '#internals/templates/toggle-shell.js';
@@ -52,10 +53,9 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     `;
     }
     render() {
-        const labelledBy = this.getAttribute('aria-labelledby');
         const checked = this.checked;
         return html `
-      ${renderToggleShell({
+      ${renderToggleShell(this, {
             type: 'checkbox',
             inputId: this._inputId,
             labelId: this._labelId,
@@ -73,17 +73,9 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
                 : this._renderStandard()}
           </span>
         `,
-            checked,
             hideLabel: this._hideLabel,
-            name: this.name,
-            value: this.value,
-            required: this.required,
-            disabled: this.disabled,
             indeterminate: this.indeterminate,
-            ariaLabelledBy: labelledBy ? labelledBy : this._labelId,
-            ariaDescribedBy: this._slots.hasAssignedElements('helper-text')
-                ? 'helper-text'
-                : undefined,
+            describedBy: helperText(this, this._slots)?.id,
             onClick: this._handleClick,
             onKeyDown: this._handleEnterKeydown,
             onBlur: this._handleBlur,

package/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { renderToggleShell } from '#internals/templates/toggle-shell.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { all } from './themes/checkbox-themes.js';\nimport { styles } from './themes/checkbox.base.css.js';\nimport { styles as shared } from './themes/shared/checkbox/checkbox.common.css.js';\n\nconst nextId = createIdGenerator('checkbox');\n\n/**\n * A check box allowing single values to be selected/deselected.\n *\n * @element igc-checkbox\n *\n * @slot - The checkbox label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the checkbox.\n * @csspart control - The checkbox input element.\n * @csspart label - The checkbox label.\n * @csspart indicator - The checkbox indicator icon.\n */\nexport default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-checkbox';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCheckboxComponent, IgcValidationContainerComponent);\n  }\n\n  private readonly _themes = addThemingController(this, all);\n\n  private readonly _inputId = nextId();\n  private readonly _labelId = `checkbox-label-${this._inputId}`;\n\n  /**\n   * Draws the checkbox in indeterminate state.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public indeterminate = false;\n\n  protected override _handleClick(event: PointerEvent): void {\n    this.indeterminate = false;\n    super._handleClick(event);\n  }\n\n  protected _renderStandard() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n      </svg>\n    `;\n  }\n\n  protected _renderIndigo() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <rect width=\"18\" height=\"4\" x=\"3\" y=\"10\" rx=\"1.85\" />\n        <path\n          d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"\n        />\n      </svg>\n    `;\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const checked = this.checked;\n\n    return html`\n      ${renderToggleShell({\n        type: 'checkbox',\n        inputId: this._inputId,\n        labelId: this._labelId,\n        baseParts: {\n          base: true,\n          checked,\n          focused: this._focusRingManager.focused,\n        },\n        controlParts: { control: true, checked },\n        labelParts: { label: true, checked },\n        renderControl: () => html`\n          <span part=${partMap({ indicator: true, checked })}>\n            ${\n              this._themes.theme === 'indigo'\n                ? this._renderIndigo()\n                : this._renderStandard()\n            }\n          </span>\n        `,\n        checked,\n        hideLabel: this._hideLabel,\n        name: this.name,\n        value: this.value,\n        required: this.required,\n        disabled: this.disabled,\n        indeterminate: this.indeterminate,\n        ariaLabelledBy: labelledBy ? labelledBy : this._labelId,\n        ariaDescribedBy: this._slots.hasAssignedElements('helper-text')\n          ? 'helper-text'\n          : undefined,\n        onClick: this._handleClick,\n        onKeyDown: this._handleEnterKeydown,\n        onBlur: this._handleBlur,\n      })}\n      ${IgcValidationContainerComponent.create(this)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-checkbox': IgcCheckboxComponent;\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { helperText } from '#internals/controllers/aria-projection.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { renderToggleShell } from '#internals/templates/toggle-shell.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { all } from './themes/checkbox-themes.js';\nimport { styles } from './themes/checkbox.base.css.js';\nimport { styles as shared } from './themes/shared/checkbox/checkbox.common.css.js';\n\nconst nextId = createIdGenerator('checkbox');\n\n/**\n * A check box allowing single values to be selected/deselected.\n *\n * @element igc-checkbox\n *\n * @slot - The checkbox label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the checkbox.\n * @csspart control - The checkbox input element.\n * @csspart label - The checkbox label.\n * @csspart indicator - The checkbox indicator icon.\n */\nexport default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-checkbox';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCheckboxComponent, IgcValidationContainerComponent);\n  }\n\n  private readonly _themes = addThemingController(this, all);\n\n  private readonly _inputId = nextId();\n  private readonly _labelId = `checkbox-label-${this._inputId}`;\n\n  /**\n   * Draws the checkbox in indeterminate state.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public indeterminate = false;\n\n  protected override _handleClick(event: PointerEvent): void {\n    this.indeterminate = false;\n    super._handleClick(event);\n  }\n\n  protected _renderStandard() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n      </svg>\n    `;\n  }\n\n  protected _renderIndigo() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <rect width=\"18\" height=\"4\" x=\"3\" y=\"10\" rx=\"1.85\" />\n        <path\n          d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"\n        />\n      </svg>\n    `;\n  }\n\n  protected override render() {\n    const checked = this.checked;\n\n    return html`\n      ${renderToggleShell(this, {\n        type: 'checkbox',\n        inputId: this._inputId,\n        labelId: this._labelId,\n        baseParts: {\n          base: true,\n          checked,\n          focused: this._focusRingManager.focused,\n        },\n        controlParts: { control: true, checked },\n        labelParts: { label: true, checked },\n        renderControl: () => html`\n          <span part=${partMap({ indicator: true, checked })}>\n            ${\n              this._themes.theme === 'indigo'\n                ? this._renderIndigo()\n                : this._renderStandard()\n            }\n          </span>\n        `,\n        hideLabel: this._hideLabel,\n        indeterminate: this.indeterminate,\n        describedBy: helperText(this, this._slots)?.id,\n        onClick: this._handleClick,\n        onKeyDown: this._handleEnterKeydown,\n        onBlur: this._handleBlur,\n      })}\n      ${IgcValidationContainerComponent.create(this)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-checkbox': IgcCheckboxComponent;\n  }\n}\n"]}

package/components/checkbox/switch.js

@@ -22,9 +22,8 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
         addThemingController(this, all);
     }
     render() {
-        const labelledBy = this.getAttribute('aria-labelledby');
         const checked = this.checked;
-        return renderToggleShell({
+        return renderToggleShell(this, {
             type: 'checkbox',
             inputId: this._inputId,
             labelId: this._labelId,
@@ -36,13 +35,7 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
             },
             labelParts: { label: true, checked },
             renderControl: () => html `<span part=${partMap({ thumb: true, checked })}></span>`,
-            checked,
             hideLabel: this._hideLabel,
-            name: this.name,
-            value: this.value,
-            required: this.required,
-            disabled: this.disabled,
-            ariaLabelledBy: labelledBy ? labelledBy : this._labelId,
             onClick: this._handleClick,
             onKeyDown: this._handleEnterKeydown,
             onBlur: this._handleBlur,

package/components/checkbox/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/checkbox/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAgB3C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,wBAAwB;aAC/C,YAAO,GAAG,YAAY,AAAf,CAAgB;aAChC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QAJO,aAAQ,GAAG,MAAM,EAAE,CAAC;QACpB,aAAQ,GAAG,gBAAgB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAI1D,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACxD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,OAAO,iBAAiB,CAAC;YACvB,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,IAAI,CAAC,QAAQ;YACtB,OAAO,EAAE,IAAI,CAAC,QAAQ;YACtB,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE;YAClC,YAAY,EAAE;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO;gBACP,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,OAAO;aACxC;YACD,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;YACpC,aAAa,EAAE,GAAG,EAAE,CAClB,IAAI,CAAA,cAAc,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,UAAU;YAC/D,OAAO;YACP,SAAS,EAAE,IAAI,CAAC,UAAU;YAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;YACvD,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,SAAS,EAAE,IAAI,CAAC,mBAAmB;YACnC,MAAM,EAAE,IAAI,CAAC,WAAW;SACzB,CAAC,CAAC;IACL,CAAC","sourcesContent":["import { html } from 'lit';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { renderToggleShell } from '#internals/templates/toggle-shell.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { styles as shared } from './themes/shared/switch/switch.common.css.js';\nimport { all } from './themes/switch-themes.js';\nimport { styles } from './themes/switch.base.css.js';\n\nconst nextId = createIdGenerator('switch');\n\n/**\n * Similar to a checkbox, a switch controls the state of a single setting on or off.\n *\n * @element igc-switch\n *\n * @slot - The switch label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the switch.\n * @csspart control - The switch input element.\n * @csspart thumb - The position indicator of the switch.\n * @csspart label - The switch label.\n */\nexport default class IgcSwitchComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-switch';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcSwitchComponent);\n  }\n\n  private readonly _inputId = nextId();\n  private readonly _labelId = `switch-label-${this._inputId}`;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const checked = this.checked;\n\n    return renderToggleShell({\n      type: 'checkbox',\n      inputId: this._inputId,\n      labelId: this._labelId,\n      baseParts: { base: true, checked },\n      controlParts: {\n        control: true,\n        checked,\n        focused: this._focusRingManager.focused,\n      },\n      labelParts: { label: true, checked },\n      renderControl: () =>\n        html`<span part=${partMap({ thumb: true, checked })}></span>`,\n      checked,\n      hideLabel: this._hideLabel,\n      name: this.name,\n      value: this.value,\n      required: this.required,\n      disabled: this.disabled,\n      ariaLabelledBy: labelledBy ? labelledBy : this._labelId,\n      onClick: this._handleClick,\n      onKeyDown: this._handleEnterKeydown,\n      onBlur: this._handleBlur,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-switch': IgcSwitchComponent;\n  }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/checkbox/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAgB3C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,wBAAwB;aAC/C,YAAO,GAAG,YAAY,AAAf,CAAgB;aAChC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QAJO,aAAQ,GAAG,MAAM,EAAE,CAAC;QACpB,aAAQ,GAAG,gBAAgB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAI1D,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,OAAO,iBAAiB,CAAC,IAAI,EAAE;YAC7B,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,IAAI,CAAC,QAAQ;YACtB,OAAO,EAAE,IAAI,CAAC,QAAQ;YACtB,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE;YAClC,YAAY,EAAE;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO;gBACP,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,OAAO;aACxC;YACD,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;YACpC,aAAa,EAAE,GAAG,EAAE,CAClB,IAAI,CAAA,cAAc,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,UAAU;YAC/D,SAAS,EAAE,IAAI,CAAC,UAAU;YAC1B,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,SAAS,EAAE,IAAI,CAAC,mBAAmB;YACnC,MAAM,EAAE,IAAI,CAAC,WAAW;SACzB,CAAC,CAAC;IACL,CAAC","sourcesContent":["import { html } from 'lit';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { renderToggleShell } from '#internals/templates/toggle-shell.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { styles as shared } from './themes/shared/switch/switch.common.css.js';\nimport { all } from './themes/switch-themes.js';\nimport { styles } from './themes/switch.base.css.js';\n\nconst nextId = createIdGenerator('switch');\n\n/**\n * Similar to a checkbox, a switch controls the state of a single setting on or off.\n *\n * @element igc-switch\n *\n * @slot - The switch label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the switch.\n * @csspart control - The switch input element.\n * @csspart thumb - The position indicator of the switch.\n * @csspart label - The switch label.\n */\nexport default class IgcSwitchComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-switch';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcSwitchComponent);\n  }\n\n  private readonly _inputId = nextId();\n  private readonly _labelId = `switch-label-${this._inputId}`;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    const checked = this.checked;\n\n    return renderToggleShell(this, {\n      type: 'checkbox',\n      inputId: this._inputId,\n      labelId: this._labelId,\n      baseParts: { base: true, checked },\n      controlParts: {\n        control: true,\n        checked,\n        focused: this._focusRingManager.focused,\n      },\n      labelParts: { label: true, checked },\n      renderControl: () =>\n        html`<span part=${partMap({ thumb: true, checked })}></span>`,\n      hideLabel: this._hideLabel,\n      onClick: this._handleClick,\n      onKeyDown: this._handleEnterKeydown,\n      onBlur: this._handleBlur,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-switch': IgcSwitchComponent;\n  }\n}\n"]}

package/components/color-picker/color-picker.js

@@ -12,7 +12,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { addAriaProjector } from '#internals/controllers/aria-projection.js';
+import { addAriaProjector, ariaBindings, resolveNaming, } from '#internals/controllers/aria-projection.js';
 import { addKeybindings, altKey, arrowDown, arrowRight, arrowUp, endKey, escapeKey, isKey, } from '#internals/controllers/key-bindings.js';
 import { addRootClickController } from '#internals/controllers/root-click.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
@@ -124,10 +124,9 @@ let IgcColorPickerComponent = class IgcColorPickerComponent extends FormAssociat
             target: () => (this._isInputMode ? this._anchorRef.value : null),
             state: () => ({
                 hasPopup: 'dialog',
-                expanded: `${this.open}`,
-                labelledBy: this._internals.labels,
                 describedBy: this._helperText ? [this._helperText] : null,
             }),
+            hasOwnLabel: () => Boolean(this.label),
         });
     }
     update(props) {
@@ -495,6 +494,7 @@ let IgcColorPickerComponent = class IgcColorPickerComponent extends FormAssociat
         return html `
       <button
         ${ref(this._anchorRef)}
+        ${ariaBindings(resolveNaming(this, Boolean(this.label)))}
         id="trigger"
         type="button"
         aria-haspopup="dialog"

package/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addAriaProjector } from '#internals/controllers/aria-projection.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowRight,\n  arrowUp,\n  endKey,\n  escapeKey,\n  isKey,\n} from '#internals/controllers/key-bindings.js';\nimport { addRootClickController } from '#internals/controllers/root-click.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { shadowOptions } from '#internals/decorators/shadow-options.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { IgcBaseComboBoxComponent } from '#internals/mixins/combo-box.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isEmpty } from '#internals/utils/arrays.js';\nimport {\n  addSafeEventListener,\n  focusLeftHost,\n  getElementFromPath,\n  stopPropagation,\n} from '#internals/utils/events.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { asNumber, clamp } from '#internals/utils/math.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcDividerComponent from '../divider/divider.js';\nimport IgcFocusTrapComponent from '../focus-trap/focus-trap.js';\nimport IgcInputComponent from '../input/input.js';\nimport IgcPopoverComponent from '../popover/popover.js';\nimport type IgcSelectItemComponent from '../select/select-item.js';\nimport IgcSelectComponent from '../select/select.js';\nimport type { ColorFormat, ColorPickerMode } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport IgcVisuallyHiddenComponent from '../visually-hidden/visually-hidden.js';\nimport { isValidColor, normalizeColor } from './common.js';\nimport { ColorModel, getContext } from './model.js';\nimport IgcPickerCanvasComponent, {\n  type PickerCanvasEventDetail,\n} from './picker-canvas.js';\nimport { styles } from './themes/color-picker.base.css.js';\nimport { styles as shared } from './themes/shared/color-picker.common.css.js';\nimport { all } from './themes/themes.js';\nimport { colorPickerValidators } from './validators.js';\n\nexport interface IgcColorPickerComponentEventMap {\n  igcOpening: CustomEvent<void>;\n  igcOpened: CustomEvent<void>;\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n  igcInput: CustomEvent<string>;\n  igcChange: CustomEvent<string>;\n}\n\nconst Slots = setSlots(\n  'value-missing',\n  'custom-error',\n  'invalid',\n  'helper-text'\n);\n\n/** The color string shape of each format. Shown while the input is empty. */\nconst formatPlaceholders: Record<ColorFormat, string> = {\n  hex: '#rrggbb',\n  rgb: 'rgb(r g b)',\n  hsl: 'hsl(h s% l%)',\n};\n\n/** The alpha text is `<digits>%`. An edit removes every other character. */\nconst nonDigits = /\\D/g;\n\n/** The last caret offset in `<digits>%`, the position in front of the `%`. */\nfunction caretLimit(text: string): number {\n  return Math.max(text.length - 1, 0);\n}\n\n/**\n * The part of the EyeDropper API that this component uses.\n *\n * The type is declared locally, because the API is not in the baseline DOM\n * typings. Firefox and Safari do not implement it.\n */\ninterface EyeDropperLike {\n  open(): Promise<{ sRGBHex: string }>;\n}\n\ntype EyeDropperConstructor = new () => EyeDropperLike;\n\n/** Returns the EyeDropper constructor, if the browser provides one. */\nfunction getEyeDropper(): EyeDropperConstructor | undefined {\n  return (globalThis as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n}\n\n/**\n * Color input component.\n *\n * The user picks a color with the HSV saturation/value canvas, the hue slider\n * and the optional alpha slider. The user can also type a color string: hex,\n * rgb(a), hsl(a) or a named CSS color.\n *\n * The component supports pre-defined swatches and the native EyeDropper API,\n * where the browser provides one. The anchor is a trigger button\n * (`mode=\"default\"`) or an editable text field (`mode=\"input\"`).\n *\n * @element igc-color-picker\n *\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n * @slot helper-text - Renders content below the picker.\n *\n * @fires igcOpening - Emitted just before the picker dropdown is open.\n * @fires igcOpened - Emitted after the picker dropdown is open.\n * @fires igcClosing - Emitted just before the picker dropdown is closed.\n * @fires igcClosed - Emitted after closing the picker dropdown.\n * @fires igcInput - Emitted when the value of the component is changed.\n * @fires igcChange - Emitted when the value of the component is committed.\n *\n * @csspart anchor - The trigger element that opens the picker (the button in default mode, or the swatch prefix in input mode).\n * @csspart empty - Applied alongside `anchor` when no color value is set, rendering a checkered background.\n * @csspart label - The label rendered above the anchor in default mode.\n * @csspart picker - The popover container holding the canvas, sliders, inputs and swatches.\n * @csspart main-row - The row containing the hue slider and the copy/eyedropper buttons.\n * @csspart alpha-row - The row containing the alpha slider and input, rendered when `show-alpha` is set.\n * @csspart inputs-row - The row containing the format select and the color value input.\n * @csspart buttons - The wrapper around the copy and eyedropper buttons.\n * @csspart hue - The hue slider.\n * @csspart alpha - The alpha slider.\n * @csspart copy - The button that copies the current color value to the clipboard.\n * @csspart eye-dropper - The button that activates the EyeDropper API.\n * @csspart format-select - The select control used to switch the color string format.\n * @csspart swatches - The container of the pre-defined color swatches.\n * @csspart swatch - An individual color swatch button.\n */\n@shadowOptions({ delegatesFocus: true })\nexport default class IgcColorPickerComponent extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<\n    IgcColorPickerComponentEventMap,\n    AbstractConstructor<IgcBaseComboBoxComponent>\n  >(IgcBaseComboBoxComponent)\n) {\n  public static readonly tagName = 'igc-color-picker';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcColorPickerComponent,\n      IgcInputComponent,\n      IgcPopoverComponent,\n      IgcFocusTrapComponent,\n      IgcSelectComponent,\n      IgcPickerCanvasComponent,\n      IgcDividerComponent,\n      IgcButtonComponent,\n      IgcIconButtonComponent,\n      IgcValidationContainerComponent,\n      IgcVisuallyHiddenComponent\n    );\n  }\n\n  //#region Internal state and properties\n\n  protected override get __validators() {\n    return colorPickerValidators;\n  }\n\n  protected readonly _slots = addSlotController(this, { slots: Slots });\n\n  protected override readonly _rootClickController = addRootClickController(\n    this,\n    {\n      onHide: this._handleClosing,\n    }\n  );\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: '',\n  });\n\n  private readonly _alphaRef = createRef<HTMLInputElement>();\n  private readonly _alphaInputRef = createRef<IgcInputComponent>();\n  private readonly _canvasRef = createRef<IgcPickerCanvasComponent>();\n  private readonly _hueRef = createRef<HTMLInputElement>();\n  private readonly _anchorRef = createRef<\n    HTMLButtonElement | IgcInputComponent\n  >();\n\n  private readonly _supportsEyeDropper = Boolean(getEyeDropper());\n  private _color = ColorModel.empty();\n  private _oldValue = '';\n\n  /** The last value written for each host custom property. */\n  private readonly _appliedProperties = new Map<string, string>();\n\n  @query('#helper-text')\n  private readonly _helperText!: IgcValidationContainerComponent | null;\n\n  private get _isInputMode(): boolean {\n    return this.mode === 'input';\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * The label of the component.\n   *\n   * In `mode=\"input\"` the component forwards the label to the anchor input.\n   * In `mode=\"default\"` it renders the label as a separate element.\n   * @attr label\n   */\n  @property()\n  public label?: string;\n\n  /**\n   * The value of the component as a CSS color string. Accepts hex, rgb(a),\n   * hsl(a) and named colors.\n   *\n   * An empty, whitespace-only or invalid string clears the value.\n   *\n   * @attr value\n   */\n  @property()\n  public set value(value: string) {\n    this._color = ColorModel.parse(value);\n    this._updateColor();\n  }\n\n  public get value(): string {\n    return this._formValue.value;\n  }\n\n  /**\n   * Sets the color format of the string value.\n   *\n   * A format change renders `value` in the new notation. The color does not\n   * change, so the component emits no `igcInput` or `igcChange`.\n   *\n   * @attr format\n   * @default 'hex'\n   */\n  @property()\n  public format: ColorFormat = 'hex';\n\n  /**\n   * Whether to hide the format picker buttons.\n   *\n   * @attr hide-formats\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-formats' })\n  public hideFormats = false;\n\n  /**\n   * Whether to show the alpha slider and input.\n   *\n   * @attr show-alpha\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-alpha' })\n  public showAlpha = false;\n\n  /**\n   * The mode of the color picker.\n   *\n   * In `\"default\"` mode the anchor is a trigger button. In `\"input\"` mode the\n   * anchor is an editable text field with a color swatch prefix. The prefix\n   * also opens the picker.\n   *\n   * @attr mode\n   * @default 'default'\n   */\n  @property({ reflect: true })\n  public mode: ColorPickerMode = 'default';\n\n  /**\n   * Pre-defined color strings. The component renders them as clickable\n   * swatches below the picker controls. A click on a swatch commits its color\n   * as the value.\n   */\n  @property({ attribute: false })\n  public swatches: string[] = [];\n\n  //#endregion\n\n  //#region Lifecycle\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addSafeEventListener(this, 'focusin', this._handleFocusIn);\n    addSafeEventListener(this, 'focusout', this._handleFocusOut);\n\n    addKeybindings(this, { skip: () => this.disabled })\n      .set(escapeKey, this._handleKeyboardClosing)\n      .set([altKey, arrowDown], this._handleAnchorClick)\n      .set([altKey, arrowUp], this._handleKeyboardClosing);\n\n    addKeybindings(this, {\n      skip: () => this.disabled || !this._alphaInputRef.value,\n      ref: this._alphaInputRef,\n      bindingDefaults: { repeat: true },\n    })\n      .set(arrowUp, () => this._handleAlphaInputSpin(1))\n      .set(arrowDown, () => this._handleAlphaInputSpin(-1))\n      .set(arrowRight, this._handleAlphaInputCaretForward, {\n        preventDefault: false,\n      })\n      .set(endKey, this._handleAlphaInputCaretForward, {\n        preventDefault: false,\n      });\n\n    addAriaProjector(this, {\n      target: () => (this._isInputMode ? this._anchorRef.value : null),\n      state: () => ({\n        hasPopup: 'dialog',\n        expanded: `${this.open}`,\n        labelledBy: this._internals.labels,\n        describedBy: this._helperText ? [this._helperText] : null,\n      }),\n    });\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('open')) {\n      this._rootClickController.update();\n    }\n\n    if (this.hasUpdated && props.has('format')) {\n      this._formValue.setValueAndFormState(this._color.asString(this.format));\n    }\n\n    this._applyColorProperties();\n\n    super.update(props);\n  }\n\n  protected override updated(props: PropertyValues<this>): void {\n    super.updated(props);\n\n    if (props.has('open') || props.has('value')) {\n      // Wait for the paint, then sync the marker position with the color.\n      requestAnimationFrame(() => this._syncCanvasPosition());\n    }\n  }\n\n  //#endregion\n\n  //#region Form associated overrides\n\n  protected override formResetCallback(): void {\n    super.formResetCallback();\n\n    if (this._isInputMode) {\n      const input = this._anchorRef.value as IgcInputComponent;\n      input?.['formResetCallback']();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleClosing(): void {\n    this._hide(true);\n  }\n\n  private async _handleKeyboardClosing(): Promise<void> {\n    if (await this._hide(true)) {\n      this._anchorRef.value?.focus();\n    }\n  }\n\n  private _handleFocusIn(event: FocusEvent): void {\n    if (focusLeftHost(this, event)) {\n      this._oldValue = this._alphaColor;\n    }\n  }\n\n  private _handleFocusOut(event: FocusEvent): void {\n    if (!focusLeftHost(this, event)) {\n      return;\n    }\n\n    this._handleBlur();\n\n    if (this._alphaColor !== this._oldValue) {\n      this._oldValue = this._alphaColor;\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  private _handleCanvasColorPicked(\n    event: CustomEvent<PickerCanvasEventDetail>\n  ): void {\n    this._color.setSaturationAndValue(event.detail.x, 100 - event.detail.y);\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _handleHueValueChange(event: Event): void {\n    stopPropagation(event);\n\n    this._color.h = asNumber(this._hueRef.value?.value);\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _handleAlphaSliderValueChange(event: Event): void {\n    stopPropagation(event);\n\n    this._setAlpha(asNumber(this._alphaRef.value?.value));\n  }\n\n  /**\n   * Writes the alpha field again as `<digits>%` after each edit.\n   *\n   * @remarks\n   * The `%` is part of the value, not a suffix element, so the browser lets the\n   * user edit it. This handler corrects the result of an edit, and does not\n   * filter the keystrokes in `beforeinput`. The `%` is then a literal for each\n   * way that text reaches the field: typing, paste, drop, composition, undo and\n   * autofill. `beforeinput` carries `data` only for typing.\n   */\n  private _handleAlphaInputEdit(event: Event): void {\n    const input = this._alphaInputRef.value;\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n\n    if (!input || !native) return;\n\n    const caret = native.selectionStart ?? native.value.length;\n    const typed = native.value.slice(0, caret).replace(nonDigits, '').length;\n    const digits = native.value.replace(nonDigits, '');\n    const percent = clamp(asNumber(digits), 0, 100);\n\n    const text = digits ? `${percent}%` : '';\n\n    this._writeAlphaText(input, text, Math.min(typed, caretLimit(text)));\n\n    if (digits) {\n      this._setAlpha(percent);\n    }\n  }\n\n  /**\n   * Keeps the caret and the selection in the digits.\n   *\n   * @remarks\n   * The last `%` is a literal. Without this handler, the caret goes after the\n   * `%` on focus, on a click past the text, and when a shifted selection\n   * extends over it. The handler thus runs on `keyup`, `focusin` and `click`.\n   * The parse discards text after the `%`.\n   */\n  private _handleAlphaInputCaret(event: Event): void {\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n    if (!native) return;\n\n    const limit = caretLimit(native.value);\n\n    native.setSelectionRange(\n      Math.min(native.selectionStart ?? 0, limit),\n      Math.min(native.selectionEnd ?? 0, limit)\n    );\n  }\n\n  /**\n   * Steps the alpha by one percent.\n   *\n   * @remarks\n   * The step applies to the color, not to the text of the field, which keeps a\n   * held arrow key correct. The key downs repeat faster than a render, so the\n   * text can be stale.\n   *\n   * The handler writes the new text itself, so that the caret does not move. A\n   * value assignment puts the caret after the `%`, and a write from the render\n   * applies one frame late, which the user sees as a jump.\n   */\n  private _handleAlphaInputSpin(increment: -1 | 1): void {\n    const input = this._alphaInputRef.value;\n    const percent = clamp(this._alphaPercent + increment, 0, 100);\n\n    if (!input || percent === this._alphaPercent) return;\n\n    this._writeAlphaText(input, `${percent}%`);\n    this._setAlpha(percent);\n  }\n\n  /**\n   * Holds the caret at the `%`. Without this handler the caret steps past the\n   * `%`, and `keyup` pulls it back. This is the frame-late jump that\n   * {@link _handleAlphaInputSpin} describes.\n   */\n  private _handleAlphaInputCaretForward(event: KeyboardEvent): void {\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n    if (!native) return;\n\n    const limit = caretLimit(native.value);\n\n    if (isKey(event, endKey) || (native.selectionEnd ?? 0) >= limit) {\n      event.preventDefault();\n      native.setSelectionRange(limit, limit);\n    }\n  }\n\n  private _handleAlphaInputChange(event: CustomEvent<string>): void {\n    stopPropagation(event);\n\n    const input = event.target as IgcInputComponent;\n\n    if (!input.value) {\n      input.value = `${this._alphaPercent}%`;\n    }\n  }\n\n  private _handleFormatChange(\n    event: CustomEvent<IgcSelectItemComponent>\n  ): void {\n    stopPropagation(event);\n    this.format = event.detail.value as ColorFormat;\n  }\n\n  private _handleColorInputChange(event: CustomEvent<string>): void {\n    stopPropagation(event);\n\n    const input = event.target as IgcInputComponent;\n    const value = normalizeColor(event.detail);\n    const cleared = !value;\n\n    // An invalid and non-empty value reverts the input to the current color.\n    // An empty value clears the color.\n    if (!cleared && !isValidColor(value, getContext())) {\n      input.value = this._color.asString(this.format);\n      return;\n    }\n\n    this._color = cleared ? ColorModel.empty() : ColorModel.parse(value);\n    this._updateColor();\n    this._syncCanvasPosition();\n  }\n\n  private _handleEyeDropperClick(): void {\n    const EyeDropper = getEyeDropper();\n\n    if (!EyeDropper) return;\n\n    new EyeDropper()\n      .open()\n      .then((result) => {\n        this.value = result.sRGBHex;\n        this._emitInputEvent();\n      })\n      .catch(() => {});\n  }\n\n  private _handleCopy(): void {\n    navigator.clipboard?.writeText(this.value).catch(() => {});\n  }\n\n  private _handleSwatchClick(event: Event): void {\n    const swatch = getElementFromPath<HTMLButtonElement>(\n      'button[part=\"swatch\"]',\n      event\n    );\n    const color = swatch?.dataset.color;\n\n    if (color) {\n      this.value = color;\n      this._emitInputEvent();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  /**\n   * The current color with its alpha, in a notation that is independent of\n   * `format`.\n   */\n  private get _alphaColor(): string {\n    return this._color.asString('rgb', true);\n  }\n\n  /**\n   * The current color with an opaque alpha channel.\n   *\n   * @remarks\n   * The swatch preview paints this color on one half of its surface, and\n   * {@link _alphaColor} on the other half, which shows a translucent color next\n   * to its opaque form. At full alpha the two halves agree and the split is\n   * invisible, so an opaque color needs no separate branch.\n   *\n   * This value is defined also with no color. An empty color is white, which is\n   * where the alpha ramp and the canvas marker belong before the first pick.\n   * The anchor keeps its \"no color\" mark, because {@link _previewStyle} uses\n   * {@link _alphaColor}, which stays empty.\n   */\n  private get _opaqueColor(): string {\n    return new ColorModel(this._color.toRGB()).asString('rgb');\n  }\n\n  /** The alpha channel as the whole percentage that both alpha controls use. */\n  private get _alphaPercent(): number {\n    return Math.round(this._color.alpha * 100);\n  }\n\n  /** The pure hue that the saturation/value plane and the hue thumb use. */\n  private get _currentColor(): string {\n    return `hsl(${this._color.h} 100% 50%)`;\n  }\n\n  /**\n   * Copies the colors that the stylesheet needs onto the host.\n   *\n   * @remarks\n   * `update()` calls this, not the handlers that change the color, so it runs\n   * also for the first render. A picker with no value calls none of those\n   * handlers, and the plane would keep the stylesheet fallback.\n   */\n  private _applyColorProperties(): void {\n    const properties = {\n      '--_current-color': this._currentColor,\n      '--_selected-color': this._opaqueColor,\n    };\n\n    for (const [name, value] of Object.entries(properties)) {\n      if (this._appliedProperties.get(name) !== value) {\n        this._appliedProperties.set(name, value);\n        this.style.setProperty(name, value);\n      }\n    }\n  }\n\n  /**\n   * Replaces the whole text of the alpha field and puts the caret in front of\n   * the `%` by default.\n   */\n  private _writeAlphaText(\n    input: IgcInputComponent,\n    text: string,\n    caret = caretLimit(text)\n  ): void {\n    input.setRangeText(text, 0, input.value.length);\n    input.setSelectionRange(caret, caret);\n  }\n\n  private _setAlpha(percent: number): void {\n    const alpha = clamp(percent, 0, 100) / 100;\n\n    if (this._color.alpha === alpha) {\n      return;\n    }\n\n    this._color.alpha = alpha;\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _updateColor(): void {\n    this._formValue.setValueAndFormState(this._color.asString(this.format));\n    this.requestUpdate();\n  }\n\n  private _syncCanvasPosition(): void {\n    if (!this._canvasRef.value || !this.open) return;\n\n    const rect = this._canvasRef.value.getBoundingClientRect();\n    const { width: markerWidth, height: markerHeight } =\n      this._canvasRef.value.getMarkerDimensions();\n\n    const [, s, v] = this._color.toHSV();\n    const x = (s / 100) * rect.width - markerWidth;\n    const y = ((100 - v) / 100) * rect.height - markerHeight;\n\n    this._canvasRef.value.x = x;\n    this._canvasRef.value.y = y;\n  }\n\n  private _emitInputEvent(): void {\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  //#endregion\n\n  //#region Canvas area rendering\n\n  private _renderCanvasGradient(): TemplateResult {\n    const [, saturation, brightness] = this._color.toHSV();\n\n    return html`\n      <igc-picker-canvas\n        exportparts=\"marker, dragging\"\n        part=\"picker-canvas\"\n        ${ref(this._canvasRef)}\n        @igcColorPicked=${this._handleCanvasColorPicked}\n        currentColor=${this._currentColor}\n        markerColor=${this._opaqueColor}\n        .saturation=${saturation}\n        .brightness=${brightness}\n      >\n      </igc-picker-canvas>\n    `;\n  }\n\n  //#endregion\n\n  //#region Hue row and buttons rendering\n\n  private _renderHueSlider(): TemplateResult {\n    return html`\n      <input\n        ${ref(this._hueRef)}\n        aria-label=\"Hue\"\n        type=\"range\"\n        part=\"hue\"\n        min=\"0\"\n        max=\"360\"\n        .value=${String(Math.round(this._color.h))}\n        @input=${this._handleHueValueChange}\n        @change=${stopPropagation}\n      />\n    `;\n  }\n\n  private _renderIconButton(\n    part: string,\n    icon: string,\n    label: string,\n    handler: () => void,\n    disabled = false\n  ): TemplateResult {\n    return html`\n      <igc-icon-button\n        part=${part}\n        variant=\"flat\"\n        name=${icon}\n        ?disabled=${disabled}\n        @click=${handler}\n      >\n        <igc-visually-hidden>${label}</igc-visually-hidden>\n      </igc-icon-button>\n    `;\n  }\n\n  private _renderPickerButtons(): TemplateResult {\n    return html`\n      <div part=\"buttons\">\n        ${this._renderIconButton(\n          'copy',\n          'copy_content',\n          'Copy color value to clipboard',\n          this._handleCopy\n        )}\n        ${this._renderIconButton(\n          'eye-dropper',\n          'eye_dropper',\n          'Pick a color from the screen',\n          this._handleEyeDropperClick,\n          !this._supportsEyeDropper\n        )}\n      </div>\n    `;\n  }\n\n  //#endregion\n\n  //#region Alpha row rendering\n\n  private _renderAlphaRow(): TemplateResult {\n    return html`\n      <input\n        ${ref(this._alphaRef)}\n        aria-label=\"Alpha slider\"\n        type=\"range\"\n        part=\"alpha\"\n        min=\"0\"\n        max=\"100\"\n        .value=${String(this._alphaPercent)}\n        @input=${this._handleAlphaSliderValueChange}\n        @change=${stopPropagation}\n      />\n\n      <igc-visually-hidden>\n        <label for=\"alpha\">Alpha value</label>\n      </igc-visually-hidden>\n\n      <igc-input\n        ${ref(this._alphaInputRef)}\n        id=\"alpha\"\n        name=\"alpha\"\n        placeholder=\"Alpha value\"\n        inputmode=\"numeric\"\n        part=\"alpha-input\"\n        outlined\n        type=\"text\"\n        .value=${live(`${this._alphaPercent}%`)}\n        @input=${this._handleAlphaInputEdit}\n        @focusin=${this._handleAlphaInputCaret}\n        @click=${this._handleAlphaInputCaret}\n        @keyup=${this._handleAlphaInputCaret}\n        @igcChange=${this._handleAlphaInputChange}\n      ></igc-input>\n    `;\n  }\n\n  //#endregion\n\n  //#region Color formats and input row rendering\n\n  private _renderSelect(): TemplateResult {\n    return html`\n      <igc-visually-hidden>\n        <label for=\"format-select\">Color format</label>\n      </igc-visually-hidden>\n\n      <igc-select\n        id=\"format-select\"\n        part=\"format-select\"\n        placeholder=\"Color format\"\n        name=\"format\"\n        outlined\n        .value=${this.format}\n        @igcChange=${this._handleFormatChange}\n      >\n        <igc-select-item value=\"hex\">Hex</igc-select-item>\n        <igc-select-item value=\"rgb\">RGB</igc-select-item>\n        <igc-select-item value=\"hsl\">HSL</igc-select-item>\n      </igc-select>\n    `;\n  }\n\n  private _renderInputsRow(): TemplateResult {\n    return html`\n      ${cache(this.hideFormats ? nothing : this._renderSelect())}\n      <igc-visually-hidden>\n        <label for=\"color-input\"> Color value input </label>\n      </igc-visually-hidden>\n\n      <igc-input\n        id=\"color-input\"\n        name=\"color-input\"\n        placeholder=${formatPlaceholders[this.format]}\n        outlined\n        .value=${live(this._color.asString(this.format))}\n        @igcChange=${this._handleColorInputChange}\n      ></igc-input>\n    `;\n  }\n\n  //#endregion\n\n  //#region Swatches rendering\n\n  private _renderSwatches(): TemplateResult | typeof nothing {\n    return !isEmpty(this.swatches)\n      ? html`\n          <igc-divider></igc-divider>\n          <div part=\"swatches\" @click=${this._handleSwatchClick}>\n            ${this.swatches.map(\n              (color) => html`\n                <button\n                  type=\"button\"\n                  part=\"swatch\"\n                  data-color=${color}\n                  aria-label=${color}\n                  style=\"background-color: ${color}\"\n                ></button>\n              `\n            )}\n          </div>\n        `\n      : nothing;\n  }\n\n  //#endregion\n\n  //#region Anchor rendering\n\n  private get _anchorParts(): ReturnType<typeof partMap> {\n    return partMap({\n      anchor: true,\n      empty: this._color.isEmpty,\n      'input-mode': this._isInputMode,\n    });\n  }\n\n  /**\n   * The swatch preview style that both anchors use.\n   *\n   * `--_color-preview` paints the opaque color over the left half.\n   * `--_alpha-preview` paints the color with its real alpha over the whole\n   * surface. Do not transpose the two. See the `swatch-preview` mixin.\n   */\n  private _previewStyle(): ReturnType<typeof styleMap> {\n    const color = this._alphaColor;\n\n    return bindIf(\n      color,\n      styleMap({\n        '--_alpha-preview': color,\n        '--_color-preview': this._opaqueColor,\n      })\n    );\n  }\n\n  private _renderButtonAnchor(): TemplateResult {\n    return html`\n      <button\n        ${ref(this._anchorRef)}\n        id=\"trigger\"\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-controls=\"picker\"\n        aria-expanded=${this.open}\n        aria-describedby=\"helper-text\"\n        part=${this._anchorParts}\n        slot=\"anchor\"\n        style=${this._previewStyle()}\n        ?disabled=${this.disabled}\n        @click=${this._handleAnchorClick}\n      >\n        <igc-visually-hidden>Open color picker</igc-visually-hidden>\n      </button>\n    `;\n  }\n\n  private _renderInputAnchor(): TemplateResult {\n    return html`\n      <igc-input\n        ${ref(this._anchorRef)}\n        slot=\"anchor\"\n        outlined\n        placeholder=${formatPlaceholders[this.format]}\n        label=${ifDefined(this.label)}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        .value=${live(this.value)}\n        .invalid=${this.invalid}\n        @igcChange=${this._handleColorInputChange}\n      >\n        <div slot=\"prefix\">\n          <button\n            type=\"button\"\n            part=${this._anchorParts}\n            aria-label=\"Open color picker\"\n            aria-haspopup=\"dialog\"\n            aria-controls=\"picker\"\n            aria-expanded=${this.open}\n            style=${this._previewStyle()}\n            ?disabled=${this.disabled}\n            @click=${this._handleAnchorClick}\n          ></button>\n        </div>\n      </igc-input>\n    `;\n  }\n\n  private _renderAnchor(): TemplateResult {\n    return this._isInputMode\n      ? this._renderInputAnchor()\n      : this._renderButtonAnchor();\n  }\n\n  private _renderHelperText(): TemplateResult {\n    return IgcValidationContainerComponent.create(this, {\n      id: 'helper-text',\n      hasHelperText: true,\n    });\n  }\n\n  //#endregion\n\n  private _renderPicker(): TemplateResult {\n    return html`\n      <igc-focus-trap ?disabled=${!this.open} .inert=${!this.open}>\n        <div\n          id=\"picker\"\n          part=\"picker\"\n          role=\"dialog\"\n          aria-label=\"Color picker\"\n          aria-modal=\"false\"\n        >\n          ${this._renderCanvasGradient()}\n          <div part=\"main-row\">\n            ${this._renderHueSlider()}${this._renderPickerButtons()}\n          </div>\n          ${\n            this.showAlpha\n              ? html`<div part=\"alpha-row\">${this._renderAlphaRow()}</div>`\n              : nothing\n          }\n          <div part=\"inputs-row\">${this._renderInputsRow()}</div>\n          ${this._renderSwatches()}\n        </div>\n      </igc-focus-trap>\n    `;\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      <div part=\"color-picker\">\n        <igc-popover\n          ?open=${this.open}\n          flip\n          .scrollStrategy=${this.scrollStrategy}\n          @igcPopoverScrollClose=${this._handleClosing}\n        >\n          ${this._renderAnchor()}${this._renderPicker()}\n        </igc-popover>\n        ${\n          !this._isInputMode && this.label\n            ? html`<label part=\"label\" for=\"trigger\">${this.label}</label>`\n            : nothing\n        }\n        ${this._renderHelperText()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-color-picker': IgcColorPickerComponent;\n  }\n}\n"]}
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA4C,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,aAAa,GACd,MAAM,2CAA2C,CAAC;AACnD,OAAO,EACL,cAAc,EACd,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,gDAAgD,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EAClB,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AAErD,OAAO,+BAA+B,MAAM,iDAAiD,CAAC;AAC9F,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,wBAEN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAWxD,MAAM,KAAK,GAAG,QAAQ,CACpB,eAAe,EACf,cAAc,EACd,SAAS,EACT,aAAa,CACd,CAAC;AAGF,MAAM,kBAAkB,GAAgC;IACtD,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,cAAc;CACpB,CAAC;AAGF,MAAM,SAAS,GAAG,KAAK,CAAC;AAGxB,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AACtC,CAAC;AAeD,SAAS,aAAa;IACpB,OAAQ,UAAqD,CAAC,UAAU,CAAC;AAC3E,CAAC;AA4Cc,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,2BAA2B,CAC9E,iBAAiB,CAGf,wBAAwB,CAAC,CAC5B;;aACwB,YAAO,GAAG,kBAAkB,AAArB,CAAsB;aACtC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,yBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,+BAA+B,EAC/B,0BAA0B,CAC3B,CAAC;IACJ,CAAC;IAID,IAAuB,YAAY;QACjC,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IAiCD,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;IAC/B,CAAC;IAyBD,IAAW,KAAK,CAAC,KAAa;QAC5B,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IAyDD;QACE,KAAK,EAAE,CAAC;QA3HS,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAE1C,yBAAoB,GAAG,sBAAsB,CACvE,IAAI,EACJ;YACE,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CACF,CAAC;QAE0B,eAAU,GAAG,oBAAoB,CAAC,IAAI,EAAE;YAClE,YAAY,EAAE,EAAE;SACjB,CAAC,CAAC;QAEc,cAAS,GAAG,SAAS,EAAoB,CAAC;QAC1C,mBAAc,GAAG,SAAS,EAAqB,CAAC;QAChD,eAAU,GAAG,SAAS,EAA4B,CAAC;QACnD,YAAO,GAAG,SAAS,EAAoB,CAAC;QACxC,eAAU,GAAG,SAAS,EAEpC,CAAC;QAEa,wBAAmB,GAAG,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;QACxD,WAAM,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC;QAC5B,cAAS,GAAG,EAAE,CAAC;QAGN,uBAAkB,GAAG,IAAI,GAAG,EAAkB,CAAC;QAmDzD,WAAM,GAAgB,KAAK,CAAC;QAS5B,gBAAW,GAAG,KAAK,CAAC;QASpB,cAAS,GAAG,KAAK,CAAC;QAalB,SAAI,GAAoB,SAAS,CAAC;QAQlC,aAAQ,GAAa,EAAE,CAAC;QAS7B,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAChC,oBAAoB,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,oBAAoB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAE7D,cAAc,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;aAChD,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC;aAC3C,GAAG,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC;aACjD,GAAG,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAEvD,cAAc,CAAC,IAAI,EAAE;YACnB,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK;YACvD,GAAG,EAAE,IAAI,CAAC,cAAc;YACxB,eAAe,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SAClC,CAAC;aACC,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;aACjD,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;aACpD,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,6BAA6B,EAAE;YACnD,cAAc,EAAE,KAAK;SACtB,CAAC;aACD,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,6BAA6B,EAAE;YAC/C,cAAc,EAAE,KAAK;SACtB,CAAC,CAAC;QAEL,gBAAgB,CAAC,IAAI,EAAE;YACrB,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YAEhE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;gBACZ,QAAQ,EAAE,QAAQ;gBAClB,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI;aAC1D,CAAC;YACF,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SACvC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACtB,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;QACrC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QAC1E,CAAC;QAED,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAEkB,OAAO,CAAC,KAA2B;QACpD,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAErB,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAE5C,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAMkB,iBAAiB;QAClC,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,KAA0B,CAAC;YACzD,KAAK,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAMO,cAAc;QACpB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAEO,KAAK,CAAC,sBAAsB;QAClC,IAAI,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,IAAI,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;QACpC,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;YAClC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEO,wBAAwB,CAC9B,KAA2C;QAE3C,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB,CAAC,KAAY;QACxC,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACpD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,6BAA6B,CAAC,KAAY;QAChD,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACxD,CAAC;IAYO,qBAAqB,CAAC,KAAY;QACxC,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QACxC,MAAM,MAAM,GAAG,kBAAkB,CAAmB,OAAO,EAAE,KAAK,CAAC,CAAC;QAEpE,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QAE9B,MAAM,KAAK,GAAG,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC;QACzE,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnD,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAEhD,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAErE,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAWO,sBAAsB,CAAC,KAAY;QACzC,MAAM,MAAM,GAAG,kBAAkB,CAAmB,OAAO,EAAE,KAAK,CAAC,CAAC;QACpE,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEvC,MAAM,CAAC,iBAAiB,CACtB,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,cAAc,IAAI,CAAC,EAAE,KAAK,CAAC,EAC3C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,YAAY,IAAI,CAAC,EAAE,KAAK,CAAC,CAC1C,CAAC;IACJ,CAAC;IAcO,qBAAqB,CAAC,SAAiB;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QACxC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAE9D,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,IAAI,CAAC,aAAa;YAAE,OAAO;QAErD,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;QAC3C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAOO,6BAA6B,CAAC,KAAoB;QACxD,MAAM,MAAM,GAAG,kBAAkB,CAAmB,OAAO,EAAE,KAAK,CAAC,CAAC;QACpE,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEvC,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC;YAChE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,KAA0B;QACxD,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA2B,CAAC;QAEhD,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACjB,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC;QACzC,CAAC;IACH,CAAC;IAEO,mBAAmB,CACzB,KAA0C;QAE1C,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAoB,CAAC;IAClD,CAAC;IAEO,uBAAuB,CAAC,KAA0B;QACxD,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA2B,CAAC;QAChD,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC;QAIvB,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC;YACnD,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACrE,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,sBAAsB;QAC5B,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QAEnC,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,IAAI,UAAU,EAAE;aACb,IAAI,EAAE;aACN,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC;YAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEO,kBAAkB,CAAC,KAAY;QACrC,MAAM,MAAM,GAAG,kBAAkB,CAC/B,uBAAuB,EACvB,KAAK,CACN,CAAC;QACF,MAAM,KAAK,GAAG,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC;QAEpC,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAUD,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;IAgBD,IAAY,YAAY;QACtB,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7D,CAAC;IAGD,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;IAC7C,CAAC;IAGD,IAAY,aAAa;QACvB,OAAO,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC;IAC1C,CAAC;IAUO,qBAAqB;QAC3B,MAAM,UAAU,GAAG;YACjB,kBAAkB,EAAE,IAAI,CAAC,aAAa;YACtC,mBAAmB,EAAE,IAAI,CAAC,YAAY;SACvC,CAAC;QAEF,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;YACvD,IAAI,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;gBAChD,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAMO,eAAe,CACrB,KAAwB,EACxB,IAAY,EACZ,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC;QAExB,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACxC,CAAC;IAEO,SAAS,CAAC,OAAe;QAC/B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC;QAE3C,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QAEjD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC3D,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,GAChD,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;QAE9C,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACrC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QAC/C,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAEzD,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;QAC5B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC;IAMO,qBAAqB;QAC3B,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAEvD,OAAO,IAAI,CAAA;;;;UAIL,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;0BACJ,IAAI,CAAC,wBAAwB;uBAChC,IAAI,CAAC,aAAa;sBACnB,IAAI,CAAC,YAAY;sBACjB,UAAU;sBACV,UAAU;;;KAG3B,CAAC;IACJ,CAAC;IAMO,gBAAgB;QACtB,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;iBAMV,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBACjC,IAAI,CAAC,qBAAqB;kBACzB,eAAe;;KAE5B,CAAC;IACJ,CAAC;IAEO,iBAAiB,CACvB,IAAY,EACZ,IAAY,EACZ,KAAa,EACb,OAAmB,EACnB,QAAQ,GAAG,KAAK;QAEhB,OAAO,IAAI,CAAA;;eAEA,IAAI;;eAEJ,IAAI;oBACC,QAAQ;iBACX,OAAO;;+BAEO,KAAK;;KAE/B,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,CACtB,MAAM,EACN,cAAc,EACd,+BAA+B,EAC/B,IAAI,CAAC,WAAW,CACjB;UACC,IAAI,CAAC,iBAAiB,CACtB,aAAa,EACb,aAAa,EACb,8BAA8B,EAC9B,IAAI,CAAC,sBAAsB,EAC3B,CAAC,IAAI,CAAC,mBAAmB,CAC1B;;KAEJ,CAAC;IACJ,CAAC;IAMO,eAAe;QACrB,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;;;;;;iBAMZ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;iBAC1B,IAAI,CAAC,6BAA6B;kBACjC,eAAe;;;;;;;;UAQvB,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;;;;;;;;iBAQjB,IAAI,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC;iBAC9B,IAAI,CAAC,qBAAqB;mBACxB,IAAI,CAAC,sBAAsB;iBAC7B,IAAI,CAAC,sBAAsB;iBAC3B,IAAI,CAAC,sBAAsB;qBACvB,IAAI,CAAC,uBAAuB;;KAE5C,CAAC;IACJ,CAAC;IAMO,aAAa;QACnB,OAAO,IAAI,CAAA;;;;;;;;;;;iBAWE,IAAI,CAAC,MAAM;qBACP,IAAI,CAAC,mBAAmB;;;;;;KAMxC,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;;;;;;;;sBAQ1C,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC;;iBAEpC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;qBACnC,IAAI,CAAC,uBAAuB;;KAE5C,CAAC;IACJ,CAAC;IAMO,eAAe;QACrB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAA;;wCAE4B,IAAI,CAAC,kBAAkB;cACjD,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;+BAIE,KAAK;+BACL,KAAK;6CACS,KAAK;;eAEnC,CACF;;SAEJ;YACH,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAMD,IAAY,YAAY;QACtB,OAAO,OAAO,CAAC;YACb,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO;YAC1B,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CAAC;IACL,CAAC;IASO,aAAa;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAE/B,OAAO,MAAM,CACX,KAAK,EACL,QAAQ,CAAC;YACP,kBAAkB,EAAE,KAAK;YACzB,kBAAkB,EAAE,IAAI,CAAC,YAAY;SACtC,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;UACpB,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;wBAKxC,IAAI,CAAC,IAAI;;eAElB,IAAI,CAAC,YAAY;;gBAEhB,IAAI,CAAC,aAAa,EAAE;oBAChB,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,kBAAkB;;;;KAInC,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;;;sBAGR,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC;gBACrC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;oBACjB,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;mBACd,IAAI,CAAC,OAAO;qBACV,IAAI,CAAC,uBAAuB;;;;;mBAK9B,IAAI,CAAC,YAAY;;;;4BAIR,IAAI,CAAC,IAAI;oBACjB,IAAI,CAAC,aAAa,EAAE;wBAChB,IAAI,CAAC,QAAQ;qBAChB,IAAI,CAAC,kBAAkB;;;;KAIvC,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,YAAY;YACtB,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC3B,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IACjC,CAAC;IAEO,iBAAiB;QACvB,OAAO,+BAA+B,CAAC,MAAM,CAAC,IAAI,EAAE;YAClD,EAAE,EAAE,aAAa;YACjB,aAAa,EAAE,IAAI;SACpB,CAAC,CAAC;IACL,CAAC;IAIO,aAAa;QACnB,OAAO,IAAI,CAAA;kCACmB,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI;;;;;;;;YAQrD,IAAI,CAAC,qBAAqB,EAAE;;cAE1B,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE;;YAGvD,IAAI,CAAC,SAAS;YACZ,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,eAAe,EAAE,QAAQ;YAC7D,CAAC,CAAC,OACN;mCACyB,IAAI,CAAC,gBAAgB,EAAE;YAC9C,IAAI,CAAC,eAAe,EAAE;;;KAG7B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,IAAI;;4BAEC,IAAI,CAAC,cAAc;mCACZ,IAAI,CAAC,cAAc;;YAE1C,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE;;UAG7C,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;YAC9B,CAAC,CAAC,IAAI,CAAA,qCAAqC,IAAI,CAAC,KAAK,UAAU;YAC/D,CAAC,CAAC,OACN;UACE,IAAI,CAAC,iBAAiB,EAAE;;KAE7B,CAAC;IACJ,CAAC;;AAzzBgB;IADhB,KAAK,CAAC,cAAc,CAAC;4DACgD;AAkB/D;IADN,QAAQ,EAAE;sDACW;AAWtB;IADC,QAAQ,EAAE;oDAIV;AAgBM;IADN,QAAQ,EAAE;uDACwB;AAS5B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;4DAC3C;AASpB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;0DAC3C;AAalB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACa;AAQlC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yDACA;AApJZ,uBAAuB;IAD3C,aAAa,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;GACnB,uBAAuB,CAu3B3C;eAv3BoB,uBAAuB","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  addAriaProjector,\n  ariaBindings,\n  resolveNaming,\n} from '#internals/controllers/aria-projection.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowRight,\n  arrowUp,\n  endKey,\n  escapeKey,\n  isKey,\n} from '#internals/controllers/key-bindings.js';\nimport { addRootClickController } from '#internals/controllers/root-click.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { shadowOptions } from '#internals/decorators/shadow-options.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { IgcBaseComboBoxComponent } from '#internals/mixins/combo-box.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isEmpty } from '#internals/utils/arrays.js';\nimport {\n  addSafeEventListener,\n  focusLeftHost,\n  getElementFromPath,\n  stopPropagation,\n} from '#internals/utils/events.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { asNumber, clamp } from '#internals/utils/math.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcDividerComponent from '../divider/divider.js';\nimport IgcFocusTrapComponent from '../focus-trap/focus-trap.js';\nimport IgcInputComponent from '../input/input.js';\nimport IgcPopoverComponent from '../popover/popover.js';\nimport type IgcSelectItemComponent from '../select/select-item.js';\nimport IgcSelectComponent from '../select/select.js';\nimport type { ColorFormat, ColorPickerMode } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport IgcVisuallyHiddenComponent from '../visually-hidden/visually-hidden.js';\nimport { isValidColor, normalizeColor } from './common.js';\nimport { ColorModel, getContext } from './model.js';\nimport IgcPickerCanvasComponent, {\n  type PickerCanvasEventDetail,\n} from './picker-canvas.js';\nimport { styles } from './themes/color-picker.base.css.js';\nimport { styles as shared } from './themes/shared/color-picker.common.css.js';\nimport { all } from './themes/themes.js';\nimport { colorPickerValidators } from './validators.js';\n\nexport interface IgcColorPickerComponentEventMap {\n  igcOpening: CustomEvent<void>;\n  igcOpened: CustomEvent<void>;\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n  igcInput: CustomEvent<string>;\n  igcChange: CustomEvent<string>;\n}\n\nconst Slots = setSlots(\n  'value-missing',\n  'custom-error',\n  'invalid',\n  'helper-text'\n);\n\n/** The color string shape of each format. Shown while the input is empty. */\nconst formatPlaceholders: Record<ColorFormat, string> = {\n  hex: '#rrggbb',\n  rgb: 'rgb(r g b)',\n  hsl: 'hsl(h s% l%)',\n};\n\n/** The alpha text is `<digits>%`. An edit removes every other character. */\nconst nonDigits = /\\D/g;\n\n/** The last caret offset in `<digits>%`, the position in front of the `%`. */\nfunction caretLimit(text: string): number {\n  return Math.max(text.length - 1, 0);\n}\n\n/**\n * The part of the EyeDropper API that this component uses.\n *\n * The type is declared locally, because the API is not in the baseline DOM\n * typings. Firefox and Safari do not implement it.\n */\ninterface EyeDropperLike {\n  open(): Promise<{ sRGBHex: string }>;\n}\n\ntype EyeDropperConstructor = new () => EyeDropperLike;\n\n/** Returns the EyeDropper constructor, if the browser provides one. */\nfunction getEyeDropper(): EyeDropperConstructor | undefined {\n  return (globalThis as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n}\n\n/**\n * Color input component.\n *\n * The user picks a color with the HSV saturation/value canvas, the hue slider\n * and the optional alpha slider. The user can also type a color string: hex,\n * rgb(a), hsl(a) or a named CSS color.\n *\n * The component supports pre-defined swatches and the native EyeDropper API,\n * where the browser provides one. The anchor is a trigger button\n * (`mode=\"default\"`) or an editable text field (`mode=\"input\"`).\n *\n * @element igc-color-picker\n *\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n * @slot helper-text - Renders content below the picker.\n *\n * @fires igcOpening - Emitted just before the picker dropdown is open.\n * @fires igcOpened - Emitted after the picker dropdown is open.\n * @fires igcClosing - Emitted just before the picker dropdown is closed.\n * @fires igcClosed - Emitted after closing the picker dropdown.\n * @fires igcInput - Emitted when the value of the component is changed.\n * @fires igcChange - Emitted when the value of the component is committed.\n *\n * @csspart anchor - The trigger element that opens the picker (the button in default mode, or the swatch prefix in input mode).\n * @csspart empty - Applied alongside `anchor` when no color value is set, rendering a checkered background.\n * @csspart label - The label rendered above the anchor in default mode.\n * @csspart picker - The popover container holding the canvas, sliders, inputs and swatches.\n * @csspart main-row - The row containing the hue slider and the copy/eyedropper buttons.\n * @csspart alpha-row - The row containing the alpha slider and input, rendered when `show-alpha` is set.\n * @csspart inputs-row - The row containing the format select and the color value input.\n * @csspart buttons - The wrapper around the copy and eyedropper buttons.\n * @csspart hue - The hue slider.\n * @csspart alpha - The alpha slider.\n * @csspart copy - The button that copies the current color value to the clipboard.\n * @csspart eye-dropper - The button that activates the EyeDropper API.\n * @csspart format-select - The select control used to switch the color string format.\n * @csspart swatches - The container of the pre-defined color swatches.\n * @csspart swatch - An individual color swatch button.\n */\n@shadowOptions({ delegatesFocus: true })\nexport default class IgcColorPickerComponent extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<\n    IgcColorPickerComponentEventMap,\n    AbstractConstructor<IgcBaseComboBoxComponent>\n  >(IgcBaseComboBoxComponent)\n) {\n  public static readonly tagName = 'igc-color-picker';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcColorPickerComponent,\n      IgcInputComponent,\n      IgcPopoverComponent,\n      IgcFocusTrapComponent,\n      IgcSelectComponent,\n      IgcPickerCanvasComponent,\n      IgcDividerComponent,\n      IgcButtonComponent,\n      IgcIconButtonComponent,\n      IgcValidationContainerComponent,\n      IgcVisuallyHiddenComponent\n    );\n  }\n\n  //#region Internal state and properties\n\n  protected override get __validators() {\n    return colorPickerValidators;\n  }\n\n  protected readonly _slots = addSlotController(this, { slots: Slots });\n\n  protected override readonly _rootClickController = addRootClickController(\n    this,\n    {\n      onHide: this._handleClosing,\n    }\n  );\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: '',\n  });\n\n  private readonly _alphaRef = createRef<HTMLInputElement>();\n  private readonly _alphaInputRef = createRef<IgcInputComponent>();\n  private readonly _canvasRef = createRef<IgcPickerCanvasComponent>();\n  private readonly _hueRef = createRef<HTMLInputElement>();\n  private readonly _anchorRef = createRef<\n    HTMLButtonElement | IgcInputComponent\n  >();\n\n  private readonly _supportsEyeDropper = Boolean(getEyeDropper());\n  private _color = ColorModel.empty();\n  private _oldValue = '';\n\n  /** The last value written for each host custom property. */\n  private readonly _appliedProperties = new Map<string, string>();\n\n  @query('#helper-text')\n  private readonly _helperText!: IgcValidationContainerComponent | null;\n\n  private get _isInputMode(): boolean {\n    return this.mode === 'input';\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * The label of the component.\n   *\n   * In `mode=\"input\"` the component forwards the label to the anchor input.\n   * In `mode=\"default\"` it renders the label as a separate element.\n   * @attr label\n   */\n  @property()\n  public label?: string;\n\n  /**\n   * The value of the component as a CSS color string. Accepts hex, rgb(a),\n   * hsl(a) and named colors.\n   *\n   * An empty, whitespace-only or invalid string clears the value.\n   *\n   * @attr value\n   */\n  @property()\n  public set value(value: string) {\n    this._color = ColorModel.parse(value);\n    this._updateColor();\n  }\n\n  public get value(): string {\n    return this._formValue.value;\n  }\n\n  /**\n   * Sets the color format of the string value.\n   *\n   * A format change renders `value` in the new notation. The color does not\n   * change, so the component emits no `igcInput` or `igcChange`.\n   *\n   * @attr format\n   * @default 'hex'\n   */\n  @property()\n  public format: ColorFormat = 'hex';\n\n  /**\n   * Whether to hide the format picker buttons.\n   *\n   * @attr hide-formats\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-formats' })\n  public hideFormats = false;\n\n  /**\n   * Whether to show the alpha slider and input.\n   *\n   * @attr show-alpha\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-alpha' })\n  public showAlpha = false;\n\n  /**\n   * The mode of the color picker.\n   *\n   * In `\"default\"` mode the anchor is a trigger button. In `\"input\"` mode the\n   * anchor is an editable text field with a color swatch prefix. The prefix\n   * also opens the picker.\n   *\n   * @attr mode\n   * @default 'default'\n   */\n  @property({ reflect: true })\n  public mode: ColorPickerMode = 'default';\n\n  /**\n   * Pre-defined color strings. The component renders them as clickable\n   * swatches below the picker controls. A click on a swatch commits its color\n   * as the value.\n   */\n  @property({ attribute: false })\n  public swatches: string[] = [];\n\n  //#endregion\n\n  //#region Lifecycle\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addSafeEventListener(this, 'focusin', this._handleFocusIn);\n    addSafeEventListener(this, 'focusout', this._handleFocusOut);\n\n    addKeybindings(this, { skip: () => this.disabled })\n      .set(escapeKey, this._handleKeyboardClosing)\n      .set([altKey, arrowDown], this._handleAnchorClick)\n      .set([altKey, arrowUp], this._handleKeyboardClosing);\n\n    addKeybindings(this, {\n      skip: () => this.disabled || !this._alphaInputRef.value,\n      ref: this._alphaInputRef,\n      bindingDefaults: { repeat: true },\n    })\n      .set(arrowUp, () => this._handleAlphaInputSpin(1))\n      .set(arrowDown, () => this._handleAlphaInputSpin(-1))\n      .set(arrowRight, this._handleAlphaInputCaretForward, {\n        preventDefault: false,\n      })\n      .set(endKey, this._handleAlphaInputCaretForward, {\n        preventDefault: false,\n      });\n\n    addAriaProjector(this, {\n      target: () => (this._isInputMode ? this._anchorRef.value : null),\n      // A text input cannot have `aria-expanded`. The prefix button has it.\n      state: () => ({\n        hasPopup: 'dialog',\n        describedBy: this._helperText ? [this._helperText] : null,\n      }),\n      hasOwnLabel: () => Boolean(this.label),\n    });\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('open')) {\n      this._rootClickController.update();\n    }\n\n    if (this.hasUpdated && props.has('format')) {\n      this._formValue.setValueAndFormState(this._color.asString(this.format));\n    }\n\n    this._applyColorProperties();\n\n    super.update(props);\n  }\n\n  protected override updated(props: PropertyValues<this>): void {\n    super.updated(props);\n\n    if (props.has('open') || props.has('value')) {\n      // Wait for the paint, then sync the marker position with the color.\n      requestAnimationFrame(() => this._syncCanvasPosition());\n    }\n  }\n\n  //#endregion\n\n  //#region Form associated overrides\n\n  protected override formResetCallback(): void {\n    super.formResetCallback();\n\n    if (this._isInputMode) {\n      const input = this._anchorRef.value as IgcInputComponent;\n      input?.['formResetCallback']();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleClosing(): void {\n    this._hide(true);\n  }\n\n  private async _handleKeyboardClosing(): Promise<void> {\n    if (await this._hide(true)) {\n      this._anchorRef.value?.focus();\n    }\n  }\n\n  private _handleFocusIn(event: FocusEvent): void {\n    if (focusLeftHost(this, event)) {\n      this._oldValue = this._alphaColor;\n    }\n  }\n\n  private _handleFocusOut(event: FocusEvent): void {\n    if (!focusLeftHost(this, event)) {\n      return;\n    }\n\n    this._handleBlur();\n\n    if (this._alphaColor !== this._oldValue) {\n      this._oldValue = this._alphaColor;\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  private _handleCanvasColorPicked(\n    event: CustomEvent<PickerCanvasEventDetail>\n  ): void {\n    this._color.setSaturationAndValue(event.detail.x, 100 - event.detail.y);\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _handleHueValueChange(event: Event): void {\n    stopPropagation(event);\n\n    this._color.h = asNumber(this._hueRef.value?.value);\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _handleAlphaSliderValueChange(event: Event): void {\n    stopPropagation(event);\n\n    this._setAlpha(asNumber(this._alphaRef.value?.value));\n  }\n\n  /**\n   * Writes the alpha field again as `<digits>%` after each edit.\n   *\n   * @remarks\n   * The `%` is part of the value, not a suffix element, so the browser lets the\n   * user edit it. This handler corrects the result of an edit, and does not\n   * filter the keystrokes in `beforeinput`. The `%` is then a literal for each\n   * way that text reaches the field: typing, paste, drop, composition, undo and\n   * autofill. `beforeinput` carries `data` only for typing.\n   */\n  private _handleAlphaInputEdit(event: Event): void {\n    const input = this._alphaInputRef.value;\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n\n    if (!input || !native) return;\n\n    const caret = native.selectionStart ?? native.value.length;\n    const typed = native.value.slice(0, caret).replace(nonDigits, '').length;\n    const digits = native.value.replace(nonDigits, '');\n    const percent = clamp(asNumber(digits), 0, 100);\n\n    const text = digits ? `${percent}%` : '';\n\n    this._writeAlphaText(input, text, Math.min(typed, caretLimit(text)));\n\n    if (digits) {\n      this._setAlpha(percent);\n    }\n  }\n\n  /**\n   * Keeps the caret and the selection in the digits.\n   *\n   * @remarks\n   * The last `%` is a literal. Without this handler, the caret goes after the\n   * `%` on focus, on a click past the text, and when a shifted selection\n   * extends over it. The handler thus runs on `keyup`, `focusin` and `click`.\n   * The parse discards text after the `%`.\n   */\n  private _handleAlphaInputCaret(event: Event): void {\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n    if (!native) return;\n\n    const limit = caretLimit(native.value);\n\n    native.setSelectionRange(\n      Math.min(native.selectionStart ?? 0, limit),\n      Math.min(native.selectionEnd ?? 0, limit)\n    );\n  }\n\n  /**\n   * Steps the alpha by one percent.\n   *\n   * @remarks\n   * The step applies to the color, not to the text of the field, which keeps a\n   * held arrow key correct. The key downs repeat faster than a render, so the\n   * text can be stale.\n   *\n   * The handler writes the new text itself, so that the caret does not move. A\n   * value assignment puts the caret after the `%`, and a write from the render\n   * applies one frame late, which the user sees as a jump.\n   */\n  private _handleAlphaInputSpin(increment: -1 | 1): void {\n    const input = this._alphaInputRef.value;\n    const percent = clamp(this._alphaPercent + increment, 0, 100);\n\n    if (!input || percent === this._alphaPercent) return;\n\n    this._writeAlphaText(input, `${percent}%`);\n    this._setAlpha(percent);\n  }\n\n  /**\n   * Holds the caret at the `%`. Without this handler the caret steps past the\n   * `%`, and `keyup` pulls it back. This is the frame-late jump that\n   * {@link _handleAlphaInputSpin} describes.\n   */\n  private _handleAlphaInputCaretForward(event: KeyboardEvent): void {\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n    if (!native) return;\n\n    const limit = caretLimit(native.value);\n\n    if (isKey(event, endKey) || (native.selectionEnd ?? 0) >= limit) {\n      event.preventDefault();\n      native.setSelectionRange(limit, limit);\n    }\n  }\n\n  private _handleAlphaInputChange(event: CustomEvent<string>): void {\n    stopPropagation(event);\n\n    const input = event.target as IgcInputComponent;\n\n    if (!input.value) {\n      input.value = `${this._alphaPercent}%`;\n    }\n  }\n\n  private _handleFormatChange(\n    event: CustomEvent<IgcSelectItemComponent>\n  ): void {\n    stopPropagation(event);\n    this.format = event.detail.value as ColorFormat;\n  }\n\n  private _handleColorInputChange(event: CustomEvent<string>): void {\n    stopPropagation(event);\n\n    const input = event.target as IgcInputComponent;\n    const value = normalizeColor(event.detail);\n    const cleared = !value;\n\n    // An invalid and non-empty value reverts the input to the current color.\n    // An empty value clears the color.\n    if (!cleared && !isValidColor(value, getContext())) {\n      input.value = this._color.asString(this.format);\n      return;\n    }\n\n    this._color = cleared ? ColorModel.empty() : ColorModel.parse(value);\n    this._updateColor();\n    this._syncCanvasPosition();\n  }\n\n  private _handleEyeDropperClick(): void {\n    const EyeDropper = getEyeDropper();\n\n    if (!EyeDropper) return;\n\n    new EyeDropper()\n      .open()\n      .then((result) => {\n        this.value = result.sRGBHex;\n        this._emitInputEvent();\n      })\n      .catch(() => {});\n  }\n\n  private _handleCopy(): void {\n    navigator.clipboard?.writeText(this.value).catch(() => {});\n  }\n\n  private _handleSwatchClick(event: Event): void {\n    const swatch = getElementFromPath<HTMLButtonElement>(\n      'button[part=\"swatch\"]',\n      event\n    );\n    const color = swatch?.dataset.color;\n\n    if (color) {\n      this.value = color;\n      this._emitInputEvent();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  /**\n   * The current color with its alpha, in a notation that is independent of\n   * `format`.\n   */\n  private get _alphaColor(): string {\n    return this._color.asString('rgb', true);\n  }\n\n  /**\n   * The current color with an opaque alpha channel.\n   *\n   * @remarks\n   * The swatch preview paints this color on one half of its surface, and\n   * {@link _alphaColor} on the other half, which shows a translucent color next\n   * to its opaque form. At full alpha the two halves agree and the split is\n   * invisible, so an opaque color needs no separate branch.\n   *\n   * This value is defined also with no color. An empty color is white, which is\n   * where the alpha ramp and the canvas marker belong before the first pick.\n   * The anchor keeps its \"no color\" mark, because {@link _previewStyle} uses\n   * {@link _alphaColor}, which stays empty.\n   */\n  private get _opaqueColor(): string {\n    return new ColorModel(this._color.toRGB()).asString('rgb');\n  }\n\n  /** The alpha channel as the whole percentage that both alpha controls use. */\n  private get _alphaPercent(): number {\n    return Math.round(this._color.alpha * 100);\n  }\n\n  /** The pure hue that the saturation/value plane and the hue thumb use. */\n  private get _currentColor(): string {\n    return `hsl(${this._color.h} 100% 50%)`;\n  }\n\n  /**\n   * Copies the colors that the stylesheet needs onto the host.\n   *\n   * @remarks\n   * `update()` calls this, not the handlers that change the color, so it runs\n   * also for the first render. A picker with no value calls none of those\n   * handlers, and the plane would keep the stylesheet fallback.\n   */\n  private _applyColorProperties(): void {\n    const properties = {\n      '--_current-color': this._currentColor,\n      '--_selected-color': this._opaqueColor,\n    };\n\n    for (const [name, value] of Object.entries(properties)) {\n      if (this._appliedProperties.get(name) !== value) {\n        this._appliedProperties.set(name, value);\n        this.style.setProperty(name, value);\n      }\n    }\n  }\n\n  /**\n   * Replaces the whole text of the alpha field and puts the caret in front of\n   * the `%` by default.\n   */\n  private _writeAlphaText(\n    input: IgcInputComponent,\n    text: string,\n    caret = caretLimit(text)\n  ): void {\n    input.setRangeText(text, 0, input.value.length);\n    input.setSelectionRange(caret, caret);\n  }\n\n  private _setAlpha(percent: number): void {\n    const alpha = clamp(percent, 0, 100) / 100;\n\n    if (this._color.alpha === alpha) {\n      return;\n    }\n\n    this._color.alpha = alpha;\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _updateColor(): void {\n    this._formValue.setValueAndFormState(this._color.asString(this.format));\n    this.requestUpdate();\n  }\n\n  private _syncCanvasPosition(): void {\n    if (!this._canvasRef.value || !this.open) return;\n\n    const rect = this._canvasRef.value.getBoundingClientRect();\n    const { width: markerWidth, height: markerHeight } =\n      this._canvasRef.value.getMarkerDimensions();\n\n    const [, s, v] = this._color.toHSV();\n    const x = (s / 100) * rect.width - markerWidth;\n    const y = ((100 - v) / 100) * rect.height - markerHeight;\n\n    this._canvasRef.value.x = x;\n    this._canvasRef.value.y = y;\n  }\n\n  private _emitInputEvent(): void {\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  //#endregion\n\n  //#region Canvas area rendering\n\n  private _renderCanvasGradient(): TemplateResult {\n    const [, saturation, brightness] = this._color.toHSV();\n\n    return html`\n      <igc-picker-canvas\n        exportparts=\"marker, dragging\"\n        part=\"picker-canvas\"\n        ${ref(this._canvasRef)}\n        @igcColorPicked=${this._handleCanvasColorPicked}\n        currentColor=${this._currentColor}\n        markerColor=${this._opaqueColor}\n        .saturation=${saturation}\n        .brightness=${brightness}\n      >\n      </igc-picker-canvas>\n    `;\n  }\n\n  //#endregion\n\n  //#region Hue row and buttons rendering\n\n  private _renderHueSlider(): TemplateResult {\n    return html`\n      <input\n        ${ref(this._hueRef)}\n        aria-label=\"Hue\"\n        type=\"range\"\n        part=\"hue\"\n        min=\"0\"\n        max=\"360\"\n        .value=${String(Math.round(this._color.h))}\n        @input=${this._handleHueValueChange}\n        @change=${stopPropagation}\n      />\n    `;\n  }\n\n  private _renderIconButton(\n    part: string,\n    icon: string,\n    label: string,\n    handler: () => void,\n    disabled = false\n  ): TemplateResult {\n    return html`\n      <igc-icon-button\n        part=${part}\n        variant=\"flat\"\n        name=${icon}\n        ?disabled=${disabled}\n        @click=${handler}\n      >\n        <igc-visually-hidden>${label}</igc-visually-hidden>\n      </igc-icon-button>\n    `;\n  }\n\n  private _renderPickerButtons(): TemplateResult {\n    return html`\n      <div part=\"buttons\">\n        ${this._renderIconButton(\n          'copy',\n          'copy_content',\n          'Copy color value to clipboard',\n          this._handleCopy\n        )}\n        ${this._renderIconButton(\n          'eye-dropper',\n          'eye_dropper',\n          'Pick a color from the screen',\n          this._handleEyeDropperClick,\n          !this._supportsEyeDropper\n        )}\n      </div>\n    `;\n  }\n\n  //#endregion\n\n  //#region Alpha row rendering\n\n  private _renderAlphaRow(): TemplateResult {\n    return html`\n      <input\n        ${ref(this._alphaRef)}\n        aria-label=\"Alpha slider\"\n        type=\"range\"\n        part=\"alpha\"\n        min=\"0\"\n        max=\"100\"\n        .value=${String(this._alphaPercent)}\n        @input=${this._handleAlphaSliderValueChange}\n        @change=${stopPropagation}\n      />\n\n      <igc-visually-hidden>\n        <label for=\"alpha\">Alpha value</label>\n      </igc-visually-hidden>\n\n      <igc-input\n        ${ref(this._alphaInputRef)}\n        id=\"alpha\"\n        name=\"alpha\"\n        placeholder=\"Alpha value\"\n        inputmode=\"numeric\"\n        part=\"alpha-input\"\n        outlined\n        type=\"text\"\n        .value=${live(`${this._alphaPercent}%`)}\n        @input=${this._handleAlphaInputEdit}\n        @focusin=${this._handleAlphaInputCaret}\n        @click=${this._handleAlphaInputCaret}\n        @keyup=${this._handleAlphaInputCaret}\n        @igcChange=${this._handleAlphaInputChange}\n      ></igc-input>\n    `;\n  }\n\n  //#endregion\n\n  //#region Color formats and input row rendering\n\n  private _renderSelect(): TemplateResult {\n    return html`\n      <igc-visually-hidden>\n        <label for=\"format-select\">Color format</label>\n      </igc-visually-hidden>\n\n      <igc-select\n        id=\"format-select\"\n        part=\"format-select\"\n        placeholder=\"Color format\"\n        name=\"format\"\n        outlined\n        .value=${this.format}\n        @igcChange=${this._handleFormatChange}\n      >\n        <igc-select-item value=\"hex\">Hex</igc-select-item>\n        <igc-select-item value=\"rgb\">RGB</igc-select-item>\n        <igc-select-item value=\"hsl\">HSL</igc-select-item>\n      </igc-select>\n    `;\n  }\n\n  private _renderInputsRow(): TemplateResult {\n    return html`\n      ${cache(this.hideFormats ? nothing : this._renderSelect())}\n      <igc-visually-hidden>\n        <label for=\"color-input\"> Color value input </label>\n      </igc-visually-hidden>\n\n      <igc-input\n        id=\"color-input\"\n        name=\"color-input\"\n        placeholder=${formatPlaceholders[this.format]}\n        outlined\n        .value=${live(this._color.asString(this.format))}\n        @igcChange=${this._handleColorInputChange}\n      ></igc-input>\n    `;\n  }\n\n  //#endregion\n\n  //#region Swatches rendering\n\n  private _renderSwatches(): TemplateResult | typeof nothing {\n    return !isEmpty(this.swatches)\n      ? html`\n          <igc-divider></igc-divider>\n          <div part=\"swatches\" @click=${this._handleSwatchClick}>\n            ${this.swatches.map(\n              (color) => html`\n                <button\n                  type=\"button\"\n                  part=\"swatch\"\n                  data-color=${color}\n                  aria-label=${color}\n                  style=\"background-color: ${color}\"\n                ></button>\n              `\n            )}\n          </div>\n        `\n      : nothing;\n  }\n\n  //#endregion\n\n  //#region Anchor rendering\n\n  private get _anchorParts(): ReturnType<typeof partMap> {\n    return partMap({\n      anchor: true,\n      empty: this._color.isEmpty,\n      'input-mode': this._isInputMode,\n    });\n  }\n\n  /**\n   * The swatch preview style that both anchors use.\n   *\n   * `--_color-preview` paints the opaque color over the left half.\n   * `--_alpha-preview` paints the color with its real alpha over the whole\n   * surface. Do not transpose the two. See the `swatch-preview` mixin.\n   */\n  private _previewStyle(): ReturnType<typeof styleMap> {\n    const color = this._alphaColor;\n\n    return bindIf(\n      color,\n      styleMap({\n        '--_alpha-preview': color,\n        '--_color-preview': this._opaqueColor,\n      })\n    );\n  }\n\n  private _renderButtonAnchor(): TemplateResult {\n    return html`\n      <button\n        ${ref(this._anchorRef)}\n        ${ariaBindings(resolveNaming(this, Boolean(this.label)))}\n        id=\"trigger\"\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-controls=\"picker\"\n        aria-expanded=${this.open}\n        aria-describedby=\"helper-text\"\n        part=${this._anchorParts}\n        slot=\"anchor\"\n        style=${this._previewStyle()}\n        ?disabled=${this.disabled}\n        @click=${this._handleAnchorClick}\n      >\n        <igc-visually-hidden>Open color picker</igc-visually-hidden>\n      </button>\n    `;\n  }\n\n  private _renderInputAnchor(): TemplateResult {\n    return html`\n      <igc-input\n        ${ref(this._anchorRef)}\n        slot=\"anchor\"\n        outlined\n        placeholder=${formatPlaceholders[this.format]}\n        label=${ifDefined(this.label)}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        .value=${live(this.value)}\n        .invalid=${this.invalid}\n        @igcChange=${this._handleColorInputChange}\n      >\n        <div slot=\"prefix\">\n          <button\n            type=\"button\"\n            part=${this._anchorParts}\n            aria-label=\"Open color picker\"\n            aria-haspopup=\"dialog\"\n            aria-controls=\"picker\"\n            aria-expanded=${this.open}\n            style=${this._previewStyle()}\n            ?disabled=${this.disabled}\n            @click=${this._handleAnchorClick}\n          ></button>\n        </div>\n      </igc-input>\n    `;\n  }\n\n  private _renderAnchor(): TemplateResult {\n    return this._isInputMode\n      ? this._renderInputAnchor()\n      : this._renderButtonAnchor();\n  }\n\n  private _renderHelperText(): TemplateResult {\n    return IgcValidationContainerComponent.create(this, {\n      id: 'helper-text',\n      hasHelperText: true,\n    });\n  }\n\n  //#endregion\n\n  private _renderPicker(): TemplateResult {\n    return html`\n      <igc-focus-trap ?disabled=${!this.open} .inert=${!this.open}>\n        <div\n          id=\"picker\"\n          part=\"picker\"\n          role=\"dialog\"\n          aria-label=\"Color picker\"\n          aria-modal=\"false\"\n        >\n          ${this._renderCanvasGradient()}\n          <div part=\"main-row\">\n            ${this._renderHueSlider()}${this._renderPickerButtons()}\n          </div>\n          ${\n            this.showAlpha\n              ? html`<div part=\"alpha-row\">${this._renderAlphaRow()}</div>`\n              : nothing\n          }\n          <div part=\"inputs-row\">${this._renderInputsRow()}</div>\n          ${this._renderSwatches()}\n        </div>\n      </igc-focus-trap>\n    `;\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      <div part=\"color-picker\">\n        <igc-popover\n          ?open=${this.open}\n          flip\n          .scrollStrategy=${this.scrollStrategy}\n          @igcPopoverScrollClose=${this._handleClosing}\n        >\n          ${this._renderAnchor()}${this._renderPicker()}\n        </igc-popover>\n        ${\n          !this._isInputMode && this.label\n            ? html`<label part=\"label\" for=\"trigger\">${this.label}</label>`\n            : nothing\n        }\n        ${this._renderHelperText()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-color-picker': IgcColorPickerComponent;\n  }\n}\n"]}

package/components/combo/combo.d.ts

@@ -272,9 +272,11 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      */
     private _resolveItemValue;
     /**
-     * Maps data records to their value representations - the `valueKey` property
-     * of each, or the record itself when no `valueKey` is set.
+     * The value representation of a data record: its `valueKey` property, or the
+     * record when that property is not set.
      */
+    private _valueOf;
+    /** Maps data records to their value representations. See {@link _valueOf}. */
     private _toValues;
     /**
      * Recomputes {@link _displayValue} from the current selection and returns its
@@ -315,8 +317,8 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      * "select everything".
      */
     private _recordAt;
-    private _toggleSelection;
-    private _selectByIndex;
+    /** Selects the record at `index`. With `toggle`, deselects a selected one. */
+    private _selectAt;
     private _clearSelection;
     private _clearSingleSelection;
     protected _handleMainInput({ detail, }: CustomEvent<string>): Promise<void>;