@momentum-design/components 0.4.0 → 0.4.1

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

@@ -10,7 +10,7 @@ import IconProviderContext from './iconprovider.context';
  *
  * @tagname mdc-iconprovider
  *
- * @slot default - children
+ * @slot - children
  */
 declare class IconProvider extends Provider<IconProviderContext> {
     constructor();

package/dist/components/iconprovider/iconprovider.component.js

@@ -15,7 +15,7 @@ const iconprovider_constants_1 = require("./iconprovider.constants");
  *
  * @tagname mdc-iconprovider
  *
- * @slot default - children
+ * @slot - children
  */
 class IconProvider extends models_1.Provider {
     constructor() {

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

@@ -16,6 +16,8 @@ import type { FontType, ValidTextTags } from './text.types';
  *
  * @tagname mdc-text
  * @slot - Default slot for text content
+ *
+ * @csspart text - The text element
  */
 declare class Text extends Component {
     /**

package/dist/components/text/text.component.js

@@ -21,6 +21,8 @@ const text_constants_1 = require("./text.constants");
  *
  * @tagname mdc-text
  * @slot - Default slot for text content
+ *
+ * @csspart text - The text element
  */
 class Text extends models_1.Component {
     constructor() {
@@ -70,23 +72,23 @@ class Text extends models_1.Component {
          * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
          * Note that the styling is determined by the `type` attribute.
          */
-        this.tagname = text_constants_1.DEFAULTS.TAGNAME;
+        this.tagname = text_constants_1.DEFAULTS.TEXT_ELEMENT_TAGNAME;
     }
     render() {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
         switch (this.tagname) {
-            case 'h1': return (0, lit_1.html) `<h1 part=${text_constants_1.PART_NAME}><slot></slot></h1>`;
-            case 'h2': return (0, lit_1.html) `<h2 part=${text_constants_1.PART_NAME}><slot></slot></h2>`;
-            case 'h3': return (0, lit_1.html) `<h3 part=${text_constants_1.PART_NAME}><slot></slot></h3>`;
-            case 'h4': return (0, lit_1.html) `<h4 part=${text_constants_1.PART_NAME}><slot></slot></h4>`;
-            case 'h5': return (0, lit_1.html) `<h5 part=${text_constants_1.PART_NAME}><slot></slot></h5>`;
-            case 'h6': return (0, lit_1.html) `<h6 part=${text_constants_1.PART_NAME}><slot></slot></h6>`;
-            case 'div': return (0, lit_1.html) `<div part=${text_constants_1.PART_NAME}><slot></slot></div>`;
-            case 'p': return (0, lit_1.html) `<p part=${text_constants_1.PART_NAME}><slot></slot></p>`;
-            case 'span': return (0, lit_1.html) `<span part=${text_constants_1.PART_NAME}><slot></slot></span>`;
-            case 'small': return (0, lit_1.html) `<small part=${text_constants_1.PART_NAME}><slot></slot></small>`;
-            default: return (0, lit_1.html) `<p part=${text_constants_1.PART_NAME}><slot></slot></p>`;
+            case 'h1': return (0, lit_1.html) `<h1 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
+            case 'h2': return (0, lit_1.html) `<h2 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
+            case 'h3': return (0, lit_1.html) `<h3 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
+            case 'h4': return (0, lit_1.html) `<h4 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
+            case 'h5': return (0, lit_1.html) `<h5 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
+            case 'h6': return (0, lit_1.html) `<h6 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
+            case 'div': return (0, lit_1.html) `<div part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
+            case 'span': return (0, lit_1.html) `<span part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
+            case 'small': return (0, lit_1.html) `<small part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
+            case 'p':
+            default: return (0, lit_1.html) `<p part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
         }
     }
 }

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

@@ -1,12 +1,12 @@
 import type { FontType, ValidTextTags } from './text.types';
 declare const TAG_NAME: "mdc-text";
-declare const PART_NAME = "text";
 declare const VALUES: {
     TYPE: Array<FontType>;
     TAGNAME: Array<ValidTextTags>;
 };
 declare const DEFAULTS: {
-    TAGNAME: ValidTextTags;
     TYPE: FontType;
+    TEXT_ELEMENT_TAGNAME: ValidTextTags;
+    CSS_PART_TEXT: string;
 };
-export { TAG_NAME, DEFAULTS, VALUES, PART_NAME };
+export { TAG_NAME, DEFAULTS, VALUES };

package/dist/components/text/text.constants.js

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PART_NAME = exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
+exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
 const tslib_1 = require("tslib");
 const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
 const TAG_NAME = tag_name_1.default.constructTagName('text');
 exports.TAG_NAME = TAG_NAME;
-const PART_NAME = 'text';
-exports.PART_NAME = PART_NAME;
 const VALUES = {
     TYPE: [
         'body-small-regular',
@@ -55,7 +53,8 @@ const VALUES = {
 };
 exports.VALUES = VALUES;
 const DEFAULTS = {
-    TAGNAME: 'p',
     TYPE: 'body-midsize-regular',
+    TEXT_ELEMENT_TAGNAME: 'p',
+    CSS_PART_TEXT: 'text',
 };
 exports.DEFAULTS = DEFAULTS;

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

@@ -15,7 +15,7 @@ import ThemeProviderContext from './themeprovider.context';
  *
  * @tagname mdc-themeprovider
  *
- * @slot default - children
+ * @slot - children
  *
  * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,
  * default: color-theme-text-primary-normal

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

@@ -20,7 +20,7 @@ const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.
  *
  * @tagname mdc-themeprovider
  *
- * @slot default - children
+ * @slot - children
  *
  * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,
  * default: color-theme-text-primary-normal

package/dist/custom-elements.json

@@ -439,7 +439,7 @@
           "slots": [
             {
               "description": "children",
-              "name": "default"
+              "name": ""
             }
           ],
           "members": [
@@ -547,7 +547,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 * @tagname mdc-iconprovider\n *\n * @slot default - children\n */",
+          "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 * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
           "customElement": true
         }
       ],
@@ -570,6 +570,12 @@
           "kind": "class",
           "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
           "name": "Text",
+          "cssParts": [
+            {
+              "description": "The text element",
+              "name": "text"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot for text content",
@@ -623,7 +629,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n */",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
           "customElement": true
         }
       ],
@@ -667,7 +673,7 @@
           "slots": [
             {
               "description": "children",
-              "name": "default"
+              "name": ""
             }
           ],
           "members": [
@@ -721,7 +727,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 * 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 default - 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 * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\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 * 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 * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n */",
           "customElement": true
         }
       ],

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

@@ -9,7 +9,7 @@ import Component from '../../components/iconprovider';
  *
  * @tagname mdc-iconprovider
  *
- * @slot default - children
+ * @slot - children
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/iconprovider/index.js

@@ -15,7 +15,7 @@ const iconprovider_constants_1 = require("../../components/iconprovider/iconprov
  *
  * @tagname mdc-iconprovider
  *
- * @slot default - children
+ * @slot - children
  */
 const reactWrapper = (0, react_1.createComponent)({
     tagName: iconprovider_constants_1.TAG_NAME,

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

@@ -14,6 +14,8 @@ import Component from '../../components/text';
  *
  * @tagname mdc-text
  * @slot - Default slot for text content
+ *
+ * @csspart text - The text element
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/text/index.js

@@ -20,6 +20,8 @@ const text_constants_1 = require("../../components/text/text.constants");
  *
  * @tagname mdc-text
  * @slot - Default slot for text content
+ *
+ * @csspart text - The text element
  */
 const reactWrapper = (0, react_1.createComponent)({
     tagName: text_constants_1.TAG_NAME,

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

@@ -13,7 +13,7 @@ import Component from '../../components/themeprovider';
  *
  * @tagname mdc-themeprovider
  *
- * @slot default - children
+ * @slot - children
  *
  * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,
  * default: color-theme-text-primary-normal

package/dist/react/themeprovider/index.js

@@ -19,7 +19,7 @@ const themeprovider_constants_1 = require("../../components/themeprovider/themep
  *
  * @tagname mdc-themeprovider
  *
- * @slot default - children
+ * @slot - children
  *
  * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,
  * default: color-theme-text-primary-normal

package/package.json

@@ -37,5 +37,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.4.0"
+  "version": "0.4.1"
 }