@ds-gn/ui 0.10.0 → 0.11.0

package/dist/common/controllers/OverlayDismissController.d.ts

@@ -0,0 +1,52 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** What dismissed an overlay. */
+export type OverlayDismissReason = 'escape' | 'outside';
+export interface OverlayDismissOptions {
+    /** Whether there is an open overlay for Escape to close. */
+    isOpen: () => boolean;
+    /**
+     * Close the overlay. Runs before focus is returned, so a host can record the
+     * dismissal first (e.g. to keep a focus-to-open trigger from re-opening).
+     */
+    onDismiss: (reason: OverlayDismissReason) => void;
+    /** Where focus goes after an Escape dismissal — usually the trigger. */
+    returnFocusTo?: () => HTMLElement | null | undefined;
+}
+/**
+ * Dismisses an overlay the two standard ways: Escape (closing it and returning
+ * focus to its trigger) and a pointer press outside the host.
+ *
+ * **Escape** is not a global listener: the host routes its own `keydown`
+ * through `handleKeydown`, so the key only counts while focus is inside the
+ * component, and a host with a richer key handler (a listbox) decides where in
+ * that handler Escape is checked. It returns whether it dismissed, so the host
+ * can `preventDefault` or stop there.
+ *
+ * **Outside press** is a `pointerdown` listener on the document, present only
+ * between `start()` and `stop()` — a host decides when an outside press
+ * should matter (a nav dropdown only once pinned; a listbox whenever open).
+ * The press is tested against the event's composed path, so presses inside the
+ * host's shadow root count as inside. Like `LayoutChangeController`, the
+ * intent survives a disconnect and the listener returns on reconnect.
+ */
+export declare class OverlayDismissController implements ReactiveController {
+    private host;
+    private options;
+    private listening;
+    private wantsOutside;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: OverlayDismissOptions);
+    /** Start closing on a pointer press outside the host. Idempotent. */
+    start(): void;
+    /** Stop closing on outside presses. Idempotent. */
+    stop(): void;
+    /**
+     * Dismiss on Escape while open, then return focus. Returns `true` when the
+     * event dismissed the overlay.
+     */
+    handleKeydown(event: KeyboardEvent): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleDocumentPointerDown;
+    private listen;
+    private unlisten;
+}

package/dist/common/controllers/OverlayPositionController.d.ts

