@ember-eui/core 15.0.0 → 16.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"eui-color-picker.js","sources":["../../src/components/eui-color-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { next } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport chroma from 'chroma-js';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  getChromaColor,\n  HEX_FALLBACK,\n  HSV_FALLBACK,\n  parseColor,\n  RGB_FALLBACK,\n  RGB_JOIN,\n  VISUALIZATION_COLORS\n} from '../-private/color.ts';\nimport cssStyle from '../-private/css-style.ts';\nimport { randomId } from '../-private/random-id.ts';\nimport EuiColorPickerSwatch from './eui-color-picker-swatch.gts';\nimport EuiFieldText from './eui-field-text.gts';\nimport EuiFormRow from './eui-form-row.gts';\nimport EuiHue from './eui-hue.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiRange from './eui-range.gts';\nimport EuiSaturation from './eui-saturation.gts';\nimport EuiSpacer from './eui-spacer.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { HSV, RGBA } from '../-private/color.ts';\nimport type Owner from '@ember/owner';\n\nexport interface EuiColorPickerOutput {\n  /** The color as `[r, g, b, a]` (`NaN`s when invalid). */\n  rgba: RGBA;\n  /** The color as hex (`''` when invalid). */\n  hex: string;\n  /** Whether the text is a valid color (opaque, unless `@showAlpha`). */\n  isValid: boolean;\n}\n\n/**\n * A color field: a text input showing the color (hex or `r, g, b`) that\n * opens a popover to pick it from a saturation square and a hue slider,\n * and from swatches. You keep the color: `@onChange` gets the new text and\n * `{ hex, rgba, isValid }`.\n */\nexport interface EuiColorPickerSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The color: a hex string (`'#D36086'`), `'r, g, b'`, or `''`. */\n    color?: string;\n    /** Called with the new color text and `{ hex, rgba, isValid }`. */\n    onChange: (text: string, output: EuiColorPickerOutput) => void;\n    /**\n     * `'default'` (square, hue and swatches), `'picker'` (no swatches),\n     * `'swatch'` (only swatches) or `'secondaryInput'` (only the text\n     * field set by `@secondaryInputDisplay`). Defaults to `'default'`.\n     */\n    mode?: 'default' | 'picker' | 'swatch' | 'secondaryInput';\n    /** `'default'` (a field opening a popover) or `'inline'` (the picker itself). */\n    display?: 'default' | 'inline';\n    /** The swatches. Defaults to EUI's color-blind safe palette. */\n    swatches?: string[];\n    /** Adds an opacity slider; the color can then have an alpha channel. */\n    showAlpha?: boolean;\n    /** `'hex'` or `'rgba'` output. Defaults to the format of `@color`. */\n    format?: 'hex' | 'rgba';\n    /**\n     * A text field inside the popover: `'top'`, `'bottom'` or `'none'`.\n     * Defaults to `'none'`.\n     */\n    secondaryInputDisplay?: 'top' | 'bottom' | 'none';\n    /** Adds a button clearing the color. */\n    isClearable?: boolean;\n    /** Placeholder while empty. Defaults to \"Transparent\". */\n    placeholder?: string;\n    /** Smaller field. */\n    compressed?: boolean;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n    /** Disables it. */\n    disabled?: boolean;\n    /** Read-only: the popover does not open. */\n    readOnly?: boolean;\n    /** Invalid look. */\n    isInvalid?: boolean;\n    /** `id` of the input. */\n    id?: string;\n    /** Called when the popover opens. */\n    onFocus?: () => void;\n    /** Called when the field loses focus or the popover closes. */\n    onBlur?: () => void;\n  };\n  Blocks: {\n    /**\n     * A custom trigger instead of the field (e.g. a swatch button); yields\n     * the function toggling the popover.\n     */\n    button: [toggle: () => void];\n    /** Content before the field; yields the class to put on it. */\n    prepend: [className: string, inputId: string];\n    /** Content after the field; yields the class to put on it. */\n    append: [className: string, inputId: string];\n  };\n}\n\nfunction hsvOf(color: ReturnType<typeof getChromaColor>, fallbackHue = 0): HSV {\n  if (!color) return HSV_FALLBACK;\n\n  const [h, s, v] = color.hsv();\n\n  // black, white and grays have no hue\n  return [isNaN(h) ? fallbackHue : h, s, v];\n}\n\nexport default class EuiColorPicker extends Component<EuiColorPickerSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isColorSelectorShown = false;\n  @tracked colorAsHsv: HSV;\n  @tracked alphaInput?: string;\n\n  ownId = `euiColorPicker_${randomId()}`;\n  prevColor: string | null;\n  input?: HTMLInputElement;\n  saturation?: HTMLElement;\n  firstSwatch?: HTMLElement;\n\n  constructor(owner: Owner, args: EuiColorPickerSignature['Args']) {\n    super(owner, args);\n\n    const color = getChromaColor(args.color, args.showAlpha);\n\n    this.prevColor = color ? color.rgba().join() : null;\n    this.colorAsHsv = color ? hsvOf(color) : HSV_FALLBACK;\n  }\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get mode(): string {\n    return this.args.mode ?? 'default';\n  }\n\n  get secondaryInputDisplay(): string {\n    return this.args.secondaryInputDisplay ?? 'none';\n  }\n\n  get chromaColor(): ReturnType<typeof getChromaColor> {\n    return getChromaColor(this.args.color, this.args.showAlpha);\n  }\n\n  get preferredFormat(): 'hex' | 'rgba' {\n    if (this.args.format) return this.args.format;\n\n    const parsed = parseColor(this.args.color);\n\n    return parsed !== null && typeof parsed === 'object' ? 'rgba' : 'hex';\n  }\n\n  get alphaChannel(): number {\n    return this.chromaColor ? this.chromaColor.alpha() : 1;\n  }\n\n  get alphaRangeValue(): number {\n    return Number(this.alphaInput ?? (this.alphaChannel * 100).toFixed());\n  }\n\n  /** The color as HSV; the hue is kept for colors without one. */\n  get usableHsv(): HSV {\n    const color = this.chromaColor;\n\n    if (color && color.rgba().join() !== this.prevColor) {\n      return hsvOf(color, this.colorAsHsv[0]);\n    }\n\n    return this.colorAsHsv;\n  }\n\n  get hex(): string | undefined {\n    return this.chromaColor?.hex();\n  }\n\n  get inputValue(): string {\n    return this.args.color ? this.args.color.toUpperCase() : HEX_FALLBACK;\n  }\n\n  get placeholder(): string | undefined {\n    if (this.args.color) return undefined;\n\n    return this.args.placeholder ?? this.euiI18n.lookupToken('euiColorPicker.transparent', 'Transparent');\n  }\n\n  get showPicker(): boolean {\n    return this.mode !== 'swatch' && this.mode !== 'secondaryInput';\n  }\n\n  get showSwatches(): boolean {\n    return this.mode !== 'picker' && this.mode !== 'secondaryInput';\n  }\n\n  get swatches(): string[] {\n    return this.args.swatches ?? VISUALIZATION_COLORS;\n  }\n\n  get canClear(): boolean {\n    return Boolean(this.args.isClearable && this.args.color && !this.args.readOnly && !this.args.disabled);\n  }\n\n  get panelClasses(): string {\n    return [\n      'euiColorPicker__popoverPanel',\n      this.mode === 'picker' &&\n        this.secondaryInputDisplay !== 'bottom' &&\n        'euiColorPicker__popoverPanel--pickerOnly'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get labels(): {\n    popover: string;\n    color: string;\n    error: string;\n    alpha: string;\n    open: string;\n    closed: string;\n  } {\n    const t = (token: string, text: string) => this.euiI18n.lookupToken(`euiColorPicker.${token}`, text);\n\n    return {\n      popover: t('popoverLabel', 'Color selection dialog'),\n      color: t('colorLabel', 'Color value'),\n      error: t('colorErrorMessage', 'Invalid color value'),\n      alpha: t('alphaLabel', 'Alpha channel (opacity) value'),\n      open: t('openLabel', 'Press the escape key to close the popover'),\n      closed: t('closeLabel', 'Press the down key to open a popover containing color options')\n    };\n  }\n\n  output(text: string): EuiColorPickerOutput {\n    const color = getChromaColor(text, true);\n\n    if (!color) return { rgba: RGB_FALLBACK, hex: HEX_FALLBACK, isValid: false };\n\n    // without @showAlpha a transparent color is returned but invalid\n    return {\n      rgba: color.rgba() as RGBA,\n      hex: color.hex(),\n      isValid: this.args.showAlpha ? true : color.alpha() === 1\n    };\n  }\n\n  change(text: string): void {\n    const output = this.output(text);\n\n    if (output.isValid) this.prevColor = output.rgba.join();\n    this.args.onChange(text, output);\n  }\n\n  updateColorAsHsv(hsv: HSV): void {\n    this.colorAsHsv = [isNaN(hsv[0]) ? this.usableHsv[0] : hsv[0], hsv[1], hsv[2]];\n  }\n\n  updateWithHsv(hsv: HSV): void {\n    const color = chroma.hsv(...hsv).alpha(this.alphaChannel);\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (this.alphaChannel < 1 ? color.rgba() : color.rgb()).join(RGB_JOIN)\n        : color.hex();\n\n    this.change(text);\n    this.updateColorAsHsv(hsv);\n  }\n\n  @action\n  showColorSelector(): void {\n    if (this.isColorSelectorShown || this.args.readOnly) return;\n\n    this.args.onFocus?.();\n    this.isColorSelectorShown = true;\n  }\n\n  @action\n  closeColorSelector(): void {\n    this.args.onBlur?.();\n    this.isColorSelectorShown = false;\n  }\n\n  @action\n  toggle(): void {\n    if (this.isColorSelectorShown) this.closeColorSelector();\n    else this.showColorSelector();\n  }\n\n  /** Closes the popover and returns to the field, to keep adjusting. */\n  @action\n  finalSelection(): void {\n    this.input?.focus();\n    next(this, this.closeColorSelector);\n  }\n\n  @action\n  onInputClick(): void {\n    this.showColorSelector();\n  }\n\n  @action\n  onInputKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  @action\n  onInputBlur(): void {\n    // closing the popover calls onBlur already\n    if (!this.isColorSelectorShown) this.args.onBlur?.();\n  }\n\n  /** Arrow down opens the popover, then moves into it. */\n  @action\n  onLayoutKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'ArrowDown') return;\n\n    event.preventDefault();\n\n    if (!this.isColorSelectorShown) {\n      this.showColorSelector();\n\n      return;\n    }\n\n    (this.mode !== 'swatch' ? this.saturation : this.firstSwatch)?.focus();\n  }\n\n  /** Enter in the picker confirms the color. */\n  @action\n  onPickerKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter') return;\n\n    if (this.isColorSelectorShown) this.finalSelection();\n    else this.showColorSelector();\n  }\n\n  @action\n  onColorInput(event: Event): void {\n    const text = (event.target as HTMLInputElement).value;\n    const color = getChromaColor(text, this.args.showAlpha);\n\n    this.change(text);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n  }\n\n  @action\n  clear(): void {\n    this.change('');\n\n    if (this.secondaryInputDisplay === 'none' && this.isColorSelectorShown) {\n      this.closeColorSelector();\n    }\n  }\n\n  @action\n  onSaturationChange([, s, v]: HSV): void {\n    this.updateWithHsv([this.usableHsv[0], s, v]);\n  }\n\n  @action\n  onHueChange(hue: number): void {\n    const [, s, v] = this.usableHsv;\n\n    this.updateWithHsv([hue, s, v]);\n  }\n\n  @action\n  onSwatchClick(swatch: string): void {\n    const color = getChromaColor(swatch, this.args.showAlpha);\n\n    this.change(swatch);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n    this.finalSelection();\n  }\n\n  @action\n  onAlphaChange(event: Event, isValid: boolean): void {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.alphaInput = value;\n\n    if (!isValid) return;\n\n    const alpha = parseInt(value, 10) / 100;\n    const color = this.chromaColor ? this.chromaColor.alpha(alpha) : null;\n    const hex = color ? color.hex() : HEX_FALLBACK;\n    const rgba = (color ? color.rgba() : RGB_FALLBACK) as RGBA;\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (alpha < 1 ? rgba : rgba.slice(0, 3)).join(RGB_JOIN)\n        : hex;\n\n    this.alphaInput = undefined;\n    this.args.onChange(text, { hex, rgba, isValid: Boolean(color) });\n  }\n\n  registerInput = (element: HTMLInputElement | null): void => {\n    this.input = element ?? undefined;\n  };\n\n  registerSaturation = modifier((element: HTMLElement) => {\n    this.saturation = element;\n  });\n\n  registerFirstSwatch = modifier((element: HTMLElement, [index]: [number]) => {\n    if (index === 0) this.firstSwatch = element;\n  });\n\n  <template>\n    {{#if (isInline @display)}}\n      <div class=\"euiColorPicker\" ...attributes>\n        <Composite\n          @picker={{this}}\n          @isInvalid={{@isInvalid}}\n          @disabled={{@disabled}}\n          @readOnly={{@readOnly}}\n          @compressed={{@compressed}}\n          @showAlpha={{@showAlpha}}\n        />\n      </div>\n    {{else}}\n      <EuiPopover\n        class=\"euiColorPicker__popoverAnchor\"\n        @isOpen={{this.isColorSelectorShown}}\n        @closePopover={{this.finalSelection}}\n        @panelClassName={{this.panelClasses}}\n        @display={{if (has-block \"button\") \"inlineBlock\" \"block\"}}\n        @attachToAnchor={{if (has-block \"button\") false true}}\n        @anchorPosition=\"downLeft\"\n        @panelPaddingSize=\"s\"\n        @ownFocus={{false}}\n        @initialFocus={{false}}\n        @ariaLabel={{this.labels.popover}}\n      >\n        <:button>\n          {{#if (has-block \"button\")}}\n            {{yield this.toggle to=\"button\"}}\n          {{else}}\n            {{! the chosen color reaches the swatch icon through currentColor }}\n            <div\n              style={{cssStyle (hash color=(cssColor this.chromaColor))}}\n              {{on \"keydown\" this.onLayoutKeyDown}}\n            >\n              {{#if (or2 (has-block \"prepend\") (has-block \"append\"))}}\n                <EuiFieldText\n                  class=\"euiColorPicker__input euiColorPicker__input--inGroup\"\n                  id={{this.id}}\n                  autocomplete=\"off\"\n                  aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}}\n                  @value={{this.inputValue}}\n                  @placeholder={{this.placeholder}}\n                  @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}}\n                  @clear={{if this.canClear this.clear}}\n                  @isInvalid={{@isInvalid}}\n                  @compressed={{@compressed}}\n                  @disabled={{@disabled}}\n                  @readOnly={{@readOnly}}\n                  @fullWidth={{@fullWidth}}\n                  @inputRef={{this.registerInput}}\n                  {{on \"click\" this.onInputClick}}\n                  {{on \"keydown\" this.onInputKeyDown}}\n                  {{on \"blur\" this.onInputBlur}}\n                  {{on \"input\" this.onColorInput}}\n                >\n                  <:prepend as |className inputId|>{{yield className inputId to=\"prepend\"}}</:prepend>\n                  <:append as |className inputId|>{{yield className inputId to=\"append\"}}</:append>\n                </EuiFieldText>\n              {{else}}\n                <EuiFieldText\n                  class=\"euiColorPicker__input\"\n                  id={{this.id}}\n                  autocomplete=\"off\"\n                  aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}}\n                  @value={{this.inputValue}}\n                  @placeholder={{this.placeholder}}\n                  @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}}\n                  @clear={{if this.canClear this.clear}}\n                  @isInvalid={{@isInvalid}}\n                  @compressed={{@compressed}}\n                  @disabled={{@disabled}}\n                  @readOnly={{@readOnly}}\n                  @fullWidth={{@fullWidth}}\n                  @inputRef={{this.registerInput}}\n                  {{on \"click\" this.onInputClick}}\n                  {{on \"keydown\" this.onInputKeyDown}}\n                  {{on \"blur\" this.onInputBlur}}\n                  {{on \"input\" this.onColorInput}}\n                />\n              {{/if}}\n            </div>\n          {{/if}}\n        </:button>\n        <:content>\n          <div class=\"euiColorPicker\" data-test-subj=\"euiColorPickerPopover\" ...attributes>\n            <Composite\n          @picker={{this}}\n          @isInvalid={{@isInvalid}}\n          @disabled={{@disabled}}\n          @readOnly={{@readOnly}}\n          @compressed={{@compressed}}\n          @showAlpha={{@showAlpha}}\n        />\n          </div>\n        </:content>\n      </EuiPopover>\n    {{/if}}\n  </template>\n}\n\ninterface CompositeSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    compressed?: boolean;\n    showAlpha?: boolean;\n  };\n}\n\n/** The saturation square, hue slider, swatches and secondary input. */\nclass Composite extends Component<CompositeSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    {{#if (eq2 this.picker.secondaryInputDisplay \"top\")}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n        @compressed={{@compressed}}\n      />\n      <EuiSpacer @size=\"s\" />\n    {{/if}}\n    {{#if this.picker.showPicker}}\n      <div {{on \"keydown\" this.picker.onPickerKeyDown}}>\n        <EuiSaturation\n          @id={{this.picker.id}}\n          @color={{this.picker.usableHsv}}\n          @hex={{this.picker.hex}}\n          @onChange={{this.picker.onSaturationChange}}\n          {{this.picker.registerSaturation}}\n        />\n        <EuiHue\n          @id={{this.picker.id}}\n          @hue={{hueOf this.picker.usableHsv}}\n          @hex={{this.picker.hex}}\n          @onChange={{this.picker.onHueChange}}\n        />\n      </div>\n    {{/if}}\n    {{#if this.picker.showSwatches}}\n      <ul class=\"euiColorPicker__swatches\">\n        {{#each this.picker.swatches as |swatch index|}}\n          <li class=\"euiColorPicker__swatch-item\">\n            <EuiColorPickerSwatch\n              class=\"euiColorPicker__swatchSelect\"\n              @color={{swatch}}\n              {{on \"click\" (fn this.picker.onSwatchClick swatch)}}\n              {{this.picker.registerFirstSwatch index}}\n            />\n          </li>\n        {{/each}}\n      </ul>\n    {{/if}}\n    {{#if (eq2 this.picker.secondaryInputDisplay \"bottom\")}}\n      {{#if (notEq2 this.picker.mode \"picker\")}}\n        <EuiSpacer @size=\"s\" />\n      {{/if}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n        @compressed={{@compressed}}\n      />\n    {{/if}}\n    {{#if @showAlpha}}\n      <EuiSpacer @size=\"s\" />\n      <EuiRange\n        class=\"euiColorPicker__alphaRange\"\n        data-test-subj=\"euiColorPickerAlpha\"\n        aria-label={{this.picker.labels.alpha}}\n        @compressed={{true}}\n        @showInput={{true}}\n        @min={{0}}\n        @max={{100}}\n        @value={{this.picker.alphaRangeValue}}\n        @onChange={{this.picker.onAlphaChange}}\n      />\n    {{/if}}\n  </template>\n}\n\ninterface SecondaryInputSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    compressed?: boolean;\n  };\n}\n\nclass SecondaryInput extends Component<SecondaryInputSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    <EuiFormRow\n      @display=\"rowCompressed\"\n      @isInvalid={{@isInvalid}}\n      @error={{if @isInvalid this.picker.labels.error}}\n    >\n      <EuiFieldText\n        data-test-subj=\"euiColorPickerInput_{{this.picker.secondaryInputDisplay}}\"\n        autocomplete=\"off\"\n        aria-label={{this.picker.labels.color}}\n        @compressed={{true}}\n        @value={{this.picker.inputValue}}\n        @placeholder={{this.picker.placeholder}}\n        @clear={{if this.picker.canClear this.picker.clear}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n        {{on \"input\" this.picker.onColorInput}}\n      />\n    </EuiFormRow>\n  </template>\n}\n\nfunction hueOf(hsv: HSV): number {\n  return hsv[0];\n}\n\nfunction isInline(display?: string): boolean {\n  return display === 'inline';\n}\n\nfunction cssColor(color: ReturnType<typeof getChromaColor>): string | undefined {\n  return color ? color.css() : undefined;\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction eq2(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n\nfunction notEq2(a: unknown, b: unknown): boolean {\n  return a !== b;\n}\n"],"names":["hsvOf","color","fallbackHue","HSV_FALLBACK","h","s","v","hsv","isNaN","EuiColorPicker","Component","g","prototype","service","i","tracked","ownId","randomId","prevColor","input","saturation","firstSwatch","constructor","owner","args","getChromaColor","showAlpha","rgba","join","colorAsHsv","id","mode","secondaryInputDisplay","chromaColor","preferredFormat","format","parsed","parseColor","alphaChannel","alpha","alphaRangeValue","Number","alphaInput","toFixed","usableHsv","hex","inputValue","toUpperCase","HEX_FALLBACK","placeholder","undefined","euiI18n","lookupToken","showPicker","showSwatches","swatches","VISUALIZATION_COLORS","canClear","Boolean","isClearable","readOnly","disabled","panelClasses","filter","labels","t","token","text","popover","error","open","closed","output","RGB_FALLBACK","isValid","change","onChange","updateColorAsHsv","updateWithHsv","chroma","rgb","RGB_JOIN","showColorSelector","isColorSelectorShown","onFocus","n","action","closeColorSelector","onBlur","toggle","finalSelection","focus","next","onInputClick","onInputKeyDown","event","key","preventDefault","onInputBlur","onLayoutKeyDown","onPickerKeyDown","onColorInput","target","value","clear","onSaturationChange","onHueChange","hue","onSwatchClick","swatch","onAlphaChange","parseInt","slice","registerInput","element","registerSaturation","modifier","registerFirstSwatch","index","setComponentTemplate","precompileTemplate","strictMode","scope","isInline","Composite","EuiPopover","cssStyle","hash","cssColor","on","or2","EuiFieldText","picker","eq2","SecondaryInput","EuiSpacer","EuiSaturation","EuiHue","hueOf","EuiColorPickerSwatch","fn","notEq2","EuiRange","EuiFormRow","display","css","a","b"],"mappings":"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"}
+{"version":3,"file":"eui-color-picker.js","sources":["../../src/components/eui-color-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { next } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport chroma from 'chroma-js';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  getChromaColor,\n  HEX_FALLBACK,\n  HSV_FALLBACK,\n  parseColor,\n  RGB_FALLBACK,\n  RGB_JOIN\n} from '../-private/color.ts';\nimport { randomId } from '../-private/random-id.ts';\nimport { useEuiPaletteColorBlind } from '../utils/color/eui_palettes.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { boxReset, listReset } from '../utils/eui/color-picker.ts';\nimport { euiColorPickerStyles } from '../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport EuiColorPickerSwatch from './eui-color-picker-swatch.gts';\nimport EuiFieldText from './eui-field-text.gts';\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiFormLabel from './eui-form-label.gts';\nimport EuiFormRow from './eui-form-row.gts';\nimport EuiHue from './eui-hue.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiRange from './eui-range.gts';\nimport EuiSaturation from './eui-saturation.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { HSV, RGBA } from '../-private/color.ts';\nimport type Owner from '@ember/owner';\n\nexport interface EuiColorPickerOutput {\n  /** The color as `[r, g, b, a]` (`NaN`s when invalid). */\n  rgba: RGBA;\n  /** The color as hex (`''` when invalid). */\n  hex: string;\n  /** Whether the text is a valid color (opaque, unless `@showAlpha`). */\n  isValid: boolean;\n}\n\n/**\n * A color field: a text input showing the color (hex or `r, g, b`) that\n * opens a popover to pick it from a saturation square and a hue slider,\n * and from swatches. You keep the color: `@onChange` gets the new text and\n * `{ hex, rgba, isValid }`.\n */\nexport interface EuiColorPickerSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The color: a hex string (`'#D36086'`), `'r, g, b'`, or `''`. */\n    color?: string;\n    /** Called with the new color text and `{ hex, rgba, isValid }`. */\n    onChange: (text: string, output: EuiColorPickerOutput) => void;\n    /**\n     * `'default'` (square, hue and swatches), `'picker'` (no swatches),\n     * `'swatch'` (only swatches) or `'secondaryInput'` (only the text\n     * field set by `@secondaryInputDisplay`). Defaults to `'default'`.\n     */\n    mode?: 'default' | 'picker' | 'swatch' | 'secondaryInput';\n    /** `'default'` (a field opening a popover) or `'inline'` (the picker itself). */\n    display?: 'default' | 'inline';\n    /** The swatches. Defaults to EUI's color-blind safe palette. */\n    swatches?: string[];\n    /** Adds an opacity slider; the color can then have an alpha channel. */\n    showAlpha?: boolean;\n    /** `'hex'` or `'rgba'` output. Defaults to the format of `@color`. */\n    format?: 'hex' | 'rgba';\n    /**\n     * A text field inside the popover: `'top'`, `'bottom'` or `'none'`.\n     * Defaults to `'none'`.\n     */\n    secondaryInputDisplay?: 'top' | 'bottom' | 'none';\n    /** Adds a button clearing the color. */\n    isClearable?: boolean;\n    /** Placeholder while empty. Defaults to \"Transparent\". */\n    placeholder?: string;\n    /** Smaller field. */\n    compressed?: boolean;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n    /** Disables it. */\n    disabled?: boolean;\n    /**\n     * z-index of the color selector popover. Defaults to the anchor's\n     * z-index + 2000, as in EuiPopover.\n     */\n    popoverZIndex?: number;\n    /** Read-only: the popover does not open. */\n    readOnly?: boolean;\n    /** Invalid look. */\n    isInvalid?: boolean;\n    /** `id` of the input. */\n    id?: string;\n    /** Called when the popover opens. */\n    onFocus?: () => void;\n    /** Called when the field loses focus or the popover closes. */\n    onBlur?: () => void;\n  };\n  Blocks: {\n    /**\n     * A custom trigger instead of the field (e.g. a swatch button); yields\n     * the function toggling the popover.\n     */\n    button: [toggle: () => void];\n    /** Content before the field; yields the class to put on it. */\n    prepend: [className: string, inputId: string];\n    /** Content after the field; yields the class to put on it. */\n    append: [className: string, inputId: string];\n  };\n}\n\nfunction hsvOf(color: ReturnType<typeof getChromaColor>, fallbackHue = 0): HSV {\n  if (!color) return HSV_FALLBACK;\n\n  const [h, s, v] = color.hsv();\n\n  // black, white and grays have no hue\n  return [isNaN(h) ? fallbackHue : h, s, v];\n}\n\nexport default class EuiColorPicker extends Component<EuiColorPickerSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isColorSelectorShown = false;\n  @tracked colorAsHsv: HSV;\n  @tracked alphaInput?: string;\n\n  ownId = `euiColorPicker_${randomId()}`;\n  openLabelId = `${this.ownId}-openLabel`;\n  closeLabelId = `${this.ownId}-closeLabel`;\n  prevColor: string | null;\n  input?: HTMLInputElement;\n  saturation?: HTMLElement;\n  firstSwatch?: HTMLElement;\n\n  constructor(owner: Owner, args: EuiColorPickerSignature['Args']) {\n    super(owner, args);\n\n    const color = getChromaColor(args.color, args.showAlpha);\n\n    this.prevColor = color ? color.rgba().join() : null;\n    this.colorAsHsv = color ? hsvOf(color) : HSV_FALLBACK;\n  }\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get mode(): string {\n    return this.args.mode ?? 'default';\n  }\n\n  get secondaryInputDisplay(): string {\n    return this.args.secondaryInputDisplay ?? 'none';\n  }\n\n  get chromaColor(): ReturnType<typeof getChromaColor> {\n    return getChromaColor(this.args.color, this.args.showAlpha);\n  }\n\n  get preferredFormat(): 'hex' | 'rgba' {\n    if (this.args.format) return this.args.format;\n\n    const parsed = parseColor(this.args.color);\n\n    return parsed !== null && typeof parsed === 'object' ? 'rgba' : 'hex';\n  }\n\n  get alphaChannel(): number {\n    return this.chromaColor ? this.chromaColor.alpha() : 1;\n  }\n\n  get alphaRangeValue(): number {\n    return Number(this.alphaInput ?? (this.alphaChannel * 100).toFixed());\n  }\n\n  /** The color as HSV; the hue is kept for colors without one. */\n  get usableHsv(): HSV {\n    const color = this.chromaColor;\n\n    if (color && color.rgba().join() !== this.prevColor) {\n      return hsvOf(color, this.colorAsHsv[0]);\n    }\n\n    return this.colorAsHsv;\n  }\n\n  get hex(): string | undefined {\n    return this.chromaColor?.hex();\n  }\n\n  get inputValue(): string {\n    return this.args.color ? this.args.color.toUpperCase() : HEX_FALLBACK;\n  }\n\n  get placeholder(): string | undefined {\n    if (this.args.color) return undefined;\n\n    return this.args.placeholder ?? this.euiI18n.lookupToken('euiColorPicker.transparent', 'Transparent');\n  }\n\n  get showPicker(): boolean {\n    return this.mode !== 'swatch' && this.mode !== 'secondaryInput';\n  }\n\n  get showSwatches(): boolean {\n    return this.mode !== 'picker' && this.mode !== 'secondaryInput';\n  }\n\n  get swatches(): string[] {\n    return (\n      this.args.swatches ??\n      useEuiPaletteColorBlind(getEuiThemeContext(this).upstream)\n    );\n  }\n\n  get canClear(): boolean {\n    return Boolean(this.args.isClearable && this.args.color && !this.args.readOnly && !this.args.disabled);\n  }\n\n  /** The popover / inline root: upstream `euiColorPickerStyles.euiColorPicker`. */\n  @cached\n  get rootClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    return `euiColorPicker ${euiClass(context, boxReset, styles.euiColorPicker)}`;\n  }\n\n  @cached\n  get swatchesClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    return `euiColorPicker__swatches ${euiClass(context, listReset, styles.euiColorPicker__swatches)}`;\n  }\n\n  @cached\n  get alphaRangeClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    // upstream puts these on the EuiRange root; here they sit on a wrapper\n    // around it, so the direct-child rule is restated from the range wrapper\n    return `euiColorPicker__alphaRange ${euiClass(context, styles.euiColorPicker__alphaRange, {\n      '.euiRangeWrapper > .euiFormControlLayout': { flexShrink: 0 }\n    })}`;\n  }\n\n  /**\n   * Upstream's `icon={{ color, css }}`: the field icon takes the chosen\n   * color (`subdued` for the empty `stopSlash` icon), and the swatch icon's\n   * stroke uses the swatch border color.\n   */\n  get iconColor(): string {\n    return cssColor(this.chromaColor) ?? 'subdued';\n  }\n\n  @cached\n  get iconCss(): EuiCss {\n    const context = getEuiThemeContext(this);\n    return useEuiBorealisStyles(context, euiColorPickerStyles)\n      .euiColorPicker__swatchInputIcon;\n  }\n\n  get panelClasses(): string {\n    return 'euiColorPicker__popoverPanel';\n  }\n\n  get hexLabel(): string {\n    return this.chromaColor ? this.chromaColor.hex().toUpperCase() : '';\n  }\n\n  get secondaryInputCompressed(): boolean {\n    return this.args.display === 'inline' ? Boolean(this.args.compressed) : true;\n  }\n\n  get labels(): {\n    popover: string;\n    color: string;\n    selected: string;\n    error: string;\n    alpha: string;\n    open: string;\n    closed: string;\n    select: string;\n  } {\n    const t = (token: string, text: string) => this.euiI18n.lookupToken(`euiColorPicker.${token}`, text);\n\n    return {\n      popover: t('popoverLabel', 'Color selection dialog'),\n      color: t('colorLabel', 'Color value'),\n      selected: t('selectedColorLabel', 'Selected color'),\n      error: t('colorErrorMessage', 'Invalid color value'),\n      alpha: t('alphaLabel', 'Alpha channel (opacity) value'),\n      open: t('openLabel', 'Press the escape key to close the popover'),\n      closed: t('closeLabel', 'Press the down key to open a popover containing color options'),\n      select: t('ariaLabel', 'Select a color')\n    };\n  }\n\n  output(text: string): EuiColorPickerOutput {\n    const color = getChromaColor(text, true);\n\n    if (!color) return { rgba: RGB_FALLBACK, hex: HEX_FALLBACK, isValid: false };\n\n    // without @showAlpha a transparent color is returned but invalid\n    return {\n      rgba: color.rgba() as RGBA,\n      hex: color.hex(),\n      isValid: this.args.showAlpha ? true : color.alpha() === 1\n    };\n  }\n\n  change(text: string): void {\n    const output = this.output(text);\n\n    if (output.isValid) this.prevColor = output.rgba.join();\n    this.args.onChange(text, output);\n  }\n\n  updateColorAsHsv(hsv: HSV): void {\n    this.colorAsHsv = [isNaN(hsv[0]) ? this.usableHsv[0] : hsv[0], hsv[1], hsv[2]];\n  }\n\n  updateWithHsv(hsv: HSV): void {\n    const color = chroma.hsv(...hsv).alpha(this.alphaChannel);\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (this.alphaChannel < 1 ? color.rgba() : color.rgb()).join(RGB_JOIN)\n        : color.hex();\n\n    this.change(text);\n    this.updateColorAsHsv(hsv);\n  }\n\n  @action\n  showColorSelector(): void {\n    if (this.isColorSelectorShown || this.args.readOnly) return;\n\n    this.args.onFocus?.();\n    this.isColorSelectorShown = true;\n  }\n\n  @action\n  closeColorSelector(): void {\n    this.args.onBlur?.();\n    this.isColorSelectorShown = false;\n  }\n\n  @action\n  toggle(): void {\n    if (this.isColorSelectorShown) this.closeColorSelector();\n    else this.showColorSelector();\n  }\n\n  /** Closes the popover and returns to the field, to keep adjusting. */\n  @action\n  finalSelection(): void {\n    this.input?.focus();\n    next(this, this.closeColorSelector);\n  }\n\n  @action\n  onInputClick(): void {\n    this.showColorSelector();\n  }\n\n  @action\n  onInputKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  @action\n  onInputBlur(): void {\n    // closing the popover calls onBlur already\n    if (!this.isColorSelectorShown) this.args.onBlur?.();\n  }\n\n  /** Arrow down opens the popover, then moves into it. */\n  @action\n  onLayoutKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'ArrowDown') return;\n\n    event.preventDefault();\n\n    if (!this.isColorSelectorShown) {\n      this.showColorSelector();\n\n      return;\n    }\n\n    (this.mode !== 'swatch' ? this.saturation : this.firstSwatch)?.focus();\n  }\n\n  /** Enter in the picker confirms the color. */\n  @action\n  onPickerKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter') return;\n\n    if (this.isColorSelectorShown) this.finalSelection();\n    else this.showColorSelector();\n  }\n\n  @action\n  onColorInput(event: Event): void {\n    const text = (event.target as HTMLInputElement).value;\n    const color = getChromaColor(text, this.args.showAlpha);\n\n    this.change(text);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n  }\n\n  @action\n  clear(): void {\n    this.change('');\n\n    if (this.secondaryInputDisplay === 'none' && this.isColorSelectorShown) {\n      this.closeColorSelector();\n    }\n  }\n\n  @action\n  onSaturationChange([, s, v]: HSV): void {\n    this.updateWithHsv([this.usableHsv[0], s, v]);\n  }\n\n  @action\n  onHueChange(hue: number): void {\n    const [, s, v] = this.usableHsv;\n\n    this.updateWithHsv([hue, s, v]);\n  }\n\n  @action\n  onSwatchClick(swatch: string): void {\n    const color = getChromaColor(swatch, this.args.showAlpha);\n\n    this.change(swatch);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n    this.finalSelection();\n  }\n\n  @action\n  onAlphaChange(event: Event, isValid: boolean): void {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.alphaInput = value;\n\n    if (!isValid) return;\n\n    const alpha = parseInt(value, 10) / 100;\n    const color = this.chromaColor ? this.chromaColor.alpha(alpha) : null;\n    const hex = color ? color.hex() : HEX_FALLBACK;\n    const rgba = (color ? color.rgba() : RGB_FALLBACK) as RGBA;\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (alpha < 1 ? rgba : rgba.slice(0, 3)).join(RGB_JOIN)\n        : hex;\n\n    this.alphaInput = undefined;\n    this.args.onChange(text, { hex, rgba, isValid: Boolean(color) });\n  }\n\n  registerInput = (element: HTMLInputElement | null): void => {\n    this.input = element ?? undefined;\n  };\n\n  registerSaturation = modifier((element: HTMLElement) => {\n    this.saturation = element;\n  });\n\n  registerFirstSwatch = modifier((element: HTMLElement, [index]: [number]) => {\n    if (index === 0) this.firstSwatch = element;\n  });\n\n  <template>\n    {{#if (isInline @display)}}\n      <div class={{this.rootClasses}} ...attributes>\n        <Composite\n          @picker={{this}}\n          @isInvalid={{@isInvalid}}\n          @disabled={{@disabled}}\n          @readOnly={{@readOnly}}\n          @showAlpha={{@showAlpha}}\n        />\n      </div>\n    {{else}}\n      <EuiPopover\n        class=\"euiColorPicker__popoverAnchor\"\n        @isOpen={{this.isColorSelectorShown}}\n        @closePopover={{this.finalSelection}}\n        @panelClassName={{this.panelClasses}}\n        @display={{if (has-block \"button\") \"inlineBlock\" \"block\"}}\n        @attachToAnchor={{if (has-block \"button\") false true}}\n        @anchorPosition=\"downLeft\"\n        @panelPaddingSize=\"s\"\n        @ownFocus={{false}}\n        @initialFocus={{false}}\n        @ariaLabel={{this.labels.popover}}\n        @zIndex={{@popoverZIndex}}\n      >\n        <:button>\n          {{#if (has-block \"button\")}}\n            {{yield this.toggle to=\"button\"}}\n          {{else}}\n              <EuiFormControlLayout\n                @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}}\n                @clear={{if this.canClear this.clear}}\n                @readOnly={{@readOnly}}\n                @fullWidth={{@fullWidth}}\n                @compressed={{@compressed}}\n                @isInvalid={{@isInvalid}}\n                @isDisabled={{@disabled}}\n                @isDropdown={{true}}\n                @isPrependProvided={{has-block \"prepend\"}}\n                @isAppendProvided={{has-block \"append\"}}\n                @iconColor={{this.iconColor}}\n                @iconCss={{this.iconCss}}\n                {{on \"keydown\" this.onLayoutKeyDown}}\n              >\n                <:prepend as |className|>{{yield className this.id to=\"prepend\"}}</:prepend>\n                <:field>\n                  <EuiFieldText\n                    class=\"euiColorPicker__input\"\n                    data-test-subj=\"euiColorPickerAnchor\"\n                    id={{this.id}}\n                    autocomplete=\"off\"\n                    aria-label={{unless @id this.labels.select}}\n                    aria-describedby={{if this.isColorSelectorShown this.openLabelId this.closeLabelId}}\n                    @controlOnly={{true}}\n                    @value={{this.inputValue}}\n                    @placeholder={{this.placeholder}}\n                    @isInvalid={{@isInvalid}}\n                    @compressed={{@compressed}}\n                    @disabled={{@disabled}}\n                    @readOnly={{@readOnly}}\n                    @fullWidth={{@fullWidth}}\n                    @inputRef={{this.registerInput}}\n                    {{on \"click\" this.onInputClick}}\n                    {{on \"keydown\" this.onInputKeyDown}}\n                    {{on \"blur\" this.onInputBlur}}\n                    {{on \"input\" this.onColorInput}}\n                  />\n                  <EuiScreenReaderOnly>\n                    <span>\n                      <span\n                        id={{this.openLabelId}}\n                        aria-hidden={{if this.isColorSelectorShown \"false\" \"true\"}}\n                      >{{this.labels.open}}</span>\n                      <span\n                        id={{this.closeLabelId}}\n                        aria-hidden={{if this.isColorSelectorShown \"true\" \"false\"}}\n                      >{{this.labels.closed}}</span>\n                    </span>\n                  </EuiScreenReaderOnly>\n                </:field>\n                <:append as |className|>{{yield className this.id to=\"append\"}}</:append>\n              </EuiFormControlLayout>\n          {{/if}}\n        </:button>\n        <:content>\n          <div\n            class={{this.rootClasses}}\n            data-test-subj=\"euiColorPickerPopover\"\n            ...attributes\n          >\n            <Composite\n              @picker={{this}}\n              @isInvalid={{@isInvalid}}\n              @disabled={{@disabled}}\n              @readOnly={{@readOnly}}\n              @showAlpha={{@showAlpha}}\n            />\n          </div>\n        </:content>\n      </EuiPopover>\n    {{/if}}\n  </template>\n}\n\ninterface CompositeSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    showAlpha?: boolean;\n  };\n}\n\n/**\n * The saturation square, hue slider, swatches and secondary input: the\n * flex column children of the root (upstream spaces them with `gap`).\n */\nclass Composite extends Component<CompositeSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    {{#if (eq2 this.picker.secondaryInputDisplay \"top\")}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n      />\n    {{/if}}\n    {{#if this.picker.showPicker}}\n      <EuiSaturation\n        @id={{this.picker.id}}\n        @color={{this.picker.usableHsv}}\n        @hex={{this.picker.hex}}\n        @onChange={{this.picker.onSaturationChange}}\n        {{this.picker.registerSaturation}}\n        {{on \"keydown\" this.picker.onPickerKeyDown}}\n      />\n      <EuiHue\n        @id={{this.picker.id}}\n        @hue={{hueOf this.picker.usableHsv}}\n        @hex={{this.picker.hex}}\n        @onChange={{this.picker.onHueChange}}\n        {{on \"keydown\" this.picker.onPickerKeyDown}}\n      />\n      <EuiScreenReaderOnly>\n        <p aria-live=\"polite\" aria-atomic=\"true\">{{this.picker.labels.selected}}: {{this.picker.hexLabel}}</p>\n      </EuiScreenReaderOnly>\n    {{/if}}\n    {{#if this.picker.showSwatches}}\n      <ul class={{this.picker.swatchesClasses}}>\n        {{#each this.picker.swatches as |swatch index|}}\n          <li>\n            <EuiColorPickerSwatch\n              class=\"euiColorPicker__swatchSelect\"\n              @color={{swatch}}\n              {{on \"click\" (fn this.picker.onSwatchClick swatch)}}\n              {{this.picker.registerFirstSwatch index}}\n            />\n          </li>\n        {{/each}}\n      </ul>\n    {{/if}}\n    {{#if (eq2 this.picker.secondaryInputDisplay \"bottom\")}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n      />\n    {{/if}}\n    {{#if @showAlpha}}\n      <div class={{this.picker.alphaRangeClasses}}>\n        <EuiRange\n          data-test-subj=\"euiColorPickerAlpha\"\n          aria-label={{this.picker.labels.alpha}}\n          @compressed={{true}}\n          @showInput={{true}}\n          @min={{0}}\n          @max={{100}}\n          @value={{this.picker.alphaRangeValue}}\n          @onChange={{this.picker.onAlphaChange}}\n        >\n          <:append><EuiFormLabel>%</EuiFormLabel></:append>\n        </EuiRange>\n      </div>\n    {{/if}}\n  </template>\n}\n\ninterface SecondaryInputSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n  };\n}\n\nclass SecondaryInput extends Component<SecondaryInputSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    <EuiFormRow\n      @isInvalid={{@isInvalid}}\n      @error={{if @isInvalid this.picker.labels.error}}\n    >\n      <EuiFieldText\n        data-test-subj=\"euiColorPickerInput_{{this.picker.secondaryInputDisplay}}\"\n        autocomplete=\"off\"\n        aria-label={{this.picker.labels.color}}\n        @compressed={{this.picker.secondaryInputCompressed}}\n        @value={{this.picker.inputValue}}\n        @placeholder={{this.picker.placeholder}}\n        @clear={{if this.picker.canClear this.picker.clear}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n        {{on \"input\" this.picker.onColorInput}}\n      />\n    </EuiFormRow>\n  </template>\n}\n\nfunction hueOf(hsv: HSV): number {\n  return hsv[0];\n}\n\nfunction isInline(display?: string): boolean {\n  return display === 'inline';\n}\n\nfunction cssColor(color: ReturnType<typeof getChromaColor>): string | undefined {\n  return color ? color.css() : undefined;\n}\n\nfunction eq2(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n"],"names":["hsvOf","color","fallbackHue","HSV_FALLBACK","h","s","v","hsv","isNaN","EuiColorPicker","Component","g","prototype","service","i","tracked","ownId","randomId","openLabelId","closeLabelId","prevColor","input","saturation","firstSwatch","constructor","owner","args","getChromaColor","showAlpha","rgba","join","colorAsHsv","id","mode","secondaryInputDisplay","chromaColor","preferredFormat","format","parsed","parseColor","alphaChannel","alpha","alphaRangeValue","Number","alphaInput","toFixed","usableHsv","hex","inputValue","toUpperCase","HEX_FALLBACK","placeholder","undefined","euiI18n","lookupToken","showPicker","showSwatches","swatches","useEuiPaletteColorBlind","getEuiThemeContext","upstream","canClear","Boolean","isClearable","readOnly","disabled","rootClasses","context","styles","useEuiBorealisStyles","euiColorPickerStyles","euiClass","boxReset","euiColorPicker","n","cached","swatchesClasses","listReset","euiColorPicker__swatches","alphaRangeClasses","euiColorPicker__alphaRange","flexShrink","iconColor","cssColor","iconCss","euiColorPicker__swatchInputIcon","panelClasses","hexLabel","secondaryInputCompressed","display","compressed","labels","t","token","text","popover","selected","error","open","closed","select","output","RGB_FALLBACK","isValid","change","onChange","updateColorAsHsv","updateWithHsv","chroma","rgb","RGB_JOIN","showColorSelector","isColorSelectorShown","onFocus","action","closeColorSelector","onBlur","toggle","finalSelection","focus","next","onInputClick","onInputKeyDown","event","key","preventDefault","onInputBlur","onLayoutKeyDown","onPickerKeyDown","onColorInput","target","value","clear","onSaturationChange","onHueChange","hue","onSwatchClick","swatch","onAlphaChange","parseInt","slice","registerInput","element","registerSaturation","modifier","registerFirstSwatch","index","setComponentTemplate","precompileTemplate","strictMode","scope","isInline","Composite","EuiPopover","EuiFormControlLayout","on","EuiFieldText","EuiScreenReaderOnly","picker","eq2","SecondaryInput","EuiSaturation","EuiHue","hueOf","EuiColorPickerSwatch","fn","EuiRange","EuiFormLabel","EuiFormRow","css","a","b"],"mappings":"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"}

