build: bump dependencies

.github/workflows/publish.yml

@@ -24,6 +24,11 @@ jobs:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
+    # Environment variables available to all steps in the job to ensure provenance of the build
+    permissions:
+      contents: read
+      id-token: write
+
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it

.npmrc

@@ -1 +1,2 @@
+provenance=true
 legacy-peer-deps=true

package.json

@@ -59,77 +59,77 @@
     "lit": "^2.8.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.0",
-    "@lerna-lite/cli": "2.6.0",
-    "@lerna-lite/exec": "2.6.0",
-    "@lerna-lite/publish": "2.6.0",
-    "@lerna-lite/run": "2.6.0",
-    "@lerna-lite/version": "2.6.0",
+    "@babel/core": "7.23.9",
+    "@lerna-lite/cli": "3.2.1",
+    "@lerna-lite/exec": "3.2.1",
+    "@lerna-lite/publish": "3.2.1",
+    "@lerna-lite/run": "3.2.1",
+    "@lerna-lite/version": "3.2.1",
     "@open-wc/testing": "4.0.0",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@storybook/addon-a11y": "7.6.7",
-    "@storybook/addon-actions": "7.6.7",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-links": "7.6.7",
-    "@storybook/blocks": "7.6.7",
-    "@storybook/web-components": "7.6.7",
-    "@storybook/web-components-vite": "7.6.7",
+    "@storybook/addon-a11y": "^7.6.12",
+    "@storybook/addon-actions": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/web-components": "^7.6.12",
+    "@storybook/web-components-vite": "^7.6.12",
     "@types/chai": "4.3.5",
-    "@typescript-eslint/eslint-plugin": "6.6.0",
-    "@typescript-eslint/parser": "6.0.0",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
     "@web/dev-server-esbuild": "0.4.3",
     "@web/test-runner": "0.17.0",
     "@web/test-runner-playwright": "0.11.0",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.17",
     "babel-loader": "9.1.3",
-    "chromatic": "6.20.0",
-    "element-internals-polyfill": "1.3.5",
+    "chromatic": "10.7.1",
+    "element-internals-polyfill": "1.3.10",
     "esbuild": "0.20.0",
-    "eslint": "8.45.0",
-    "eslint-config-prettier": "9.0.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-lit": "1.9.1",
-    "eslint-plugin-lit-a11y": "4.1.1",
-    "eslint-plugin-local-rules": "2.0.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-lit": "1.11.0",
+    "eslint-plugin-lit-a11y": "4.1.2",
+    "eslint-plugin-local-rules": "2.0.1",
     "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-wc": "2.0.4",
-    "github-markdown-css": "5.3.0",
+    "github-markdown-css": "5.5.1",
     "glob": "8.1.0",
     "husky": "8.0.3",
-    "lint-staged": "13.2.3",
+    "lint-staged": "15.2.2",
     "npm-check-updates": "16.10.16",
     "plop": "3.1.2",
-    "postcss": "8.4.31",
+    "postcss": "8.4.34",
     "postcss-advanced-variables": "3.0.1",
-    "postcss-cli": "10.1.0",
+    "postcss-cli": "11.0.0",
     "postcss-color-function": "4.1.0",
-    "postcss-custom-properties": "13.3.2",
+    "postcss-custom-properties": "13.3.4",
     "postcss-jsx": "0.36.4",
     "postcss-load-config": "5.0.2",
     "postcss-syntax": "0.36.2",
     "postcss-url": "10.1.3",
     "postcss-values-parser": "6.0.2",
-    "prettier": "2.8.8",
+    "prettier": "3.2.5",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "8.0.7",
     "react-syntax-highlighter": "15.5.0",
     "remark-gfm": "3.0.1",
-    "rimraf": "5.0.1",
+    "rimraf": "5.0.5",
     "rollup": "4.9.6",
