@jimka/typescript-ui 0.1.0

package/dist/lib/Button-DEUtBqK4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-DEUtBqK4.js","names":[],"sources":["../../src/typescript/lib/component/button/Button.ts"],"sourcesContent":["// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Component, ComponentOptions } from \"~/core/Component.js\";\nimport { Event } from \"~/core/Event.js\";\nimport { Fit } from \"~/layout/Fit.js\";\nimport { HBox } from \"~/layout/HBox.js\";\nimport { VBox } from \"~/layout/VBox.js\";\nimport { Text } from \"~/component/input/Text.js\";\nimport { Tooltip } from \"~/overlay/Tooltip.js\";\nimport { Glyph } from \"~/component/display/Glyph.js\";\nimport { FillType } from \"~/layout/FillType.js\";\nimport { AnchorType } from \"~/layout/AnchorType.js\";\nimport { StyleRule } from \"~/core/StyleTarget.js\";\nimport { BorderOptions, borderToStyle } from \"~/primitive/Border.js\";\nimport { Insets } from \"~/primitive/Insets.js\";\nimport { Size } from \"~/primitive/Size.js\";\nimport { callable } from \"~/core/Callable.js\";\nimport { Util } from \"~/core/Util.js\";\n\n/**\n * String-literal union of the events emitted by {@link Button}. A typed\n * shorthand over [`Event.addListener`](/api/core/classes/Component) /\n * [`Event.removeListener`](/api/core/classes/Component) — Button does not\n * own a [`ListenerBag`](/api/core/classes/ListenerBag); the DOM `\"click\"`\n * event is dispatched through the framework's window-level capture handler.\n *\n * @category Components\n */\nexport type ButtonEvent = \"action\";\n\n/**\n * The handler shape consumers register for the `\"click\"` button event.\n *\n * @category Components\n */\nexport type ClickListener = (event: MouseEvent) => void;\n\n/**\n * Construction-time options for {@link Button}.\n *\n * @category Components\n */\nexport interface ButtonOptions extends ComponentOptions {\n    text?:                   string;\n\n    /**\n     * Optional subtitle rendered on a second line *below* the title, in a\n     * smaller, dimmer style. Dispatched late (mirroring `text`) so it lands\n     * once the content row's children exist. Drives the hover tooltip\n     * alongside `text` — see [`setDescription`](/api/component/button/classes/Button#setdescription).\n     */\n    description?:            string;\n\n    /**\n     * When a leading glyph *and* a description are both present, controls\n     * where the description aligns. `true` (default) spans the description\n     * full-width *below* the glyph+title row, its left edge under the glyph.\n     * `false` indents it under the title text, beside the glyph. No visible\n     * effect without both a glyph and a description, or when `showDescription`\n     * is `false`. Runtime counterpart: `setDescriptionUnderGlyph`.\n     */\n    descriptionUnderGlyph?:  boolean;\n\n    /**\n     * When `false`, the description is *not* rendered on the button face — the\n     * button shows only its glyph and title — but it still appears in the\n     * hover tooltip (`{title}\\n\\n{description}`). Default `true`. The text is\n     * always stored; only its on-button render is suppressed. No effect\n     * without a description. Runtime counterpart: `setShowDescription`.\n     */\n    showDescription?:        boolean;\n\n    /**\n     * When `false`, the title is *not* rendered on the button face — the\n     * button shows only its glyph — but the title still drives the hover\n     * tooltip (`{title}\\n\\n{description}`) and is reflected into `aria-label`\n     * as the accessible name. Default `true`. The title is always stored; only\n     * its on-button render is suppressed. Pairs with `showDescription` to give\n     * a glyph-only button a tooltip + accessible name without an on-face label.\n     * Runtime counterpart: `setShowText`.\n     */\n    showText?:               boolean;\n    glyph?:                  string;\n\n    /**\n     * Tints the leading glyph independently of the button's `foregroundColor`,\n     * which colours the whole face (title *and* glyph). Sets the glyph\n     * element's own `color`, picked up by its `currentColor` SVG fill — so a\n     * button can render, say, a green glyph beside default-coloured text.\n     * Survives a later `setGlyph`. Runtime counterpart: `setGlyphColor`.\n     */\n    glyphColor?:             string;\n\n    /**\n     * Tints the description subtitle independently of the button's\n     * `foregroundColor`, overriding the default dim description colour.\n     * Runtime counterpart: `setDescriptionColor`.\n     */\n    descriptionColor?:       string;\n\n    enabled?:                boolean;\n    pressedBackgroundColor?: string;\n    pressedBackgroundImage?: string;\n    pressedForegroundColor?: string;\n    pressedBorder?:          BorderOptions | string;\n    pressedBorderRadius?:    string;\n    pressedShadow?:          string;\n    hoverBackgroundColor?:   string;\n    hoverBackgroundImage?:   string;\n    hoverForegroundColor?:   string;\n    hoverBorder?:            BorderOptions | string;\n    hoverBorderRadius?:      string;\n    hoverShadow?:            string;\n\n    /**\n     * Suppresses the framework's visual-chrome defaults — `border`,\n     * `borderRadius`, `shadow`, `backgroundImage`, the twelve `pressedX` /\n     * `hoverX` fields, and the UA `<button>` background. Use for buttons\n     * that want only the cursor, color, and inset behaviour of `Button`\n     * without the ridge border, drop shadow, and gradient background.\n     * Runtime-toggle counterpart is `setChromeless`; read with\n     * `isChromeless`. Used by [`PickerButton`](/api/component/input/classes/PickerButton)\n     * and [`MenuBarButton`](/api/component/menubar/classes/MenuBarButton).\n     *\n     * `applyOptions({ chromeless: true })` on a previously-chromeful button\n     * writes the flag pure into `_options` and gates future chrome\n     * dispatches, but does not clear the chrome already on the element —\n     * callers wanting a runtime flip should call `setChromeless(true)`\n     * directly.\n     */\n    chromeless?:             boolean;\n\n    /**\n     * Classical \"flat\" appearance: no resting border/shadow/gradient; a light\n     * frame + fill on `:hover:not(:active)` and a sunken inset frame on\n     * `:active`. Mutually exclusive with `chromeless` (chromeless wins).\n     * Runtime counterpart `setFlat`; read with `isFlat`.\n     */\n    flat?:                   boolean;\n\n    /**\n     * Compact rendering: tighter symmetric insets so the button reads denser\n     * (e.g. packed into a [`ToolBar`](/api/component/menubar/classes/ToolBar)).\n     * Text buttons go `(5,10,5,10)` →\n     * `(2,6,2,6)`; glyph-only buttons collapse to a `(2,2,2,2)` square.\n     * Defaults to `false`. Runtime counterpart `setCompact`; read with\n     * `isCompact`.\n     */\n    compact?:                boolean;\n\n    /**\n     * Anchor for the inner content row (glyph + label) within Button's outer\n     * `Fit` layout. Defaults to {@link AnchorType.CENTER}. Pass\n     * {@link AnchorType.WEST} for left-anchored menubar-style buttons.\n     */\n    anchor?:                 AnchorType;\n\n    /**\n     * Fill mode for the inner content row within Button's outer `Fit`\n     * layout. Defaults to {@link FillType.NONE} (content sits at preferred\n     * size, anchor decides displacement). `BOTH` stretches it to fill.\n     */\n    fill?:                   FillType;\n\n    /**\n     * Construction-time listener bag — the declarative form of `on()`. The\n     * `action` entry is wired as if `on(\"action\", fn)` had been called (it\n     * fires on the underlying DOM `click`).\n     */\n    listeners?:              { action?: ClickListener };\n}\n\n/**\n * Default button inset perimeter — generous `5/10` (vertical/horizontal) so a\n * raised button reads as a comfortable click target. The asymmetric horizontal\n * padding gives the label breathing room either side of its centred glyph.\n */\nconst BUTTON_DEFAULT_INSETS: Insets = new Insets(5, 10, 5, 10);\n\n/**\n * Compact inset perimeter for a text-bearing button — `2/6`. Tightens the\n * generous default so the button reads denser (e.g. packed into a `ToolBar`)\n * while keeping enough horizontal padding that the label doesn't touch the\n * frame. Driven by {@link Button.setCompact}.\n */\nconst BUTTON_COMPACT_INSETS_TEXT: Insets = new Insets(2, 6, 2, 6);\n\n/**\n * Compact inset perimeter for a glyph-only button — a tight `2/2` square so a\n * toolbar icon collapses to its glyph with minimal margin. Driven by\n * {@link Button.setCompact}; supersedes the non-compact flat square below.\n */\nconst BUTTON_COMPACT_INSETS_GLYPH: Insets = new Insets(2, 2, 2, 2);\n\n/**\n * Flat glyph-only square inset — `4/4`. A non-compact flat glyph button (a\n * toolbar icon on a non-compact bar) collapses its asymmetric `5/10` default\n * to this square so it reads as a tight icon without the full compact tightening.\n */\nconst BUTTON_FLAT_GLYPH_INSETS: Insets = new Insets(4, 4, 4, 4);\n\n/**\n * Resting background the chromeful path installs as a colour (mirroring the\n * `--ts-ui-button-bg` image `super.applyChromeOptions` paints). Shared between\n * `applyChromeOptions` and `_applyFlatChrome` so the flat path can recognise\n * this framework default in `_options.backgroundColor` and tell it apart from a\n * colour the consumer set — the flat appearance is transparent at rest, so it\n * must clear the former but preserve the latter.\n */\nconst BUTTON_RESTING_BACKGROUND: string = \"var(--ts-ui-button-bg, transparent)\";\n\n/**\n * User-overridable visual defaults forwarded to `super` via the options bag.\n * The cascade in `Component`'s constructor dispatches each setter once with\n * the final value, so any field the caller supplied wins. Includes the\n * `pressedX` and `hoverX` defaults because both `pressedStyleRule` and\n * `hoverStyleRule` are lazy getters — those setters are safe to fire during\n * the super cascade and queue their writes until the rule materialises.\n */\nconst _defaultButtonOptions: Partial<ButtonOptions> = {\n    tag:                    \"button\",\n    cursor:                 \"pointer\",\n    foregroundColor:        \"var(--ts-ui-text-color, black)\",\n    border:                 \"2px ridge var(--ts-ui-button-border, rgb(200, 200, 200))\",\n    borderRadius:           \"var(--ts-ui-border-radius, 4px)\",\n    shadow:                 \"var(--ts-ui-button-shadow, 1px 2px 5px 0 rgba(0, 0, 0, 0.2))\",\n    backgroundImage:        \"var(--ts-ui-button-bg, linear-gradient(rgb(241, 241, 241), rgb(200, 200, 200)))\",\n    insets:                 BUTTON_DEFAULT_INSETS,\n    anchor:                 AnchorType.CENTER,\n    fill:                   FillType.NONE,\n    pressedForegroundColor: \"var(--ts-ui-button-pressed-fg, rgb(150, 150, 150))\",\n    pressedBackgroundColor: \"var(--ts-ui-button-pressed-bg, rgb(200, 200, 200))\",\n    pressedBackgroundImage: \"var(--ts-ui-button-pressed-bg, none)\",\n    pressedShadow:          \"var(--ts-ui-button-pressed-shadow, 1px 2px 5px 0 rgba(0, 0, 0, 0.2) inset)\",\n    hoverBackgroundColor:   \"var(--ts-ui-button-hover-bg, rgb(252, 252, 252))\",\n    hoverBackgroundImage:   \"var(--ts-ui-button-hover-bg, none)\",\n    hoverShadow:            \"var(--ts-ui-button-hover-shadow, 1px 3px 6px 0 rgba(0, 0, 0, 0.25))\",\n};\n\n/**\n * A push button component with a text label and configurable pressed-state appearance.\n *\n * Maintains separate CSS rules for the normal and `:active` states, allowing\n * independent control of border, shadow, background, and foreground color when pressed.\n *\n * @example\n * ```typescript\n * import { Event } from '@jimka/typescript-ui/core';\n * import { Button } from '@jimka/typescript-ui/component/button';\n *\n * const button = new Button('Save');\n * Event.addListener(button, 'click', () => save());\n * panel.addComponent(button);\n * ```\n *\n * @category Components\n */\nclass Button<TOptions extends ButtonOptions = ButtonOptions> extends Component<TOptions> {\n\n    private _text!:    Text;\n    /**\n     * The button's content-row container. Holds the optional leading\n     * [`Glyph`](/api/component/display/classes/Glyph) plus the `_text` label,\n     * laid out by an `HBox`. Exposed as `protected` so subclasses can\n     * re-anchor (`removeComponent` + `addComponent`) or rebuild the row\n     * without having to opt into `customLayout: true`. Treat as part of the\n     * subclass contract — future restructuring of Button's content row\n     * needs to keep this field's identity and shape stable.\n     */\n    protected _content!: Component;\n\n    /**\n     * The vertical title/subtitle stack nested inside `_content`'s HBox. Holds\n     * `[_text, _description?]` laid out by a `VBox`, so the optional\n     * description renders on a line below the title while the leading glyph\n     * stays beside the whole stack. Private — unlike `_content` this is an\n     * internal detail of how the label row stacks and is not part of the\n     * subclass re-anchor contract.\n     */\n    private _titleColumn!: Component;\n\n    /**\n     * The subtitle label, created lazily on the first {@link setDescription}\n     * call (mirroring `_glyph`'s lazy creation) so a button with no\n     * description never reserves a second line. `null` until then. Stays\n     * alive (detached, not nulled) when `showDescription` is `false` so the\n     * tooltip can still read its text.\n     */\n    private _description: Text | null = null;\n\n    /**\n     * When `true`, {@link _rebuildTooltip} detaches the hover tooltip instead of\n     * attaching it, regardless of the title/description text. Lets a subclass\n     * silence the tooltip while the button is showing its own popup — e.g. a\n     * [`MenuBarButton`](/api/component/menubar/classes/MenuBarButton) whose\n     * dropdown is open, where the tooltip would otherwise float over the menu.\n     * Toggled via {@link setTooltipSuppressed}.\n     */\n    private _tooltipSuppressed: boolean = false;\n\n    /**\n     * Lazy containers used only by the \"under glyph\" (full-width) description\n     * topology: `_outerColumn` (VBox) holds `[_innerRow, _description]` and\n     * `_innerRow` (HBox) holds `[glyph?, _text]`. Created on first entry into\n     * that mode so a button with no description (or in under-title mode) never\n     * allocates them — keeping the minimal tree the subclasses depend on.\n     * Private; not part of the subclass re-anchor contract.\n     */\n    private _outerColumn: Component | null = null;\n    private _innerRow:    Component | null = null;\n\n    private _glyph: Glyph | null = null;\n\n    /**\n     * The square pixel size {@link _syncGlyphSize} last wrote to `_glyph`'s\n     * preferred size. Acts as the per-glyph opt-out guard: on a re-sync (e.g.\n     * theme toggle) the glyph is only re-matched to the title line height when\n     * its current preferred size still equals this value — so a subclass /\n     * consumer that pinned its own glyph size (SpinButton, Tab close-glyph)\n     * is left untouched. `null` until the framework first sizes the glyph.\n     *\n     * This size-difference guard is unreliable on its own: a consumer that\n     * pins the glyph *before* the first successful sync (while this is still\n     * `null` — e.g. before the button is attached and the line height\n     * resolves) is not protected, so the first post-attach re-sync clobbers\n     * the pin. {@link _glyphSizePinned} is the authoritative opt-out.\n     */\n    private _glyphSyncedSize: number | null = null;\n\n    /**\n     * Set by {@link pinGlyphSize} when a consumer fixes the leading glyph to a\n     * specific size. While `true`, {@link _syncGlyphSize} skips the glyph\n     * entirely, so a theme change never re-tracks it to the title line height.\n     * This is the reliable opt-out (the {@link _glyphSyncedSize} size-diff guard\n     * has a null-window hole — see there).\n     */\n    private _glyphSizePinned: boolean = false;\n\n    /**\n     * Flipped to `true` the first time a consumer calls `setPreferredSize`\n     * (directly or via the options bag). When set, the native auto-sizing\n     * pipeline (see `recomputePreferredSize`) no-ops so the consumer's\n     * explicit intent wins permanently. There's no public surface to\n     * re-enable auto-sizing — a future plan can add a `clearPreferredSize`\n     * method that resets this flag and re-fires the recompute.\n     *\n     * `declare` rather than `= false` so the class-field super-cascade trap\n     * doesn't clobber the value when `Component.applyOptions` dispatches\n     * `setPreferredSize` during the super-time cascade (an `= false`\n     * initializer runs *after* super returns and would silently revert the\n     * setter's `_consumerSetPreferredSize = true` write — letting the\n     * end-of-constructor `recomputePreferredSize` overwrite the consumer's\n     * preferred size with the content-derived value). The early-return\n     * check at the top of `recomputePreferredSize` treats `undefined` as\n     * falsy, so the no-cascade-write case still auto-sizes correctly.\n     */\n    private declare _consumerSetPreferredSize?: boolean;\n\n    /**\n     * Bound theme-change handler. The auto-sizing pipeline reads font-size\n     * and glyph metrics that can shift with the active theme, so the recompute\n     * re-fires whenever the theme cascade flips. `_rebuildContentRow` runs\n     * first so the single-line optical inset re-reads the freshly-invalidated\n     * `Util.opticalCenterOffset()` — `recomputePreferredSize` alone does not\n     * touch the content row. Held on the instance so a future `dispose` path\n     * can unregister it.\n     */\n    private readonly _onThemeChange: () => void = () => {\n        this._rebuildContentRow();\n        this.recomputePreferredSize();\n    };\n\n    // Lazy `:active` rule. The slot is just a fast-path cache — the\n    // `createStyleRule` builder on Component dedupes by selector suffix, so\n    // even if the slot is reset between calls (e.g. by TypeScript class-field\n    // init after super returns), the next access still returns the same\n    // wrapper that the super-cascade allocated. `declare` keeps the slot off\n    // the runtime class so the fast-path doesn't pay an unnecessary Map\n    // lookup after construction.\n    private declare _pressedStyleRule?: StyleRule;\n    private get pressedStyleRule(): StyleRule {\n        return this._pressedStyleRule ??= this.createStyleRule(\":active\");\n    }\n    private _pressedBorder: BorderOptions | null = null;\n\n    // Lazy `:hover:not(:active)` rule. The `:not(:active)` guard makes the\n    // cascade unambiguous regardless of source order — the moment the\n    // pointer goes down, `:active` matches and `:hover:not(:active)` stops\n    // matching, so the pressed treatment always wins.\n    private declare _hoverStyleRule?: StyleRule;\n    private get hoverStyleRule(): StyleRule {\n        return this._hoverStyleRule ??= this.createStyleRule(\":hover:not(:active)\");\n    }\n    private _hoverBorder: BorderOptions | null = null;\n\n    /**\n     * Cached `flat` appearance flag. `declare` rather than initialized because\n     * `setFlat` can fire during the super-time cascade via `applyChromeOptions`\n     * (the flat branch installs hover/pressed treatments through the lazy\n     * style-rule getters), and an `= false` initializer would run after super\n     * returns and silently clobber the cascaded value.\n     */\n    private declare _flat?: boolean;\n\n    /**\n     * Cached `compact` flag. `declare` rather than initialized because\n     * `setCompact` can fire during the super-time cascade via `applyOptions`,\n     * and an `= false` initializer would run after super returns and silently\n     * clobber the cascaded value (same trap as `_flat` above). The inset\n     * resolution it drives is deferred to `_resolveInsets`, which guards on the\n     * content row existing.\n     */\n    private declare _compact?: boolean;\n\n    private _enabledCursor: string = \"pointer\";\n\n    /**\n     * Constructs a Button. `text` (positional or via options) and `glyph` are\n     * both optional — an empty Button renders as a chrome-shaped placeholder\n     * whose label / glyph can be filled in later via `setText` / `setGlyph`.\n     *\n     * @example\n     * ```typescript\n     * new Button('Save');\n     * new Button({ glyph: 'times' });\n     * new Button('Save', { glyph: 'check-circle' });\n     * ```\n     */\n    constructor(text?: string, options?: ButtonOptions, subclassDefaults?: Partial<ButtonOptions>);\n    constructor(options: ButtonOptions);\n    constructor(\n        textOrOptions?:    string | ButtonOptions,\n        options?:          ButtonOptions,\n        subclassDefaults?: Partial<ButtonOptions>,\n    ) {\n        // Normalise the overload: a non-string first argument is the options bag.\n        let text: string | undefined;\n        if (typeof textOrOptions === \"string\") {\n            text = textOrOptions;\n        } else if (textOrOptions !== undefined) {\n            options = textOrOptions;\n        }\n\n        // Hand defaults to Component via the second super arg so they land in\n        // `_defaultOptions` and survive subsequent `applyOptions` re-merges.\n        // Subclass defaults (forwarded by callers via the third constructor\n        // arg) layer on top so the deepest class's overrides win.\n        super(\n            options as TOptions,\n            { ..._defaultButtonOptions, ...(subclassDefaults ?? {}) } as Partial<TOptions>,\n        );\n\n        // Structural state — can't go through the bag because consumers must\n        // not be able to override it.\n        this.setLayoutManager(new Fit());\n\n        // Build the text/glyph content row. The title (and optional subtitle)\n        // live in a vertical `_titleColumn` so the description stacks below the\n        // title; the glyph sits beside the whole column in the outer HBox.\n        this._text        = new Text();\n        this._titleColumn = new Component();\n        this._titleColumn.setLayoutManager(new VBox({ spacing: 0 }));\n        this._titleColumn.setInsets(new Insets(0, 0, 0, 0));\n        this._titleColumn.setPointerEvents(\"none\");\n        this._titleColumn.addComponent(this._text);\n\n        this._content = new Component();\n        this._content.setLayoutManager(new HBox({ spacing: 2 }));\n        this._content.setInsets(new Insets(0, 0, 0, 0));\n        this._content.setPointerEvents(\"none\");\n        this._content.addComponent(this._titleColumn);\n\n        this._text.setPointerEvents(\"none\");\n        this._text.setTextAlign(\"center\");\n        this._text.setFontWeight(\"bold\");\n        this._text.setFontSize(\"--ts-ui-button-font-size\");\n\n        this.addComponent(this._content, {\n            fill:   this.getFill(),\n            anchor: this.getAnchor(),\n        });\n\n        // Late-built state: applyOptions wrote any caller `text`/`glyph`/\n        // `description` into `_options` pure (no setter dispatch) because\n        // `this.text`/`_content` didn't exist yet. Dispatch the effective value\n        // now that children are wired up, folding a class default (e.g.\n        // TabCloseButton's `glyph: \"xmark\"`) that raw dispatch left in\n        // `_defaultOptions` rather than `_options`.\n        const effectiveText = this._options.text ?? this._defaultOptions.text ?? text;\n        if (effectiveText !== undefined) {\n            this.setText(effectiveText);\n        }\n        const effectiveGlyph = this._options.glyph ?? this._defaultOptions.glyph;\n        if (effectiveGlyph !== undefined) {\n            this.setGlyph(effectiveGlyph);\n        }\n        const effectiveDescription = this._options.description ?? this._defaultOptions.description;\n        if (effectiveDescription !== undefined) {\n            this.setDescription(effectiveDescription);\n        }\n\n        // Construction-time flat / compact: the flat and compact setters ran\n        // during the super cascade before `_glyph` / `_text` existed, so\n        // `_resolveInsets` no-op'd. Re-evaluate now the content row is built so\n        // the icon-square / compact insets land.\n        if (this._flat || this._compact) {\n            this._resolveInsets();\n        }\n\n        // Initial auto-sized preferred-size pass. No-ops when the consumer\n        // already supplied `preferredSize` (the override of `setPreferredSize`\n        // below flips `_consumerSetPreferredSize`).\n        this.recomputePreferredSize();\n\n        // Re-fire the auto-sized recompute on theme changes so any\n        // font-size / glyph-metric shifts cascade into the button's preferred\n        // size without explicit consumer prodding.\n        this.subscribeTheme(this._onThemeChange);\n\n        // Wire the listener bag — but only when this IS a plain Button.\n        // Subclasses wire their own bag from their constructor body after their\n        // `super()` returns, because a subclass event (e.g. SpinButton's\n        // `tick`) may live in a `ListenerBag` that does not exist yet during\n        // this base constructor. The check is instance-identity, not\n        // `new.target`: construction routes through the `callable()` Proxy,\n        // which has no `construct` trap, so `new.target` is the proxy rather\n        // than this class — but the instance's prototype still resolves to the\n        // raw class prototype, so a plain Button matches and any subclass does not.\n        if (Object.getPrototypeOf(this) === Button.prototype) {\n            this.applyListeners(options?.listeners);\n        }\n    }\n\n    /**\n     * Returns the content anchor used inside the button's `Fit` layout — the\n     * caller value, else the class default ({@link AnchorType.CENTER}).\n     *\n     * @returns The resolved anchor.\n     */\n    getAnchor(): AnchorType {\n        return (this._options.anchor ?? this._defaultOptions.anchor) as AnchorType;\n    }\n\n    /**\n     * Returns the content fill used inside the button's `Fit` layout — the\n     * caller value, else the class default ({@link FillType.NONE}).\n     *\n     * @returns The resolved fill.\n     */\n    getFill(): FillType {\n        return (this._options.fill ?? this._defaultOptions.fill) as FillType;\n    }\n\n    /**\n     * Applies a {@link ButtonOptions} bag. Inherited Component fields cascade\n     * through `super.applyOptions`; pressed-state, hover-state, and `enabled`\n     * fields cascade through their own setters (the lazy `pressedStyleRule`\n     * and `hoverStyleRule` getters make them safe to fire during the\n     * super-time cascade). `text`, `description`, and `glyph` are written pure\n     * into `_options` during the super-time cascade (before the content row\n     * exists) and dispatched from the constructor body once children exist —\n     * but a *post-construction* call (a subclass's tail `applyOptions`, or a\n     * runtime re-apply) dispatches the setters directly, so an option supplied\n     * after the constructor's late dispatch still renders. The\n     * `descriptionUnderGlyph` / `showDescription` flags are always pure-written\n     * and consumed live by the content-row rebuild those dispatches trigger.\n     *\n     * @param options - The options bag carrying the values to apply.\n     */\n    protected applyOptions(options: TOptions): this {\n        // Button structurally owns a per-instance Fit layout, installed\n        // imperatively in the constructor because a fresh manager can't live in\n        // the shared `_defaultOptions` bag. `super.applyOptions` re-dispatches\n        // `_defaultOptions.layoutManager` (always an `Absolute`) on every call,\n        // so a subclass that hands its consumer options to a tail `applyOptions`\n        // (ToggleButton / TabButton: `if (options) this.applyOptions(options)`)\n        // would clobber that Fit — and an Absolute layout never positions the\n        // content row, collapsing the label into a corner. Capture the manager\n        // and restore it when the cascade re-defaulted it away and the consumer\n        // did not explicitly request a different one (ButtonOptions omits\n        // `layoutManager`, so that override path is intentionally unreachable).\n        const structuralLayout = this.getLayoutManager();\n\n        super.applyOptions(options);\n\n        if (options.layoutManager === undefined && this.getLayoutManager() !== structuralLayout) {\n            this.setLayoutManager(structuralLayout);\n        }\n\n        // Content-row flags first (pure writes): a dispatched\n        // setText/setGlyph/setDescription below reads them (via `_isShowText()`\n        // and the content-row rebuild). They ride the options bag, not a class\n        // field, so the super-cascade class-field trap does not apply.\n        if (options.descriptionUnderGlyph !== undefined) this._options.descriptionUnderGlyph = options.descriptionUnderGlyph;\n        if (options.showDescription       !== undefined) this._options.showDescription       = options.showDescription;\n        if (options.showText              !== undefined) this._options.showText              = options.showText;\n\n        // text / glyph / description. Before the content row exists — the\n        // super-time cascade, where `_text` is unassigned — write pure and let\n        // the constructor body dispatch the setters once children are wired.\n        // After construction the row is built, so dispatch the setters to\n        // rebuild the content: a subclass that forwards only `text` to super and\n        // hands its bag to a tail `applyOptions` (ToggleButton / TabButton) has\n        // already missed the constructor dispatch, so a pure write would record\n        // the glyph/description but never render it. Instance-identity guard\n        // (`_text`), so raw dispatch loses no `_defaultOptions` default (folded\n        // by the constructor's own late dispatch for the cascade path).\n        const contentBuilt = this._text !== undefined;\n\n        // Glyph / description tints are stored before the glyph / description\n        // dispatch below, so a `setGlyph` / `setDescription` fired here (or by the\n        // constructor's late dispatch) re-reads and re-applies them to the fresh\n        // element. A post-construction call with only the colour (the element\n        // already built) tints it directly via the setter.\n        if (options.glyphColor !== undefined) {\n            if (contentBuilt) this.setGlyphColor(options.glyphColor); else this._options.glyphColor = options.glyphColor;\n        }\n\n        if (options.descriptionColor !== undefined) {\n            if (contentBuilt) this.setDescriptionColor(options.descriptionColor); else this._options.descriptionColor = options.descriptionColor;\n        }\n\n        if (options.text !== undefined) {\n            if (contentBuilt) this.setText(options.text); else this._options.text = options.text;\n        }\n\n        if (options.description !== undefined) {\n            if (contentBuilt) this.setDescription(options.description); else this._options.description = options.description;\n        }\n\n        if (options.glyph !== undefined) {\n            if (contentBuilt) this.setGlyph(options.glyph); else this._options.glyph = options.glyph;\n        }\n\n        if (options.enabled      !== undefined) this.setEnabled(options.enabled);\n\n        // chromeless / anchor / fill are pure writes — no setter dispatch.\n        // Runtime flag flips for chromeless go through setChromeless(), which\n        // also reconciles the DOM via clearChrome / restoreChrome. anchor and\n        // fill are consumed by the constructor body when adding `_content` to\n        // the outer Fit layout; later applyOptions calls don't reanchor.\n        if (options.chromeless   !== undefined) this._options.chromeless   = options.chromeless;\n        if (options.flat         !== undefined) this._options.flat          = options.flat;\n        // Dispatched (not pure-written like `flat`) because it must resolve the\n        // inset perimeter; `_resolveInsets` guards on the content row so the\n        // cascade-time call before `_text` exists is a safe no-op.\n        if (options.compact      !== undefined) this.setCompact(options.compact);\n        if (options.anchor       !== undefined) this._options.anchor       = options.anchor;\n        if (options.fill         !== undefined) this._options.fill         = options.fill;\n\n        return this;\n    }\n\n    /**\n     * Gates Component's chrome dispatch on the `chromeless` flag and, when\n     * the flag is off, extends it with Button's twelve `pressedX` / `hoverX`\n     * chrome fields. Reads the flag from the runtime cache first so a flag\n     * previously written (by an earlier `applyOptions` or `setChromeless`)\n     * keeps gating future re-applies that omit `chromeless`.\n     *\n     * @param options - The raw caller options bag passed by {@link applyOptions}.\n     */\n    protected override applyChromeOptions(options: TOptions): void {\n        const chromeless = (options.chromeless ?? this.isChromeless()) === true;\n        if (chromeless) {\n            // The chrome group's class defaults are dispatched only by\n            // `super.applyChromeOptions` (skipped here for chromeless), so a\n            // fresh chromeless button never receives them. The explicit\n            // `undefined` writes still matter on a re-apply (e.g. `setChromeless`\n            // after a chromeful pass): they clear a previously-written value so\n            // the chrome getters report `null` and `applyStyle` skips the\n            // property.\n            //\n            // Border goes through the private `_border` field, so `clearBorder`\n            // clears it to a `none` border that overrides the UA `<button>` ridge.\n            //\n            // Finally, the UA `<button>` element has a non-transparent\n            // background-color; set transparent unless the caller specified\n            // their own backgroundColor.\n            this.clearBorder();\n            this._options.borderRadius    = undefined;\n            this._options.shadow          = undefined;\n            this._options.backgroundImage = undefined;\n            if (this.getBackgroundColor() === null) {\n                this._options.backgroundColor = \"transparent\";\n            }\n            return;\n        }\n\n        super.applyChromeOptions(options);\n\n        // Chromeful resting background: `super` applied the `--ts-ui-button-bg`\n        // token as a background *image* (for gradient tokens); also apply it as\n        // a background *colour* so a flat-colour token (e.g. the Modern theme)\n        // renders too — whichever channel is valid paints, the other is dropped.\n        // Without the colour channel a flat-colour token was invalid as an image\n        // and the button fell back to the UA `<button>` background. Skipped when\n        // the caller set their own backgroundColor, and when flat (flat is\n        // transparent at rest — see `_applyFlatChrome`).\n        const isFlat = (this._options.flat ?? options.flat) === true;\n\n        if (!isFlat && options.backgroundColor === undefined) {\n            this.setBackgroundColor(BUTTON_RESTING_BACKGROUND);\n        }\n\n        // The pressed/hover colour + shadow + image fields carry class defaults,\n        // so dispatch the caller value or the class default. The pressed/hover\n        // border fields are not defaulted, so they stay caller-gated.\n        this.setPressedForegroundColor(options.pressedForegroundColor ?? this.getPressedForegroundColor()!);\n        this.setPressedBackgroundColor(options.pressedBackgroundColor ?? this.getPressedBackgroundColor()!);\n        this.setPressedBackgroundImage(options.pressedBackgroundImage ?? this.getPressedBackgroundImage()!);\n        this.setPressedShadow         (options.pressedShadow ?? this.getPressedShadow()!);\n        if (options.pressedBorder       !== undefined) this.setPressedBorder      (options.pressedBorder);\n        if (options.pressedBorderRadius !== undefined) this.setPressedBorderRadius(options.pressedBorderRadius);\n\n        if (options.hoverForegroundColor !== undefined) this.setHoverForegroundColor(options.hoverForegroundColor);\n        this.setHoverBackgroundColor(options.hoverBackgroundColor ?? this.getHoverBackgroundColor()!);\n        this.setHoverBackgroundImage(options.hoverBackgroundImage ?? this.getHoverBackgroundImage()!);\n        this.setHoverShadow         (options.hoverShadow ?? this.getHoverShadow()!);\n        if (options.hoverBorder         !== undefined) this.setHoverBorder      (options.hoverBorder);\n        if (options.hoverBorderRadius   !== undefined) this.setHoverBorderRadius(options.hoverBorderRadius);\n\n        // Flat is the third appearance mode: it runs in the chromeful `else`\n        // path (chromeless already returned above) and re-points the resting\n        // chrome + the raised `pressedX`/`hoverX` treatments just dispatched to\n        // the flat tokens. Reading the runtime cache first keeps a previously\n        // written flag gating future re-applies that omit `flat`.\n        if ((this._options.flat ?? options.flat) === true) {\n            this._flat = true;\n            this._applyFlatChrome();\n        }\n    }\n\n    /**\n     * Sets the button's title text. The single entry point for mutating the\n     * title — there is no public accessor for the inner label, so every title\n     * change routes through here, keeping the auto-sized preferred size and\n     * the hover tooltip (composed from title + description) in sync.\n     *\n     * @param text - The new title string.\n     *\n     * @returns This component, for method chaining.\n     */\n    setText(text: string): this {\n        this._options.text = text;\n\n        // `_text` is the on-face renderer. The title string lives in\n        // `_options.text`; `_text` shows it only when `showText` is true, and\n        // renders blank when hidden so the button stays metrically a glyph-only\n        // button while the tooltip and accessible name still carry the title.\n        this._text.setText(this._isShowText() ? text : \"\");\n        this.recomputePreferredSize();\n        this._rebuildTooltip();\n        this._reflectAccessibleName();\n\n        return this;\n    }\n\n    /**\n     * Returns the button's current title text, or `\"\"` when no label is set.\n     * A read-only companion to {@link setText} — the inner label has no other\n     * public accessor; the [`ToolBar`](/api/component/menubar/classes/ToolBar)\n     * overflow menu reads it to label each dropdown row.\n     *\n     * @returns The current title string, or `\"\"` if none is set.\n     */\n    getText(): string {\n        return this._options.text ?? \"\";\n    }\n\n    /**\n     * Applies a writing mode to the button and propagates it to the inner label\n     * (and description) so their measured preferred size reflects the rotated\n     * text run — a label-only `getWritingMode` would otherwise stay horizontal\n     * even while inheriting the vertical mode through CSS, and report the wrong\n     * extents. Re-syncs the auto-sized preferred size after the labels swap.\n     *\n     * @param value - A CSS `writing-mode` value (e.g. `vertical-rl`).\n     *\n     * @returns This component, for method chaining.\n     */\n    setWritingMode(value: string): this {\n        const previousOrientation = this._contentOrientation();\n\n        super.setWritingMode(value);\n\n        // `writingMode` is a Component option, so this can fire from\n        // `applyOptions` during `super()` — before the constructor assigns\n        // `_text`. Forward (and resize) only once the labels exist; the Tab sets\n        // the mode post-construction, so its labels are always present.\n        if (this._text) {\n            this._text.setWritingMode(value);\n            this._description?.setWritingMode(value);\n\n            // Re-lay the content row when the reading direction flips, but only\n            // when a glyph or description is present — a lone label is a single\n            // child whose container axis is irrelevant, so plain-text tabs keep\n            // their exact prior layout.\n            if (this._contentOrientation() !== previousOrientation && (this._glyph || this._description)) {\n                this._rebuildContentRow();\n            }\n\n            this.recomputePreferredSize();\n        }\n\n        return this;\n    }\n\n    /**\n     * Justifies the button's title (and leading glyph) within a button wider\n     * than its content. Forwards the value to the inner\n     * [`Text`](/api/component/input/classes/Text)'s CSS `text-align` and\n     * re-anchors the whole content row in the Fit layout — `\"left\"` / `\"right\"`\n     * track the start / end of the label's reading direction, so they map to the\n     * vertical edges on a rotated (west/east) label. `\"center\"` is the default.\n     *\n     * @param align - A CSS `text-align` value (`\"left\"`, `\"center\"`, `\"right\"`).\n     *\n     * @returns This component, for method chaining.\n     */\n    setTextAlign(align: string): this {\n        // `setTextAlign` can be driven post-construction (the Tab strip sets it\n        // each layout pass), but a future option-bag dispatch could fire from\n        // `applyOptions` during `super()` — before the constructor assigns\n        // `_text`. Guard like `setWritingMode` does.\n        if (this._text) {\n            this._text.setTextAlign(align);\n\n            // CSS text-align only nudges glyphs inside the label's own\n            // content-hugging box; to justify the whole glyph+label block\n            // within a button wider than its content, re-anchor the content row\n            // in the Fit layout along the (possibly rotated) reading axis.\n            const constraints = this.getLayoutConstraints(this._content);\n\n            if (constraints) {\n                constraints.anchor = this._anchorForTextAlign(align);\n                this.scheduleLayout();\n            }\n        }\n\n        return this;\n    }\n\n    /**\n     * Maps a `text-align` value to the {@link AnchorType} that positions the\n     * content row at the matching edge of a button wider than its content.\n     * Accepts both physical (`\"left\"` / `\"right\"`) and flow-relative (`\"start\"`\n     * / `\"end\"`) values; either way they track the start / end of the label's\n     * reading direction, so on a rotated label they map to the vertical edges\n     * (`NORTH` / `SOUTH`) — reversed between clockwise and counter-clockwise.\n     *\n     * @param align - A `text-align` value (`\"left\"`/`\"start\"`, `\"center\"`, `\"right\"`/`\"end\"`).\n     *\n     * @returns The anchor that justifies the content row accordingly.\n     */\n    private _anchorForTextAlign(align: string): AnchorType {\n        const leading  = align === \"left\"  || align === \"start\";\n        const trailing = align === \"right\" || align === \"end\";\n        const orient   = this._contentOrientation();\n\n        if (orient === \"cw\") {\n            // Reads top→bottom: leading is the top edge, trailing the bottom.\n            return leading ? AnchorType.NORTH : trailing ? AnchorType.SOUTH : AnchorType.CENTER;\n        }\n\n        if (orient === \"ccw\") {\n            // Reads bottom→top: leading is the bottom edge, trailing the top.\n            return leading ? AnchorType.SOUTH : trailing ? AnchorType.NORTH : AnchorType.CENTER;\n        }\n\n        return leading ? AnchorType.WEST : trailing ? AnchorType.EAST : AnchorType.CENTER;\n    }\n\n    /**\n     * Clears the writing mode from the button and its inner label (and\n     * description), restoring horizontal text measurement.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearWritingMode(): this {\n        const previousOrientation = this._contentOrientation();\n\n        super.clearWritingMode();\n\n        if (this._text) {\n            this._text.clearWritingMode();\n            this._description?.clearWritingMode();\n\n            // Restoring horizontal flow flips the reading direction back; re-lay\n            // the content row for glyph/description buttons (see setWritingMode).\n            if (this._contentOrientation() !== previousOrientation && (this._glyph || this._description)) {\n                this._rebuildContentRow();\n            }\n\n            this.recomputePreferredSize();\n        }\n\n        return this;\n    }\n\n    /**\n     * Sets the button's subtitle, shown on a line below the title in a\n     * smaller, dimmer style. The subtitle label is created lazily on the\n     * first call (mirroring {@link setGlyph}) so a button with no description\n     * never reserves a second line. Re-syncs the auto-sized preferred size\n     * and the hover tooltip.\n     *\n     * @param text - The subtitle string.\n     *\n     * @returns This component, for method chaining.\n     */\n    setDescription(text: string): this {\n        if (!this._description) {\n            this._description = new Text();\n            this._description.setPointerEvents(\"none\");\n            this._description.setTextAlign(\"center\");\n            this._description.setFontSize(\"--ts-ui-button-description-font-size\");\n            this._description.setFontWeight(\"var(--ts-ui-button-description-weight, normal)\");\n            this._description.setForegroundColor(\n                this._options.descriptionColor ?? \"var(--ts-ui-button-description-fg, rgb(110, 110, 110))\"\n            );\n        }\n\n        // The instance is created above unconditionally so `_rebuildTooltip`\n        // can always read it; `_rebuildContentRow` decides whether it is\n        // actually parented onto the button face (gated by `showDescription`)\n        // and in which topology (gated by `descriptionUnderGlyph`).\n        this._description.setText(text);\n        this._rebuildContentRow();\n        this._rebuildTooltip();\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Returns the subtitle Text child, or `null` when no description has been\n     * set (mirroring {@link getGlyph}). Read-only access — the only way to\n     * change the subtitle string is {@link setDescription}, so the tooltip\n     * stays authoritative.\n     *\n     * @returns The description [`Text`](/api/component/input/classes/Text) instance, or null.\n     */\n    getDescription(): Text | null {\n        return this._description;\n    }\n\n    /**\n     * Removes the subtitle line, if one is present, and re-syncs the\n     * auto-sized preferred size and the hover tooltip.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearDescription(): this {\n        this._description = null;\n\n        this._rebuildContentRow();\n        this._rebuildTooltip();\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Recomposes the hover tooltip from the current title and description and\n     * (re)attaches it. The tooltip body is `{title}\\n\\n{description}` when a\n     * description exists, the title alone when it doesn't, and the description\n     * alone when there is no title. Detaches entirely when both are empty.\n     * Routed through [`Tooltip`](/api/overlay/classes/Tooltip), which renders the\n     * `\\n` breaks across multiple lines.\n     */\n    private _rebuildTooltip(): void {\n        // A suppressed tooltip stays detached whatever the text — the button is\n        // showing its own popup and a hover hint would occlude it.\n        if (this._tooltipSuppressed) {\n            Tooltip.detach(this);\n\n            return;\n        }\n\n        const title = this._options.text ?? \"\";\n        const desc  = this._description?.getText().valueOf() ?? \"\";\n\n        let str: string;\n        if (title && desc) {\n            str = `${title}\\n\\n${desc}`;\n        } else {\n            str = title || desc;\n        }\n\n        if (str) {\n            Tooltip.attach(this, str);\n        } else {\n            Tooltip.detach(this);\n        }\n    }\n\n    /**\n     * Suppresses or restores this button's hover tooltip. While suppressed the\n     * tooltip is detached (and any visible/pending one dismissed) and stays off\n     * across `setText`/`setDescription` rebuilds; restoring re-composes it from\n     * the current title and description. Intended for a subclass that opens its\n     * own popup — see {@link _tooltipSuppressed}.\n     *\n     * @param value - `true` to detach the tooltip, `false` to restore it.\n     *\n     * @returns This button, for method chaining.\n     */\n    protected setTooltipSuppressed(value: boolean): this {\n        if (value === this._tooltipSuppressed) {\n            return this;\n        }\n\n        this._tooltipSuppressed = value;\n\n        this._rebuildTooltip();\n\n        return this;\n    }\n\n    /**\n     * Reflects the title into the accessible name exactly when it is hidden from\n     * the button face (`showText:false`). A glyph-only face renders the title\n     * blank, so without this the button would have no accessible name; the\n     * stored title (`_options.text`) is mirrored into `aria-label`. When the\n     * title is visible the rendered text already supplies the accessible name,\n     * so any previously reflected label is cleared (e.g. after `setShowText(true)`).\n     */\n    private _reflectAccessibleName(): void {\n        const title = this._options.text ?? \"\";\n\n        if (!this._isShowText() && title !== \"\") {\n            this.getAria().setLabel(title);\n        } else {\n            this.getAria().clearLabel();\n        }\n    }\n\n    /**\n     * Resolves the `descriptionUnderGlyph` flag with its `true` default — the\n     * single place the default lives, read by {@link _rebuildContentRow}.\n     *\n     * @returns Whether the description aligns full-width under the glyph.\n     */\n    private _isDescriptionUnderGlyph(): boolean {\n        return this._options.descriptionUnderGlyph ?? true;\n    }\n\n    /**\n     * Resolves the `showDescription` flag with its `true` default.\n     *\n     * @returns Whether the description is rendered on the button face.\n     */\n    private _isShowDescription(): boolean {\n        return this._options.showDescription ?? true;\n    }\n\n    /**\n     * Resolves the `showText` flag with its `true` default.\n     *\n     * @returns Whether the title is rendered on the button face.\n     */\n    private _isShowText(): boolean {\n        return this._options.showText ?? true;\n    }\n\n    /**\n     * Classifies the active writing mode into the orientation the content row\n     * must follow. The Tab strip rotates west/east labels with `sideways-rl`\n     * (clockwise, reads top→bottom) and `sideways-lr` (counter-clockwise, reads\n     * bottom→top); every other value — including none — lays out horizontally.\n     *\n     * @returns `\"cw\"`, `\"ccw\"`, or `\"horizontal\"`.\n     */\n    private _contentOrientation(): \"horizontal\" | \"cw\" | \"ccw\" {\n        const wm = this.getWritingMode();\n\n        if (wm === \"sideways-rl\") {\n            return \"cw\";\n        }\n\n        if (wm === \"sideways-lr\") {\n            return \"ccw\";\n        }\n\n        return \"horizontal\";\n    }\n\n    /**\n     * Swaps `container`'s box layout to the given axis and spacing so a content\n     * row follows the label's reading direction (`\"h\"` → `HBox`, `\"v\"` → `VBox`).\n     *\n     * @param container - The content container to re-lay out.\n     * @param axis - `\"h\"` for a horizontal row, `\"v\"` for a vertical stack.\n     * @param spacing - Inter-child spacing in px.\n     */\n    private _orientBox(container: Component, axis: \"h\" | \"v\", spacing: number): void {\n        container.setLayoutManager(axis === \"v\" ? new VBox({ spacing }) : new HBox({ spacing }));\n    }\n\n    /**\n     * Adds `children` to `container` in reading order, reversing when the axis\n     * runs against the document order (a counter-clockwise inline run or a\n     * clockwise block run), so the leading glyph / title stays first in the\n     * rotated flow.\n     *\n     * @param container - The container to populate.\n     * @param children - The children in their logical (unrotated) order.\n     * @param reversed - Whether to add them in reverse.\n     */\n    private _addContentChildren(container: Component, children: Component[], reversed: boolean): void {\n        const ordered = reversed ? [...children].reverse() : children;\n\n        for (const child of ordered) {\n            container.addComponent(child);\n        }\n    }\n\n    /**\n     * Rebuilds `_content`'s child tree from the current `_glyph` / `_text` /\n     * `_description` instances and the `descriptionUnderGlyph` /\n     * `showDescription` flags. The single point that (re)parents those shared\n     * children, so the topology stays consistent across every glyph /\n     * description / flag mutation. Never recreates `_content` itself, so its\n     * identity and HBox layout — the documented subclass re-anchor seam — are\n     * preserved.\n     *\n     * Idempotent: it empties every content container up front\n     * ({@link Component.removeAllComponents} fully detaches each child), then\n     * re-adds from the current field state, so it is safe to call any number\n     * of times and after a field has been nulled.\n     *\n     * Two topologies:\n     * - **under glyph** (`descriptionUnderGlyph` true, glyph + visible\n     *   description): `_content[ _outerColumn( _innerRow[glyph, _text], _description ) ]`\n     *   — the description spans full width below the glyph+title row.\n     * - **under title** (the default fallback, also used whenever there is no\n     *   glyph, no description, or `showDescription` is false):\n     *   `_content[ glyph?, _titleColumn[ _text, _description? ] ]`.\n     *\n     * When `showDescription` is false the description is treated as absent for\n     * layout — the minimal `[glyph?, _titleColumn[_text]]` tree is built and\n     * `_description` is left detached but alive (so {@link _rebuildTooltip}\n     * can still read it).\n     */\n    private _rebuildContentRow(): void {\n        // Disassemble: empty every container so all shared children are\n        // parentless and re-addable (add/insertComponent throw on a child that\n        // still has a parent). Emptying wholesale also drops any outgoing glyph\n        // / description whose field was reassigned or nulled by the caller.\n        this._content.removeAllComponents();\n        this._titleColumn.removeAllComponents();\n        this._innerRow?.removeAllComponents();\n        this._outerColumn?.removeAllComponents();\n\n        // A hidden description is treated as absent for rendering; the instance\n        // stays alive for the tooltip.\n        const renderDesc = this._description !== null && this._isShowDescription();\n\n        // A hidden title (`showText:false`) is rendered blank rather than\n        // unparented: `_text` keeps its place in the no-description topology so\n        // its line box still drives the button height (exactly like a genuinely\n        // empty label), and the title string lives in `_options.text` to feed\n        // the tooltip and the reflected `aria-label`. In the description\n        // topologies the description drives the height, so a hidden title is\n        // dropped outright to avoid reserving a blank title line.\n        const renderText = this._isShowText();\n\n        // The label's writing mode rotates both the inline (glyph→text) and the\n        // block (title→description) reading directions; the content boxes have\n        // to follow it, or a leading glyph lands beside vertical text instead of\n        // before it. The inline run becomes a VBox and the block stack an HBox.\n        // `sideways-rl` (cw) reads top→bottom with blocks running right→left;\n        // `sideways-lr` (ccw) reads bottom→top with blocks running left→right —\n        // hence the opposite reversals on the two axes.\n        const orient   = this._contentOrientation();\n        const vertical = orient !== \"horizontal\";\n\n        const inlineAxis: \"h\" | \"v\" = vertical ? \"v\" : \"h\";\n        const blockAxis:  \"h\" | \"v\" = vertical ? \"h\" : \"v\";\n        const inlineReversed = orient === \"ccw\";\n        const blockReversed  = orient === \"cw\";\n\n        if (renderDesc && this._glyph && this._isDescriptionUnderGlyph()) {\n            if (!this._innerRow) {\n                this._innerRow = new Component();\n                this._innerRow.setInsets(new Insets(0, 0, 0, 0));\n                this._innerRow.setPointerEvents(\"none\");\n            }\n            if (!this._outerColumn) {\n                this._outerColumn = new Component();\n                this._outerColumn.setInsets(new Insets(0, 0, 0, 0));\n                this._outerColumn.setPointerEvents(\"none\");\n            }\n\n            this._orientBox(this._content,     inlineAxis, 2);\n            this._orientBox(this._innerRow,    inlineAxis, 2);\n            this._orientBox(this._outerColumn, blockAxis,  0);\n\n            this._addContentChildren(this._innerRow,    renderText ? [this._glyph, this._text] : [this._glyph], inlineReversed);\n            this._addContentChildren(this._outerColumn, [this._innerRow, this._description!], blockReversed);\n            this._content.addComponent(this._outerColumn);\n        } else if (renderDesc) {\n            // Title + description stack in the column so the description trails\n            // the title; the glyph (if any) leads the whole stack on the inline\n            // axis.\n            this._orientBox(this._content,     inlineAxis, 2);\n            this._orientBox(this._titleColumn, blockAxis,  0);\n\n            this._addContentChildren(this._titleColumn, renderText ? [this._text, this._description!] : [this._description!], blockReversed);\n\n            const inlineChildren = this._glyph ? [this._glyph, this._titleColumn] : [this._titleColumn];\n            this._addContentChildren(this._content, inlineChildren, inlineReversed);\n        } else {\n            // No description: place the title directly beside (or before) the\n            // glyph rather than wrapping it in `_titleColumn`. The column reports\n            // a null baseline (a plain VBox-backed Component), which would hide\n            // the title's baseline from `_content` and leave the glyph centred;\n            // added directly, the title's baseline is visible so the glyph drops\n            // onto the text baseline — matching the description topology.\n            // A glyph-only button (empty label) drops the inline spacing to 0 so\n            // the glyph sits flush at the box centre: the default spacing between\n            // the glyph and a zero-width label pads one side and pushes the glyph\n            // off centre (the visible \"hugs the left edge\" on icon buttons). The\n            // empty `_text` stays in the row so its line box still drives the\n            // button height — dropping it shrinks the button vertically. A hidden\n            // title renders blank (`_text.getText() === \"\"`), so it takes this\n            // same glyph-only path: still parented to drive the height, spacing\n            // collapsed, no title shown.\n            const hasText = this._text.getText().valueOf() !== \"\";\n            this._orientBox(this._content, inlineAxis, this._glyph && !hasText ? 0 : 2);\n\n            const inlineChildren = this._glyph ? [this._glyph, this._text] : [this._text];\n            this._addContentChildren(this._content, inlineChildren, inlineReversed);\n        }\n\n        // Optically centre a single line of label text. The Fit/anchor centring\n        // centres the line box geometrically, but a label's ink occupies only\n        // cap-top→baseline, so the empty descender band makes the text read as\n        // too high. A top inset of `Util.opticalCenterOffset()` nudges it down\n        // onto its optical centre. Applies only to a non-empty single-line\n        // horizontal label: a two-line title+description block centres as a\n        // block (offset 0), a glyph-only button (empty `_text`) is already\n        // box-centred, and a rotated label has no horizontal descender band.\n        const opticalOffset = (!vertical && !renderDesc && this._text.getText().valueOf() !== \"\") ? Util.opticalCenterOffset() : 0;\n\n        this._content.setInsets(new Insets(opticalOffset, 0, 0, 0));\n\n        this._reflectAccessibleName();\n\n        this._afterRebuildContentRow();\n    }\n\n    /**\n     * Hook invoked at the end of {@link _rebuildContentRow}, after the glyph /\n     * title / description children have been re-parented onto the content row.\n     * The base implementation does nothing; subclasses that attach their own\n     * persistent child to `_content` (e.g. [`SplitButton`](/api/component/button/classes/SplitButton)'s\n     * trailing chevron) override it to re-append that child, since the rebuild\n     * empties the row wholesale via `removeAllComponents` and would otherwise\n     * orphan it on a `setGlyph` / `setDescription` / writing-mode change.\n     */\n    protected _afterRebuildContentRow(): void {\n    }\n\n    /**\n     * Sizes the leading glyph's box so its height matches the title's rendered\n     * line-box height (the line of text it sits beside), instead of the\n     * Glyph's static 16×16 default. The lever is `setPreferredSize`, not\n     * `setFontSize` — a font-size token does not resize an SVG glyph's box.\n     *\n     * Theme-reactive: it reads `_text.getLineHeight()` (the button title's\n     * additive line box, button font-size + `--ts-ui-line-padding`) and runs\n     * from {@link recomputePreferredSize},\n     * which already re-fires on every theme change — so the glyph re-tracks the\n     * title line height without an extra listener. Bails when the line height\n     * isn't resolved yet (pre-measure) so it never writes a 0/NaN size.\n     *\n     * Opt-out guard: it only overwrites a glyph size it itself last wrote\n     * (tracked in `_glyphSyncedSize`). A subclass / consumer that pinned its\n     * own glyph size (SpinButton's chevron, Tab's close ✕) leaves the current\n     * size different from `_glyphSyncedSize`, so this method skips it and the\n     * explicit size survives later re-syncs.\n     */\n    private _syncGlyphSize(): void {\n        const glyph = this._glyph;\n        if (!glyph) {\n            return;\n        }\n\n        // A consumer-pinned glyph keeps its fixed size across theme changes.\n        if (this._glyphSizePinned) {\n            return;\n        }\n\n        const lineHeight = this._text.getLineHeight();\n        if (lineHeight === null) {\n            return;\n        }\n\n        const px = Math.round(lineHeight);\n\n        const current = glyph.getPreferredSize();\n        const ours    = this._glyphSyncedSize;\n        if (current && ours !== null && (current.width !== ours || current.height !== ours)) {\n            return;\n        }\n\n        glyph.setPreferredSize(px, px);\n        this._glyphSyncedSize = px;\n    }\n\n    /**\n     * Sets or clears an optional leading [`Glyph`](/api/component/display/classes/Glyph) shown alongside the button's text.\n     *\n     * @param name - Registry glyph name to display, or `null` to clear an existing glyph.\n     *\n     * @returns This component, for method chaining.\n     *\n     * @remarks\n     * The glyph leads the content row. Its box is auto-sized to match the\n     * title's line height; a consumer can override by sizing the returned glyph\n     * explicitly via `getGlyph().setPreferredSize(...)`. Empty text combined\n     * with `setGlyph(name)` therefore renders as a glyph-only button with no\n     * visual artifacts at the default 0px spacing.\n     */\n    setGlyph(name: string): this {\n        const glyph = new Glyph(name);\n        glyph.setPointerEvents(\"none\");\n\n        // Reassign before the rebuild; the rebuild empties the content\n        // containers, detaching any previous glyph so it is dropped cleanly.\n        this._glyph           = glyph;\n        // A fresh glyph hasn't been line-height-synced yet — clear the guard\n        // so `_syncGlyphSize` (via recomputePreferredSize) sizes it.\n        this._glyphSyncedSize = null;\n\n        // Re-apply an instance glyph tint so it survives a glyph swap.\n        if (this._options.glyphColor !== undefined) {\n            glyph.setForegroundColor(this._options.glyphColor);\n        }\n\n        this._rebuildContentRow();\n\n        // The content row's preferred size shifted — re-sync the button's\n        // auto-derived preferred size (also sizes the glyph) unless the\n        // consumer has pinned it.\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Removes the leading glyph from the button, if one is present.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearGlyph(): this {\n        this._glyph           = null;\n        this._glyphSyncedSize = null;\n\n        this._rebuildContentRow();\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Returns the current leading glyph component, or null if none is set.\n     *\n     * @returns The [`Glyph`](/api/component/display/classes/Glyph) instance, or null.\n     */\n    getGlyph(): Glyph | null {\n        return this._glyph;\n    }\n\n    /**\n     * Tints the leading glyph independently of the button's `foregroundColor`.\n     * `foregroundColor` sets `color` on the whole button, which both the title\n     * and the glyph (via its `currentColor` SVG fill) inherit; this sets `color`\n     * on the glyph element alone, so the glyph can be tinted while the title\n     * keeps the button's own colour. Stored so a later {@link setGlyph} re-applies\n     * it. A no-op on the element until a glyph exists; the colour still takes\n     * effect once one is set.\n     *\n     * @param color - A CSS color string.\n     *\n     * @returns This component, for method chaining.\n     */\n    setGlyphColor(color: string): this {\n        this._options.glyphColor = color;\n        this._glyph?.setForegroundColor(color);\n\n        return this;\n    }\n\n    /**\n     * Tints the description subtitle independently of the button's\n     * `foregroundColor`, overriding the default dim description colour. Stored so\n     * a lazily-created description ({@link setDescription}) picks it up. A no-op on\n     * the element until a description exists.\n     *\n     * @param color - A CSS color string.\n     *\n     * @returns This component, for method chaining.\n     */\n    setDescriptionColor(color: string): this {\n        this._options.descriptionColor = color;\n        this._description?.setForegroundColor(color);\n\n        return this;\n    }\n\n    /**\n     * Pins the leading glyph to a fixed square size and opts it out of the\n     * theme-reactive line-height sync. Use for compact icon buttons whose glyph\n     * must stay a constant size regardless of the active theme's font metrics —\n     * a tab's close ✕, a spinner chevron. A plain\n     * `getGlyph().setPreferredSize(...)` is unreliable here: if it runs before\n     * the button is attached (line height unresolved), the first theme change\n     * re-tracks the glyph to the title line height and grows it. This sets the\n     * authoritative `_glyphSizePinned` opt-out so the sync skips the glyph.\n     *\n     * @param px - The square glyph size in pixels.\n     *\n     * @returns This button, for chaining.\n     */\n    pinGlyphSize(px: number): this {\n        this._glyphSizePinned = true;\n\n        this._glyph?.setPreferredSize(px, px);\n\n        return this;\n    }\n\n    /**\n     * Returns the offset from the top of the button to the label's text baseline.\n     *\n     * @returns The baseline offset in pixels, or `null` when the label has no baseline.\n     */\n    getBaseline(): number | null {\n        return this.wrapInnerBaseline(this._text.getBaseline());\n    }\n\n    /**\n     * Registers a listener for this button's `\"action\"` event — fired on\n     * click. A typed semantic shorthand over {@link Event.addListener}\n     * (the underlying DOM event is `\"click\"`); `\"action\"` is currently the\n     * only allowed event name.\n     *\n     * @param event - The event name. Only `\"action\"` is accepted.\n     * @param listener - The callback to invoke when the button is actioned.\n     *\n     * @returns This button, for method chaining.\n     */\n    on(event: \"action\", listener: ClickListener): this;\n    on(_event: \"action\", listener: ClickListener): this {\n        Event.addListener(this, \"click\", listener);\n\n        return this;\n    }\n\n    /**\n     * Removes a previously registered `\"action\"` listener. A typed shorthand\n     * over {@link Event.removeListener}; the exact callback reference must\n     * match the one passed to {@link on}.\n     *\n     * @param event - The event the listener was registered for.\n     * @param listener - The callback to remove.\n     *\n     * @returns This button, for method chaining.\n     */\n    off(event: \"action\", listener: ClickListener): this;\n    off(_event: \"action\", listener: ClickListener): this {\n        Event.removeListener(this, \"click\", listener);\n\n        return this;\n    }\n\n    /**\n     * Programmatically actions the button, as if the user had clicked it:\n     * fires this button's own `\"click\"` event so every registered\n     * {@link on | `\"action\"`} handler runs. Provided so other components can\n     * drive a button through its named surface rather than synthesising its\n     * DOM event from the outside — e.g. [`ToolBar`](/api/component/menubar/classes/ToolBar)\n     * replays an overflowed button's action from its dropdown. A\n     * [`ToggleButton`](/api/component/button/classes/ToggleButton)\n     * inherits this and toggles, because its internal toggle is wired to the\n     * same `\"click\"`.\n     *\n     * @returns This button, for method chaining.\n     */\n    click(): this {\n        Event.fireEvent(this, \"click\");\n\n        return this;\n    }\n\n    /**\n     * Registers a `pointerdown` event listener on this button. The named\n     * surface lets external consumers (e.g.\n     * [`AbstractPickerField`](/api/component/input/classes/AbstractPickerField))\n     * route through the component rather than reaching for\n     * `Event.addListener(button, \"pointerdown\", ...)` directly, preserving\n     * the framework's named-listener contract.\n     *\n     * @param listener - Called with the originating PointerEvent.\n     *\n     * @returns This component, for method chaining.\n     */\n    addPointerDownListener(listener: Function): this {\n        Event.addListener(this, \"pointerdown\", listener);\n\n        return this;\n    }\n\n    /**\n     * Returns whether this button is currently in `chromeless` mode (no\n     * border / shadow / gradient / pressed-hover treatments).\n     *\n     * @returns True when chrome dispatches are gated off.\n     */\n    isChromeless(): boolean {\n        return this._options.chromeless ?? this._defaultOptions.chromeless ?? false;\n    }\n\n    /**\n     * Toggles the `chromeless` flag and reconciles the DOM. When flipping\n     * to `true`, clears every chrome property currently on the element\n     * before recording the flag. When flipping to `false`, restores the\n     * chromeful defaults from `_defaultOptions` (which retains both\n     * Button's base defaults and any subclass chrome layered in at\n     * construction, so the round-trip is loss-free for both sources).\n     *\n     * @param value - The new chromeless state.\n     *\n     * @returns This component, for method chaining.\n     *\n     * @remarks Consumer-supplied chrome that came in via the caller's\n     * `options` bag (rather than the subclass's `_defaultOptions`) is not\n     * recovered by `setChromeless(false)` — only the defaults round-trip.\n     */\n    setChromeless(value: boolean): this {\n        if (this.isChromeless() === value) {\n            return this;\n        }\n\n        if (value) {\n            // Clear the DOM before flipping the flag. The clear* setters\n            // are not gated today, but the ordering keeps the intent\n            // self-evident if a future change does gate them.\n            this._clearChrome();\n            this._options.chromeless = true;\n\n            // Chromeless wins over flat: `_clearChrome` already stripped the\n            // flat hover/pressed treatments, so drop the flat flag too to keep\n            // `isFlat()` honest.\n            this._flat = false;\n            this._options.flat = false;\n        } else {\n            // Flip the flag first so the clear/set side-effects on the\n            // restore path are not intercepted by anything that might\n            // later gate them.\n            this._options.chromeless = false;\n            this._restoreChrome();\n        }\n\n        return this;\n    }\n\n    /**\n     * Clears every chrome property the framework defaults touch. Pressed\n     * and hover rules are only touched when their lazy backing slots have\n     * already been allocated — calling the `clearX` setters when nothing\n     * was ever installed would touch the lazy getters and acquire empty\n     * orphan rules.\n     */\n    private _clearChrome(): void {\n        this.clearBorder();\n        this.clearBorderRadius();\n        this.clearShadow();\n        this.clearBackgroundImage();\n\n        if (this._pressedStyleRule !== undefined) {\n            this.clearPressedBackgroundColor();\n            this.clearPressedBackgroundImage();\n            this.clearPressedForegroundColor();\n            this.clearPressedShadow();\n            this.clearPressedBorderRadius();\n            this.clearPressedBorder();\n        }\n\n        if (this._hoverStyleRule !== undefined) {\n            this.clearHoverBackgroundColor();\n            this.clearHoverBackgroundImage();\n            this.clearHoverForegroundColor();\n            this.clearHoverShadow();\n            this.clearHoverBorderRadius();\n            this.clearHoverBorder();\n        }\n    }\n\n    /**\n     * Re-applies chrome from `_defaultOptions`, which carries both Button's\n     * base defaults and any subclass chrome layered in at construction via\n     * the third constructor arg. Consumer-supplied chrome (from the\n     * caller's options bag, not `_defaultOptions`) is not recovered here.\n     */\n    private _restoreChrome(): void {\n        const d = this._defaultOptions as ButtonOptions;\n\n        // Re-apply the chromeful resting background `_applyFlatChrome` cleared.\n        // Flat set the sentinel \"transparent\" only when neither the consumer nor\n        // a subclass default pinned a colour (otherwise that colour was\n        // preserved through flat and needs no restore); swap that sentinel back\n        // for the framework token so the un-flattened button regains its fill.\n        if (d.backgroundColor === undefined && this._options.backgroundColor === \"transparent\") {\n            this.setBackgroundColor(BUTTON_RESTING_BACKGROUND);\n        }\n\n        if (d.border                 !== undefined) this.setBorder(d.border);\n        if (d.borderRadius           !== undefined) this.setBorderRadius(d.borderRadius);\n        if (d.shadow                 !== undefined) this.setShadow(d.shadow);\n        if (d.backgroundImage        !== undefined) this.setBackgroundImage(d.backgroundImage);\n\n        if (d.pressedForegroundColor !== undefined) this.setPressedForegroundColor(d.pressedForegroundColor);\n        if (d.pressedBackgroundColor !== undefined) this.setPressedBackgroundColor(d.pressedBackgroundColor);\n        if (d.pressedBackgroundImage !== undefined) this.setPressedBackgroundImage(d.pressedBackgroundImage);\n        if (d.pressedShadow          !== undefined) this.setPressedShadow         (d.pressedShadow);\n        if (d.pressedBorder          !== undefined) this.setPressedBorder         (d.pressedBorder);\n        else                                        this.clearPressedBorder      ();\n        if (d.pressedBorderRadius    !== undefined) this.setPressedBorderRadius   (d.pressedBorderRadius);\n\n        if (d.hoverForegroundColor   !== undefined) this.setHoverForegroundColor  (d.hoverForegroundColor);\n        if (d.hoverBackgroundColor   !== undefined) this.setHoverBackgroundColor  (d.hoverBackgroundColor);\n        if (d.hoverBackgroundImage   !== undefined) this.setHoverBackgroundImage  (d.hoverBackgroundImage);\n        if (d.hoverShadow            !== undefined) this.setHoverShadow           (d.hoverShadow);\n        if (d.hoverBorder            !== undefined) this.setHoverBorder           (d.hoverBorder);\n        else                                        this.clearHoverBorder         ();\n        if (d.hoverBorderRadius      !== undefined) this.setHoverBorderRadius     (d.hoverBorderRadius);\n    }\n\n    /**\n     * Returns whether this button is currently in `flat` mode (no resting\n     * border / shadow / gradient; a light frame on hover and a sunken inset\n     * frame on press).\n     *\n     * @returns True when the flat appearance is applied.\n     */\n    isFlat(): boolean {\n        return this._flat ?? false;\n    }\n\n    /**\n     * Toggles the classical `flat` appearance and reconciles the DOM. When\n     * flipping to `true`, suppresses the resting frame and installs the flat\n     * hover / pressed treatments from the `--ts-ui-button-flat-*` tokens; when\n     * flipping to `false`, restores the raised chrome from `_defaultOptions`\n     * via the same round-trip `setChromeless(false)` uses. Mutually exclusive\n     * with `chromeless` (chromeless wins): `setFlat(true)` no-ops with a\n     * dev-time warning when the button is chromeless.\n     *\n     * @param value - The new flat state.\n     *\n     * @returns This component, for method chaining.\n     *\n     * @remarks Consumer-supplied chrome that came in via the caller's\n     * `options` bag (rather than the subclass's `_defaultOptions`) is not\n     * recovered by `setFlat(false)` — only the defaults round-trip, matching\n     * the documented `setChromeless(false)` tradeoff.\n     */\n    setFlat(value: boolean): this {\n        if (value && this.isChromeless()) {\n            console.warn(\"Button #\" + this.getId() + \": setFlat(true) ignored — flat and chromeless are mutually exclusive, chromeless wins.\");\n\n            return this;\n        }\n\n        if ((this._flat ?? false) === value) {\n            return this;\n        }\n\n        if (value) {\n            this._flat = true;\n            this._options.flat = true;\n            this._applyFlatChrome();\n        } else {\n            this._flat = false;\n            this._options.flat = false;\n            this._restoreChrome();\n            // `_restoreChrome` recovers borders/shadows but not insets, so a\n            // flat glyph-only button un-flattened here would keep its tight\n            // square. Re-resolve so it falls back to the default (or compact)\n            // perimeter for its new state.\n            this._resolveInsets();\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns whether this button is currently in `compact` mode (tighter\n     * symmetric insets).\n     *\n     * @returns True when compact rendering is applied.\n     */\n    isCompact(): boolean {\n        return this._compact ?? false;\n    }\n\n    /**\n     * Toggles compact rendering. When `true`, the button's inset perimeter\n     * tightens — text buttons to `(2,6,2,6)`, glyph-only buttons to a\n     * `(2,2,2,2)` square — so the button reads denser (e.g. packed into a\n     * [`ToolBar`](/api/component/menubar/classes/ToolBar)); `false` restores the\n     * default `(5,10,5,10)` (or the flat glyph square, if flat). Orthogonal to\n     * `flat`: a button can be compact, flat, both, or neither, and compact\n     * insets win over the flat square when both apply.\n     *\n     * @param value - The new compact state.\n     *\n     * @returns This component, for method chaining.\n     */\n    setCompact(value: boolean): this {\n        if ((this._compact ?? false) === value) {\n            return this;\n        }\n\n        this._compact = value;\n        this._options.compact = value;\n        this._resolveInsets();\n\n        return this;\n    }\n\n    /**\n     * Suppresses the resting frame (border / radius / shadow / gradient) the\n     * same way the chromeless branch does, masks the inherited raised\n     * `pressedX` / `hoverX` defaults so a re-apply can't leak them, then\n     * installs the flat hover and sunken-pressed treatments sourced from the\n     * `--ts-ui-button-flat-*` tokens through the existing lazy style-rule\n     * setters. Glyph-only buttons (a glyph with an empty label) tighten to a\n     * compact square inset so they read as toolbar icon buttons.\n     */\n    private _applyFlatChrome(): void {\n        // Reserve the 1px frame at rest with a transparent border (rather than\n        // clearing it like the chromeless branch). Under `box-sizing: border-box`\n        // a border consumes content-box space, so a border that only appears on\n        // `:hover` / `:active` would nudge the centred label by 1px. Reserving it\n        // transparent keeps the geometry identical across states — the hover /\n        // pressed rules below only swap the border *colour*. Matches the 1px\n        // width of the `--ts-ui-button-flat-{hover,pressed}-border` tokens;\n        // widen this in lockstep if those ever exceed 1px.\n        this.setBorder(\"1px solid transparent\");\n\n        // Clear (not just mask) the resting radius, shadow, and background image:\n        // the chromeful `super.applyChromeOptions` already wrote these defaults\n        // (`--ts-ui-border-radius`, `--ts-ui-button-shadow`, `--ts-ui-button-bg`)\n        // into the rules, so nulling only the options would leave them painting\n        // behind a \"flat\" button — a drop shadow ringing the button and rounded\n        // corners.\n        this.clearBorderRadius();\n        this.clearShadow();\n        this.clearBackgroundImage();\n\n        // Drop the resting background *colour* too — flat is transparent at\n        // rest. The chromeful path wrote `BUTTON_RESTING_BACKGROUND` into the\n        // rule via `setBackgroundColor` (see `applyChromeOptions`), which also\n        // stored it in `_options.backgroundColor`. A runtime `setFlat(true)` on\n        // an already-rendered chromeful button therefore sees that token here,\n        // not `undefined`; recognising it lets us override the rule to\n        // transparent while still preserving a genuine consumer-set colour (the\n        // old field-only write left the token painting). `_restoreChrome`\n        // re-applies the token on `setFlat(false)`.\n        const restingBackground = this.getBackgroundColor();\n\n        if (restingBackground === undefined || restingBackground === BUTTON_RESTING_BACKGROUND) {\n            this.setBackgroundColor(\"transparent\");\n        }\n\n        // Clear the inherited raised pressed/hover background images and the\n        // raised hover shadow (written by the chromeful path above) so they\n        // don't paint under the flat hover / pressed colours installed below.\n        this.clearPressedBackgroundImage();\n        this.clearHoverBackgroundImage();\n        this.clearHoverShadow();\n\n        // Install the flat hover frame + sunken pressed frame from the tokens.\n        this.setHoverBackgroundColor(\"var(--ts-ui-button-flat-hover-bg, rgba(0, 0, 0, 0.06))\");\n        this.setHoverBorder(\"var(--ts-ui-button-flat-hover-border, 1px solid rgb(200, 200, 200))\");\n        this.setPressedBackgroundColor(\"var(--ts-ui-button-flat-pressed-bg, rgba(0, 0, 0, 0.10))\");\n        this.setPressedShadow(\"var(--ts-ui-button-flat-pressed-shadow, inset 1px 1px 3px rgba(0, 0, 0, 0.25))\");\n        this.setPressedBorder(\"var(--ts-ui-button-flat-pressed-border, 1px solid rgb(180, 180, 180))\");\n\n        // Re-resolve the inset perimeter for the new flat state. Runs through\n        // the shared resolver so the construction-time flat path — where\n        // `_glyph` / `_text` don't yet exist during the super cascade — can\n        // re-apply it from the constructor body once the content row is built.\n        this._resolveInsets();\n    }\n\n    /**\n     * Resolves and applies the button's inset perimeter from the three live\n     * inputs — `_compact`, `_flat`, and whether the button is glyph-only (a\n     * glyph with an empty label). Compact wins over the flat square so a compact\n     * flat icon tightens to `(2,2,2,2)` rather than the non-compact flat\n     * `(4,4,4,4)`. The resolver computes an absolute target each call (never a\n     * delta), so the construction-time double-invocation (the cascade's\n     * `_applyFlatChrome` before the content row exists, then the constructor's\n     * re-evaluation) and later `setCompact` / `setFlat` flips all converge on\n     * the same answer without drift.\n     *\n     * No-ops until the content row is built — `_text` is assigned in the\n     * constructor body, after the super cascade that first fires the flat /\n     * compact setters; the constructor re-invokes this once the row exists.\n     */\n    private _resolveInsets(): void {\n        if (this._text === undefined) {\n            return;\n        }\n\n        const glyphOnly = this._glyph !== null && this._text.getText().valueOf() === \"\";\n\n        let insets: Insets;\n\n        if (this._compact && glyphOnly) {\n            insets = BUTTON_COMPACT_INSETS_GLYPH;\n        } else if (this._compact) {\n            insets = BUTTON_COMPACT_INSETS_TEXT;\n        } else if (this._flat && glyphOnly) {\n            insets = BUTTON_FLAT_GLYPH_INSETS;\n        } else {\n            insets = BUTTON_DEFAULT_INSETS;\n        }\n\n        this.setInsets(insets);\n    }\n\n    /**\n     * Updates the button's insets. Overrides Component's setter so the\n     * auto-sized preferred size re-syncs to the new inset perimeter\n     * without explicit consumer prodding (subclasses like `MenuBarButton`\n     * change insets in their constructor body).\n     *\n     * @param insets - The new perimeter insets.\n     * @returns This component, for method chaining.\n     */\n    setInsets(insets: Insets): this {\n        super.setInsets(insets);\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Records a consumer-supplied preferred size. Flips\n     * `_consumerSetPreferredSize` so future auto-fires from\n     * `recomputePreferredSize` no-op — the consumer's explicit intent\n     * wins permanently for the lifetime of this instance.\n     *\n     * @param width - The preferred width in pixels.\n     * @param height - The preferred height in pixels.\n     * @returns This component, for method chaining.\n     */\n    setPreferredSize(width: number, height: number): this {\n        this._consumerSetPreferredSize = true;\n        super.setPreferredSize(width, height);\n\n        return this;\n    }\n\n    /**\n     * Returns the preferred size, derived live from the content row +\n     * perimeter while the consumer hasn't pinned one. Deriving live (rather\n     * than reading a cached value) means\n     * the button always tracks its current label / glyph: a {@link setText}\n     * that grows or shrinks the label is reflected the next time the parent\n     * layout queries this button, with no manual recompute call needed at the\n     * mutation site.\n     *\n     * When the consumer has supplied an explicit `preferredSize`, that pinned\n     * value (recorded by {@link setPreferredSize}) wins via `super`.\n     *\n     * @returns The preferred `{width, height}`.\n     */\n    getPreferredSize(): Size | null {\n        // A consumer-pinned size or a class-level `preferredSize` default both\n        // pin the button rather than deriving from content. The default now\n        // lives in `_defaultOptions` (it is no longer dispatched through\n        // `setPreferredSize`, so it never flips `_consumerSetPreferredSize`);\n        // honour it here so subclasses like TabCloseButton keep their fixed size.\n        if (this._consumerSetPreferredSize || this._defaultOptions.preferredSize) {\n            return super.getPreferredSize();\n        }\n\n        return this.computePreferredSize();\n    }\n\n    /**\n     * Notifies the parent layout that this button's content-derived size may\n     * have changed, so it re-queries {@link getPreferredSize} (which derives\n     * live). Pushes the freshly computed size through Component's setter both\n     * to fire the parent-relayout notification and to dedupe (the setter\n     * no-ops when the size is unchanged). Auto-fires from the end of the\n     * constructor, `setGlyph`, `clearGlyph`, `setInsets`, and the registered\n     * `ThemeManager.onThemeChange` handler — the content mutations that do\n     * not bubble a preferred-size change on their own (a label `setText`\n     * already bubbles via its own measurement).\n     *\n     * No-ops when the consumer has supplied an explicit `preferredSize`\n     * (Button's `setPreferredSize` override records that intent).\n     *\n     * Subclasses customise the size by overriding {@link computePreferredSize}\n     * rather than touching this method — the consumer-flag and auto-fire\n     * wiring stays here.\n     */\n    protected recomputePreferredSize(): void {\n        // Size the glyph to the title line box first, above the consumer-pinned\n        // early-return, so the glyph still line-height-matches even when the\n        // button's own size is frozen. Subclasses that pin their glyph size opt\n        // out via _syncGlyphSize's per-glyph guard, not this early-return.\n        this._syncGlyphSize();\n\n        if (this._consumerSetPreferredSize || this._defaultOptions.preferredSize) {\n            return;\n        }\n\n        const size = this.computePreferredSize();\n\n        // Bypass our own override of setPreferredSize so the consumer flag\n        // doesn't flip on an auto-fire. `super` is `Component`. The written\n        // value isn't read back for sizing (getPreferredSize derives live);\n        // the call stands in for the parent-relayout notification + dedupe.\n        super.setPreferredSize(size.width, size.height);\n    }\n\n    /**\n     * Computes the auto-sized preferred size from the content row's\n     * preferred size plus this button's perimeter (insets + border).\n     * Mirrors `Fit.getPreferredSize`'s use of `getPerimeterSize` so the\n     * border width isn't truncated off the text. Subclasses override to\n     * alter — the typical case is replacing the derived height with a\n     * fixed token (see `MenuBarButton`).\n     *\n     * @returns The `{ width, height }` Button reports as its preferred size\n     *   while the consumer hasn't pinned one.\n     */\n    protected computePreferredSize(): { width: number; height: number } {\n        const content = this._content?.getPreferredSize() ?? { width: 0, height: 0 };\n        const perim   = this.getPerimeterSize();\n\n        return {\n            width:  content.width  + perim.left + perim.right,\n            height: content.height + perim.top  + perim.bottom,\n        };\n    }\n\n    /**\n     * Returns the background color applied when the button is in the :active state.\n     *\n     * @returns The CSS color string, or null if not set.\n     */\n    getPressedBackgroundColor(): string | null {\n        return this._options.pressedBackgroundColor ?? this._defaultOptions.pressedBackgroundColor ?? null;\n    }\n\n    /**\n     * Sets the background color for the :active CSS rule.\n     *\n     * @param backgroundColor - A CSS color string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setPressedBackgroundColor(backgroundColor: string): this {\n        this._options.pressedBackgroundColor = backgroundColor;\n        this.pressedStyleRule.set(\"backgroundColor\", backgroundColor);\n\n        return this;\n    }\n\n    /**\n     * Removes the background-color from the :active CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearPressedBackgroundColor(): this {\n        this._options.pressedBackgroundColor = undefined;\n        this.pressedStyleRule.set(\"backgroundColor\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the background image applied when the button is in the :active state.\n     *\n     * @returns The CSS background-image string, or null if not set.\n     */\n    getPressedBackgroundImage(): string | null {\n        return this._options.pressedBackgroundImage ?? this._defaultOptions.pressedBackgroundImage ?? null;\n    }\n\n    /**\n     * Sets the background image for the :active CSS rule.\n     *\n     * @param backgroundImage - Optional. A CSS background-image string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setPressedBackgroundImage(backgroundImage: string): this {\n        this._options.pressedBackgroundImage = backgroundImage;\n        this.pressedStyleRule.set(\"backgroundImage\", backgroundImage);\n\n        return this;\n    }\n\n    /**\n     * Removes the background-image from the :active CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearPressedBackgroundImage(): this {\n        this._options.pressedBackgroundImage = undefined;\n        this.pressedStyleRule.set(\"backgroundImage\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the text color applied when the button is in the :active state.\n     *\n     * @returns The CSS color string, or null if not set.\n     */\n    getPressedForegroundColor(): string | null {\n        return this._options.pressedForegroundColor ?? this._defaultOptions.pressedForegroundColor ?? null;\n    }\n\n    /**\n     * Sets the text color for the :active CSS rule.\n     *\n     * @param foregroundColor - A CSS color string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setPressedForegroundColor(foregroundColor: string): this {\n        this._options.pressedForegroundColor = foregroundColor;\n        this.pressedStyleRule.set(\"color\", foregroundColor);\n\n        return this;\n    }\n\n    /**\n     * Removes the color (foreground) from the :active CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearPressedForegroundColor(): this {\n        this._options.pressedForegroundColor = undefined;\n        this.pressedStyleRule.set(\"color\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the border applied when the button is in the :active state.\n     *\n     * @returns The {@link BorderOptions} for the :active state, or null if not set.\n     */\n    getPressedBorder(): BorderOptions | null {\n        return this._pressedBorder;\n    }\n\n    /**\n     * Sets the border for the :active CSS rule. Accepts either a {@link BorderOptions}\n     * bag or a CSS `border` shorthand string (sugar for `{ border: <string> }`).\n     *\n     * @param options - Border configuration, a CSS `border` shorthand string, or omitted for a `none` border.\n     *\n     * @returns This component, for method chaining.\n     */\n    setPressedBorder(options?: BorderOptions | string): this {\n        this._pressedBorder = typeof options === \"string\" ? { border: options } : (options ?? {});\n        this.pressedStyleRule.setMany(borderToStyle(this._pressedBorder));\n\n        return this;\n    }\n\n    /**\n     * Removes the border from the :active CSS rule, reverting the pressed\n     * state to no explicit border. Lets the un-flatten / un-chromeless round\n     * trip strip a flat pressed border that has no raised default to restore.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearPressedBorder(): this {\n        this._pressedBorder = null;\n        this.pressedStyleRule.setMany({\n            borderTop:    null,\n            borderRight:  null,\n            borderBottom: null,\n            borderLeft:   null,\n        });\n\n        return this;\n    }\n\n    /**\n     * Returns the border radius applied when the button is in the :active state.\n     *\n     * @returns The CSS border-radius string, or null if not set.\n     */\n    getPressedBorderRadius(): string | null {\n        return this._options.pressedBorderRadius ?? null;\n    }\n\n    /**\n     * Sets the border radius for the :active CSS rule.\n     *\n     * @param borderRadius - Optional. A CSS border-radius string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setPressedBorderRadius(borderRadius: string): this {\n        this._options.pressedBorderRadius = borderRadius;\n        this.pressedStyleRule.set(\"borderRadius\", borderRadius);\n\n        return this;\n    }\n\n    /**\n     * Removes the border-radius from the :active CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearPressedBorderRadius(): this {\n        this._options.pressedBorderRadius = undefined;\n        this.pressedStyleRule.set(\"borderRadius\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the box shadow applied when the button is in the :active state.\n     *\n     * @returns The CSS box-shadow string, or null if not set.\n     */\n    getPressedShadow(): string | null {\n        return this._options.pressedShadow ?? this._defaultOptions.pressedShadow ?? null;\n    }\n\n    /**\n     * Sets the box shadow for the :active CSS rule.\n     *\n     * @param shadow - A CSS box-shadow string, or null to set the shadow to \"none\".\n     *\n     * @returns This component, for method chaining.\n     */\n    setPressedShadow(shadow: string): this {\n        this._options.pressedShadow = shadow;\n        this.pressedStyleRule.set(\"boxShadow\", shadow);\n\n        return this;\n    }\n\n    /**\n     * Removes the box-shadow from the :active CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearPressedShadow(): this {\n        this._options.pressedShadow = undefined;\n        this.pressedStyleRule.set(\"boxShadow\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the background color applied when the pointer is over the button (but not pressed).\n     *\n     * @returns The CSS color string, or null if not set.\n     */\n    getHoverBackgroundColor(): string | null {\n        return this._options.hoverBackgroundColor ?? this._defaultOptions.hoverBackgroundColor ?? null;\n    }\n\n    /**\n     * Sets the background color for the `:hover:not(:active)` CSS rule.\n     *\n     * @param backgroundColor - A CSS color string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setHoverBackgroundColor(backgroundColor: string): this {\n        this._options.hoverBackgroundColor = backgroundColor;\n        this.hoverStyleRule.set(\"backgroundColor\", backgroundColor);\n\n        return this;\n    }\n\n    /**\n     * Removes the background-color from the `:hover:not(:active)` CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearHoverBackgroundColor(): this {\n        this._options.hoverBackgroundColor = undefined;\n        this.hoverStyleRule.set(\"backgroundColor\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the background image applied when the pointer is over the button (but not pressed).\n     *\n     * @returns The CSS background-image string, or null if not set.\n     */\n    getHoverBackgroundImage(): string | null {\n        return this._options.hoverBackgroundImage ?? this._defaultOptions.hoverBackgroundImage ?? null;\n    }\n\n    /**\n     * Sets the background image for the `:hover:not(:active)` CSS rule.\n     *\n     * @param backgroundImage - A CSS background-image string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setHoverBackgroundImage(backgroundImage: string): this {\n        this._options.hoverBackgroundImage = backgroundImage;\n        this.hoverStyleRule.set(\"backgroundImage\", backgroundImage);\n\n        return this;\n    }\n\n    /**\n     * Removes the background-image from the `:hover:not(:active)` CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearHoverBackgroundImage(): this {\n        this._options.hoverBackgroundImage = undefined;\n        this.hoverStyleRule.set(\"backgroundImage\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the text color applied when the pointer is over the button (but not pressed).\n     *\n     * @returns The CSS color string, or null if not set.\n     */\n    getHoverForegroundColor(): string | null {\n        return this._options.hoverForegroundColor ?? null;\n    }\n\n    /**\n     * Sets the text color for the `:hover:not(:active)` CSS rule.\n     *\n     * @param foregroundColor - A CSS color string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setHoverForegroundColor(foregroundColor: string): this {\n        this._options.hoverForegroundColor = foregroundColor;\n        this.hoverStyleRule.set(\"color\", foregroundColor);\n\n        return this;\n    }\n\n    /**\n     * Removes the color (foreground) from the `:hover:not(:active)` CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearHoverForegroundColor(): this {\n        this._options.hoverForegroundColor = undefined;\n        this.hoverStyleRule.set(\"color\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the border applied when the pointer is over the button (but not pressed).\n     *\n     * @returns The {@link BorderOptions} for the hover state, or null if not set.\n     */\n    getHoverBorder(): BorderOptions | null {\n        return this._hoverBorder;\n    }\n\n    /**\n     * Sets the border for the `:hover:not(:active)` CSS rule. Accepts either a\n     * {@link BorderOptions} bag or a CSS `border` shorthand string (sugar for\n     * `{ border: <string> }`, e.g. `\"1px solid rgb(...)\"` or `\"none\"`). The four\n     * CSS longhands are written so a per-side hover border survives.\n     *\n     * @param options - Border configuration, a CSS `border` shorthand string, or omitted for a `none` border.\n     *\n     * @returns This component, for method chaining.\n     */\n    setHoverBorder(options?: BorderOptions | string): this {\n        this._hoverBorder = typeof options === \"string\" ? { border: options } : (options ?? {});\n        this.hoverStyleRule.setMany(borderToStyle(this._hoverBorder));\n\n        return this;\n    }\n\n    /**\n     * Removes the border from the :hover CSS rule, reverting the hover state\n     * to no explicit border. Lets the un-flatten / un-chromeless round trip\n     * strip a flat hover border that has no raised default to restore.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearHoverBorder(): this {\n        this._hoverBorder = null;\n        this.hoverStyleRule.setMany({\n            borderTop:    null,\n            borderRight:  null,\n            borderBottom: null,\n            borderLeft:   null,\n        });\n\n        return this;\n    }\n\n    /**\n     * Returns the border radius applied when the pointer is over the button (but not pressed).\n     *\n     * @returns The CSS border-radius string, or null if not set.\n     */\n    getHoverBorderRadius(): string | null {\n        return this._options.hoverBorderRadius ?? null;\n    }\n\n    /**\n     * Sets the border radius for the `:hover:not(:active)` CSS rule.\n     *\n     * @param borderRadius - A CSS border-radius string, or null to clear the property.\n     *\n     * @returns This component, for method chaining.\n     */\n    setHoverBorderRadius(borderRadius: string): this {\n        this._options.hoverBorderRadius = borderRadius;\n        this.hoverStyleRule.set(\"borderRadius\", borderRadius);\n\n        return this;\n    }\n\n    /**\n     * Removes the border-radius from the `:hover:not(:active)` CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearHoverBorderRadius(): this {\n        this._options.hoverBorderRadius = undefined;\n        this.hoverStyleRule.set(\"borderRadius\", null);\n\n        return this;\n    }\n\n    /**\n     * Returns the box shadow applied when the pointer is over the button (but not pressed).\n     *\n     * @returns The CSS box-shadow string, or null if not set.\n     */\n    getHoverShadow(): string | null {\n        return this._options.hoverShadow ?? this._defaultOptions.hoverShadow ?? null;\n    }\n\n    /**\n     * Sets the box shadow for the `:hover:not(:active)` CSS rule.\n     *\n     * @param shadow - A CSS box-shadow string, or null to set the shadow to \"none\".\n     *\n     * @returns This component, for method chaining.\n     */\n    setHoverShadow(shadow: string): this {\n        this._options.hoverShadow = shadow;\n        this.hoverStyleRule.set(\"boxShadow\", shadow);\n\n        return this;\n    }\n\n    /**\n     * Removes the box-shadow from the `:hover:not(:active)` CSS rule.\n     *\n     * @returns This component, for method chaining.\n     */\n    clearHoverShadow(): this {\n        this._options.hoverShadow = undefined;\n        this.hoverStyleRule.set(\"boxShadow\", null);\n\n        return this;\n    }\n\n    /**\n     * Enables or disables the button.\n     *\n     * @param enabled - True to enable, false to disable.\n     *\n     * @remarks\n     * When disabled, sets the native `disabled` attribute on the underlying\n     * `<button>` element (which suppresses pointer events and `:active`),\n     * dims the button to 0.5 opacity, and switches the cursor to `not-allowed`.\n     * Re-enabling restores the previous cursor and clears the opacity override.\n     */\n    setEnabled(enabled: boolean): this {\n        if ((this._options.enabled ?? true) === enabled) {\n            return this;\n        }\n\n        this._options.enabled = enabled;\n\n        if (enabled) {\n            this.setDisabledAttribute(false);\n            this.clearOpacity();\n            this.setCursor(this._enabledCursor);\n        } else {\n            this._enabledCursor = this.getCursor() ?? \"pointer\";\n            this.setDisabledAttribute(true);\n            this.setOpacity(0.5);\n            this.setCursor(\"not-allowed\");\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns whether the button is currently enabled.\n     *\n     * @returns True if the button accepts user interaction.\n     */\n    isEnabled(): boolean {\n        return this._options.enabled ?? true;\n    }\n\n    /**\n     * Sets whether a description aligns full-width below the glyph (`true`,\n     * default) or indented under the title text beside the glyph (`false`).\n     * Only has a visible effect when the button has both a leading glyph and a\n     * visible description; otherwise both modes resolve to the same minimal\n     * row. Restructures the content row live.\n     *\n     * @param value - `true` for under-glyph (full width), `false` for under-title.\n     *\n     * @returns This component, for method chaining.\n     */\n    setDescriptionUnderGlyph(value: boolean): this {\n        this._options.descriptionUnderGlyph = value;\n\n        this._rebuildContentRow();\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Returns whether the description aligns full-width under the glyph.\n     *\n     * @returns `true` for under-glyph (the default), `false` for under-title.\n     */\n    isDescriptionUnderGlyph(): boolean {\n        return this._isDescriptionUnderGlyph();\n    }\n\n    /**\n     * Sets whether the description is rendered on the button face. When\n     * `false`, the button shows only its glyph and title, but the description\n     * still appears in the hover tooltip — the text is stored either way. Does\n     * not touch the tooltip (which is unaffected by this flag).\n     *\n     * @param value - `true` (default) to show the description on the button, `false` to hide it.\n     *\n     * @returns This component, for method chaining.\n     */\n    setShowDescription(value: boolean): this {\n        this._options.showDescription = value;\n\n        this._rebuildContentRow();\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Returns whether the description is rendered on the button face.\n     *\n     * @returns `true` when the description shows on the button (the default), `false` when it is tooltip-only.\n     */\n    isShowDescription(): boolean {\n        return this._isShowDescription();\n    }\n\n    /**\n     * Sets whether the title is rendered on the button face. When `false`, the\n     * button shows only its glyph, but the title still drives the hover tooltip\n     * and is reflected into `aria-label` as the accessible name — the title is\n     * stored either way. Toggling back to `true` restores the on-face label and\n     * clears the reflected `aria-label`.\n     *\n     * @param value - `true` (default) to show the title on the button, `false` to hide it.\n     *\n     * @returns This component, for method chaining.\n     */\n    setShowText(value: boolean): this {\n        this._options.showText = value;\n\n        // Re-render `_text` to the title or blank, then rebuild the row and\n        // re-resolve insets — hiding the title flips the button to glyph-only,\n        // which changes both the inset perimeter and the glyph-only spacing.\n        this._text.setText(value ? (this._options.text ?? \"\") : \"\");\n        this._rebuildContentRow();\n        this._resolveInsets();\n        this.recomputePreferredSize();\n\n        return this;\n    }\n\n    /**\n     * Returns whether the title is rendered on the button face.\n     *\n     * @returns `true` when the title shows on the button (the default), `false` when it is tooltip-only.\n     */\n    isShowText(): boolean {\n        return this._isShowText();\n    }\n}\n\nconst ButtonCallable = callable(Button);\ntype ButtonCallable<TOptions extends ButtonOptions = ButtonOptions> = Button<TOptions>;\nexport {\n    Button         as _Button,\n    ButtonCallable as Button\n};\n"],"mappings":"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"}

