@ds-gn/ui 0.10.0 → 0.11.0

package/dist/components/Input/src/Input.props.d.ts

@@ -1,3 +1,4 @@
+import { type SizeType } from '../../../common/props/size/size.props.js';
 export declare const inputTypeValues: {
     readonly TEXT: "text";
     readonly EMAIL: "email";
@@ -9,5 +10,5 @@ export declare const inputSizeValues: {
     readonly MD: "md";
     readonly LG: "lg";
 };
-export type InputSizeType = (typeof inputSizeValues)[keyof typeof inputSizeValues];
+export type InputSizeType = SizeType;
 export declare const inputSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;

package/dist/components/Input/src/Input.props.js

@@ -21,18 +21,24 @@ var enumCreator = (acceptableValues, propName, type, other = {}) => {
   };
 };
 
+// common/props/size/size.props.ts
+var sizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var sizeProps = enumCreator(Object.values(sizeValues), "size", String, {
+  reflect: true
+});
+
 // components/Input/src/Input.props.ts
 var inputTypeValues = {
   TEXT: "text",
   EMAIL: "email"
 };
 var inputTypeProps = enumCreator(Object.values(inputTypeValues), "type", String, { reflect: true });
-var inputSizeValues = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg"
-};
-var inputSizeProps = enumCreator(Object.values(inputSizeValues), "size", String, { reflect: true });
+var inputSizeValues = sizeValues;
+var inputSizeProps = sizeProps;
 export {
   inputSizeProps,
   inputSizeValues,

package/dist/components/Input/src/Input.styles.d.ts

@@ -1,6 +1,14 @@
 import { type InputSizeType } from './Input.props.js';
-export declare const classNames: (size: InputSizeType, hasError: boolean, disabled: boolean) => string;
+/**
+ * Visual state of the control. Exactly one applies, so the border and
+ * background utilities never compete: disabled wins over read-only, which wins
+ * over invalid.
+ */
+export type InputState = 'default' | 'invalid' | 'readonly' | 'disabled';
+export declare const classNames: (size: InputSizeType, state: InputState) => string;
 export declare const wrapperClasses: () => string;
-export declare const labelClasses: () => string;
-export declare const errorWrapClasses: (hasError: boolean) => string;
-export declare const errorMessageClasses: (hasError: boolean) => string;
+export declare const labelClasses: (size: InputSizeType, disabled: boolean) => string;
+export declare const requiredClasses: () => string;
+export declare const hintClasses: (size: InputSizeType) => string;
+export declare const errorClasses: (size: InputSizeType) => string;
+export declare const errorIconClasses: () => string;

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

@@ -22,6 +22,7 @@ import { type ModalCloseReasonType, type ModalMotionType, type ModalPlacementTyp
  * @slot description - Supporting text referenced by `aria-describedby`.
  * @slot footer - Actions, typically buttons.
  * @slot close - A close control; clicking anything slotted here requests a close.
+ * @slot toaster - Not for authors: an open page's `dsgn-toaster` moves its region here while the modal is open, because a modal dialog makes everything outside it inert.
  *
  * @csspart dialog - Native dialog element.
  * @csspart close-button - Built-in close button.

package/dist/components/Modal/src/Modal.js

@@ -1163,6 +1163,7 @@ class Modal extends Base {
             <slot name="footer" @slotchange=${this._handleSlotChange}></slot>
           </footer>
         </div>
+        <slot name="toaster"></slot>
       </dialog>
     `;
   }

package/dist/components/Nav/src/Nav.js

@@ -144,7 +144,8 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --radius-input: var(--dsgn-src-radius-input, 0.5rem);
+    --radius-control: var(--dsgn-src-radius-control, 0.375rem);
+    --radius-input: var(--dsgn-src-radius-input, var(--radius-control));
     --color-accent: inherit;
     --color-outline: inherit;
     --color-page: inherit;

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

@@ -91,13 +91,21 @@ export declare class NavLink extends Base {
      */
     private breakpointController;
     /**
-     * The shift is measured against the viewport, so a change in the room around
-     * the trigger invalidates it: an open panel would otherwise keep the offset
-     * the old width earned it and hang off whichever edge the new width put it
-     * over. Only subscribed while a panel is open. See the controller for the
-     * layout changes this does and does not see.
+     * Panels are positioned against their own trigger and the viewport, not
+     * against the nav, so every column count uses the same rule. The shift is
+     * measured against the viewport, so a change in the room around the trigger
+     * invalidates it: an open panel would otherwise keep the offset the old width
+     * earned it and hang off whichever edge the new width put it over. The
+     * controller only tracks layout while a panel is open. The default 16px
+     * gutter matches the `2rem` the styles subtract from `100vw` for the panel's
+     * max width, so a panel squeezed to its widest still lands on the gutter.
+     */
+    private overlayPosition;
+    /**
+     * Escape closes any open panel and returns focus to the trigger; a press
+     * outside closes a pinned one (the listener only exists while pinned).
      */
-    private layoutChangeController;
+    private overlayDismiss;
     connectedCallback(): void;
     /**
      * Resolve the `rel` attribute. For `target="_blank"` links, always include
@@ -105,7 +113,6 @@ export declare class NavLink extends Base {
      * new-tab nav link never exposes `window.opener`.
      */
     private get computedRel();
-    disconnectedCallback(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private updateDropdownState;
     private handleDropdownSlotChange;
@@ -128,29 +135,6 @@ export declare class NavLink extends Base {
      */
     private setExpanded;
     private toggleDropdown;
-    private handleDocumentPointerDown;
-    private clearDropdownAlignment;
-    /**
-     * Width the dropdown panel renders at. A closed panel is `display: none`, so
-     * lay it out just long enough to read it — the browser cannot paint between
-     * the two writes below, so nothing flashes.
-     */
-    private measureDropdownWidth;
-    /**
-     * Horizontal shift for the panel, measured from the left-aligned position
-     * under its trigger. Hanging right of the trigger is the default; if that
-     * would spill past the viewport, the panel flips to hang left instead, with
-     * its right edge on the trigger's. Only when *that* would leave the viewport
-     * too — a panel wider than the room on either side of its trigger — does it
-     * give up the anchor and sit on the gutter, where its fluid width has already
-     * shrunk it to fit.
-     */
-    private dropdownShift;
-    /**
-     * Panels are positioned against their own trigger and the viewport, not
-     * against the nav, so every column count uses the same rule.
-     */
-    private updateDropdownAlignment;
     /**
      * Hover-to-open applies only where the desktop trigger is rendered (>= sm)
      * and only on a device that really hovers.

package/dist/components/NavLink/src/NavLink.js

@@ -91,6 +91,60 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
+// common/controllers/OverlayDismissController.ts
+class OverlayDismissController {
+  constructor(host, options) {
+    this.listening = false;
+    this.wantsOutside = false;
+    this.handleDocumentPointerDown = (event) => {
+      if (!event.composedPath().includes(this.host)) {
+        this.options.onDismiss("outside");
+      }
+    };
+    this.host = host;
+    this.options = options;
+    host.addController(this);
+  }
+  start() {
+    this.wantsOutside = true;
+    this.listen();
+  }
+  stop() {
+    this.wantsOutside = false;
+    this.unlisten();
+  }
+  handleKeydown(event) {
+    if (event.key !== "Escape" || !this.options.isOpen()) {
+      return false;
+    }
+    this.options.onDismiss("escape");
+    this.options.returnFocusTo?.()?.focus();
+    return true;
+  }
+  hostConnected() {
+    if (this.wantsOutside) {
+      this.listen();
+    }
+  }
+  hostDisconnected() {
+    this.unlisten();
+  }
+  listen() {
+    if (this.listening || typeof document === "undefined") {
+      return;
+    }
+    this.listening = true;
+    document.addEventListener("pointerdown", this.handleDocumentPointerDown);
+  }
+  unlisten() {
+    if (!this.listening) {
+      return;
+    }
+    this.listening = false;
+    document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+  }
+}
+
 // common/helpers/layout-change.ts
 var listenersByTarget = new Map;
 var observer;
@@ -152,21 +206,118 @@ var observeLayoutChanges = (target, listener) => {
   };
 };
 
-// common/controllers/LayoutChangeController.ts
-class LayoutChangeController {
-  constructor(host, onLayoutChange) {
+// common/controllers/OverlayPositionController.ts
+var overlayViewportGutter = 16;
+var computeViewportPosition = (anchor, { placement, shift }, viewportHeight, offset = 0) => {
+  const below = placement.startsWith("bottom");
+  return {
+    left: anchor.left + shift,
+    top: below ? anchor.bottom + offset : null,
+    bottom: below ? null : viewportHeight - anchor.top + offset,
+    anchorWidth: anchor.width
+  };
+};
+var computeOverlayShift = (anchor, overlayWidth, viewportWidth, gutter = overlayViewportGutter, align = "start") => {
+  const viewportRight = viewportWidth - gutter;
+  const startFits = anchor.left + overlayWidth <= viewportRight;
+  const endAligned = anchor.width - overlayWidth;
+  const endFits = anchor.left + endAligned >= gutter;
+  if (!overlayWidth) {
+    return 0;
+  }
+  if (align === "end") {
+    if (endFits)
+      return endAligned;
+    return startFits ? 0 : viewportRight - overlayWidth - anchor.left;
+  }
+  if (startFits)
+    return 0;
+  return endFits ? endAligned : gutter - anchor.left;
+};
+var computeOverlayPlacement = (anchor, overlayHeight, viewportHeight, {
+  gutter = overlayViewportGutter,
+  offset = 0,
+  align = "start"
+} = {}) => {
+  const below = viewportHeight - gutter - anchor.bottom - offset;
+  const above = anchor.top - gutter - offset;
+  const flips = !!overlayHeight && overlayHeight > below && (overlayHeight <= above || above > below);
+  return `${flips ? "top" : "bottom"}-${align}`;
+};
+var sizeOf = (overlay) => {
+  if (overlay.offsetWidth) {
+    return { width: overlay.offsetWidth, height: overlay.offsetHeight };
+  }
+  const { width, height } = overlay.getBoundingClientRect();
+  return { width, height };
+};
+var measureOverlay = (overlay) => {
+  const open = sizeOf(overlay);
+  if (open.width) {
+    return open;
+  }
+  const inline = overlay.style.cssText;
+  overlay.style.display = "block";
+  overlay.style.visibility = "hidden";
+  const size = sizeOf(overlay);
+  overlay.style.cssText = inline;
+  return size;
+};
+
+class OverlayPositionController {
+  constructor(host, options) {
     this.wantsUpdates = false;
+    this.update = () => {
+      const anchor = this.options.anchor?.() ?? this.host;
+      const overlay = this.options.overlay();
+      if (!anchor || !overlay) {
+        return;
+      }
+      const anchorRect = anchor.getBoundingClientRect();
+      this.options.beforeMeasure?.(anchorRect);
+      const { width, height } = measureOverlay(overlay);
+      const gutter = this.options.gutter ?? overlayViewportGutter;
+      const offset = this.options.offset ?? 0;
+      const align = this.options.align?.() ?? "start";
+      const shift = computeOverlayShift(anchorRect, width, window.innerWidth, gutter, align);
+      const placement = this.options.flip ? computeOverlayPlacement(anchorRect, height, window.innerHeight, {
+        gutter,
+        offset,
+        align
+      }) : `bottom-${align}`;
+      this._position = {
+        shift,
+        placement,
+        viewport: computeViewportPosition(anchorRect, { placement, shift }, window.innerHeight, offset)
+      };
+      this.options.apply(this._position);
+    };
+    this.scheduleUpdate = () => {
+      if (this.frame !== undefined) {
+        return;
+      }
+      this.frame = requestAnimationFrame(() => {
+        this.frame = undefined;
+        this.update();
+      });
+    };
     this.host = host;
-    this.onLayoutChange = onLayoutChange;
+    this.options = options;
     host.addController(this);
   }
-  observe() {
+  get position() {
+    return this._position;
+  }
+  start() {
     this.wantsUpdates = true;
     this.subscribe();
+    this.update();
   }
-  unobserve() {
+  stop() {
     this.wantsUpdates = false;
-    this.clear();
+    this.unsubscribeAll();
+    this._position = undefined;
+    this.options.clear?.();
   }
   hostConnected() {
     if (this.wantsUpdates) {
@@ -174,17 +325,33 @@ class LayoutChangeController {
     }
   }
   hostDisconnected() {
-    this.clear();
+    this.unsubscribeAll();
   }
   subscribe() {
     if (this.unsubscribe) {
       return;
     }
-    this.unsubscribe = observeLayoutChanges(this.host, this.onLayoutChange);
+    const stopLayout = observeLayoutChanges(this.host, this.update);
+    if (!this.options.trackViewport || typeof window === "undefined") {
+      this.unsubscribe = stopLayout;
+      return;
+    }
+    const listenerOptions = { capture: true, passive: true };
+    window.addEventListener("scroll", this.scheduleUpdate, listenerOptions);
+    window.addEventListener("resize", this.scheduleUpdate, listenerOptions);
+    this.unsubscribe = () => {
+      stopLayout();
+      window.removeEventListener("scroll", this.scheduleUpdate, true);
+      window.removeEventListener("resize", this.scheduleUpdate, true);
+    };
   }
-  clear() {
+  unsubscribeAll() {
     this.unsubscribe?.();
     this.unsubscribe = undefined;
+    if (this.frame !== undefined) {
+      cancelAnimationFrame(this.frame);
+      this.frame = undefined;
+    }
   }
 }
 
@@ -1554,7 +1721,6 @@ var overviewClasses = () => clsx_default("col-span-full", "inline-flex", "w-full
 var navLinkDropdownId = 0;
 var dropdownShiftProperty = "--dsgn-nav-link-dropdown-shift";
 var supportsHover = () => typeof window === "undefined" || typeof window.matchMedia !== "function" ? true : window.matchMedia("(hover: hover)").matches;
-var dropdownViewportGutter = 16;
 
 class NavLink extends Base {
   constructor() {
@@ -1575,7 +1741,22 @@ class NavLink extends Base {
     this.keyboardDismissed = false;
     this.dropdownId = `dsgn-nav-link-dropdown-${++navLinkDropdownId}`;
     this.breakpointController = new BreakpointController(this);
-    this.layoutChangeController = new LayoutChangeController(this, () => this.updateDropdownAlignment());
+    this.overlayPosition = new OverlayPositionController(this, {
+      overlay: () => this.shadowRoot?.querySelector(`#${this.dropdownId}`),
+      apply: ({ shift }) => this.style.setProperty(dropdownShiftProperty, `${shift}px`),
+      clear: () => this.style.removeProperty(dropdownShiftProperty)
+    });
+    this.overlayDismiss = new OverlayDismissController(this, {
+      isOpen: () => this.expanded && this.hasDropdown,
+      onDismiss: (reason) => {
+        this.expanded = false;
+        this.pinned = false;
+        if (reason === "escape") {
+          this.keyboardDismissed = true;
+        }
+      },
+      returnFocusTo: () => this.shadowRoot?.querySelector("button, a")
+    });
     this.handleDropdownSlotChange = () => {
       this.updateDropdownState();
     };
@@ -1585,17 +1766,11 @@ class NavLink extends Base {
     this.toggleDropdown = () => {
       this.pinned = !this.pinned;
       if (this.pinned) {
-        this.updateDropdownAlignment();
+        this.overlayPosition.update();
       }
       this.keyboardDismissed = false;
       this.setExpanded(this.pinned);
     };
-    this.handleDocumentPointerDown = (event) => {
-      if (!event.composedPath().includes(this)) {
-        this.pinned = false;
-        this.expanded = false;
-      }
-    };
     this.handlePointerEnter = () => {
       if (!this.hoverOpensDropdown) {
         return;
@@ -1603,7 +1778,7 @@ class NavLink extends Base {
       this.keyboardDismissed = false;
       this.updateDropdownState();
       if (this.hasDropdown) {
-        this.updateDropdownAlignment();
+        this.overlayPosition.update();
         this.setExpanded(true);
       }
     };
@@ -1619,7 +1794,7 @@ class NavLink extends Base {
       }
       this.updateDropdownState();
       if (this.hasDropdown) {
-        this.updateDropdownAlignment();
+        this.overlayPosition.update();
         this.setExpanded(true);
       }
     };
@@ -1635,12 +1810,7 @@ class NavLink extends Base {
       });
     };
     this.handleKeydown = (event) => {
-      if (event.key === "Escape" && this.expanded && this.hasDropdown) {
-        this.expanded = false;
-        this.pinned = false;
-        this.keyboardDismissed = true;
-        this.shadowRoot?.querySelector("button, a")?.focus();
-      }
+      this.overlayDismiss.handleKeydown(event);
     };
   }
   static styles = [Base.styles, NavLink_default];
