@limetech/lime-elements 40.18.3 → 40.20.0

package/dist/types/components/chart/scale.d.ts

@@ -0,0 +1,101 @@
+import { ChartItem, ChartType } from './chart.types';
+/**
+ * The most steps that an `axisIncrement` may divide a value axis into.
+ */
+export declare const MAX_AXIS_STEPS = 100;
+export interface AxisRange {
+    minValue: number;
+    maxValue: number;
+    totalRange: number;
+    /** Step between adjacent axis lines, used to render the grid. */
+    increment: number;
+}
+/**
+ * Whether the items of a chart of this type are parts of one whole.
+ * @param type - the chart type
+ */
+export declare function isPartOfWhole(type: ChartType): boolean;
+/**
+ * Whether a chart of this type draws its value axis in steps of
+ * `axisIncrement`.
+ * @param type - the chart type
+ */
+export declare function usesAxisIncrement(type: ChartType): boolean;
+/**
+ * Whether the item has a `[start, end]` range, or an `[x, y]` point in a
+ * `scatter` chart, as its value.
+ * @param item - the item
+ */
+export declare function isRangeItem(item: ChartItem): item is ChartItem<[number, number]>;
+/**
+ * The lower end of the item's range, or its value.
+ * @param item - the item
+ */
+export declare function getMinimumValue(item: ChartItem): number;
+/**
+ * The upper end of the item's range, or its value.
+ * @param item - the item
+ */
+export declare function getMaximumValue(item: ChartItem): number;
+/**
+ * The extent of the item's range, or its value measured from zero.
+ * @param item - the item
+ */
+export declare function getValueSpan(item: ChartItem): number;
+/**
+ * The first value of a `scatter` point.
+ * @param item - the point
+ */
+export declare function getXValue(item: ChartItem): number;
+/**
+ * The second value of a `scatter` point.
+ * @param item - the point
+ */
+export declare function getYValue(item: ChartItem): number;
+/**
+ * The value axis of a `bar`, `dot`, `area` or `line` chart. It reaches from
+ * zero, or from the smallest value when that is below zero, up to `maxValue`
+ * or the largest value. Both ends are rounded outwards to a whole step.
+ * Without an `axisIncrement` above zero, or with one that would divide the
+ * axis into more than `MAX_AXIS_STEPS` steps, the step divides the axis into
+ * about ten.
+ * @param items - the items in the chart
+ * @param maxValue - the requested upper bound, if any
+ * @param axisIncrement - the requested step, if any
+ */
+export declare function getAxisRange(items: ChartItem[], maxValue?: number, axisIncrement?: number): AxisRange;
+/**
+ * The range of a chart whose items are parts of one whole: `maxValue`
+ * when set, otherwise the combined item values or range extents. The value
+ * is a scale, not a cap, so the combined size can exceed it. The whole is
+ * not rounded to an axis step, since these types draw no axis and an item's
+ * size has to be its exact share.
+ * @param items - the items in the chart
+ * @param maxValue - the whole, if set
+ */
+export declare function getWholeRange(items: ChartItem[], maxValue?: number): AxisRange;
+/**
+ * The two value axes of a `scatter` chart: `x` for each point's first value
+ * and `y` for its second. Each axis derives its own range and step from its
+ * own zero-anchored span, so positive, negative, and zero-crossing data all
+ * grid sensibly.
+ * @param items - the points in the chart
+ */
+export declare function getScatterRanges(items: ChartItem[]): {
+    x: AxisRange;
+    y: AxisRange;
+};
+/**
+ * An item's share of the whole, in percent.
+ * @param item - the item
+ * @param whole - the range from `getWholeRange`
+ */
+export declare function getShare(item: ChartItem, whole: AxisRange): number;
+/**
+ * The item's value as text: its `formattedValue` when set, otherwise its
+ * value, range, or scatter point.
+ * @param item - the item
+ * @param type - the chart type
+ */
+export declare function formatValue(item: ChartItem, type: ChartType): string;
+//# sourceMappingURL=scale.d.ts.map

