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

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

@@ -75,20 +75,6 @@ export type SkfAccordionProps = {
   truncate?: 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 SkfButtonProps = {
   /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
   destructive?: boolean;
@@ -268,6 +254,20 @@ export type SkfCardProps = {
   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;
@@ -302,6 +302,15 @@ export type SkfCheckboxProps = {
   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;
@@ -320,15 +329,6 @@ export type SkfCollapseProps = {
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => 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 SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   as?: "h1" | "h2" | "h3" | "h4";
@@ -1146,38 +1146,38 @@ export type CustomElements = {
   "skf-accordion": Partial<SkfAccordionProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-alert>` is a type of notification that appears in-line
+   * Component to be used in forms or for interactivity
    * ---
    *
    *
-   * ### **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
+   *  - _default_ - The Primary content
    */
-  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
+  "skf-button": Partial<SkfButtonProps & 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-alert>` is a type of notification that appears in-line
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-alert-close** - Fires when the close button is clicked
+   *
    * ### **Slots:**
-   *  - _default_ - The card's main content
+   *  - _default_ - Alert message. **Notice!** See design principles for approved content
+   * - **link** - Slot for the link
    */
-  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
+  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-checkbox>` component is used to create a checkbox input
@@ -1192,6 +1192,17 @@ export type CustomElements = {
    */
   "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
 
+  /**
+   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
+   * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
+   */
+  "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
+
   /**
    * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
    *
@@ -1211,17 +1222,6 @@ export type CustomElements = {
    */
   "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
 
-  /**
-   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
-   * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
-   */
-  "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
-
   /**
    * 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.

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

@@ -1,12 +1,12 @@
 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 { SkfAlert } from "../../components/alert/alert.component.js";
 import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
-import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
+import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.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";
@@ -36,20 +36,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"];
@@ -78,6 +64,20 @@ type SkfCardProps = {
   stretch?: SkfCard["stretch"];
 };
 
+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 SkfCheckboxProps = {
   /** If true, sets disabled state */
   disabled?: SkfCheckbox["undefined"];
@@ -112,6 +112,15 @@ type SkfCheckboxProps = {
   onchange?: (e: CustomEvent<never>) => void;
 };
 
+type SkfDividerProps = {
+  /** Defines the Divider color */
+  color?: SkfDivider["color"];
+  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+  decorative?: SkfDivider["decorative"];
+  /** If true, renders the divider vertically */
+  vertical?: SkfDivider["vertical"];
+};
+
 type SkfCollapseProps = {
   /** If true, will animate the expand/collapse state */
   animated?: SkfCollapse["animated"];
@@ -130,15 +139,6 @@ type SkfCollapseProps = {
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfDividerProps = {
-  /** Defines the Divider color */
-  color?: SkfDivider["color"];
-  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  decorative?: SkfDivider["decorative"];
-  /** If true, renders the divider vertically */
-  vertical?: SkfDivider["vertical"];
-};
-
 type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   as?: SkfHeading["as"];
@@ -483,38 +483,38 @@ export type CustomElements = {
   "skf-accordion": DefineComponent<SkfAccordionProps>;
 
   /**
-   * The `<skf-alert>` is a type of notification that appears in-line
+   * Component to be used in forms or for interactivity
    * ---
    *
    *
-   * ### **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
+   *  - _default_ - The Primary content
    */
-  "skf-alert": DefineComponent<SkfAlertProps>;
+  "skf-button": DefineComponent<SkfButtonProps>;
 
   /**
-   * 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": DefineComponent<SkfButtonProps>;
+  "skf-card": DefineComponent<SkfCardProps>;
 
   /**
-   * The `<skf-card>` can be used to group related subjects in a container
+   * 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_ - The card's main content
+   *  - _default_ - Alert message. **Notice!** See design principles for approved content
+   * - **link** - Slot for the link
    */
-  "skf-card": DefineComponent<SkfCardProps>;
+  "skf-alert": DefineComponent<SkfAlertProps>;
 
   /**
    * The `<skf-checkbox>` component is used to create a checkbox input
@@ -529,6 +529,17 @@ export type CustomElements = {
    */
   "skf-checkbox": DefineComponent<SkfCheckboxProps>;
 
+  /**
+   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
+   * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
+   */
+  "skf-divider": DefineComponent<SkfDividerProps>;
+
   /**
    * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
    *
@@ -548,17 +559,6 @@ export type CustomElements = {
    */
   "skf-collapse": DefineComponent<SkfCollapseProps>;
 
-  /**
-   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
-   * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
-   */
-  "skf-divider": DefineComponent<SkfDividerProps>;
-
   /**
    * 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.

package/dist/vscode.html-custom-data.json

@@ -44,39 +44,6 @@
       ],
       "references": []
     },
-    {
-      "name": "skf-alert",
-      "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
-      "attributes": [
-        {
-          "name": "closeable",
-          "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-          "values": []
-        },
-        {
-          "name": "button-label",
-          "description": "Close button aria-label",
-          "values": []
-        },
-        {
-          "name": "icon",
-          "description": "If defined, displays leading icon",
-          "values": [{ "name": "SkfIcon['name']" }]
-        },
-        {
-          "name": "severity",
-          "description": "If defined, gives the supplied appearance",
-          "values": [
-            { "name": "error" },
-            { "name": "info" },
-            { "name": "warning" },
-            { "name": "success" },
-            { "name": "alert" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "skf-button",
       "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
@@ -302,6 +269,39 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-alert",
+      "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
+      "attributes": [
+        {
+          "name": "closeable",
+          "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+          "values": []
+        },
+        {
+          "name": "button-label",
+          "description": "Close button aria-label",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "If defined, displays leading icon",
+          "values": [{ "name": "SkfIcon['name']" }]
+        },
+        {
+          "name": "severity",
+          "description": "If defined, gives the supplied appearance",
+          "values": [
+            { "name": "error" },
+            { "name": "info" },
+            { "name": "warning" },
+            { "name": "success" },
+            { "name": "alert" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-checkbox",
       "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.",
@@ -384,6 +384,34 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-divider",
+      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Defines the Divider color",
+          "values": [
+            { "name": "emphasised" },
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "tertiary" },
+            { "name": "inverse" }
+          ]
+        },
+        {
+          "name": "decorative",
+          "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+          "values": []
+        },
+        {
+          "name": "vertical",
+          "description": "If true, renders the divider vertically",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-collapse",
       "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
@@ -426,34 +454,6 @@
       ],
       "references": []
     },
-    {
-      "name": "skf-divider",
-      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "Defines the Divider color",
-          "values": [
-            { "name": "emphasised" },
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "tertiary" },
-            { "name": "inverse" }
-          ]
-        },
-        {
-          "name": "decorative",
-          "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-          "values": []
-        },
-        {
-          "name": "vertical",
-          "description": "If true, renders the divider vertically",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "skf-heading",
       "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",