package/dist/lib/Card-UF0fq8cQ.js

@@ -0,0 +1,2 @@
+import{d as e,f as t,l as n}from"./Component-BR2f0Itb.js";var Card=class extends n{_visibleComponentId=null;_currentVisible=null;constructor(e){super(),e&&this.applyOptions(e)}applyOptions(e){super.applyOptions(e),e.visibleComponentId!==void 0&&this.setVisibleComponentId(e.visibleComponentId)}getVisibleComponentId(){return this._visibleComponentId}getPreferredSize(){return this.computeSize(e=>e.getPreferredSize())}getMinSize(){return this.computeSize(e=>e.getMinSize())}getMaxSize(){return this.computeSize(e=>e.getMaxSize())}computeSize(e){let t=this.getContainer();if(!t)return null;let n=t.getPerimeterSize();if(!n)return null;let r=n.left+n.right,i=n.top+n.bottom,a=this.getVisibleComponent();if(!a)return null;let o=e(a);return o?{width:o.width+r,height:o.height+i}:null}setVisibleComponentId(e){return this._visibleComponentId===e?this:(this._visibleComponentId=e,this.syncVisible(),this.getContainer()?.scheduleLayout(),this)}getVisibleComponent(){return this._currentVisible||this.syncVisible(),this._currentVisible}syncVisible(){let e=this.getContainer();if(!e)return;let t=e.getComponents(),n=null;if(this._visibleComponentId){for(let e of t)if(e.getId()==this._visibleComponentId){n=e;break}n||console.warn(`Visible component id is specified but no matching component was found.`)}if(!n&&t.length>0&&(n=t[0]),n!==this._currentVisible){if(this._currentVisible===null)for(let e of t)e!==n&&e.setVisible(!1);else this._currentVisible.setVisible(!1);n&&n.setVisible(!0),this._currentVisible=n}}computeTotalMinSize(){return this._currentVisible?this._currentVisible.getMinSize()??{width:0,height:0}:{width:0,height:0}}doLayout(){let t=this.getContainer();if(!t||(this._currentVisible||this.syncVisible(),!this._currentVisible))return;let n=t.getInnerSize(),r=t.getContentInsets();n&&=this.inflateForOverflow(n),this.placeComponent(this._currentVisible,r.getLeft(),r.getTop(),n?n.width:0,n?n.height:0,e.BOTH)}},r=t(Card);export{r as t};
+//# sourceMappingURL=Card-UF0fq8cQ.js.map