package/dist/types/components/chart/theme.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The colors, sizes and font a chart is drawn with. ECharts cannot read CSS
+ * custom properties, so they are resolved from the chart's styles into plain
+ * values.
+ */
+export interface ChartTheme {
+    itemColor: string;
+    /** The line, and the area under it, of `line` and `area` charts. */
+    lineColor: string;
+    axisLineColor: string;
+    textColor: string;
+    backgroundColor: string;
+    dividerColor: string;
+    surfaceColor: string;
+    /** In pixels. */
+    itemBorderRadius: number;
+    /** In pixels. */
+    scatterItemSize: number;
+    fontFamily: string;
+    npsColors: [string, string, string, string];
+    animate: boolean;
+}
+/**
+ * Reads colors and lengths as the chart's own styles resolve them.
+ */
+export interface ThemeReader {
+    /**
+     * The color as `rgb()` or `rgba()`, or `undefined` when the value is not
+     * a color.
+     * @param value - any CSS color, which may use custom properties
+     */
+    color(value: string): string | undefined;
+    theme(): ChartTheme;
+    dispose(): void;
+}
+/**
+ * Creates a reader that resolves values in the given shadow root, where the
+ * chart's private custom properties are defined.
+ * @param root - the chart's shadow root
+ */
+export declare function createThemeReader(root: ShadowRoot): ThemeReader;
+/**
+ * Calls back when the theme of the chart may have changed: when the color
+ * scheme or the reduced motion preference of the system changes, the
+ * `data-theme` attribute of the page does, or the `style` or `class`
+ * attribute of the chart does.
+ * @param host - the chart
+ * @param onChange - called on every change
+ * @returns a function that stops watching
+ */
+export declare function watchTheme(host: HTMLElement, onChange: () => void): () => void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/components/chip-set/chip-set.d.ts

