@momentum-design/components 0.133.37 → 0.133.39

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

@@ -121,6 +121,12 @@ declare class TabList extends TabList_base {
      */
     protected firstUpdated(): Promise<void>;
     disconnectedCallback(): void;
+    /**
+     * Override focus to delegate to the active tab.
+     * When a dialog focus-trap or any other caller invokes `.focus()` on the tablist host,
+     * focus is forwarded directly to the active tab instead of landing on the shadow host.
+     */
+    focus(options?: FocusOptions): void;
     /**
      * When the tablist receives focus, then focus the active tab.
      *
@@ -160,5 +166,13 @@ declare class TabList extends TabList_base {
     private scrollTabs;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
 }
 export default TabList;

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

@@ -199,6 +199,20 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         super.disconnectedCallback();
         (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.handleFocus);
     }
+    /**
+     * Override focus to delegate to the active tab.
+     * When a dialog focus-trap or any other caller invokes `.focus()` on the tablist host,
+     * focus is forwarded directly to the active tab instead of landing on the shadow host.
+     */
+    focus(options) {
+        const activeTab = getActiveTab(this.navItems);
+        if (activeTab) {
+            activeTab.focus(options);
+        }
+        else {
+            super.focus(options);
+        }
+    }
     /**
      * When the tablist receives focus, then focus the active tab.
      *
@@ -208,7 +222,8 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
     async handleFocus(event) {
         /**
          * If the element losing focus is a tab, do nothing.
-         * If the element gaining focus is not a tab, do nothing.
+         * If the element gaining focus is not a tab or the container itself (e.g., via delegatesFocus
+         * or a click on the container), do nothing — the focus() override handles the programmatic case.
          * This also covers the case when previous focus was on a tab that belongs to another tablist.
          */
         if (event.relatedTarget instanceof Tab || !(event.target instanceof Tab)) {
@@ -354,6 +369,7 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
     }
 }
 TabList.styles = [...Component.styles, ...styles];
+TabList.shadowRootOptions = { ...Component.shadowRootOptions, delegatesFocus: true };
 __decorate([
     property({ type: String, attribute: 'data-aria-label' }),
     __metadata("design:type", String)

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

@@ -37,8 +37,6 @@ import ThemeProviderContext from './themeprovider.context';
  * default: `Momentum` (from momentum-design/fonts)
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * default: `-0.25px` (this is to match the old CiscoSans)
- * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
- * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
  */

package/dist/components/themeprovider/themeprovider.component.js

@@ -48,8 +48,6 @@ import styles from './themeprovider.styles';
  * default: `Momentum` (from momentum-design/fonts)
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * default: `-0.25px` (this is to match the old CiscoSans)
- * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
- * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
  */

package/dist/components/themeprovider/themeprovider.styles.js

@@ -4,8 +4,6 @@ const styles = css `
     --mdc-themeprovider-color-default: var(--mds-color-theme-text-primary-normal);
     --mdc-themeprovider-font-family: var(--mds-font-family-primary);
     --mdc-themeprovider-font-weight: 400;
-    /* Adjusting font feature settings for accessibility reasons */
-    --mdc-themeprovider-font-feature-settings: 'ss02' on;
 
     /* Custom scrollbar variables */
     --mdc-themeprovider-scrollbar-track-color: transparent;
@@ -14,8 +12,6 @@ const styles = css `
     color: var(--mdc-themeprovider-color-default);
     font-family: var(--mdc-themeprovider-font-family);
     font-weight: var(--mdc-themeprovider-font-weight);
-
-    font-feature-settings: var(--mdc-themeprovider-font-feature-settings);
   }
 
   /** Scrollbar Theme for Chrome, Edge, and Firefox. This has limited support on other browsers.

package/dist/custom-elements.json

@@ -46644,6 +46644,26 @@
               "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
               "attribute": "data-aria-label"
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Override focus to delegate to the active tab.\nWhen a dialog focus-trap or any other caller invokes `.focus()` on the tablist host,\nfocus is forwarded directly to the active tab instead of landing on the shadow host."
+            },
             {
               "kind": "method",
               "name": "getCurrentIndex",
@@ -46748,6 +46768,15 @@
                 "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...Component.shadowRootOptions, delegatesFocus: true }"
+            },
             {
               "kind": "method",
               "name": "shouldLoop",
@@ -48211,10 +48240,6 @@
               "description": "Option to override the font weight, default: `400` default: `-0.25px` (this is to match the old CiscoSans)",
               "name": "--mdc-themeprovider-font-weight"
             },
-            {
-              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
-              "name": "--mdc-themeprovider-font-feature-settings"
-            },
             {
               "description": "Option to override the color of the scrollbar track.",
               "name": "--mdc-themeprovider-scrollbar-track-color"
@@ -48281,7 +48306,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
           "customElement": true
         }
       ],

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

@@ -35,8 +35,6 @@ import Component from '../../components/themeprovider';
  * default: `Momentum` (from momentum-design/fonts)
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * default: `-0.25px` (this is to match the old CiscoSans)
- * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
- * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
  */

package/dist/react/themeprovider/index.js

@@ -38,8 +38,6 @@ import { TAG_NAME } from '../../components/themeprovider/themeprovider.constants
  * default: `Momentum` (from momentum-design/fonts)
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * default: `-0.25px` (this is to match the old CiscoSans)
- * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
- * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
  */

package/package.json

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