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

package/dist/types/vue/index.d.ts

@@ -1,23 +1,28 @@
 import type { DefineComponent } from "vue";
 
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
-import type { SkfAlert } from "../../components/alert/alert.component.js";
-import type { SkfButton } from "../../components/button/button.component.js";
 import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
+import type { SkfDialog } from "../../components/dialog/dialog.component.js";
+import type { SkfAlert } from "../../components/alert/alert.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
+import type { SkfButton } from "../../components/button/button.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfIcon } from "../../components/icon/icon.component.js";
 import type { SkfInput } from "../../components/input/input.component.js";
 import type { SkfLink } from "../../components/link/link.component.js";
 import type { SkfLoader } from "../../components/loader/loader.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
+import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio } from "../../components/radio/radio.component.js";
 import type { SkfSelect } from "../../components/select/select.component.js";
 import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
 import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
+import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
+import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
+import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { SkfTag } from "../../components/tag/tag.component.js";
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
 import type { SkfToast } from "../../components/toast/toast.component.js";
@@ -38,39 +43,6 @@ type SkfAccordionProps = {
   truncate?: SkfAccordion["truncate"];
 };
 
-type SkfAlertProps = {
-  /** If true, alert is being used as a toast (alertdialog) with an close button */
-  closeable?: SkfAlert["closeable"];
-  /** Close button aria-label */
-  "button-label"?: SkfAlert["buttonLabel"];
-  /** If defined, displays leading icon */
-  icon?: SkfAlert["icon"];
-  /** If defined, gives the supplied appearance */
-  severity?: SkfAlert["severity"];
-
-  /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
-};
-
-type SkfButtonProps = {
-  /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
-  destructive?: SkfButton["destructive"];
-  /** If true, removes border */
-  disabled?: SkfButton["disabled"];
-  /** If provided, renders an icon before or after the text */
-  icon?: SkfButton["icon"];
-  /** If provided, determines the positioning of the icon in relation to the text */
-  "icon-position"?: SkfButton["iconPosition"];
-  /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
-  loading?: SkfButton["loading"];
-  /** If provided, displays an alternative size */
-  size?: SkfButton["size"];
-  /** If provided, changes the button type */
-  type?: SkfButton["type"];
-  /** If provided, alters the appearance */
-  variant?: SkfButton["variant"];
-};
-
 type SkfCardProps = {
   /** If true, removes border */
   "no-border"?: SkfCard["noBorder"];
@@ -91,8 +63,6 @@ type SkfCheckboxProps = {
   checked?: SkfCheckbox["checked"];
   /** If true, forces component to invalid state until removed */
   "custom-invalid"?: SkfCheckbox["customInvalid"];
-  /** If true, hides the label visually */
-  "hide-label"?: SkfCheckbox["hideLabel"];
   /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
   indeterminate?: SkfCheckbox["indeterminate"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
@@ -132,6 +102,47 @@ type SkfCollapseProps = {
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SkfDialogProps = {
+  /** If defined, sets the aria-label for the close button */
+  "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
+  /** Title for the modal/dialog */
+  heading?: SkfDialog["heading"];
+  /** If true, makes the dialog stretch edge to edge on screen */
+  fullscreen?: SkfDialog["fullscreen"];
+  /** If true, removes the close button */
+  "no-close-button"?: SkfDialog["noCloseButton"];
+  /** If defined, removes the inner padding */
+  "no-padding"?: SkfDialog["noPadding"];
+  /**  */
+  open?: SkfDialog["open"];
+  /** If provided, will run function on dialog close */
+  onClose?: SkfDialog["onClose"];
+  /** Method that opens the dialog in modal state */
+  showModal?: SkfDialog["showModal"];
+  /** Method that closes the dialog */
+  close?: SkfDialog["close"];
+  /** 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;
+};
+
+type SkfAlertProps = {
+  /** If true, alert is being used as a toast (alertdialog) with an close button */
+  closeable?: SkfAlert["closeable"];
+  /** Close button aria-label */
+  "button-label"?: SkfAlert["buttonLabel"];
+  /** If defined, displays leading icon */
+  icon?: SkfAlert["icon"];
+  /** If defined, gives the supplied appearance */
+  severity?: SkfAlert["severity"];
+
+  /** Fires when the close button is clicked */
+  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+};
+
 type SkfDividerProps = {
   /** Defines the Divider color */
   color?: SkfDivider["color"];
@@ -141,6 +152,30 @@ type SkfDividerProps = {
   vertical?: SkfDivider["vertical"];
 };
 
+type SkfButtonProps = {
+  /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
+  destructive?: SkfButton["destructive"];
+  /** If true, removes border */
+  disabled?: SkfButton["disabled"];
+  /** If provided, renders an icon before or after the text */
+  icon?: SkfButton["icon"];
+  /** If provided, determines the positioning of the icon in relation to the text */
+  "icon-position"?: SkfButton["iconPosition"];
+  /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
+  loading?: SkfButton["loading"];
+  /**  */
+  "no-validate"?: SkfButton["noValidate"];
+  /** If provided, displays an alternative size */
+  size?: SkfButton["size"];
+  /** If provided, changes the button type */
+  type?: SkfButton["type"];
+  /** If provided, alters the appearance */
+  variant?: SkfButton["variant"];
+
+  /** Fires when the button is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
 type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   as?: SkfHeading["as"];
@@ -164,6 +199,8 @@ type SkfInputProps = {
   disabled?: SkfInput["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
   required?: SkfInput["undefined"];
+  /** -m  } */
+  autocomplete?: SkfInput["autocomplete"];
   /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
   "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
   /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
@@ -238,7 +275,7 @@ type SkfLinkProps = {
   icon?: SkfLink["icon"];
   /** Defines the position of the icon in relation to the text */
   "icon-placement"?: SkfLink["iconPlacement"];
-  /** Defines the relationship of the target object to the link object */
+  /** If defined, describes the relationship between a linked resource and the current document */
   rel?: SkfLink["rel"];
   /** If defined, used on conjunction with onClick property, second argument */
   route?: SkfLink["route"];
@@ -268,10 +305,19 @@ type SkfLoaderProps = {
 type SkfLogoProps = {
   /** Defines the title of the logo */
   title?: SkfLogo["title"];
-  /** If defined, sets color of the logo */
+  /** Defines the color of the logo */
   color?: SkfLogo["color"];
 };
 
+type SkfProgressProps = {
+  /** If true, the progress-bar's fill value is animated */
+  animated?: SkfProgress["animated"];
+  /** Describes how much work the task indicated by the progress element requires */
+  max?: SkfProgress["max"];
+  /** Specifies how much of the task that has been completed */
+  value?: SkfProgress["value"];
+};
+
 type SkfRadioProps = {
   /** If true, sets disabled state */
   disabled?: SkfRadio["undefined"];
@@ -283,8 +329,6 @@ type SkfRadioProps = {
   checked?: SkfRadio["checked"];
   /** If true, forces component to invalid state until removed */
   "custom-invalid"?: SkfRadio["customInvalid"];
-  /** If true, hides the label visually */
-  "hide-label"?: SkfRadio["hideLabel"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfRadio["label"];
   /** If defined, adds name to the input-element */
@@ -408,6 +452,43 @@ type SkfSwitchProps = {
   value?: SkfSwitch["value"];
 };
 
+type SkfTabProps = {
+  /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SkfTab["panel"];
+  /**  */
+  selected?: SkfTab["selected"];
+  /**  */
+  variant?: SkfTab["variant"];
+  /**  */
+  role?: SkfTab["role"];
+  /** {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;
+};
+
+type SkfTabGroupProps = {
+  /** Sets the default selected tab */
+  "default-selected"?: SkfTabGroup["defaultSelected"];
+  /** If true, removes border */
+  "no-border"?: SkfTabGroup["noBorder"];
+  /** If true, removes padding */
+  "no-padding"?: SkfTabGroup["noPadding"];
+  /** If true, component fills the parent element height */
+  stretch?: SkfTabGroup["stretch"];
+  /** Sets the appearance of the tabs */
+  variant?: SkfTabGroup["variant"];
+};
+
+type SkfTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SkfTabPanel["name"];
+  /**  */
+  active?: SkfTabPanel["active"];
+  /**  */
+  role?: SkfTabPanel["role"];
+};
+
 type SkfTagProps = {
   /** Specifies Tag size */
   size?: SkfTag["size"];
@@ -502,30 +583,6 @@ export type CustomElements = {
    */
   "skf-accordion": DefineComponent<SkfAccordionProps>;
 
-  /**
-   * 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": DefineComponent<SkfAlertProps>;
-
-  /**
-   * Component to be used in forms or for interactivity
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The Primary content
-   */
-  "skf-button": DefineComponent<SkfButtonProps>;
-
   /**
    * The `<skf-card>` can be used to group related subjects in a container
    * ---
@@ -568,6 +625,41 @@ export type CustomElements = {
    */
   "skf-collapse": DefineComponent<SkfCollapseProps>;
 
+  /**
+   * The `<skf-dialog>` is a component that open up a dialog with the content provided
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **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 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-dialog": DefineComponent<SkfDialogProps>;
+
+  /**
+   * 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": DefineComponent<SkfAlertProps>;
+
   /**
    * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
    * ---
@@ -579,6 +671,22 @@ export type CustomElements = {
    */
   "skf-divider": DefineComponent<SkfDividerProps>;
 
+  /**
+   * Component to be used in forms or for interactivity
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Fires when the button is clicked
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the button.
+   *
+   * ### **Slots:**
+   *  - _default_ - The Primary content
+   */
+  "skf-button": DefineComponent<SkfButtonProps>;
+
   /**
    * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
    * It extends the interface of native html `<h1>` to `<h4>` elements.
@@ -638,6 +746,13 @@ export type CustomElements = {
    */
   "skf-logo": DefineComponent<SkfLogoProps>;
 
+  /**
+   * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
+   * ---
+   *
+   */
+  "skf-progress": DefineComponent<SkfProgressProps>;
+
   /**
    * The `<skf-radio>` component is used to create a radio input
    * ---
@@ -702,6 +817,41 @@ export type CustomElements = {
    */
   "skf-switch": DefineComponent<SkfSwitchProps>;
 
+  /**
+   * 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": DefineComponent<SkfTabProps>;
+
+  /**
+   * 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": DefineComponent<SkfTabGroupProps>;
+
+  /**
+   * 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": DefineComponent<SkfTabPanelProps>;
+
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
    * ---