@momentum-design/components 0.0.24 → 0.0.26

package/dist/components/iconprovider/iconprovider.stories.utils.d.ts

@@ -0,0 +1,12 @@
+import { Component } from '../../models';
+declare class SubComponentIconProvider extends Component {
+    currentTheme?: string;
+    private iconProviderContext;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-subcomponent-icon']: SubComponentIconProvider;
+    }
+}
+export {};

package/dist/components/iconprovider/iconprovider.stories.utils.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const lit_1 = require("lit");
+const models_1 = require("../../models");
+const iconprovider_component_1 = tslib_1.__importDefault(require("./iconprovider.component"));
+const provider_1 = tslib_1.__importDefault(require("../../utils/provider"));
+// Subcomponent to be rendered in storybook, to showcase that the
+// theme can be consumed as a subcomponent
+class SubComponentIconProvider extends models_1.Component {
+    constructor() {
+        super(...arguments);
+        this.iconProviderContext = provider_1.default.consume({ host: this, context: iconprovider_component_1.default.Context });
+    }
+    render() {
+        var _a, _b, _c;
+        return (0, lit_1.html) `
+      <p>URL: ${(_a = this.iconProviderContext.value) === null || _a === void 0 ? void 0 : _a.url}</p>
+      <p>File Extension: ${(_b = this.iconProviderContext.value) === null || _b === void 0 ? void 0 : _b.fileExtension}</p>
+      <p>Length Unit: ${(_c = this.iconProviderContext.value) === null || _c === void 0 ? void 0 : _c.lengthUnit}</p>
+    `;
+    }
+}
+SubComponentIconProvider.register('mdc-subcomponent-icon');

package/dist/components/themeprovider/themeprovider.stories.utils.d.ts

@@ -0,0 +1,12 @@
+import { Component } from '../../models';
+declare class SubComponentThemeProvider extends Component {
+    currentTheme?: string;
+    private themeProviderContext;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-subcomponent']: SubComponentThemeProvider;
+    }
+}
+export {};

package/dist/components/themeprovider/themeprovider.stories.utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const lit_1 = require("lit");
+const models_1 = require("../../models");
+const themeprovider_component_1 = tslib_1.__importDefault(require("./themeprovider.component"));
+const provider_1 = tslib_1.__importDefault(require("../../utils/provider"));
+// Subcomponent to be rendered in storybook, to showcase that the
+// theme can be consumed as a subcomponent
+class SubComponentThemeProvider extends models_1.Component {
+    constructor() {
+        super(...arguments);
+        this.themeProviderContext = provider_1.default.consume({ host: this, context: themeprovider_component_1.default.Context });
+    }
+    render() {
+        var _a;
+        return (0, lit_1.html) ` <p>${(_a = this.themeProviderContext.value) === null || _a === void 0 ? void 0 : _a.theme}</p> `;
+    }
+}
+SubComponentThemeProvider.register('mdc-subcomponent');

package/dist/custom-elements.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/components/avatar/avatar.component.ts",
+      "path": "components/avatar/avatar.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -99,6 +99,7 @@
           },
           "tagName": "mdc-avatar",
           "summary": "This is MyElement",
+          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tag mdc-avatar\n * @tagname mdc-avatar\n */",
           "customElement": true
         }
       ],
@@ -108,14 +109,14 @@
           "name": "default",
           "declaration": {
             "name": "Avatar",
-            "module": "src/components/avatar/avatar.component.ts"
+            "module": "components/avatar/avatar.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/badge/badge.component.ts",
+      "path": "components/badge/badge.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -240,6 +241,7 @@
           },
           "tagName": "mdc-badge",
           "summary": "This is MyElement",
+          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tag mdc-badge\n * @tagname mdc-badge\n */",
           "customElement": true
         }
       ],
@@ -249,14 +251,14 @@
           "name": "default",
           "declaration": {
             "name": "Badge",
-            "module": "src/components/badge/badge.component.ts"
+            "module": "components/badge/badge.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/icon/icon.component.ts",
+      "path": "components/icon/icon.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -404,6 +406,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component, which has to be mounted inside of a `IconProvider`\n * component.\n *\n * The `IconProvider` component defines where icons should be consumed from (`url`).\n * This `Icon` component accepts the `name` attribute, which will be\n * the file name of the icon to be loaded from the given `url`.\n *\n * Once fetched, the icon will be mounted. If fetching wasn't successful,\n * nothing will be shown.\n *\n * The `scale` attribute allows scaling the icon based on the provided\n * `length-unit` attribute (which will either come from the IconProvider or\n * could be overridden per icon). For example:\n * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be\n * `width: 1em; height: 1em`.\n *\n * For accessibility the `role` and `aria-label` of the icon can be set.\n *\n * @tag mdc-icon\n * @tagname mdc-icon\n */",
           "customElement": true
         }
       ],
