Merge branch 'v1/contrib' into feature/color-slider-advanced

Author: iOvergaard

package-lock.json

@@ -63,11 +63,11 @@
     "@chromatic-com/storybook": "^3.2.6",
     "@eslint/compat": "1.2.8",
     "@eslint/js": "9.24.0",
-    "@lerna-lite/cli": "3.12.3",
-    "@lerna-lite/exec": "3.12.3",
-    "@lerna-lite/publish": "3.12.3",
-    "@lerna-lite/run": "3.12.3",
-    "@lerna-lite/version": "3.12.3",
+    "@lerna-lite/cli": "4.1.1",
+    "@lerna-lite/exec": "4.1.1",
+    "@lerna-lite/publish": "4.1.1",
+    "@lerna-lite/run": "4.1.1",
+    "@lerna-lite/version": "4.1.1",
     "@open-wc/testing": "4.0.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@storybook/addon-a11y": "^8.6.12",
@@ -134,7 +134,7 @@
     "turbo": "2.4.4",
     "typescript": "5.8.2",
     "typescript-eslint": "8.26.0",
-    "vite": "6.2.6",
+    "vite": "6.3.4",
     "vite-plugin-turbosnap": "1.0.3",
     "vite-tsconfig-paths": "5.1.4",
     "web-component-analyzer": "2.0.0"

package.json

