import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraToolbarAction}from'../../conversation/message-actions/toolbar-actions.js';export interface LyraIconButtonEventMap{focus:FocusEvent;blur:FocusEvent;} /** `` — an accessible icon-only action button. * * Set `icon` for one of ``'s named glyphs, or slot your own content instead. Slotted * content is a **sibling** of the built-in glyph rather than being piped through ``, so * any complete element — an ``, an ``, an `` — renders at its own natural * aspect ratio instead of being forced into a 1:1 box. Bare SVG geometry (``, ``, * and a handful of other raw primitives) with no enclosing `` of its own is detected and * cloned into a real, internal SVG-namespaced element so it still paints — the same fallback * ``'s own custom-content slot uses, but narrowly scoped so a custom element (e.g. a * slotted ``) is never run through it. * * Host `aria-haspopup` and `aria-expanded` values are forwarded reactively to the shadow-internal * native button. `aria-pressed` (`true`, `false`, `mixed`) supports icon-only toggle actions (mute, * favorite, pin); `aria-current` (`page`, `step`, `location`, `date`, `time`, `true`, `false`) * supports current-item icon buttons. Both follow attribute changes, removal and button/link * replacement without changing the native role; empty or unsupported tokens are omitted. Host * `aria-describedby` and `aria-labelledby` IDREFs are resolved through * `ariaDescribedByElements`/`ariaLabelledByElements`. * Relationship targets follow same-ID replacement, removal, reinsertion, reconnection and document * adoption, including transitions between the native button and anchor. * * `getToolbarActions()` contributes this control as one logical action to an enclosing composite * toolbar (``), so a roving-tabindex owner leases the internal control's own * `tabindex` rather than the host's -- setting `tabindex` on a custom-element host neither adds nor * removes its shadow-internal button's tab stop. * When host `aria-controls` names elements in the host's own root, the controls relationship is * resolved onto that focused control through the reflected element-reference API so it remains * valid across this component's shadow boundary. Assigning that relationship intentionally clears * the serialized `aria-controls` value; read `ariaControlsElements` in a supporting browser. * Browsers without that API retain the forwarded string attribute as a best-effort fallback. * * This icon-only primitive is intentionally an action/link, not a form submitter. Use * `` with an icon-only default slot when a form action is * required; that component owns the complete native submitter contract. Because this tag is not * form-associated, ancestor `
` state does not reach it and it is absent from * `form.elements`; disable each icon button explicitly. * * The mirrored upstream's icon-name vocabulary is not bundled. The nested `` default * library contains only `add`, `check`, `close`, `search`, `menu`, `chevron-left`, * `chevron-right`, `chevron-down`, `calendar`, `command`, and `trash`; any other `icon`/`name` * renders no glyph unless a matching library is registered, including through * `registerIconLibrary('default', { resolver })`. * * A safe `href` switches the interactive root to a native anchor. `rel` is independently * settable (no default); `opener` is always stripped and any `target` force-adds the * non-removable `noopener noreferrer` guard. `download` narrows URL validation to downloadable * schemes. A disabled link keeps the anchor anatomy but removes `href`, so it cannot navigate. * * Component-scoped theme inputs remain undeclared on the host, so values inherited from an * ancestor theme wrapper override the built-in fallback. A value set directly on the icon button * still wins through normal custom-property inheritance. `--lr-icon-button-size` is the one * exception among this component's own cssprops: see its own `@cssprop` entry below. * * **No `size` attribute, deliberately.** This control is the one component in the library that * does NOT key off the shared six-step size ladder, and the reason is that its dimension is an * accessibility floor rather than a density dial. `--lr-icon-button-size` states the minimum * tappable target the whole library sizes its icon controls against, and `check:hit-area` blocks a * release that drops below it. The ladder's own small tiers sit at or under WCAG 2.5.8's 24px * minimum — `2xs` resolves to 20px and `xs` to 24px — so wiring the target to the ladder would let * `size="2xs"` ship an untappable control, and would do it silently because the ladder is the * mechanism every neighbouring control uses correctly. A smaller icon button therefore stays an * explicit, single-purpose decision: override `--lr-icon-button-size`, which reads as the * accessibility trade-off it is. Scaling the glyph inside that floor is a separate concern and * already has its own inherited input, `--lr-icon-size`. * * Lowering the size for a dense action row below the ordinary 2.5rem/40px floor is safe ONLY * through an ancestor lever -- `--lr-theme-icon-button-size` (application-wide) or * `--lr-icon-button-size-scope` (one subtree). The coarse-pointer/no-hover media rule in * `internal/tokens.styles.ts`'s `baseTokens` reads both, and floors the RENDERED hit area back at * 2.75rem/44px however far the override lowered it, so the control stays comfortably tappable the * moment the pointer reaching it is a finger rather than a mouse. * * Setting `--lr-icon-button-size` DIRECTLY on this element does NOT get that floor, and the * reference said for several releases that it did. A declaration on the host comes from the outer * tree and outranks the shadow tree's own `:host` rule, so the media rule never wins and the * rendered hit area is exactly the value set: `--lr-icon-button-size: 1rem` really does render a * 16px target under a coarse pointer. Below 24px that fails WCAG 2.2 SC 2.5.8, so the * element-scoped lever is the explicit accessibility trade-off it reads as -- prefer a subtree * override when the intent is merely a denser row. See `internal/tokens.test.ts`. * * @customElement lr-icon-button * @event focus - Native focus relayed once from the internal button. * @event blur - Native blur relayed once from the internal button. * @attr aria-pressed - Toggle state forwarded reactively to the internal control: true, false or mixed. * @attr aria-current - Current-item state forwarded reactively to the internal control: page, step, location, date, time, true or false. * @attr aria-labelledby - Host IDREFs resolved onto the internal control through * `ariaLabelledByElements`, so a composing component can name this button from elements in its * own shadow root. An IDREF string alone cannot cross that boundary; the reflected element * reference can. Per ARIA it wins over `aria-label`/`label` and the localized fallback name. * @attr rel - Independently settable author relationship tokens (no default). `opener` is always * stripped, and any `target` force-adds the non-removable `noopener noreferrer` guard. * @slot - Optional custom icon content, rendered beside (not inside) the `icon` glyph. * @csspart base - Shoelace compatibility name for the interactive native control; use `button`. * @csspart button - Native button, or the native anchor in safe link mode. The same node also * carries `base`. * @csspart fallback - The internal SVG-namespaced clone target for slotted bare geometry. Carries * the same `fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" * stroke-linejoin="round"` defaults ``'s own wrapper svg does, so bare stroke-style * geometry (no fill/stroke of its own) renders outlined instead of as a solid shape; an explicit * `fill`/`stroke`/etc. already present on the slotted node still wins for that node. Only present * in the DOM while at least one top-level slotted element needs it; a complete ``, `
`, * or custom element never mounts it. * @cssprop [--lr-icon-button-size=2.5rem] - Minimum tappable inline and block size of the native * button — a **floor**, not a fixed size: content larger than it grows the button and keeps its * own aspect ratio, while a small glyph pads out to it. A library-wide token (declared on * every `lr-*` host by `tokens.styles.ts`, and the shared minimum tappable size several other components * size their icon controls against), so overriding it globally resizes all of them together. * **Element-scoped, unlike the `--lr-icon-button-*` cssprops below:** every `lr-*` host * re-declares `--lr-icon-button-size` from `--lr-theme-icon-button-size` in the shared token * layer, so an ancestor rule that sets `--lr-icon-button-size` directly is reset the moment it * crosses into any intervening `lr-*` component's shadow root and never reaches this element. * Set it directly on this element, set `--lr-icon-button-size-scope` on any ancestor to resize * one subtree, or set `--lr-theme-icon-button-size` to resize every icon button in the * application at once. Only the two ancestor levers keep the coarse-pointer hit-area floor; * see `llms/shared.md`. * @cssprop [--lr-icon-button-radius=var(--lr-radius)] - Corner radius of the native button. * @cssprop [--lr-icon-button-background=transparent] - Background fill of the native button. * @cssprop [--lr-icon-button-background-hover=color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-hover))] - * Background fill on hover. Before 8.0.0 this fell back to `var(--lr-color-surface)` — the page * background — so on a default page a hovered icon button painted itself the colour it was * already sitting on and showed no hover at all. * @cssprop [--lr-icon-button-background-active=color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))] - * Background fill while pressed: the same mix at the stronger `--lr-color-mix-active` share, so * the pressed state is visibly more than the hover. * @cssprop [--lr-icon-button-color=inherit] - Icon/text color of the native button. * @cssprop [--lr-icon-button-color-hover=var(--lr-icon-button-color, inherit)] - Icon/text color * on hover. * @cssprop [--lr-icon-button-color-active=var(--lr-icon-button-color-hover, var(--lr-icon-button-color, inherit))] - * Icon/text color while pressed; falls through to the hover colour when only that is set. * @cssprop [--lr-icon-button-border=0] - Complete border shorthand of the native button. * @cssprop [--lr-icon-button-border-hover=var(--lr-icon-button-border, 0)] - Complete border * shorthand on hover. * @cssprop [--lr-icon-button-border-active=var(--lr-icon-button-border-hover, var(--lr-icon-button-border, 0))] - * Complete border shorthand while pressed; falls through to the hover border when only that is set. * @status stable * @since 4.0.0 */ export declare class LyraIconButton extends LyraElement{static styles:import("lit").CSSResultGroup[];static properties:{disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};};private _disabled;private externalDescriptionLease?;private externalLabelLease?;private readonly toolbarAction;get disabled():boolean;set disabled(next:boolean); /** Whether the action is disabled. */ get effectiveDisabled():boolean; /** Canonical Lyra glyph name. Shoelace's `name` alias delegates to the same state. */ icon:string; /** Shoelace alias for `icon`. Reads and writes remain synchronized in both directions; an * upstream `undefined` write clears both to the canonical empty-string read value. */ get name():string;set name(next:string|undefined); /** Icon-library name forwarded to the nested ``. */ library?:string; /** Remote SVG URL forwarded to the nested `` and handled by its guarded loader. */ src?:string;accessibleLabel:string;private triggerHasPopup;private triggerExpanded;private triggerControls;private triggerDescribedBy;private triggerPressed;private triggerCurrent;label:string; /** Safe link URL. When valid, the native root is an anchor rather than a button. */ href?:string; /** Native anchor target. A non-empty target always derives a safe `rel`. */ target?:string; /** Author relationship tokens for the rendered anchor, e.g. `nofollow me license` -- mirrors * `wa-icon-button`/`sl-icon-button`'s own `rel`, so values a migrating consumer already relies * on survive a `wa-`/`sl-` -> `lr-` rename instead of being silently dropped. Two rules are * enforced regardless of what an author writes: `opener` is always stripped (the one token that * re-opens the reverse-tabnabbing vector), and `noopener noreferrer` is force-added whenever * `target` is set. With no `target` there is no new browsing context to protect, so a same-tab * link renders exactly the author's tokens. Deliberately left with no default, matching * ``'s own `rel`. */ rel?:string; /** Native anchor download filename; also selects the stricter download URL allowlist. */ download?:string;private baseEl?;private slotEl?;private fallbackSvgEl?; /** Only ever true when `icon` is unset and at least one top-level slotted element is bare SVG * geometry with no SVG parent of its own -- see `needsSvgNamespaceFallback`. Mounts the internal * `[part="fallback"]` SVG, which `updated()` then populates via `syncFallbackGeometry()`. */ private hasBareGeometry; /** Resolved `rel` for the rendered anchor: author tokens minus `opener`, plus the * `noopener noreferrer` guard whenever `target` is set. `undefined` when nothing remains, so the * attribute is omitted rather than rendered empty. Mirrors ``'s own `resolvedRel`. */ private get resolvedRel(); /** * The internal native `