@@ -0,0 +1,168 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Breathing room kept between an overlay and the viewport edge.
+ */
+export declare const overlayViewportGutter = 16;
+/** Which edge of its anchor an overlay lines up with. */
+export type OverlayAlign = 'start' | 'end';
+/** Vertical side of the anchor an overlay hangs from. */
+export type OverlaySide = 'bottom' | 'top';
+/**
+ * Where an overlay hangs: its side of the anchor, and the anchor edge it lines
+ * up with before any shift (`-end` for a "⋯" trigger at the end of a row).
+ */
+export type OverlayPlacement = `${OverlaySide}-${OverlayAlign}`;
+/**
+ * Where to put an overlay that is `position: fixed` against the viewport —
+ * for example one shown in the top layer with the Popover API, which escapes
+ * every ancestor's overflow clipping and stacking context but is no longer
+ * laid out relative to its anchor.
+ */
+export interface OverlayViewportPosition {
+    /** Distance from the viewport's left edge, shift included. */
+    left: number;
+    /** Distance from the viewport's top edge; set when hanging below. */
+    top: number | null;
+    /** Distance from the viewport's bottom edge; set when flipped above. */
+    bottom: number | null;
+    /** The anchor's width, for overlays that match it. */
+    anchorWidth: number;
+}
+export interface OverlayPosition {
+    /** The side the overlay hangs from, after any vertical flip. */
+    placement: OverlayPlacement;
+    /**
+     * Horizontal shift, measured from the start-aligned position under (or
+     * above) the anchor. See `computeOverlayShift`. This is all an overlay
+     * positioned against its anchor (`position: absolute`) needs.
+     */
+    shift: number;
+    /** The same position in viewport coordinates, for a `fixed` overlay. */
+    viewport: OverlayViewportPosition;
+}
+export interface OverlaySize {
+    width: number;
+    height: number;
+}
+type AnchorRect = Pick<DOMRect, 'left' | 'width' | 'top' | 'bottom'>;
+/** Room between the chosen panel edge and the viewport gutter. */
+export declare const computeOverlayAvailableHeight: (viewport: OverlayViewportPosition, viewportHeight: number, gutter?: number) => number;
+/**
+ * Viewport coordinates for a `fixed` overlay. A flipped overlay is pinned by
+ * its bottom edge, so it stays against the anchor however tall it renders.
+ */
+export declare const computeViewportPosition: (anchor: AnchorRect, { placement, shift }: Pick<OverlayPosition, "placement" | "shift">, viewportHeight: number, offset?: number) => OverlayViewportPosition;
+/**
+ * Horizontal shift for an overlay, measured from the start-aligned position
+ * under its anchor. Hanging from the anchor's start edge is the default; if
+ * that would spill past the viewport, the overlay flips to end on the anchor's
+ * far edge instead. Only when *that* would leave the viewport too — an overlay
+ * wider than the room on either side of its anchor — does it give up the
+ * anchor and sit on the gutter, where a fluid width has already shrunk it to
+ * fit.
+ *
+ * `align: 'end'` mirrors this: the overlay ends on the anchor's end edge,
+ * flips to start-aligned when that would spill past the left gutter, and sits
+ * on the right gutter when neither fits.
+ */
+export declare const computeOverlayShift: (anchor: AnchorRect, overlayWidth: number, viewportWidth: number, gutter?: number, align?: OverlayAlign) => number;
+/**
+ * Vertical side for an overlay. Below the anchor is the default; it flips
+ * above only when it doesn't fit below and does fit above. When it fits on
+ * neither side it takes whichever has more room, so a long list scrolls inside
+ * the larger space rather than the smaller one.
+ */
+export declare const computeOverlayPlacement: (anchor: AnchorRect, overlayHeight: number, viewportHeight: number, { gutter, offset, align, }?: {
+    gutter?: number;
+    offset?: number;
+    align?: OverlayAlign;
+}) => OverlayPlacement;
+/**
+ * Size an overlay renders at. A closed overlay is usually `display: none`, so
+ * lay it out just long enough to read it — the browser cannot paint between
+ * the two writes, so nothing flashes. The overlay's own inline style is
+ * restored afterwards.
+ */
+export declare const measureOverlay: (overlay: HTMLElement) => OverlaySize;
+export interface OverlayPositionOptions {
+    /** The element the overlay hangs from. Defaults to the host. */
+    anchor?: () => Element | null | undefined;
+    /** The overlay element to measure. */
+    overlay: () => HTMLElement | null | undefined;
+    /** Write a computed position to the overlay (CSS custom properties, state). */
+    apply: (position: OverlayPosition) => void;
+    /** Undo `apply` when the overlay closes. */
+    clear?: () => void;
+    /**
+     * Runs before the overlay is measured, with the anchor's box. A `fixed`
+     * overlay that sizes itself from its anchor (rather than from a containing
+     * block) sets that size here, so the measurement sees its real width.
+     */
+    beforeMeasure?: (anchor: DOMRect) => void;
+    /** Viewport gutter in px. Defaults to `overlayViewportGutter`. */
+    gutter?: number;
+    /** Gap between anchor and overlay, counted against the room on each side. */
+    offset?: number;
+    /**
+     * Flip above the anchor when there isn't room below. Off, the overlay always
+     * hangs below.
+     */
+    flip?: boolean;
+    /**
+     * The anchor edge the overlay lines up with: `start` (default) or `end`.
+     * Read on every measurement, so a host can change it while open.
+     */
+    align?: () => OverlayAlign;
+    /**
+     * Also re-measure on scroll (any scroll container, captured) and window
+     * resize, coalesced to one measurement per frame. Width changes are always
+     * tracked through the shared layout observer; this adds the height and
+     * scroll changes a vertical flip depends on.
+     */
+    trackViewport?: boolean;
+}
+/**
+ * Positions an overlay against its anchor and the viewport while it is open:
+ * start-aligned (or, with `align`, end-aligned) under the anchor, shifted to
+ * stay inside the viewport gutter,
+ * and optionally flipped above when there isn't room below.
+ *
+ * Each position is reported two ways: as a `shift` for an overlay laid out
+ * against its anchor (`position: absolute` in a shared containing block), and
+ * as `viewport` coordinates for a `fixed` overlay, such as one in the top
+ * layer. A top-layer overlay should also set `trackViewport`, since it no
+ * longer moves with the page on its own.
+ *
+ * `start()` measures and subscribes to layout changes; `stop()` unsubscribes
+ * and calls `clear`, so the next open always starts from a measurement rather
+ * than a stale one. `update()` re-measures on demand — call it before opening
+ * if the overlay must land in place on its first frame.
+ *
+ * The subscription is the shared observer in `helpers/layout-change.ts` (the
+ * document width and the host's own box), plus scroll/resize listeners when
+ * `trackViewport` is on. Like `LayoutChangeController`, the intent survives a
+ * disconnect: a host moved in the DOM while open resubscribes on reconnect.
+ */
+export declare class OverlayPositionController implements ReactiveController {
+    private host;
+    private options;
+    private unsubscribe?;
+    private wantsUpdates;
+    private frame?;
+    private _position?;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: OverlayPositionOptions);
+    /** The last applied position, or `undefined` while stopped. */
+    get position(): OverlayPosition | undefined;
+    /** Measure now and keep measuring on layout changes. Idempotent. */
+    start(): void;
+    /** Stop measuring and clear the applied position. Idempotent. */
+    stop(): void;
+    /** Measure and apply the position once. */
+    update: () => void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private scheduleUpdate;
+    private subscribe;
+    private unsubscribeAll;
+}
+export {};

