@skf-design-system/ui-components 1.0.2-beta.14 → 1.0.2-beta.15

package/dist/custom-elements.json

@@ -2461,128 +2461,6 @@
       ],
       "typeDefinitionPath": "components/datepicker/datepicker.d.ts"
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information",
-          "name": "SkfDivider",
-          "cssProperties": [
-            {
-              "description": "The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical",
-              "name": "--skf-divider-spacing"
-            },
-            {
-              "description": "The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical",
-              "name": "--skf-divider-inset"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "#internals",
-              "privacy": "private",
-              "type": {
-                "text": "ElementInternals"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#states",
-              "privacy": "private",
-              "type": {
-                "text": "CustomStateSet"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "SkfDividerColor"
-              },
-              "default": "'primary'",
-              "description": "Defines the Divider color",
-              "attribute": "color",
-              "expandedType": {
-                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "decorative",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "attribute": "decorative"
-            },
-            {
-              "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders the divider vertically",
-              "attribute": "vertical"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "SkfDividerColor"
-              },
-              "default": "'primary'",
-              "description": "Defines the Divider color",
-              "fieldName": "color",
-              "expandedType": {
-                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
-              }
-            },
-            {
-              "name": "decorative",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "fieldName": "decorative"
-            },
-            {
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders the divider vertically",
-              "fieldName": "vertical"
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element.js"
-          },
-          "tagName": "skf-divider",
-          "customElement": true,
-          "modulePath": "src/components/divider/divider.component.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfDivider",
-          "declaration": {
-            "name": "SkfDivider",
-            "module": "src/components/divider/divider.component.ts"
-          }
-        }
-      ],
-      "typeDefinitionPath": "components/divider/divider.d.ts"
-    },
     {
       "kind": "javascript-module",
       "path": "components/heading/heading.js",
@@ -2905,6 +2783,128 @@
       ],
       "typeDefinitionPath": "components/dialog/dialog.d.ts"
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information",
+          "name": "SkfDivider",
+          "cssProperties": [
+            {
+              "description": "The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical",
+              "name": "--skf-divider-spacing"
+            },
+            {
+              "description": "The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical",
+              "name": "--skf-divider-inset"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "SkfDividerColor"
+              },
+              "default": "'primary'",
+              "description": "Defines the Divider color",
+              "attribute": "color",
+              "expandedType": {
+                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "decorative",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "attribute": "decorative"
+            },
+            {
+              "kind": "field",
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders the divider vertically",
+              "attribute": "vertical"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "SkfDividerColor"
+              },
+              "default": "'primary'",
+              "description": "Defines the Divider color",
+              "fieldName": "color",
+              "expandedType": {
+                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
+              }
+            },
+            {
+              "name": "decorative",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "fieldName": "decorative"
+            },
+            {
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders the divider vertically",
+              "fieldName": "vertical"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element.js"
+          },
+          "tagName": "skf-divider",
+          "customElement": true,
+          "modulePath": "src/components/divider/divider.component.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfDivider",
+          "declaration": {
+            "name": "SkfDivider",
+            "module": "src/components/divider/divider.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/divider/divider.d.ts"
+    },
     {
       "kind": "javascript-module",
       "path": "components/drawer/drawer.js",

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

@@ -11,9 +11,9 @@ import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SkfDatepickerCalendar } from "../../components/datepicker-calendar/datepicker-calendar.component.js";
 import type { SkfDatepicker } from "../../components/datepicker/datepicker.component.js";
-import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfDialog } from "../../components/dialog/dialog.component.js";
+import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
 import type { SkfLink } from "../../components/link/link.component.js";
@@ -509,18 +509,6 @@ export type SkfDatepickerProps = {
 }
 
 
-export 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'];
-
-
-}
-
-
 export type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   "as"?: SkfHeading['as'];
@@ -560,6 +548,18 @@ export type SkfDialogProps = {
 }
 
 
