@momentum-design/components 0.61.1 → 0.61.2

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

@@ -1,6 +1,5 @@
 import Tablist from './tablist.component';
 import '../button';
-import '../tab';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-tablist']: Tablist;

package/dist/components/tablist/index.js

@@ -1,6 +1,5 @@
 import Tablist from './tablist.component';
 import { TAG_NAME } from './tablist.constants';
 import '../button';
-import '../tab';
 Tablist.register(TAG_NAME);
 export default Tablist;

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

@@ -20,9 +20,7 @@ import { Component } from '../../models';
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
@@ -52,16 +50,8 @@ declare class TabList extends Component {
      */
     activeTabId?: string;
     /**
-     * Selector for the element that provides a label for the tablist.
-     */
-    dataAriaLabelledby?: string;
-    /**
-     * Label for the tablist in case aria-labelledby is not provided.
+     * Label for the tablist.
      * This is used when the tablist does not have a visible label.
-     * Defaults to 'Tab List'.
-     * <br/>
-     * Note: If both `data-aria-labelledby` and `data-aria-label` are provided,
-     * the `data-aria-labelledby` will be used.
      */
     dataAriaLabel?: string;
     /**
@@ -120,14 +110,6 @@ declare class TabList extends Component {
      * @param changedProperties - Map of changed properties with old values.
      */
     update(changedProperties: PropertyValues<this>): Promise<void>;
-    /**
-     * Set aria-labelledby attribute on the tablist element.
-     * If it does not exist, set aria-label attribute.
-     * As fallback, set aria-label to 'Tab List'.
-     *
-     * @internal
-     */
-    private setAriaLabelledByOrAriaLabel;
     /**
      * Dispatch the change event.
      *

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

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './tablist.styles';
 import { Component } from '../../models';
 import { ARROW_BUTTON_DIRECTION, KEYCODES } from './tablist.constants';
@@ -34,9 +35,7 @@ import { getFirstTab, getLastTab, getNextTab, getPreviousTab, findTab, getActive
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
@@ -81,24 +80,6 @@ class TabList extends Component {
          * @internal
          */
         this.isRtl = () => { var _a; return ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl' || window.getComputedStyle(this).direction === 'rtl'; };
-        /**
-         * Set aria-labelledby attribute on the tablist element.
-         * If it does not exist, set aria-label attribute.
-         * As fallback, set aria-label to 'Tab List'.
-         *
-         * @internal
-         */
-        this.setAriaLabelledByOrAriaLabel = () => {
-            var _a, _b, _c, _d;
-            if (this.dataAriaLabelledby) {
-                (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this.dataAriaLabelledby);
-                (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
-            }
-            else {
-                (_c = this.tabsContainer) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-label', this.dataAriaLabel || 'Tab List');
-                (_d = this.tabsContainer) === null || _d === void 0 ? void 0 : _d.removeAttribute('aria-labelledby');
-            }
-        };
         /**
          * Dispatch the change event.
          *
@@ -108,7 +89,7 @@ class TabList extends Component {
          */
         this.fireTabChangeEvent = (newTab) => {
             const event = new CustomEvent('change', {
-                detail: newTab.tabId,
+                detail: { tabId: newTab.tabId },
             });
             this.dispatchEvent(event);
         };
@@ -160,6 +141,7 @@ class TabList extends Component {
          * @param event - Custom Event fired from the nested tab.
          */
         this.handleNestedTabActiveChange = async (event) => {
+            event.stopPropagation();
             const tab = event.target;
             if (!(tab instanceof Tab)) {
                 return;
@@ -209,11 +191,10 @@ class TabList extends Component {
          * @param tab - Tab to set focus on.
          */
         this.focusTab = async (tab) => {
-            var _a;
             if (!(tab instanceof Tab)) {
                 return;
             }
-            if (tab !== ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+            if (tab !== (document === null || document === void 0 ? void 0 : document.activeElement)) {
                 this.resetTabIndexAndSetNewTabIndex(tab);
                 tab.focus();
             }
@@ -399,10 +380,8 @@ class TabList extends Component {
                 this.onerror('The tabs inside the tab list must have unique tab ids');
             }
         }
-        this.setAriaLabelledByOrAriaLabel();
         const resizeObserver = new ResizeObserver(async () => {
-            var _a, _b;
-            const activeElement = (_b = (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
+            const { activeElement } = document;
             /**
              * Keep the focused element in view.
              */
@@ -433,9 +412,6 @@ class TabList extends Component {
      */
     async update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('dataAriaLabelledby') || changedProperties.has('dataAriaLabel')) {
-            this.setAriaLabelledByOrAriaLabel();
-        }
         if (changedProperties.has('activeTabId')) {
             if (!this.tabs || !this.activeTabId) {
                 return;
@@ -446,7 +422,7 @@ class TabList extends Component {
             }
             this.setActiveTab(newTab);
             /**
-             * If the previous activeTabId was not undefined, fire the change event.
+             * If the previous activeTabId was not undefined, focus the new tab.
              *
              * Otherwise, reset the tabindex of all tabs and set the new tabindex.
              */
@@ -475,7 +451,11 @@ class TabList extends Component {
           ></mdc-button>`
             : nothing}`;
         return html ` ${arrowButton('backward')}
-      <div class="container" role="tablist" tabindex="-1">
+      <div 
+      class="container" 
+      role="tablist" 
+      tabindex="-1" 
+      aria-label="${ifDefined(this.dataAriaLabel)}">
         <slot></slot>
       </div>
       ${arrowButton(ARROW_BUTTON_DIRECTION.FORWARD)}`;
@@ -486,10 +466,6 @@ __decorate([
     property({ type: String, attribute: 'active-tab-id', reflect: true }),
     __metadata("design:type", String)
 ], TabList.prototype, "activeTabId", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-labelledby' }),
-    __metadata("design:type", String)
-], TabList.prototype, "dataAriaLabelledby", void 0);
 __decorate([
     property({ type: String, attribute: 'data-aria-label' }),
     __metadata("design:type", String)

package/dist/custom-elements.json

@@ -17296,6 +17296,139 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/spinner/spinner.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
+          "name": "Spinner",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default spinner color.",
+              "name": "--mdc-spinner-default-color"
+            },
+            {
+              "description": "Allows customization of the inverted spinner color.",
+              "name": "--mdc-spinner-inverted-color"
+            },
+            {
+              "description": "Allows customization of the spinner Button variant color.",
+              "name": "--mdc-spinner-button-variant-color"
+            },
+            {
+              "description": "Allows customization of the spinner size.",
+              "name": "--mdc-spinner-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The svg which contains the circle spinner.",
+              "name": "container"
+            },
+            {
+              "description": "The circle of the spinner.",
+              "name": "circle"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inverted",
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "inverted",
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "fieldName": "size"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-spinner",
+          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "components/spinner/spinner.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/staticcheckbox/staticcheckbox.component.js",
@@ -17440,139 +17573,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/spinner/spinner.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
-          "name": "Spinner",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default spinner color.",
-              "name": "--mdc-spinner-default-color"
-            },
-            {
-              "description": "Allows customization of the inverted spinner color.",
-              "name": "--mdc-spinner-inverted-color"
-            },
-            {
-              "description": "Allows customization of the spinner Button variant color.",
-              "name": "--mdc-spinner-button-variant-color"
-            },
-            {
-              "description": "Allows customization of the spinner size.",
-              "name": "--mdc-spinner-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The svg which contains the circle spinner.",
-              "name": "container"
-            },
-            {
-              "description": "The circle of the spinner.",
-              "name": "circle"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inverted",
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "SpinnerSize | undefined"
-              },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "SpinnerVariant"
-              },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "inverted",
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "SpinnerSize | undefined"
-              },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "fieldName": "size"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "SpinnerVariant"
-              },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-spinner",
-          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "components/spinner/spinner.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/staticradio/staticradio.component.js",
@@ -18682,7 +18682,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- If the tab list has a visible label,\n  the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.\n  Otherwise, the `tablist` element needs to have a label provided by `aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
+          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
           "name": "TabList",
           "cssProperties": [
             {
@@ -18715,22 +18715,13 @@
               "attribute": "active-tab-id",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "dataAriaLabelledby",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Selector for the element that provides a label for the tablist.",
-              "attribute": "data-aria-labelledby"
-            },
             {
               "kind": "field",
               "name": "dataAriaLabel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Label for the tablist in case aria-labelledby is not provided.\nThis is used when the tablist does not have a visible label.\nDefaults to 'Tab List'.\n<br/>\nNote: If both `data-aria-labelledby` and `data-aria-label` are provided,\nthe `data-aria-labelledby` will be used.",
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
               "attribute": "data-aria-label"
             }
           ],
@@ -18750,20 +18741,12 @@
               "description": "ID of the active tab, defaults to the first tab if not provided",
               "fieldName": "activeTabId"
             },
-            {
-              "name": "data-aria-labelledby",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Selector for the element that provides a label for the tablist.",
-              "fieldName": "dataAriaLabelledby"
-            },
             {
               "name": "data-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Label for the tablist in case aria-labelledby is not provided.\nThis is used when the tablist does not have a visible label.\nDefaults to 'Tab List'.\n<br/>\nNote: If both `data-aria-labelledby` and `data-aria-label` are provided,\nthe `data-aria-labelledby` will be used.",
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
               "fieldName": "dataAriaLabel"
             }
           ],
@@ -18772,7 +18755,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-tablist",
-          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - If the tab list has a visible label,\n *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.\n *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
+          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
           "customElement": true
         }
       ],

package/dist/react/index.d.ts

@@ -35,8 +35,8 @@ export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
-export { default as StaticCheckbox } from './staticcheckbox';
 export { default as Spinner } from './spinner';
+export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';

package/dist/react/index.js

@@ -35,8 +35,8 @@ export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
-export { default as StaticCheckbox } from './staticcheckbox';
 export { default as Spinner } from './spinner';
+export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';

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

@@ -19,9 +19,7 @@ import Component from '../../components/tablist';
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.

package/dist/react/tablist/index.js

@@ -21,9 +21,7 @@ import { TAG_NAME } from '../../components/tablist/tablist.constants';
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.61.1"
+  "version": "0.61.2"
 }