@@ -105,6 +105,19 @@ export declare class ChipSet {
      * True if the control requires a value
      */
     required: boolean;
+    /**
+     * The id of the list of suggestions that the input of a chip set of the
+     * type `input` opens. Used by `limel-picker`.
+     *
+     * @private
+     */
+    suggestionListId?: string;
+    /**
+     * Whether the list of suggestions is open. Used by `limel-picker`.
+     *
+     * @private
+     */
+    suggestionListOpen?: boolean;
     /**
      * Search label to display when type is `input` and component is in search mode
      */
@@ -207,6 +220,7 @@ export declare class ChipSet {
      */
     emptyInput(): Promise<void>;
     componentDidLoad(): void;
+    componentDidRender(): void;
     componentDidUpdate(): void;
     disconnectedCallback(): void;
     render(): any;
@@ -218,6 +232,7 @@ export declare class ChipSet {
     private endEditing;
     protected handleChangeChips(newValue: Chip[], oldValue: Chip[]): void;
     private renderInputChips;
+    private getSuggestionListProps;
     private readonly floatLabelAbove;
     private isFull;
     private isOutlineInvalid;

package/dist/types/components/input-field/input-field.d.ts

@@ -1,4 +1,5 @@
 import { InputType } from '../input-field/input-field.types';
+import { Languages } from '../date-picker/date.types';
 import { IconName } from '../../global/shared-types/icon.types';
 /**
  * @exampleComponent limel-example-input-field-text
@@ -138,6 +139,11 @@ export declare class InputField {
      * list of suggestions `value` can autocomplete to.
      */
     completions: string[];
+    /**
+     * Defines the language for translations. Used for the message that a
+     * screen reader speaks about the suggestions.
+     */
+    language: Languages;
     /**
      * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to
      * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,
@@ -162,7 +168,9 @@ export declare class InputField {
     private isFocused;
     private wasInvalid;
     showCompletions: boolean;
+    private suggestionsEngaged;
     private inputElement?;
+    private readonly suggestionsMessage;
     private mdcTextField;
     private completionsList;
     private portalId;
@@ -173,6 +181,7 @@ export declare class InputField {
     constructor();
     connectedCallback(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     componentDidUpdate(): void;
     /**
@@ -236,7 +245,11 @@ export declare class InputField {
     private readonly closeListWithEscape;
     private handleCompletionChange;
     private readonly hasSuggestions;
+    private readonly isCombobox;
     private readonly isSuggestionListOpen;
+    private readonly pointAtSuggestionList;
+    private readonly renderSuggestionsMessage;
+    private readonly getSuggestionsMessage;
     private renderAutocompleteList;
     private renderListResult;
     private handleKeyDownInDropdown;

package/dist/types/components/list/list-renderer-config.d.ts

@@ -5,5 +5,6 @@ export interface ListRendererConfig {
     badgeIcons?: boolean;
     type?: ListType;
     iconSize?: IconSize;
+    accessibleLabel?: string;
 }
 //# sourceMappingURL=list-renderer-config.d.ts.map

package/dist/types/components/list/list.d.ts

@@ -4,6 +4,7 @@ import { ListType } from './list.types';
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @exampleComponent limel-example-list-basic
+ * @exampleComponent limel-example-list-accessible-label
  * @exampleComponent limel-example-list-secondary
  * @exampleComponent limel-example-list-separator
  * @exampleComponent limel-example-list-icons
@@ -38,6 +39,11 @@ export declare class List {
      * `checkbox`: checkbox list with multiple selection.
      */
     type: ListType;
+    /**
+     * The name of the list, which a screen reader announces when the focus
+     * moves into it.
+     */
+    accessibleLabel?: string;
     /**
      * By default, lists will display 3 lines of text, and then truncate the rest.
      * Consumers can increase or decrease this number by specifying

package/dist/types/components/picker/picker.d.ts

@@ -140,35 +140,41 @@ export declare class Picker {
     private action;
     private items;
     private textValue;
+    private suggestionsEngaged;
     private loading;
     private chips;
     private host;
     private chipSetEditMode;
     private debouncedSearch;
     private chipSet;
+    private readonly suggestionsMessage;
     private portalId;
     constructor();
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     protected onDisabledChange(): void;
     private updateTabIndex;
     componentWillUpdate(): Promise<void>;
-    render(): any[];
+    render(): any;
     protected onChangeValue(): void;
     private renderDelimiter;
     private getValueId;
     private createChips;
     private createChip;
     /**
-     * Renders the dropdown with the items to pick from, or a spinner if the picker
-     * is waiting for items to be received
+     * Collects what the dropdown shows: the items to pick from, or a spinner
+     * if the picker is waiting for items to be received, and the actions. The
+     * dropdown is open when there is anything to show.
      *
-     * @returns picker dropdown
+     * @returns the pieces of the dropdown
      */
-    private renderDropdown;
+    private getDropdownContentList;
+    private getSuggestionsMessage;
     private getActionContent;
     private removeUnusedPropertiesOnAction;
+    private canOpenList;
     private shouldShowDropDownContent;
     private getDropdownContent;
     /**
@@ -179,6 +185,7 @@ export declare class Picker {
      */
     private isFull;
     private renderSpinner;
+    private getEmptyResultMessage;
     private renderEmptyMessage;
     private renderListResult;
     private onListKeyDown;

package/dist/types/components/popover/popover.d.ts

@@ -104,6 +104,5 @@ export declare class Popover {
     private setTriggerAttributes;
     private getNamedPopupRole;
     private warnIfRoleHasNoName;
-    private setControlledPopup;
 }
 //# sourceMappingURL=popover.d.ts.map

package/dist/types/components.d.ts

@@ -16,7 +16,7 @@ import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
 import { Image } from "./global/shared-types/image.types";
 import { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
-import { ChartItem } from "./components/chart/chart.types";
+import { ChartItem, ChartType } from "./components/chart/chart.types";
 import { Label, LabelValue } from "./components/dynamic-label/label.types";
 import { Link } from "./global/shared-types/link.types";
 import { Chip, ChipType } from "./components/chip-set/chip.types";
@@ -68,7 +68,7 @@ export { Button } from "./components/button/button.types";
 export { CalloutType } from "./components/callout/callout.types";
 export { Image } from "./global/shared-types/image.types";
 export { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
-export { ChartItem } from "./components/chart/chart.types";
+export { ChartItem, ChartType } from "./components/chart/chart.types";
 export { Label, LabelValue } from "./components/dynamic-label/label.types";
 export { Link } from "./global/shared-types/link.types";
 export { Chip, ChipType } from "./components/chip-set/chip.types";
@@ -547,7 +547,6 @@ export namespace Components {
      * @exampleComponent limel-example-chart-accessibility
      * @exampleComponent limel-example-chart-axis-labels
      * @exampleComponent limel-example-chart-styling
-     * @exampleComponent limel-example-chart-creative-styling
      * @beta 
      */
     interface LimelChart {
@@ -564,7 +563,7 @@ export namespace Components {
          */
         "accessibleValuesLabel"?: string;
         /**
-          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. Has no effect on other chart types.
+          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types.
          */
         "axisIncrement"?: number;
         /**
@@ -614,16 +613,7 @@ export namespace Components {
           * Defines how items are visualized in the chart.
           * @default 'stacked-bar'
          */
-        "type"?: | 'area'
-        | 'bar'
-        | 'doughnut'
-        | 'line'
-        | 'nps'
-        | 'pie'
-        | 'ring'
-        | 'dot'
-        | 'scatter'
-        | 'stacked-bar';
+        "type"?: ChartType;
     }
     /**
      * The Checkbox component is a classic and essential element in UI design that allows
@@ -945,6 +935,16 @@ export namespace Components {
           * @returns does not return anything, but methods have to be async
          */
         "setFocus": (emptyInput?: boolean) => Promise<void>;
+        /**
+          * The id of the list of suggestions that the input of a chip set of the type `input` opens. Used by `limel-picker`.
+          * @private
+         */
+        "suggestionListId"?: string;
+        /**
+          * Whether the list of suggestions is open. Used by `limel-picker`.
+          * @private
+         */
+        "suggestionListOpen"?: boolean;
         /**
           * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
          */
@@ -2370,6 +2370,11 @@ export namespace Components {
           * The input label.
          */
         "label": string;
+        /**
+          * Defines the language for translations. Used for the message that a screen reader speaks about the suggestions.
+          * @default 'en'
+         */
+        "language": Languages;
         /**
           * Leading icon to show to the far left in the field.
          */
@@ -2476,6 +2481,7 @@ export namespace Components {
     }
     /**
      * @exampleComponent limel-example-list-basic
+     * @exampleComponent limel-example-list-accessible-label
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -2491,6 +2497,10 @@ export namespace Components {
      * @exampleComponent limel-example-list-primary-component
      */
     interface LimelList {
+        /**
+          * The name of the list, which a screen reader announces when the focus moves into it.
+         */
+        "accessibleLabel"?: string;
         /**
           * Set to `true` if the list should display larger icons with a background
          */
@@ -4998,7 +5008,6 @@ declare global {
      * @exampleComponent limel-example-chart-accessibility
      * @exampleComponent limel-example-chart-axis-labels
      * @exampleComponent limel-example-chart-styling
-     * @exampleComponent limel-example-chart-creative-styling
      * @beta 
      */
     interface HTMLLimelChartElement extends Components.LimelChart, HTMLStencilElement {
@@ -6054,6 +6063,7 @@ declare global {
     }
     /**
      * @exampleComponent limel-example-list-basic
+     * @exampleComponent limel-example-list-accessible-label
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -7771,7 +7781,6 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-chart-accessibility
      * @exampleComponent limel-example-chart-axis-labels
      * @exampleComponent limel-example-chart-styling
-     * @exampleComponent limel-example-chart-creative-styling
      * @beta 
      */
     interface LimelChart {
@@ -7788,7 +7797,7 @@ declare namespace LocalJSX {
          */
         "accessibleValuesLabel"?: string;
         /**
-          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. Has no effect on other chart types.
+          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types.
          */
         "axisIncrement"?: number;
         /**
@@ -7842,16 +7851,7 @@ declare namespace LocalJSX {
           * Defines how items are visualized in the chart.
           * @default 'stacked-bar'
          */
-        "type"?: | 'area'
-        | 'bar'
-        | 'doughnut'
-        | 'line'
-        | 'nps'
-        | 'pie'
-        | 'ring'
-        | 'dot'
-        | 'scatter'
-        | 'stacked-bar';
+        "type"?: ChartType;
     }
     /**
      * The Checkbox component is a classic and essential element in UI design that allows
@@ -8189,6 +8189,16 @@ declare namespace LocalJSX {
           * Search label to display when type is `input` and component is in search mode
          */
         "searchLabel"?: string;
+        /**
+          * The id of the list of suggestions that the input of a chip set of the type `input` opens. Used by `limel-picker`.
+          * @private
+         */
+        "suggestionListId"?: string;
+        /**
+          * Whether the list of suggestions is open. Used by `limel-picker`.
+          * @private
+         */
+        "suggestionListOpen"?: boolean;
         /**
           * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
          */
@@ -9703,6 +9713,11 @@ declare namespace LocalJSX {
           * The input label.
          */
         "label"?: string;
+        /**
+          * Defines the language for translations. Used for the message that a screen reader speaks about the suggestions.
+          * @default 'en'
+         */
+        "language"?: Languages;
         /**
           * Leading icon to show to the far left in the field.
          */
@@ -9817,6 +9832,7 @@ declare namespace LocalJSX {
     }
     /**
      * @exampleComponent limel-example-list-basic
+     * @exampleComponent limel-example-list-accessible-label
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -9832,6 +9848,10 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-list-primary-component
      */
     interface LimelList {
+        /**
+          * The name of the list, which a screen reader announces when the focus moves into it.
+         */
+        "accessibleLabel"?: string;
         /**
           * Set to `true` if the list should display larger icons with a background
          */
@@ -12063,16 +12083,7 @@ declare namespace LocalJSX {
         "displayItemText": boolean;
         "displayItemValue": boolean;
         "displayItemPercentage": boolean;
-        "type": | 'area'
-        | 'bar'
-        | 'doughnut'
-        | 'line'
-        | 'nps'
-        | 'pie'
-        | 'ring'
-        | 'dot'
-        | 'scatter'
-        | 'stacked-bar';
+        "type": ChartType;
         "orientation": 'landscape' | 'portrait';
         "maxValue": number;
         "axisIncrement": number;
@@ -12114,6 +12125,8 @@ declare namespace LocalJSX {
         "inputType": 'search' | 'text';
         "maxItems": number;
         "required": boolean;
+        "suggestionListId": string;
+        "suggestionListOpen": boolean;
         "searchLabel": string;
         "emptyInputOnBlur": boolean;
         "emptyInputOnChange": boolean;
@@ -12358,6 +12371,7 @@ declare namespace LocalJSX {
         "min": number;
         "maxlength": number;
         "minlength": number;
+        "language": Languages;
         "showLink": boolean;
         "locale": string;
     }
@@ -12371,6 +12385,7 @@ declare namespace LocalJSX {
         "badgeIcons": boolean;
         "iconSize": IconSize;
         "type": ListType;
+        "accessibleLabel": string;
         "maxLinesSecondaryText": number;
     }
     interface LimelListItemAttributes {
@@ -12973,7 +12988,6 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-chart-accessibility
              * @exampleComponent limel-example-chart-axis-labels
              * @exampleComponent limel-example-chart-styling
-             * @exampleComponent limel-example-chart-creative-styling
              * @beta 
              */
             "limel-chart": LocalJSX.IntrinsicElements["limel-chart"] & JSXBase.HTMLAttributes<HTMLLimelChartElement>;
@@ -13605,6 +13619,7 @@ declare module "@stencil/core" {
             "limel-linear-progress": LocalJSX.IntrinsicElements["limel-linear-progress"] & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
             /**
              * @exampleComponent limel-example-list-basic
+             * @exampleComponent limel-example-list-accessible-label
              * @exampleComponent limel-example-list-secondary
              * @exampleComponent limel-example-list-separator
              * @exampleComponent limel-example-list-icons

package/dist/types/translations/da.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=da.d.ts.map

package/dist/types/translations/de.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=de.d.ts.map

package/dist/types/translations/en.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=en.d.ts.map

package/dist/types/translations/fi.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=fi.d.ts.map

package/dist/types/translations/fr.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=fr.d.ts.map

package/dist/types/translations/nl.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=nl.d.ts.map

package/dist/types/translations/no.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=no.d.ts.map

package/dist/types/translations/sv.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
     'pagination.page-range': string;
     'pagination.go': string;
     'dock.show-labels': string;
+    'suggestions.available': string;
 };
 export default _default;
 //# sourceMappingURL=sv.d.ts.map

package/dist/types/util/controlled-element.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Says that `owner` controls the element with the given id, for example the
+ * list that a field opens. An id only finds elements in the same DOM tree, so
+ * where the browser allows it, the element itself is referenced instead.
+ *
+ * @param owner - The element that controls the other one.
+ * @param id - The id of the controlled element, which may not exist yet.
+ * `null` says that nothing is controlled.
+ */
+export declare const setControlledElement: (owner: HTMLElement, id: string | null) => void;
+//# sourceMappingURL=controlled-element.d.ts.map