package/dist/components/eui-color-stops/thumb.js

@@ -1,11 +1,16 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { getChromaColor, getPositionFromStop, isStopInvalid, isColorInvalid, getStopFromMouseLocation } from '../../-private/color.js';
+import { deprecateRemovedUpstream } from '../../-private/removed-upstream.js';
 import cssStyle from '../../-private/css-style.js';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { buttonReset, euiColorStopThumbPopoverStyles, euiColorStopThumbStyles, euiColorStopStyles } from '../../utils/eui/color-picker.js';
+import { cK as euiRangeThumbStyles } from '../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../utils/eui/styles.js';
 import EuiButtonIcon from '../eui-button-icon.js';
 import EuiColorPicker from '../eui-color-picker.js';
 import EuiFieldNumber from '../eui-field-number.js';
@@ -13,7 +18,6 @@ import EuiFlexGroup from '../eui-flex-group.js';
 import EuiFlexItem from '../eui-flex-item.js';
 import EuiFormRow from '../eui-form-row.js';
 import EuiPopoverComponent from '../eui-popover.js';
-import EuiRangeThumb from '../eui-range-thumb.js';
 import EuiScreenReaderOnly from '../eui-screen-reader-only.js';
 import EuiSpacer from '../eui-spacer.js';
 import { precompileTemplate } from '@ember/template-compilation';
