toHtml() ?>>
isCopyable($stateItem);
$copyableStateJs = $isCopyable
? Js::from($this->getCopyableState($stateItem) ?? $stateItem)
: null;
$copyMessageJs = $isCopyable
? Js::from($this->getCopyMessage($stateItem))
: null;
$copyMessageDurationJs = $isCopyable
? Js::from($this->getCopyMessageDuration($stateItem))
: null;
$sanitizedColor = Str::sanitizeCssColor($stateItem);
?>
merge([
// The swatch conveys its value purely through `background-color`, so expose the color as a
// named `role="img"` for screen readers. Only the sanitized colour is used, so an invalid
// value is never announced. The copyable swatch is an interactive control that needs
// separate treatment (an accessible name and keyboard operability), so it is not named here.
'aria-label' => ($isCopyable || blank($sanitizedColor)) ? null : e($sanitizedColor),
'role' => ($isCopyable || blank($sanitizedColor)) ? null : 'img',
'x-on:click.prevent.stop' => $isCopyable
? << filled($tooltip = $this->getTooltip($stateItem))
? '{
content: ' . Js::from($tooltip) . ',
theme: $store.theme,
allowHTML: ' . Js::from($tooltip instanceof Htmlable) . ',
}'
: null,
], escape: false)
->class([
'fi-ta-color-item',
'fi-copyable' => $isCopyable,
])
->style([
'background-color: ' . e($sanitizedColor) => filled($sanitizedColor),
])
->toHtml() ?>>