-    "rollup-plugin-esbuild": "6.1.0",
+    "rollup-plugin-esbuild": "6.1.1",
     "rollup-plugin-import-css": "3.4.0",
     "rollup-plugin-minify-html-literals": "1.2.6",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "7.6.7",
+    "storybook": "^7.6.12",
     "tsc-files": "1.1.4",
-    "turbo": "1.11.3",
+    "turbo": "1.12.2",
     "typescript": "5.2.2",
     "vite": "5.0.12",
-    "vite-tsconfig-paths": "4.2.0",
+    "vite-tsconfig-paths": "4.3.1",
     "web-component-analyzer": "2.0.0"
   },
   "workspaces": [

packages/uui-action-bar/lib/uui-action-bar.story.ts

@@ -49,7 +49,7 @@ export const AAAOverview: StoryFn = props => html`
             look="${props.look}"
             color="${props.color}">
             <uui-icon name="${el}"></uui-icon>
-          </uui-button>`
+          </uui-button>`,
       )}
     </uui-action-bar>
   </uui-icon-registry-essential>
@@ -71,7 +71,7 @@ export const Single = () => {
                 <uui-icon name="delete"></uui-icon>
               </uui-button>
             </uui-action-bar>
-          </div> `
+          </div> `,
       )}
     </uui-icon-registry-essential>
   `;
@@ -97,12 +97,12 @@ export const LooksAndColors = () => {
                         .look="${look as any}"
                         .color="${color as any}">
                         <uui-icon name="${el}"></uui-icon>
-                      </uui-button>`
+                      </uui-button>`,
                   )}
                 </uui-action-bar>
-              `
+              `,
             )}
-          </div> `
+          </div> `,
       )}
     </uui-icon-registry-essential>
   `;

packages/uui-avatar-group/lib/uui-avatar-group.test.ts

@@ -55,7 +55,7 @@ describe('UuiAvatarGroup Limit', async () => {
         <uui-avatar name="First Last"></uui-avatar>
         <uui-avatar name="First Last"></uui-avatar>
         <uui-avatar name="First Last"></uui-avatar>
-      </uui-avatar-group>`
+      </uui-avatar-group>`,
     );
   });
 
@@ -76,7 +76,7 @@ describe('UuiAvatarGroup Limit', async () => {
       html` <uui-avatar-group>
         <uui-avatar name="First Last"></uui-avatar>
         <uui-avatar name="First Last"></uui-avatar>
-      </uui-avatar-group>`
+      </uui-avatar-group>`,
     );
 
     const small = avatarGroup.shadowRoot!.querySelector('small');

packages/uui-avatar/lib/uui-avatar.test.ts

