chore(deps-dev): add new eslint plugins

.eslintrc.cjs

@@ -9,6 +9,8 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "eslint:recommended",
     "plugin:storybook/recommended",
+    "plugin:lit/recommended",
+    "plugin:wc/recommended",
   ],
   plugins: ["prettier", "unused-imports", "@typescript-eslint"],
   env: {

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+node-options='--no-experimental-fetch'

package.json

@@ -111,9 +111,11 @@
     "esbuild-plugin-lit-css": "^2.0.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-lit": "^1.8.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "eslint-plugin-wc": "^1.5.0",
     "globby": "^13.1.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",

src/components/alert/bl-alert.ts

@@ -5,6 +5,7 @@ import { event, EventDispatcher } from "../../utilities/event";
 import { stringBooleanConverter } from "../../utilities/string-boolean.converter";
 import { ButtonVariant, ButtonKind, ButtonSize } from "../button/bl-button";
 import "../icon/bl-icon";
+import { BaklavaIcon } from "../icon/icon-list";
 import style from "./bl-alert.css";
 
 export type AlertVariant = "info" | "warning" | "success" | "danger";
@@ -30,13 +31,13 @@ export default class BlAlert extends LitElement {
    * Sets alert description
    */
   @property()
-  description?: "string";
+  description?: string;
 
   /**
    * Allows to customize alert icon
    */
   @property({ converter: stringBooleanConverter() })
-  icon?: boolean | string;
+  icon?: boolean | BaklavaIcon;
 
   /**
    * Displays a close button.
@@ -95,7 +96,7 @@ export default class BlAlert extends LitElement {
     }
   }
 
-  private _getIcon(): string | undefined {
+  private _getIcon(): BaklavaIcon | undefined {
     if (!this.icon) return;
     if (this.icon === true) return this._predefinedIcons();
     return this.icon;
@@ -143,10 +144,9 @@ export default class BlAlert extends LitElement {
       ? html`<bl-button
           class="close"
           label="close"
-          variant="tertiary"
           kind="neutral"
           icon="close"
-          variant="secondary"
+          variant="tertiary"
           @click=${this._closeHandler}
         ></bl-button>`
       : null;

src/components/dialog/bl-dialog.ts

@@ -170,7 +170,7 @@ export default class BlDialog extends LitElement {
           kind="neutral"
         ></bl-button>
       </header>
-      <section class="content"><slot /></section>
+      <section class="content"><slot></slot></section>
       ${this.renderFooter()}
     </div>`;
   }