@@ -25,7 +25,11 @@ 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 MouseEvent) {
+      // Some browsers seem to return PointerEvent instead of MouseEvent for click event.
+      // We can use MouseEvent as PointerEvent inherits from MouseEvent.
+      // Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1675847
+      // Safari: https://bugs.webkit.org/show_bug.cgi?id=218665
       pointerEvent = event;
     } else {
       return;

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

@@ -73,7 +73,7 @@ export class UUIButtonCopyTextElement extends UUIButtonElement {
       const el = document.getElementById(this.copyFrom);
       if (el) {
         // Override the value to copy, if the element has a value property
-        // Such as uui-input or uui-textarea or native inout elements
+        // Such as uui-input or uui-textarea or native input elements
         if ('value' in el) {
           valueToCopy = (el as any).value;
         } else {

packages/uui-button-copy-text/lib/uui-button-copy-text.element.ts

@@ -129,7 +129,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         <div class="color-swatch color-swatch--transparent-bg">
           <div
             class="color-swatch__color"
-            style="background-color: var(--uui-swatch-color, ${this.color ??
+            style="background: var(--uui-swatch-color, ${this.color ??
             this.value})"></div>
           <div
             class="color-swatch__check"

packages/uui-color-swatch/lib/uui-color-swatch.element.ts

@@ -114,3 +114,12 @@ export const Transparent: Story = {
     value: 'rgba(209, 2, 26, 0.4)',
   },
 };
+
+export const Gradient: Story = {
+  args: {
+    value: 'sun',
+    color: 'radial-gradient(orange, red)',
+    label: 'Sun',
+    showLabel: true,
+  },
+};

packages/uui-color-swatch/lib/uui-color-swatch.story.ts

@@ -5,18 +5,57 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { spread } from '../../../storyhelpers';
 import { repeat } from 'lit/directives/repeat.js';
 
-const swatchesColor = [
+const swatches = [
   { label: 'Blood Orange', value: '#d0021b' },
   { label: 'Avocado', value: '#417505' },
   { label: 'Tufts Blue', value: '#4a90e2' },
 ];
 
+const gradients = [
+  {
+    label: 'Vital Ocean',
+    value: 'ocean',
+    color:
+      'linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%)',
+  },
+  {
+    label: 'Disco Club',
+    value: 'avocado',
+    color:
+      'radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%)',
+  },
+  {
+    label: 'Deep Sunset',
+    value: 'sunset',
+    color:
+      'linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%)',
+  },
+  {
+    label: 'Bubble Gum',
+    value: 'gum',
+    color:
+      'radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)',
+  },
+  {
+    label: 'Blue Lagoon',
+    value: 'lagoon',
+    color:
+      'linear-gradient(90deg,rgba(67, 198, 172, 1) 0%, rgba(25, 22, 84, 1) 100%)',
+  },
+  {
+    label: 'Lemon Twist',
+    value: 'lemon-twist',
+    color:
+      'linear-gradient(90deg,rgba(60, 165, 92, 1) 0%, rgba(181, 172, 73, 1) 100%)',
+  },
+];
+
 const meta: Meta = {
   id: 'uui-color-swatches',
   component: 'uui-color-swatches',
   title: 'Inputs/Color/Color Swatches',
   args: {
-    swatches: swatchesColor,
+    swatches: swatches,
   },
   argTypes: {
     value: { control: { type: 'color' } },
@@ -26,14 +65,17 @@ const meta: Meta = {
   render: (args: any) => html`
 <uui-color-swatches
   ${spread(args, ['swatches', 'showLabel'])}
-  label="My color pallette">${repeat(args.swatches, (swatch: any) => {
+  label="My color palette">${repeat(args.swatches, (swatch: any) => {
     const label = typeof swatch === 'string' ? swatch : swatch.label;
     const value = typeof swatch === 'string' ? swatch : swatch.value;
+    const color = typeof swatch === 'string' ? swatch : swatch.color;
     return html`
   <uui-color-swatch
     label="${label}"
     .showLabel=${args.showLabel}
-    .value=${value}></uui-color-swatch>`;
+    .color="${color}"
+    .value=${value}>
+  </uui-color-swatch>`;
   })}
 </uui-color-swatches>
   `,
@@ -72,3 +114,11 @@ export const ShowLabel: Story = {
     showLabel: true,
   },
 };
+
+export const Gradient: Story = {
+  args: {
+    swatches: gradients,
+    showLabel: true,
+    value: 'lemon-twist',
+  },
+};

packages/uui-color-swatches/lib/uui-color-swatches.story.ts

@@ -24,6 +24,16 @@ export type InputType =
   | 'number'
   | 'color';
 
+export type InputMode =
+  | 'text'
+  | 'none'
+  | 'decimal'
+  | 'numeric'
+  | 'tel'
+  | 'search'
+  | 'email'
+  | 'url';
+
 /**
  * Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.
  * @element uui-input
@@ -169,7 +179,8 @@ export class UUIInputElement extends UUIFormControlMixin(
 
   /**
    * This property specifies the type of input that will be rendered.
-   * @type {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types|MDN} for further information
+   * @type {'text' | 'tel' | 'url' | 'email' | 'password' | 'date' | 'month' | 'week' | 'time' | 'datetime-local' | 'number' | 'color'}
    * @attr
    * @default text
    */
@@ -182,21 +193,22 @@ export class UUIInputElement extends UUIFormControlMixin(
   }
 
   /**
-   * Validates the input based on the Regex pattern
-   * @type {string}
+   * The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode|MDN} for further information
+   * @type {'text' | 'none' | 'decimal' | 'number' | 'tel' | 'search' | 'email' | 'url'}
    * @attr
+   * @default text
    */
-  @property({ type: String })
-  pattern?: string;
+  @property({ attribute: 'inputmode' })
+  inputMode: InputMode = 'text';
 
   /**
-   * The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode|MDN} for further information
+   * Validates the input based on the Regex pattern
    * @type {string}
    * @attr
    */
   @property({ type: String })
-  inputMode = '';
+  pattern?: string;
 
   @query('#input')
   _input!: HTMLInputElement;

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

@@ -32,6 +32,18 @@ const meta: Meta = {
         'color',
       ],
     },
+    inputMode: {
+      options: [
+        'text',
+        'none',
+        'decimal',
+        'numeric',
+        'tel',
+        'search',
+        'email',
+        'url',
+      ],
+    },
   },
   parameters: {
     readme: {

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

@@ -16,6 +16,7 @@ export class UUIModalDialogElement extends UUIModalElement {
     ...UUIModalElement.styles,
     css`
       :host {
+        outline: none;
         --uui-modal-dialog-background: var(--uui-color-surface);
       }
       dialog {