HoopsColorButtonElement

class ui.common.HoopsColorButtonElement()

A custom web component that provides a color picker button interface.

This component combines a visual button with a hidden HTML color input, allowing users to select colors through the native color picker while maintaining a custom button appearance. The button’s stroke color is dynamically updated to reflect the selected color.

Constructors

ui.common.HoopsColorButtonElement.constructor()
HoopsColorButtonElement(): HoopsColorButtonElement

Constructs a new HoopsColorButtonElement with default values.

Initializes the component with:

  • Empty title
  • White color value (“#ffffff”)
  • Disabled state set to false

Returns: HoopsColorButtonElement

Properties

ui.common.HoopsColorButtonElement.styles

static

styles: CSSResult[]

Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
ui.common.HoopsColorButtonElement.color
color: (“default” | “accent”)

The visual style variant of the button. Determines the button’s appearance and color scheme.

  • “default”: Standard button appearance
  • “accent”: Emphasized button with accent styling
ui.common.HoopsColorButtonElement.disabled
disabled: boolean

Whether the color button is disabled and non-interactive. When disabled, the button cannot be clicked and the color picker is not accessible. The button will also show disabled styling.

ui.common.HoopsColorButtonElement.iconSize
iconSize: string

The size of the icon displayed within the button. Controls the dimensions of any slotted icon content.

ui.common.HoopsColorButtonElement.role
role: string

The ARIA role for accessibility. Identifies the element as a button for screen readers and other assistive technologies. Set to “button” by default.

ui.common.HoopsColorButtonElement.tabindex
tabindex: string

The tab index for keyboard navigation accessibility. Controls the order in which the element receives focus when navigating with the Tab key. Set to “0” by default to include in normal tab order.

ui.common.HoopsColorButtonElement.title
title: string

The tooltip text displayed when hovering over the color button. This should provide context about what the color selection is for.

ui.common.HoopsColorButtonElement.value
value: string

The current selected color value in hexadecimal format (e.g., “#ff0000”). This value is used to set the initial color picker state and is updated when the user selects a new color. The value also affects the button’s stroke color via CSS custom properties.