Merge branch 'v1/contrib' into v1/feature/uui-label-required-color

Author: iOvergaard

package-lock.json

@@ -88,7 +88,7 @@
     "babel-loader": "9.1.3",
     "chromatic": "11.12.5",
     "element-internals-polyfill": "1.3.10",
-    "esbuild": "0.21.5",
+    "esbuild": "0.25.0",
     "eslint": "9.7.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-lit": "1.14.0",

package.json

@@ -22,10 +22,13 @@ export const drag = (
     const offsetY = dims.top + defaultView.scrollY;
 
     let pointerEvent: PointerEvent | Touch;
-    if (event instanceof TouchEvent) {
+    // TouchEvent is not available in Firefox
+    if ('TouchEvent' in window && event instanceof TouchEvent) {
       pointerEvent = event.touches[0];
-    } else {
+    } else if (event instanceof PointerEvent) {
       pointerEvent = event;
+    } else {
+      return;
     }
 
     const x = pointerEvent.pageX - offsetX;

packages/uui-base/lib/utils/drag.ts

@@ -117,6 +117,9 @@ export const Loading: Story = {
   args: {
     state: 'waiting',
   },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const ContentAlign: Story = {

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

@@ -82,4 +82,7 @@ export const Image: Story = {
   args: {
     slot: html`<img src="https://placedog.net/1447/?random" alt="" />`,
   },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };

packages/uui-card-media/lib/uui-card-media.story.ts

@@ -55,6 +55,9 @@ export const Avatar: Story = {
   ${cardContent}
 </uui-card-user>
   `,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const Tag: Story = {

packages/uui-card-user/lib/uui-card-user.story.ts

@@ -34,11 +34,11 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
     return super.value;
   }
   set value(newValue) {
+    super.value = newValue;
+
     if (typeof newValue === 'string') {
-      this.#updateValue(newValue);
+      this.#updateValue();
     }
-
-    super.value = newValue;
   }
 
   /**
@@ -166,7 +166,17 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
     this.#phoneMediaQuery.removeEventListener('change', this.#onPhoneChange);
   }
 
-  protected async firstUpdated() {
+  #onSlotChange() {
+    if (this.#comboboxList) {
+      this.#comboboxList.removeEventListener(
+        UUIComboboxListEvent.CHANGE,
+        this.#onChange,
+      );
+      this.#comboboxList.removeEventListener(
+        UUIComboboxListEvent.INNER_SLOT_CHANGE,
+        this.#onInnerSlotChange,
+      );
+    }
     const list = this._comboboxListElements?.[0];
 
     if (list) {
@@ -178,21 +188,22 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
       );
       this.#comboboxList.addEventListener(
         UUIComboboxListEvent.INNER_SLOT_CHANGE,
-        this.#onSlotChange,
+        this.#onInnerSlotChange,
       );
-
-      await this.updateComplete;
-      this.#updateValue(this.value);
     }
+
+    this.updateComplete.then(() => {
+      this.#updateValue();
+    });
   }
 
   #onPhoneChange = () => {
     this._isPhone = this.#phoneMediaQuery.matches;
   };
 
-  #updateValue(value: FormDataEntryValue | FormData) {
+  #updateValue() {
     if (this.#comboboxList) {
-      this.#comboboxList.value = value;
+      this.#comboboxList.value = this.value;
       requestAnimationFrame(
         () => (this._displayValue = this.#comboboxList.displayValue || ''),
       );
@@ -233,9 +244,9 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
     this.#onOpen();
   };
 
-  #onSlotChange = () => {
+  #onInnerSlotChange = () => {
     if (this.value && this.value !== this.#comboboxList?.value) {
-      this.#updateValue(this.value);
+      this.#updateValue();
     }
   };
 
@@ -344,7 +355,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
   #renderDropdown = () => {
     return html`<div id="dropdown">
       <uui-scroll-container tabindex="-1" id="scroll-container">
-        <slot></slot>
+        <slot @slotchange=${this.#onSlotChange}></slot>
       </uui-scroll-container>
     </div>`;
   };

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -149,6 +149,7 @@ export class UUIIconElement extends LitElement {
       :host svg,
       ::slotted(svg) {
         color: var(--uui-icon-color, currentColor);
+        width: 100%;
       }
 
       :host-context(div[slot='prepend']) {

packages/uui-icon/lib/uui-icon.element.ts

@@ -224,5 +224,13 @@ describe('UUIIconElement', () => {
     it('Child uui-icon passes the a11y audit', async () => {
       await expect(testElement.iconElement).shadowDom.to.be.accessible();
     });
+
+    it('svg has a size of 18px for both width and height', () => {
+      const svgElement =
+        testElement.iconElement.shadowRoot!.querySelector('svg')!;
+      const computedStyle = getComputedStyle(svgElement);
+      expect(computedStyle.width).to.equal('18px');
+      expect(computedStyle.height).to.equal('18px');
+    });
   });
 });

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

@@ -348,6 +348,7 @@ export class UUIInputElement extends UUIFormControlMixin(
         );
         border: var(--uui-input-border-width, 1px) solid
           var(--uui-input-border-color, var(--uui-color-border));
+        border-radius: var(--uui-border-radius);
 
         --uui-button-height: 100%;
         --auto-width-text-margin-right: 0;
@@ -439,7 +440,7 @@ export class UUIInputElement extends UUIFormControlMixin(
         padding: var(--uui-size-1) var(--uui-size-space-3);
         font-size: inherit;
         color: inherit;
-        border-radius: 0;
+        border-radius: var(--uui-border-radius);
         box-sizing: border-box;
         border: none;
         background: none;