@momentum-design/components 0.139.2 → 0.139.4

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

@@ -12,6 +12,7 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * - Use `mdc-button` to trigger an action — submitting a form, opening a dialog, or running a command.
  * - Use `mdc-button` `primary` for the single most important action in a view. Keep at most one primary button per context; when a dialog offers "Save" and "Cancel", only "Save" is primary.
  * - Use `mdc-button` `secondary` for actions that are available but not the expected next step. More than one secondary button can appear together.
+ * - Use `mdc-button` with `variant="secondary"` and `color="overlay"` for actions placed directly over images, video, or other non-uniform backgrounds. Its dedicated background and border maintain visual separation and contrast against the underlying content.
  * - Use `mdc-button` `tertiary` for low-emphasis actions that should not compete for attention; unlike secondary, it has no resting outline, so its footprint appears only on hover or interaction.
  * - Use an icon-only `mdc-button` for compact targets such as toolbars or table-row controls where space is constrained and the icon's meaning is unambiguous.
  * - Use `mdc-button` with `inverted` on a dark or inverted surface so the color scheme keeps the required contrast.

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

@@ -25,6 +25,7 @@ declare const BUTTON_COLORS: {
     readonly NEGATIVE: "negative";
     readonly ACCENT: "accent";
     readonly PROMOTIONAL: "promotional";
+    readonly OVERLAY: "overlay";
     readonly DEFAULT: "default";
 };
 declare const BUTTON_TYPE_INTERNAL: {
@@ -32,11 +33,26 @@ declare const BUTTON_TYPE_INTERNAL: {
     readonly ICON: "icon";
     readonly PILL_WITH_ICON: "pill-with-icon";
 };
+declare const PRIMARY_BUTTON_COLORS: {
+    readonly POSITIVE: "positive";
+    readonly NEGATIVE: "negative";
+    readonly ACCENT: "accent";
+    readonly PROMOTIONAL: "promotional";
+    readonly DEFAULT: "default";
+};
 declare const TERTIARY_BUTTON_COLORS: {
     readonly DEFAULT: "default";
     readonly ACCENT: "accent";
     readonly NEGATIVE: "negative";
 };
+declare const SECONDARY_BUTTON_COLORS: {
+    readonly POSITIVE: "positive";
+    readonly NEGATIVE: "negative";
+    readonly ACCENT: "accent";
+    readonly PROMOTIONAL: "promotional";
+    readonly OVERLAY: "overlay";
+    readonly DEFAULT: "default";
+};
 declare const DEFAULTS: {
     readonly VARIANT: "primary";
     readonly SIZE: 32;
@@ -45,4 +61,4 @@ declare const DEFAULTS: {
     readonly TYPE: "button";
     readonly INVERTED: false;
 };
-export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, TERTIARY_BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };
+export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, PRIMARY_BUTTON_COLORS, SECONDARY_BUTTON_COLORS, TERTIARY_BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

package/dist/components/button/button.constants.js

@@ -23,6 +23,7 @@ const BUTTON_COLORS = {
     NEGATIVE: 'negative',
     ACCENT: 'accent',
     PROMOTIONAL: 'promotional',
+    OVERLAY: 'overlay',
     DEFAULT: 'default',
 };
 const BUTTON_TYPE_INTERNAL = {
@@ -30,11 +31,20 @@ const BUTTON_TYPE_INTERNAL = {
     ICON: 'icon',
     PILL_WITH_ICON: 'pill-with-icon',
 };
+const PRIMARY_BUTTON_COLORS = {
+    POSITIVE: BUTTON_COLORS.POSITIVE,
+    NEGATIVE: BUTTON_COLORS.NEGATIVE,
+    ACCENT: BUTTON_COLORS.ACCENT,
+    PROMOTIONAL: BUTTON_COLORS.PROMOTIONAL,
+    DEFAULT: BUTTON_COLORS.DEFAULT,
+};
 const TERTIARY_BUTTON_COLORS = {
     DEFAULT: BUTTON_COLORS.DEFAULT,
     ACCENT: BUTTON_COLORS.ACCENT,
     NEGATIVE: BUTTON_COLORS.NEGATIVE,
 };
+// secondary supports every color, so it's just an alias of the full BUTTON_COLORS set
+const SECONDARY_BUTTON_COLORS = BUTTON_COLORS;
 const DEFAULTS = {
     VARIANT: BUTTON_VARIANTS.PRIMARY,
     SIZE: PILL_BUTTON_SIZES[32],
@@ -43,4 +53,4 @@ const DEFAULTS = {
     TYPE: BUTTON_TYPE.BUTTON,
     INVERTED: false,
 };
-export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, TERTIARY_BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };
+export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, PRIMARY_BUTTON_COLORS, SECONDARY_BUTTON_COLORS, TERTIARY_BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

package/dist/components/button/button.styles.js

@@ -87,6 +87,19 @@ const styles = css `
     --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
+  :host([variant='secondary'][color='overlay']) {
+    --mdc-button-background: var(--mds-color-theme-overlay-button-secondary-normal);
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-border-color: var(--mds-color-theme-outline-button-normal);
+  }
+  :host([variant='secondary'][color='overlay']:hover) {
+    --mdc-button-background: var(--mds-color-theme-overlay-button-secondary-hover);
+  }
+  :host([variant='secondary'][color='overlay']:active),
+  :host([variant='secondary'][color='overlay'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-overlay-button-secondary-pressed);
+  }
+
   :host([variant='tertiary']) {
     --mdc-button-border-color: transparent;
     --mdc-button-text-color: var(--mds-color-theme-text-primary-normal);
@@ -287,6 +300,13 @@ const styles = css `
     --mdc-button-background: var(--mds-color-theme-button-secondary-disabled);
     cursor: auto;
   }
+  :host([variant='secondary'][color='overlay'][disabled]),
+  :host([variant='secondary'][color='overlay'][soft-disabled]) {
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-button-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-button-background: var(--mds-color-theme-overlay-button-secondary-normal);
+    cursor: auto;
+  }
   :host([variant='tertiary'][disabled]),
   :host([variant='tertiary'][soft-disabled]) {
     --mdc-button-text-color: var(--mds-color-theme-text-primary-disabled);

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

@@ -82,6 +82,7 @@ declare class TabList extends TabList_base {
      * @internal
      */
     private showBackwardArrowButton;
+    private readonly boundHandleFocus;
     /**
      * @internal
      */

package/dist/components/tablist/tablist.component.js

@@ -126,6 +126,9 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
          * @internal
          */
         this.showBackwardArrowButton = false;
+        this.boundHandleFocus = (event) => {
+            void this.handleFocus(event);
+        };
         // This must be initialized after the destroyed event listener
         // to keep the element in the itemStore in order to move the focus correctly
         this.itemsStore = new ElementStore(this, {
@@ -168,12 +171,12 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         if (!this.activeTabId) {
             this.activeTabId = (_a = getFirstTab(this.navItems)) === null || _a === void 0 ? void 0 : _a.tabId;
         }
-        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.handleFocus.bind(this));
+        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.boundHandleFocus);
     }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
-        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.handleFocus);
+        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.boundHandleFocus);
     }
     /**
      * Override focus to delegate to the active tab.
@@ -205,6 +208,11 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         if (event.relatedTarget instanceof Tab || !(event.target instanceof Tab)) {
             return;
         }
+        // After scrolling with arrow buttons, focus moves from the button to the clicked tab.
+        // Do not redirect that focus back to the currently active tab.
+        if (event.relatedTarget instanceof Button) {
+            return;
+        }
         const activeTab = getActiveTab(this.navItems || []);
         if (!(activeTab instanceof Tab)) {
             return;

package/dist/custom-elements.json

@@ -173,8 +173,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
               }
             },
             {
@@ -493,8 +493,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
               }
             },
             {
@@ -5037,7 +5037,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `overlay`: For secondary buttons placed over images, video, or other non-uniform backgrounds\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "default": "default",
               "attribute": "color",
               "inheritedFrom": {
@@ -5286,7 +5286,7 @@
                   "description": "The color to set."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors.",
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
                 "module": "utils/mixins/ButtonComponentMixin.js"
@@ -5559,7 +5559,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `overlay`: For secondary buttons placed over images, video, or other non-uniform backgrounds\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "default": "default",
               "fieldName": "color",
               "inheritedFrom": {
@@ -6042,7 +6042,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `overlay`: For secondary buttons placed over images, video, or other non-uniform backgrounds\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "default": "default",
               "attribute": "color",
               "inheritedFrom": {
@@ -6278,7 +6278,7 @@
                   "description": "The color to set."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors.",
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
                 "module": "utils/mixins/ButtonComponentMixin.js"
@@ -6542,7 +6542,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `overlay`: For secondary buttons placed over images, video, or other non-uniform backgrounds\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "default": "default",
               "fieldName": "color",
               "inheritedFrom": {
@@ -48481,6 +48481,12 @@
                 "module": "utils/mixins/TabListComponentMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundHandleFocus",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "dataAriaLabel",
@@ -57461,7 +57467,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `overlay`: For secondary buttons placed over images, video, or other non-uniform backgrounds\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "default": "default",
               "attribute": "color"
             },
@@ -57510,7 +57516,7 @@
                   "description": "The color to set."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors."
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons."
             },
             {
               "kind": "method",
@@ -57584,7 +57590,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `overlay`: For secondary buttons placed over images, video, or other non-uniform backgrounds\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.\nOverlay color is only supported for secondary buttons.",
               "default": "default",
               "fieldName": "color"
             }

package/dist/react/button/index.d.ts

@@ -9,6 +9,7 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * - Use `mdc-button` to trigger an action — submitting a form, opening a dialog, or running a command.
  * - Use `mdc-button` `primary` for the single most important action in a view. Keep at most one primary button per context; when a dialog offers "Save" and "Cancel", only "Save" is primary.
  * - Use `mdc-button` `secondary` for actions that are available but not the expected next step. More than one secondary button can appear together.
+ * - Use `mdc-button` with `variant="secondary"` and `color="overlay"` for actions placed directly over images, video, or other non-uniform backgrounds. Its dedicated background and border maintain visual separation and contrast against the underlying content.
  * - Use `mdc-button` `tertiary` for low-emphasis actions that should not compete for attention; unlike secondary, it has no resting outline, so its footprint appears only on hover or interaction.
  * - Use an icon-only `mdc-button` for compact targets such as toolbars or table-row controls where space is constrained and the icon's meaning is unambiguous.
  * - Use `mdc-button` with `inverted` on a dark or inverted surface so the color scheme keeps the required contrast.

package/dist/utils/mixins/ButtonComponentMixin.js

@@ -9,7 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 /* eslint-disable max-classes-per-file */
 import { property, state } from 'lit/decorators.js';
