chore: cleanup and update dependencies

.storybook/preview.ts

@@ -62,6 +62,7 @@ const preview: Preview = {
       },
     },
   },
+  tags: ['autodocs']
 };
 
 export default preview;

package.json

@@ -56,24 +56,24 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@open-wc/testing": "4.0.0",
-    "@storybook/addon-a11y": "^8.4.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-measure": "^8.4.5",
-    "@storybook/addon-themes": "^8.4.5",
-    "@storybook/addon-viewport": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/manager-api": "^8.4.5",
-    "@storybook/preview-api": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/theming": "^8.4.5",
-    "@storybook/web-components": "^8.4.5",
-    "@storybook/web-components-vite": "^8.4.5",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-measure": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/web-components": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
     "@tylertech-eslint/eslint-plugin": "^2.1.0",
     "@tylertech/forge-cli": "^3.1.0",
     "@tylertech/stylelint-rules": "^5.1.0",
     "@types/cssbeautify": "^0.3.5",
-    "@types/jasmine": "^5.1.4",
+    "@types/jasmine": "^5.1.5",
     "@types/karma": "^6.3.9",
     "@types/karma-fixture": "^0.2.8",
     "@types/node": "^20.14.2",
@@ -94,23 +94,23 @@
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "karma-fixture": "^0.2.6",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.2.11",
     "plop": "^4.0.1",
     "prettier": "3.3.3",
     "remark-gfm": "^4.0.0",
     "rollup-plugin-scss": "^4.0.0",
     "sass": "1.77.6",
     "sinon": "^18.0.0",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.7",
     "storybook-addon-tag-badges": "^1.2.1",
     "storybook-dark-mode": "^4.0.2",
-    "stylelint": "^16.10.0",
+    "stylelint": "^16.11.0",
     "stylelint-config-prettier": "^9.0.5",
     "typescript": "~5.4.5",
     "vite": "^5.4.11",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-full-reload": "^1.2.0",
-    "vite-tsconfig-paths": "^5.1.3"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "overrides": {
     "sass": "1.77.6"

src/lib/avatar/avatar.scss

@@ -23,7 +23,7 @@
 .forge-avatar {
   @include base;
 
-  &--image {
+  .image {
     @include base-with-image;
   }
 }

src/lib/avatar/avatar.ts

@@ -22,28 +22,14 @@ const charsByLetterCount = (text: string, count: number): string => {
   if (count === 1) {
     return text[0].toUpperCase();
   } else {
-    const words = text.match(/\S+/g) ?? [];
+    const words = text?.match(/\S+/g) ?? [];
     return words.slice(0, count).reduce((prev, curr) => (prev += curr[0].toUpperCase()), '');
   }
 };
 
 /**
  * @tag forge-avatar
  *
- * @summary Avatars represent an entity via text or image.
- *
- * @description The avatar component allows you to provide text or images to display that represent an entity. By default, the
- * avatar will display textual content as single characters (character count is configurable), or display an image or
- * icon based on the URL provided to it.
- *
- * @property {string} [text=""] - The text to display in the avatar.
- * @property {number} [letterCount=2] - Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
- * @property {string} imageUrl - The background image URL to use.
- *
- * @attribute {string} [text=""] - The text to display in the avatar.
- * @attribute {string} [letter-count=2] - Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
- * @attribute {string} image-url - The background image URL to use.
- *
  * @cssproperty {string} --forge-avatar-background - The background color of the avatar.
  * @cssproperty {number} --forge-avatar-shape - The border radius of the avatar, defaults to 50%.
  * @cssproperty {color} --forge-avatar-color - The text color of the avatar.
@@ -61,8 +47,25 @@ const charsByLetterCount = (text: string, count: number): string => {
 export class AvatarComponent extends LitElement implements IAvatarComponent {
   public static styles = unsafeCSS(styles);
 
+  /**
+   * The text to display in the avatar.
+   * @default ''
+   * @attribute
+   */
   @property({ type: String, reflect: true }) public text = '';
-  @property({ type: Number, reflect: true, attribute: 'letter-count' }) public letterCount = AVATAR_CONSTANTS.numbers.DEFAULT_LETTER_COUNT;
+
+  /**
+   * Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
+   * @default 2
+   * @attribute letter-count
+   */
+  @property({ type: Number, reflect: true, attribute: 'letter-count' }) public letterCount: number = AVATAR_CONSTANTS.numbers.DEFAULT_LETTER_COUNT;
+
+  /**
+   * The background image URL to use.
+   * @default ''
+   * @attribute image-url
+   */
   @property({ type: String, reflect: true, attribute: 'image-url' }) public imageUrl = '';
 
   @state() private _image: HTMLImageElement | undefined;
@@ -78,9 +81,9 @@ export class AvatarComponent extends LitElement implements IAvatarComponent {
       <div
         aria-hidden="true"
         part="root"
-        class=${classMap({ 'forge-avatar': true, 'forge-avatar--image': !!this._image })}
+        class=${classMap({ 'forge-avatar': true, image: !!this._image })}
         style=${this._image ? styleMap({ backgroundImage: `url(${this._image.src})` }) : nothing}>
-        <slot>${charsByLetterCount(this.text, this.letterCount)}</slot>
+        <slot>${this.text ? charsByLetterCount(this.text, this.letterCount) : nothing}</slot>
       </div>
     `;
   }

src/lib/avatar/index.ts

@@ -1,5 +1,4 @@
 import { defineCustomElement } from '@tylertech/forge-core';
-
 import { AvatarComponent } from './avatar';
 
 export * from './avatar-constants';

src/lib/meter/meter-group/index.ts

@@ -1,5 +1,4 @@
 import { defineCustomElement } from '@tylertech/forge-core';
-
 import { MeterGroupComponent } from './meter-group';
 
 export * from './meter-group-constants';

src/lib/meter/meter/index.ts

@@ -1,5 +1,4 @@
 import { defineCustomElement } from '@tylertech/forge-core';
-
 import { MeterComponent } from './meter';
 
 export * from './meter-constants';