@skf-design-system/ui-components 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -66,7 +66,7 @@ export type SkfAccordionProps = {
   /** Defines which heading element will be rendered */
   "heading-as"?: "h1" | "h2" | "h3" | "h4";
   /** If true, adds a gap between each item */
-  gap?: boolean | undefined;
+  gap?: boolean;
   /** If true, allowes multiple accordion items to open */
   multiple?: boolean | undefined;
   /** If true, renders the small version */
@@ -75,6 +75,115 @@ export type SkfAccordionProps = {
   truncate?: boolean | undefined;
 };
 
+export type SkfCardProps = {
+  /** If true, removes border */
+  "no-border"?: boolean;
+  /** If true, removes padding */
+  "no-padding"?: boolean;
+  /** If true, the Card fills the parent element height */
+  stretch?: boolean;
+};
+
+export type SkfCheckboxProps = {
+  /** If true, sets disabled state */
+  disabled?: boolean;
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: boolean;
+  /** If defined, outputs helping hints in console */
+  debug?: boolean | undefined;
+  /** If true, outputs helping hints in console */
+  checked?: boolean | undefined;
+  /** If true, forces component to invalid state until removed */
+  "custom-invalid"?: boolean | undefined;
+  /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
+  indeterminate?: boolean | undefined;
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  label?: string | undefined;
+  /** If defined, adds name to the input-element */
+  name?: string | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** If defined, styles checkbox using provided severity */
+  severity?: "alert" | "success" | "info" | "warning";
+  /** If true, displays valid state after interaction */
+  "show-valid"?: boolean | undefined;
+  /** Size of the checkbox */
+  size?: "sm" | "md";
+  /** The current value of the input field */
+  value?: string;
+
+  /** {object} - When the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfCollapseProps = {
+  /** If true, will animate the expand/collapse state */
+  animated?: boolean;
+  /** If true, will set the collapse to be expanded by default */
+  expanded?: boolean;
+  /** Heading for the collapse */
+  heading?: string | undefined;
+  /** Defines which heading element will be rendered */
+  "heading-as"?: "h2" | "h3" | "h4";
+  /** If true, renders the small version */
+  small?: boolean;
+  /** If true, will truncate the heading in collapsed state */
+  truncate?: boolean;
+
+  /** Event emitted when toggled */
+  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type SkfDialogProps = {
+  /** If defined, sets the aria-label for the close button */
+  "close-button-aria-label"?: string | undefined;
+  /** Title for the modal/dialog */
+  heading?: string | undefined;
+  /** If true, makes the dialog stretch edge to edge on screen */
+  fullscreen?: boolean;
+  /** If true, removes the close button */
+  "no-close-button"?: boolean;
+  /** If defined, removes the inner padding */
+  "no-padding"?: boolean;
+  /**  */
+  open?: boolean | null | undefined;
+  /** If provided, will run function on dialog close */
+  onClose?: ((event: Event) => void) | null | undefined;
+  /** Method that opens the dialog in modal state */
+  showModal?: string;
+  /** Method that closes the dialog */
+  close?: string;
+  /** Fires when the dialog is opened (after transitioned in) */
+  "onskf-dialog-open"?: (e: CustomEvent<never>) => void;
+  /** Fires when the dialog is closed (before transitioned out) */
+  "onskf-dialog-close"?: (e: CustomEvent<never>) => void;
+  /** Fires when the dialog is closed (after transitioned out) */
+  onclose?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfAlertProps = {
+  /** If true, alert is being used as a toast (alertdialog) with an close button */
+  closeable?: boolean | undefined;
+  /** Close button aria-label */
+  "button-label"?: string;
+  /** If defined, displays leading icon */
+  icon?: SkfIcon["name"] | undefined;
+  /** If defined, gives the supplied appearance */
+  severity?: "error" | "info" | "warning" | "success" | "alert";
+
+  /** Fires when the close button is clicked */
+  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfDividerProps = {
+  /** Defines the Divider color */
+  color?: "emphasised" | "primary" | "secondary" | "tertiary" | "inverse";
+  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+  decorative?: boolean;
+  /** If true, renders the divider vertically */
+  vertical?: boolean;
+};
+
 export type SkfButtonProps = {
   /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
   destructive?: boolean;
@@ -237,96 +346,17 @@ export type SkfButtonProps = {
   "icon-position"?: "left" | "right" | undefined;
   /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
   loading?: boolean;
+  /**  */
+  "no-validate"?: boolean;
   /** If provided, displays an alternative size */
   size?: "sm" | "md" | "lg";
   /** If provided, changes the button type */
   type?: "button" | "submit" | "reset";
   /** If provided, alters the appearance */
   variant?: "primary" | "secondary";
-};
-
-export type SkfCardProps = {
-  /** If true, removes border */
-  "no-border"?: boolean | undefined;
-  /** If true, removes padding */
-  "no-padding"?: boolean | undefined;
-  /** If true, the Card fills the parent element height */
-  stretch?: boolean | undefined;
-};
-
-export type SkfAlertProps = {
-  /** If true, alert is being used as a toast (alertdialog) with an close button */
-  closeable?: boolean | undefined;
-  /** Close button aria-label */
-  "button-label"?: string;
-  /** If defined, displays leading icon */
-  icon?: SkfIcon["name"] | undefined;
-  /** If defined, gives the supplied appearance */
-  severity?: "error" | "info" | "warning" | "success" | "alert";
 
-  /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
-};
-
-export type SkfCheckboxProps = {
-  /** If true, sets disabled state */
-  disabled?: boolean;
-  /** If true, value is required or must be checked for the form to be submittable */
-  required?: boolean;
-  /** If defined, outputs helping hints in console */
-  debug?: boolean | undefined;
-  /** If true, outputs helping hints in console */
-  checked?: boolean | undefined;
-  /** If true, forces component to invalid state until removed */
-  "custom-invalid"?: boolean | undefined;
-  /** If true, hides the label visually */
-  "hide-label"?: boolean | undefined;
-  /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
-  indeterminate?: boolean | undefined;
-  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
-  label?: string | undefined;
-  /** If defined, adds name to the input-element */
-  name?: string | undefined;
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
-  /** If defined, styles checkbox using provided severity */
-  severity?: "alert" | "success" | "info" | "warning";
-  /** If true, displays valid state after interaction */
-  "show-valid"?: boolean | undefined;
-  /** Size of the checkbox */
-  size?: "sm" | "md";
-  /** The current value of the input field */
-  value?: string;
-
-  /** {object} - When the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
-};
-
-export type SkfDividerProps = {
-  /** Defines the Divider color */
-  color?: "emphasised" | "primary" | "secondary" | "tertiary" | "inverse";
-  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  decorative?: boolean | undefined;
-  /** If true, renders the divider vertically */
-  vertical?: boolean | undefined;
-};
-
-export type SkfCollapseProps = {
-  /** If true, will animate the expand/collapse state */
-  animated?: boolean | undefined;
-  /** If true, will set the collapse to be expanded by default */
-  expanded?: boolean | undefined;
-  /** Heading for the collapse */
-  heading?: string | undefined;
-  /** Defines which heading element will be rendered */
-  "heading-as"?: "h1" | "h2" | "h3" | "h4";
-  /** If true, renders the small version */
-  small?: boolean | undefined;
-  /** If true, will truncate the heading in collapsed state */
-  truncate?: boolean | undefined;
-
-  /** Event emitted when toggled */
-  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the button is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
 };
 
 export type SkfHeadingProps = {
@@ -503,6 +533,8 @@ export type SkfInputProps = {
   disabled?: boolean;
   /** If true, value is required or must be checked for the form to be submittable */
   required?: boolean;
+  /** -m  } */
+  autocomplete?: string;
   /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
   "button-aria-label-clear"?: string;
   /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
@@ -748,12 +780,12 @@ export type SkfLinkProps = {
     | "zoomOut";
   /** Defines the position of the icon in relation to the text */
   "icon-placement"?: "left" | "right";
-  /** Defines the relationship of the target object to the link object */
-  rel?: string;
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: string | undefined;
   /** If defined, used on conjunction with onClick property, second argument */
   route?: string | undefined;
   /** If true, fills the parents horizontal axis */
-  stretch?: boolean | undefined;
+  stretch?: boolean;
   /** If defined, specifies where to open the linked document */
   target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
   /** Defines the type of button */
@@ -766,7 +798,7 @@ export type SkfLoaderProps = {
   /** Defines the aria-label */
   "aria-label"?: string;
   /** If true, inverts the color (to be used on colored backgrounds) */
-  invert?: boolean | undefined;
+  invert?: boolean;
   /** Defines the size of the loader */
   size?: "md" | "sm" | undefined;
   /**  */
@@ -778,10 +810,19 @@ export type SkfLoaderProps = {
 export type SkfLogoProps = {
   /** Defines the title of the logo */
   title?: string;
-  /** If defined, sets color of the logo */
+  /** Defines the color of the logo */
   color?: "primary" | "secondary" | "inverse";
 };
 
+export type SkfProgressProps = {
+  /** If true, the progress-bar's fill value is animated */
+  animated?: boolean;
+  /** Describes how much work the task indicated by the progress element requires */
+  max?: number;
+  /** Specifies how much of the task that has been completed */
+  value?: number;
+};
+
 export type SkfRadioProps = {
   /** If true, sets disabled state */
   disabled?: boolean;
@@ -793,8 +834,6 @@ export type SkfRadioProps = {
   checked?: boolean | undefined;
   /** If true, forces component to invalid state until removed */
   "custom-invalid"?: boolean | undefined;
-  /** If true, hides the label visually */
-  "hide-label"?: boolean | undefined;
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: string | undefined;
   /** If defined, adds name to the input-element */
@@ -846,9 +885,9 @@ export type SkfSelectProps = {
   /** Size of the Select */
   size?: "sm" | "md";
   /** A readonly property that returns the selected value(s) in a array */
-  getSelectedValues?: string;
+  selectedValues?: string;
   /** A readonly property that returns the selected slot(s) text content in a array */
-  getSelectedOptionsText?: string;
+  selectedOptionsText?: string;
   /** Read only, returns the selected value. (if multiple: in a comma separated string) */
   value?: string;
   /**  */
@@ -871,7 +910,7 @@ export type SkfSelectOptionProps = {
   /** If defined, set an icon */
   icon?: SkfIcon["name"] | undefined;
   /** If defined, sets provided color on the icon */
-  "icon-color"?: IconColor | undefined;
+  "icon-color"?: SeverityFgColor | undefined;
   /** If true, sets the option as selected */
   selected?: boolean | undefined;
   /** If defined, sets a short label */
@@ -918,6 +957,43 @@ export type SkfSwitchProps = {
   value?: string;
 };
 
+export type SkfTabProps = {
+  /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: string;
+  /**  */
+  selected?: boolean;
+  /**  */
+  variant?: SkfTabGroup["variant"];
+  /**  */
+  role?: string;
+  /** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
+  "onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the component is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfTabGroupProps = {
+  /** Sets the default selected tab */
+  "default-selected"?: number;
+  /** If true, removes border */
+  "no-border"?: boolean;
+  /** If true, removes padding */
+  "no-padding"?: boolean;
+  /** If true, component fills the parent element height */
+  stretch?: boolean;
+  /** Sets the appearance of the tabs */
+  variant?: "compressed" | "expanded";
+};
+
+export type SkfTabPanelProps = {
+  /** The tab panel's name. */
+  name?: string;
+  /**  */
+  active?: boolean;
+  /**  */
+  role?: string;
+};
+
 export type SkfTagProps = {
   /** Specifies Tag size */
   size?: "sm" | "md" | "lg";
@@ -1132,6 +1208,24 @@ export type SkfTextAreaProps = {
   oninvalid?: (e: CustomEvent<never>) => void;
 };
 
+export type SkfToastProps = {
+  /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
+  closeable?: boolean;
+  /**  */
+  debug?: boolean;
+  /** Severity of the toast. */
+  severity?: "info" | "success" | "warning" | "error";
+  /** Time in seconds before the toast disappears. */
+  timer?: number;
+  /** offsets where toasts emerge vertically */
+  topOffset?: number | undefined;
+};
+
+export type SkfToastWrapperProps = {
+  /**  */
+  debug?: boolean;
+};
+
 export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -1146,51 +1240,81 @@ export type CustomElements = {
   "skf-accordion": Partial<SkfAccordionProps & BaseProps & BaseEvents>;
 
   /**
-   * Component to be used in forms or for interactivity
+   * The `<skf-card>` can be used to group related subjects in a container
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The Primary content
+   *  - _default_ - The card's main content
    */
-  "skf-button": Partial<SkfButtonProps & BaseProps & BaseEvents>;
+  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-card>` can be used to group related subjects in a container
+   * The `<skf-checkbox>` component is used to create a checkbox input
    * ---
    *
    *
+   * ### **Events:**
+   *  - **change** - {object} - When the value of the input changes
+   *
    * ### **Slots:**
-   *  - _default_ - The card's main content
+   *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
+  "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-alert>` is a type of notification that appears in-line
+   * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-alert-close** - Fires when the close button is clicked
+   *  - **skf-collapse-toggle** - Event emitted when toggled
+   *
+   * ### **Methods:**
+   *  - **setClose()** - Class method as alternative to manipulate attribute
+   * - **setOpen()** - Class method as alternative to manipulate attribute
    *
    * ### **Slots:**
-   *  - _default_ - Alert message. **Notice!** See design principles for approved content
-   * - **link** - Slot for the link
+   *  - _default_ - Main content
    */
-  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
+  "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-checkbox>` component is used to create a checkbox input
+   * The `<skf-dialog>` is a component that open up a dialog with the content provided
    * ---
    *
    *
    * ### **Events:**
-   *  - **change** - {object} - When the value of the input changes
+   *  - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)
+   * - **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)
+   * - **close** - Fires when the dialog is closed (after transitioned out)
    *
    * ### **Slots:**
-   *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
+   *  - _default_ - The dialog component's content
+   * - **heading** - The dialog component's heading
+   * - **footer** - The dialog component's buttons goes here
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_
+   * - **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_
    */
-  "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
+  "skf-dialog": Partial<SkfDialogProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-alert>` is a type of notification that appears in-line
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-alert-close** - Fires when the close button is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - Alert message. **Notice!** See design principles for approved content
+   * - **link** - Slot for the link
+   */
+  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
   /**
    * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
@@ -1204,23 +1328,20 @@ export type CustomElements = {
   "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
-   *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
+   * Component to be used in forms or for interactivity
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-collapse-toggle** - Event emitted when toggled
+   *  - **click** - Fires when the button is clicked
    *
    * ### **Methods:**
-   *  - **setClose()** - Class method as alternative to manipulate attribute
-   * - **setOpen()** - Class method as alternative to manipulate attribute
+   *  - **click()** - Simulates a click on the button.
    *
    * ### **Slots:**
-   *  - _default_ - Main content
+   *  - _default_ - The Primary content
    */
-  "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
+  "skf-button": Partial<SkfButtonProps & BaseProps & BaseEvents>;
 
   /**
    * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
@@ -1281,6 +1402,13 @@ export type CustomElements = {
    */
   "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
 
+  /**
+   * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
+   * ---
+   *
+   */
+  "skf-progress": Partial<SkfProgressProps & BaseProps & BaseEvents>;
+
   /**
    * The `<skf-radio>` component is used to create a radio input
    * ---
@@ -1345,6 +1473,41 @@ export type CustomElements = {
    */
   "skf-switch": Partial<SkfSwitchProps & BaseProps & BaseEvents>;
 
+  /**
+   * The `<skf-tab>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
+   * - **click** - Fired when the component is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab's label
+   */
+  "skf-tab": Partial<SkfTabProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-tab-group>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
+   * - **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements
+   */
+  "skf-tab-group": Partial<SkfTabGroupProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-tab-panel>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab panel's content
+   */
+  "skf-tab-panel": Partial<SkfTabPanelProps & BaseProps & BaseEvents>;
+
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
    * ---
@@ -1368,4 +1531,24 @@ export type CustomElements = {
    *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
    */
   "skf-textarea": Partial<SkfTextAreaProps & BaseProps & BaseEvents>;
+
+  /**
+   * A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-toast": Partial<SkfToastProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The alert components that the toast creates will render here.
+   */
+  "skf-toast-wrapper": Partial<SkfToastWrapperProps & BaseProps & BaseEvents>;
 };