@momentum-design/components 0.133.26 → 0.133.28

package/dist/components/listitem/listitem.component.d.ts

@@ -125,8 +125,13 @@ declare class ListItem extends ListItem_base {
      * @default undefined
      */
     active?: boolean;
+    private wasSpacePressed;
     constructor();
     connectedCallback(): void;
+    /**
+     * Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false.
+     */
+    private handleBlur;
     /**
      * Handles the click event on the list item.
      * Prevents click when listitem is disabled

package/dist/components/listitem/listitem.component.js

@@ -85,14 +85,22 @@ class ListItem extends KeyDownHandledMixin(KeyToActionMixin(DisabledMixin(TabInd
          * @default 'full-width'
          */
         this.variant = DEFAULTS.VARIANT;
+        this.wasSpacePressed = false;
         this.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.addEventListener('keyup', this.handleKeyUp.bind(this));
         this.addEventListener('click', this.handleClick.bind(this));
+        this.addEventListener('blur', this.handleBlur.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();
         this.role = this.role || ROLE.LISTITEM;
     }
+    /**
+     * Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false.
+     */
+    handleBlur() {
+        this.wasSpacePressed = false;
+    }
     /**
      * Handles the click event on the list item.
      * Prevents click when listitem is disabled
@@ -113,21 +121,26 @@ class ListItem extends KeyDownHandledMixin(KeyToActionMixin(DisabledMixin(TabInd
      */
     handleKeyDown(event) {
         const action = this.getActionForKeyEvent(event);
+        if (this.isEventFromInsideListItem(event)) {
+            return;
+        }
         if (!event.defaultPrevented && action === ACTIONS.ENTER) {
-            if (!this.isEventFromInsideListItem(event)) {
-                this.keyDownEventHandled();
-                event.preventDefault();
-                this.triggerClickEvent(event);
-            }
+            this.keyDownEventHandled();
+            event.preventDefault();
+            this.triggerClickEvent(event);
+        }
+        else if (action === ACTIONS.SPACE) {
+            this.wasSpacePressed = true;
         }
     }
     handleKeyUp(event) {
         const action = this.getActionForKeyEvent(event);
-        if (!event.defaultPrevented && action === ACTIONS.SPACE) {
-            if (!this.isEventFromInsideListItem(event)) {
+        if (action === ACTIONS.SPACE) {
+            if (!this.isEventFromInsideListItem(event) && !event.defaultPrevented && this.wasSpacePressed) {
                 event.preventDefault();
                 this.triggerClickEvent(event);
             }
+            this.wasSpacePressed = false;
         }
     }
     /**

package/dist/components/tab/tab.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
-import type { Variant } from './tab.types';
+import type { TabSize, Variant } from './tab.types';
 declare const Tab_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Buttonsimple;
 /**
  * `mdc-tab` is Tab component to be used within the Tabgroup.
@@ -89,6 +89,13 @@ declare class Tab extends Tab_base {
      * @default pill
      */
     variant: Variant;
+    /**
+     * Size of the tab in pixels.
+     * - `32`: Default size (2rem)
+     * - `28`: Compact size (1.75rem)
+     * @default 32
+     */
+    size: TabSize;
     /**
      * Id of the tab (used as a identificator when used in the tablist)
      * Note: has to be unique!
@@ -105,6 +112,14 @@ declare class Tab extends Tab_base {
      * @param variant - The variant to set.
      */
     private setVariant;
+    /**
+     * Sets the size attribute for the tab component.
+     * If the provided size is not included in TAB_SIZES,
+     * it defaults to the value specified in DEFAULTS.SIZE.
+     *
+     * @param size - The size to set.
+     */
+    private setSize;
     /**
      * Dispatch the activechange event.
      *

package/dist/components/tab/tab.component.js

@@ -16,7 +16,7 @@ import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { ROLE } from '../../utils/roles';
 import { LifeCycleMixin } from '../../utils/mixins/lifecycle/LifeCycleMixin';
-import { DEFAULTS, TAB_VARIANTS } from './tab.constants';
+import { DEFAULTS, TAB_SIZES, TAB_VARIANTS } from './tab.constants';
 import styles from './tab.styles';
 /**
  * `mdc-tab` is Tab component to be used within the Tabgroup.
@@ -101,6 +101,13 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
          * @default pill
          */
         this.variant = DEFAULTS.VARIANT;
+        /**
+         * Size of the tab in pixels.
+         * - `32`: Default size (2rem)
+         * - `28`: Compact size (1.75rem)
+         * @default 32
+         */
+        this.size = DEFAULTS.SIZE;
         /**
          * Dispatch the activechange event.
          *
@@ -118,7 +125,6 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.TAB;
-        this.size = undefined;
         this.type = undefined;
         this.ariaStateKey = 'aria-selected';
         if (!this.tabId && this.onerror) {
@@ -135,6 +141,16 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
     setVariant(variant) {
         this.setAttribute('variant', Object.values(TAB_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
     }
+    /**
+     * Sets the size attribute for the tab component.
+     * If the provided size is not included in TAB_SIZES,
+     * it defaults to the value specified in DEFAULTS.SIZE.
+     *
+     * @param size - The size to set.
+     */
+    setSize(size) {
+        this.setAttribute('size', Object.values(TAB_SIZES).includes(size) ? `${size}` : DEFAULTS.SIZE.toString());
+    }
     getFilledIconName() {
         if (!this.iconName) {
             return undefined;
@@ -152,6 +168,9 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
     }
     update(changedProperties) {
         super.update(changedProperties);
+        if (changedProperties.has('size')) {
+            this.setSize(this.size);
+        }
         if (changedProperties.has('variant')) {
             this.setVariant(this.variant);
         }
@@ -209,6 +228,10 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Tab.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], Tab.prototype, "size", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'tab-id' }),
     __metadata("design:type", String)

package/dist/components/tab/tab.constants.d.ts

@@ -4,8 +4,13 @@ declare const TAB_VARIANTS: {
     readonly LINE: "line";
     readonly PILL: "pill";
 };
+declare const TAB_SIZES: {
+    readonly 32: 32;
+    readonly 28: 28;
+};
 declare const DEFAULTS: {
     readonly VARIANT: "pill";
     readonly ACTIVE: false;
+    readonly SIZE: 32;
 };
-export { DEFAULTS, TAG_NAME, TAB_VARIANTS };
+export { DEFAULTS, TAG_NAME, TAB_VARIANTS, TAB_SIZES };

package/dist/components/tab/tab.constants.js

@@ -5,8 +5,13 @@ const TAB_VARIANTS = {
     LINE: 'line',
     PILL: 'pill',
 };
+const TAB_SIZES = {
+    32: 32,
+    28: 28,
+};
 const DEFAULTS = {
     VARIANT: TAB_VARIANTS.PILL,
     ACTIVE: false,
+    SIZE: TAB_SIZES[32],
 };
-export { DEFAULTS, TAG_NAME, TAB_VARIANTS };
+export { DEFAULTS, TAG_NAME, TAB_VARIANTS, TAB_SIZES };

package/dist/components/tab/tab.styles.js

@@ -35,6 +35,10 @@ const styles = [
       border-radius: var(--mdc-tab-border-radius);
     }
 
+    :host([size='28']) {
+      --mdc-tab-height: 1.75rem;
+    }
+
     :host::part(container) {
       display: flex;
       width: 100%;

package/dist/components/tab/tab.types.d.ts

@@ -1,11 +1,12 @@
 import { TypedCustomEvent, ValueOf } from '../../utils/types';
 import type Tab from './tab.component';
-import { TAB_VARIANTS } from './tab.constants';
+import { TAB_SIZES, TAB_VARIANTS } from './tab.constants';
 type Variant = ValueOf<typeof TAB_VARIANTS>;
+type TabSize = ValueOf<typeof TAB_SIZES>;
 interface Events {
     onActiveChangeEvent: TypedCustomEvent<Tab, {
         tabId: string;
         active: boolean;
     }>;
 }
-export type { Variant, Events };
+export type { Variant, TabSize, Events };

package/dist/custom-elements.json

@@ -23857,6 +23857,17 @@
               ],
               "description": "Generates a template for a text slot with the specified content."
             },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false."
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -24063,6 +24074,15 @@
               "default": "'full-width'",
               "attribute": "variant",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wasSpacePressed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             }
           ],
           "events": [
@@ -24917,6 +24937,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -25201,6 +25236,19 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "field",
+              "name": "wasSpacePressed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -25991,6 +26039,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -26322,6 +26385,19 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "field",
+              "name": "wasSpacePressed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -27075,6 +27151,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -27417,6 +27508,19 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "field",
+              "name": "wasSpacePressed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -30026,6 +30130,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -30479,6 +30598,19 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "field",
+              "name": "wasSpacePressed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -31394,6 +31526,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the blur event on the list item. It resets the `wasSpacePressed` flag to false.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -31780,6 +31927,19 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "wasSpacePressed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "willValidate",
@@ -45988,6 +46148,26 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "TabSize"
+                  },
+                  "description": "The size to set."
+                }
+              ],
+              "description": "Sets the size attribute for the tab component.\nIf the provided size is not included in TAB_SIZES,\nit defaults to the value specified in DEFAULTS.SIZE."
+            },
             {
               "kind": "method",
               "name": "setSoftDisabled",
@@ -46041,7 +46221,7 @@
               "type": {
                 "text": "ButtonSize"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "description": "Size of the tab in pixels.\n- `32`: Default size (2rem)\n- `28`: Compact size (1.75rem)",
               "default": "32",
               "attribute": "size",
               "reflects": true,
@@ -46225,6 +46405,19 @@
               "default": "pill",
               "fieldName": "variant"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Size of the tab in pixels.\n- `32`: Default size (2rem)\n- `28`: Compact size (1.75rem)",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "tab-id",
               "type": {
@@ -46299,19 +46492,6 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
             {
               "name": "role",
               "type": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.26",
+  "version": "0.133.28",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"