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

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,6 +509,18 @@ 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'];
@@ -548,18 +560,6 @@ 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'];
@@ -738,6 +738,8 @@ export type SkfInputProps = {
   "onchange"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the input is invalid */
   "oninvalid"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the input is cleared */
+  "oncleared"?: (e: CustomEvent<CustomEvent>) => void;
 }
 
 
@@ -906,9 +908,9 @@ export type SkfTagProps = {
   /** If true, adds trailing button to remove tag */
   "removable"?: SkfTag['removable'];
   /** If defined, accepts a function that runs on click */
-  "onClick"?: SkfTag['onClick'];
+  "clickCallback"?: SkfTag['clickCallback'];
   /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-  "onRemove"?: SkfTag['onRemove'];
+  "preRemoveCallback"?: SkfTag['preRemoveCallback'];
 
 
 }
@@ -1571,6 +1573,27 @@ 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.
@@ -1637,27 +1660,6 @@ 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
  * 
@@ -1860,6 +1862,7 @@ export type SkfTooltipProps = {
  * 
  * - `change`: Fires when the value of the input changes
  * - `invalid`: Fires when the input is invalid
+ * - `cleared`: Fires when the input is cleared
  * 
  * #### Slots
  * 
@@ -2109,8 +2112,8 @@ export type SkfTooltipProps = {
  * - `color`: If defined, gives the supplied appearance 
  * - `lang`: Sets the internal language of the component 
  * - `removable`: If true, adds trailing button to remove tag 
- * - `onClick`: If defined, accepts a function that runs on click (property only)
- * - `onRemove`: If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. (property only)
+ * - `clickCallback`: If defined, accepts a function that runs on click (property only)
+ * - `preRemoveCallback`: If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. (property only)
  * 
  * #### Slots
  * 

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,6 +262,15 @@ 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"];
@@ -291,15 +300,6 @@ 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"];
@@ -444,6 +444,8 @@ type SkfInputProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the input is invalid */
   oninvalid?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the input is cleared */
+  oncleared?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfMenuItemProps = {
@@ -583,9 +585,9 @@ type SkfTagProps = {
   /** If true, adds trailing button to remove tag */
   removable?: SkfTag["removable"];
   /** If defined, accepts a function that runs on click */
-  onClick?: SkfTag["onClick"];
+  clickCallback?: SkfTag["clickCallback"];
   /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-  onRemove?: SkfTag["onRemove"];
+  preRemoveCallback?: SkfTag["preRemoveCallback"];
 };
 
 type SkfSelectProps = {
@@ -982,6 +984,17 @@ 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.
@@ -1017,17 +1030,6 @@ 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
    * ---
@@ -1107,6 +1109,7 @@ export type CustomElements = {
    * ### **Events:**
    *  - **change** - Fires when the value of the input changes
    * - **invalid** - Fires when the input is invalid
+   * - **cleared** - Fires when the input is cleared
    *
    * ### **Slots:**
    *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.

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

@@ -451,6 +451,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-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",
@@ -505,28 +527,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-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",
@@ -698,7 +698,7 @@
     },
     {
       "name": "skf-input",
-      "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
+      "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n- **cleared** - Fires when the input is cleared\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
       "attributes": [
         {
           "name": "disabled",

package/dist/web-types.json

@@ -985,6 +985,49 @@
             "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",
@@ -1131,49 +1174,6 @@
             ]
           }
         },
-        {
-          "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",
@@ -1553,7 +1553,7 @@
         },
         {
           "name": "skf-input",
-          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
+          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n- **cleared** - Fires when the input is cleared\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
@@ -1718,6 +1718,11 @@
               "name": "invalid",
               "type": "CustomEvent",
               "description": "Fires when the input is invalid"
+            },
+            {
+              "name": "cleared",
+              "type": "CustomEvent",
+              "description": "Fires when the input is cleared"
             }
           ],
           "js": {
@@ -1852,6 +1857,11 @@
                 "name": "invalid",
                 "type": "CustomEvent",
                 "description": "Fires when the input is invalid"
+              },
+              {
+                "name": "cleared",
+                "type": "CustomEvent",
+                "description": "Fires when the input is cleared"
               }
             ]
           }
@@ -2483,11 +2493,11 @@
                 "type": "Language"
               },
               {
-                "name": "onClick",
+                "name": "clickCallback",
                 "description": "If defined, accepts a function that runs on click"
               },
               {
-                "name": "onRemove",
+                "name": "preRemoveCallback",
                 "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
               },
               {

package/package.json

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