@sme.up/ketchup 9.6.1 → 9.6.3

package/dist/collection/components/kup-image-list/kup-image-list.js

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupImageList_instances, _KupImageList_clickTimeout, _KupImageList_kupManager, _KupImageList_backProps, _KupImageList_topProps, _KupImageList_createItem, _KupImageList_createList;
+var _KupImageList_instances, _KupImageList_clickTimeout, _KupImageList_kupManager, _KupImageList_backProps, _KupImageList_topProps, _KupImageList_el, _KupImageList_hold, _KupImageList_interactableTouch, _KupImageList_createItem, _KupImageList_createList, _KupImageList_getEventDetails, _KupImageList_clickHandler, _KupImageList_contextMenuHandler, _KupImageList_dblClickHandler, _KupImageList_didLoadInteractables;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { MDCRipple } from "@material/ripple";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
@@ -26,8 +26,9 @@ import { FButton } from "../../f-components/f-button/f-button";
 import { FButtonStyling, } from "../../f-components/f-button/f-button-declarations";
 import { KupLanguageGeneric } from "../../managers/kup-language/kup-language-declarations";
 import { FCell } from "../../f-components/f-cell/f-cell";
-import { FCellPadding } from "../../f-components/f-cell/f-cell-declarations";
+import { FCellPadding, } from "../../f-components/f-cell/f-cell-declarations";
 import { KupImageListState } from "./kup-image-list-state";