@@ -413,14 +416,14 @@
           "name": "default",
           "declaration": {
             "name": "Icon",
-            "module": "src/components/icon/icon.component.ts"
+            "module": "components/icon/icon.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/iconprovider/iconprovider.component.ts",
+      "path": "components/iconprovider/iconprovider.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -510,6 +513,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-iconprovider",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * @tag mdc-iconprovider\n * @tagname mdc-iconprovider\n */",
           "customElement": true
         }
       ],
@@ -519,14 +523,14 @@
           "name": "default",
           "declaration": {
             "name": "IconProvider",
-            "module": "src/components/iconprovider/iconprovider.component.ts"
+            "module": "components/iconprovider/iconprovider.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/text/text.component.ts",
+      "path": "components/text/text.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -570,6 +574,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-text",
+          "jsDoc": "/**\n * Text component, which helps creating a text element aligning with\n * styling.\n *\n * The `type` attribute allows changing the type of text, like `heading-1`, etc.\n *\n * For accessibility the `role` and `aria-level` on the component are going to be set\n * automatically based on the type e.g. heading-1 will lead to `role=\"heading\"` and `aria-level=1`.\n *\n * @tag mdc-text\n * @tagname mdc-text\n */",
           "customElement": true
         }
       ],
@@ -579,14 +584,14 @@
           "name": "default",
           "declaration": {
             "name": "Text",
-            "module": "src/components/text/text.component.ts"
+            "module": "components/text/text.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/themeprovider/themeprovider.component.ts",
+      "path": "components/themeprovider/themeprovider.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -659,6 +664,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-themeprovider",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the theme css variables\n * for the child dom nodes and allows to be consumed from sub components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes the different font faces available\n * for Text components.\n *\n * @tag mdc-themeprovider\n * @tagname mdc-themeprovider\n */",
           "customElement": true
         }
       ],
@@ -668,7 +674,7 @@
           "name": "default",
           "declaration": {
             "name": "ThemeProvider",
-            "module": "src/components/themeprovider/themeprovider.component.ts"
+            "module": "components/themeprovider/themeprovider.component.js"
           }
         }
       ]

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-import { Component, Provider } from './models';
 import ThemeProvider from './components/themeprovider';
 import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
 import Avatar from './components/avatar';
 import Badge from './components/badge';
 import Text from './components/text';
-export { Component, Provider, ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };

package/dist/index.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Badge = exports.Avatar = exports.IconProvider = exports.Icon = exports.ThemeProvider = exports.Provider = exports.Component = void 0;
+exports.Text = exports.Badge = exports.Avatar = exports.IconProvider = exports.Icon = exports.ThemeProvider = void 0;
 const tslib_1 = require("tslib");
-const models_1 = require("./models");
-Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return models_1.Component; } });
-Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return models_1.Provider; } });
 const themeprovider_1 = tslib_1.__importDefault(require("./components/themeprovider"));
 exports.ThemeProvider = themeprovider_1.default;
 const icon_1 = tslib_1.__importDefault(require("./components/icon"));

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

@@ -0,0 +1,11 @@
+import Component from '../../components/avatar';
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-avatar
+ * @tagname mdc-avatar
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/avatar/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("@lit/react");
+const avatar_1 = tslib_1.__importDefault(require("../../components/avatar"));
+const avatar_constants_1 = require("../../components/avatar/avatar.constants");
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-avatar
+ * @tagname mdc-avatar
+ */
+const reactWrapper = (0, react_1.createComponent)({
+    tagName: avatar_constants_1.TAG_NAME,
+    elementClass: avatar_1.default,
+    react: React,
+    events: {},
+    displayName: 'Avatar',
+});
+exports.default = reactWrapper;

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