@@ -21,6 +25,10 @@ import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 /** @private One stop of EuiColorStops: a thumb opening an edit popover. */class EuiColorStopThumb extends Component {
+  constructor(owner, args) {
+    super(owner, args);
+    deprecateRemovedUpstream('eui-color-stops-thumb', 'EuiColorStopThumb', 'There is no direct upstream replacement; for predefined gradients use EuiColorPalettePicker.');
+  }
   static {
     g(this.prototype, "euiI18n", [service]);
   }
@@ -49,8 +57,35 @@ import { g, i, n } from 'decorator-transforms/runtime-esm';
   get colorIsInvalid() {
     return isColorInvalid(this.args.color, this.args.showAlpha);
   }
-  get classes() {
-    return this.hasFocus || this.args.isPopoverOpen ? 'euiColorStopPopover euiColorStopPopover-hasFocus' : 'euiColorStopPopover';
+  get hasFocusStyle() {
+    return this.hasFocus || this.args.isPopoverOpen;
+  }
+  /** The popover root: EUI 88.5.4 `euiColorStopThumbPopoverStyles`. */
+  get popoverCss() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiColorStopThumbPopoverStyles);
+    return [styles.euiColorStopThumbPopover, this.hasFocusStyle && styles.hasFocus];
+  }
+  /** Upstream EuiRangeThumb styles with the color stop thumb styles last. */
+  static {
+    n(this.prototype, "popoverCss", [cached]);
+  }
+  get thumbClasses() {
+    const context = getEuiThemeContext(this);
+    const range = useEuiBorealisStyles(context, euiRangeThumbStyles);
+    const styles = useEuiBorealisStyles(context, euiColorStopThumbStyles);
+    return `euiRangeThumb euiColorStopThumb ${euiClass(context, buttonReset, range.euiRangeThumb, styles.euiColorStopThumb, this.args.isPopoverOpen && styles.isPopoverOpen)}`;
+  }
+  static {
+    n(this.prototype, "thumbClasses", [cached]);
+  }
+  get formClasses() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiColorStopStyles);
+    return `euiColorStop ${euiClass(context, styles.euiColorStop)}`;
+  }
+  static {
+    n(this.prototype, "formClasses", [cached]);
   }
   t = (token, text) => this.euiI18n.lookupToken(`euiColorStopThumb.${token}`, text);
   get valueText() {
@@ -157,13 +192,12 @@ import { g, i, n } from 'decorator-transforms/runtime-esm';
     n(this.prototype, "setFocus", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<EuiPopover class={{this.classes}} style={{cssStyle (hash left=this.position)}} @anchorClassName=\"euiColorStopPopover__anchor\" @panelPaddingSize=\"s\" @isOpen={{@isPopoverOpen}} @closePopover={{@closePopover}} @ownFocus={{false}}>\n  <:button>\n    <EuiRangeThumb class=\"euiColorStopThumb\" data-test-subj=\"euiColorStopThumb\" data-index=\"euiColorStop_{{@index}}\" aria-valuetext={{this.valueText}} aria-label={{this.t \"buttonAriaLabel\" \"Press the Enter key to modify this stop. Press Escape to focus the group\"}} title={{this.t \"buttonTitle\" \"Click to edit, drag to reposition\"}} style={{cssStyle (hash background=this.background)}} @min={{@localMin}} @max={{@localMax}} @value={{@stop}} @tabIndex={{-1}} @disabled={{@disabled}} {{on \"focus\" this.onFocus}} {{on \"blur\" (fnSet this.setFocus false)}} {{on \"mouseover\" (fnSet this.setFocus true)}} {{on \"mouseout\" (fnSet this.setFocus false)}} {{on \"keydown\" this.onKeyDown}} {{on \"mousedown\" this.onMouseDown}} />\n  </:button>\n  <:content>\n    <div class=\"euiColorStop\" data-test-subj=\"euiColorStopPopover\">\n      <EuiScreenReaderOnly>\n        <p aria-live=\"polite\">{{this.t \"screenReaderAnnouncement\" \"A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup.\"}}</p>\n      </EuiScreenReaderOnly>\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiFormRow @label={{this.t \"stopLabel\" \"Stop value\"}} @display=\"rowCompressed\" @isInvalid={{this.stopIsInvalid}} @error={{if this.stopIsInvalid (this.t \"stopErrorMessage\" \"Value is out of range\")}}>\n            <EuiFieldNumber @compressed={{true}} @readOnly={{@readOnly}} @isInvalid={{this.stopIsInvalid}} @value={{unless this.stopIsInvalid @stop}} @min={{unless (or2 @isRangeMin (isUndefined @min)) @localMin}} @max={{unless (or2 @isRangeMax (isUndefined @max)) @localMax}} {{on \"input\" this.onStopInput}} />\n          </EuiFormRow>\n        </EuiFlexItem>\n        {{#unless @readOnly}}\n          <EuiFlexItem @grow={{false}}>\n            <EuiFormRow @display=\"rowCompressed\" @hasEmptyLabelSpace={{true}}>\n              <EuiButtonIcon @iconType=\"trash\" @color=\"danger\" @isDisabled={{isUndefined @onRemove}} aria-label={{this.t \"removeLabel\" \"Remove this stop\"}} title={{this.t \"removeLabel\" \"Remove this stop\"}} {{on \"click\" this.remove}} />\n            </EuiFormRow>\n          </EuiFlexItem>\n        {{/unless}}\n      </EuiFlexGroup>\n      {{#unless @readOnly}}\n        <EuiSpacer @size=\"s\" />\n      {{/unless}}\n      <EuiColorPicker @color={{@color}} @onChange={{this.onColorChange}} @readOnly={{@readOnly}} @mode={{if @readOnly \"secondaryInput\" @mode}} @swatches={{@swatches}} @display=\"inline\" @showAlpha={{@showAlpha}} @isInvalid={{this.colorIsInvalid}} @secondaryInputDisplay={{if (isSwatch @mode) \"none\" \"bottom\"}} />\n    </div>\n  </:content>\n</EuiPopover>", {
+    setComponentTemplate(precompileTemplate("<EuiPopover class=\"euiColorStopPopover\" style={{cssStyle (hash left=this.position)}} @rootCss={{this.popoverCss}} @anchorClassName=\"euiColorStopThumbPopover__anchor\" @panelPaddingSize=\"s\" @isOpen={{@isPopoverOpen}} @closePopover={{@closePopover}} @ownFocus={{false}}>\n  <:button>\n    {{!-- upstream EuiRangeThumb: a button with the slider role --}}\n    <button type=\"button\" role=\"slider\" class={{this.thumbClasses}} data-test-subj=\"euiColorStopThumb\" data-index=\"euiColorStop_{{@index}}\" aria-valuemin={{@localMin}} aria-valuemax={{@localMax}} aria-valuenow={{@stop}} aria-disabled={{if @disabled \"true\" \"false\"}} aria-valuetext={{this.valueText}} aria-label={{this.t \"buttonAriaLabel\" \"Press the Enter key to modify this stop. Press Escape to focus the group\"}} title={{this.t \"buttonTitle\" \"Click to edit, drag to reposition\"}} tabindex=\"-1\" disabled={{@disabled}} style={{cssStyle (hash background=this.background)}} {{on \"focus\" this.onFocus}} {{on \"blur\" (fnSet this.setFocus false)}} {{on \"mouseover\" (fnSet this.setFocus true)}} {{on \"mouseout\" (fnSet this.setFocus false)}} {{on \"keydown\" this.onKeyDown}} {{on \"mousedown\" this.onMouseDown}}></button>\n  </:button>\n  <:content>\n    <div class={{this.formClasses}} data-test-subj=\"euiColorStopPopover\">\n      <EuiScreenReaderOnly>\n        <p aria-live=\"polite\">{{this.t \"screenReaderAnnouncement\" \"A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup.\"}}</p>\n      </EuiScreenReaderOnly>\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiFormRow @label={{this.t \"stopLabel\" \"Stop value\"}} @display=\"rowCompressed\" @isInvalid={{this.stopIsInvalid}} @error={{if this.stopIsInvalid (this.t \"stopErrorMessage\" \"Value is out of range\")}}>\n            <EuiFieldNumber @compressed={{true}} @readOnly={{@readOnly}} @isInvalid={{this.stopIsInvalid}} @value={{unless this.stopIsInvalid @stop}} @min={{unless (or2 @isRangeMin (isUndefined @min)) @localMin}} @max={{unless (or2 @isRangeMax (isUndefined @max)) @localMax}} {{on \"input\" this.onStopInput}} />\n          </EuiFormRow>\n        </EuiFlexItem>\n        {{#unless @readOnly}}\n          <EuiFlexItem @grow={{false}}>\n            <EuiFormRow @display=\"rowCompressed\" @hasEmptyLabelSpace={{true}}>\n              <EuiButtonIcon @iconType=\"trash\" @color=\"danger\" @isDisabled={{isUndefined @onRemove}} aria-label={{this.t \"removeLabel\" \"Remove this stop\"}} title={{this.t \"removeLabel\" \"Remove this stop\"}} {{on \"click\" this.remove}} />\n            </EuiFormRow>\n          </EuiFlexItem>\n        {{/unless}}\n      </EuiFlexGroup>\n      {{#unless @readOnly}}\n        <EuiSpacer @size=\"s\" />\n      {{/unless}}\n      <EuiColorPicker @color={{@color}} @onChange={{this.onColorChange}} @readOnly={{@readOnly}} @mode={{if @readOnly \"secondaryInput\" @mode}} @swatches={{@swatches}} @display=\"inline\" @showAlpha={{@showAlpha}} @isInvalid={{this.colorIsInvalid}} @secondaryInputDisplay={{if (isSwatch @mode) \"none\" \"bottom\"}} />\n    </div>\n  </:content>\n</EuiPopover>", {
       strictMode: true,
       scope: () => ({
         EuiPopover: EuiPopoverComponent,
         cssStyle,
         hash,
-        EuiRangeThumb,
         on,
         fnSet,
         EuiScreenReaderOnly,

package/dist/components/eui-color-stops/thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumb.js","sources":["../../../src/components/eui-color-stops/thumb.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport {\n  getChromaColor,\n  getPositionFromStop,\n  getStopFromMouseLocation,\n  isColorInvalid,\n  isStopInvalid\n} from '../../-private/color.ts';\nimport cssStyle from '../../-private/css-style.ts';\nimport EuiButtonIcon from '../eui-button-icon.gts';\nimport EuiColorPicker from '../eui-color-picker.gts';\nimport EuiFieldNumber from '../eui-field-number.gts';\nimport EuiFlexGroup from '../eui-flex-group.gts';\nimport EuiFlexItem from '../eui-flex-item.gts';\nimport EuiFormRow from '../eui-form-row.gts';\nimport EuiPopover from '../eui-popover.gts';\nimport EuiRangeThumb from '../eui-range-thumb.gts';\nimport EuiScreenReaderOnly from '../eui-screen-reader-only.gts';\nimport EuiSpacer from '../eui-spacer.gts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type { ColorStop } from '../../-private/color.ts';\n\ninterface ThumbSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    stop: number;\n    color: string;\n    index: number;\n    count: number;\n    onChange: (colorStop: ColorStop) => void;\n    onFocus: () => void;\n    onRemove?: () => void;\n    globalMin: number;\n    globalMax: number;\n    localMin: number;\n    localMax: number;\n    min?: number;\n    max?: number;\n    isRangeMin: boolean;\n    isRangeMax: boolean;\n    trackWidth: number;\n    parent?: HTMLElement;\n    mode?: 'default' | 'swatch' | 'picker';\n    showAlpha?: boolean;\n    swatches?: string[];\n    disabled?: boolean;\n    readOnly?: boolean;\n    isPopoverOpen: boolean;\n    openPopover: () => void;\n    closePopover: () => void;\n  };\n}\n\n/** @private One stop of EuiColorStops: a thumb opening an edit popover. */\nexport default class EuiColorStopThumb extends Component<ThumbSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked hasFocus = false;\n\n  get background(): string | undefined {\n    return getChromaColor(this.args.color, this.args.showAlpha)?.css();\n  }\n\n  get position(): string {\n    const { stop, trackWidth, globalMin, globalMax } = this.args;\n\n    return `${getPositionFromStop(stop, trackWidth, globalMin, globalMax)}%`;\n  }\n\n  get stopIsInvalid(): boolean {\n    return isStopInvalid(this.args.stop);\n  }\n\n  get colorIsInvalid(): boolean {\n    return isColorInvalid(this.args.color, this.args.showAlpha);\n  }\n\n  get classes(): string {\n    return this.hasFocus || this.args.isPopoverOpen\n      ? 'euiColorStopPopover euiColorStopPopover-hasFocus'\n      : 'euiColorStopPopover';\n  }\n\n  t = (token: string, text: string): string => this.euiI18n.lookupToken(`euiColorStopThumb.${token}`, text);\n\n  get valueText(): string {\n    return `Stop: ${this.args.stop}, Color: ${this.args.color} (${this.args.index + 1} of ${this.args.count})`;\n  }\n\n  /** Clamped to the neighbouring stops. */\n  changeStop(value: number): void {\n    const { localMin, localMax } = this.args;\n\n    this.args.onChange({ stop: Math.min(Math.max(value, localMin), localMax), color: this.args.color });\n  }\n\n  @action\n  onStopInput(event: Event): void {\n    let value = parseFloat((event.target as HTMLInputElement).value);\n    const { globalMin, globalMax, min, max } = this.args;\n\n    if (value > globalMax && max !== undefined) value = globalMax;\n    if (value < globalMin && min !== undefined) value = globalMin;\n\n    this.args.onChange({ stop: value, color: this.args.color });\n  }\n\n  @action\n  onColorChange(color: string): void {\n    this.args.onChange({ stop: this.args.stop, color });\n  }\n\n  @action\n  onMouseDown(event: MouseEvent): void {\n    this.args.openPopover();\n\n    if (this.args.readOnly) return;\n\n    const parent = this.args.parent;\n    const move = (e: MouseEvent) => {\n      if (!parent) return;\n      this.changeStop(\n        getStopFromMouseLocation(\n          { x: e.clientX, y: e.clientY },\n          parent,\n          this.args.globalMin,\n          this.args.globalMax\n        )\n      );\n    };\n    const up = () => {\n      document.removeEventListener('mousemove', move);\n      document.removeEventListener('mouseup', up);\n    };\n\n    event.preventDefault();\n    document.addEventListener('mousemove', move);\n    document.addEventListener('mouseup', up);\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        this.args.openPopover();\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop - 1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop + 1);\n        break;\n    }\n  }\n\n  @action\n  remove(): void {\n    if (!this.args.onRemove) return;\n\n    this.args.closePopover();\n    this.args.onRemove();\n  }\n\n  @action\n  onFocus(): void {\n    this.hasFocus = true;\n    this.args.onFocus();\n  }\n\n  @action\n  setFocus(value: boolean): void {\n    this.hasFocus = value;\n  }\n\n  <template>\n    <EuiPopover\n      class={{this.classes}}\n      style={{cssStyle (hash left=this.position)}}\n      @anchorClassName=\"euiColorStopPopover__anchor\"\n      @panelPaddingSize=\"s\"\n      @isOpen={{@isPopoverOpen}}\n      @closePopover={{@closePopover}}\n      @ownFocus={{false}}\n    >\n      <:button>\n        <EuiRangeThumb\n          class=\"euiColorStopThumb\"\n          data-test-subj=\"euiColorStopThumb\"\n          data-index=\"euiColorStop_{{@index}}\"\n          aria-valuetext={{this.valueText}}\n          aria-label={{this.t\n            \"buttonAriaLabel\"\n            \"Press the Enter key to modify this stop. Press Escape to focus the group\"\n          }}\n          title={{this.t \"buttonTitle\" \"Click to edit, drag to reposition\"}}\n          style={{cssStyle (hash background=this.background)}}\n          @min={{@localMin}}\n          @max={{@localMax}}\n          @value={{@stop}}\n          @tabIndex={{-1}}\n          @disabled={{@disabled}}\n          {{on \"focus\" this.onFocus}}\n          {{on \"blur\" (fnSet this.setFocus false)}}\n          {{on \"mouseover\" (fnSet this.setFocus true)}}\n          {{on \"mouseout\" (fnSet this.setFocus false)}}\n          {{on \"keydown\" this.onKeyDown}}\n          {{on \"mousedown\" this.onMouseDown}}\n        />\n      </:button>\n      <:content>\n        <div class=\"euiColorStop\" data-test-subj=\"euiColorStopPopover\">\n          <EuiScreenReaderOnly>\n            <p aria-live=\"polite\">{{this.t\n                \"screenReaderAnnouncement\"\n                \"A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup.\"\n              }}</p>\n          </EuiScreenReaderOnly>\n          <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n            <EuiFlexItem>\n              <EuiFormRow\n                @label={{this.t \"stopLabel\" \"Stop value\"}}\n                @display=\"rowCompressed\"\n                @isInvalid={{this.stopIsInvalid}}\n                @error={{if this.stopIsInvalid (this.t \"stopErrorMessage\" \"Value is out of range\")}}\n              >\n                <EuiFieldNumber\n                  @compressed={{true}}\n                  @readOnly={{@readOnly}}\n                  @isInvalid={{this.stopIsInvalid}}\n                  @value={{unless this.stopIsInvalid @stop}}\n                  @min={{unless (or2 @isRangeMin (isUndefined @min)) @localMin}}\n                  @max={{unless (or2 @isRangeMax (isUndefined @max)) @localMax}}\n                  {{on \"input\" this.onStopInput}}\n                />\n              </EuiFormRow>\n            </EuiFlexItem>\n            {{#unless @readOnly}}\n              <EuiFlexItem @grow={{false}}>\n                <EuiFormRow @display=\"rowCompressed\" @hasEmptyLabelSpace={{true}}>\n                  <EuiButtonIcon\n                    @iconType=\"trash\"\n                    @color=\"danger\"\n                    @isDisabled={{isUndefined @onRemove}}\n                    aria-label={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    title={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    {{on \"click\" this.remove}}\n                  />\n                </EuiFormRow>\n              </EuiFlexItem>\n            {{/unless}}\n          </EuiFlexGroup>\n          {{#unless @readOnly}}\n            <EuiSpacer @size=\"s\" />\n          {{/unless}}\n          <EuiColorPicker\n            @color={{@color}}\n            @onChange={{this.onColorChange}}\n            @readOnly={{@readOnly}}\n            @mode={{if @readOnly \"secondaryInput\" @mode}}\n            @swatches={{@swatches}}\n            @display=\"inline\"\n            @showAlpha={{@showAlpha}}\n            @isInvalid={{this.colorIsInvalid}}\n            @secondaryInputDisplay={{if (isSwatch @mode) \"none\" \"bottom\"}}\n          />\n        </div>\n      </:content>\n    </EuiPopover>\n  </template>\n}\n\nfunction fnSet(setter: (value: boolean) => void, value: boolean): () => void {\n  return () => setter(value);\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction isUndefined(value: unknown): boolean {\n  return value === undefined;\n}\n\nfunction isSwatch(mode?: string): boolean {\n  return mode === 'swatch';\n}\n"],"names":["EuiColorStopThumb","Component","g","prototype","service","i","tracked","background","getChromaColor","args","color","showAlpha","css","position","stop","trackWidth","globalMin","globalMax","getPositionFromStop","stopIsInvalid","isStopInvalid","colorIsInvalid","isColorInvalid","classes","hasFocus","isPopoverOpen","t","token","text","euiI18n","lookupToken","valueText","index","count","changeStop","value","localMin","localMax","onChange","Math","min","max","onStopInput","event","parseFloat","target","undefined","n","action","onColorChange","onMouseDown","openPopover","readOnly","parent","move","e","getStopFromMouseLocation","x","clientX","y","clientY","up","document","removeEventListener","preventDefault","addEventListener","onKeyDown","key","remove","onRemove","closePopover","onFocus","setFocus","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","cssStyle","hash","EuiRangeThumb","on","fnSet","EuiScreenReaderOnly","EuiFlexGroup","EuiFlexItem","EuiFormRow","EuiFieldNumber","or2","isUndefined","EuiButtonIcon","EuiSpacer","EuiColorPicker","isSwatch","setter","a","b","Boolean","mode"],"mappings":"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"}
+{"version":3,"file":"thumb.js","sources":["../../../src/components/eui-color-stops/thumb.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport {\n  getChromaColor,\n  getPositionFromStop,\n  getStopFromMouseLocation,\n  isColorInvalid,\n  isStopInvalid\n} from '../../-private/color.ts';\nimport { deprecateRemovedUpstream } from '../../-private/removed-upstream.ts';\nimport cssStyle from '../../-private/css-style.ts';\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport {\n  buttonReset,\n  euiColorStopStyles,\n  euiColorStopThumbPopoverStyles,\n  euiColorStopThumbStyles\n} from '../../utils/eui/color-picker.ts';\nimport { euiRangeThumbStyles } from '../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../utils/eui/styles.ts';\nimport EuiButtonIcon from '../eui-button-icon.gts';\nimport EuiColorPicker from '../eui-color-picker.gts';\nimport EuiFieldNumber from '../eui-field-number.gts';\nimport EuiFlexGroup from '../eui-flex-group.gts';\nimport EuiFlexItem from '../eui-flex-item.gts';\nimport EuiFormRow from '../eui-form-row.gts';\nimport EuiPopover from '../eui-popover.gts';\nimport EuiScreenReaderOnly from '../eui-screen-reader-only.gts';\nimport EuiSpacer from '../eui-spacer.gts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type { ColorStop } from '../../-private/color.ts';\nimport type { CSSInterpolation } from '@emotion/css/create-instance';\nimport type Owner from '@ember/owner';\n\ninterface ThumbSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    stop: number;\n    color: string;\n    index: number;\n    count: number;\n    onChange: (colorStop: ColorStop) => void;\n    onFocus: () => void;\n    onRemove?: () => void;\n    globalMin: number;\n    globalMax: number;\n    localMin: number;\n    localMax: number;\n    min?: number;\n    max?: number;\n    isRangeMin: boolean;\n    isRangeMax: boolean;\n    trackWidth: number;\n    parent?: HTMLElement;\n    mode?: 'default' | 'swatch' | 'picker';\n    showAlpha?: boolean;\n    swatches?: string[];\n    disabled?: boolean;\n    readOnly?: boolean;\n    isPopoverOpen: boolean;\n    openPopover: () => void;\n    closePopover: () => void;\n  };\n}\n\n/** @private One stop of EuiColorStops: a thumb opening an edit popover. */\nexport default class EuiColorStopThumb extends Component<ThumbSignature> {\n  constructor(owner: Owner, args: ThumbSignature['Args']) {\n    super(owner, args);\n    deprecateRemovedUpstream(\n      'eui-color-stops-thumb',\n      'EuiColorStopThumb',\n      'There is no direct upstream replacement; for predefined gradients use EuiColorPalettePicker.'\n    );\n  }\n\n  @service declare euiI18n: EuiI18n;\n\n  @tracked hasFocus = false;\n\n  get background(): string | undefined {\n    return getChromaColor(this.args.color, this.args.showAlpha)?.css();\n  }\n\n  get position(): string {\n    const { stop, trackWidth, globalMin, globalMax } = this.args;\n\n    return `${getPositionFromStop(stop, trackWidth, globalMin, globalMax)}%`;\n  }\n\n  get stopIsInvalid(): boolean {\n    return isStopInvalid(this.args.stop);\n  }\n\n  get colorIsInvalid(): boolean {\n    return isColorInvalid(this.args.color, this.args.showAlpha);\n  }\n\n  get hasFocusStyle(): boolean {\n    return this.hasFocus || this.args.isPopoverOpen;\n  }\n\n  /** The popover root: EUI 88.5.4 `euiColorStopThumbPopoverStyles`. */\n  @cached\n  get popoverCss(): CSSInterpolation {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorStopThumbPopoverStyles);\n\n    return [styles.euiColorStopThumbPopover, this.hasFocusStyle && styles.hasFocus];\n  }\n\n  /** Upstream EuiRangeThumb styles with the color stop thumb styles last. */\n  @cached\n  get thumbClasses(): string {\n    const context = getEuiThemeContext(this);\n    const range = useEuiBorealisStyles(context, euiRangeThumbStyles);\n    const styles = useEuiBorealisStyles(context, euiColorStopThumbStyles);\n\n    return `euiRangeThumb euiColorStopThumb ${euiClass(\n      context,\n      buttonReset,\n      range.euiRangeThumb,\n      styles.euiColorStopThumb,\n      this.args.isPopoverOpen && styles.isPopoverOpen\n    )}`;\n  }\n\n  @cached\n  get formClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorStopStyles);\n\n    return `euiColorStop ${euiClass(context, styles.euiColorStop)}`;\n  }\n\n  t = (token: string, text: string): string => this.euiI18n.lookupToken(`euiColorStopThumb.${token}`, text);\n\n  get valueText(): string {\n    return `Stop: ${this.args.stop}, Color: ${this.args.color} (${this.args.index + 1} of ${this.args.count})`;\n  }\n\n  /** Clamped to the neighbouring stops. */\n  changeStop(value: number): void {\n    const { localMin, localMax } = this.args;\n\n    this.args.onChange({ stop: Math.min(Math.max(value, localMin), localMax), color: this.args.color });\n  }\n\n  @action\n  onStopInput(event: Event): void {\n    let value = parseFloat((event.target as HTMLInputElement).value);\n    const { globalMin, globalMax, min, max } = this.args;\n\n    if (value > globalMax && max !== undefined) value = globalMax;\n    if (value < globalMin && min !== undefined) value = globalMin;\n\n    this.args.onChange({ stop: value, color: this.args.color });\n  }\n\n  @action\n  onColorChange(color: string): void {\n    this.args.onChange({ stop: this.args.stop, color });\n  }\n\n  @action\n  onMouseDown(event: MouseEvent): void {\n    this.args.openPopover();\n\n    if (this.args.readOnly) return;\n\n    const parent = this.args.parent;\n    const move = (e: MouseEvent) => {\n      if (!parent) return;\n      this.changeStop(\n        getStopFromMouseLocation(\n          { x: e.clientX, y: e.clientY },\n          parent,\n          this.args.globalMin,\n          this.args.globalMax\n        )\n      );\n    };\n    const up = () => {\n      document.removeEventListener('mousemove', move);\n      document.removeEventListener('mouseup', up);\n    };\n\n    event.preventDefault();\n    document.addEventListener('mousemove', move);\n    document.addEventListener('mouseup', up);\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        this.args.openPopover();\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop - 1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop + 1);\n        break;\n    }\n  }\n\n  @action\n  remove(): void {\n    if (!this.args.onRemove) return;\n\n    this.args.closePopover();\n    this.args.onRemove();\n  }\n\n  @action\n  onFocus(): void {\n    this.hasFocus = true;\n    this.args.onFocus();\n  }\n\n  @action\n  setFocus(value: boolean): void {\n    this.hasFocus = value;\n  }\n\n  <template>\n    <EuiPopover\n      class=\"euiColorStopPopover\"\n      style={{cssStyle (hash left=this.position)}}\n      @rootCss={{this.popoverCss}}\n      @anchorClassName=\"euiColorStopThumbPopover__anchor\"\n      @panelPaddingSize=\"s\"\n      @isOpen={{@isPopoverOpen}}\n      @closePopover={{@closePopover}}\n      @ownFocus={{false}}\n    >\n      <:button>\n        {{! upstream EuiRangeThumb: a button with the slider role }}\n        <button\n          type=\"button\"\n          role=\"slider\"\n          class={{this.thumbClasses}}\n          data-test-subj=\"euiColorStopThumb\"\n          data-index=\"euiColorStop_{{@index}}\"\n          aria-valuemin={{@localMin}}\n          aria-valuemax={{@localMax}}\n          aria-valuenow={{@stop}}\n          aria-disabled={{if @disabled \"true\" \"false\"}}\n          aria-valuetext={{this.valueText}}\n          aria-label={{this.t\n            \"buttonAriaLabel\"\n            \"Press the Enter key to modify this stop. Press Escape to focus the group\"\n          }}\n          title={{this.t \"buttonTitle\" \"Click to edit, drag to reposition\"}}\n          tabindex=\"-1\"\n          disabled={{@disabled}}\n          style={{cssStyle (hash background=this.background)}}\n          {{on \"focus\" this.onFocus}}\n          {{on \"blur\" (fnSet this.setFocus false)}}\n          {{on \"mouseover\" (fnSet this.setFocus true)}}\n          {{on \"mouseout\" (fnSet this.setFocus false)}}\n          {{on \"keydown\" this.onKeyDown}}\n          {{on \"mousedown\" this.onMouseDown}}\n        ></button>\n      </:button>\n      <:content>\n        <div class={{this.formClasses}} data-test-subj=\"euiColorStopPopover\">\n          <EuiScreenReaderOnly>\n            <p aria-live=\"polite\">{{this.t\n                \"screenReaderAnnouncement\"\n                \"A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup.\"\n              }}</p>\n          </EuiScreenReaderOnly>\n          <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n            <EuiFlexItem>\n              <EuiFormRow\n                @label={{this.t \"stopLabel\" \"Stop value\"}}\n                @display=\"rowCompressed\"\n                @isInvalid={{this.stopIsInvalid}}\n                @error={{if this.stopIsInvalid (this.t \"stopErrorMessage\" \"Value is out of range\")}}\n              >\n                <EuiFieldNumber\n                  @compressed={{true}}\n                  @readOnly={{@readOnly}}\n                  @isInvalid={{this.stopIsInvalid}}\n                  @value={{unless this.stopIsInvalid @stop}}\n                  @min={{unless (or2 @isRangeMin (isUndefined @min)) @localMin}}\n                  @max={{unless (or2 @isRangeMax (isUndefined @max)) @localMax}}\n                  {{on \"input\" this.onStopInput}}\n                />\n              </EuiFormRow>\n            </EuiFlexItem>\n            {{#unless @readOnly}}\n              <EuiFlexItem @grow={{false}}>\n                <EuiFormRow @display=\"rowCompressed\" @hasEmptyLabelSpace={{true}}>\n                  <EuiButtonIcon\n                    @iconType=\"trash\"\n                    @color=\"danger\"\n                    @isDisabled={{isUndefined @onRemove}}\n                    aria-label={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    title={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    {{on \"click\" this.remove}}\n                  />\n                </EuiFormRow>\n              </EuiFlexItem>\n            {{/unless}}\n          </EuiFlexGroup>\n          {{#unless @readOnly}}\n            <EuiSpacer @size=\"s\" />\n          {{/unless}}\n          <EuiColorPicker\n            @color={{@color}}\n            @onChange={{this.onColorChange}}\n            @readOnly={{@readOnly}}\n            @mode={{if @readOnly \"secondaryInput\" @mode}}\n            @swatches={{@swatches}}\n            @display=\"inline\"\n            @showAlpha={{@showAlpha}}\n            @isInvalid={{this.colorIsInvalid}}\n            @secondaryInputDisplay={{if (isSwatch @mode) \"none\" \"bottom\"}}\n          />\n        </div>\n      </:content>\n    </EuiPopover>\n  </template>\n}\n\nfunction fnSet(setter: (value: boolean) => void, value: boolean): () => void {\n  return () => setter(value);\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction isUndefined(value: unknown): boolean {\n  return value === undefined;\n}\n\nfunction isSwatch(mode?: string): boolean {\n  return mode === 'swatch';\n}\n"],"names":["EuiColorStopThumb","Component","constructor","owner","args","deprecateRemovedUpstream","g","prototype","service","i","tracked","background","getChromaColor","color","showAlpha","css","position","stop","trackWidth","globalMin","globalMax","getPositionFromStop","stopIsInvalid","isStopInvalid","colorIsInvalid","isColorInvalid","hasFocusStyle","hasFocus","isPopoverOpen","popoverCss","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiColorStopThumbPopoverStyles","euiColorStopThumbPopover","n","cached","thumbClasses","range","euiRangeThumbStyles","euiColorStopThumbStyles","euiClass","buttonReset","euiRangeThumb","euiColorStopThumb","formClasses","euiColorStopStyles","euiColorStop","t","token","text","euiI18n","lookupToken","valueText","index","count","changeStop","value","localMin","localMax","onChange","Math","min","max","onStopInput","event","parseFloat","target","undefined","action","onColorChange","onMouseDown","openPopover","readOnly","parent","move","e","getStopFromMouseLocation","x","clientX","y","clientY","up","document","removeEventListener","preventDefault","addEventListener","onKeyDown","key","remove","onRemove","closePopover","onFocus","setFocus","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","cssStyle","hash","on","fnSet","EuiScreenReaderOnly","EuiFlexGroup","EuiFlexItem","EuiFormRow","EuiFieldNumber","or2","isUndefined","EuiButtonIcon","EuiSpacer","EuiColorPicker","isSwatch","setter","a","b","Boolean","mode"],"mappings":"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"}

package/dist/components/eui-color-stops.js

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import { hash, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
@@ -7,9 +7,13 @@ import { schedule } from '@ember/runloop';
 import { service } from '@ember/service';
 import { modifier } from 'ember-modifier';
 import { getPositionFromStop, getSteppedGradient, isStopsInvalid, addStop, DEFAULT_VISUALIZATION_COLOR, removeStop, getStopFromMouseLocation, addDefinedStop, getChromaColor } from '../-private/color.js';
+import { deprecateRemovedUpstream } from '../-private/removed-upstream.js';
 import cssStyle from '../-private/css-style.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { boxReset, euiColorStopsStyles, euiColorStopsAddContainerStyles } from '../utils/eui/color-picker.js';
+import { at as euiRangeWrapperStyles, au as euiRangeTrackStyles, av as euiRangeHighlightStyles, aw as euiRangeHighlightProgressStyles } from '../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
 import EuiColorStopThumb from './eui-color-stops/thumb.js';
-import EuiRangeWrapper from './eui-range-wrapper.js';
 import EuiScreenReaderOnly from './eui-screen-reader-only.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
@@ -36,6 +40,10 @@ function validStops(colorStops) {
   return colorStops.map(el => el.stop).filter(stop => !isNaN(stop));
 }
 class EuiColorStops extends Component {
+  constructor(owner, args) {
+    super(owner, args);
+    deprecateRemovedUpstream('eui-color-stops', 'EuiColorStops', 'There is no direct upstream replacement; for predefined gradients use EuiColorPalettePicker.');
+  }
   static {
     g(this.prototype, "euiI18n", [service]);
   }
@@ -118,8 +126,67 @@ class EuiColorStops extends Component {
   get isNotInteractive() {
     return Boolean(this.args.disabled || this.args.readOnly);
   }
+  /**
+  * The root: upstream EuiRangeWrapper styles (height, form width) with
+  * the EUI 88.5.4 color stops states composed last. The range pieces are
+  * rendered here (not through EuiRangeWrapper/Track/Highlight/Thumb) so
+  * each element keeps a single Emotion class, as upstream composes them
+  * through `css`.
+  */
   get classes() {
-    return ['euiColorStops', this.isHoverDisabled && 'euiColorStops-isDragging', this.args.disabled && 'euiColorStops-isDisabled', this.args.readOnly && 'euiColorStops-isReadOnly'].filter(Boolean).join(' ');
+    const context = getEuiThemeContext(this);
+    const wrapper = useEuiBorealisStyles(context, euiRangeWrapperStyles);
+    const styles = useEuiBorealisStyles(context, euiColorStopsStyles);
+    const {
+      compressed,
+      fullWidth,
+      disabled,
+      readOnly
+    } = this.args;
+    return `euiRangeWrapper euiColorStops ${euiClass(context, boxReset, wrapper.euiRangeWrapper, compressed ? wrapper.compressed : wrapper.uncompressed, fullWidth ? wrapper.fullWidth : wrapper.formWidth, styles.euiColorStops, disabled ? styles.isDisabled : styles.isEnabled, readOnly && styles.isReadOnly, this.isHoverDisabled && styles.isDragging)}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get trackClasses() {
+    const context = getEuiThemeContext(this);
+    const track = useEuiBorealisStyles(context, euiRangeTrackStyles);
+    const styles = useEuiBorealisStyles(context, euiColorStopsStyles);
+    return `euiRangeTrack euiColorStops__track ${euiClass(context, track.euiRangeTrack, this.args.disabled && track.disabled, styles.euiColorStops__track)}`;
+  }
+  static {
+    n(this.prototype, "trackClasses", [cached]);
+  }
+  get highlightClasses() {
+    const context = getEuiThemeContext(this);
+    const highlight = useEuiBorealisStyles(context, euiRangeHighlightStyles);
+    const progress = useEuiBorealisStyles(context, euiRangeHighlightProgressStyles);
+    return {
+      highlight: `euiRangeHighlight euiColorStops__highlight ${euiClass(context, highlight.euiRangeHighlight)}`,
+      progress: `euiRangeHighlight__progress ${euiClass(context, progress.euiRangeHighlight__progress)}`
+    };
+  }
+  static {
+    n(this.prototype, "highlightClasses", [cached]);
+  }
+  get isAddDisabled() {
+    return this.isHoverDisabled || this.isNotInteractive;
+  }
+  get addContainerClasses() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiColorStopsAddContainerStyles);
+    return `euiColorStops__addContainer ${euiClass(context, styles.euiColorStopsAddContainer, this.isAddDisabled ? styles.isDisabled : styles.isEnabled)}`;
+  }
+  static {
+    n(this.prototype, "addContainerClasses", [cached]);
+  }
+  get addTargetClasses() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiColorStopsStyles);
+    return `euiColorStops__addTarget ${euiClass(context, styles.euiColorStops__addTarget)}`;
+  }
+  static {
+    n(this.prototype, "addTargetClasses", [cached]);
   }
   get announcement() {
     return this.euiI18n.lookupToken('euiColorStops.screenReaderAnnouncement', '{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.', {
@@ -132,17 +199,19 @@ class EuiColorStops extends Component {
   get gradient() {
     const stops = this.sortedStops;
     const positions = stops.map(stop => this.positionOf(stop.stop));
-    const colorAt = index => getChromaColor(stops[index].color, this.args.showAlpha)?.css() ?? 'currentColor';
-    const gradientStop = index => index === 0 ? `currentColor, currentColor ${positions[0]}%, ${colorAt(0)} ${positions[0]}%` : `${colorAt(index)} ${positions[index]}%`;
+    const colorAt = index => getChromaColor(stops[index].color, this.args.showAlpha)?.css() ?? 'transparent';
+    // before the first stop the track (stripes) shows through, as upstream
+    const gradientStop = index => index === 0 ? `transparent, transparent ${positions[0]}%, ${colorAt(0)} ${positions[0]}%` : `${colorAt(index)} ${positions[index]}%`;
     if (this.args.stopType === 'stepped' && positions.length > 0) {
       const start = positions[0];
       const end = positions[positions.length - 1];
       const colors = getSteppedGradient(this.args.colorStops, this.args.stepNumber ?? 10);
       const width = (end - start) / colors.length;
       const steps = colors.map((color, i) => `${color} ${start + width * i}% ${start + width * (i + 1)}%`).join(', ');
-      return `linear-gradient(to right, currentColor ${start}%, ${steps})`;
+      return `linear-gradient(to right, transparent ${start}%, ${steps})`;
     }
-    const parts = stops.map((_, index) => this.args.stopType === 'fixed' && index < stops.length - 1 ? `${gradientStop(index)}, ${gradientStop(index + 1)}` : gradientStop(index));
+    // fixed: each color holds until the next stop (upstream `fixedStop`)
+    const parts = stops.map((_, index) => this.args.stopType === 'fixed' && index < stops.length - 1 ? `${gradientStop(index)}, ${colorAt(index)} ${positions[index + 1]}%` : gradientStop(index));
     return `linear-gradient(to right,${parts.join(',')})`;
   }
   change(colorStops) {
@@ -312,16 +381,14 @@ class EuiColorStops extends Component {
     });
   });
   static {
-    setComponentTemplate(precompileTemplate("<EuiRangeWrapper class={{this.classes}} data-test-subj=\"euiColorStops\" tabindex={{if @disabled \"-1\" \"0\"}} @fullWidth={{@fullWidth}} @compressed={{@compressed}} {{this.registerWrapper @colorStops}} {{on \"mousedown\" (fn this.setHoverDisabled true)}} {{on \"mouseup\" (fn this.setHoverDisabled false)}} {{on \"mouseleave\" (fn this.setHoverDisabled false)}} {{on \"keydown\" this.onKeyDown}} {{on \"focus\" this.onWrapperFocus}} {{on \"blur\" this.onWrapperBlur}} ...attributes>\n  <EuiScreenReaderOnly><p aria-live=\"polite\">{{this.announcement}}</p></EuiScreenReaderOnly>\n  <div class=\"euiRangeTrack {{if @disabled \"euiRangeTrack--disabled\"}}\">\n    <div class=\"euiRangeHighlight euiColorStops__highlight\n        {{if @compressed \"euiRangeHighlight--compressed\"}}\">\n      <div class=\"euiRangeHighlight__progress\" style={{cssStyle (hash marginLeft=\"0%\" width=\"100%\" background=this.gradient)}}></div>\n    </div>\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"euiColorStops__addContainer\n        {{if (or2 this.isHoverDisabled this.isNotInteractive) \"euiColorStops__addContainer-isDisabled\"}}\" data-test-subj=\"euiColorStopsAdd\" {{on \"click\" this.onAddClick}} {{on \"mousemove\" this.onAddHover}}>\n      <div class=\"euiColorStops__addTarget\" style={{cssStyle (hash left=(percent this.addTargetPosition))}}></div>\n    </div>\n    {{#each this.sortedStops key=\"id\" as |colorStop index|}}\n      <EuiColorStopThumb @stop={{colorStop.stop}} @color={{colorStop.color}} @index={{index}} @count={{@colorStops.length}} @onChange={{fn this.onStopChange colorStop.id}} @onFocus={{fn this.setFocusedStop index}} @onRemove={{if (gt1 this.sortedStops.length) (fn this.onRemove colorStop.id)}} @globalMin={{this.globalMin}} @globalMax={{this.globalMax}} @localMin={{this.localMin index}} @localMax={{this.localMax index}} @min={{@min}} @max={{@max}} @isRangeMin={{this.isRangeMin colorStop.stop}} @isRangeMax={{this.isRangeMax colorStop.stop}} @trackWidth={{this.trackWidth}} @parent={{this.wrapper}} @mode={{@mode}} @showAlpha={{@showAlpha}} @swatches={{@swatches}} @disabled={{@disabled}} @readOnly={{@readOnly}} @isPopoverOpen={{isEqual colorStop.id this.openedStopId}} @openPopover={{fn this.openStop colorStop.id}} @closePopover={{this.closeStop}} />\n    {{/each}}\n  </div>\n</EuiRangeWrapper>", {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} data-test-subj=\"euiColorStops\" tabindex={{if @disabled \"-1\" \"0\"}} {{this.registerWrapper @colorStops}} {{on \"mousedown\" (fn this.setHoverDisabled true)}} {{on \"mouseup\" (fn this.setHoverDisabled false)}} {{on \"mouseleave\" (fn this.setHoverDisabled false)}} {{on \"keydown\" this.onKeyDown}} {{on \"focus\" this.onWrapperFocus}} {{on \"blur\" this.onWrapperBlur}} ...attributes>\n  <EuiScreenReaderOnly><p aria-live=\"polite\">{{this.announcement}}</p></EuiScreenReaderOnly>\n  <div class={{this.trackClasses}}>\n    <div class={{this.highlightClasses.highlight}}>\n      <div class={{this.highlightClasses.progress}} data-test-subj=\"euiRangeHighlightProgress\" style={{cssStyle (hash background=this.gradient marginInlineStart=\"0%\" width=\"100%\")}}></div>\n    </div>\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class={{this.addContainerClasses}} data-test-subj=\"euiColorStopsAdd\" {{on \"click\" this.onAddClick}} {{on \"mousemove\" this.onAddHover}}>\n      <div class={{this.addTargetClasses}} style={{cssStyle (hash left=(percent this.addTargetPosition))}}></div>\n    </div>\n    {{#each this.sortedStops key=\"id\" as |colorStop index|}}\n      <EuiColorStopThumb @stop={{colorStop.stop}} @color={{colorStop.color}} @index={{index}} @count={{@colorStops.length}} @onChange={{fn this.onStopChange colorStop.id}} @onFocus={{fn this.setFocusedStop index}} @onRemove={{if (gt1 this.sortedStops.length) (fn this.onRemove colorStop.id)}} @globalMin={{this.globalMin}} @globalMax={{this.globalMax}} @localMin={{this.localMin index}} @localMax={{this.localMax index}} @min={{@min}} @max={{@max}} @isRangeMin={{this.isRangeMin colorStop.stop}} @isRangeMax={{this.isRangeMax colorStop.stop}} @trackWidth={{this.trackWidth}} @parent={{this.wrapper}} @mode={{@mode}} @showAlpha={{@showAlpha}} @swatches={{@swatches}} @disabled={{@disabled}} @readOnly={{@readOnly}} @isPopoverOpen={{isEqual colorStop.id this.openedStopId}} @openPopover={{fn this.openStop colorStop.id}} @closePopover={{this.closeStop}} />\n    {{/each}}\n  </div>\n</div>", {
       strictMode: true,
       scope: () => ({
-        EuiRangeWrapper,
         on,
         fn,
         EuiScreenReaderOnly,
         cssStyle,
         hash,
-        or2,
         percent,
         EuiColorStopThumb,
         gt1,
@@ -330,9 +397,6 @@ class EuiColorStops extends Component {
     }), this);
   }
 }
-function or2(a, b) {
-  return Boolean(a || b);
-}
 function gt1(n) {
   return n > 1;
 }