package/dist/common/controllers/RovingFocusController.d.ts

@@ -0,0 +1,99 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** Which arrow keys move between items. */
+export type RovingFocusOrientation = 'vertical' | 'horizontal' | 'both';
+export interface RovingFocusOptions {
+    /**
+     * The items, in order — every element that could take focus, including any
+     * the controller should skip. Read on each key press, so a list that
+     * re-renders is never stale.
+     */
+    items: () => readonly HTMLElement[];
+    /**
+     * Items arrow keys and typeahead pass over, such as separators. Defaults to
+     * `role="separator"`. Disabled items are *not* skipped: in the APG menu,
+     * toolbar and tablist patterns they stay focusable so they can be
+     * discovered, and the host refuses to activate them.
+     */
+    isSkipped?: (item: HTMLElement) => boolean;
+    /** Arrow keys that move focus. Defaults to `vertical` (↑ ↓). */
+    orientation?: RovingFocusOrientation;
+    /** Whether moving past either end wraps around. Defaults to `true`. */
+    wrap?: boolean;
+    /** Text matched by typeahead. Defaults to the trimmed `textContent`. */
+    labelOf?: (item: HTMLElement) => string;
+    /** Whether typing a character moves to a matching item. Defaults to `true`. */
+    typeahead?: boolean;
+    /** How long typed characters accumulate. Defaults to `typeaheadTimeout`. */
+    typeaheadTimeout?: number;
+    /** Runs after focus lands on an item through the controller or a `focusin`. */
+    onFocusChange?: (item: HTMLElement, index: number) => void;
+}
+/**
+ * Roving focus over a group of items — the keyboard model shared by the
+ * WAI-ARIA APG menu, toolbar and tablist patterns. DOM focus moves between the
+ * items themselves (unlike a listbox's `aria-activedescendant`), and exactly
+ * one item is the group's tab stop (`tabindex="0"`, the rest `-1`).
+ *
+ * Keys are not a global listener: the host routes its own `keydown` through
+ * `handleKeydown`, which returns whether it handled the key so the host can
+ * `preventDefault` or stop there — the same contract as
+ * `OverlayDismissController`. Arrow keys (per `orientation`), Home and End
+ * move; printable characters run typeahead (first-letter match, refined while
+ * typing within the timeout). Space is only taken while a typeahead search is
+ * active, so a host can still use it to activate.
+ *
+ * Activation is the host's job, so this controller has no notion of
+ * "disabled": disabled items are focused like any other, and the host checks
+ * `aria-disabled` before acting.
+ *
+ * Focus that arrives some other way — a click, or a host focusing an item on
+ * hover — is picked up through `focusin`, so the tab stop and `activeIndex`
+ * always follow the focused item.
+ */
+export declare class RovingFocusController implements ReactiveController {
+    private host;
+    private options;
+    private readonly typeahead;
+    private current;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: RovingFocusOptions);
+    /** Index of the current item among `items()`, or `-1`. */
+    get activeIndex(): number;
+    /** The current item — the tab stop — or `null`. */
+    get activeItem(): HTMLElement | null;
+    /** Whether characters are being collected into a typeahead search. */
+    get typeaheadActive(): boolean;
+    /** Focus the first item that is not skipped. Returns it, or `null`. */
+    focusFirst(): HTMLElement | null;
+    /** Focus the last item that is not skipped. Returns it, or `null`. */
+    focusLast(): HTMLElement | null;
+    /** Focus `item` (ignored if it is skipped or not an item). */
+    focusItem(item: HTMLElement): HTMLElement | null;
+    /**
+     * Make one item the tab stop (the current one, else the first) and every
+     * other item `tabindex="-1"`. Skipped items get no `tabindex` at all: a
+     * focusable separator reads as a slider. Call after the items render.
+     */
+    syncTabStops(): void;
+    /** Forget the current item and any typeahead in progress. */
+    reset(): void;
+    /**
+     * Move focus for an arrow, Home, End or typeahead key. Returns `true` when
+     * the key was handled.
+     */
+    handleKeydown(event: KeyboardEvent): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private navigable;
+    private isTypeaheadKey;
+    /**
+     * The item a navigation key moves to; `null` when the key is handled but
+     * focus stays (no wrap at an end), `undefined` when it is not a navigation
+     * key.
+     */
+    private targetFor;
+    /** One item on from the current one, wrapping if allowed. */
+    private step;
+    private focusAt;
+    private setCurrent;
+    private handleFocusIn;
+}