+export 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'];
+
+
+}
+
+
 export type SkfDrawerProps = {
   /** Heading for the Drawer */
   "heading"?: SkfDrawer['heading'];
@@ -1573,27 +1573,6 @@ export type SkfTooltipProps = {
     "skf-datepicker": Partial<SkfDatepickerProps & BaseProps<SkfDatepicker> & BaseEvents>;
 
 
-  /**
-     * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
- * 
- * #### Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `color`: Defines the Divider color 
- * - `decorative`: If true, renders a div for presentational purpose instead of the semantic hr-element 
- * - `vertical`: If true, renders the divider vertically 
- * 
- * #### CSS Custom Properties
- * 
- * CSS variables available for styling the component.
- * 
- * - `--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<SkfDivider> & 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.
@@ -1660,6 +1639,27 @@ export type SkfTooltipProps = {
     "skf-dialog": Partial<SkfDialogProps & BaseProps<SkfDialog> & BaseEvents>;
 
 
+  /**
+     * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `color`: Defines the Divider color 
+ * - `decorative`: If true, renders a div for presentational purpose instead of the semantic hr-element 
+ * - `vertical`: If true, renders the divider vertically 
+ * 
+ * #### CSS Custom Properties
+ * 
+ * CSS variables available for styling the component.
+ * 
+ * - `--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<SkfDivider> & BaseEvents>;
+
+
   /**
      * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
  * 

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

@@ -12,9 +12,9 @@ import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox, Event } from "../../components/checkbox/checkbox.component.js";
 import type { SkfDatepickerCalendar } from "../../components/datepicker-calendar/datepicker-calendar.component.js";
 import type { SkfDatepicker } from "../../components/datepicker/datepicker.component.js";
-import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.component.js";
+import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
 import type { SkfLink, CustomEvent } from "../../components/link/link.component.js";
@@ -262,15 +262,6 @@ type SkfDatepickerProps = {
   focusTimeoutId?: SkfDatepicker["focusTimeoutId"];
 };
 
-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"];
@@ -300,6 +291,15 @@ type SkfDialogProps = {
   "onskf-dialog-closed"?: (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 SkfDrawerProps = {
   /** Heading for the Drawer */
   heading?: SkfDrawer["heading"];
@@ -984,17 +984,6 @@ export type CustomElements = {
    */
   "skf-datepicker": DefineComponent<SkfDatepickerProps>;
 
-  /**
-   * 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.
@@ -1030,6 +1019,17 @@ export type CustomElements = {
    */
   "skf-dialog": DefineComponent<SkfDialogProps>;
 
+  /**
+   * 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-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
    * ---

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

@@ -451,28 +451,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": "SkfDividerColor" }]
-        },
-        {
-          "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",
@@ -527,6 +505,28 @@
       ],
       "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": "SkfDividerColor" }]
+        },
+        {
+          "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-drawer",
       "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",

package/dist/web-types.json

@@ -985,49 +985,6 @@
             "events": []
           }
         },
-        {
-          "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)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "Defines the Divider color",
-              "value": { "type": "SkfDividerColor", "default": "'primary'" }
-            },
-            {
-              "name": "decorative",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "vertical",
-              "description": "If true, renders the divider vertically",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "color",
-                "description": "Defines the Divider color",
-                "type": "SkfDividerColor"
-              },
-              {
-                "name": "decorative",
-                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-                "type": "boolean"
-              },
-              {
-                "name": "vertical",
-                "description": "If true, renders the divider vertically",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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",
@@ -1174,6 +1131,49 @@
             ]
           }
         },
+        {
+          "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)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "Defines the Divider color",
+              "value": { "type": "SkfDividerColor", "default": "'primary'" }
+            },
+            {
+              "name": "decorative",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "vertical",
+              "description": "If true, renders the divider vertically",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "Defines the Divider color",
+                "type": "SkfDividerColor"
+              },
+              {
+                "name": "decorative",
+                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+                "type": "boolean"
+              },
+              {
+                "name": "vertical",
+                "description": "If true, renders the divider vertically",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "skf-drawer",
           "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.14",
+  "version": "1.0.2-beta.15",
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@js-temporal/polyfill": "^0.5.1",