+import { KupPointerEventTypes } from "../../managers/kup-interact/kup-interact-declarations";
 export class KupImageList {
     constructor() {
         _KupImageList_instances.add(this);
@@ -41,7 +42,6 @@ export class KupImageList {
         /**
          * Instance of the KupManager class.
          */
-        this.kupManager = kupManagerInstance();
         _KupImageList_clickTimeout.set(this, []);
         _KupImageList_kupManager.set(this, kupManagerInstance());
         _KupImageList_backProps.set(this, {
@@ -64,11 +64,16 @@ export class KupImageList {
             styling: FButtonStyling.FLAT,
             wrapperClass: 'navigation-bar__top',
         });
+        _KupImageList_el.set(this, void 0);
+        _KupImageList_hold.set(this, false);
+        _KupImageList_interactableTouch.set(this, []);
         this.currentNode = null;
         this.navigationBarToggled = false;
+        this.columns = 4;
         this.customStyle = '';
         this.data = [];
         this.ripple = true;
+        this.rows = null;
         this.selectedNode = [];
         this.stateId = '';
         this.store = undefined;
@@ -78,7 +83,7 @@ export class KupImageList {
             const state = this.store.getState(this.stateId);
             if (state != null) {
                 this.currentNode =
-                    this.kupManager.data.node.findByStrTreeNodePath(this.data, state.selectedTreeNodePath);
+                    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.node.findByStrTreeNodePath(this.data, state.selectedTreeNodePath);
             }
         }
     }
@@ -86,7 +91,7 @@ export class KupImageList {
         if (this.store && this.stateId) {
             let somethingChanged = false;
             let cNodeRowId = this.currentNode ? this.currentNode.id : '';
-            if (!this.kupManager.objects.deepEqual(this.state.selectedTreeNodePath, cNodeRowId)) {
+            if (!__classPrivateFieldGet(this, _KupImageList_kupManager, "f").objects.deepEqual(this.state.selectedTreeNodePath, cNodeRowId)) {
                 this.state.selectedTreeNodePath = cNodeRowId;
                 somethingChanged = true;
             }
@@ -99,35 +104,6 @@ export class KupImageList {
             }
         }
     }
-    onKupClick(node) {
-        if (node.children && node.children.length > 0) {
-            this.currentNode = node;
-        }
-        this.kupClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-            node: node,
-        });
-    }
-    onKupContextMenu(e, node) {
-        e.preventDefault();
-        this.kupContextMenu.emit({
-            comp: this,
-            id: this.rootElement.id,
-            node: node,
-        });
-    }
-    onKupDblClick(node) {
-        for (let index = 0; index < __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").length; index++) {
-            clearTimeout(__classPrivateFieldGet(this, _KupImageList_clickTimeout, "f")[index]);
-        }
-        __classPrivateFieldSet(this, _KupImageList_clickTimeout, [], "f");
-        this.kupDblClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-            node: node,
-        });
-    }
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
@@ -135,7 +111,7 @@ export class KupImageList {
         if (!newData || newData.length == 0) {
             return;
         }
-        this.currentNode = this.kupManager.data.node.find(this.data, newData);
+        this.currentNode = __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.node.find(this.data, newData);
     }
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
@@ -170,6 +146,7 @@ export class KupImageList {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.register(this);
     }
     componentDidLoad() {
+        __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_didLoadInteractables).call(this);
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logLoad(this, true);
     }
     componentWillRender() {
@@ -192,14 +169,28 @@ export class KupImageList {
     }
     render() {
         const hasNavigation = !!this.currentNode;
-        return (h(Host, { key: '94b709d607d3478d8572765bb4d9f332fc8f3287' }, h("style", { key: 'c861fd2f928f0ccfb201d28fe2de8fbe895f11cf' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '783c35aa4b598e4dc281dfe58720ef1dfed57bec', id: componentWrapperId }, h("div", { key: 'dd7b1310596456aa8ae775c29937197fcab50c49', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+        const gridColumnsStyle = {
+            'grid-template-columns': `repeat(${this.columns}, minmax(0px, 1fr))`,
+        };
+        let combinedGridStyle = Object.assign({}, gridColumnsStyle);
+        if (this.rows != null && this.rows > 0) {
+            const gridRowsStyle = {
+                'grid-template-rows': `repeat(${this.rows}, minmax(0px, 1fr))`,
+                'grid-auto-flow': `column`,
+            };
+            combinedGridStyle = Object.assign(Object.assign({}, combinedGridStyle), gridRowsStyle);
+        }
+        return (h(Host, { key: '86c391c4a1e0c507dc0c07971aa90e6f7091bc95' }, h("style", { key: '99f966c6cd10aac991c99b4badca0a6cff1dbf5b' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e4eaa257a47cabcb34a412f56d736cd77fbc97af', id: componentWrapperId, ref: (el) => {
+                __classPrivateFieldSet(this, _KupImageList_el, el, "f");
+            } }, h("div", { key: '48ff34cbb307b0ab49ca3b8ed240f0510e674e93', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '13a2d026cab95a4da2c0fde2a0af8f4f6827fdb9', class: "image-list" }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '97ac20f9d893c131c03adc953e78435bb062f137', class: "image-list", style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.unregister(this);
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.unregister(this);
     }
@@ -217,6 +208,27 @@ export class KupImageList {
     }
     static get properties() {
         return {
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "4"
+                        }],
+                    "text": "Number of columns to display in the grid layout."
+                },
+                "attribute": "columns",
+                "reflect": false,
+                "defaultValue": "4"
+            },
             "customStyle": {
                 "type": "string",
                 "mutable": false,
@@ -245,13 +257,13 @@ export class KupImageList {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "KupDataNode[]",
-                    "resolved": "KupDataNode[]",
+                    "original": "KupImageListDataNode[]",
+                    "resolved": "KupImageListDataNode[]",
                     "references": {
-                        "KupDataNode": {
+                        "KupImageListDataNode": {
                             "location": "import",
-                            "path": "../../managers/kup-data/kup-data-declarations",
-                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataNode"
+                            "path": "./kup-image-list-declarations",
+                            "id": "src/components/kup-image-list/kup-image-list-declarations.ts::KupImageListDataNode"
                         }
                     }
                 },
@@ -287,6 +299,27 @@ export class KupImageList {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Number of rows to display in the grid layout."
+                },
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "null"
+            },
             "selectedNode": {
                 "type": "unknown",
                 "mutable": false,
@@ -512,12 +545,13 @@ export class KupImageList {
             }];
     }
 }
-_KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakMap(), _KupImageList_backProps = new WeakMap(), _KupImageList_topProps = new WeakMap(), _KupImageList_instances = new WeakSet(), _KupImageList_createItem = function _KupImageList_createItem(node) {
+_KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakMap(), _KupImageList_backProps = new WeakMap(), _KupImageList_topProps = new WeakMap(), _KupImageList_el = new WeakMap(), _KupImageList_hold = new WeakMap(), _KupImageList_interactableTouch = new WeakMap(), _KupImageList_instances = new WeakSet(), _KupImageList_createItem = function _KupImageList_createItem(node) {
     const props = {
         fit: true,
         resource: node.icon,
         title: node.title,
         wrapperClass: 'image-list__image',
+        badgeData: node.badgeData,
     };
     const image = h(FImage, Object.assign({}, props));
     const label = h("div", { class: "image-list__label" }, node.value);
@@ -531,10 +565,105 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
             'image-list__item': true,
             'mdc-ripple-surface': this.ripple ? true : false,
         };
-        const item = (h("div", { onClick: () => {
-                __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").push(setTimeout(() => this.onKupClick(node), 300));
-            }, onContextMenu: (e) => this.onKupContextMenu(e, node), onDblClick: () => this.onKupDblClick(node), class: classObj }, __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createItem).call(this, node)));
+        const item = (h("div", { onContextMenu: (e) => {
+                e.preventDefault();
+            }, class: classObj }, __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createItem).call(this, node)));
         nodes.push(item);
     }
     return nodes;
+}, _KupImageList_getEventDetails = function _KupImageList_getEventDetails(path, e) {
+    let cellProps;
+    if (path) {
+        for (let i = path.length - 1; i >= 0; i--) {
+            let p = path[i];
+            if (!p.tagName) {
+                continue;
+            }
+            if (p.classList.contains('f-cell')) {
+                cellProps = p['kup-get-cell-props']();
+            }
+        }
+    }
+    return {
+        cell: cellProps === null || cellProps === void 0 ? void 0 : cellProps.cell,
+        column: cellProps === null || cellProps === void 0 ? void 0 : cellProps.column,
+        originalEvent: e,
+        row: cellProps === null || cellProps === void 0 ? void 0 : cellProps.row,
+    };
+}, _KupImageList_clickHandler = function _KupImageList_clickHandler(e) {
+    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_getEventDetails).call(this, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+    return details;
+}, _KupImageList_contextMenuHandler = function _KupImageList_contextMenuHandler(e) {
+    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_getEventDetails).call(this, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+    return details;
+}, _KupImageList_dblClickHandler = function _KupImageList_dblClickHandler(e) {
+    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_getEventDetails).call(this, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+    return details;
+}, _KupImageList_didLoadInteractables = function _KupImageList_didLoadInteractables() {
+    __classPrivateFieldGet(this, _KupImageList_interactableTouch, "f").push(__classPrivateFieldGet(this, _KupImageList_el, "f"));
+    const tapCb = (e) => {
+        if (__classPrivateFieldGet(this, _KupImageList_hold, "f")) {
+            __classPrivateFieldSet(this, _KupImageList_hold, false, "f");
+            return;
+        }
+        switch (e.button) {
+            // left click
+            case 0:
+                // Note: event must be cloned
+                // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+                const clone = {};
+                for (const key in e) {
+                    clone[key] = e[key];
+                }
+                __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").push(setTimeout(() => {
+                    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_clickHandler).call(this, clone);
+                    const node = details.row;
+                    if (node.children && node.children.length > 0) {
+                        this.currentNode = node;
+                    }
+                    this.kupClick.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        details,
+                    });
+                }, 300));
+                break;
+            // right click
+            case 2:
+                this.kupContextMenu.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    details: __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_contextMenuHandler).call(this, e),
+                });
+                break;
+        }
+    };
+    const doubletapCb = (e) => {
+        switch (e.button) {
+            // left click
+            case 0:
+                for (let index = 0; index < __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").length; index++) {
+                    clearTimeout(__classPrivateFieldGet(this, _KupImageList_clickTimeout, "f")[index]);
+                    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logMessage(this, 'Cleared clickHandler timeout(' +
+                        __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f")[index] +
+                        ').');
+                }
+                __classPrivateFieldSet(this, _KupImageList_clickTimeout, [], "f");
+                this.kupDblClick.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    details: __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_dblClickHandler).call(this, e),
+                });
+                break;
+        }
+    };
+    const holdCb = (e) => {
+        if (e.pointerType === 'pen' || e.pointerType === 'touch') {
+            __classPrivateFieldSet(this, _KupImageList_hold, true, "f");
+        }
+    };
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.TAP, tapCb);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.DOUBLETAP, doubletapCb);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
 };

package/dist/collection/components/kup-lazy/kup-lazy.css

@@ -1,3 +1,131 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 /**
 * @prop --kup-lazy-animation-time: Sets the duration of the animation.
 * @prop --kup-lazy-height: Sets the height of the component and subcomponent.

package/dist/collection/components/kup-list/kup-list.css

@@ -1,3 +1,131 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 /**
 * @prop --kup-list-background: Sets background of the list.
 * @prop --kup-list-color: Sets text color of the list.