package/dist/common/helpers/field-control.d.ts

@@ -0,0 +1,35 @@
+import type { SizeType } from '../props/size/size.props.js';
+/**
+ * The labelling contract between `dsgn-field` and a form control.
+ *
+ * `aria-labelledby` and `aria-describedby` cannot reference IDs across shadow
+ * roots, so Field cannot point its slotted control at a label it renders
+ * itself. Instead Field writes these properties onto the control, and the
+ * control renders the label, hint and error inside its own shadow root, next
+ * to the native element they describe, and wires the ARIA there.
+ *
+ * A control adopts the contract by declaring these reactive properties and
+ * calling `markFieldControl` on its class.
+ */
+export interface FieldControl extends HTMLElement {
+    label: string;
+    hint: string;
+    error: string;
+    required: boolean;
+    /** Set by Field from a non-empty `error`; a control may also set it alone. */
+    invalid: boolean;
+    size: SizeType;
+}
+/**
+ * Brands a control class as implementing `FieldControl`. Kept off the class
+ * body so the brand never surfaces as a public member in the custom elements
+ * manifest or the generated React wrapper.
+ */
+export declare const markFieldControl: (ctor: CustomElementConstructor) => void;
+export declare const isFieldControl: (element: Element) => element is FieldControl;
+/**
+ * `aria-describedby` value for a control: the error is read before the hint,
+ * and only IDs of rendered elements are included. `undefined` when there is
+ * nothing to reference, so the attribute is omitted rather than left empty.
+ */
+export declare const describedBy: (...ids: Array<string | false | null | undefined>) => string | undefined;