package/dist/lib/Card-UF0fq8cQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-UF0fq8cQ.js","names":[],"sources":["../../src/typescript/lib/layout/Card.ts"],"sourcesContent":["// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { LayoutManager, LayoutManagerOptions } from \"~/layout/LayoutManager.js\"\nimport { FillType } from \"~/layout/FillType.js\";\nimport { Size } from \"~/primitive/Size.js\";\nimport { Component } from \"~/core/Component.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * Construction-time options for {@link Card}.\n *\n * @category Layouts\n */\nexport interface CardOptions extends LayoutManagerOptions {\n    visibleComponentId?: string;\n}\n\n/**\n * A layout manager that shows exactly one child component at a time,\n * sizing it to fill the container's inner bounds.\n * The visible child is selected by component ID; all others are hidden.\n *\n * @category Layouts\n */\nclass Card extends LayoutManager {\n\n    private _visibleComponentId: string | null = null;\n    private _currentVisible: Component | null = null;\n\n    constructor(options?: CardOptions) {\n        // LayoutManager's constructor takes no options; applied via applyOptions below.\n        // eslint-disable-next-line local/forward-super-options\n        super();\n\n        if (options) {\n            this.applyOptions(options);\n        }\n    }\n\n    /**\n     * Applies a {@link CardOptions} bag, dispatching the initial visible\n     * component id after the inherited LayoutManager defaults.\n     *\n     * @param options - The options bag carrying the values to apply.\n     */\n    protected applyOptions(options: CardOptions): void {\n        super.applyOptions(options);\n\n        if (options.visibleComponentId !== undefined) {\n            this.setVisibleComponentId(options.visibleComponentId);\n        }\n    }\n\n    /**\n     * Returns the ID of the currently visible child component, or `null` if none is set.\n     *\n     * @returns The visible component ID, or `null`.\n     */\n    getVisibleComponentId(): string | null {\n        return this._visibleComponentId;\n    }\n\n    /**\n     * Returns the preferred size of the visible child plus the container perimeter.\n     *\n     * @returns The preferred `{width, height}`, or `null` if there is no container or no visible component.\n     */\n    getPreferredSize(): Size | null {\n        return this.computeSize(component => component.getPreferredSize());\n    }\n\n    /**\n     * Returns the minimum size of the visible child plus the container perimeter.\n     *\n     * @returns The minimum `{width, height}`, or `null` if there is no container or no visible component.\n     */\n    getMinSize(): Size | null {\n        return this.computeSize(component => component.getMinSize());\n    }\n\n    /**\n     * Returns the maximum size of the visible child plus the container perimeter.\n     *\n     * @returns The maximum `{width, height}`, or `null` if there is no container or no visible component.\n     */\n    getMaxSize(): Size | null {\n        return this.computeSize(component => component.getMaxSize());\n    }\n\n    /**\n     * Shared core of {@link getPreferredSize} / {@link getMinSize} /\n     * {@link getMaxSize}: adds the visible child's size (selected by `sizeOf`)\n     * to the container perimeter.\n     *\n     * @param sizeOf - Selects the child's preferred, minimum, or maximum size.\n     * @returns The composed `{width, height}`, or `null` if there is no\n     *   container, no visible component, or the child reports no size.\n     */\n    private computeSize(sizeOf: (component: Component) => Size | null): Size | null {\n        const container = this.getContainer();\n        if (!container) {\n            return null;\n        }\n\n        const perimeterSize = container.getPerimeterSize();\n        if (!perimeterSize) {\n            return null;\n        }\n\n        const outerWidth = perimeterSize.left + perimeterSize.right;\n        const outerHeight = perimeterSize.top + perimeterSize.bottom;\n\n        const visibleComponent = this.getVisibleComponent();\n        if (!visibleComponent) {\n            return null;\n        }\n\n        const size = sizeOf(visibleComponent);\n        if (!size) {\n            return null;\n        }\n\n        return {\n            width: size.width + outerWidth,\n            height: size.height + outerHeight\n        };\n    }\n\n    /**\n     * Selects which child component is visible. Hides the previously-visible\n     * child (if different) and shows the new one. Subsequent `doLayout` calls\n     * only re-size the visible child; visibility writes happen here, not on\n     * every layout pass.\n     *\n     * @param id - The ID of the child component to make visible.\n     */\n    setVisibleComponentId(id: string): this {\n        if (this._visibleComponentId === id) {\n            return this;\n        }\n\n        this._visibleComponentId = id;\n        this.syncVisible();\n\n        // Schedule a layout so a child first shown here gets sized: doLayout only\n        // ever lays out the visible child, so a sibling that was hidden during\n        // the initial pass has never been laid out and would render blank until\n        // an unrelated relayout. No-op before the manager is attached.\n        this.getContainer()?.scheduleLayout();\n\n        return this;\n    }\n\n    /**\n     * Returns the child component matching `visibleComponentId`, or the first\n     * child if no ID is set. Result is cached; the cache is refreshed when\n     * `setVisibleComponentId` is called or when `doLayout` runs without a\n     * resolved component.\n     *\n     * @returns The resolved visible component, or `null` if the container is empty.\n     */\n    getVisibleComponent(): Component | null {\n        if (!this._currentVisible) {\n            this.syncVisible();\n        }\n\n        return this._currentVisible;\n    }\n\n    /**\n     * Resolves the visible component from `visibleComponentId` (or first child\n     * if unset), and transitions visibility: hides the previous one if\n     * different, shows the new one. No-op when the resolved component is the\n     * same as the currently-shown one.\n     */\n    private syncVisible(): void {\n        const container = this.getContainer();\n        if (!container) {\n            return;\n        }\n\n        const components = container.getComponents();\n        let resolved: Component | null = null;\n\n        if (this._visibleComponentId) {\n            for (const c of components) {\n                if (c.getId() == this._visibleComponentId) {\n                    resolved = c;\n                    break;\n                }\n            }\n\n            if (!resolved) {\n                console.warn(\"Visible component id is specified but no matching component was found.\");\n            }\n        }\n\n        if (!resolved && components.length > 0) {\n            resolved = components[0];\n        }\n\n        if (resolved === this._currentVisible) {\n            return;\n        }\n\n        if (this._currentVisible === null) {\n            // First sync: components default to visible, so any sibling that\n            // isn't the resolved child needs to be hidden explicitly. Without\n            // this, e.g. a Cell's editor (sibling of its renderer) renders on\n            // top of the renderer because its setVisible was never called.\n            for (const c of components) {\n                if (c !== resolved) {\n                    c.setVisible(false);\n                }\n            }\n        } else {\n            this._currentVisible.setVisible(false);\n        }\n\n        if (resolved) {\n            resolved.setVisible(true);\n        }\n\n        this._currentVisible = resolved;\n    }\n\n    /**\n     * Computes the children's combined minSize along this manager's geometry:\n     * the currently-visible child's minSize. Used by `doLayout` to inflate\n     * the working size when the host has opted into `setOverflowing`.\n     *\n     * @returns The visible child's min-size; `{ width: 0, height: 0 }` when\n     *   no child is visible.\n     */\n    protected computeTotalMinSize(): Size {\n        if (!this._currentVisible) {\n            return { width: 0, height: 0 };\n        }\n\n        const min = this._currentVisible.getMinSize();\n\n        return min ?? { width: 0, height: 0 };\n    }\n\n    /**\n     * Sizes the visible component to fill the container's inner bounds.\n     * Visibility transitions are handled in `setVisibleComponentId`, not here.\n     */\n    doLayout(): void {\n        const container = this.getContainer();\n        if (!container) {\n            return;\n        }\n\n        if (!this._currentVisible) {\n            this.syncVisible();\n        }\n\n        if (!this._currentVisible) {\n            return;\n        }\n\n        let containerSize = container.getInnerSize();\n        const containerInsets = container.getContentInsets();\n\n        // Universal scroll: see HBox.doLayout for the rationale. When the\n        // host has marked the corresponding axis as overflowing, grow the\n        // working size past the host's inner rect to the visible child's\n        // minSize so the host's CSS `overflow: auto` produces a scrollbar.\n        if (containerSize) {\n            containerSize = this.inflateForOverflow(containerSize);\n        }\n\n        this.placeComponent(\n            this._currentVisible,\n            containerInsets.getLeft(),\n            containerInsets.getTop(),\n            containerSize ? containerSize.width : 0,\n            containerSize ? containerSize.height : 0,\n            FillType.BOTH\n        );\n    }\n}\n\nconst CardCallable = callable(Card);\ntype CardCallable = Card;\nexport {\n    Card         as _Card,\n    CardCallable as Card\n};\n"],"mappings":"0DAwBA,IAAM,KAAN,cAAmB,CAAc,CAE7B,oBAA6C,KAC7C,gBAA4C,KAE5C,YAAY,EAAuB,CAG/B,MAAM,EAEF,GACA,KAAK,aAAa,CAAO,CAEjC,CAQA,aAAuB,EAA4B,CAC/C,MAAM,aAAa,CAAO,EAEtB,EAAQ,qBAAuB,IAAA,IAC/B,KAAK,sBAAsB,EAAQ,kBAAkB,CAE7D,CAOA,uBAAuC,CACnC,OAAO,KAAK,mBAChB,CAOA,kBAAgC,CAC5B,OAAO,KAAK,YAAY,GAAa,EAAU,iBAAiB,CAAC,CACrE,CAOA,YAA0B,CACtB,OAAO,KAAK,YAAY,GAAa,EAAU,WAAW,CAAC,CAC/D,CAOA,YAA0B,CACtB,OAAO,KAAK,YAAY,GAAa,EAAU,WAAW,CAAC,CAC/D,CAWA,YAAoB,EAA4D,CAC5E,IAAM,EAAY,KAAK,aAAa,EACpC,GAAI,CAAC,EACD,OAAO,KAGX,IAAM,EAAgB,EAAU,iBAAiB,EACjD,GAAI,CAAC,EACD,OAAO,KAGX,IAAM,EAAa,EAAc,KAAO,EAAc,MAChD,EAAc,EAAc,IAAM,EAAc,OAEhD,EAAmB,KAAK,oBAAoB,EAClD,GAAI,CAAC,EACD,OAAO,KAGX,IAAM,EAAO,EAAO,CAAgB,EAKpC,OAJK,EAIE,CACH,MAAO,EAAK,MAAQ,EACpB,OAAQ,EAAK,OAAS,CAC1B,EANW,IAOf,CAUA,sBAAsB,EAAkB,CAcpC,OAbI,KAAK,sBAAwB,EACtB,MAGX,KAAK,oBAAsB,EAC3B,KAAK,YAAY,EAMjB,KAAK,aAAa,CAAC,EAAE,eAAe,EAE7B,KACX,CAUA,qBAAwC,CAKpC,OAJK,KAAK,iBACN,KAAK,YAAY,EAGd,KAAK,eAChB,CAQA,aAA4B,CACxB,IAAM,EAAY,KAAK,aAAa,EACpC,GAAI,CAAC,EACD,OAGJ,IAAM,EAAa,EAAU,cAAc,EACvC,EAA6B,KAEjC,GAAI,KAAK,oBAAqB,CAC1B,IAAK,IAAM,KAAK,EACZ,GAAI,EAAE,MAAM,GAAK,KAAK,oBAAqB,CACvC,EAAW,EACX,KACJ,CAGC,GACD,QAAQ,KAAK,wEAAwE,CAE7F,CAEA,GAAI,CAAC,GAAY,EAAW,OAAS,IACjC,EAAW,EAAW,IAGtB,IAAa,KAAK,gBAItB,IAAI,KAAK,kBAAoB,SAKpB,IAAM,KAAK,EACR,IAAM,GACN,EAAE,WAAW,EAAK,OAI1B,KAAK,gBAAgB,WAAW,EAAK,EAGrC,GACA,EAAS,WAAW,EAAI,EAG5B,KAAK,gBAAkB,CAPkB,CAQ7C,CAUA,qBAAsC,CAOlC,OANK,KAAK,gBAIE,KAAK,gBAAgB,WAE1B,GAAO,CAAE,MAAO,EAAG,OAAQ,CAAE,EALzB,CAAE,MAAO,EAAG,OAAQ,CAAE,CAMrC,CAMA,UAAiB,CACb,IAAM,EAAY,KAAK,aAAa,EASpC,GARI,CAAC,IAIA,KAAK,iBACN,KAAK,YAAY,EAGjB,CAAC,KAAK,iBACN,OAGJ,IAAI,EAAgB,EAAU,aAAa,EACrC,EAAkB,EAAU,iBAAiB,EAMnD,AACI,IAAgB,KAAK,mBAAmB,CAAa,EAGzD,KAAK,eACD,KAAK,gBACL,EAAgB,QAAQ,EACxB,EAAgB,OAAO,EACvB,EAAgB,EAAc,MAAQ,EACtC,EAAgB,EAAc,OAAS,EACvC,EAAS,IACb,CACJ,CACJ,EAEM,EAAe,EAAS,IAAI"}

