@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/types/components/duet-modal/duet-modal.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { A11yComponent, ThemeableComponent } from "../../common";
+import { A11yComponent, FocusableComponent, ThemeableComponent } from "../../common";
 import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme, DuetVisualHeadingLevel } from "../../common-types";
 export type DuetModalSize = "small" | "medium" | "large";
 export type DuetModalVariation = "default" | "slide-up" | "loader";
@@ -132,6 +132,18 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
      * Use this property when you want the modal to close when clicked outside of modal.
      */
     closeOnBlur: boolean;
+    /**
+     * Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the
+     * element as a string. Use empty string to disable focus moving on close - do this if after closing there is
+     * another element that automatically gets the focus or you handle focusing manually.
+     */
+    focusElementOnClose: FocusableComponent | HTMLElement | string;
+    /**
+     * Makes either the entire modal ("all"), headign and body content ("heading"), or just its body content ("body")
+     * an aria-live region, so that changes are announced by the screen readers. Do not use with loader variation,
+     * as it handles aria-live separately.
+     */
+    accessibleAnnounceChanges: "all" | "heading" | "body";
     /**
      * Emitted when the modal is opened.
      */
@@ -170,6 +182,10 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
      * that triggered the modal (if we’re still in the same view).
      */
     hide(): Promise<void>;
+    /**
+     * Set focus on the close button of the modal.
+     */
+    focusCloseButton(): Promise<void>;
     /**
      * Scolls the top of the modal's content into view
      *

package/lib/types/components/duet-notification/duet-notification.d.ts

@@ -56,5 +56,6 @@ export declare class DuetNotification implements ThemeableComponent {
      * @param options
      */
     setFocus(options?: FocusOptions): Promise<void>;
+    private getAriaLabelText;
     render(): any;
 }

package/lib/types/components/duet-number-input/duet-number-input.d.ts

@@ -30,7 +30,8 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
      */
     language: DuetLanguage;
     /**
-     * Locale used to format the entered value.
+     * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands
+     * separators would break keyboard input.
      */
     locale: DuetLocale;
     /**
@@ -77,7 +78,8 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
      */
     accessibleLiveDefaults: DuetLangObject | string;
     /**
-     * Format of message used to announce current amount when switching between amounts.
+     * Format of message used to announce current amount when switching between amounts. Note that the default has "euros"
+     * so if you use another unit is is essential you set this attribute to reflect that unit.
      * The string {current} is replaced with the current amount.
      * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
      */
@@ -234,6 +236,7 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
     private setValue;
     private add;
     private subtract;
