Merge branch 'v1/contrib' into v1/bugfix/readonly-ref-node-padding

Author: iOvergaard

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

@@ -25,10 +25,9 @@ export const drag = (
     // TouchEvent is not available in Firefox
     if ('TouchEvent' in window && event instanceof TouchEvent) {
       pointerEvent = event.touches[0];
-    } else if ( event instanceof PointerEvent ) {
+    } else if (event instanceof PointerEvent) {
       pointerEvent = event;
-    }
-    else {
+    } else {
       return;
     }
 

packages/uui-icon/lib/uui-icon.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.test.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-input/lib/uui-input.element.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;

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

@@ -30,7 +30,6 @@ const meta: Meta = {
         'datetime-local',
         'number',
         'color',
-        'wha',
       ],
     },
   },

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

@@ -286,7 +286,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
           var(--uui-select-padding-x, var(--uui-size-2));
         color: var(--uui-select-text-color, var(--uui-color-text));
         box-sizing: border-box;
-        border-radius: 0;
+        border-radius: var(--uui-border-radius);
         border: 1px solid
           var(--uui-select-border-color, var(--uui-color-border));
         transition: all 150ms ease;

packages/uui-tabs/lib/uui-tab-group.element.ts

@@ -77,8 +77,6 @@ export class UUITabGroupElement extends LitElement {
     demandCustomElement(this, 'uui-popover-container');
     demandCustomElement(this, 'uui-symbol-more');
 
-    if (!this.hasAttribute('role')) this.setAttribute('role', 'tablist');
-
     await this.updateComplete;
     this.#resizeObserver.observe(this._mainElement);
   }
@@ -268,7 +266,7 @@ export class UUITabGroupElement extends LitElement {
   render() {
     return html`
       <div id="main">
-        <div id="grid">
+        <div id="grid" role="tablist">
           <slot @slotchange=${this.#onSlotChange}></slot>
         </div>
         <uui-button
@@ -284,7 +282,7 @@ export class UUITabGroupElement extends LitElement {
         id="popover-container"
         popover
         placement="bottom-end">
-        <div id="hidden-tabs-container">
+        <div id="hidden-tabs-container" role="tablist">
           ${repeat(this.#hiddenTabElements, el => html`${el}`)}
         </div>
       </uui-popover-container>

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

@@ -17,6 +17,21 @@ describe('UuiTab', () => {
         <uui-tab label="Content">Content</uui-tab>
         <uui-tab label="Packages">Packages</uui-tab>
         <uui-tab label="Media" active>Media</uui-tab>
+        <uui-tab label="Content1">Content to force a more button</uui-tab>
+        <uui-tab label="Content2">Content to force a more button</uui-tab>
+        <uui-tab label="Content3">Content to force a more button</uui-tab>
+        <uui-tab label="Content4">Content to force a more button</uui-tab>
+        <uui-tab label="Content5">Content to force a more button</uui-tab>
+        <uui-tab label="Content6">Content to force a more button</uui-tab>
+        <uui-tab label="Content7">Content to force a more button</uui-tab>
+        <uui-tab label="Content8">Content to force a more button</uui-tab>
+        <uui-tab label="Content9">Content to force a more button</uui-tab>
+        <uui-tab label="Content10">Content to force a more button</uui-tab>
+        <uui-tab label="Content11">Content to force a more button</uui-tab>
+        <uui-tab label="Content12">Content to force a more button</uui-tab>
+        <uui-tab label="Content13">Content to force a more button</uui-tab>
+        <uui-tab label="Content14">Content to force a more button</uui-tab>
+        <uui-tab label="Content15">Content to force a more button</uui-tab>
       </uui-tab-group>
     `);
 

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

@@ -330,7 +330,7 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
         padding: var(--uui-size-2);
         border: 1px solid
           var(--uui-textarea-border-color, var(--uui-color-border)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */
-        border-radius: 0;
+        border-radius: var(--uui-border-radius);
         outline: none;
         min-height: var(--uui-textarea-min-height);
         max-height: var(--uui-textarea-max-height);