@@ -0,0 +1,11 @@
+import Component from '../../components/badge';
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-badge
+ * @tagname mdc-badge
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/badge/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("@lit/react");
+const badge_1 = tslib_1.__importDefault(require("../../components/badge"));
+const badge_constants_1 = require("../../components/badge/badge.constants");
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-badge
+ * @tagname mdc-badge
+ */
+const reactWrapper = (0, react_1.createComponent)({
+    tagName: badge_constants_1.TAG_NAME,
+    elementClass: badge_1.default,
+    react: React,
+    events: {},
+    displayName: 'Badge',
+});
+exports.default = reactWrapper;

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

@@ -0,0 +1,25 @@
+import Component from '../../components/icon';
+/**
+ * Icon component, which has to be mounted inside of a `IconProvider`
+ * component.
+ *
+ * The `IconProvider` component defines where icons should be consumed from (`url`).
+ * This `Icon` component accepts the `name` attribute, which will be
+ * the file name of the icon to be loaded from the given `url`.
+ *
+ * Once fetched, the icon will be mounted. If fetching wasn't successful,
+ * nothing will be shown.
+ *
+ * The `scale` attribute allows scaling the icon based on the provided
+ * `length-unit` attribute (which will either come from the IconProvider or
+ * could be overridden per icon). For example:
+ * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * `width: 1em; height: 1em`.
+ *
+ * For accessibility the `role` and `aria-label` of the icon can be set.
+ *
+ * @tag mdc-icon
+ * @tagname mdc-icon
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/icon/index.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("@lit/react");
+const icon_1 = tslib_1.__importDefault(require("../../components/icon"));
+const icon_constants_1 = require("../../components/icon/icon.constants");
+/**
+ * Icon component, which has to be mounted inside of a `IconProvider`
+ * component.
+ *
+ * The `IconProvider` component defines where icons should be consumed from (`url`).
+ * This `Icon` component accepts the `name` attribute, which will be
+ * the file name of the icon to be loaded from the given `url`.
+ *
+ * Once fetched, the icon will be mounted. If fetching wasn't successful,
+ * nothing will be shown.
+ *
+ * The `scale` attribute allows scaling the icon based on the provided
+ * `length-unit` attribute (which will either come from the IconProvider or
+ * could be overridden per icon). For example:
+ * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * `width: 1em; height: 1em`.
+ *
+ * For accessibility the `role` and `aria-label` of the icon can be set.
+ *
+ * @tag mdc-icon
+ * @tagname mdc-icon
+ */
+const reactWrapper = (0, react_1.createComponent)({
+    tagName: icon_constants_1.TAG_NAME,
+    elementClass: icon_1.default,
+    react: React,
+    events: {},
+    displayName: 'Icon',
+});
+exports.default = reactWrapper;

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

@@ -0,0 +1,14 @@
+import Component from '../../components/iconprovider';
+/**
+ * IconProvider component, which allows to be consumed from sub components
+ * (see `providerUtils.consume` for how to consume)
+ *
+ * Bundling icons will be up to the consumer of this component, such
+ * that only a url has to be passed in from which the icons will be
+ * fetched.
+ *
+ * @tag mdc-iconprovider
+ * @tagname mdc-iconprovider
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/iconprovider/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("@lit/react");
+const iconprovider_1 = tslib_1.__importDefault(require("../../components/iconprovider"));
+const iconprovider_constants_1 = require("../../components/iconprovider/iconprovider.constants");
+/**
+ * IconProvider component, which allows to be consumed from sub components
+ * (see `providerUtils.consume` for how to consume)
+ *
+ * Bundling icons will be up to the consumer of this component, such
+ * that only a url has to be passed in from which the icons will be
+ * fetched.
+ *
+ * @tag mdc-iconprovider
+ * @tagname mdc-iconprovider
+ */
+const reactWrapper = (0, react_1.createComponent)({
+    tagName: iconprovider_constants_1.TAG_NAME,
+    elementClass: iconprovider_1.default,
+    react: React,
+    events: {},
+    displayName: 'IconProvider',
+});
+exports.default = reactWrapper;

