import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type GemstoneKey}from'../../../theme/gemstones.js';import type{LyraSize}from'../../../internal/variants.js';export interface SwatchPickerItem{
/** The option's value -- reported in `lr-change` and matched against `value`. */
readonly value:string;
/** The swatch's fill color. Invalid CSS colors and `url()` paint servers are ignored. */
readonly color:string;
/** The swatch's nonblank accessible name; also used as its native `title` tooltip. Rows with
* an empty or whitespace-only label are omitted. */
readonly label:string;
/** Optional decorative custom shape rendered in place of the plain filled circle -- e.g. a gem
*  or other brand-specific glyph. Its rendered subtree is inert and aria-hidden. A
*  `currentColor`-based SVG (fill or stroke) picks up `color` automatically via the swatch's
*  `color` CSS property, matching `<lr-segmented>`'s `LyraSegmentedItem.icon` field. */
readonly icon?:unknown;
/** Canonical gemstone to render automatically in `mode="gemstone"`. An explicit `icon` still
* wins, so a consumer can customize one option without leaving gemstone mode. */
readonly gemstone?:GemstoneKey;}export type LyraSwatchPickerMode='swatch'|'gemstone';export interface LyraSwatchPickerEventMap{'lr-change':CustomEvent<{value:string;}>;'lr-activate':CustomEvent<{value:string;}>;}
/**
* `<lr-swatch-picker>` -- a single-select picker over a small, fixed set of color swatches with
* the WAI-ARIA APG `radiogroup` contract built in: `role="radiogroup"`/`role="radio"`, roving
* tabindex, automatic activation (click or arrow-key move both select immediately, like a native
* radio group), cyclic Arrow/Home/End navigation. Distinct from `<lr-color-picker>`'s freeform
* native color input -- this picks exactly one of N designer-chosen named colors, the shape apps
* otherwise hand-roll as a row of round accent-color buttons.
*
* `mode="gemstone"` uses the shared faceted gemstone glyph for items carrying a `gemstone`
* key and opts into the gemstone glow/shine defaults. The checked swatch's automatic glyph is
* themed by the exact same `gemstoneSelectedGlyphStyles` stylesheet exported from
* `theme/gemstones.js`, included here in `static styles` and applied through the same
* `data-lr-gemstone-selected` attribute documented on that export -- so a glyph rendered anywhere
* else on the page (for example a header trigger showing the current selection) can reach the
* identical halo/shine by consuming that export directly, and the two can never drift apart. An
* explicit `icon` override on a `mode="gemstone"` item is a consumer-authored shape, not that
* shared glyph, so it keeps this picker's own generic selected-icon shine instead (see
* `--lr-swatch-picker-gemstone-selected-blur`/`-shine-duration` below). The `items` array controls
* display order and `value` still controls the initial selection. Live option reorders preserve
* focus by option identity; removing the focused option moves focus to the nearest surviving
* swatch without changing the controlled `value` or emitting `lr-change`.
*
* `disabled` locks the whole picker: every swatch renders as a real `disabled` `<button>` (out of
* the tab sequence, inert to activation), keyboard navigation and `click()` become no-ops, and the
* swatches dim with a `not-allowed` cursor. It is the picker's own attribute only — this control is
* deliberately not form-associated (it submits nothing, carries no `name`, validity or reset
* semantics), so an ancestor `<fieldset disabled>` does not cascade into it.
*
* Own `disabled` takes effect immediately for host activation and focus, including calls made in
* the same task as the property change. Blocked activation leaves value and change events untouched;
* blocked focus keeps outside focus in place.
*
* @customElement lr-swatch-picker
* @event lr-change - Fired when the selected value changes via click or keyboard.
*   `detail: { value }`.
* @event lr-activate - Fired on every activation of a swatch -- a click, or an Arrow/Home/End key
*   that lands on one -- whether or not the selection actually moved. `detail: { value }` carries
*   the activated swatch's own value. Bubbling and composed, so a host outside the shadow tree
*   receives it. Not cancelable: it is a notification that the user picked a swatch, not a veto
*   point, and nothing in this component branches on it. Re-picking the current value is the case
*   `lr-change` deliberately stays silent for, and it is otherwise unobservable -- the swatches
*   live in this shadow root, so a retargeted `click` names no swatch, and keyboard activation
*   (Home on an already-first selection, End on an already-last one, an arrow key in a one-item
*   row) produces no click at all. When an activation does move the selection, `lr-change` is
*   emitted first, so a listener reading `value` from either event sees the settled selection.
* @csspart base - The `role="radiogroup"` root.
* @csspart swatch - A single `role="radio"` color swatch's interactive hit target; sized via
*   `--lr-swatch-picker-hit-size` (its private default follows `size` and is floored at 24px),
*   independent of the smaller visible fill/icon rendered inside it. A public value wins. The
*   selected one is `[part='swatch'][aria-checked='true']`.
* @csspart swatch-fill - The compact filled circle rendered when the option has no custom `icon`.
* @csspart swatch-icon - Optional decorative custom shape supplied by the option's `icon` field;
*   its subtree is inert and hidden from assistive technology. When present it replaces
*   `swatch-fill` and the swatch renders unfilled/unbordered behind it.
* @cssprop [--lr-swatch-picker-selected-color=var(--lr-color-brand)] - Ring color drawn around
*   the selected swatch, themeable independently of the focus ring and every other ring color.
* @cssprop [--lr-swatch-picker-selected-blur=0] - Blur radius of that same ring. 0 by default
*   (a crisp ring); set a real length (e.g. 0.4rem) for a soft glow instead.
* @cssprop [--lr-swatch-picker-shine-duration=0s] - Duration of a rhythmic brighten-and-settle
*   "shine" on the selected swatch. `0s` (the default) is a no-op -- today's static look for every
*   existing consumer. Set a real duration (e.g. 1.6s) for a pulsing shine; disabled outright under
*   `prefers-reduced-motion: reduce`. Independent of `--lr-swatch-picker-selected-blur` (a separate
*   `filter: brightness()` animation, not `box-shadow`), so the two compose freely, and works
*   identically for a plain color circle and an icon swatch alike.
* @cssprop [--lr-swatch-picker-gemstone-selected-blur=var(--lr-gemstone-selected-blur, var(--lr-size-0-5rem))] - Selected glow
*   blur used by `mode="gemstone"` when `--lr-swatch-picker-selected-blur` is not overridden.
*   Applies to a plain color-fill swatch and to a consumer-supplied `icon` override; the
*   automatic gemstone glyph itself is themed by `--lr-gemstone-selected-blur` directly (see
*   `theme/gemstones.js`'s `gemstoneSelectedGlyphStyles`), which this hook's own default now
*   aliases so the two cannot silently drift apart.
* @cssprop [--lr-swatch-picker-gemstone-shine-duration=var(--lr-gemstone-selected-shine-duration, var(--lr-transition-ambient))] - Selected shine timing used by
*   `mode="gemstone"` when `--lr-swatch-picker-shine-duration` is not overridden. Same scope and
*   aliasing as `--lr-swatch-picker-gemstone-selected-blur` above.
* @cssprop [--lr-swatch-picker-hit-size=var(--lr-size-2-5rem)] - Hit-area size (both
*   min-inline-size and min-block-size) for the swatch button. Its private default follows the
*   active tier and is floored at 24px; an inherited or direct public value wins.
* @cssprop [--lr-swatch-picker-fill-size=var(--lr-theme-swatch-picker-fill-size, var(--lr-size-1-5rem))] - Visible
*   fill/icon diameter for the swatch. Its private default follows the active tier. Set
*   `--lr-theme-swatch-picker-fill-size` on an ancestor to give every tier a shared default, or set
*   this component hook on an ancestor/direct host to override every tier.
* @cssprop [--lr-swatch-picker-gap=var(--lr-space-xs)] - Gap between swatches.
* @cssprop [--lr-swatch-picker-wrap=wrap] - `flex-wrap` on the swatch row. Reproduces today's
*   hardcoded wrapping row by default; set `nowrap` to confine every swatch to a single row (e.g.
*   inside a fixed-width popover panel whose height must not shift from a second row).
* @status stable
* @since 4.0.0
*/
export declare class LyraSwatchPicker extends LyraElement<LyraSwatchPickerEventMap>{static styles:import("lit").CSSResultGroup[];static properties:{items:{attribute:boolean;noAccessor:boolean;};};private _items;private readonly itemSnapshots;
/** The selectable color swatches, in display order. */
get items():readonly SwatchPickerItem[];set items(next:readonly SwatchPickerItem[]);
/** The currently selected option's `value`, or `null` when nothing is selected. */
value:string|null;
/** Visual size — scales the swatch hit-area and fill diameter proportionally, hit-area
*  floored at 24px (WCAG 2.5.8); not pixel-matched to `lr-input`'s row-height scale. The Web Awesome / Shoelace spellings
*  `small`/`medium`/`large` are accepted for `s`/`m`/`l`, so a migration is a tag rename with no
*  attribute rewrite. */
size:LyraSize;
/** Visual treatment. `swatch` preserves the plain-circle default; `gemstone` renders the shared
* gemstone glyph for items with a `gemstone` key and enables its glow/shine recipe. */
private _mode;get mode():LyraSwatchPickerMode;set mode(next:LyraSwatchPickerMode);
/** Accessible-name fallback for the radiogroup when the host has no `aria-label`, used when no
*  visible label context exists around it (e.g. no wrapping `<label>` or adjacent heading).
*  The resolved name is set on the `role="radiogroup"` element. */
accessibleLabel:string;
/** Locks the whole picker: every rendered swatch becomes a genuinely `disabled` `<button>` (so
*  it leaves the tab sequence and stops emitting activation), arrow/Home/End navigation and
*  `click()` become no-ops, and the swatches dim to `--lr-opacity-disabled` with a `not-allowed`
*  cursor. Use it for the usual "locked while saving" case.
*
*  This is the picker's OWN attribute only. `<lr-swatch-picker>` is deliberately not a
*  form-associated element — it emits `lr-change` and is driven by `value`, but it submits
*  nothing and has no name, validity or reset semantics — so, exactly like a native `<div>`,
*  it takes no disablement from an ancestor `<fieldset disabled>`. Disable the picker itself
*  alongside the fieldset when a form needs both. */
disabled:boolean;private selectedOption?;private selectedIndex;private fallbackTabbableIndex;private pendingFocusIndex?;private resolveSelectedIndex;private select;private focusSwatch;protected willUpdate(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;
/** The single `role="radio"` swatch that is currently in the roving tab sequence -- the
*  selected one, the nearest survivor of a live palette mutation, or the first swatch when
*  nothing has been selected yet. Mirrors the identical `tabbableIndex` fallback in `render()`. */
private tabbableSwatch;
/** Activates the tabbable swatch, mirroring `<lr-switch>`'s identical `override click()`.
*  Without this, `HTMLElement.prototype.click()` on the host is a no-op: no click handler is
*  bound to the host itself, only to the individual `[part="swatch"]` buttons. */
click():void;
/** Moves focus to the tabbable swatch. */
focus(options?:FocusOptions):void;
/** Removes focus from the tabbable swatch. */
blur():void;
/** Returns the owned swatch that originated this keyboard event. A controlled `value` write can
* move selection while real focus deliberately remains on a different occurrence, so selection
* is only the fallback when neither the event path nor the current shadow focus identifies a
* swatch. */
private keyboardOriginIndex;private onKeyDown;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-swatch-picker':LyraSwatchPicker;}}