package/dist/lib/ComboBox-GOBOAJ1N.js

@@ -0,0 +1,2 @@
+import{l as e,n as t,u as n}from"./Position-B-WfZYAJ.js";import{_ as r,f as i,h as a,t as o,y as s}from"./Component-BR2f0Itb.js";import{t as c}from"./Glyph-WUqTF_Z9.js";import{t as l}from"./Panel-DIsdaqc2.js";import{t as u}from"./AnimatedDropdown-BbGCs70E.js";import{t as d}from"./Fit-CFIr4P9R.js";import{t as f}from"./Text-D1RrBY52.js";import{t as p}from"./AbstractInput-DD-NpicS.js";import{t as m}from"./AbstractBooleanInput-C3rj7sje.js";import{t as h}from"./HBox-Q8y1PHlk.js";import{t as g}from"./LayoutConstraints-CHI2lhPd.js";import{n as _}from"./VBox-D5B9ecw0.js";import{t as v}from"./Button-DEUtBqK4.js";import{t as y}from"./Grid-Czux--Mr.js";import{chevron_left as b}from"./glyphs/solid/chevron_left.es.js";import{chevron_right as x}from"./glyphs/solid/chevron_right.es.js";import{clock as S}from"./glyphs/solid/clock.es.js";import{check as C}from"./glyphs/solid/check.es.js";import{r as w,t as T}from"./List-D-GhoVgB.js";import{chevron_down as ee}from"./glyphs/solid/chevron_down.es.js";var E=`var(--ts-ui-link-color, rgb(21, 101, 192))`;new r({scope:`selector`,name:`.Link`,styles:{textDecoration:`underline`}}),new r({scope:`selector`,name:`.Link:focus-visible`,styles:{outline:`2px solid var(--ts-ui-indicator-focus, rgb(30, 100, 200))`,outlineOffset:`1px`}});var D={tag:`a`,foregroundColor:E,cursor:`pointer`,interactive:!0},Link=class extends f{constructor(e,t){super(e,t,D),s.addListener(this,`keydown`,this.handleKeyDown),this.applyListeners(t?.listeners)}applyOptions(e){return super.applyOptions(e),this.setInteractive(e.interactive??this.isInteractive()),this}isInteractive(){return this._options.interactive??this._defaultOptions.interactive??!0}setInteractive(e){return this._options.interactive=e,e?this.getAria().setRole(`link`).setTabIndex(0):this.getAria().clearRole().setTabIndex(null),this}on(e,t){return s.addListener(this,`click`,t),this}off(e,t){return s.removeListener(this,`click`,t),this}click(){return s.fireEvent(this,`click`),this}dispose(){s.removeListener(this,`keydown`,this.handleKeyDown),super.dispose()}handleKeyDown(e){this.isInteractive()&&e.key===`Enter`&&(e.preventDefault(),this.click())}},O=i(Link);new r({scope:`selector`,name:`.TextField:focus, .TextArea:focus, .PasswordField:focus`,styles:{outline:`none`,boxShadow:`inset 0 0 0 2px var(--ts-ui-indicator-focus, rgb(30, 100, 200))`}});var k={tag:`input`,backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`},TextInput=class extends p{constructor(e,t){super(e,{...k,...t??{}}),this.setElementCSSRules({fontFamily:`var(--ts-ui-font-family, sans-serif)`,fontSize:`var(--ts-ui-font-size, 14px)`,lineHeight:`calc(1em + var(--ts-ui-line-padding, 2px))`}),s.addListener(this,`input`,this.onInput)}onInput(){let e=this.getElement();this.setText(e?n.source.getValue(e):``),this.notifyChange(this.getValue())}applyOptions(e){return super.applyOptions(e),e.text!==void 0&&this.setText(e.text),e.textAlign!==void 0&&this.setTextAlign(e.textAlign),e.placeholder!==void 0&&this.setPlaceholder(e.placeholder),e.readOnly!==void 0&&this.setReadOnly(e.readOnly),e.enabled!==void 0&&this.setEnabled(e.enabled),e.maxLength!==void 0&&this.setMaxLength(e.maxLength),e.inputMode!==void 0&&this.setInputMode(e.inputMode),e.autoComplete!==void 0&&this.setAutoComplete(e.autoComplete),this}on(e,t){return e===`action`?(s.addListener(this,`input`,t),this):e===`keydown`?(s.addListener(this,`keydown`,t),this):super.on(e,t)}off(e,t){return e===`action`?(s.removeListener(this,`input`,t),this):e===`keydown`?(s.removeListener(this,`keydown`,t),this):super.off(e,t)}setType(e){return this._options.type=e,this.setElementAttribute(`type`,e),this}setName(e){return super.setName(e),e==null?this.removeElementAttribute(`name`):this.setElementAttribute(`name`,e),this}clearName(){return this._options.name===void 0?this:(this._options.name=void 0,this.removeElementAttribute(`name`),this)}getInputMode(){return this._options.inputMode??null}setInputMode(e){return this._options.inputMode===e?this:(this._options.inputMode=e,this.setElementAttribute(`inputmode`,e),this)}clearInputMode(){return this._options.inputMode===void 0?this:(this._options.inputMode=void 0,this.removeElementAttribute(`inputmode`),this)}getAutoComplete(){return this._options.autoComplete??null}setAutoComplete(e){return this._options.autoComplete===e?this:(this._options.autoComplete=e,this.setElementAttribute(`autocomplete`,e),this)}clearAutoComplete(){return this._options.autoComplete===void 0?this:(this._options.autoComplete=void 0,this.removeElementAttribute(`autocomplete`),this)}getBaseline(){return this.wrapInnerBaseline(e.measureTextBaseline())}getTextAlign(){return this._options.textAlign??null}setTextAlign(e){return this._options.textAlign=e,this.setElementCSSRule(`textAlign`,e),this}clearTextAlign(){return this.setTextAlign(null)}getText(){return this._options.text??``}setText(e){this._options.text=e||``;let t=this.getElement();return t&&n.sink.setValue(t,this._options.text),this}getValue(){return this.getText()}setValue(e){return this.setText(e)}getPlaceholder(){return this._options.placeholder??null}setPlaceholder(e){return this._options.placeholder=e,this.setElementAttribute(`placeholder`,e),this}clearPlaceholder(){return this._options.placeholder===void 0?this:(this._options.placeholder=void 0,this.removeElementAttribute(`placeholder`),this)}getMaxLength(){return this._options.maxLength??null}setMaxLength(e){return this._options.maxLength=e,this.setElementAttribute(`maxlength`,String(e)),this}clearMaxLength(){return this._options.maxLength===void 0?this:(this._options.maxLength=void 0,this.removeElementAttribute(`maxlength`),this)}select(e,t){let r=this.getElement();if(!r)return this;(!e||e<0)&&(e=0);let i=this._options.text??``;return(!t||t>i.length)&&(t=i.length+1),n.sink.setSelectionRange(r,e,t),this}applyEnabled(e){this.setDisabledAttribute(!e)}applyReadOnly(e){e?this.setElementAttribute(`readonly`,``):this.removeElementAttribute(`readonly`)}getElement(e=!1){return super.getElement(e)}init(e){super.init(e);let t=e||this.getElement();return this._options.type!==void 0&&n.sink.apply(t,{setAttr:{type:this._options.type}}),this._options.name!=null&&n.sink.apply(t,{setAttr:{name:this._options.name}}),this._options.placeholder!==void 0&&n.sink.apply(t,{setAttr:{placeholder:this._options.placeholder}}),this._options.readOnly&&n.sink.apply(t,{setAttr:{readonly:``}}),this._options.maxLength!==void 0&&n.sink.apply(t,{setAttr:{maxlength:String(this._options.maxLength)}}),this._options.inputMode!==void 0&&n.sink.apply(t,{setAttr:{inputmode:this._options.inputMode}}),this._options.autoComplete!==void 0&&n.sink.apply(t,{setAttr:{autocomplete:this._options.autoComplete}}),this}render(){let e=super.render();return n.sink.setValue(e,this._options.text??``),e}},A=i(TextInput),j={cursor:`text`,border:`none`,outline:`none`},PickerInput=class extends A{constructor(){super(void 0,j)}},M=i(PickerInput),PickerButton=class extends v{constructor(){super({chromeless:!0,insets:new t(0,4,0,4)})}},N=i(PickerButton),P={content:`''`,position:`absolute`,inset:`0`,border:`2px solid var(--ts-ui-indicator-focus, rgb(30, 100, 200))`,borderRadius:`inherit`,boxSizing:`border-box`,pointerEvents:`none`,zIndex:`1`};function registerFocusWithinRing(e){new r({scope:`selector`,name:e.split(`,`).map(e=>e.trim()+`:focus-within::after`).join(`, `),styles:P})}registerFocusWithinRing(`.DateField, .TimeField, .DateTimeField`);var F=24,I={cursor:`text`,padding:new t(3,3,3,3),backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`,foregroundColor:`var(--ts-ui-text-color, black)`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`},AbstractPickerField=class extends p{_input;_button;_dropdown=null;_value=null;_invalid=!1;_showSeconds=!1;constructor(e){super(e,I),this._input=new M,this._input.setType(`text`),this._input.setInputMode(`none`),this._input.setAutoComplete(`off`),this._input.setPadding(new t(0,3,0,3)),this._button=new N,this.addComponent(this._input),this.addComponent(this._button),this.updateHeight(),this.subscribeTheme(()=>this.updateHeight()),s.addListener(this._input,`input`,()=>this.onInput()),s.addListener(this._input,`blur`,()=>this.onBlur()),s.addListener(this._input,`keydown`,e=>this.onKeyDown(e)),this._button.on(`action`,()=>this.onButtonClick()),this._button.addPointerDownListener(e=>this.onButtonPointerDown(e)),this._options.enabled!==void 0&&this.applyEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.applyReadOnly(this._options.readOnly)}getDefaultBorder(){return I.border}applyOptions(e){return super.applyOptions(e),e.dropdownAnimated!==void 0&&this.setDropdownAnimated(e.dropdownAnimated),this}doLayout(){super.doLayout();let e=this.getWidth(),t=this.getHeight();return this._input.setX(0),this._input.setY(0),this._input.setWidth(Math.max(0,e-F)),this._input.setHeight(t),this._button.setX(e-F),this._button.setY(0),this._button.setWidth(F),this._button.setHeight(t),this._button.doLayout(),this}updateHeight(){let t=e.singleLineBoxHeight(this.getInsets(),this.getPadding(),this.getBorderSize());this.setPreferredSize(this.getPreferredWidth(),t),this.setMaxSize(2**53-1,t),this.setMinSize(0,t)}setValue(e){return this._value=e,this._input?.setText(e?this.formatValue(e):``),this}getValue(){return this._value}getBaseline(){return this.wrapInnerBaseline(this._input.getBaseline())}setDropdownAnimated(e){return this._options.dropdownAnimated=e,this._dropdown&&this._dropdown.setAnimated(e),this}isDropdownAnimated(){return this._options.dropdownAnimated??!0}applyEnabled(e){this._input.setEnabled(e)}applyReadOnly(e){this._input.setReadOnly(e)}onButtonClick(){this._dropdown?.isOpen()?this.closeDropdown():(this._input.focus(),this.openDropdown())}onButtonPointerDown(e){e.preventDefault()}onInput(){let e=this._input.getText();if(!e){this._value=null,this.setInvalid(!1),this.notifyChange(null);return}let t=this.parseRaw(e);t===null?this.setInvalid(!0):(this._value=t,this.setInvalid(!1),this.notifyChange(t))}onBlur(){this._invalid&&(this._input.setText(``),this._value=null,this.setInvalid(!1))}setInvalid(e){this._invalid!==e&&(this._invalid=e,e?this.setBorder({border:`1px solid var(--ts-ui-validation-error-border)`}):this.setBorder(this.getDefaultBorder()))}onKeyDown(e){if(this._dropdown&&this._dropdown.isOpen()&&this._dropdown.handleKey(e)){e.preventDefault();return}e.key===`ArrowDown`?(e.preventDefault(),this.openDropdown()):e.key===`Escape`&&this.closeDropdown()}ensureDropdown(){if(!this._dropdown){this._dropdown=this.createDropdown();let e=this._options.dropdownAnimated;e!==void 0&&this._dropdown.setAnimated(e)}return this._dropdown}openDropdown(){let e=this.ensureDropdown();e.isOpen()||(e.setCloseHandler(()=>this.closeDropdown()),e.setAnchorElement(this.getElement(!0)??null),e.showAt(this._input.getElement(!0),this._value))}closeDropdown(){this._dropdown&&this._dropdown.isOpen()&&this._dropdown.hideAnimated()}},L={cursor:`text`,padding:new t(3,3,3,3),backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`,foregroundColor:`var(--ts-ui-text-color, black)`},TextField=class extends A{constructor(e){super(e,L),this.updateHeight(),this.subscribeTheme(()=>this.updateHeight()),this.setType(`text`)}updateHeight(){let t=e.singleLineBoxHeight(this.getInsets(),this.getPadding(),this.getBorderSize());this.setPreferredSize(200,t),this.setMaxSize(2**53-1,t),this.setMinSize(0,t)}},R=i(TextField);new r({scope:`class`,name:`PickerColumnHeader`,styles:{opacity:`0.7`}}),new r({scope:`class`,name:`PickerCell`,styles:{borderRadius:`3px`}}),new r({scope:`selector`,name:`.PickerCell:hover`,styles:{backgroundColor:`var(--ts-ui-autocomplete-item-hover-bg, rgba(30, 100, 200, 0.08))`}}),new r({scope:`selector`,name:`.PickerCell.disabled`,styles:{pointerEvents:`none`,color:`var(--ts-ui-autocomplete-item-disabled-color, rgb(170, 170, 170))`,backgroundColor:`var(--ts-ui-picker-cell-disabled-bg, transparent)`}});var PickerColumnHeader=class extends f{constructor(e){super(e,{textAlign:`center`,fontSize:12})}},PickerCellList=class extends l{constructor(){super({layoutManager:new _({spacing:0,stretching:!0}),autoScroll:`y`,insets:new t(0,0,0,0)})}getMinSize(){let e=super.getMinSize();return e&&{width:e.width,height:0}}},PickerCell=class extends f{_selected=!1;_disabled=!1;_onClick;constructor(e,t){super(e,{textAlign:`center`,preferredSize:{width:0,height:22}}),this._onClick=t,this.setLineHeight(22),this.setCursor(`pointer`),s.addListener(this,`pointerdown`,this.handlePointerDown),s.addListener(this,`click`,this.handleClick)}handlePointerDown(e){e.preventDefault()}handleClick(){this._disabled||this._onClick()}setSelected(e){return this._selected===e?this:(this._selected=e,e?(this.setBackgroundColor(`var(--ts-ui-autocomplete-item-highlight-bg, rgba(30, 100, 200, 0.18))`),this.setFontWeight(`bold`)):(this.clearBackgroundColor(),this.setFontWeight(`normal`)),this)}isSelected(){return this._selected}setDisabled(e){if(this._disabled===e)return this;this._disabled=e,this.setCursor(e?`default`:`pointer`);let t=this.getElement();return t&&n.sink.apply(t,{toggleClass:{disabled:e}}),this}isDisabled(){return this._disabled}render(){let e=super.render();return this._disabled&&n.sink.apply(e,{addClass:[`disabled`]}),e}},PickerColumn=class extends o{_cellList;constructor(e){if(super(),this.setLayoutManager(new _({spacing:2,stretching:!0})),e!==null){let t=new PickerColumnHeader(e);t.setPreferredSize(0,18),this.addComponent(t)}this._cellList=new PickerCellList;let t=new g;t.weight=1,this.addComponent(this._cellList,t)}addCell(e){return this._cellList.addComponent(e),this}clearCells(){return this._cellList.removeAllComponents(),this}getCellList(){return this._cellList}scrollSelectedIntoView(){let t=this._cellList.getElement();if(!t)return this;let r=this._cellList.getComponents(),i=null;for(let e of r)if(e instanceof PickerCell&&e.isSelected()){i=e;break}if(!i)return this;let a=i.getElement();if(!a)return this;let o=n.source.getOffsetSize(a),s=n.source.getScrollMetrics(t),c=o.offsetTop,l=o.offsetHeight,u=s.clientHeight,d=c-(u-l)/2,f=s.scrollHeight-u,p=e.clamp(d,0,f);return n.sink.apply(t,{scrollTop:p}),this}setSelectedValue(e){for(let t of this._cellList.getComponents())t instanceof PickerCell&&t.setSelected(t.getText().valueOf()===e);return this}};c.register(b),c.register(x),new r({scope:`class`,name:`PickerDay`,styles:{borderRadius:`3px`}}),new r({scope:`selector`,name:`.PickerDay:hover`,styles:{backgroundColor:`var(--ts-ui-autocomplete-item-hover-bg, rgba(30, 100, 200, 0.08))`}}),new r({scope:`selector`,name:`.PickerDay.disabled`,styles:{pointerEvents:`none`,color:`var(--ts-ui-autocomplete-item-disabled-color, rgb(170, 170, 170))`,backgroundColor:`var(--ts-ui-picker-cell-disabled-bg, transparent)`}}),new r({scope:`class`,name:`PickerNavButton`,styles:{borderRadius:`3px`,color:`var(--ts-ui-picker-nav-fg, var(--ts-ui-text-color))`}}),new r({scope:`selector`,name:`.PickerNavButton:hover`,styles:{backgroundColor:`var(--ts-ui-picker-nav-hover-bg, rgba(30, 100, 200, 0.08))`}});var PickerDayHeader=class extends f{constructor(e){super(e,{textAlign:`center`,fontSize:12,preferredSize:{width:0,height:20}}),this.setLineHeight(20)}},PickerBlankCell=class extends o{constructor(){super({preferredSize:{width:0,height:24}})}},PickerNavButton=class extends o{constructor(e,t){super({preferredSize:{width:24,height:24}}),this.setLayoutManager(new d),this.setCursor(`pointer`),this.getAria().setRole(`button`);let n=new c(e);n.setPointerEvents(`none`),n.setPreferredSize(12,12),this.addComponent(n),s.addListener(this,`pointerdown`,e=>e.preventDefault()),s.addListener(this,`click`,()=>t())}render(){let e=super.render();return n.sink.apply(e,{addClass:[`PickerNavButton`]}),e}},PickerMonthLabel=class extends f{constructor(e){super(``,{textAlign:`center`,fontWeight:`bold`}),this.setLineHeight(24),this.setCursor(`pointer`),this.getAria().setRole(`button`),this.getAria().setExpanded(!1),this.getAria().setTabIndex(0),s.addListener(this,`pointerdown`,e=>e.preventDefault()),s.addListener(this,`click`,()=>e())}render(){let e=super.render();return n.sink.apply(e,{addClass:[`PickerNavButton`]}),e}},PickerDay=class extends f{_date;_selected=!1;_disabled=!1;_onClick;constructor(e,t){super(String(e.getDate()),{textAlign:`center`,preferredSize:{width:0,height:24}}),this._date=e,this._onClick=t,this.setLineHeight(24),this.setCursor(`pointer`),s.addListener(this,`pointerdown`,e=>this.onPointerDown(e)),s.addListener(this,`click`,()=>this.onClick())}getDate(){return this._date}onPointerDown(e){e.preventDefault()}onClick(){this._disabled||this._onClick(this._date)}setSelected(e){return this._selected===e?this:(this._selected=e,e?(this.setBackgroundColor(`var(--ts-ui-autocomplete-item-highlight-bg, rgba(30, 100, 200, 0.18))`),this.setFontWeight(`bold`)):(this.clearBackgroundColor(),this.setFontWeight(`normal`)),this)}isSelected(){return this._selected}setDisabled(e){if(this._disabled===e)return this;this._disabled=e,this.setCursor(e?`default`:`pointer`);let t=this.getElement();return t&&n.sink.apply(t,{toggleClass:{disabled:e}}),this}isDisabled(){return this._disabled}render(){let e=super.render();return n.sink.apply(e,{addClass:[`PickerDay`]}),this._disabled&&n.sink.apply(e,{addClass:[`disabled`]}),e}};function dayStart(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),0,0,0,0)}function dayEnd(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),23,59,59,999)}var AbstractCalendarDropdown=class extends u{_onSelect;_value=null;_monthAnchor=new Date;_yearScrollOpen=!1;_root;_headerRow;_prevButton;_nextButton;_monthLabel;_weekdayRow;_dayGrid;_yearColumn=null;_highlightedDayIdx=-1;_highlightedYear=-1;_yearTypeBuffer=``;_yearTypeTimer=null;constructor(e,n,r){super(n,{zIndex:10050,layoutManager:new d,backgroundColor:`var(--ts-ui-autocomplete-bg, rgb(255, 255, 255))`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`,shadow:`var(--ts-ui-autocomplete-shadow, 2px 4px 8px rgba(0,0,0,0.15))`,insets:new t(6,6,6,6),...r??{}}),this._onSelect=e,this.getAria().setRole(`group`),this.setContain(`layout`),this._root=new o,this._root.setLayoutManager(new _({spacing:4,stretching:!0})),this._headerRow=new o({preferredSize:{width:0,height:24}}),this._headerRow.setLayoutManager(new h({spacing:2,stretching:!0})),this._prevButton=new PickerNavButton(`chevron-left`,()=>this.prevMonth()),this._nextButton=new PickerNavButton(`chevron-right`,()=>this.nextMonth()),this._monthLabel=new PickerMonthLabel(()=>this.toggleYearScroller());let i=new g;i.weight=1,this._headerRow.addComponent(this._prevButton),this._headerRow.addComponent(this._monthLabel,i),this._headerRow.addComponent(this._nextButton),this._root.addComponent(this._headerRow),this._weekdayRow=new o({preferredSize:{width:0,height:20}}),this._weekdayRow.setLayoutManager(new y({columns:7,spacing:2}));for(let e of[`Sun`,`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`])this._weekdayRow.addComponent(new PickerDayHeader(e));this._root.addComponent(this._weekdayRow),this._dayGrid=new o({preferredSize:{width:0,height:154}}),this._dayGrid.setLayoutManager(new y({columns:7,spacing:2})),this._root.addComponent(this._dayGrid),this.addComponent(this._root),this.buildExtraRootChildren(),s.addSubtreeListener(this,`pointerdown`,e=>this.onPointerDown(e))}applyOptions(e){return super.applyOptions(e),e.minDate!==void 0&&(this._options.minDate=e.minDate),e.maxDate!==void 0&&(this._options.maxDate=e.maxDate),this}onPointerDown(e){n.source.isNode(e.target)&&n.source.getTagName(n.source.intern(e.target))===`INPUT`||e.preventDefault()}showAt(e,t){this._value=t?new Date(t.getTime()):null;let r=this._value??new Date;this._monthAnchor=new Date(r.getFullYear(),r.getMonth(),1),this._highlightedDayIdx=-1,this._highlightedYear=-1,this.resetYearTypeBuffer(),this._yearScrollOpen&&this.closeYearScroller(),this.pauseLayout(),this.rebuild(),this.resumeLayout();let i=this.computePanelHeight();return this.setWidth(this.getPanelWidth()),this.setHeight(i),this.doLayout(),this.placeAnchored(n.source.getElementRect(e)),this.showAnimated(),this}hideAnimated(){return super.hideAnimated(),this.resetYearTypeBuffer(),this}computePanelHeight(){let e=this.getPerimeterSize(),t=206+this.getExtraInnerHeight();return e.top+e.bottom+t}rebuild(){this.buildDayGrid(),this.rebuildExtraRowsAfterValueChange()}buildDayGrid(){this._dayGrid.removeAllComponents(),this._highlightedDayIdx=-1;let e=this._monthAnchor.getFullYear(),t=this._monthAnchor.getMonth();this._monthLabel.setText(this._monthAnchor.toLocaleDateString(void 0,{month:`long`,year:`numeric`}));let n=new Date(e,t,1).getDay(),r=new Date(e,t+1,0).getDate();for(let e=0;e<n;e++)this._dayGrid.addComponent(new PickerBlankCell);for(let n=1;n<=r;n++){let r=new Date(e,t,n),i=new PickerDay(r,e=>this.onDateSelected(e));this.isDateInRange(r)||i.setDisabled(!0),this.isValueOnDay(r)&&i.setSelected(!0),this._dayGrid.addComponent(i)}let i=42-n-r;for(let e=0;e<i;e++)this._dayGrid.addComponent(new PickerBlankCell)}isValueOnDay(e){return this._value?this._value.getFullYear()===e.getFullYear()&&this._value.getMonth()===e.getMonth()&&this._value.getDate()===e.getDate():!1}isDateInRange(e){let t=this._options.minDate??null,n=this._options.maxDate??null;return!(t&&e.getTime()<dayStart(t).getTime()||n&&e.getTime()>dayEnd(n).getTime())}hasAnyInRange(e){let t=e.getFullYear(),n=e.getMonth(),r=new Date(t,n+1,0).getDate(),i=new Date(t,n,1),a=new Date(t,n,r),o=this._options.minDate??null,s=this._options.maxDate??null;return!(o&&dayEnd(a).getTime()<dayStart(o).getTime()||s&&dayStart(i).getTime()>dayEnd(s).getTime())}onDateSelected(e){this.applyDateSelection(e),this._monthAnchor=new Date(e.getFullYear(),e.getMonth(),1),this.notifyValueChanged(),this.rebuild(),this.doLayout()}notifyValueChanged(){this._value&&this._onSelect(new Date(this._value.getTime()))}prevMonth(){let e=new Date(this._monthAnchor.getFullYear(),this._monthAnchor.getMonth()-1,1);this.hasAnyInRange(e)&&(this._monthAnchor=e,this._yearScrollOpen?(this.updateMonthLabel(),this.refreshYearSelection()):(this.buildDayGrid(),this.doLayout()))}nextMonth(){let e=new Date(this._monthAnchor.getFullYear(),this._monthAnchor.getMonth()+1,1);this.hasAnyInRange(e)&&(this._monthAnchor=e,this._yearScrollOpen?(this.updateMonthLabel(),this.refreshYearSelection()):(this.buildDayGrid(),this.doLayout()))}updateMonthLabel(){this._monthLabel.setText(this._monthAnchor.toLocaleDateString(void 0,{month:`long`,year:`numeric`}))}toggleYearScroller(){this._yearScrollOpen?this.closeYearScroller():this.openYearScroller()}openYearScroller(){this._yearColumn||(this._yearColumn=new PickerColumn(null),this._yearColumn.setPreferredSize(0,154),this._yearColumn.getAria().setRole(`listbox`)),this.buildYearScroller(),this._root.removeComponent(this._dayGrid),this._root.insertComponent(this._yearColumn,2),this._yearScrollOpen=!0,this._monthLabel.getAria().setExpanded(!0),this.doLayout(),this._yearColumn.scrollSelectedIntoView()}closeYearScroller(){this._yearColumn&&this._root.removeComponent(this._yearColumn),this._root.insertComponent(this._dayGrid,2),this._yearScrollOpen=!1,this._monthLabel.getAria().setExpanded(!1),this.resetYearTypeBuffer(),this.buildDayGrid(),this.doLayout()}buildYearScroller(){if(!this._yearColumn)return;this._yearColumn.clearCells(),this._highlightedYear=-1;let e=new Date,t=this._options.minDate?.getFullYear()??e.getFullYear()-120,n=this._options.maxDate?.getFullYear()??e.getFullYear()+50,r=this._monthAnchor.getFullYear();for(let e=t;e<=n;e++){let t=e,n=new PickerCell(String(t),()=>this.onYearSelected(t));t===r&&n.setSelected(!0),this._yearColumn.addCell(n)}}refreshYearSelection(){if(!this._yearColumn)return;let e=this._monthAnchor.getFullYear();for(let t of this._yearColumn.getCellList().getComponents())t instanceof PickerCell&&t.setSelected(t.getText().valueOf()===String(e))}onYearSelected(e){this._monthAnchor=new Date(e,this._monthAnchor.getMonth(),1),this.applyYearSelection(e),this.closeYearScroller()}resetYearTypeBuffer(){this._yearTypeBuffer=``,this._yearTypeTimer!==null&&(clearTimeout(this._yearTypeTimer),this._yearTypeTimer=null)}handleKey(e){return this.isOpen()?this._yearScrollOpen?this.handleKeyInYearScroller(e):this.handleKeyInDayGrid(e):!1}handleKeyInDayGrid(e){switch(e.key){case`ArrowLeft`:return this.moveHighlightedDay(-1);case`ArrowRight`:return this.moveHighlightedDay(1);case`ArrowUp`:return this.moveHighlightedDay(-7);case`ArrowDown`:return this.moveHighlightedDay(7);case`PageUp`:return this.prevMonth(),!0;case`PageDown`:return this.nextMonth(),!0;case`Home`:return this.highlightFirstDayOfMonth();case`End`:return this.highlightLastDayOfMonth();case`Enter`:case` `:return this.commitHighlightedDay();default:return!1}}getDayGridChildren(){return this._dayGrid.getComponents()}moveHighlightedDay(e){let t=this.getDayGridChildren(),n=[];for(let e=0;e<t.length;e++){let r=t[e];r instanceof PickerDay&&!r.isDisabled()&&n.push({idx:e,cell:r})}if(n.length===0)return!0;let r=-1;for(let e=0;e<n.length;e++)if(n[e].idx===this._highlightedDayIdx){r=e;break}if(r<0){r=0;for(let e=0;e<n.length;e++)if(n[e].cell.isSelected()){r=e;break}}let i=Math.max(0,Math.min(n.length-1,r+e));return this.setHighlightedDay(n[i].idx),!0}setHighlightedDay(e){let t=this.getDayGridChildren();if(this._highlightedDayIdx>=0&&this._highlightedDayIdx<t.length){let e=t[this._highlightedDayIdx];e instanceof PickerDay&&!this.matchesSelection(e)&&e.setSelected(!1)}if(e<0||e>=t.length){this._highlightedDayIdx=-1;return}let n=t[e];n instanceof PickerDay&&(n.setSelected(!0),this._highlightedDayIdx=e)}matchesSelection(e){return this.isValueOnDay(e.getDate())}highlightFirstDayOfMonth(){let e=this.getDayGridChildren();for(let t=0;t<e.length;t++){let n=e[t];if(n instanceof PickerDay&&!n.isDisabled())return this.setHighlightedDay(t),!0}return!0}highlightLastDayOfMonth(){let e=this.getDayGridChildren();for(let t=e.length-1;t>=0;t--){let n=e[t];if(n instanceof PickerDay&&!n.isDisabled())return this.setHighlightedDay(t),!0}return!0}commitHighlightedDay(){if(this._highlightedDayIdx<0)return!1;let e=this.getDayGridChildren()[this._highlightedDayIdx];return e instanceof PickerDay&&!e.isDisabled()?(this.onDateSelected(e.getDate()),!0):!1}handleKeyInYearScroller(e){if(/^[0-9]$/.test(e.key))return this.appendYearDigit(e.key);switch(e.key){case`ArrowLeft`:case`ArrowUp`:return this.moveHighlightedYear(-1);case`ArrowRight`:case`ArrowDown`:return this.moveHighlightedYear(1);case`PageUp`:return this.moveHighlightedYear(-10);case`PageDown`:return this.moveHighlightedYear(10);case`Home`:return this.highlightFirstYear();case`End`:return this.highlightLastYear();case`Enter`:case` `:return this.commitHighlightedYear();case`Escape`:return this.closeYearScroller(),!0;default:return!1}}getYearCells(){if(!this._yearColumn)return[];let e=[];for(let t of this._yearColumn.getCellList().getComponents())t instanceof PickerCell&&e.push(t);return e}moveHighlightedYear(e){let t=this.getYearCells();if(t.length===0)return!0;let n=this.findHighlightedYearPos(t),r=Math.max(0,Math.min(t.length-1,n+e));return this.applyYearHighlight(t,r),!0}findHighlightedYearPos(e){if(this._highlightedYear<0){for(let t=0;t<e.length;t++)if(e[t].isSelected())return t;return 0}for(let t=0;t<e.length;t++)if(e[t].getText().valueOf()===String(this._highlightedYear))return t;return 0}applyYearHighlight(e,t){let n=this._monthAnchor.getFullYear();for(let t of e)t.setSelected(t.getText().valueOf()===String(n));e[t].setSelected(!0),this._highlightedYear=parseInt(e[t].getText().valueOf(),10),this._yearColumn&&this._yearColumn.scrollSelectedIntoView()}highlightFirstYear(){let e=this.getYearCells();return e.length===0||this.applyYearHighlight(e,0),!0}highlightLastYear(){let e=this.getYearCells();return e.length===0||this.applyYearHighlight(e,e.length-1),!0}commitHighlightedYear(){let e=this._highlightedYear>=0?this._highlightedYear:this._monthAnchor.getFullYear();return this.onYearSelected(e),!0}appendYearDigit(e){this._yearTypeBuffer.length>=4&&(this._yearTypeBuffer=``),this._yearTypeBuffer+=e,this._yearTypeTimer!==null&&clearTimeout(this._yearTypeTimer),this._yearTypeTimer=setTimeout(()=>this.resetYearTypeBuffer(),800);let t=this.getYearCells(),n=this._yearTypeBuffer,r=-1;for(let e=0;e<t.length;e++)if(t[e].getText().valueOf().startsWith(n)){r=e;break}return r>=0&&this.applyYearHighlight(t,r),n.length===4&&this.resetYearTypeBuffer(),!0}getExtraInnerHeight(){return 0}buildExtraRootChildren(){}rebuildExtraRowsAfterValueChange(){}applyDateSelection(e){this._value=new Date(e.getFullYear(),e.getMonth(),e.getDate(),0,0,0,0)}applyYearSelection(e){}},z=240,DatePickerDropdown=class extends AbstractCalendarDropdown{constructor(e,t){super(e,t)}getPanelWidth(){return z}onDateSelected(e){this.applyDateSelection(e),this._monthAnchor=new Date(e.getFullYear(),e.getMonth(),1),this.notifyValueChanged()}},B=i(DatePickerDropdown),TimeColumns=class extends o{_onChange;_showSeconds;_hours=-1;_minutes=-1;_seconds=-1;_hourColumn;_minuteColumn;_secondColumn;constructor(e,t){super({preferredSize:{width:0,height:176}}),this._onChange=e,this._showSeconds=t?.showSeconds??!1,this.setLayoutManager(new h({spacing:4,stretching:!0}));let n=new g;n.weight=1,this._hourColumn=this.buildColumn(`Hour`,24,1,e=>this.onUnitSelected(`hours`,e)),this._minuteColumn=this.buildColumn(`Min`,60,5,e=>this.onUnitSelected(`minutes`,e)),this.addComponent(this._hourColumn,n),this.addComponent(this._minuteColumn,n),this._showSeconds?(this._secondColumn=this.buildColumn(`Sec`,60,5,e=>this.onUnitSelected(`seconds`,e)),this.addComponent(this._secondColumn,n)):this._secondColumn=null}setTime(e){return e?(this._hours=e.getHours(),this._minutes=e.getMinutes(),this._seconds=this._showSeconds?e.getSeconds():0):(this._hours=-1,this._minutes=-1,this._seconds=-1),this.refreshColumns(),this}buildColumn(e,t,n,r){let i=new PickerColumn(e);for(let e=0;e<t;e+=n){let t=e,n=new PickerCell(String(t).padStart(2,`0`),()=>r(t));i.addCell(n)}return i}onUnitSelected(e,t){e===`hours`?this._hours=t:e===`minutes`?this._minutes=t:this._seconds=t,this._hours<0&&(this._hours=0),this._minutes<0&&(this._minutes=0),this._seconds<0&&(this._seconds=0),this.refreshColumns(),this._onChange(this._hours,this._minutes,this._showSeconds?this._seconds:0)}refreshColumns(){this._hourColumn.setSelectedValue(this.cellLabel(this._hours)),this._minuteColumn.setSelectedValue(this.cellLabel(this._minutes)),this._secondColumn?.setSelectedValue(this.cellLabel(this._seconds))}cellLabel(e){return e<0?null:String(e).padStart(2,`0`)}},V=140,H=200,U=220,TimePickerDropdown=class extends u{_showSeconds;_timeColumns;constructor(e,n){super(n,{zIndex:10050,layoutManager:new d,backgroundColor:`var(--ts-ui-autocomplete-bg, rgb(255, 255, 255))`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`,shadow:`var(--ts-ui-autocomplete-shadow, 2px 4px 8px rgba(0,0,0,0.15))`,insets:new t(4,4,4,4)}),this._showSeconds=n?.showSeconds??!1,this.getAria().setRole(`group`),this.setContain(`layout`),this._timeColumns=new TimeColumns(e,{showSeconds:this._showSeconds}),this.addComponent(this._timeColumns),s.addSubtreeListener(this,`pointerdown`,e=>this.onPointerDown(e))}onPointerDown(e){e.preventDefault()}showAt(e,t){return this._timeColumns.setTime(t),this.setWidth(this._showSeconds?H:V),this.setHeight(U),this.placeAnchored(n.source.getElementRect(e)),this.showAnimated(),this.doLayout(),this}},W=i(TimePickerDropdown);c.register(S);var TimeField=class extends AbstractPickerField{constructor(e){super(e),this._button.setGlyph(`clock`),this._options.showSeconds!==void 0&&(this._showSeconds=this._options.showSeconds),this._options.value!==void 0&&this.setValue(this._options.value)}applyOptions(e){return super.applyOptions(e),e.showSeconds!==void 0&&(this._options.showSeconds=e.showSeconds),e.value!==void 0&&(this._options.value=e.value),this}formatValue(e){let t=String(e.getHours()).padStart(2,`0`),n=String(e.getMinutes()).padStart(2,`0`);return this._showSeconds?`${t}:${n}:${String(e.getSeconds()).padStart(2,`0`)}`:`${t}:${n}`}parseRaw(e){let[t,n,r]=e.split(`:`),i=Number(t),a=Number(n),o=r===void 0?0:Number(r);if(!(n!==void 0&&n!==``)||!(!isNaN(i)&&i>=0&&i<24)||!(!isNaN(a)&&a>=0&&a<60)||!(!isNaN(o)&&o>=0&&o<60))return null;let s=new Date;return s.setHours(i,a,o,0),s}createDropdown(){return new W((e,t,n)=>this.onTimeSelected(e,t,n),{showSeconds:this._showSeconds})}onTimeSelected(e,t,n){let r=new Date;r.setHours(e,t,n,0),this.onDropdownSelected(r)}onDropdownSelected(e){this.setValue(e),s.fireEvent(this._input,`input`)}getPreferredWidth(){return 140}},G=i(TimeField),K=240,DateTimePickerDropdown=class extends AbstractCalendarDropdown{constructor(e,t){super(e,t)}applyOptions(e){return super.applyOptions(e),e.showSeconds!==void 0&&(this._options.showSeconds=e.showSeconds),this}buildExtraRootChildren(){this._timeField=new G({showSeconds:this.isShowingSeconds()}),this._timeField.on(`change`,e=>this.onTimeFieldChange(e)),this._root.addComponent(this._timeField)}rebuildExtraRowsAfterValueChange(){this._timeField.setValue(this._value)}onTimeFieldChange(e){if(!e)return;let t=this._value??this.todayMidnight();t.setHours(e.getHours(),e.getMinutes(),this.isShowingSeconds()?e.getSeconds():0,0),this._value=t,this.notifyValueChanged()}applyDateSelection(e){this._value?this._value.setFullYear(e.getFullYear(),e.getMonth(),e.getDate()):this._value=new Date(e.getFullYear(),e.getMonth(),e.getDate(),0,0,0,0)}applyYearSelection(e){this._value&&(this._value.setFullYear(e),this.notifyValueChanged())}getPanelWidth(){return K}getExtraInnerHeight(){return 4+(this._timeField.getPreferredSize()?.height??0)}isShowingSeconds(){return this._options.showSeconds??!1}todayMidnight(){let e=new Date;return new Date(e.getFullYear(),e.getMonth(),e.getDate(),0,0,0,0)}},q=i(DateTimePickerDropdown);c.register(C);var Checkbox=class extends m{_box;_check;_dash;constructor(e){super({...e??{}}),this.setLayoutManager(new h),this._box=new o,this._box.setPreferredSize(16,16),this._box.setMinSize(16,16),this._box.setMaxSize(16,16),this._box.setSize({width:16,height:16}),this._box.setBackgroundColor(`var(--ts-ui-checkbox-bg, var(--ts-ui-form-bg, rgb(255, 255, 255)))`),this._box.setBorder(`1px solid var(--ts-ui-form-border, rgb(160, 160, 160))`),this._box.setBorderRadius(`var(--ts-ui-checkbox-radius, 3px)`),this._box.setCursor(`pointer`),this._check=new c(`check`),this._check.setForegroundColor(`var(--ts-ui-checkbox-check-color, rgb(255, 255, 255))`),this._check.setPreferredSize(12,12),this._check.setMaxSize(12,12),this._check.setX(1),this._check.setY(1),this._check.setOpacity(0),this._check.setPointerEvents(`none`),this._dash=new o,this._dash.setBackgroundColor(`var(--ts-ui-checkbox-check-color, rgb(255, 255, 255))`),this._dash.setPreferredSize(8,2),this._dash.setMaxSize(8,2),this._dash.setSize({width:8,height:2}),this._dash.setX(3),this._dash.setY(6),this._dash.setOpacity(0),this._dash.setPointerEvents(`none`),a.isReducedMotion()||(this._check.setTransition(`opacity 120ms ease-out`),this._dash.setTransition(`opacity 120ms ease-out`),this._box.setTransition(`background-color 120ms ease-out, border-color 120ms ease-out`)),this._box.addComponent(this._check),this._box.addComponent(this._dash),super.addComponent(this._box),this.getAria().setRole(`checkbox`),this.getAria().setTabIndex(0),this.getAria().setChecked(!1),this.setOutline(`none`),s.addListener(this._box,`click`,()=>this.activateFromPointer()),this.installKeyboard(),this._options.value!==void 0&&this._options.selected===void 0&&(this._options.selected=this._options.value),this._options.selected!==void 0&&this.applySelected(this._options.selected,this._options.indeterminate??!1),this._options.indeterminate!==void 0&&this.applySelected(this._options.selected??!1,this._options.indeterminate),this._options.label!==void 0&&this.applyLabel(this._options.label),this._options.enabled!==void 0&&this.applyEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.applyReadOnly(this._options.readOnly)}applyOptions(e){return super.applyOptions(e),e.selected!==void 0&&(this._options.selected=e.selected),e.value!==void 0&&(this._options.value=e.value),e.indeterminate!==void 0&&(this._options.indeterminate=e.indeterminate),e.label!==void 0&&(this._options.label=e.label),e.enabled!==void 0&&(this._options.enabled=e.enabled),e.readOnly!==void 0&&(this._options.readOnly=e.readOnly),this}activate(){if(this.isIndeterminate()){this.setSelected(!0);return}this.setSelected(!this.isSelected())}getInteractiveSurface(){return this._box}isSelected(){return this._options.selected??!1}setSelected(e){let t=!!e;return t===this.isSelected()&&!this.isIndeterminate()?this:(this._options.selected=t,this._options.indeterminate=!1,this.applySelected(t,!1),this.notifyChange(t),this.getElement()?s.fireEvent(this,`click`):console.warn(`Checkbox '`+this.getId()+`' setSelected before mount; synthetic 'click' skipped.`),this)}getValue(){return this.isSelected()}setValue(e){return this.setSelected(e)}isIndeterminate(){return this._options.indeterminate??!1}setIndeterminate(e){let t=!!e;return t===this.isIndeterminate()?this:(this._options.indeterminate=t,this.applySelected(this.isSelected(),t),this)}setAnimated(e){let t=e&&!a.isReducedMotion();return this._check.setTransition(t?`opacity 120ms ease-out`:`none`),this._dash.setTransition(t?`opacity 120ms ease-out`:`none`),this._box.setTransition(t?`background-color 120ms ease-out, border-color 120ms ease-out`:`none`),this}on(e,t){return e===`action`?(s.addListener(this,`click`,t),this):super.on(e,t)}off(e,t){return e===`action`?(s.removeListener(this,`click`,t),this):super.off(e,t)}applySelected(e,t){t?this.getAria().setChecked(`mixed`):this.getAria().setChecked(e);let n=t?`var(--ts-ui-checkbox-bg-indeterminate, rgb(160, 160, 160))`:e?`var(--ts-ui-checkbox-bg-selected, rgb(30, 100, 200))`:`var(--ts-ui-checkbox-bg, var(--ts-ui-form-bg, rgb(255, 255, 255)))`,r=e||t?`1px solid `+(t?`var(--ts-ui-checkbox-bg-indeterminate, rgb(160, 160, 160))`:`var(--ts-ui-checkbox-bg-selected, rgb(30, 100, 200))`):`1px solid var(--ts-ui-form-border, rgb(160, 160, 160))`;this._box.setBackgroundColor(n),this._box.setBorder(r),this._check.setOpacity(e&&!t?1:0),this._dash.setOpacity(+!!t)}},J=i(Checkbox);c.register(ee);var Y={tag:`div`,backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`,foregroundColor:`var(--ts-ui-text-color, black)`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`,cursor:`pointer`,insets:new t(3,6,3,6)},X=200,Z=22,Q=16,$=200,ComboBoxDropdown=class extends u{_list;_minWidth=$;constructor(e){super(void 0,{layoutManager:new d,backgroundColor:`var(--ts-ui-autocomplete-bg, rgb(255, 255, 255))`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`,shadow:`var(--ts-ui-autocomplete-shadow, 2px 4px 8px rgba(0,0,0,0.15))`}),this.setContain(`layout`),this._list=new T,this._list.setBorder(`none`),this._list.setBorderRadius(`0`),this._list.setFocusOnRowClick(!1),this.addComponent(this._list),this._list.on(`action`,()=>e(this._list.getSelectedIndex()))}handleKey(e){return this._list.handleKey(e)}showAt(e,t,r){this.pauseLayout(),this._list.setItemsArray(t),this._list.setSelectedIndex(r,!1),this.resumeLayout();let i=this.getPerimeterSize(),a=i.top+i.bottom,o=i.left+i.right,s=t.length*Z+a,c=Math.min(s,X),l=n.source.getElementRect(e),u=this.measureWidestLabel(t)+Q+o,d=l.width,f=Math.max(l.width,this._minWidth),p=Math.min(Math.max(u,d),f,n.source.getViewportSize().width);return this.setWidth(p),this.setHeight(c),this.placeAnchored(l),this.showAnimated(),this.doLayout(),this}setMinWidth(e){return this._minWidth=e,this}getMinWidth(){return this._minWidth}getList(){return this._list}measureWidestLabel(t){let n=0;for(let r of t){let t=e.measureTextWidth(r.label);t>n&&(n=t)}return n}};new r({scope:`class`,name:`ComboBox`,styles:{userSelect:`none`,whiteSpace:`nowrap`}}),new r({scope:`class`,name:`ComboBoxLabel`,styles:{overflow:`hidden`,textOverflow:`ellipsis`}}),new r({scope:`selector`,name:`.ComboBoxDropdown .List:focus::after`,styles:{content:`none`}});var ComboBoxLabel=class extends o{_lineHeight=null;_renderer;constructor(e){super({tag:`span`}),this.setPointerEvents(`none`),this._renderer=e()}setItem(e,t){return this._renderer.update({item:e,index:t}),this}setRenderer(e){let t=this.getElement();if(t){let e=this._renderer.getElement();e&&n.source.getParentNode(e)===t&&n.sink.removeChild(t,e)}return this._renderer=e,t&&n.sink.appendChild(t,this._renderer.getElement(!0)),this}setLineHeight(e){return this._lineHeight=typeof e==`number`?e+`px`:e,this.setElementCSSRule(`lineHeight`,this._lineHeight),this}getLineHeight(){return this._lineHeight}init(e){super.init(e);let t=e||this.getElement();return t&&n.sink.appendChild(t,this._renderer.getElement(!0)),this}doLayout(){super.doLayout();let e=this.getWidth(),t=this.getHeight();return this._renderer.setAutoCommitStyle(!1),this._renderer.setX(0),this._renderer.setY(0),this._renderer.setWidth(e),this._renderer.setHeight(t),this._renderer.setAutoCommitStyle(!0),this._renderer.layoutChildren(e,t),this}},ComboBoxCaret=class extends o{_glyph=new c(`chevron-down`);_size;constructor(){super({tag:`span`}),this._size=e.lineHeightPx({linePadding:!1}),this.setMinSize(this._size,this._size),this.setMaxSize(this._size,this._size),this.setPointerEvents(`none`),this._glyph.setPreferredSize(this._size,this._size),this._glyph.setPointerEvents(`none`),this.addComponent(this._glyph)}getCaretSize(){return this._size}getGlyph(){return this._glyph}},ComboBox=class extends p{_dropdown;_label;_caret;_pendingValue=null;_boundStore=null;_onStoreRefresh;constructor(e,t){super(e,{...Y,...t??{}}),this.getAria().setRole(`combobox`),this.getAria().setExpanded(!1),this.getAria().setTabIndex(0),this._label=new ComboBoxLabel(this._options.rendererFactory??(()=>new w)),this._caret=new ComboBoxCaret,this.addComponent(this._label),this.addComponent(this._caret),this._dropdown=new ComboBoxDropdown(e=>this.onRowSelected(e)),this._options.dropdownAnimated!==void 0&&this._dropdown.setAnimated(this._options.dropdownAnimated),this._options.dropdownMinWidth!==void 0&&this._dropdown.setMinWidth(this._options.dropdownMinWidth),this._options.rendererFactory!==void 0&&this._dropdown.getList().setRendererFactory(this._options.rendererFactory),this.refreshLabel(),this.updateHeight(),this.subscribeTheme(()=>this.updateHeight()),s.addListener(this,`click`,()=>this.toggleDropdown()),s.addListener(this,`keydown`,e=>this.onKeyDown(e)),this._dropdown.setCloseHandler(()=>this.closeDropdown()),this._onStoreRefresh=()=>this.onStoreRefresh(),this._options.store!==void 0&&this._options.displayField!==void 0&&this.setStore(this._options.store,this._options.displayField,this._options.valueField,this._options.glyphField),this._options.items!==void 0&&this.setItems(this._options.items),this._options.selectedIndex!==void 0&&this.setSelectedIndex(this._options.selectedIndex,!1),this._options.value!==void 0&&this.setValue(this._options.value),this._options.selectedItem!==void 0&&this.setValue(this._options.selectedItem),this._options.enabled!==void 0&&this.applyEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.applyReadOnly(this._options.readOnly)}applyOptions(e){return super.applyOptions(e),e.items!==void 0&&(this._options.items=e.items),e.store!==void 0&&(this._options.store=e.store),e.displayField!==void 0&&(this._options.displayField=e.displayField),e.valueField!==void 0&&(this._options.valueField=e.valueField),e.glyphField!==void 0&&(this._options.glyphField=e.glyphField),e.rendererFactory!==void 0&&(this._options.rendererFactory=e.rendererFactory),e.selectedIndex!==void 0&&(this._options.selectedIndex=e.selectedIndex),e.value!==void 0&&(this._options.value=e.value),e.selectedItem!==void 0&&(this._options.selectedItem=e.selectedItem),e.dropdownAnimated!==void 0&&(this._options.dropdownAnimated=e.dropdownAnimated),e.dropdownMinWidth!==void 0&&this.setDropdownMinWidth(e.dropdownMinWidth),this}updateHeight(){let t=e.singleLineBoxHeight(this.getInsets(),this.getPadding(),this.getBorderSize());this.setPreferredSize(200,t),this.setMaxSize(2**53-1,t),this.setMinSize(0,t)}doLayout(){super.doLayout();let e=this.getInnerSize();if(!e)return this;let t=this._caret.getCaretSize(),n=this.getInsets(),r=n.getLeft(),i=n.getTop(),a=Math.max(0,e.width-t-6),o=r+a+6,s=i+Math.max(0,(e.height-t)/2);return this._label.setX(r),this._label.setY(i),this._label.setWidth(a),this._label.setHeight(e.height),this._label.setLineHeight(e.height),this._label.doLayout(),this._caret.setX(o),this._caret.setY(s),this._caret.setWidth(t),this._caret.setHeight(t),this}getBaseline(){return this.wrapInnerBaseline(e.measureTextBaseline())}openDropdown(){return this._dropdown.isOpen()||this.toggleDropdown(),this}toggleDropdown(){if(this._dropdown.isOpen()){this.closeDropdown();return}let e=this.getElement(!0),t=this._dropdown.getList();this._dropdown.setAnchorElement(e),this._dropdown.showAt(e,t.getItems(),t.getSelectedIndex()),this.getAria().setExpanded(!0),this.setCaretOpen(!0)}setCaretOpen(e){let t=this._caret.getGlyph(),n=this._dropdown.isAnimated()?this._dropdown.getDurationMs():0;t.setTransition(`transform ${n}ms ease`),t.setTransform(e?`rotate(180deg)`:`rotate(0deg)`)}closeDropdown(){this._dropdown.isOpen()&&(this._dropdown.hideAnimated(),this.getAria().setExpanded(!1),this.setCaretOpen(!1))}onKeyDown(e){if(this._dropdown.isOpen()){if(this._dropdown.handleKey(e)){e.preventDefault();return}e.key===`Escape`&&(e.preventDefault(),this.closeDropdown());return}switch(e.key){case`ArrowDown`:case`ArrowUp`:case`Enter`:case` `:e.preventDefault(),this.toggleDropdown();break;case`Escape`:break;default:break}}onRowSelected(e){this.setSelectedIndex(e,!0),this.closeDropdown()}computeSelectedItem(){let e=this._dropdown.getList(),t=e.getSelectedIndex(),n=e.getItems();return t>=0&&t<n.length?{item:n[t],index:t}:{item:{key:``,label:``},index:-1}}refreshLabel(){let{item:e,index:t}=this.computeSelectedItem();this._label.setItem(e,t)}on(e,t){return super.on(e===`action`?`change`:e,t)}off(e,t){return super.off(e===`action`?`change`:e,t)}setValue(e){return this._pendingValue=e,this._dropdown.getList().setValue(e),this.refreshLabel(),this}getValue(){return this._dropdown.getList().getValue()||(this._pendingValue??``)}getSelectedIndex(){return this._dropdown.getList().getSelectedIndex()}setSelectedIndex(e,t=!0){return this._dropdown.getList().setSelectedIndex(e,!1),this._pendingValue=null,this.refreshLabel(),t&&this.notifyChange(this.getValue()),this}getItems(){return this._dropdown.getList().getItems()}setItems(e){return this._dropdown.getList().setItems(e),this.reapplyPendingValue(),this.autoSelectFirstIfEmpty(),this.refreshLabel(),this}addItem(e){return this._dropdown.getList().addItem(e),this.reapplyPendingValue(),this.autoSelectFirstIfEmpty(),this.refreshLabel(),this}setStore(e,t,n,r){return this._options.store=e,this._options.displayField=t,this._options.valueField=n,this._options.glyphField=r,this._boundStore&&[`load`,`add`,`remove`,`datachange`].forEach(e=>this._boundStore.off(e,this._onStoreRefresh)),this._dropdown.getList().setStore(e,t,n,r),this._boundStore=e,[`load`,`add`,`remove`,`datachange`].forEach(t=>e.on(t,this._onStoreRefresh)),this.reapplyPendingValue(),this.autoSelectFirstIfEmpty(),this.refreshLabel(),this}getStore(){return this._dropdown.getList().getStore()}setRendererFactory(e){return this._options.rendererFactory=e,this._dropdown.getList().setRendererFactory(e),this._label.setRenderer(e()),this.refreshLabel(),this}getRendererFactory(){return this._dropdown.getList().getRendererFactory()}getSelectedRecord(){return this._dropdown.getList().getSelectedRecord()}reapplyPendingValue(){if(this._pendingValue===null)return;let e=this._dropdown.getList();e.setValue(this._pendingValue),e.getSelectedIndex()>=0&&(this._pendingValue=null)}autoSelectFirstIfEmpty(){let e=this._dropdown.getList();e.getSelectedIndex()<0&&e.getItems().length>0&&e.setSelectedIndex(0,!1)}onStoreRefresh(){this.reapplyPendingValue(),this.autoSelectFirstIfEmpty(),this.refreshLabel()}setDropdownAnimated(e){return this._options.dropdownAnimated=e,this._dropdown.setAnimated(e),this}isDropdownAnimated(){return this._options.dropdownAnimated??!0}setDropdownMinWidth(e){return this._options.dropdownMinWidth=e,this._dropdown.setMinWidth(e),this}getDropdownMinWidth(){return this._options.dropdownMinWidth??$}applyEnabled(e){this.getAria().setDisabled(!e),this.getAria().setTabIndex(e?0:-1),this.setCursor(e?`pointer`:`default`),e||this.closeDropdown()}applyReadOnly(e){this.getAria().setReadOnly(e)}},te=i(ComboBox);export{W as a,PickerCellList as c,AbstractPickerField as d,registerFocusWithinRing as f,O as g,A as h,G as i,PickerColumn as l,M as m,J as n,B as o,N as p,q as r,PickerCell as s,te as t,R as u};
+//# sourceMappingURL=ComboBox-GOBOAJ1N.js.map