+    private getUnitString;
     private formatAnnouncement;
     /**
      * render() function

package/lib/types/components/duet-overlay/duet-overlay.d.ts

@@ -6,6 +6,10 @@ export type OverlayDisplayDevice = "x-small" | "not-x-small" | "small" | "not-sm
  * This component is for internal use.
  */
 export declare class DuetOverlay implements ThemeableComponent {
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
     /**
      * Open
      */

package/lib/types/components/duet-panel/duet-panel.d.ts

@@ -0,0 +1,47 @@
+import { DuetMargin, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
+type DuetPanelPalette = "default" | "accent";
+type DuetPanelPaletteVariation = "primary" | "secondary";
+export type DuetPanelVariation = "" | `${DuetPanelPalette}` | `${DuetPanelPaletteVariation}` | `${DuetPanelPalette}-${DuetPanelPaletteVariation}` | `${DuetPanelPaletteVariation}-${DuetPanelPalette}`;
+export declare class DuetPanel implements ThemeableComponent {
+    element: HTMLElement;
+    /**
+     * Theme of the panel.
+     */
+    theme: DuetTheme;
+    /**
+     * Controls the padding of the component. Padding is automatically responsive.
+     */
+    padding: "small" | "medium" | "large";
+    /**
+     * The color variation of the panel. Combination of palette ("default", "accent") and palette variation ("primary",
+     * "secondary"). You can ommit "default" and "primary" - they are the defaults.
+     */
+    variation: DuetPanelVariation;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Set this attribute to draw a border around the panel.
+     */
+    border: boolean;
+    /**
+     * Adds accessible label for the panel that is only shown for screen readers.
+     */
+    accessibleLabel: string;
+    /**
+     * Indicates the id of a component that labels the panel.
+     */
+    accessibleLabelledBy: string;
+    /**
+     * Indicates the id of a component that describes the panel.
+     */
+    accessibleDescribedBy: string;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    render(): any;
+}
+export {};

package/lib/types/components/duet-paragraph/duet-paragraph.d.ts

@@ -8,6 +8,7 @@ export type DuetParagraphVariation = "default" | "intro";
  */
 export declare class DuetParagraph implements ThemeableComponent {
     private id;
+    private inheritingParents;
     /**
      * Reference to host HTML element.
      */

package/lib/types/components/duet-phone-input/duet-phone-input.d.ts

@@ -0,0 +1,178 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, ThemeableComponent } from "../../common";
+import { DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
+import { Country } from "../../data/countries";
+import { DuetLangObject } from "../../utils/language-utils";
+export type DuetPhoneInputEvent = {
+    originalEvent?: Event;
+    component: "duet-phone-input";
+    value: string;
+    countryCode?: string;
+};
+export declare class DuetPhoneInput implements ThemeableComponent, A11yComponent {
+    private duetInputElement;
+    private countryCodeButton;
+    private countryCodePopup;
+    private countriesToList;
+    private countryFlagCDNUrl;
+    private inputId;
+    private buttonAriaLabel;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    language: DuetLanguage;
+    currentCountry: Country | "error";
+    /**
+     * Theme of the input.
+     */
+    theme: DuetTheme;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    expand: boolean;
+    /**
+     * Adds a unique identifier for the input.
+     */
+    identifier: string;
+    /**
+     * Details of the component
+     */
+    accessibleDetails: string;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    accessibleLabelledBy: string;
+    /**
+     * Aria description the button
+     */
+    accessibleDescription: string;
+    /**
+     * Indicates the id of a component that describes the input.
+     */
+    accessibleDescribedBy: string;
+    /**
+     * Makes the phone input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    disabled: boolean;
+    /**
+     * Set whether the input is required or not. Please note that this is required for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    required: boolean;
+    /**
+     * The phone input itself contains a comprehensive list of countries and their telephone country codes and it is
+     * advisable to hold to that. There may be situations where the set of possible country codes is narrowed down: e.g.
+     * if we have established that the person giving their details has a Nordic phone number, then we can give a narrowed
+     * down list. Do not make unjustified assumptions: e.g. a Finnish company may well have employees in Afganistan or
+     * Bhutan. List of countries can be given either as array of ISO 3166-1 alpha-2 codes or array of objects with keys:
+     * en, fi, sv, isoCode (two uppercase letters), telephoneCountryCode (one to three digits), or JSON array string of
+     * either two.
+     */
+    get countries(): Country[] | string[] | string;
+    set countries(countriesProp: Country[] | string[] | string);
+    /**
+     * Defaults for Label
+     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+     */
+    labelDefaults: DuetLangObject | string;
+    /**
+     * Label for the number input.
+     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+     */
+    label: string;
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    labelHidden: boolean;
+    /**
+     * Caption (underneath label) that can be set as a way of adding extra information
+     */
+    caption: string;
+    /**
+     * Name of the input.
+     */
+    name: string;
+    /**
+     * Display the input in error state along with an error message.
+     */
+    error: string;
+    /**
+     * Tooltip to display next to the label of the input.
+     */
+    tooltip: string;
+    /**
+     * Use maxlength to specify the maximum length of the value that can be entered.
+     */
+    maxlength: number;
+    /**
+     * Use minlength to specify the minimum length of the value that can be entered.
+     */
+    minlength: number;
+    /**
+     * Value of the input.
+     */
+    get value(): string;
+    set value(val: string);
+    /**
+     * If the value is set above before the component has rendered, the ref to duetInputElement has not yet been set.
+     * In these cases we set the value to this.pendingValue and after the first render pass it on to this.duetInputElement.
+     */
+    private pendingValue;
+    /**
+     * This is a proxy for the enclosed native inputs validity
+     */
+    get validity(): ValidityState;
+    /**
+     * Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes.
+     * @default ["FI", "SE"]
+     */
+    listFirst: string | string[];
+    /**
+     * Emitted when the value has changed.
+     */
+    duetChange: EventEmitter<DuetPhoneInputEvent>;
+    /**
+     * Emitted when a keyboard input has ocurred.
+     */
+    duetInput: EventEmitter<DuetPhoneInputEvent>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    duetBlur: EventEmitter<DuetPhoneInputEvent>;
+    /**
+     * Emitted when the input has focus.
+     */
+    duetFocus: EventEmitter<DuetPhoneInputEvent>;
+    /**t
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Sets focus on the contained input element, use this instead of the native `input.focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    private setListFirstCountries;
+    private handleFocus;
+    private handleChange;
+    private handleBlur;
+    private handleInput;
+    private handleCountryCodeSelectorOpen;
+    private handleCountryCodeSelectorSelect;
+    private setInputCountryCode;
+    private findCountryCode;
+    private findCountryForCode;
+    private renderFlag;
+    private getFlagForButton;
+    render(): any;
+}

package/lib/types/components/duet-popup-menu/duet-popup-menu.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { FocusableComponent, OpenerComponent, ThemeableComponent } from "../../common";
-import { DuetTheme } from "../../common-types";
+import { DuetLanguage, DuetTheme } from "../../common-types";
 export type DuetPopupMenuEvent = {
     open: boolean;
     component: "duet-popup-menu";
@@ -9,8 +9,12 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     private teleport;
     private menuElement;
     private openButton;
-    private _controller?;
     private autoUpdateCleanup;
+    private filterInput?;
+    private filterLabel;
+    private filterResultCountLabel;
+    private disconnectController;
+    private eventListenerController;
     /**
      * Reference to host HTML element.
      */
@@ -18,6 +22,8 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     open: boolean;
     menuY: number;
     menuX: number;
+    filterResultCount: number;
+    language: DuetLanguage;
     /**
      * Adds accessible label for the menu that is only presented for users of assistive technologies.
      * A popup menu should always have an accessible label that describes the popup's function.
@@ -39,8 +45,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
      * the component automatically sets the click event listener to open and close the popup-menu.
      */
-    get controller(): string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
-    set controller(value: string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent));
+    controller: string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
     /**
      * Alias for property controller.
      */
@@ -52,7 +57,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      */
     placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
     /**
-     * Force placement.
+     * Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute.
      */
     forcePlacement: boolean;
     /**
@@ -83,6 +88,10 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      * Limit the amount of visible items in Popup Menu before showing a scroll bar.
      */
     scrollLimit: number;
+    /**
+     * Show input where user can type to filter popup-menu items to those that have a match in value or text content
+     */
+    showFilterInput: boolean;
     /**
      * Emitted when the popup menu is opened or closed.
      */
@@ -117,11 +126,16 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      */
     toggle(): Promise<void>;
     handleOpenChange(newValue: any, oldValue: any): void;
+    handleControllerChange(newValue: any, oldValue: any): void;
     private setOpenButton;
     private openButtonEventListener;
     private updatePlacement;
     private get itemElements();
+    private getAllPrecedingMatchingSiblings;
     private get popupMenuStyleHeight();
     private getFocusedItemIndex;
+    private getNonFilteredItems;
+    private filterItems;
+    private handleKeyDownOnFilter;
     render(): any;
 }

package/lib/types/components/duet-popup-menu-item/duet-popup-menu-item.d.ts

@@ -9,6 +9,7 @@ export type DuetPopupMenuItemEvent = {
 export declare class DuetPopupMenuItem implements ThemeableComponent {
     focus: boolean;
     private itemElement;
+    private isSafariBrowser;
     /**
      * Reference to host HTML element.
      */

package/lib/types/components/duet-promo-card/duet-promo-card.d.ts

@@ -33,6 +33,10 @@ export declare class DuetPromoCard implements ThemeableComponent {
      * Image. Example image is 512x341;
      */
     image: string;
+    /**
+     * Alt attribute text for the image. If not provided, image is assigned presentation role.
+     */
+    imageAlt: string;
     /**
      * The actual heading level used in the HTML markup.
      */

package/lib/types/components/duet-radio-group/duet-radio-group.d.ts

@@ -67,6 +67,7 @@ export declare class DuetRadioGroup implements ThemeableComponent {
      * Determines, whether the control is disabled or not.
      */
     disabled: boolean;
+    removeDisabledAttributeWhenFalse(): void;
     /**
      * Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well.
      */

package/lib/types/components/duet-scrollable/duet-scrollable.d.ts

@@ -42,6 +42,10 @@ export declare class DuetScrollable implements ThemeableComponent {
      * Vertical alignment of the previous and forward buttons. Defaults to center.
      */
     buttonAlignment: "top" | "center" | "bottom";
+    /**
+     * @internal
+     */
+    buttonPosition: "absolute" | "relative";
     /**
      * Center the scrollable list. Defaults to false.
      */
@@ -51,11 +55,20 @@ export declare class DuetScrollable implements ThemeableComponent {
      * overflowing elements, such as shadows or outlines.
      */
     padding: DuetOverflowPadding;
+    /**
+     * @internal
+     */
+    gap: "none" | "large";
     /**
      * Selected element
      */
     selected: number;
     watchPropHandler(newValue: number): void;
+    /**
+     * Enables stretch mode for tab groups
+     * @internal
+     */
+    stretch: boolean;
     /**
      * Component lifecycle events.
      */
@@ -68,6 +81,10 @@ export declare class DuetScrollable implements ThemeableComponent {
     private getScrollPaneElements;
     /**
      * Check if scrolling is needed.
+     *
+     * @param element - The element to check.
+     * @param threshold - The threshold to allow content to be slightly wider before showing buttons.
+     *                    Defaults to half of the overlay width, since gradient is 10px wide with 50/50 split.
      */
     private checkScrollingNeeded;
     private getLastVisibleElement;
@@ -77,7 +94,7 @@ export declare class DuetScrollable implements ThemeableComponent {
     private scrollLeft;
     private scrollRight;
     private collapsedOnClick;
-    private renderFadeOverlay;
+    private getOverlayWidth;
     private renderButton;
     /**
      * render() function

package/lib/types/components/duet-select/duet-select.d.ts

@@ -34,6 +34,7 @@ export declare class DuetSelect implements ThemeableComponent, InputComponent {
     private topCaptionPlaceholderId;
     private isCaptionVisible;
     private nativeSelect?;
+    private proxyId;
     /**
      * Reference to host HTML element.
      */
@@ -176,6 +177,7 @@ export declare class DuetSelect implements ThemeableComponent, InputComponent {
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    componentDidRender(): void;
     /**
      * Component event handling.
      */

package/lib/types/components/duet-share-chart/duet-share-chart.d.ts

@@ -0,0 +1,34 @@
+import { ThemeableComponent } from "../../common";
+import { DuetColor, DuetTheme } from "../../common-types";
+interface ShareChartItem {
+    text: string;
+    value: number;
+    color: DuetColor;
+}
+export declare class DuetShareChart implements ThemeableComponent {
+    private childObserver;
+    private itemsTotalValue;
+    private defaultColors;
+    element: HTMLElement;
+    items: ShareChartItem[];
+    /**
+     * Theme of the component.
+     */
+    theme: DuetTheme;
+    /**
+     * The string to show after each items value. When using "%" the enclosed items' values should add up to 100.
+     */
+    unit: string;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Local methods
+     */
+    private updateChartItems;
+    render(): any;
+}
+export {};

package/lib/types/components/duet-share-chart-item/duet-share-chart-item.d.ts

@@ -0,0 +1,13 @@
+import { DuetColor } from "../../common-types";
+export declare class DuetShareChartItem {
+    element: HTMLElement;
+    /**
+     * The value of the item.
+     */
+    value: number;
+    /**
+     * The color to use in the graph given as a Duet color token. If left out, the Share chart picks a color from a default set.
+     */
+    color: DuetColor;
+    render(): any;
+}

package/lib/types/components/duet-show-more/duet-show-more.d.ts

@@ -10,6 +10,7 @@ export declare class DuetShowMore implements ThemeableComponent {
     private contentElement;
     private contentId;
     private buttonId;
+    private isSafariBrowser;
     element: HTMLElement;
     buttonAriaOpen: boolean;
     /**

package/lib/types/components/duet-slideout/duet-slideout.d.ts

@@ -25,7 +25,8 @@ export declare class DuetSlideout implements ThemeableComponent {
     private mutationObserver;
     private teleport;
     private hasStickyHeaderSlot;
-    private _opener?;
+    private disconnectController;
+    private eventListenerController;
     /**
      * Reference to host HTML element.
      */
@@ -49,8 +50,7 @@ export declare class DuetSlideout implements ThemeableComponent {
      * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
      * the component automatically sets the click event listener to open the slideout.
      */
-    get opener(): string | (HTMLElement & FocusableComponent & OpenerComponent);
-    set opener(value: string | (HTMLElement & FocusableComponent & OpenerComponent));
+    opener: string | (HTMLElement & FocusableComponent & OpenerComponent);
     /**
      * Alias for property opener.
      */
@@ -79,6 +79,7 @@ export declare class DuetSlideout implements ThemeableComponent {
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleOpenChange(newValue: any, oldValue: any): void;
+    handleOpenerChange(newValue: any, oldValue: any): void;
     private setOpenButton;
     private setStickHeaderStyleMutations;
     private openButtonEventListener;

package/lib/types/components/duet-slideout-link/duet-slideout-link.d.ts

@@ -1,5 +1,6 @@
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetSlideoutLink implements ThemeableComponent {
     /**
      * Own Properties.
@@ -47,10 +48,26 @@ export declare class DuetSlideoutLink implements ThemeableComponent {
      * Indicates the component is used where aria-role menuitem is expected
      */
     menuItem: boolean;
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternalDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternal: string;
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    external: boolean;
     /**
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * render() function
      * Always the last one in the class.

package/lib/types/components/duet-spinner/duet-spinner.d.ts

@@ -2,6 +2,7 @@ import { DuetColor, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetSpinnerSize = "small" | "medium" | "large";
 export declare class DuetSpinner implements ThemeableComponent {
+    element: HTMLElement;
     /**
      * Adds accessible label for the spinner that is only shown for screen readers.
      */
@@ -11,6 +12,10 @@ export declare class DuetSpinner implements ThemeableComponent {
      * Example: "color-primary". This property can also be set to "currentColor"
      * which forces the icon to use the CSS text color of parent element instead.
      * Useful when you want to control the color in stylesheet instead.
+     * Note that in earlier versions the color has defaulted to "gray-lightest", but
+     * in a future release it will change to undefined, so that the color will be
+     * the theme's primary. If you have relied on not defining color to result in
+     * white, it is advisable to update your code to explicitly define it.
      */
     color: DuetColor;
     /**
@@ -18,9 +23,7 @@ export declare class DuetSpinner implements ThemeableComponent {
      */
     size: DuetSpinnerSize;
     /**
-     * Theme of the spinner. When used this will override the color setting and
-     * use "primary" or "primary-turva" as the color depending on which theme
-     * is chosen.
+     * Theme of the spinner.
      */
     theme: DuetTheme;
     /**

package/lib/types/components/duet-status-icon/duet-status-icon.d.ts

@@ -0,0 +1,27 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+import { DuetIconSize, DuetMargin, DuetStatus } from "../../common-types";
+export declare class DuetStatusIcon implements ComponentInterface {
+    private bg;
+    private color;
+    /**
+     * Status the icon indicates
+     */
+    variation: DuetStatus;
+    /**
+     * Icon size. Entered as one of the icon size design tokens.
+     */
+    size: DuetIconSize;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Use strong background color when the icon would not otherwise stand out from the surrounding background.
+     */
+    strong: boolean;
+    private getVariation;
+    private getBg;
+    private getColor;
+    private getIcon;
+    render(): any;
+}