Merge remote-tracking branch 'origin/v1/contrib' into dependabot/npm_…

…and_yarn/husky-9.1.1

.github/workflows/tests.yml

@@ -31,7 +31,8 @@ jobs:
           cache: 'npm'
       - run: npm install
       - run: npm run lint
-      - run: sudo npx playwright install-deps
+      - name: Install Playwright dependencies
+        run: npx playwright install --with-deps
       - run: npm run test
 
   build:

package.json

@@ -132,6 +132,9 @@
     "vite-tsconfig-paths": "4.3.2",
     "web-component-analyzer": "2.0.0"
   },
+  "overrides": {
+    "playwright": "^1.45.3"
+  },
   "workspaces": [
     "./packages/*"
   ],

packages/uui-checkbox/lib/uui-checkbox-indeterminate.example.ts

@@ -0,0 +1,88 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { UUIBooleanInputEvent } from '@umbraco-ui/uui-boolean-input/lib';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import '@umbraco-ui/uui-checkbox/lib';
+
+export type Option = {
+  value: string;
+  label: string;
+};
+
+@defineElement('uui-checkbox-indeterminate-example')
+export default class UUICheckboxIndeterminateExample extends LitElement {
+  @property()
+  label = 'Indeterminate';
+
+  @property({ attribute: false })
+  parent!: Option;
+
+  @property({ type: Array, attribute: false })
+  options!: Option[];
+
+  @property({ type: Array })
+  values: string[] = [];
+
+  private _handleParentChange(e: Event) {
+    e.stopPropagation();
+    const parent = e.target as HTMLInputElement;
+    let values: string[] = [];
+    if (parent.checked) {
+      values = this.options.map(option => option.value);
+    }
+    this.values = values;
+    this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));
+  }
+
+  private _handleOptionChange(e: Event) {
+    e.stopPropagation();
+    const option = e.target as HTMLInputElement;
+    let values = this.values;
+    if (option.checked) {
+      values = values.concat(option.value);
+    } else {
+      values = values.filter(v => v !== option.value);
+    }
+    this.values = values;
+    this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));
+  }
+
+  render() {
+    return html`
+      <fieldset name="Indeterminate" style="border: none;">
+        <legend>${this.label}</legend>
+        <uui-checkbox
+          value=${this.parent.value}
+          label=${this.parent.label}
+          @change=${this._handleParentChange}
+          name="indeterminate-parent"
+          ?indeterminate=${this.values.length > 0 &&
+          this.values.length < this.options.length}
+          ?checked=${this.values.length === this.options.length}></uui-checkbox>
+        <ul style="list-style: none; margin: 0;">
+          ${repeat(
+            this.options,
+            option => option.value,
+            option =>
+              html` <li>
+                <uui-checkbox
+                  value=${option.value}
+                  label=${option.label}
+                  @change=${this._handleOptionChange}
+                  name="indeterminate-child"
+                  ?checked=${this.values.includes(option.value)}></uui-checkbox>
+              </li>`,
+          )}
+        </ul>
+      </fieldset>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-checkbox-indeterminate-example': UUICheckboxIndeterminateExample;
+  }
+}

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

@@ -1,6 +1,8 @@
 import '.';
+import './uui-checkbox-indeterminate.example.js';
 
 import { StoryFn } from '@storybook/web-components';
+import { withActions } from '@storybook/addon-actions/decorator';
 import { html } from 'lit';
 import readme from '../README.md?raw';
 
@@ -31,7 +33,11 @@ export default {
         code: `<uui-checkbox label="Checkbox"></uui-checkbox>`,
       },
     },
+    actions: {
+      handles: ['change'],
+    },
   },
+  decorators: [withActions as any],
 };
 
 export const AAAOverview: StoryFn = props => html`
@@ -177,15 +183,46 @@ Readonly.parameters = {
   },
 };
 
-export const Indeterminate: Story = props => html`
-  <uui-checkbox
-    ?indeterminate=${props.indeterminate}
-    .label=${'Indeterminate'}></uui-checkbox>
-`;
-Indeterminate.args = { indeterminate: true };
+export const Indeterminate: StoryFn = props => {
+  return html` <uui-checkbox-indeterminate-example
+    .label=${props.label}
+    .parent=${props.parent}
+    .options=${props.options}
+    .values=${props.values}></uui-checkbox-indeterminate-example>`;
+};
+
+Indeterminate.args = {
+  label: 'Choose your favorite fruits',
+  values: ['mango'],
+  parent: {
+    label: 'All fruits',
+    value: 'all',
+  },
+  options: [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Mango',
+      value: 'mango',
+    },
+  ],
+};
+
 Indeterminate.parameters = {
-  controls: { include: ['indeterminate'] },
+  controls: {
+    include: ['values', 'parent', 'options', 'label'],
+  },
   docs: {
+    description: {
+      story:
+        'A checkbox group with an indeterminate state. See the `UUICheckboxIndeterminateExample` component for more details.',
+    },
     source: {
       code: `<uui-checkbox label="Indeterminate" indeterminate></uui-checkbox>`,
     },

packages/uui-loader-bar/lib/uui-loader-bar.element.ts

@@ -1,9 +1,7 @@
 import { css, html, LitElement } from 'lit';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property } from 'lit/decorators.js';
-
-const clamp = (num: number, min: number, max: number) =>
-  Math.min(Math.max(num, min), max);
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { clamp } from '@umbraco-ui/uui-base/lib/utils';
 
 /**
  *  @element uui-loader-bar

packages/uui-popover-container/lib/uui-popover-container.element.ts

@@ -2,7 +2,6 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { findAncestorByAttributeValue } from '@umbraco-ui/uui-base/lib/utils';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { polyfill } from './uui-popover-polyfill.js';
 
 export type PopoverContainerPlacement =
   | 'top'
@@ -72,10 +71,6 @@ export class UUIPopoverContainerElement extends LitElement {
   #scrollParents: Element[] = [];
 
   connectedCallback(): void {
-    //TODO: Remove this polyfill when firefox supports the new popover API
-    !Object.prototype.hasOwnProperty.call(HTMLElement, 'popover') &&
-      polyfill.bind(this)();
-
     if (!this.hasAttribute('popover')) {
       this.setAttribute('popover', '');
     }

packages/uui-popover-container/lib/uui-popover-container.test.ts

@@ -6,7 +6,9 @@ describe('UUIPopoverContainerElement', () => {
 
   beforeEach(async () => {
     element = await fixture(html`
-      <uui-popover-container></uui-popover-container>
+      <uui-popover-container id="my-popover">
+        Hello world
+      </uui-popover-container>
     `);
   });
 
@@ -17,4 +19,9 @@ describe('UUIPopoverContainerElement', () => {
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  it('gets the popover attribute', async () => {
+    await element.updateComplete;
+    expect(element).to.have.attribute('popover');
+  });
 });