package/dist/common/helpers/listbox-navigation.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Keyboard navigation over a flat list of items, some of them disabled — the
+ * shared part of the WAI-ARIA APG listbox and menu patterns. Indices are into
+ * the full list; `-1` means "no item".
+ */
+export interface NavigableItem {
+    disabled?: boolean;
+}
+/**
+ * The next enabled index from `from` in direction `dir`, without wrapping.
+ * Stays on `from` when there is no enabled item that way.
+ */
+export declare const stepEnabled: (items: readonly NavigableItem[], from: number, dir: 1 | -1) => number;
+/** The first enabled index, or `-1`. */
+export declare const firstEnabled: (items: readonly NavigableItem[]) => number;
+/** The last enabled index, or `-1`. */
+export declare const lastEnabled: (items: readonly NavigableItem[]) => number;
+/**
+ * Whether a key event types a character, so it should feed typeahead rather
+ * than act as a command.
+ */
+export declare const isPrintableKey: (event: KeyboardEvent) => boolean;
+/** How long typed characters keep accumulating into one search. */
+export declare const typeaheadTimeout = 500;
+/**
+ * Accumulates typed characters for typeahead and finds the matching item.
+ *
+ * A single character searches from the item after `from`, so pressing the
+ * same letter repeatedly cycles through the items that start with it. Longer
+ * buffers search from `from` itself, so typing "sv" refines the match on "s"
+ * instead of skipping past it. The search wraps and skips disabled items.
+ */
+export declare class TypeaheadBuffer {
+    private readonly timeout;
+    private buffer;
+    private timer?;
+    constructor(timeout?: number);
+    /** Whether characters are currently being collected. */
+    get active(): boolean;
+    /**
+     * Add `char` to the buffer and return the matching index, or `-1`.
+     * `from` is the current item; `-1` starts the search at the top. With
+     * `cycle: false` the search always includes `from` itself, which is what a
+     * closed select wants: typing the selected option's letter keeps it.
+     */
+    search<T extends NavigableItem>(items: readonly T[], char: string, from: number, labelOf: (item: T) => string, { cycle }?: {
+        cycle?: boolean;
+    }): number;
+    clear(): void;
+}

package/dist/common/props/size/size.props.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The control size scale shared by form controls and `dsgn-field`, so a Field
+ * and the control inside it always agree on what `sm`, `md` and `lg` mean.
+ */
+export declare const sizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type SizeType = (typeof sizeValues)[keyof typeof sizeValues];
+export declare const sizeProps: import("lit").PropertyDeclaration<unknown, unknown>;

package/dist/common/styles/overlay-panel.styles.d.ts

@@ -0,0 +1,55 @@
+import type { OverlayPlacement } from '../controllers/OverlayPositionController.js';
+/**
+ * Class lists shared by the floating panels — `dsgn-select`'s listbox and
+ * `dsgn-dropdown-menu`'s menu — and the rows inside them, so the two read as
+ * one overlay layer.
+ *
+ * A component that imports this module has it added to its Tailwind sources
+ * by the build (see `sharedStyleSources` in `build/build-component.ts`), so
+ * every class named here must stay a literal string.
+ */
+/**
+ * Position written on the host by the position controller and inherited by
+ * the panel (a top-layer element still inherits through the DOM tree).
+ * `shift` places the anchored fallback; the rest place a top-layer panel in
+ * viewport coordinates.
+ */
+export declare const overlayPositionProperties: {
+    readonly shift: "--dsgn-overlay-shift";
+    readonly left: "--dsgn-overlay-left";
+    readonly top: "--dsgn-overlay-top";
+    readonly bottom: "--dsgn-overlay-bottom";
+    readonly width: "--dsgn-overlay-width";
+    readonly maxHeight: "--dsgn-overlay-max-height";
+};
+/** Gap between trigger and panel; matches `calc(100% + 4px)` below. */
+export declare const overlayPanelOffset = 4;
+export interface OverlayPanelState {
+    /** Displayed — stays true through the exit animation. */
+    visible: boolean;
+    /** Open — false while the exit animation runs. */
+    open: boolean;
+    /** Shown in the top layer rather than anchored in the component. */
+    topLayer: boolean;
+}
+/**
+ * The panel surface: popover background, border, radius, padding, shadow and
+ * item gap, positioned for its mode and placement. Width is the caller's.
+ */
+export declare const overlayPanelClasses: ({ visible, open, topLayer }: OverlayPanelState, placement: OverlayPlacement) => string[];
+/**
+ * A row in a panel: layout, radius and the shared highlight. Mouse hover and
+ * keyboard highlight are the same state — hovering moves the active row — so
+ * one style covers both. Height, text size and gap are the caller's.
+ *
+ * `tone` replaces the enabled text colour and highlight fill (a destructive
+ * menu item), so two colour utilities never compete on one row.
+ */
+export declare const overlayItemClasses: ({ active, disabled, tone, }: {
+    active: boolean;
+    disabled: boolean;
+    tone?: {
+        text: string;
+        activeFill: string;
+    };
+}) => string[];