@@ -43,19 +43,19 @@ describe('UuiAvatar', () => {
 
   it('renders an image when imgSrc is set', async () => {
     const avatar = await fixture(
-      html`<uui-avatar img-src="${avatarSrc}" name="My Avatar"></uui-avatar>`
+      html`<uui-avatar img-src="${avatarSrc}" name="My Avatar"></uui-avatar>`,
     );
     expect(avatar).shadowDom.to.equal(
-      `<img alt="MA" src="${avatarSrc}" srcset="" title="My Avatar" /><slot></<slot>`
+      `<img alt="MA" src="${avatarSrc}" srcset="" title="My Avatar" /><slot></<slot>`,
     );
   });
 
   it('renders an image with alt text when imgSrc and text is set', async () => {
     const avatar = await fixture(
-      html`<uui-avatar img-src="${avatarSrc}" name="alt text"></uui-avatar>`
+      html`<uui-avatar img-src="${avatarSrc}" name="alt text"></uui-avatar>`,
     );
     expect(avatar).shadowDom.to.equal(
-      `<img alt="AT" src="${avatarSrc}" srcset="" title="alt text" /><slot></<slot>`
+      `<img alt="AT" src="${avatarSrc}" srcset="" title="alt text" /><slot></<slot>`,
     );
   });
 
@@ -66,7 +66,7 @@ describe('UuiAvatar', () => {
 
   it('shows the first and last initial when text is used and there is no image', async () => {
     const avatar = await fixture(
-      html`<uui-avatar name="First Second Last"></uui-avatar>`
+      html`<uui-avatar name="First Second Last"></uui-avatar>`,
     );
     expect(avatar).shadowDom.to.equal('FL<slot></<slot>');
   });

packages/uui-badge/lib/uui-badge.story.ts

@@ -174,9 +174,9 @@ export const LooksAndColors: Story = () => html`
                 >${uppercaseFirstLetter(look)}</uui-badge
               >
             </div>
-          `
+          `,
         )}
       </div>
-    `
+    `,
   )}
 `;

packages/uui-base/lib/animations/uui-pulse.ts

@@ -23,5 +23,5 @@ export const UUIHorizontalPulseKeyframes = css`
 `;
 
 export const UUIHorizontalPulseAnimationValue = unsafeCSS(
-  'pulse 0.8s ease-in-out infinite both'
+  'pulse 0.8s ease-in-out infinite both',
 );

packages/uui-base/lib/animations/uui-shake.ts

@@ -28,5 +28,5 @@ export const UUIHorizontalShakeKeyframes = css`
 `;
 
 export const UUIHorizontalShakeAnimationValue = unsafeCSS(
-  'uui-horizontal-shake 600ms ease backwards'
+  'uui-horizontal-shake 600ms ease backwards',
 );

packages/uui-base/lib/events/UUIEvent.ts

@@ -4,7 +4,7 @@
 
 export class UUIEvent<
   DetailType extends Record<string, any> = Record<string, any>,
-  EventTargetType extends EventTarget | null = EventTarget | null
+  EventTargetType extends EventTarget | null = EventTarget | null,
 > extends Event {
   readonly detail: DetailType;
   readonly target!: EventTargetType;

packages/uui-base/lib/mixins/ActiveMixin.ts

@@ -3,7 +3,7 @@
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 
 export declare class ActiveMixinInterface {
   active: boolean;
 }
 
@@ -14,9 +14,9 @@
  * @mixin
  */
 export const ActiveMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   class ActiveMixinClass extends superClass {
     /**
      * Set this boolean to true for then the related composition is sorted.
      * @type {boolean}

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -8,7 +8,7 @@
 type NativeFormControlElement = HTMLInputElement; // Eventually use a specific interface or list multiple options like appending these types: ... | HTMLTextAreaElement | HTMLSelectElement
 
 // TODO: make it possible to define FormDataEntryValue type.
 export declare abstract class FormControlMixinInterface extends LitElement {
   formAssociated: boolean;
   get value(): FormDataEntryValue | FormData;
   set value(newValue: FormDataEntryValue | FormData);
@@ -25,7 +25,7 @@
   protected addValidator: (
     flagKey: FlagTypes,
     getMessageMethod: () => String,
-    checkMethod: () => boolean
+    checkMethod: () => boolean,
   ) => void;
   protected addFormControlElement(element: NativeFormControlElement): void;
   pristine: boolean;
@@ -66,9 +66,9 @@
  * @mixin
  */
 export const FormControlMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   abstract class FormControlMixinClass extends superClass {
     /**
      * This is a static class field indicating that the element is can be used inside a native form and participate in its events.
      * It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.
@@ -163,12 +163,12 @@
       this.addValidator(
         'valueMissing',
         () => this.requiredMessage,
-        () => this.hasAttribute('required') && this.hasValue() === false
+        () => this.hasAttribute('required') && this.hasValue() === false,
       );
       this.addValidator(
         'customError',
         () => this.errorMessage,
-        () => this.error
+        () => this.error,
       );
 
       this.addEventListener('blur', () => {
@@ -222,7 +222,7 @@
     protected addValidator(
       flagKey: FlagTypes,
       getMessageMethod: () => String,
-      checkMethod: () => boolean
+      checkMethod: () => boolean,
     ): Validator {
       const obj = {
         flagKey: flagKey,
@@ -266,7 +266,7 @@
         this._customValidityObject = this.addValidator(
           'customError',
           (): string => message,
-          () => true
+          () => true,
         );
       }
 
@@ -284,7 +284,7 @@
             this._internals.setValidity(
               (this as any)._validityState,
               formCtrlEl.validationMessage,
-              formCtrlEl
+              formCtrlEl,
             );
           }
         }
@@ -297,7 +297,7 @@
           this._internals.setValidity(
             this._validityState,
             validator.getMessageMethod(),
-            this.getFormElement()
+            this.getFormElement(),
           );
         }
       });
@@ -309,7 +309,7 @@
 
       if (hasError) {
         this.dispatchEvent(
-          new UUIFormControlEvent(UUIFormControlEvent.INVALID)
+          new UUIFormControlEvent(UUIFormControlEvent.INVALID),
         );
       } else {
         this._internals.setValidity({});

packages/uui-base/lib/mixins/LabelMixin.ts

@@ -3,7 +3,7 @@
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 
 export declare class LabelMixinInterface {
   /**
    * Label to be used for aria-label and potentially as visual label for some components
    * @type {string}
@@ -23,12 +23,12 @@
  */
 export const LabelMixin = <T extends Constructor<LitElement>>(
   labelSlotName: string | null,
-  superClass: T
+  superClass: T,
 ) => {
   /**
    * Label mixin class containing the label functionality.
    */
   class LabelMixinClass extends superClass {
     /**
      * Label to be used for aria-label and potentially as visual label for some components
      * @type {string}

packages/uui-base/lib/mixins/PopoverTargetMixin.ts

@@ -4,7 +4,7 @@
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 
 export declare class PopoverTargetMixinInterface {
   /**
    * Set a popovertarget.
    * @type {string}
@@ -26,12 +26,12 @@
  * @mixin
  */
 export const PopoverTargetMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   /**
    * Popover target mixin class containing the popover target functionality.
    */
   class PopoverTargetMixinClass extends superClass {
     /**
      * Set a popovertarget.
      * @type {string}
@@ -54,7 +54,7 @@
       const popoverContainerElement = findAncestorByAttributeValue(
         this,
         'id',
-        this.popoverContainerElement
+        this.popoverContainerElement,
       );
       if (!popoverContainerElement) return;
 

packages/uui-base/lib/mixins/SelectOnlyMixin.ts

@@ -3,7 +3,7 @@
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 
 export declare class SelectOnlyMixinInterface extends SelectableMixinInterface {
   selectOnly: boolean;
 }
 
@@ -15,11 +15,11 @@
  * @mixin
  */
 export const SelectOnlyMixin = <
-  T extends Constructor<SelectableMixinInterface>
+  T extends Constructor<SelectableMixinInterface>,
 >(
-  superClass: T
+  superClass: T,
 ) => {
   class SelectOnlyMixinClass extends superClass {
     private _selectOnly = false;
 
     /**

packages/uui-base/lib/mixins/SelectableMixin.ts

@@ -20,7 +20,7 @@ export declare class SelectableMixinInterface extends LitElement {
  * @mixin
  */
 export const SelectableMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   /**
    * @fires {UUISelectableEvent} selected - fires when the media card is selected

packages/uui-base/lib/registration/index.ts

@@ -7,14 +7,14 @@
  */
 export function defineElement(
   name: string,
-  options?: ElementDefinitionOptions | undefined
+  options?: ElementDefinitionOptions | undefined,
 ) {
   return (constructor: CustomElementConstructor) => {
     const isValidElementName = name.indexOf('-') > 0;
 
     if (isValidElementName === false) {
       console.error(
-        `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`
+        `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`,
       );
       return;
     }