package/dist/react/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
+export { default as Icon } from './icon';
+export { default as IconProvider } from './iconprovider';
+export { default as Text } from './text';
+export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Icon = exports.Badge = exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
+var badge_1 = require("./badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
+var icon_1 = require("./icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
+var iconprovider_1 = require("./iconprovider");
+Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });
+var text_1 = require("./text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
+var themeprovider_1 = require("./themeprovider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return __importDefault(themeprovider_1).default; } });

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

@@ -0,0 +1,15 @@
+import Component from '../../components/text';
+/**
+ * Text component, which helps creating a text element aligning with
+ * styling.
+ *
+ * The `type` attribute allows changing the type of text, like `heading-1`, etc.
+ *
+ * For accessibility the `role` and `aria-level` on the component are going to be set
+ * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
+ *
+ * @tag mdc-text
+ * @tagname mdc-text
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/text/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("@lit/react");
+const text_1 = tslib_1.__importDefault(require("../../components/text"));
+const text_constants_1 = require("../../components/text/text.constants");
+/**
+ * Text component, which helps creating a text element aligning with
+ * styling.
+ *
+ * The `type` attribute allows changing the type of text, like `heading-1`, etc.
+ *
+ * For accessibility the `role` and `aria-level` on the component are going to be set
+ * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
+ *
+ * @tag mdc-text
+ * @tagname mdc-text
+ */
+const reactWrapper = (0, react_1.createComponent)({
+    tagName: text_constants_1.TAG_NAME,
+    elementClass: text_1.default,
+    react: React,
+    events: {},
+    displayName: 'Text',
+});
+exports.default = reactWrapper;

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

@@ -0,0 +1,14 @@
+import Component from '../../components/themeprovider';
+/**
+ * ThemeProvider component, which sets the theme css variables
+ * for the child dom nodes and allows to be consumed from sub components
+ * (see providerUtils.consume for how to consume)
+ *
+ * ThemeProvider also includes the different font faces available
+ * for Text components.
+ *
+ * @tag mdc-themeprovider
+ * @tagname mdc-themeprovider
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/themeprovider/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("@lit/react");
+const themeprovider_1 = tslib_1.__importDefault(require("../../components/themeprovider"));
+const themeprovider_constants_1 = require("../../components/themeprovider/themeprovider.constants");
+/**
+ * ThemeProvider component, which sets the theme css variables
+ * for the child dom nodes and allows to be consumed from sub components
+ * (see providerUtils.consume for how to consume)
+ *
+ * ThemeProvider also includes the different font faces available
+ * for Text components.
+ *
+ * @tag mdc-themeprovider
+ * @tagname mdc-themeprovider
+ */
+const reactWrapper = (0, react_1.createComponent)({
+    tagName: themeprovider_constants_1.TAG_NAME,
+    elementClass: themeprovider_1.default,
+    react: React,
+    events: {},
+    displayName: 'ThemeProvider',
+});
+exports.default = reactWrapper;

package/dist/utils/mixins/DisabledMixin.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export interface DisabledMixinInterface {
+    disabled: boolean;
+}
+export declare const DisabledMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DisabledMixinInterface> & T;
+export {};

package/dist/utils/mixins/DisabledMixin.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledMixin = void 0;
+const tslib_1 = require("tslib");
+const decorators_js_1 = require("lit/decorators.js");
+const DisabledMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            this.disabled = false;
+        }
+    }
+    tslib_1.__decorate([
+        (0, decorators_js_1.property)({ reflect: true, type: Boolean }),
+        tslib_1.__metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "disabled", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};
+exports.DisabledMixin = DisabledMixin;

package/dist/utils/mixins/TabIndexMixin.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export interface TabIndexMixinInterface {
+    tabIndex: number;
+}
+export declare const TabIndexMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TabIndexMixinInterface> & T;
+export {};

package/dist/utils/mixins/TabIndexMixin.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabIndexMixin = void 0;
+const tslib_1 = require("tslib");
+const decorators_js_1 = require("lit/decorators.js");
+const TabIndexMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            this.tabIndex = 0;
+        }
+    }
+    tslib_1.__decorate([
+        (0, decorators_js_1.property)({ reflect: true, type: Number, attribute: 'tabindex' }),
+        tslib_1.__metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "tabIndex", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};
+exports.TabIndexMixin = TabIndexMixin;

package/package.json

@@ -13,14 +13,17 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./browser": "./dist/browser/index.js",
     "./module": "./dist/components",
-    "./browser": "./dist/browser"
+    "./react": "./dist/react"
   },
   "files": [
-    "./dist/"
+    "./dist/",
+    "!**/*.tsbuildinfo"
   ],
   "dependencies": {
     "@lit/context": "^1.1.2",
+    "@lit/react": "^1.0.5",
     "lit": "^3.2.0"
   },
   "peerDependencies": {
@@ -28,5 +31,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.0.24"
+  "version": "0.0.26"
 }