package/dist/components/Button/src/Button.d.ts

@@ -16,6 +16,12 @@ export declare class Button extends Base {
      * submission the way a native submit button does.
      */
     static formAssociated: boolean;
+    /**
+     * `focus()` on the host moves focus to the inner control, so a component
+     * that returns focus to a slotted trigger (a menu closing on Escape) lands
+     * on the real button.
+     */
+    static shadowRootOptions: ShadowRootInit;
     constructor();
     /**
      * Surface theme variant (light or dark)
@@ -97,6 +103,20 @@ export declare class Button extends Base {
      */
     name: string;
     value: string;
+    /**
+     * Forwarded to the inner `<button>`, which is the element assistive
+     * technology sees: the button opens a popup of this type (`menu`, `listbox`,
+     * `dialog`…). A popup owner such as `dsgn-dropdown-menu` sets it as a
+     * property, so it lands on the real control rather than on the host. Ignored
+     * in link mode.
+     */
+    ariaHasPopup: string;
+    /**
+     * Forwarded to the inner `<button>`: whether the popup it controls is open
+     * (`'true'`/`'false'`, empty for none). An expanded ghost button keeps its
+     * hover fill, so an open menu's trigger stays marked. Ignored in link mode.
+     */
+    ariaExpanded: string;
     /**
      * Disabled state inherited from an ancestor `<fieldset>`/form owner, kept
      * separate from the authored `disabled` property. Writing the inherited state

package/dist/components/Button/src/Button.js

@@ -544,6 +544,16 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
       opacity: 50%;
     }
   }
+  .aria-expanded\\:bg-button-ghost-bg-hover {
+    &[aria-expanded="true"] {
+      background-color: var(--color-button-ghost-bg-hover);
+    }
+  }
+  .aria-expanded\\:text-button-ghost-text-hover {
+    &[aria-expanded="true"] {
+      color: var(--color-button-ghost-text-hover);
+    }
+  }
   .motion-safe\\:animate-spin {
     @media (prefers-reduced-motion: no-preference) {
       animation: var(--animate-spin);
@@ -821,6 +831,8 @@ var appearanceClasses = {
     "text-button-ghost-text",
     "hover:text-button-ghost-text-hover",
     "hover:bg-button-ghost-bg-hover",
+    "aria-expanded:text-button-ghost-text-hover",
+    "aria-expanded:bg-button-ghost-bg-hover",
     "border-none"
   ],
   "mono-solid": [
@@ -890,9 +902,15 @@ var classNames = ({
 };
 
 // components/Button/src/Button.ts
+var optional = (value) => value || nothing;
+
 class Button extends Base {
   static styles = [Base.styles, Button_default];
   static formAssociated = true;
+  static shadowRootOptions = {
+    ...Base.shadowRootOptions,
+    delegatesFocus: true
+  };
   #internals;
   constructor() {
     super();
@@ -910,6 +928,8 @@ class Button extends Base {
     this.loading = false;
     this.name = "";
     this.value = "";
+    this.ariaHasPopup = "";
+    this.ariaExpanded = "";
     this._formDisabled = false;
     this.#internals = this.attachInternals();
   }
@@ -1040,6 +1060,8 @@ class Button extends Base {
             aria-disabled=${this.loading ? "true" : nothing}
             aria-busy=${ariaBusy}
             aria-label=${ariaLabel}
+            aria-haspopup=${optional(this.ariaHasPopup)}
+            aria-expanded=${optional(this.ariaExpanded)}
             @click=${this._handleClick}
           >
             ${content}
@@ -1092,6 +1114,12 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ type: String, reflect: true })
 ], Button.prototype, "value", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "aria-haspopup" })
+], Button.prototype, "ariaHasPopup", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "aria-expanded" })
+], Button.prototype, "ariaExpanded", undefined);
 __legacyDecorateClassTS([
   state()
 ], Button.prototype, "_formDisabled", undefined);