@@ -1663,26 +1833,21 @@ class NavLink extends Base {
     tokens.add("noreferrer");
     return Array.from(tokens).join(" ");
   }
-  disconnectedCallback() {
-    document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
-    super.disconnectedCallback();
-  }
   updated(changedProperties) {
     super.updated(changedProperties);
     this.updateTheme(changedProperties, this.surface);
     if (changedProperties.has("pinned")) {
       if (this.pinned) {
-        document.addEventListener("pointerdown", this.handleDocumentPointerDown);
+        this.overlayDismiss.start();
       } else {
-        document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+        this.overlayDismiss.stop();
       }
     }
     if (changedProperties.has("expanded")) {
       if (this.expanded) {
-        this.layoutChangeController.observe();
+        this.overlayPosition.start();
       } else {
-        this.layoutChangeController.unobserve();
-        this.clearDropdownAlignment();
+        this.overlayPosition.stop();
       }
     }
   }
@@ -1729,35 +1894,6 @@ class NavLink extends Base {
     this.expanded = open;
     this.emit("dsgn-nav-link-toggle", { open });
   }
-  clearDropdownAlignment() {
-    this.style.removeProperty(dropdownShiftProperty);
-  }
-  measureDropdownWidth() {
-    const panel = this.shadowRoot?.querySelector(`#${this.dropdownId}`);
-    if (!panel) {
-      return 0;
-    }
-    const openWidth = panel.getBoundingClientRect().width;
-    if (openWidth) {
-      return openWidth;
-    }
-    panel.style.cssText = "display:block;visibility:hidden";
-    const width = panel.getBoundingClientRect().width;
-    panel.style.cssText = "";
-    return width;
-  }
-  dropdownShift(triggerRect) {
-    const panelWidth = this.measureDropdownWidth();
-    const viewportRight = window.innerWidth - dropdownViewportGutter;
-    if (!panelWidth || triggerRect.left + panelWidth <= viewportRight) {
-      return 0;
-    }
-    const flipped = triggerRect.width - panelWidth;
-    return triggerRect.left + flipped >= dropdownViewportGutter ? flipped : dropdownViewportGutter - triggerRect.left;
-  }
-  updateDropdownAlignment() {
-    this.style.setProperty(dropdownShiftProperty, `${this.dropdownShift(this.getBoundingClientRect())}px`);
-  }
   get hoverOpensDropdown() {
     return this.breakpointController.isAtLeast("sm") && supportsHover();
   }

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

