@esri/calcite-components 2.12.0 → 2.13.0-next.1

package/dist/calcite/p-97413600.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colorPickerCss","CalciteColorPickerStyle0","throttleFor60FpsInMs","ColorPicker","this","internalColorUpdateContext","isActiveChannelInputEmpty","mode","CSSColorMode","HEX","shiftKeyChannelAdjustment","upOrDownArrowKeyTracker","handleTabActivate","event","channelMode","currentTarget","getAttribute","updateChannelsFromColor","color","handleColorFieldScopeKeyDown","key","arrowKeyToXYOffset","ArrowUp","x","y","ArrowRight","ArrowDown","ArrowLeft","preventDefault","scopeOrientation","captureColorFieldColor","colorFieldScopeLeft","colorFieldScopeTop","handleHueScopeKeyDown","modifier","shiftKey","arrowKeyToXOffset","delta","hue","baseColorFieldColor","internalColorSet","handleHexInputChange","stopPropagation","isClearable","input","target","hex","value","normalizedHex","normalizeHex","hexify","alphaCompatible","Color","handleSavedColorSelect","swatch","handleChannelInput","channelIndex","Number","isAlphaChannel","limit","OPACITY_LIMITS","max","RGB_LIMITS","Object","keys","HSV_LIMITS","inputValue","adjustedValue","clamped","clamp","toString","handleChannelChange","handleChannelBlur","channels","restoreValueDueToEmptyInput","handleChannelFocus","selectText","shouldClearChannels","getChannelInputLimit","opacityToAlpha","updateColorFromChannels","handleSavedColorKeyDown","isActivationKey","handleColorFieldPointerDown","handleCanvasControlPointerDown","colorFieldRenderingContext","colorFieldScopeNode","handleHueSliderPointerDown","hueSliderRenderingContext","captureHueSliderColor","hueScopeNode","handleOpacitySliderPointerDown","opacitySliderRenderingContext","captureOpacitySliderValue","opacityScopeNode","globalPointerUpHandler","isPrimaryPointerButton","previouslyDragging","activeCanvasInfo","drawColorControls","calciteColorPickerChange","emit","globalPointerMoveHandler","el","isConnected","context","bounds","samplingX","samplingY","clientX","clientY","canvas","matches","width","height","storeColorFieldScope","node","storeHueScope","renderChannelsTabTitle","activeChannelMode","messages","selected","label","rgb","hsv","h","class","CSS","colorMode","onCalciteTabsActivate","renderChannelsTab","alphaChannel","isRgb","channelAriaLabels","red","green","blue","saturation","direction","getElementDir","channelsToRender","slice","control","dir","map","channelValue","index","alphaToOpacity","renderChannel","ariaLabel","suffix","channel","lang","effectiveLocale","numberButtonType","numberingSystem","onCalciteInputNumberChange","onCalciteInputNumberInput","onCalciteInternalInputNumberBlur","onCalciteInternalInputNumberFocus","onKeyDown","handleKeyDown","scale","style","marginLeft","suffixText","deleteColor","colorToDelete","inStorage","savedColors","indexOf","filter","storageKey","DEFAULT_STORAGE_KEY_PREFIX","storageId","localStorage","setItem","JSON","stringify","saveColor","colorToSave","alreadySaved","throttle","type","drawColorField","drawHueSlider","drawOpacitySlider","skipEqual","dimensions","colorField","Math","round","s","v","saturationv","initColorField","getContext","updateCanvasSize","initHueSlider","initOpacitySlider","storeOpacityScope","handleOpacityScopeKeyDown","alpha","DEFAULT_COLOR","toChannels","DIMENSIONS","m","handleAllowEmptyOrClearableChange","clearable","allowEmpty","handleAlphaChannelChange","format","console","warn","handleAlphaChannelDimensionsChange","effectiveSliderWidth","getSliderWidth","handleColorChange","oldColor","previousColor","handleFormatOrAlphaChannelChange","setMode","handleScaleChange","updateDimensions","onMessagesChange","handleValueChange","oldValue","checkMode","modeChanged","nextMode","parseMode","showIncompatibleColorWarning","dragging","calciteColorPickerInput","normalizeColor","colorChanged","colorEqual","endsWith","effectiveLocaleChange","updateMessages","handleChannelKeyUpOrDown","composedPath","some","classList","contains","complementaryBump","focusScope","focusEl","requestAnimationFrame","focus","renderingContext","captureValue","scopeNode","window","addEventListener","once","getBoundingClientRect","call","offsetX","offsetY","setFocus","componentFocusable","focusFirstTabbable","componentWillLoad","setUpLoadableComponent","willSetNoColor","parsedMode","valueIsCompatible","initialColor","getItem","parse","setUpMessages","connectedCallback","connectLocalized","connectMessages","componentDidLoad","setComponentLoaded","disconnectedCallback","removeEventListener","disconnectLocalized","disconnectMessages","componentDidRender","updateHostInteraction","render","channelsDisabled","thumb","radius","thumbRadius","hexDisabled","hideChannels","hideHex","hideSaved","hueScopeLeft","opacityScopeLeft","savedDisabled","sliderWidth","selectedColorInHex","hueTop","hueLeft","opacityTop","opacityLeft","noColor","vertical","noHex","noChannels","noSaved","adjustedColorFieldScopeLeft","adjustedColorFieldScopeTop","getAdjustedScopePosition","adjustedHueScopeLeft","adjustedHueScopeTop","adjustedOpacityScopeLeft","adjustedOpacityScopeTop","InteractiveContainer","disabled","container","controlAndScope","onPointerDown","ref","scope","colorFieldScope","role","top","left","tabindex","previewAndSliders","preview","sliders","slider","hueSlider","hueScope","opacitySlider","opacity","min","opacityScope","controlSection","section","hexAndChannelsGroup","hexOptions","onCalciteColorPickerHexInputChange","colorModeContainer","splitSection","slot","savedColorsSection","header","saved","savedColorsButtons","appearance","iconStart","kind","onClick","length","savedColor","tabIndex","ensureCompatibleMode","isAlphaCompatible","alphaMode","toAlphaMode","nonAlphaMode","toNonAlphaMode","HUE_LIMIT_CONSTRAINED","toValue","hexMode","includes","hasAlpha","HEXA","replace","string","needToInjectAlpha","model","values","colorObject","object","normalizeAlpha","getSliderCapSpacing","fillStyle","fillRect","whiteGradient","createLinearGradient","addColorStop","blackGradient","drawActiveColorFieldColor","setCanvasContextSize","devicePixelRatio","adjustedSliderDimensions","hsvColor","drawThumb","applyAlpha","startAngle","endAngle","PI","outlineWidth","beginPath","arc","fill","strokeStyle","lineWidth","stroke","pattern","createPattern","getCheckeredBackgroundPattern","globalCompositeOperation","drawActiveHueSliderColor","sliderBoundX","getSliderBoundX","gradient","hueSliderColorStopKeywords","offset","currentOffset","forEach","keyword","clearRect","drawSliderPath","startColor","midColor","endColor","drawActiveOpacitySliderColor","moveTo","lineTo","quadraticCurveTo","closePath","checkerPattern","document","createElement","patternContext","closeToEdge","closeToRangeEdge","remap","array","isAlpha","floor","push","SCOPE_SIZE","hexInput","opacityInput","colorPickerHexInputCss","CalciteColorPickerHexInputStyle0","ColorPickerHexInput","onHexInputBlur","hexInputNode","internalColor","willClearValue","isLonghand","isLonghandHex","isShorthandHex","onHexInputChange","isValidHex","formatHexForInternalInput","rgbToHex","onOpacityInputBlur","opacityInputNode","formatOpacityForInternalInput","onOpacityInputInput","onOpacityInputChange","nodeValue","normalized","preserveExistingAlpha","alphaHex","hexa","internalSetValue","onInputFocus","onHexInputInput","hexInputValue","onInputKeyDown","altKey","ctrlKey","metaKey","isNudgeKey","previousNonNullValue","bump","nudgeRGBChannels","withModifiers","singleChar","validHexChar","hexChar","test","onHexInputPaste","clipboardData","getData","storeHexInputRef","storeOpacityInputRef","hexLabel","opacityInputValue","inputScale","maxLength","onCalciteInputTextChange","onCalciteInputTextInput","onCalciteInternalInputTextBlur","onCalciteInternalInputTextFocus","onPaste","prefixText","focusElement","currentColor","nextColor","normalizedLonghand","changed","calciteColorPickerHexInputChange","amount","nudgedChannels","rgbChannels","nudgedRGBChannels","undefined","nudgedAlpha","noColorSwatch","checker","COLORS","borderLight","borderDark","checkerSquareSize","CHECKER_DIMENSIONS","squareSize","size","colorPickerSwatchCss","CalciteColorPickerSwatchStyle0","ColorPickerSwatch","isEmpty","classes","xmlns","renderSwatch","active","borderRadius","theme","getModeName","borderColor","commonSwatchProps","rx","Fragment","id","x1","x2","y1","y2","patternUnits"],"sources":["src/components/color-picker/color-picker.scss?tag=calcite-color-picker&encapsulation=shadow","src/components/color-picker/color-picker.tsx","src/components/color-picker-hex-input/resources.ts","src/components/color-picker-hex-input/color-picker-hex-input.scss?tag=calcite-color-picker-hex-input&encapsulation=shadow","src/components/color-picker-hex-input/color-picker-hex-input.tsx","src/components/color-picker-swatch/resources.ts","src/components/color-picker-swatch/color-picker-swatch.scss?tag=calcite-color-picker-swatch&encapsulation=shadow","src/components/color-picker-swatch/color-picker-swatch.tsx"],"sourcesContent":[":host {\n  @apply text-n2h inline-block font-normal;\n}\n\n@include disabled();\n\n:host([scale=\"s\"]) {\n  --calcite-color-picker-spacing: 8px;\n\n  .container {\n    inline-size: 160px;\n  }\n\n  .saved-colors {\n    @apply gap-1;\n    grid-template-columns: repeat(auto-fill, 20px);\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-color-picker-spacing: 12px;\n\n  .container {\n    inline-size: 272px;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-color-picker-spacing: 16px;\n\n  @apply text-n1h;\n\n  .container {\n    inline-size: 464px;\n  }\n\n  .section {\n    &:first-of-type {\n      padding-block-start: var(--calcite-color-picker-spacing);\n    }\n  }\n\n  .saved-colors {\n    grid-template-columns: repeat(auto-fill, 32px);\n  }\n\n  .control-section {\n    @apply flex-nowrap items-baseline;\n  }\n\n  .control-section {\n    @apply flex-wrap;\n  }\n\n  .color-hex-options {\n    @apply flex\n      flex-shrink\n      flex-col\n      justify-around;\n  }\n\n  .color-mode-container {\n    flex-shrink: 3;\n  }\n}\n\n.container {\n  @apply bg-foreground-1;\n  display: inline-block;\n  border: 1px solid var(--calcite-color-border-1);\n}\n\n.control-and-scope {\n  @apply flex relative cursor-pointer touch-none;\n}\n\n.color-field,\n.control-and-scope {\n  user-select: none;\n}\n\n.scope {\n  @apply text-n1\n    focus-base\n    absolute\n    z-default\n    rounded-full\n    bg-transparent\n    w-px\n    h-px\n    pointer-events-none;\n  &:focus {\n    @apply focus-outset;\n    outline-offset: 6px;\n  }\n}\n\n.hex-and-channels-group {\n  @apply w-full;\n}\n\n.hex-and-channels-group,\n.control-section {\n  @apply flex flex-row flex-wrap;\n}\n\n.section {\n  padding-block: 0 var(--calcite-color-picker-spacing);\n  padding-inline: var(--calcite-color-picker-spacing);\n\n  &:first-of-type {\n    padding-block-start: var(--calcite-color-picker-spacing);\n  }\n}\n\n.sliders {\n  @apply flex flex-col justify-between;\n  margin-inline-start: var(--calcite-color-picker-spacing);\n  gap: var(--calcite-spacing-xxs);\n}\n\n.preview-and-sliders {\n  @apply flex items-center;\n  padding: var(--calcite-color-picker-spacing);\n}\n\n.color-hex-options,\n.section--split {\n  flex-grow: 1;\n}\n\n.header {\n  @apply text-color-1\n    flex\n    items-center\n    justify-between;\n}\n\n.color-mode-container {\n  padding-block-start: var(--calcite-color-picker-spacing);\n}\n\n.channels {\n  @apply flex gap-y-0.5;\n}\n\n.channel {\n  &[data-channel-index=\"3\"] {\n    inline-size: 159px;\n  }\n}\n\n:host([scale=\"s\"]) {\n  .channels {\n    @apply flex-wrap;\n  }\n\n  .channel {\n    flex-basis: 30%;\n    flex-grow: 1;\n\n    &[data-channel-index=\"3\"] {\n      inline-size: unset;\n      margin-inline-start: unset;\n    }\n  }\n}\n\n:host([scale=\"l\"]) {\n  .channel {\n    &[data-channel-index=\"3\"] {\n      inline-size: 131px;\n    }\n  }\n}\n\n.saved-colors {\n  @apply grid gap-2;\n  padding-block-start: var(--calcite-color-picker-spacing);\n  grid-template-columns: repeat(auto-fill, 24px);\n}\n\n.saved-colors-buttons {\n  display: flex;\n}\n\n.saved-color {\n  @include focus-style-base();\n\n  cursor: pointer;\n\n  &:focus {\n    @include focus-style-outset();\n  }\n\n  &:hover {\n    transition: outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;\n    outline: 2px solid var(--calcite-color-border-2);\n    outline-offset: 2px;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Color from \"color\";\nimport { throttle } from \"lodash-es\";\nimport {\n  Direction,\n  focusFirstTabbable,\n  getElementDir,\n  isPrimaryPointerButton,\n} from \"../../utils/dom\";\nimport { Scale } from \"../interfaces\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport { clamp, closeToRangeEdge, remap } from \"../../utils/math\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  alphaCompatible,\n  alphaToOpacity,\n  colorEqual,\n  CSSColorMode,\n  Format,\n  getSliderWidth,\n  hexify,\n  normalizeAlpha,\n  normalizeColor,\n  normalizeHex,\n  opacityToAlpha,\n  parseMode,\n  SupportedMode,\n  toAlphaMode,\n  toNonAlphaMode,\n} from \"./utils\";\nimport {\n  CSS,\n  DEFAULT_COLOR,\n  DEFAULT_STORAGE_KEY_PREFIX,\n  DIMENSIONS,\n  HSV_LIMITS,\n  HUE_LIMIT_CONSTRAINED,\n  OPACITY_LIMITS,\n  RGB_LIMITS,\n  SCOPE_SIZE,\n} from \"./resources\";\nimport { Channels, ColorMode, ColorValue, HSLA, HSVA, InternalColor, RGBA } from \"./interfaces\";\nimport { ColorPickerMessages } from \"./assets/color-picker/t9n\";\n\nconst throttleFor60FpsInMs = 16;\n\n@Component({\n  tag: \"calcite-color-picker\",\n  styleUrl: \"color-picker.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ColorPicker\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, an empty color (`null`) will be allowed as a `value`.\n   *\n   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.\n   *\n   * @deprecated Use `clearable` instead\n   */\n  @Prop({ reflect: true }) allowEmpty = false;\n\n  @Watch(\"allowEmpty\")\n  @Watch(\"clearable\")\n  handleAllowEmptyOrClearableChange(): void {\n    this.isClearable = this.clearable || this.allowEmpty;\n  }\n\n  /**\n   * When `true`, the component will allow updates to the color's alpha value.\n   */\n  @Prop() alphaChannel = false;\n\n  @Watch(\"alphaChannel\")\n  handleAlphaChannelChange(alphaChannel: boolean): void {\n    const { format } = this;\n\n    if (alphaChannel && format !== \"auto\" && !alphaCompatible(format)) {\n      console.warn(\n        `ignoring alphaChannel as the current format (${format}) does not support alpha`,\n      );\n      this.alphaChannel = false;\n    }\n  }\n\n  @Watch(\"alphaChannel\")\n  @Watch(\"dimensions\")\n  handleAlphaChannelDimensionsChange(): void {\n    this.effectiveSliderWidth = getSliderWidth(this.dimensions, this.alphaChannel);\n    this.drawColorControls();\n  }\n\n  /** When `true`, hides the RGB/HSV channel inputs. */\n  @Prop() channelsDisabled = false;\n\n  /**\n   * When `true`, an empty color (`null`) will be allowed as a `value`.\n   *\n   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.\n   */\n  @Prop({ reflect: true }) clearable = false;\n\n  /**\n   * Internal prop for advanced use-cases.\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) color: InternalColor | null = DEFAULT_COLOR;\n\n  @Watch(\"color\")\n  handleColorChange(color: Color | null, oldColor: Color | null): void {\n    this.drawColorControls();\n    this.updateChannelsFromColor(color);\n    this.previousColor = oldColor;\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The format of `value`.\n   *\n   * When `\"auto\"`, the format will be inferred from `value` when set.\n   *\n   * @default \"auto\"\n   */\n  @Prop({ reflect: true }) format: Format = \"auto\";\n\n  @Watch(\"alphaChannel\")\n  @Watch(\"format\")\n  handleFormatOrAlphaChannelChange(): void {\n    this.setMode(this.format);\n    this.internalColorSet(this.color, false, \"internal\");\n  }\n\n  /**\n   * When `true`, hides the RGB/HSV channel inputs.\n   *\n   * @deprecated use `channelsDisabled` instead\n   */\n  @Prop({ reflect: true }) hideChannels = false;\n\n  /** When `true`, hides the hex input. */\n  @Prop() hexDisabled = false;\n\n  /**\n   * When `true`, hides the hex input.\n   *\n   * @deprecated use `hexDisabled` instead\n   */\n  @Prop({ reflect: true }) hideHex = false;\n\n  /**\n   * When `true`, hides the saved colors section.\n   *\n   * @deprecated use `savedDisabled` instead\n   */\n  @Prop({ reflect: true }) hideSaved = false;\n\n  /** When `true`, hides the saved colors section. */\n  @Prop({ reflect: true }) savedDisabled = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"scale\")\n  handleScaleChange(scale: Scale = \"m\"): void {\n    this.updateDimensions(scale);\n    this.updateCanvasSize(\"all\");\n    this.drawColorControls();\n  }\n\n  /** Specifies the storage ID for colors. */\n  @Prop({ reflect: true }) storageId: string;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ColorPickerMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop({ reflect: true }) numberingSystem: NumberingSystem;\n\n  /**\n   * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.\n   *\n   * The type will be preserved as the color is updated.\n   *\n   * @default \"#007ac2\"\n   * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\n   * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/dev/src/components/color-picker/interfaces.ts#L10)\n   */\n  @Prop({ mutable: true }) value: ColorValue | null = normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n  );\n\n  @Watch(\"value\")\n  handleValueChange(value: ColorValue | null, oldValue: ColorValue | null): void {\n    const { isClearable, format } = this;\n    const checkMode = !isClearable || value;\n    let modeChanged = false;\n\n    if (checkMode) {\n      const nextMode = parseMode(value);\n\n      if (!nextMode || (format !== \"auto\" && nextMode !== format)) {\n        this.showIncompatibleColorWarning(value, format);\n        this.value = oldValue;\n        return;\n      }\n\n      modeChanged = this.mode !== nextMode;\n      this.setMode(nextMode, this.internalColorUpdateContext === null);\n    }\n\n    const dragging = this.activeCanvasInfo;\n\n    if (this.internalColorUpdateContext === \"initial\") {\n      return;\n    }\n\n    if (this.internalColorUpdateContext === \"user-interaction\") {\n      this.calciteColorPickerInput.emit();\n\n      if (!dragging) {\n        this.calciteColorPickerChange.emit();\n      }\n      return;\n    }\n\n    const color =\n      isClearable && !value\n        ? null\n        : Color(\n            value != null && typeof value === \"object\" && alphaCompatible(this.mode)\n              ? normalizeColor(value as RGBA | HSVA | HSLA)\n              : value,\n          );\n    const colorChanged = !colorEqual(color, this.color);\n\n    if (modeChanged || colorChanged) {\n      this.internalColorSet(\n        color,\n        this.alphaChannel && !(this.mode.endsWith(\"a\") || this.mode.endsWith(\"a-css\")),\n        \"internal\",\n      );\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerElement;\n\n  private activeCanvasInfo: {\n    context: CanvasRenderingContext2D;\n    bounds: DOMRect;\n  };\n\n  private get baseColorFieldColor(): Color {\n    return this.color || this.previousColor || DEFAULT_COLOR;\n  }\n\n  private checkerPattern: HTMLCanvasElement;\n\n  private colorFieldRenderingContext: CanvasRenderingContext2D;\n\n  private colorFieldScopeNode: HTMLDivElement;\n\n  private effectiveSliderWidth: number;\n\n  private hueSliderRenderingContext: CanvasRenderingContext2D;\n\n  private hueScopeNode: HTMLDivElement;\n\n  private internalColorUpdateContext: \"internal\" | \"initial\" | \"user-interaction\" | null = null;\n\n  private isActiveChannelInputEmpty: boolean = false;\n\n  private isClearable: boolean;\n\n  private mode: SupportedMode = CSSColorMode.HEX;\n\n  private opacityScopeNode: HTMLDivElement;\n\n  private opacitySliderRenderingContext: CanvasRenderingContext2D;\n\n  private previousColor: InternalColor | null;\n\n  private shiftKeyChannelAdjustment = 0;\n\n  private upOrDownArrowKeyTracker: \"down\" | \"up\" | null = null;\n\n  @State() channelMode: ColorMode = \"rgb\";\n\n  @State() channels: Channels = this.toChannels(DEFAULT_COLOR);\n\n  @State() defaultMessages: ColorPickerMessages;\n\n  @State() dimensions = DIMENSIONS.m;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ColorPickerMessages;\n\n  @State() savedColors: string[] = [];\n\n  @State() colorFieldScopeTop: number;\n\n  @State() colorFieldScopeLeft: number;\n\n  @State() hueScopeLeft: number;\n\n  @State() opacityScopeLeft: number;\n\n  @State() scopeOrientation: \"vertical\" | \"horizontal\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the color value has changed.\n   */\n  @Event({ cancelable: false }) calciteColorPickerChange: EventEmitter<void>;\n\n  /**\n   * Fires as the color value changes.\n   *\n   * Similar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.\n   */\n  @Event({ cancelable: false }) calciteColorPickerInput: EventEmitter<void>;\n\n  private handleTabActivate = (event: Event): void => {\n    this.channelMode = (event.currentTarget as HTMLElement).getAttribute(\n      \"data-color-mode\",\n    ) as ColorMode;\n\n    this.updateChannelsFromColor(this.color);\n  };\n\n  private handleColorFieldScopeKeyDown = (event: KeyboardEvent): void => {\n    const { key } = event;\n    const arrowKeyToXYOffset = {\n      ArrowUp: { x: 0, y: -10 },\n      ArrowRight: { x: 10, y: 0 },\n      ArrowDown: { x: 0, y: 10 },\n      ArrowLeft: { x: -10, y: 0 },\n    };\n\n    if (arrowKeyToXYOffset[key]) {\n      event.preventDefault();\n      this.scopeOrientation = key === \"ArrowDown\" || key === \"ArrowUp\" ? \"vertical\" : \"horizontal\";\n      this.captureColorFieldColor(\n        this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0,\n        this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0,\n        false,\n      );\n    }\n  };\n\n  private handleHueScopeKeyDown = (event: KeyboardEvent): void => {\n    const modifier = event.shiftKey ? 10 : 1;\n    const { key } = event;\n    const arrowKeyToXOffset = {\n      ArrowUp: 1,\n      ArrowRight: 1,\n      ArrowDown: -1,\n      ArrowLeft: -1,\n    };\n\n    if (arrowKeyToXOffset[key]) {\n      event.preventDefault();\n      const delta = arrowKeyToXOffset[key] * modifier;\n      const hue = this.baseColorFieldColor.hue();\n      const color = this.baseColorFieldColor.hue(hue + delta);\n      this.internalColorSet(color, false);\n    }\n  };\n\n  private handleHexInputChange = (event: Event): void => {\n    event.stopPropagation();\n    const { isClearable, color } = this;\n    const input = event.target as HTMLCalciteColorPickerHexInputElement;\n    const hex = input.value;\n\n    if (isClearable && !hex) {\n      this.internalColorSet(null);\n      return;\n    }\n\n    const normalizedHex = color && normalizeHex(hexify(color, alphaCompatible(this.mode)));\n\n    if (hex !== normalizedHex) {\n      this.internalColorSet(Color(hex));\n    }\n  };\n\n  private handleSavedColorSelect = (event: Event): void => {\n    const swatch = event.currentTarget as HTMLCalciteColorPickerSwatchElement;\n    this.internalColorSet(Color(swatch.color));\n  };\n\n  private handleChannelInput = (event: CustomEvent): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    const channelIndex = Number(input.getAttribute(\"data-channel-index\"));\n    const isAlphaChannel = channelIndex === 3;\n\n    const limit = isAlphaChannel\n      ? OPACITY_LIMITS.max\n      : this.channelMode === \"rgb\"\n        ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]\n        : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];\n\n    let inputValue: string;\n\n    if (!input.value) {\n      inputValue = \"\";\n      this.isActiveChannelInputEmpty = true;\n      // reset this to allow typing in new value, when channel input is cleared after ArrowUp or ArrowDown have been pressed\n      this.upOrDownArrowKeyTracker = null;\n    } else {\n      const value = Number(input.value);\n      const adjustedValue = value + this.shiftKeyChannelAdjustment;\n      const clamped = clamp(adjustedValue, 0, limit);\n\n      inputValue = clamped.toString();\n    }\n\n    input.value = inputValue;\n\n    if (inputValue !== \"\" && this.shiftKeyChannelAdjustment !== 0) {\n      // we treat nudging as a change event since the input won't emit when modifying the value directly\n      this.handleChannelChange(event);\n    } else if (inputValue !== \"\") {\n      this.handleChannelChange(event);\n    }\n  };\n\n  private handleChannelBlur = (event: CustomEvent): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    const channelIndex = Number(input.getAttribute(\"data-channel-index\"));\n    const channels = [...this.channels] as this[\"channels\"];\n    const restoreValueDueToEmptyInput = !input.value && !this.isClearable;\n\n    if (restoreValueDueToEmptyInput) {\n      input.value = channels[channelIndex]?.toString();\n    }\n  };\n\n  handleChannelFocus = (event: Event): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    input.selectText();\n  };\n\n  // using @Listen as a workaround for VDOM listener not firing\n  @Listen(\"keydown\", { capture: true })\n  @Listen(\"keyup\", { capture: true })\n  protected handleChannelKeyUpOrDown(event: KeyboardEvent): void {\n    this.shiftKeyChannelAdjustment = 0;\n    const { key } = event;\n\n    if (\n      (key !== \"ArrowUp\" && key !== \"ArrowDown\") ||\n      !event.composedPath().some((node: HTMLElement) => node.classList?.contains(CSS.channel))\n    ) {\n      return;\n    }\n\n    const { shiftKey } = event;\n    event.preventDefault();\n\n    if (!this.color) {\n      this.internalColorSet(this.previousColor);\n      event.stopPropagation();\n      return;\n    }\n\n    // this gets applied to the input's up/down arrow increment/decrement\n    const complementaryBump = 9;\n\n    this.shiftKeyChannelAdjustment =\n      key === \"ArrowUp\" && shiftKey\n        ? complementaryBump\n        : key === \"ArrowDown\" && shiftKey\n          ? -complementaryBump\n          : 0;\n\n    if (key === \"ArrowUp\") {\n      this.upOrDownArrowKeyTracker = \"up\";\n    }\n    if (key === \"ArrowDown\") {\n      this.upOrDownArrowKeyTracker = \"down\";\n    }\n  }\n\n  private getChannelInputLimit(channelIndex: number): number {\n    return this.channelMode === \"rgb\"\n      ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]\n      : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];\n  }\n\n  private handleChannelChange = (event: CustomEvent): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    const channelIndex = Number(input.getAttribute(\"data-channel-index\"));\n    const channels = [...this.channels] as this[\"channels\"];\n\n    const shouldClearChannels = this.isClearable && !input.value;\n\n    if (shouldClearChannels) {\n      this.channels = [null, null, null, null];\n      this.internalColorSet(null);\n      return;\n    }\n\n    const isAlphaChannel = channelIndex === 3;\n\n    if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {\n      input.value =\n        this.upOrDownArrowKeyTracker === \"up\"\n          ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex)\n              ? channels[channelIndex] + 1\n              : this.getChannelInputLimit(channelIndex)\n            ).toString()\n          : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();\n      this.isActiveChannelInputEmpty = false;\n      this.upOrDownArrowKeyTracker = null;\n    }\n    const value = input.value ? Number(input.value) : channels[channelIndex];\n\n    channels[channelIndex] = isAlphaChannel ? opacityToAlpha(value) : value;\n    this.updateColorFromChannels(channels);\n  };\n\n  private handleSavedColorKeyDown = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      this.handleSavedColorSelect(event);\n    }\n  };\n\n  private handleColorFieldPointerDown = (event: PointerEvent): void => {\n    this.handleCanvasControlPointerDown(\n      event,\n      this.colorFieldRenderingContext,\n      this.captureColorFieldColor,\n      this.colorFieldScopeNode,\n    );\n  };\n\n  private focusScope(focusEl: HTMLElement): void {\n    requestAnimationFrame(() => {\n      focusEl.focus();\n    });\n  }\n\n  private handleHueSliderPointerDown = (event: PointerEvent): void => {\n    this.handleCanvasControlPointerDown(\n      event,\n      this.hueSliderRenderingContext,\n      this.captureHueSliderColor,\n      this.hueScopeNode,\n    );\n  };\n\n  private handleOpacitySliderPointerDown = (event: PointerEvent): void => {\n    this.handleCanvasControlPointerDown(\n      event,\n      this.opacitySliderRenderingContext,\n      this.captureOpacitySliderValue,\n      this.opacityScopeNode,\n    );\n  };\n\n  private handleCanvasControlPointerDown(\n    event: PointerEvent,\n    renderingContext: CanvasRenderingContext2D,\n    captureValue: (offsetX: number, offsetY?: number) => void,\n    scopeNode: HTMLElement,\n  ): void {\n    if (!isPrimaryPointerButton(event)) {\n      return;\n    }\n\n    window.addEventListener(\"pointermove\", this.globalPointerMoveHandler);\n    window.addEventListener(\"pointerup\", this.globalPointerUpHandler, { once: true });\n\n    this.activeCanvasInfo = {\n      context: renderingContext,\n      bounds: renderingContext.canvas.getBoundingClientRect(),\n    };\n\n    captureValue.call(this, event.offsetX, event.offsetY);\n    this.focusScope(scopeNode);\n  }\n\n  private globalPointerUpHandler = (event: PointerEvent): void => {\n    if (!isPrimaryPointerButton(event)) {\n      return;\n    }\n\n    const previouslyDragging = this.activeCanvasInfo;\n    this.activeCanvasInfo = null;\n    this.drawColorControls();\n\n    if (previouslyDragging) {\n      this.calciteColorPickerChange.emit();\n    }\n  };\n\n  private globalPointerMoveHandler = (event: PointerEvent): void => {\n    const { activeCanvasInfo, el } = this;\n\n    if (!el.isConnected || !activeCanvasInfo) {\n      return;\n    }\n\n    const { context, bounds } = activeCanvasInfo;\n\n    let samplingX: number;\n    let samplingY: number;\n\n    const { clientX, clientY } = event;\n\n    if (context.canvas.matches(\":hover\")) {\n      samplingX = clientX - bounds.x;\n      samplingY = clientY - bounds.y;\n    } else {\n      // snap x and y to the closest edge\n\n      if (clientX < bounds.x + bounds.width && clientX > bounds.x) {\n        samplingX = clientX - bounds.x;\n      } else if (clientX < bounds.x) {\n        samplingX = 0;\n      } else {\n        samplingX = bounds.width;\n      }\n\n      if (clientY < bounds.y + bounds.height && clientY > bounds.y) {\n        samplingY = clientY - bounds.y;\n      } else if (clientY < bounds.y) {\n        samplingY = 0;\n      } else {\n        samplingY = bounds.height;\n      }\n    }\n\n    if (context === this.colorFieldRenderingContext) {\n      this.captureColorFieldColor(samplingX, samplingY, false);\n    } else if (context === this.hueSliderRenderingContext) {\n      this.captureHueSliderColor(samplingX);\n    } else if (context === this.opacitySliderRenderingContext) {\n      this.captureOpacitySliderValue(samplingX);\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusFirstTabbable(this.el);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n\n    this.handleAllowEmptyOrClearableChange();\n    this.handleAlphaChannelDimensionsChange();\n\n    const { isClearable, color, format, value } = this;\n    const willSetNoColor = isClearable && !value;\n    const parsedMode = parseMode(value);\n    const valueIsCompatible =\n      willSetNoColor || (format === \"auto\" && parsedMode) || format === parsedMode;\n    const initialColor = willSetNoColor ? null : valueIsCompatible ? Color(value) : color;\n\n    if (!valueIsCompatible) {\n      this.showIncompatibleColorWarning(value, format);\n    }\n    this.setMode(format, false);\n    this.internalColorSet(initialColor, false, \"initial\");\n\n    this.updateDimensions(this.scale);\n\n    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;\n\n    if (this.storageId && localStorage.getItem(storageKey)) {\n      this.savedColors = JSON.parse(localStorage.getItem(storageKey));\n    }\n\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"pointermove\", this.globalPointerMoveHandler);\n    window.removeEventListener(\"pointerup\", this.globalPointerUpHandler);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const {\n      channelsDisabled,\n      color,\n      colorFieldScopeLeft,\n      colorFieldScopeTop,\n      dimensions: {\n        thumb: { radius: thumbRadius },\n      },\n      hexDisabled,\n      hideChannels,\n      hideHex,\n      hideSaved,\n      hueScopeLeft,\n      messages,\n      alphaChannel,\n      opacityScopeLeft,\n      savedColors,\n      savedDisabled,\n      scale,\n      scopeOrientation,\n    } = this;\n\n    const sliderWidth = this.effectiveSliderWidth;\n    const selectedColorInHex = color ? hexify(color, alphaChannel) : null;\n    const hueTop = thumbRadius;\n    const hueLeft = hueScopeLeft ?? (sliderWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;\n    const opacityTop = thumbRadius;\n    const opacityLeft =\n      opacityScopeLeft ??\n      (sliderWidth * alphaToOpacity(DEFAULT_COLOR.alpha())) / OPACITY_LIMITS.max;\n    const noColor = color === null;\n    const vertical = scopeOrientation === \"vertical\";\n    const noHex = hexDisabled || hideHex;\n    const noChannels = channelsDisabled || hideChannels;\n    const noSaved = savedDisabled || hideSaved;\n    const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(\n      colorFieldScopeLeft,\n      colorFieldScopeTop,\n    );\n    const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(\n      hueLeft,\n      hueTop,\n    );\n    const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(\n      opacityLeft,\n      opacityTop,\n    );\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <div class={CSS.container}>\n          <div class={CSS.controlAndScope}>\n            <canvas\n              class={CSS.colorField}\n              onPointerDown={this.handleColorFieldPointerDown}\n              ref={this.initColorField}\n            />\n            <div\n              aria-label={vertical ? messages.value : messages.saturation}\n              aria-valuemax={vertical ? HSV_LIMITS.v : HSV_LIMITS.s}\n              aria-valuemin=\"0\"\n              aria-valuenow={(vertical ? color?.saturationv() : color?.value()) || \"0\"}\n              class={{ [CSS.scope]: true, [CSS.colorFieldScope]: true }}\n              onKeyDown={this.handleColorFieldScopeKeyDown}\n              ref={this.storeColorFieldScope}\n              role=\"slider\"\n              style={{\n                top: `${adjustedColorFieldScopeTop || 0}px`,\n                left: `${adjustedColorFieldScopeLeft || 0}px`,\n              }}\n              tabindex=\"0\"\n            />\n          </div>\n          <div class={CSS.previewAndSliders}>\n            <calcite-color-picker-swatch\n              class={CSS.preview}\n              color={selectedColorInHex}\n              scale={this.alphaChannel ? \"l\" : this.scale}\n            />\n            <div class={CSS.sliders}>\n              <div class={CSS.controlAndScope}>\n                <canvas\n                  class={{ [CSS.slider]: true, [CSS.hueSlider]: true }}\n                  onPointerDown={this.handleHueSliderPointerDown}\n                  ref={this.initHueSlider}\n                />\n                <div\n                  aria-label={messages.hue}\n                  aria-valuemax={HSV_LIMITS.h}\n                  aria-valuemin=\"0\"\n                  aria-valuenow={color?.round().hue() || DEFAULT_COLOR.round().hue()}\n                  class={{ [CSS.scope]: true, [CSS.hueScope]: true }}\n                  onKeyDown={this.handleHueScopeKeyDown}\n                  ref={this.storeHueScope}\n                  role=\"slider\"\n                  style={{\n                    top: `${adjustedHueScopeTop}px`,\n                    left: `${adjustedHueScopeLeft}px`,\n                  }}\n                  tabindex=\"0\"\n                />\n              </div>\n              {alphaChannel ? (\n                <div class={CSS.controlAndScope}>\n                  <canvas\n                    class={{ [CSS.slider]: true, [CSS.opacitySlider]: true }}\n                    onPointerDown={this.handleOpacitySliderPointerDown}\n                    ref={this.initOpacitySlider}\n                  />\n                  <div\n                    aria-label={messages.opacity}\n                    aria-valuemax={OPACITY_LIMITS.max}\n                    aria-valuemin={OPACITY_LIMITS.min}\n                    aria-valuenow={(color || DEFAULT_COLOR).round().alpha()}\n                    class={{ [CSS.scope]: true, [CSS.opacityScope]: true }}\n                    onKeyDown={this.handleOpacityScopeKeyDown}\n                    ref={this.storeOpacityScope}\n                    role=\"slider\"\n                    style={{\n                      top: `${adjustedOpacityScopeTop}px`,\n                      left: `${adjustedOpacityScopeLeft}px`,\n                    }}\n                    tabindex=\"0\"\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n          {noHex && noChannels ? null : (\n            <div\n              class={{\n                [CSS.controlSection]: true,\n                [CSS.section]: true,\n              }}\n            >\n              <div class={CSS.hexAndChannelsGroup}>\n                {noHex ? null : (\n                  <div class={CSS.hexOptions}>\n                    <calcite-color-picker-hex-input\n                      allowEmpty={this.isClearable}\n                      alphaChannel={alphaChannel}\n                      class={CSS.control}\n                      messages={messages}\n                      numberingSystem={this.numberingSystem}\n                      onCalciteColorPickerHexInputChange={this.handleHexInputChange}\n                      scale={scale}\n                      value={selectedColorInHex}\n                    />\n                  </div>\n                )}\n                {noChannels ? null : (\n                  <calcite-tabs\n                    class={{\n                      [CSS.colorModeContainer]: true,\n                      [CSS.splitSection]: true,\n                    }}\n                    scale={scale === \"l\" ? \"m\" : \"s\"}\n                  >\n                    <calcite-tab-nav slot=\"title-group\">\n                      {this.renderChannelsTabTitle(\"rgb\")}\n                      {this.renderChannelsTabTitle(\"hsv\")}\n                    </calcite-tab-nav>\n                    {this.renderChannelsTab(\"rgb\")}\n                    {this.renderChannelsTab(\"hsv\")}\n                  </calcite-tabs>\n                )}\n              </div>\n            </div>\n          )}\n          {noSaved ? null : (\n            <div class={{ [CSS.savedColorsSection]: true, [CSS.section]: true }}>\n              <div class={CSS.header}>\n                <label>{messages.saved}</label>\n                <div class={CSS.savedColorsButtons}>\n                  <calcite-button\n                    appearance=\"transparent\"\n                    class={CSS.deleteColor}\n                    disabled={noColor}\n                    iconStart=\"minus\"\n                    kind=\"neutral\"\n                    label={messages.deleteColor}\n                    onClick={this.deleteColor}\n                    scale={scale}\n                    type=\"button\"\n                  />\n                  <calcite-button\n                    appearance=\"transparent\"\n                    class={CSS.saveColor}\n                    disabled={noColor}\n                    iconStart=\"plus\"\n                    kind=\"neutral\"\n                    label={messages.saveColor}\n                    onClick={this.saveColor}\n                    scale={scale}\n                    type=\"button\"\n                  />\n                </div>\n              </div>\n              {savedColors.length > 0 ? (\n                <div class={CSS.savedColors}>\n                  {[\n                    ...savedColors.map((color) => (\n                      <calcite-color-picker-swatch\n                        class={CSS.savedColor}\n                        color={color}\n                        key={color}\n                        onClick={this.handleSavedColorSelect}\n                        onKeyDown={this.handleSavedColorKeyDown}\n                        scale={scale}\n                        tabIndex={0}\n                      />\n                    )),\n                  ]}\n                </div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      </InteractiveContainer>\n    );\n  }\n\n  private storeColorFieldScope = (node: HTMLDivElement): void => {\n    this.colorFieldScopeNode = node;\n  };\n\n  private storeHueScope = (node: HTMLDivElement): void => {\n    this.hueScopeNode = node;\n  };\n\n  private renderChannelsTabTitle = (channelMode: this[\"channelMode\"]): VNode => {\n    const { channelMode: activeChannelMode, messages } = this;\n    const selected = channelMode === activeChannelMode;\n    const label = channelMode === \"rgb\" ? messages.rgb : messages.hsv;\n\n    return (\n      <calcite-tab-title\n        class={CSS.colorMode}\n        data-color-mode={channelMode}\n        key={channelMode}\n        onCalciteTabsActivate={this.handleTabActivate}\n        selected={selected}\n      >\n        {label}\n      </calcite-tab-title>\n    );\n  };\n\n  private renderChannelsTab = (channelMode: this[\"channelMode\"]): VNode => {\n    const { isClearable, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;\n    const selected = channelMode === activeChannelMode;\n    const isRgb = channelMode === \"rgb\";\n    const channelAriaLabels = isRgb\n      ? [messages.red, messages.green, messages.blue]\n      : [messages.hue, messages.saturation, messages.value];\n    const direction = getElementDir(this.el);\n    const channelsToRender = alphaChannel ? channels : channels.slice(0, 3);\n\n    return (\n      <calcite-tab class={CSS.control} key={channelMode} selected={selected}>\n        {/* channel order should not be mirrored */}\n        <div class={CSS.channels} dir=\"ltr\">\n          {channelsToRender.map((channelValue, index) => {\n            const isAlphaChannel = index === 3;\n\n            if (isAlphaChannel) {\n              channelValue =\n                isClearable && !channelValue ? channelValue : alphaToOpacity(channelValue);\n            }\n\n            /* the channel container is ltr, so we apply the host's direction */\n            return this.renderChannel(\n              channelValue,\n              index,\n              channelAriaLabels[index],\n              direction,\n              isAlphaChannel ? \"%\" : \"\",\n            );\n          })}\n        </div>\n      </calcite-tab>\n    );\n  };\n\n  private renderChannel = (\n    value: number | null,\n    index: number,\n    ariaLabel: string,\n    direction: Direction,\n    suffix?: string,\n  ): VNode => {\n    return (\n      <calcite-input-number\n        class={CSS.channel}\n        data-channel-index={index}\n        dir={direction}\n        key={index}\n        label={ariaLabel}\n        lang={this.effectiveLocale}\n        numberButtonType=\"none\"\n        numberingSystem={this.numberingSystem}\n        onCalciteInputNumberChange={this.handleChannelChange}\n        onCalciteInputNumberInput={this.handleChannelInput}\n        onCalciteInternalInputNumberBlur={this.handleChannelBlur}\n        onCalciteInternalInputNumberFocus={this.handleChannelFocus}\n        onKeyDown={this.handleKeyDown}\n        scale={this.scale === \"l\" ? \"m\" : \"s\"}\n        // workaround to ensure input borders overlap as desired\n        // this is because the build transforms margin-left to its\n        // logical-prop, which is undesired as channels are always ltr\n        style={{\n          marginLeft:\n            index > 0 && !(this.scale === \"s\" && this.alphaChannel && index === 3) ? \"-1px\" : \"\",\n        }}\n        suffixText={suffix}\n        value={value?.toString()}\n      />\n    );\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  }\n\n  private showIncompatibleColorWarning(value: ColorValue, format: Format): void {\n    console.warn(\n      `ignoring color value (${value}) as it is not compatible with the current format (${format})`,\n    );\n  }\n\n  private setMode(format: ColorPicker[\"format\"], warn = true): void {\n    const mode = format === \"auto\" ? this.mode : format;\n    this.mode = this.ensureCompatibleMode(mode, warn);\n  }\n\n  private ensureCompatibleMode(mode: SupportedMode, warn): SupportedMode {\n    const { alphaChannel } = this;\n    const isAlphaCompatible = alphaCompatible(mode);\n\n    if (alphaChannel && !isAlphaCompatible) {\n      const alphaMode = toAlphaMode(mode);\n\n      if (warn) {\n        console.warn(\n          `setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`,\n        );\n      }\n\n      return alphaMode;\n    }\n\n    if (!alphaChannel && isAlphaCompatible) {\n      const nonAlphaMode = toNonAlphaMode(mode);\n\n      if (warn) {\n        console.warn(\n          `setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`,\n        );\n      }\n\n      return nonAlphaMode;\n    }\n\n    return mode;\n  }\n\n  private captureHueSliderColor(x: number): void {\n    const hue = (HUE_LIMIT_CONSTRAINED / this.effectiveSliderWidth) * x;\n\n    this.internalColorSet(this.baseColorFieldColor.hue(hue), false);\n  }\n\n  private captureOpacitySliderValue(x: number): void {\n    const alpha = opacityToAlpha((OPACITY_LIMITS.max / this.effectiveSliderWidth) * x);\n\n    this.internalColorSet(this.baseColorFieldColor.alpha(alpha), false);\n  }\n\n  private internalColorSet(\n    color: Color | null,\n    skipEqual = true,\n    context: ColorPicker[\"internalColorUpdateContext\"] = \"user-interaction\",\n  ): void {\n    if (skipEqual && colorEqual(color, this.color)) {\n      return;\n    }\n\n    this.internalColorUpdateContext = context;\n    this.color = color;\n    this.value = this.toValue(color);\n    this.internalColorUpdateContext = null;\n  }\n\n  private toValue(color: Color | null, format: SupportedMode = this.mode): ColorValue | null {\n    if (!color) {\n      return null;\n    }\n\n    const hexMode = \"hex\";\n\n    if (format.includes(hexMode)) {\n      const hasAlpha = format === CSSColorMode.HEXA;\n      return normalizeHex(hexify(color.round(), hasAlpha), hasAlpha);\n    }\n\n    if (format.includes(\"-css\")) {\n      const value = color[format.replace(\"-css\", \"\").replace(\"a\", \"\")]().round().string();\n\n      // Color omits alpha values when alpha is 1\n      const needToInjectAlpha =\n        (format.endsWith(\"a\") || format.endsWith(\"a-css\")) && color.alpha() === 1;\n      if (needToInjectAlpha) {\n        const model = value.slice(0, 3);\n        const values = value.slice(4, -1);\n        return `${model}a(${values}, ${color.alpha()})`;\n      }\n\n      return value;\n    }\n\n    const colorObject =\n      /* Color() does not support hsva, hsla nor rgba, so we use the non-alpha mode */\n      color[toNonAlphaMode(format)]().round().object();\n\n    if (format.endsWith(\"a\")) {\n      return normalizeAlpha(colorObject);\n    }\n\n    return colorObject;\n  }\n\n  private getSliderCapSpacing(): number {\n    const {\n      dimensions: {\n        slider: { height },\n        thumb: { radius },\n      },\n    } = this;\n\n    return radius * 2 - height;\n  }\n\n  private updateDimensions(scale: Scale = \"m\"): void {\n    this.dimensions = DIMENSIONS[scale];\n  }\n\n  private deleteColor = (): void => {\n    const colorToDelete = hexify(this.color, this.alphaChannel);\n    const inStorage = this.savedColors.indexOf(colorToDelete) > -1;\n\n    if (!inStorage) {\n      return;\n    }\n\n    const savedColors = this.savedColors.filter((color) => color !== colorToDelete);\n\n    this.savedColors = savedColors;\n\n    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;\n\n    if (this.storageId) {\n      localStorage.setItem(storageKey, JSON.stringify(savedColors));\n    }\n  };\n\n  private saveColor = (): void => {\n    const colorToSave = hexify(this.color, this.alphaChannel);\n    const alreadySaved = this.savedColors.indexOf(colorToSave) > -1;\n\n    if (alreadySaved) {\n      return;\n    }\n\n    const savedColors = [...this.savedColors, colorToSave];\n\n    this.savedColors = savedColors;\n\n    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;\n\n    if (this.storageId) {\n      localStorage.setItem(storageKey, JSON.stringify(savedColors));\n    }\n  };\n\n  private drawColorControls = throttle(\n    (type: \"all\" | \"color-field\" | \"hue-slider\" | \"opacity-slider\" = \"all\"): void => {\n      if ((type === \"all\" || type === \"color-field\") && this.colorFieldRenderingContext) {\n        this.drawColorField();\n      }\n\n      if ((type === \"all\" || type === \"hue-slider\") && this.hueSliderRenderingContext) {\n        this.drawHueSlider();\n      }\n\n      if (\n        this.alphaChannel &&\n        (type === \"all\" || type === \"opacity-slider\") &&\n        this.opacitySliderRenderingContext\n      ) {\n        this.drawOpacitySlider();\n      }\n    },\n    throttleFor60FpsInMs,\n  );\n\n  private drawColorField(): void {\n    const context = this.colorFieldRenderingContext;\n    const {\n      dimensions: {\n        colorField: { height, width },\n      },\n    } = this;\n\n    context.fillStyle = this.baseColorFieldColor\n      .hsv()\n      .saturationv(100)\n      .value(100)\n      .alpha(1)\n      .string();\n    context.fillRect(0, 0, width, height);\n\n    const whiteGradient = context.createLinearGradient(0, 0, width, 0);\n    whiteGradient.addColorStop(0, \"rgba(255,255,255,1)\");\n    whiteGradient.addColorStop(1, \"rgba(255,255,255,0)\");\n    context.fillStyle = whiteGradient;\n    context.fillRect(0, 0, width, height);\n\n    const blackGradient = context.createLinearGradient(0, 0, 0, height);\n    blackGradient.addColorStop(0, \"rgba(0,0,0,0)\");\n    blackGradient.addColorStop(1, \"rgba(0,0,0,1)\");\n    context.fillStyle = blackGradient;\n    context.fillRect(0, 0, width, height);\n\n    this.drawActiveColorFieldColor();\n  }\n\n  private setCanvasContextSize(\n    canvas: HTMLCanvasElement,\n    { height, width }: { height: number; width: number },\n  ): void {\n    if (!canvas) {\n      return;\n    }\n\n    const devicePixelRatio = window.devicePixelRatio || 1;\n\n    canvas.width = width * devicePixelRatio;\n    canvas.height = height * devicePixelRatio;\n    canvas.style.height = `${height}px`;\n    canvas.style.width = `${width}px`;\n\n    const context = canvas.getContext(\"2d\");\n    context.scale(devicePixelRatio, devicePixelRatio);\n  }\n\n  private captureColorFieldColor = (x: number, y: number, skipEqual = true): void => {\n    const {\n      dimensions: {\n        colorField: { height, width },\n      },\n    } = this;\n    const saturation = Math.round((HSV_LIMITS.s / width) * x);\n    const value = Math.round((HSV_LIMITS.v / height) * (height - y));\n\n    this.internalColorSet(\n      this.baseColorFieldColor.hsv().saturationv(saturation).value(value),\n      skipEqual,\n    );\n  };\n\n  private initColorField = (canvas: HTMLCanvasElement): void => {\n    this.colorFieldRenderingContext = canvas.getContext(\"2d\");\n    this.updateCanvasSize(\"color-field\");\n    this.drawColorControls();\n  };\n\n  private initHueSlider = (canvas: HTMLCanvasElement): void => {\n    this.hueSliderRenderingContext = canvas.getContext(\"2d\");\n    this.updateCanvasSize(\"hue-slider\");\n    this.drawHueSlider();\n  };\n\n  private initOpacitySlider = (canvas: HTMLCanvasElement): void => {\n    if (!canvas) {\n      return;\n    }\n\n    this.opacitySliderRenderingContext = canvas.getContext(\"2d\");\n    this.updateCanvasSize(\"opacity-slider\");\n    this.drawOpacitySlider();\n  };\n\n  private updateCanvasSize(\n    context: \"all\" | \"color-field\" | \"hue-slider\" | \"opacity-slider\" = \"all\",\n  ): void {\n    const { dimensions } = this;\n\n    if (context === \"all\" || context === \"color-field\") {\n      this.setCanvasContextSize(this.colorFieldRenderingContext?.canvas, dimensions.colorField);\n    }\n\n    const adjustedSliderDimensions = {\n      width: this.effectiveSliderWidth,\n      height:\n        dimensions.slider.height + (dimensions.thumb.radius - dimensions.slider.height / 2) * 2,\n    };\n\n    if (context === \"all\" || context === \"hue-slider\") {\n      this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas, adjustedSliderDimensions);\n    }\n\n    if (context === \"all\" || context === \"opacity-slider\") {\n      this.setCanvasContextSize(\n        this.opacitySliderRenderingContext?.canvas,\n        adjustedSliderDimensions,\n      );\n    }\n  }\n\n  private drawActiveColorFieldColor(): void {\n    const { color } = this;\n\n    if (!color) {\n      return;\n    }\n\n    const hsvColor = color.hsv();\n\n    const {\n      dimensions: {\n        colorField: { height, width },\n        thumb: { radius },\n      },\n    } = this;\n\n    const x = hsvColor.saturationv() / (HSV_LIMITS.s / width);\n    const y = height - hsvColor.value() / (HSV_LIMITS.v / height);\n\n    requestAnimationFrame(() => {\n      this.colorFieldScopeLeft = x;\n      this.colorFieldScopeTop = y;\n    });\n\n    this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor, false);\n  }\n\n  private drawThumb(\n    context: CanvasRenderingContext2D,\n    radius: number,\n    x: number,\n    y: number,\n    color: Color,\n    applyAlpha: boolean,\n  ): void {\n    const startAngle = 0;\n    const endAngle = 2 * Math.PI;\n    const outlineWidth = 1;\n\n    context.beginPath();\n    context.arc(x, y, radius, startAngle, endAngle);\n    context.fillStyle = \"#fff\";\n    context.fill();\n\n    context.strokeStyle = \"rgba(0,0,0,0.3)\";\n    context.lineWidth = outlineWidth;\n    context.stroke();\n\n    if (applyAlpha && color.alpha() < 1) {\n      const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), \"repeat\");\n      context.beginPath();\n      context.arc(x, y, radius - 3, startAngle, endAngle);\n      context.fillStyle = pattern;\n      context.fill();\n    }\n\n    context.globalCompositeOperation = \"source-atop\";\n\n    context.beginPath();\n    context.arc(x, y, radius - 3, startAngle, endAngle);\n    const alpha = applyAlpha ? color.alpha() : 1;\n    context.fillStyle = color.rgb().alpha(alpha).string();\n    context.fill();\n\n    context.globalCompositeOperation = \"source-over\";\n  }\n\n  private drawActiveHueSliderColor(): void {\n    const { color } = this;\n\n    if (!color) {\n      return;\n    }\n\n    const hsvColor = color.hsv().saturationv(100).value(100);\n\n    const {\n      dimensions: {\n        thumb: { radius },\n      },\n    } = this;\n\n    const width = this.effectiveSliderWidth;\n    const x = hsvColor.hue() / (HUE_LIMIT_CONSTRAINED / width);\n    const y = radius;\n    const sliderBoundX = this.getSliderBoundX(x, width, radius);\n\n    requestAnimationFrame(() => {\n      this.hueScopeLeft = sliderBoundX;\n    });\n\n    this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor, false);\n  }\n\n  private drawHueSlider(): void {\n    const context = this.hueSliderRenderingContext;\n    const {\n      dimensions: {\n        slider: { height },\n        thumb: { radius: thumbRadius },\n      },\n    } = this;\n\n    const x = 0;\n    const y = thumbRadius - height / 2;\n    const width = this.effectiveSliderWidth;\n\n    const gradient = context.createLinearGradient(0, 0, width, 0);\n\n    const hueSliderColorStopKeywords = [\n      \"red\",\n      \"yellow\",\n      \"lime\",\n      \"cyan\",\n      \"blue\",\n      \"magenta\",\n      \"#ff0004\" /* 1 unit less than #ff0 to avoid duplicate values within range */,\n    ];\n\n    const offset = 1 / (hueSliderColorStopKeywords.length - 1);\n    let currentOffset = 0;\n\n    hueSliderColorStopKeywords.forEach((keyword) => {\n      gradient.addColorStop(currentOffset, Color(keyword).string());\n      currentOffset += offset;\n    });\n\n    context.clearRect(0, 0, width, height + this.getSliderCapSpacing() * 2);\n\n    this.drawSliderPath(context, height, width, x, y);\n\n    context.fillStyle = gradient;\n    context.fill();\n\n    context.strokeStyle = \"rgba(0,0,0,0.3)\";\n    context.lineWidth = 1;\n    context.stroke();\n\n    this.drawActiveHueSliderColor();\n  }\n\n  private drawOpacitySlider(): void {\n    const context = this.opacitySliderRenderingContext;\n    const {\n      baseColorFieldColor: previousColor,\n      dimensions: {\n        slider: { height },\n        thumb: { radius: thumbRadius },\n      },\n    } = this;\n\n    const x = 0;\n    const y = thumbRadius - height / 2;\n    const width = this.effectiveSliderWidth;\n\n    context.clearRect(0, 0, width, height + this.getSliderCapSpacing() * 2);\n\n    const gradient = context.createLinearGradient(0, y, width, 0);\n    const startColor = previousColor.rgb().alpha(0);\n    const midColor = previousColor.rgb().alpha(0.5);\n    const endColor = previousColor.rgb().alpha(1);\n\n    gradient.addColorStop(0, startColor.string());\n    gradient.addColorStop(0.5, midColor.string());\n    gradient.addColorStop(1, endColor.string());\n\n    this.drawSliderPath(context, height, width, x, y);\n\n    const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), \"repeat\");\n    context.fillStyle = pattern;\n    context.fill();\n\n    context.fillStyle = gradient;\n    context.fill();\n\n    context.strokeStyle = \"rgba(0,0,0,0.3)\";\n    context.lineWidth = 1;\n    context.stroke();\n\n    this.drawActiveOpacitySliderColor();\n  }\n\n  private drawSliderPath(\n    context: CanvasRenderingContext2D,\n    height: number,\n    width: number,\n    x: number,\n    y: number,\n  ): void {\n    const radius = height / 2 + 1;\n    context.beginPath();\n    context.moveTo(x + radius, y);\n    context.lineTo(x + width - radius, y);\n    context.quadraticCurveTo(x + width, y, x + width, y + radius);\n    context.lineTo(x + width, y + height - radius);\n    context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n    context.lineTo(x + radius, y + height);\n    context.quadraticCurveTo(x, y + height, x, y + height - radius);\n    context.lineTo(x, y + radius);\n    context.quadraticCurveTo(x, y, x + radius, y);\n    context.closePath();\n  }\n\n  private getCheckeredBackgroundPattern(): HTMLCanvasElement {\n    if (this.checkerPattern) {\n      return this.checkerPattern;\n    }\n\n    const pattern = document.createElement(\"canvas\");\n    pattern.width = 10;\n    pattern.height = 10;\n    const patternContext = pattern.getContext(\"2d\");\n\n    patternContext.fillStyle = \"#ccc\";\n    patternContext.fillRect(0, 0, 10, 10);\n    patternContext.fillStyle = \"#fff\";\n    patternContext.fillRect(0, 0, 5, 5);\n    patternContext.fillRect(5, 5, 5, 5);\n\n    this.checkerPattern = pattern;\n\n    return pattern;\n  }\n\n  private drawActiveOpacitySliderColor(): void {\n    const { color } = this;\n\n    if (!color) {\n      return;\n    }\n\n    const hsvColor = color;\n\n    const {\n      dimensions: {\n        thumb: { radius },\n      },\n    } = this;\n\n    const width = this.effectiveSliderWidth;\n    const x = alphaToOpacity(hsvColor.alpha()) / (OPACITY_LIMITS.max / width);\n    const y = radius;\n    const sliderBoundX = this.getSliderBoundX(x, width, radius);\n\n    requestAnimationFrame(() => {\n      this.opacityScopeLeft = sliderBoundX;\n    });\n\n    this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor, true);\n  }\n\n  private getSliderBoundX(x: number, width: number, radius: number): number {\n    const closeToEdge = closeToRangeEdge(x, width, radius);\n\n    return closeToEdge === 0\n      ? x\n      : closeToEdge === -1\n        ? remap(x, 0, width, radius, radius * 2)\n        : remap(x, 0, width, width - radius * 2, width - radius);\n  }\n\n  private storeOpacityScope = (node: HTMLDivElement): void => {\n    this.opacityScopeNode = node;\n  };\n\n  private handleOpacityScopeKeyDown = (event: KeyboardEvent): void => {\n    const modifier = event.shiftKey ? 10 : 1;\n    const { key } = event;\n    const arrowKeyToXOffset = {\n      ArrowUp: 0.01,\n      ArrowRight: 0.01,\n      ArrowDown: -0.01,\n      ArrowLeft: -0.01,\n    };\n\n    if (arrowKeyToXOffset[key]) {\n      event.preventDefault();\n      const delta = arrowKeyToXOffset[key] * modifier;\n      const alpha = this.baseColorFieldColor.alpha();\n      const color = this.baseColorFieldColor.alpha(alpha + delta);\n      this.internalColorSet(color, false);\n    }\n  };\n\n  private updateColorFromChannels(channels: this[\"channels\"]): void {\n    this.internalColorSet(Color(channels, this.channelMode));\n  }\n\n  private updateChannelsFromColor(color: Color | null): void {\n    this.channels = color ? this.toChannels(color) : [null, null, null, null];\n  }\n\n  private toChannels(color: Color): Channels {\n    const { channelMode } = this;\n\n    const channels = color[channelMode]()\n      .array()\n      .map((value, index) => {\n        const isAlpha = index === 3;\n        return isAlpha ? value : Math.floor(value);\n      });\n\n    if (channels.length === 3) {\n      channels.push(1); // Color omits alpha when 1\n    }\n\n    return channels as Channels;\n  }\n\n  private getAdjustedScopePosition(left: number, top: number): [number, number] {\n    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  hexInput: \"hex-input\",\n  opacityInput: \"opacity-input\",\n};\n",":host {\n  @apply block;\n}\n\n.container {\n  @apply flex w-full items-center flex-nowrap;\n}\n\n.hex-input {\n  @apply grow uppercase;\n}\n\n.opacity-input {\n  inline-size: 68px;\n  margin-inline-start: -1px;\n}\n\n:host([scale=\"s\"]) {\n  .container {\n    @apply flex-wrap gap-y-0.5;\n  }\n\n  .opacity-input {\n    inline-size: unset;\n    margin-inline-start: unset;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .opacity-input {\n    inline-size: 88px;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Color from \"color\";\nimport { Scale } from \"../interfaces\";\nimport { Channels, RGB } from \"../color-picker/interfaces\";\nimport {\n  alphaToOpacity,\n  hexChar,\n  hexify,\n  isLonghandHex,\n  isShorthandHex,\n  isValidHex,\n  normalizeHex,\n  opacityToAlpha,\n  rgbToHex,\n} from \"../color-picker/utils\";\nimport { focusElement } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { NumberingSystem } from \"../../utils/locale\";\nimport { OPACITY_LIMITS } from \"../color-picker/resources\";\nimport { ColorPickerMessages } from \"../color-picker/assets/color-picker/t9n\";\nimport { CSS } from \"./resources\";\n\nconst DEFAULT_COLOR = Color();\n\n@Component({\n  tag: \"calcite-color-picker-hex-input\",\n  styleUrl: \"color-picker-hex-input.scss\",\n  shadow: true,\n})\nexport class ColorPickerHexInput implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { allowEmpty, alphaChannel, value } = this;\n\n    if (value) {\n      const normalized = normalizeHex(value, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        this.internalSetValue(normalized, normalized, false);\n      }\n\n      return;\n    }\n\n    if (allowEmpty) {\n      this.internalSetValue(null, null, false);\n    }\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, an empty color (`null`) will be allowed as a `value`.\n   *\n   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.\n   */\n  @Prop() allowEmpty = false;\n\n  /**\n   * When `true`, the component will allow updates to the color's alpha value.\n   */\n  @Prop() alphaChannel = false;\n\n  /**\n   * Specifies accessible label for the input field.\n   *\n   * @deprecated use `messages` instead\n   */\n  @Prop() hexLabel = \"Hex\";\n\n  /**\n   * Messages are passed by parent component for accessible labels.\n   *\n   * @internal\n   */\n  @Prop() messages: ColorPickerMessages;\n\n  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop() numberingSystem?: NumberingSystem;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The hex value.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n    this.alphaChannel,\n    true,\n  );\n\n  @Watch(\"value\")\n  handleValueChange(value: string, oldValue: string): void {\n    this.internalSetValue(value, oldValue, false);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emitted when the hex value changes.\n   */\n  @Event({ cancelable: false }) calciteColorPickerHexInputChange: EventEmitter<void>;\n\n  private onHexInputBlur = (): void => {\n    const node = this.hexInputNode;\n    const inputValue = node.value;\n    const hex = `#${inputValue}`;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n    const isLonghand = isLonghandHex(hex);\n\n    if (isShorthandHex(hex, this.alphaChannel)) {\n      // ensure modified pasted hex values are committed since we prevent default to remove the # char.\n      this.onHexInputChange();\n    }\n\n    if (willClearValue || (isValidHex(hex) && isLonghand)) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor\n        ? \"\"\n        : this.formatHexForInternalInput(\n            rgbToHex(\n              // always display hex input in RRGGBB format\n              internalColor.object() as any as RGB,\n            ),\n          );\n  };\n\n  private onOpacityInputBlur = (): void => {\n    const node = this.opacityInputNode;\n    const inputValue = node.value;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n\n    if (willClearValue) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor ? \"\" : this.formatOpacityForInternalInput(internalColor);\n  };\n\n  private onOpacityInputInput = (): void => {\n    this.onOpacityInputChange();\n  };\n\n  private onHexInputChange = (): void => {\n    const nodeValue = this.hexInputNode.value;\n    let value = nodeValue;\n\n    if (value) {\n      const normalized = normalizeHex(value, false);\n      const preserveExistingAlpha = isValidHex(normalized) && this.alphaChannel;\n      if (preserveExistingAlpha && this.internalColor) {\n        const alphaHex = normalizeHex(this.internalColor.hexa(), true).slice(-2);\n        value = `${normalized + alphaHex}`;\n      }\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  private onOpacityInputChange = (): void => {\n    const node = this.opacityInputNode;\n    let value: number | string;\n\n    if (!node.value) {\n      value = node.value;\n    } else {\n      const alpha = opacityToAlpha(Number(node.value));\n      value = this.internalColor?.alpha(alpha).hexa();\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  private onInputFocus = (event: Event): void => {\n    event.type === \"calciteInternalInputTextFocus\"\n      ? this.hexInputNode.selectText()\n      : this.opacityInputNode.selectText();\n  };\n\n  private onHexInputInput = (): void => {\n    const hexInputValue = `#${this.hexInputNode.value}`;\n    const oldValue = this.value;\n\n    if (\n      isValidHex(hexInputValue, this.alphaChannel) &&\n      isLonghandHex(hexInputValue, this.alphaChannel)\n    ) {\n      this.internalSetValue(hexInputValue, oldValue);\n    }\n  };\n\n  protected onInputKeyDown = (event: KeyboardEvent): void => {\n    const { altKey, ctrlKey, metaKey, shiftKey } = event;\n    const { alphaChannel, hexInputNode, internalColor, value } = this;\n    const { key } = event;\n    const composedPath = event.composedPath();\n\n    if ((key === \"Tab\" && isShorthandHex(value, this.alphaChannel)) || key === \"Enter\") {\n      if (composedPath.includes(hexInputNode)) {\n        this.onHexInputChange();\n      } else {\n        this.onOpacityInputChange();\n      }\n\n      if (key === \"Enter\") {\n        event.preventDefault();\n      }\n\n      return;\n    }\n\n    const isNudgeKey = key === \"ArrowDown\" || key === \"ArrowUp\";\n    const oldValue = this.value;\n\n    if (isNudgeKey) {\n      if (!value) {\n        this.internalSetValue(this.previousNonNullValue, oldValue);\n        event.preventDefault();\n        return;\n      }\n\n      const direction = key === \"ArrowUp\" ? 1 : -1;\n      const bump = shiftKey ? 10 : 1;\n\n      this.internalSetValue(\n        hexify(\n          this.nudgeRGBChannels(\n            internalColor,\n            bump * direction,\n            composedPath.includes(hexInputNode) ? \"rgb\" : \"a\",\n          ),\n          alphaChannel,\n        ),\n        oldValue,\n      );\n\n      event.preventDefault();\n      return;\n    }\n\n    const withModifiers = altKey || ctrlKey || metaKey;\n    const singleChar = key.length === 1;\n    const validHexChar = hexChar.test(key);\n\n    if (singleChar && !withModifiers && !validHexChar) {\n      event.preventDefault();\n    }\n  };\n\n  private onHexInputPaste = (event: ClipboardEvent): void => {\n    const hex = event.clipboardData.getData(\"text\");\n\n    if (isValidHex(hex, this.alphaChannel) && isLonghandHex(hex, this.alphaChannel)) {\n      event.preventDefault();\n      this.hexInputNode.value = hex.slice(1);\n      this.internalSetValue(hex, this.value);\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerHexInputElement;\n\n  private hexInputNode: HTMLCalciteInputTextElement;\n\n  /**\n   * The last valid/selected color. Used as a fallback if an invalid hex code is entered.\n   */\n  @State() internalColor: Color | null = DEFAULT_COLOR;\n\n  private opacityInputNode: HTMLCalciteInputNumberElement;\n\n  private previousNonNullValue: string = this.value;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { alphaChannel, hexLabel, internalColor, messages, scale, value } = this;\n    const hexInputValue = this.formatHexForInternalInput(value);\n    const opacityInputValue = this.formatOpacityForInternalInput(internalColor);\n    const inputScale = scale === \"l\" ? \"m\" : \"s\";\n\n    return (\n      <div class={CSS.container}>\n        <calcite-input-text\n          class={CSS.hexInput}\n          label={messages?.hex || hexLabel}\n          maxLength={this.alphaChannel ? 8 : 6}\n          onCalciteInputTextChange={this.onHexInputChange}\n          onCalciteInputTextInput={this.onHexInputInput}\n          onCalciteInternalInputTextBlur={this.onHexInputBlur}\n          onCalciteInternalInputTextFocus={this.onInputFocus}\n          onKeyDown={this.onInputKeyDown}\n          onPaste={this.onHexInputPaste}\n          prefixText=\"#\"\n          ref={this.storeHexInputRef}\n          scale={inputScale}\n          value={hexInputValue}\n        />\n        {alphaChannel ? (\n          <calcite-input-number\n            class={CSS.opacityInput}\n            key=\"opacity-input\"\n            label={messages?.opacity}\n            max={OPACITY_LIMITS.max}\n            maxLength={3}\n            min={OPACITY_LIMITS.min}\n            numberButtonType=\"none\"\n            numberingSystem={this.numberingSystem}\n            onCalciteInputNumberInput={this.onOpacityInputInput}\n            onCalciteInternalInputNumberBlur={this.onOpacityInputBlur}\n            onCalciteInternalInputNumberFocus={this.onInputFocus}\n            onKeyDown={this.onInputKeyDown}\n            ref={this.storeOpacityInputRef}\n            scale={inputScale}\n            suffixText=\"%\"\n            value={opacityInputValue}\n          />\n        ) : null}\n      </div>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return focusElement(this.hexInputNode);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private internalSetValue(value: string | null, oldValue: string | null, emit = true): void {\n    if (value) {\n      const { alphaChannel } = this;\n      const normalized = normalizeHex(value, alphaChannel, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        const { internalColor: currentColor } = this;\n        const nextColor = Color(normalized);\n        const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);\n\n        const changed =\n          !currentColor ||\n          normalizedLonghand !== normalizeHex(hexify(currentColor, alphaChannel), alphaChannel);\n\n        this.internalColor = nextColor;\n        this.previousNonNullValue = normalizedLonghand;\n        this.value = normalizedLonghand;\n\n        if (changed && emit) {\n          this.calciteColorPickerHexInputChange.emit();\n        }\n\n        return;\n      }\n    } else if (this.allowEmpty) {\n      this.internalColor = null;\n      this.value = null;\n\n      if (emit) {\n        this.calciteColorPickerHexInputChange.emit();\n      }\n\n      return;\n    }\n\n    this.value = oldValue;\n  }\n\n  private storeHexInputRef = (node: HTMLCalciteInputTextElement): void => {\n    this.hexInputNode = node;\n  };\n\n  private storeOpacityInputRef = (node: HTMLCalciteInputNumberElement): void => {\n    this.opacityInputNode = node;\n  };\n\n  private formatHexForInternalInput(hex: string): string {\n    return hex ? hex.replace(\"#\", \"\").slice(0, 6) : \"\";\n  }\n\n  private formatOpacityForInternalInput(color: Color): string {\n    return color ? `${alphaToOpacity(color.alpha())}` : \"\";\n  }\n\n  private nudgeRGBChannels(color: Color, amount: number, context: \"rgb\" | \"a\"): Color {\n    let nudgedChannels: Channels;\n    const channels = color.array();\n    const rgbChannels = channels.slice(0, 3);\n\n    if (context === \"rgb\") {\n      const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);\n      nudgedChannels = [\n        ...nudgedRGBChannels,\n        this.alphaChannel ? channels[3] : undefined,\n      ] as Channels;\n    } else {\n      const nudgedAlpha = opacityToAlpha(alphaToOpacity(color.alpha()) + amount);\n      nudgedChannels = [...rgbChannels, nudgedAlpha] as Channels;\n    }\n\n    return Color(nudgedChannels);\n  }\n}\n","export const CSS = {\n  swatch: \"swatch\",\n  noColorSwatch: \"swatch--no-color\",\n  checker: \"checker\",\n};\n\nexport const COLORS = {\n  borderLight: \"rgba(0, 0, 0, 0.3)\",\n  borderDark: \"rgba(255, 255, 255, 0.15)\",\n};\n\nconst checkerSquareSize = 4;\n\nexport const CHECKER_DIMENSIONS = {\n  squareSize: checkerSquareSize,\n  size: checkerSquareSize * 2,\n};\n","$size-s: 20px;\n$size-m: 24px;\n$size-l: 28px;\n\n:host {\n  @apply relative inline-flex;\n}\n\n:host([scale=\"s\"]) {\n  @apply h-5 w-5;\n}\n\n:host([scale=\"m\"]) {\n  @apply h-6 w-6;\n}\n\n:host([scale=\"l\"]) {\n  @apply h-8 w-8;\n}\n\n.swatch {\n  @apply overflow-hidden;\n  block-size: inherit;\n  inline-size: inherit;\n\n  rect {\n    @apply transition-all duration-150 ease-in-out;\n  }\n}\n\n.swatch--no-color {\n  rect {\n    fill: var(--calcite-color-foreground-1);\n  }\n\n  line {\n    stroke: var(--calcite-color-status-danger);\n  }\n}\n\n.checker {\n  fill: #cacaca;\n}\n\n@include base-component();\n","import { Component, Element, Fragment, h, Prop, VNode, Watch } from \"@stencil/core\";\nimport Color from \"color\";\nimport { getModeName } from \"../../utils/dom\";\nimport { Scale } from \"../interfaces\";\nimport { hexify } from \"../color-picker/utils\";\nimport { CHECKER_DIMENSIONS, COLORS, CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-color-picker-swatch\",\n  styleUrl: \"color-picker-swatch.scss\",\n  shadow: true,\n})\nexport class ColorPickerSwatch {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   */\n  @Prop({\n    reflect: true,\n  })\n  active = false;\n\n  /**\n   * The color value.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\n   */\n  @Prop()\n  color: string | null;\n\n  @Watch(\"color\")\n  handleColorChange(color: string | null): void {\n    this.internalColor = color ? Color(color) : null;\n  }\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({\n    reflect: true,\n  })\n  scale: Scale = \"m\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerSwatchElement;\n\n  private internalColor: Color;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    this.handleColorChange(this.color);\n  }\n\n  render(): VNode {\n    const isEmpty = !this.internalColor;\n    const classes = {\n      [CSS.swatch]: true,\n      [CSS.noColorSwatch]: isEmpty,\n    };\n\n    return (\n      <svg class={classes} xmlns=\"http://www.w3.org/2000/svg\">\n        {this.renderSwatch()}\n      </svg>\n    );\n  }\n\n  renderSwatch(): VNode {\n    const { active, el, internalColor } = this;\n    const borderRadius = active ? \"100%\" : \"0\";\n    const theme = getModeName(el);\n    const borderColor = theme === \"light\" ? COLORS.borderLight : COLORS.borderDark;\n    const commonSwatchProps = {\n      height: \"100%\",\n      rx: borderRadius,\n      stroke: borderColor,\n\n      // stroke-width and clip-path are needed to hide overflowing portion of stroke\n      // see https://stackoverflow.com/a/7273346/194216\n\n      // using attribute to work around Stencil using the prop name vs the attribute when rendering\n      [\"stroke-width\"]: \"2\",\n      width: \"100%\",\n    };\n\n    const isEmpty = !internalColor;\n\n    if (isEmpty) {\n      return (\n        <Fragment>\n          <clipPath id=\"shape\">\n            <rect height=\"100%\" rx={borderRadius} width=\"100%\" />\n          </clipPath>\n          <rect\n            clip-path={`inset(0 round ${borderRadius})`}\n            rx={borderRadius}\n            {...commonSwatchProps}\n          />\n          <line clip-path=\"url(#shape)\" stroke-width=\"3\" x1=\"100%\" x2=\"0\" y1=\"0\" y2=\"100%\" />\n        </Fragment>\n      );\n    }\n\n    const alpha = internalColor.alpha();\n    const hex = hexify(internalColor);\n    const hexa = hexify(internalColor, alpha < 1);\n\n    return (\n      <Fragment>\n        <title>{hexa}</title>\n        <defs>\n          <pattern\n            height={CHECKER_DIMENSIONS.size}\n            id=\"checker\"\n            patternUnits=\"userSpaceOnUse\"\n            width={CHECKER_DIMENSIONS.size}\n            x=\"0\"\n            y=\"0\"\n          >\n            <rect\n              class={CSS.checker}\n              height={CHECKER_DIMENSIONS.squareSize}\n              width={CHECKER_DIMENSIONS.squareSize}\n              x=\"0\"\n              y=\"0\"\n            />\n            <rect\n              class={CSS.checker}\n              height={CHECKER_DIMENSIONS.squareSize}\n              width={CHECKER_DIMENSIONS.squareSize}\n              x={CHECKER_DIMENSIONS.squareSize}\n              y={CHECKER_DIMENSIONS.squareSize}\n            />\n          </pattern>\n        </defs>\n        <rect fill=\"url(#checker)\" height=\"100%\" rx={borderRadius} width=\"100%\" />\n        <rect\n          fill={hex}\n          style={{\n            \"clip-path\":\n              alpha < 1 ? \"polygon(100% 0, 0 0, 0 100%)\" : `inset(0 round ${borderRadius})`,\n          }}\n          {...commonSwatchProps}\n        />\n        {alpha < 1 ? (\n          <rect\n            fill={hexa}\n            key=\"opacity-fill\"\n            style={{ \"clip-path\": \"polygon(100% 0, 100% 100%, 0 100%)\" }}\n            {...commonSwatchProps}\n          />\n        ) : null}\n      </Fragment>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/calcite/p-99eb2c21.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+ * v2.13.0-next.1
+ */
+import{r as t,h as e,H as i,g as o,c as n,e as s,F as a}from"./p-17581615.js";import{C as c,s as r,k as l,g as d,D as h,t as b,H as f}from"./p-cbc54e80.js";import{g as u}from"./p-3cf89117.js";import{a as p,b as v,d as g}from"./p-bac694f0.js";import{c as m}from"./p-fbf41cbc.js";import{c as k,d as x}from"./p-a3136988.js";import{c as y,s as w,d as T,u as z}from"./p-62a45517.js";import{C}from"./p-d32e5254.js";import{I,u as S}from"./p-176e985b.js";import{g as H}from"./p-02522147.js";import{i as A}from"./p-6861beb6.js";import"./p-b92ebeef.js";const L={container:"container",content:"content"};const j=":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}.container{outline-color:transparent}.container:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([hidden]){display:none}[hidden]{display:none}";const B=j;const W=class{constructor(e){t(this,e);this.guid=`calcite-tab-title-${u()}`;this.tab=undefined;this.selected=false;this.scale="m";this.labeledBy=undefined}render(){const t=this.el.id||this.guid;return e(i,{key:"781e0b82d69d7ea6b2bd6e15ed0d1c5248f24d05","aria-labelledby":this.labeledBy,id:t},e("div",{key:"58a6be23b29e8bee598ecf0cd97ef0578fd4e197",class:{[L.container]:true,[`scale-${this.scale}`]:true},role:"tabpanel",tabIndex:this.selected?0:-1},e("section",{key:"fbff1dec6ca2494f2485528679c14b4b0741abd8",class:L.content},e("slot",{key:"fc52db6fd58bd87f137e887837df5c08772809a3"}))))}connectedCallback(){this.parentTabsEl=this.el.closest("calcite-tabs")}disconnectedCallback(){document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister",{detail:this.el}))}internalTabChangeHandler(t){const e=t.composedPath().find((t=>t.tagName==="CALCITE-TABS"));if(e!==this.parentTabsEl){return}if(this.tab){this.selected=this.tab===t.detail.tab}else{this.getTabIndex().then((e=>{this.selected=e===t.detail.tab}))}t.stopPropagation()}async getTabIndex(){return Array.prototype.indexOf.call(c(this.el.parentElement.children).filter((t=>t.matches("calcite-tab"))),this.el)}async updateAriaInfo(t=[],e=[]){this.labeledBy=e[t.indexOf(this.el.id)]||null}get el(){return o(this)}};W.style=B;const F={chevronRight:"chevron-right",chevronLeft:"chevron-left"};const E={container:"tab-nav",containerHasEndTabTitleOverflow:"tab-nav--end-overflow",containerHasStartTabTitleOverflow:"tab-nav--start-overflow",scrollButton:"scroll-button",scrollButtonContainer:"scroll-button-container",scrollBackwardContainerButton:"scroll-button-container--backward",scrollForwardContainerButton:"scroll-button-container--forward",tabTitleSlotWrapper:"tab-titles-slot-wrapper"};const O=':host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:"";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}';const R=O;const D=class{constructor(i){t(this,i);this.calciteTabChange=n(this,"calciteTabChange",6);this.calciteInternalTabNavSlotChange=n(this,"calciteInternalTabNavSlotChange",7);this.calciteInternalTabChange=n(this,"calciteInternalTabChange",6);this.effectiveDir="ltr";this.lastScrollWheelAxis="x";this.resizeObserver=m("resize",(()=>{this.updateScrollingState()}));this.onTabTitleWheel=t=>{t.preventDefault();const{deltaX:e,deltaY:i}=t;const o=Math.abs(e);const n=Math.abs(i);let s;if(o===n){s=this.lastScrollWheelAxis==="x"?e:i}else if(o>n){s=e;this.lastScrollWheelAxis="x"}else{s=i;this.lastScrollWheelAxis="y"}const a=(this.effectiveDir==="rtl"?-1:1)*s;t.currentTarget.scrollBy(a,0)};this.onSlotChange=t=>{this.intersectionObserver?.disconnect();const e=r(t,"calcite-tab-title");e.forEach((t=>{this.intersectionObserver?.observe(t)}));this.calciteInternalTabNavSlotChange.emit(e)};this.storeTabTitleWrapperRef=t=>{this.tabTitleContainerEl=t;this.intersectionObserver=m("intersection",(()=>this.updateScrollingState()),{root:t,threshold:[0,.5,1]})};this.scrollToTabTitles=t=>{s((()=>{const e=this.tabTitleContainerEl;const i=e.getBoundingClientRect();const o=Array.from(this.el.querySelectorAll("calcite-tab-title"));const{effectiveDir:n}=this;if(t==="forward"){o.reverse()}let s=null;o.forEach((e=>{const o=e.getBoundingClientRect();const a=i.x+i.width;const c=o.x+o.width;if(t==="forward"&&n==="ltr"||t==="backward"&&n==="rtl"){const t=o.x>a;if(t){s=e}else{const t=c>a&&o.x>i.x;if(t){s=e}}}else{const t=c<i.x;if(t){s=e}else{const t=c<a&&o.x<i.x;if(t){s=e}}}}));if(s){const{scrollerButtonWidth:i}=this;const o=t==="forward"&&n==="ltr"||t==="backward"&&n==="rtl"?-i:s.offsetWidth-e.clientWidth+i;const a=s.offsetLeft+o;e.scrollTo({left:a,behavior:"smooth"})}}))};this.scrollToNextTabTitles=()=>this.scrollToTabTitles("forward");this.scrollToPreviousTabTitles=()=>this.scrollToTabTitles("backward");this.handleTabFocus=(t,e,i)=>{const o=l(this.enabledTabTitles,e,i);this.scrollTabTitleIntoView(o,"instant");t.stopPropagation()};this.onTabTitleScroll=()=>{this.updateScrollingState()};this.renderScrollButton=t=>{const{bordered:i,messages:o,hasOverflowingStartTabTitle:n,hasOverflowingEndTabTitle:s,scale:a}=this;const c=t==="end";return e("div",{class:{[E.scrollButtonContainer]:true,[E.scrollBackwardContainerButton]:!c,[E.scrollForwardContainerButton]:c},hidden:c&&!s||!c&&!n,key:t},e("calcite-button",{appearance:i?"outline-fill":"transparent","aria-label":c?o.nextTabTitles:o.previousTabTitles,class:{[E.scrollButton]:true},iconFlipRtl:"both",iconStart:c?F.chevronRight:F.chevronLeft,kind:"neutral",onClick:c?this.scrollToNextTabTitles:this.scrollToPreviousTabTitles,scale:a,tabIndex:-1}))};this.storageId=undefined;this.syncId=undefined;this.selectedTitle=null;this.scale="m";this.layout="inline";this.position="bottom";this.bordered=false;this.messages=undefined;this.messageOverrides=undefined;this.defaultMessages=undefined;this.effectiveLocale="";this.hasOverflowingStartTabTitle=false;this.hasOverflowingEndTabTitle=false;this.selectedTabId=undefined}selectedTitleChanged(){this.calciteInternalTabChange.emit({tab:this.selectedTabId})}onMessagesChange(){}connectedCallback(){this.parentTabsEl=this.el.closest("calcite-tabs");this.resizeObserver?.observe(this.el);k(this);y(this)}async componentWillLoad(){const t=`calcite-tab-nav-${this.storageId}`;if(localStorage&&this.storageId&&localStorage.getItem(t)){const e=JSON.parse(localStorage.getItem(t));this.selectedTabId=e}await w(this)}componentDidLoad(){this.scrollTabTitleIntoView(this.selectedTitle,"instant")}componentWillRender(){const{parentTabsEl:t}=this;this.layout=t?.layout;this.bordered=t?.bordered;this.effectiveDir=d(this.el)}componentDidRender(){if(this.tabTitles.length&&this.tabTitles.every((t=>!t.selected))&&!this.selectedTabId){this.tabTitles[0].getTabIdentifier().then((t=>{this.calciteInternalTabChange.emit({tab:t})}))}}disconnectedCallback(){this.resizeObserver?.disconnect();x(this);T(this)}render(){return e(i,{key:"e2e130cc399d8bb88201f283de2eef17a46882fc",role:"tablist"},e("div",{key:"2beae02bec71c759201063e4820ce19cacd1c432",class:{[E.container]:true,[E.containerHasStartTabTitleOverflow]:!!this.hasOverflowingStartTabTitle,[E.containerHasEndTabTitleOverflow]:!!this.hasOverflowingEndTabTitle,[`scale-${this.scale}`]:true,[`position-${this.position}`]:true,[C.rtl]:this.effectiveDir==="rtl"}},this.renderScrollButton("start"),e("div",{key:"609a5b8efc1bd46810217ab17256aaad7432586b",class:{[E.tabTitleSlotWrapper]:true},onScroll:this.onTabTitleScroll,onWheel:this.onTabTitleWheel,ref:this.storeTabTitleWrapperRef},e("slot",{key:"7436f2fcacf2b483a77c741a2449f783c9c4c148",onSlotchange:this.onSlotChange})),this.renderScrollButton("end")))}focusPreviousTabHandler(t){this.handleTabFocus(t,t.target,"previous")}focusNextTabHandler(t){this.handleTabFocus(t,t.target,"next")}focusFirstTabHandler(t){this.handleTabFocus(t,t.target,"first")}focusLastTabHandler(t){this.handleTabFocus(t,t.target,"last")}internalActivateTabHandler(t){const e=t.target;this.selectedTabId=t.detail.tab?t.detail.tab:this.getIndexOfTabTitle(e);t.stopPropagation();this.selectedTitle=e;this.scrollTabTitleIntoView(e)}scrollTabTitleIntoView(t,e="smooth"){if(!t){return}s((()=>{const i=this.effectiveDir==="ltr";const o=this.tabTitleContainerEl;const n=o.getBoundingClientRect();const s=t.getBoundingClientRect();const a=o.scrollLeft;const c=i?this.hasOverflowingStartTabTitle:this.hasOverflowingEndTabTitle;const r=i?this.hasOverflowingEndTabTitle:this.hasOverflowingStartTabTitle;if(s.left<n.left+(c?this.scrollerButtonWidth:0)){const t=a+(s.left-n.left)-this.scrollerButtonWidth;o.scrollTo({left:t,behavior:e})}else if(s.right>n.right-(r?this.scrollerButtonWidth:0)){const t=a+(s.right-n.right)+this.scrollerButtonWidth;o.scrollTo({left:t,behavior:e})}}))}activateTabHandler(t){this.calciteTabChange.emit();t.stopPropagation()}internalCloseTabHandler(t){const e=t.target;this.handleTabTitleClose(e);t.stopPropagation()}async updateTabTitles(t){if(t.target.selected){this.selectedTabId=t.detail;this.selectedTitle=await this.getTabTitleById(this.selectedTabId)}}globalInternalTabChangeHandler(t){if(this.syncId&&t.target!==this.el&&t.target.syncId===this.syncId&&this.selectedTabId!==t.detail.tab){this.selectedTabId=t.detail.tab}t.stopPropagation()}effectiveLocaleChange(){z(this,this.effectiveLocale)}async selectedTabIdChanged(){if(localStorage&&this.storageId&&this.selectedTabId!==undefined&&this.selectedTabId!==null){localStorage.setItem(`calcite-tab-nav-${this.storageId}`,JSON.stringify(this.selectedTabId))}this.calciteInternalTabChange.emit({tab:this.selectedTabId})}get scrollerButtonWidth(){const{scale:t}=this;return parseInt(t==="s"?p:t==="m"?v:g)}updateScrollingState(){const t=this.tabTitleContainerEl;if(!t){return}let e;let i;const o=t.scrollLeft;const n=t.clientWidth;const s=t.scrollWidth;if(this.effectiveDir==="ltr"){e=o>0;i=o+n<s}else{e=o<0;i=o!==-(s-n)}this.hasOverflowingStartTabTitle=e;this.hasOverflowingEndTabTitle=i}getIndexOfTabTitle(t,e=this.tabTitles){return e.indexOf(t)}async getTabTitleById(t){return Promise.all(this.tabTitles.map((t=>t.getTabIdentifier()))).then((e=>this.tabTitles[e.indexOf(t)]))}get tabTitles(){return h(this.el,"calcite-tab-title")}get enabledTabTitles(){return h(this.el,"calcite-tab-title:not([disabled])").filter((t=>!t.closed))}handleTabTitleClose(t){const{tabTitles:e}=this;const i=t.selected;const o=e.reduce(((t,e,i)=>!e.closed?[...t,i]:t),[]);const n=o.length;if(n===1&&e[o[0]].closable){e[o[0]].closable=false;this.selectedTabId=o[0];if(i){e[o[0]].activateTab()}}else if(n>1){const i=e.findIndex((e=>e===t));const s=o.find((t=>t>i));if(this.selectedTabId===i){this.selectedTabId=s?s:n-1;e[this.selectedTabId].activateTab()}}requestAnimationFrame((()=>{e[this.selectedTabId].focus()}))}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{selectedTitle:["selectedTitleChanged"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"],selectedTabId:["selectedTabIdChanged"]}}};D.style=R;const P={closeButton:"close-button",container:"container",containerBottom:"container--bottom",content:"content",contentHasText:"content--has-text",iconEnd:"icon-end",iconPresent:"icon-present",iconStart:"icon-start",titleIcon:"calcite-tab-title--icon",scale:t=>`scale-${t}`,selectedIndicator:"selected-indicator"};const $={close:"x"};const N=':host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{position:relative;margin-block-end:0.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-s .close-button{inline-size:1.25rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-m .close-button{inline-size:1.75rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.scale-l .close-button{inline-size:2rem}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.selected-indicator{position:absolute;display:block;block-size:0.125rem;inline-size:100%;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]) .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered]) .container:not(.container--bottom){border-block-end:1px solid transparent}:host([bordered]:not([selected]):hover) .container:not(.container--bottom){border-block-end:1px solid var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([bordered][selected]) .container::after{position:absolute;display:block;block-size:0.125rem;inline-size:100%;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;background:var(--calcite-color-foreground-1);content:""}:host([bordered][selected]) .container.container--bottom::after{inset-block-start:-1px}:host([bordered][selected]:hover) .container::after{background:var(--calcite-color-foreground-2)}:host([bordered][selected]:focus) .container::after{background:transparent}:host([bordered]) .container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator{background-color:var(--calcite-color-brand)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-color-brand)}@media (forced-colors: active){.selected-indicator{background-color:highlight}}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}.close-button{display:flex;block-size:100%;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-inline-start:var(--calcite-spacing-sm);margin-inline-end:var(--calcite-spacing-px);block-size:calc(100% - var(--calcite-spacing-xxs))}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([bordered]) .container:not(.container--bottom) .close-button{block-size:calc(100% - var(--calcite-spacing-px));margin-block-start:-1px}:host([bordered]) .container .close-button calcite-icon{margin-block-start:var(--calcite-spacing-px)}:host([bordered]) .container .close-button:focus,:host([bordered]) .container .close-button:hover,:host([bordered]) .container .close-button:active{box-shadow:0 2px 0 0 var(--calcite-color-foreground-3)}:host([bordered]) .container.container--bottom .close-button{box-shadow:0 -2px 0 0 transparent}:host([bordered]) .container.container--bottom .close-button calcite-icon{margin-block-end:var(--calcite-spacing-px)}:host([bordered]) .container.container--bottom .close-button:focus,:host([bordered]) .container.container--bottom .close-button:hover,:host([bordered]) .container.container--bottom .close-button:active{box-shadow:0 -2px 0 0 var(--calcite-color-foreground-3)}:host([bordered][selected]){box-shadow:inset 0 -1px var(--calcite-color-foreground-1)}:host([bordered]:not([selected])) .container .close-button{box-shadow:0 2px 0 0 transparent}:host([bordered]:hover) .container{background-color:var(--calcite-color-foreground-2)}:host([bordered]) .container{border-inline:var(--calcite-spacing-px) solid transparent}:host([selected][bordered]) .container{border-inline-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered]) .container--bottom{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}';const M=N;const _=class{constructor(e){t(this,e);this.calciteTabsActivate=n(this,"calciteTabsActivate",6);this.calciteInternalTabsActivate=n(this,"calciteInternalTabsActivate",6);this.calciteTabsClose=n(this,"calciteTabsClose",6);this.calciteInternalTabsClose=n(this,"calciteInternalTabsClose",6);this.calciteInternalTabsFocusNext=n(this,"calciteInternalTabsFocusNext",6);this.calciteInternalTabsFocusPrevious=n(this,"calciteInternalTabsFocusPrevious",6);this.calciteInternalTabsFocusFirst=n(this,"calciteInternalTabsFocusFirst",6);this.calciteInternalTabsFocusLast=n(this,"calciteInternalTabsFocusLast",6);this.calciteInternalTabTitleRegister=n(this,"calciteInternalTabTitleRegister",6);this.calciteInternalTabIconChanged=n(this,"calciteInternalTabIconChanged",6);this.closeClickHandler=()=>{this.closeTabTitleAndNotify()};this.mutationObserver=m("mutation",(()=>this.updateHasText()));this.resizeObserver=m("resize",(()=>{this.calciteInternalTabIconChanged.emit()}));this.guid=`calcite-tab-title-${u()}`;this.selected=false;this.closable=false;this.closed=false;this.disabled=false;this.iconEnd=undefined;this.iconFlipRtl=undefined;this.iconStart=undefined;this.layout=undefined;this.position="top";this.scale="m";this.bordered=false;this.tab=undefined;this.messages=undefined;this.messageOverrides=undefined;this.controls=undefined;this.defaultMessages=undefined;this.effectiveLocale=undefined;this.hasText=false}selectedHandler(){if(this.selected){this.activateTab(false)}}onMessagesChange(){}connectedCallback(){k(this);y(this);this.setupTextContentObserver();this.parentTabNavEl=this.el.closest("calcite-tab-nav");this.parentTabsEl=this.el.closest("calcite-tabs")}disconnectedCallback(){this.mutationObserver?.disconnect();document.body?.dispatchEvent(new CustomEvent("calciteTabTitleUnregister",{detail:this.el}));this.resizeObserver?.disconnect();x(this);T(this)}async componentWillLoad(){await w(this);if(A()){this.updateHasText()}if(this.tab&&this.selected){this.activateTab(false)}}componentWillRender(){if(this.parentTabsEl){this.layout=this.parentTabsEl.layout;this.bordered=this.parentTabsEl.bordered}}render(){const{el:t,closed:o}=this;const n=t.id||this.guid;const s=e("calcite-icon",{key:"64fa92b612e8be997230698bd79e11de161a2e5d",class:{[P.titleIcon]:true,[P.iconStart]:true},flipRtl:this.iconFlipRtl==="start"||this.iconFlipRtl==="both",icon:this.iconStart,scale:H(this.scale)});const a=e("calcite-icon",{key:"5c25e211c6614e630d0cea61da30ba99cd18b779",class:{[P.titleIcon]:true,[P.iconEnd]:true},flipRtl:this.iconFlipRtl==="end"||this.iconFlipRtl==="both",icon:this.iconEnd,scale:H(this.scale)});return e(i,{key:"f35075c2c23e9cde98c50d65b91abccfafdc5d9a","aria-controls":this.controls,"aria-selected":b(this.selected),id:n,role:"tab",tabIndex:this.selected&&!this.disabled?0:-1},e(I,{key:"0ab2ccb83d503ae827cac3f11c0bdb23f6d1d6e5",disabled:this.disabled},e("div",{key:"a34c4b57593abfae9716bfa1ed8f10419d48f2a4",class:{[P.container]:true,[P.containerBottom]:this.position==="bottom",[P.iconPresent]:!!this.iconStart||!!this.iconEnd,[P.scale(this.scale)]:true},hidden:o,ref:t=>this.resizeObserver?.observe(t)},e("div",{key:"3788ba906fffc7666c815e79406906a56f162e23",class:{[P.content]:true,[P.contentHasText]:this.hasText}},this.iconStart?s:null,e("slot",{key:"74a6116ba66f66ec6304797fde099ce893f6ed2c"}),this.iconEnd?a:null),this.renderCloseButton(),e("div",{key:"1a75fd6e657a455aac81ec6bd6a39d10e0b86d7f",class:P.selectedIndicator}))))}renderCloseButton(){const{closable:t,messages:i}=this;return t?e("button",{"aria-label":i.close,class:P.closeButton,disabled:false,key:P.closeButton,onClick:this.closeClickHandler,ref:t=>this.closeButtonEl=t,title:i.close,type:"button"},e("calcite-icon",{icon:$.close,scale:H(this.scale)})):null}async componentDidLoad(){this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier())}componentDidRender(){S(this)}internalTabChangeHandler(t){const e=t.composedPath().find((t=>t.tagName==="CALCITE-TABS"));if(e!==this.parentTabsEl){return}if(this.tab){this.selected=this.tab===t.detail.tab}else{this.getTabIndex().then((e=>{this.selected=e===t.detail.tab}))}t.stopPropagation()}onClick(){this.activateTab()}keyDownHandler(t){switch(t.key){case" ":case"Enter":if(!t.composedPath().includes(this.closeButtonEl)){this.activateTab();t.preventDefault()}break;case"ArrowRight":t.preventDefault();if(d(this.el)==="ltr"){this.calciteInternalTabsFocusNext.emit()}else{this.calciteInternalTabsFocusPrevious.emit()}break;case"ArrowLeft":t.preventDefault();if(d(this.el)==="ltr"){this.calciteInternalTabsFocusPrevious.emit()}else{this.calciteInternalTabsFocusNext.emit()}break;case"Home":t.preventDefault();this.calciteInternalTabsFocusFirst.emit();break;case"End":t.preventDefault();this.calciteInternalTabsFocusLast.emit();break}}async getTabIndex(){return Array.prototype.indexOf.call(c(this.el.parentElement.children).filter((t=>t.matches("calcite-tab-title"))),this.el)}async getTabIdentifier(){return this.tab?this.tab:this.getTabIndex()}async updateAriaInfo(t=[],e=[]){this.controls=t[e.indexOf(this.el.id)]||null}async activateTab(t=true){if(this.disabled||this.closed){return}const e={tab:this.tab};this.calciteInternalTabsActivate.emit(e);if(t){requestAnimationFrame((()=>this.calciteTabsActivate.emit()))}}effectiveLocaleChange(){z(this,this.effectiveLocale)}updateHasText(){this.hasText=this.el.textContent.trim().length>0}setupTextContentObserver(){this.mutationObserver?.observe(this.el,{childList:true,subtree:true})}closeTabTitleAndNotify(){this.closed=true;this.calciteInternalTabsClose.emit({tab:this.tab});this.calciteTabsClose.emit()}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{selected:["selectedHandler"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};_.style=M;const q={titleGroup:"title-group"};const J=":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";const U=J;const G=class{constructor(e){t(this,e);this.defaultSlotChangeHandler=t=>{this.tabs=r(t,"calcite-tab")};this.setDefaultSlotRef=t=>this.slotEl=t;this.layout="inline";this.position="top";this.scale="m";this.bordered=false;this.titles=[];this.tabs=[]}handleInheritableProps(){this.updateItems()}calciteInternalTabNavSlotChangeHandler(t){t.stopPropagation();if(t.detail.length!==this.titles.length){this.titles=t.detail}}titlesWatcher(){this.updateAriaSettings();this.updateItems()}tabsWatcher(){this.updateAriaSettings();this.updateItems()}async updateAriaSettings(){let t;let e;const i=f(this.slotEl,"calcite-tab");if(i.some((t=>t.tab))||this.titles.some((t=>t.tab))){t=i.sort(((t,e)=>t.tab.localeCompare(e.tab))).map((t=>t.id));e=this.titles.sort(((t,e)=>t.tab.localeCompare(e.tab))).map((t=>t.id))}else{const o=await Promise.all(i.map((t=>t.getTabIndex())));const n=await Promise.all(this.titles.map((t=>t.getTabIndex())));t=o.reduce(((t,e,o)=>{t[e]=i[o].id;return t}),[]);e=n.reduce(((t,e,i)=>{t[e]=this.titles[i].id;return t}),[])}i.forEach((i=>i.updateAriaInfo(t,e)));this.titles.forEach((i=>i.updateAriaInfo(t,e)))}updateItems(){const{position:t,scale:e}=this;const i=this.el.querySelector("calcite-tab-nav");if(i){i.position=t;i.scale=e}Array.from(this.el.querySelectorAll("calcite-tab")).forEach((t=>{if(t.parentElement===this.el){t.scale=e}}));Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((i=>{i.position=t;i.scale=e}))}connectedCallback(){this.updateItems()}async componentWillLoad(){this.updateItems()}disconnectedCallback(){}render(){return e(a,{key:"300872682f4f969586b06b6bbfa5cccb5a005e03"},e("slot",{key:"9b8c09c2f93725349a98d13fb0167c88b82ef413",name:q.titleGroup}),e("section",{key:"bf1b19251ca8ab3ba4c3c3fa15995889d71d9355"},e("slot",{key:"e1008e065225b4f0cb1b4fbe2ec91ab761db1144",onSlotchange:this.defaultSlotChangeHandler,ref:this.setDefaultSlotRef})))}get el(){return o(this)}static get watchers(){return{position:["handleInheritableProps"],scale:["handleInheritableProps"],titles:["titlesWatcher"],tabs:["tabsWatcher"]}}};G.style=U;export{W as calcite_tab,D as calcite_tab_nav,_ as calcite_tab_title,G as calcite_tabs};
+//# sourceMappingURL=p-99eb2c21.entry.js.map