-import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, TERTIARY_BUTTON_COLORS, } from '../../components/button/button.constants';
+import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, PRIMARY_BUTTON_COLORS, TERTIARY_BUTTON_COLORS, } from '../../components/button/button.constants';
 export const ButtonComponentMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
@@ -28,9 +28,11 @@ export const ButtonComponentMixin = (superClass) => {
              * - `negative`: For destructive or error actions
              * - `accent`: For informational actions
              * - `promotional`: For promotional actions
+             * - `overlay`: For secondary buttons placed over images, video, or other non-uniform backgrounds
              * - `default`: For standard actions
              *
              * Note: Tertiary buttons only support default, accent, and negative colors.
+             * Overlay color is only supported for secondary buttons.
              * @default default
              */
             this.color = DEFAULTS.COLOR;
@@ -51,13 +53,15 @@ export const ButtonComponentMixin = (superClass) => {
          * Sets the color attribute for the button.
          * Defaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.
          * Tertiary buttons only support default, accent, and negative colors.
+         * Overlay color is only supported for secondary buttons.
          *
          * @param color - The color to set.
          */
         setColor(color) {
             const isValidColor = Object.values(BUTTON_COLORS).includes(color);
+            const isPrimaryUnsupported = this.variant === BUTTON_VARIANTS.PRIMARY && !Object.values(PRIMARY_BUTTON_COLORS).includes(color);
             const isTertiaryUnsupported = this.variant === BUTTON_VARIANTS.TERTIARY && !Object.values(TERTIARY_BUTTON_COLORS).includes(color);
-            if (!isValidColor || isTertiaryUnsupported) {
+            if (!isValidColor || isPrimaryUnsupported || isTertiaryUnsupported) {
                 this.setAttribute('color', `${DEFAULTS.COLOR}`);
             }
             else {

package/package.json

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