@@ -0,0 +1,157 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type SelectOption, type SelectSizeType } from './Select.props.js';
+/**
+ * Form-associated single-value select, following the WAI-ARIA APG select-only
+ * combobox: a `<button role="combobox">` trigger that keeps DOM focus while
+ * the open `role="listbox"` is navigated through `aria-activedescendant`.
+ *
+ * Renders its own label, hint and error inside the shadow root, next to the
+ * trigger they describe (error read before hint). Inside a `<dsgn-field>`,
+ * Field supplies `label`, `hint`, `error`, `required`, `invalid` and `size`;
+ * see `common/helpers/field-control.ts`.
+ *
+ * The listbox is positioned against the trigger and the viewport: below by
+ * default, flipped above when there isn't room, and shifted to keep a 16px
+ * viewport gutter. It opens in the top layer (`popover="manual"`), so an
+ * ancestor's `overflow` or stacking context cannot clip or cover it; where the
+ * Popover API is missing it falls back to absolute positioning inside the
+ * component. Dismissal stays with the component (not popover light-dismiss),
+ * because focus never leaves the trigger.
+ *
+ * @fires dsgn-change - Fired when the user picks a different option; `detail` is `{ value, name }`. Not fired when the same option is picked again, or when `value` is set programmatically.
+ *
+ * @csspart label - The visible `<label>`.
+ * @csspart required-indicator - The `*` appended to the label when `required`. Hidden from assistive technology; `aria-required` on the trigger is what is announced.
+ * @csspart trigger - The combobox button.
+ * @csspart listbox - The floating option list.
+ * @csspart option - Each option in the list.
+ * @csspart hint - Persistent hint text below the trigger.
+ * @csspart error - Error message, icon and text, below the hint.
+ */
+export declare class Select extends Base {
+    #private;
+    static styles: CSSResultGroup;
+    static formAssociated: boolean;
+    /**
+     * `focus()` on the host (and a click on a `<label>` pointing at it) moves
+     * focus to the trigger.
+     */
+    static shadowRootOptions: ShadowRootInit;
+    constructor();
+    surface: SurfaceType;
+    size: SelectSizeType;
+    /**
+     * The choices, in order. Set as a property, or as a JSON attribute in
+     * plain HTML.
+     */
+    options: SelectOption[];
+    /**
+     * The selected option's `value`, or `''` for none. Not reflected, matching
+     * `dsgn-input`: the value at first render is the default `form.reset()`
+     * returns to.
+     */
+    value: string;
+    /**
+     * Field name under which the value is submitted. Reflected because the
+     * browser builds a form's entry list from the `name` content attribute.
+     */
+    name: string;
+    /** Shown in the trigger while no option is selected. */
+    placeholder: string;
+    label: string;
+    /**
+     * Accessible name for a select with no visible `label`. Ignored when `label`
+     * is set, so the visible text and the announced name cannot disagree.
+     */
+    ariaLabel: string;
+    /** Supporting text below the trigger. Stays visible alongside an error. */
+    hint: string;
+    /** Error message. A non-empty value also marks the select invalid. */
+    error: string;
+    /** Marks the select invalid without a message. */
+    invalid: boolean;
+    disabled: boolean;
+    required: boolean;
+    /**
+     * Disabled state inherited from an ancestor `<fieldset>`, kept apart from
+     * the authored `disabled` so re-enabling the fieldset is never stuck (the
+     * LL-130 fix; see `dsgn-input`).
+     */
+    private _formDisabled;
+    /** Whether the listbox is open (drives `aria-expanded`). */
+    private _open;
+    /** Whether the listbox is displayed — stays true through the exit animation. */
+    private _visible;
+    /** Index of the highlighted option, or -1. */
+    private _activeIndex;
+    private _placement;
+    private _trigger;
+    private _listbox;
+    /** The value `form.reset()` restores, captured at first render. */
+    private _defaultValue;
+    private readonly _typeahead;
+    private readonly _motion;
+    /** Invalidates a pending exit when the listbox reopens. */
+    private _exitRun;
+    /** Fixed at construction: the listbox's rendering mode never changes. */
+    private readonly _topLayer;
+    /** Whether this component has the listbox showing in the top layer. */
+    private _inTopLayer;
+    private _listboxScrollTop;
+    private readonly _position;
+    private readonly _dismiss;
+    private get _isDisabled();
+    private get _isInvalid();
+    private get _selectedIndex();
+    private get _state();
+    /** The selected option if it is enabled, otherwise the first enabled one. */
+    private get _openingIndex();
+    private _openAt;
+    private _close;
+    private _pick;
+    /** Space types into an active typeahead search instead of opening/picking. */
+    private _isTypeahead;
+    private _search;
+    /** Returns whether the key was handled (and its default should be blocked). */
+    private _handleClosedKey;
+    private _handleOpenKey;
+    private _handleKeydown;
+    /** Firefox activates a button on Space keyup; the keydown already acted. */
+    private _handleKeyup;
+    private _handleTriggerClick;
+    private _handleOptionClick;
+    private _handleOptionEnter;
+    /** Keeps focus on the trigger when the listbox is pressed. */
+    private _keepFocus;
+    private _handleBlur;
+    private _syncValidity;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(restored: string | File | FormData | null): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _showListbox;
+    private _hideListbox;
+    private _handleOpenChange;
+    private _scrollActiveIntoView;
+    private _renderLabel;
+    private _renderHint;
+    private _renderError;
+    private _renderOption;
+    /** Name sources shared by the trigger and the listbox. */
+    private get _labelledBy();
+    private get _fallbackName();
+    private _renderTrigger;
+    private _renderListbox;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-select': Select;
+    }
+}