@vaadin/details 24.2.0-alpha1 → 24.2.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/details",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,10 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-details-summary.d.ts",
+    "!src/vaadin-lit-details-summary.js",
+    "!src/vaadin-lit-details.d.ts",
+    "!src/vaadin-lit-details.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,21 +41,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha1",
-    "@vaadin/button": "24.2.0-alpha1",
-    "@vaadin/component-base": "24.2.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1"
+    "@vaadin/a11y-base": "24.2.0-alpha10",
+    "@vaadin/button": "24.2.0-alpha10",
+    "@vaadin/component-base": "24.2.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
+  "gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
 }

package/src/collapsible-mixin.js

@@ -64,6 +64,15 @@ export const CollapsibleMixin = (superClass) =>
       // Only handle click and not keydown, because `vaadin-details-summary` uses `ButtonMixin`
       // that already covers this logic, and `vaadin-accordion-heading` uses native `<button>`.
       this.addEventListener('click', ({ target }) => {
+        if (this.disabled) {
+          return;
+        }
+
+        // Do not change opened on link click
+        if (target.localName === 'a') {
+          return;
+        }
+
         const summary = this.focusElement;
 
         if (summary && (target === summary || summary.contains(target))) {

package/src/vaadin-details-base-mixin.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/a11y-base/src/tabindex-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { CollapsibleMixinClass } from './collapsible-mixin.js';
+
+export declare function DetailsBaseMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<CollapsibleMixinClass> &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DetailsBaseMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<TabindexMixinClass> &
+  T;
+
+export declare class DetailsBaseMixinClass {
+  /**
+   * A text that is displayed in the summary, if no
+   * element is assigned to the `summary` slot.
+   */
+  summary: string | null | undefined;
+}

package/src/vaadin-details-base-mixin.js

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { CollapsibleMixin } from './collapsible-mixin.js';
+import { SummaryController } from './summary-controller.js';
+
+/**
+ * @polymerMixin
+ * @mixes DelegateFocusMixin
+ * @mixes DelegateStateMixin
+ * @mixes CollapsibleMixin
+ */
+export const DetailsBaseMixin = (superClass) =>
+  class DetailsBaseMixin extends CollapsibleMixin(DelegateFocusMixin(DelegateStateMixin(superClass))) {
+    static get properties() {
+      return {
+        /**
+         * A text that is displayed in the summary, if no
+         * element is assigned to the `summary` slot.
+         */
+        summary: {
+          type: String,
+          observer: '_summaryChanged',
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateAriaControls(focusElement, _contentElements)', '__updateAriaExpanded(focusElement, opened)'];
+    }
+
+    static get delegateAttrs() {
+      return ['theme'];
+    }
+
+    static get delegateProps() {
+      return ['disabled', 'opened'];
+    }
+
+    constructor() {
+      super();
+
+      this._summaryController = new SummaryController(this, 'vaadin-details-summary');
+      this._summaryController.addEventListener('slot-content-changed', (event) => {
+        const { node } = event.target;
+
+        this._setFocusElement(node);
+        this.stateTarget = node;
+
+        this._tooltipController.setTarget(node);
+      });
+
+      this._tooltipController = new TooltipController(this);
+      this._tooltipController.setPosition('bottom-start');
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(this._summaryController);
+      this.addController(this._tooltipController);
+    }
+
+    /**
+     * Override method inherited from `DisabledMixin`
+     * to not set `aria-disabled` on the host element.
+     *
+     * @protected
+     * @override
+     */
+    _setAriaDisabled() {
+      // The `aria-disabled` is set on the details summary.
+    }
+
+    /** @private */
+    _summaryChanged(summary) {
+      this._summaryController.setSummary(summary);
+    }
+
+    /** @private */
+    __updateAriaControls(summary, contentElements) {
+      if (summary && contentElements) {
+        const node = contentElements[0];
+
+        if (node && node.id) {
+          summary.setAttribute('aria-controls', node.id);
+        } else {
+          summary.removeAttribute('aria-controls');
+        }
+      }
+    }
+
+    /** @private */
+    __updateAriaExpanded(focusElement, opened) {
+      if (focusElement) {
+        focusElement.setAttribute('aria-expanded', opened ? 'true' : 'false');
+      }
+    }
+  };

package/src/vaadin-details.d.ts

@@ -3,12 +3,10 @@
  * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { CollapsibleMixin } from './collapsible-mixin.js';
+import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
 
 /**
  * Fired when the `opened` property changes.
@@ -55,15 +53,7 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Details extends CollapsibleMixin(
-  DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))),
-) {
-  /**
-   * A text that is displayed in the summary, if no
-   * element is assigned to the `summary` slot.
-   */
-  summary: string | null | undefined;
-
+declare class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   addEventListener<K extends keyof DetailsEventMap>(
     type: K,
     listener: (this: Details, ev: DetailsEventMap[K]) => void,

package/src/vaadin-details.js

@@ -5,14 +5,10 @@
  */
 import './vaadin-details-summary.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { CollapsibleMixin } from './collapsible-mixin.js';
-import { SummaryController } from './summary-controller.js';
+import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
 
 /**
  * `<vaadin-details>` is a Web Component which the creates an
@@ -49,16 +45,12 @@ import { SummaryController } from './summary-controller.js';
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
  * @extends HTMLElement
- * @mixes CollapsibleMixin
  * @mixes ControllerMixin
- * @mixes DelegateFocusMixin
- * @mixes DelegateStateMixin
+ * @mixes DetailsBaseMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Details extends CollapsibleMixin(
-  DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))),
-) {
+class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -92,92 +84,6 @@ class Details extends CollapsibleMixin(
   static get is() {
     return 'vaadin-details';
   }
-
-  static get properties() {
-    return {
-      /**
-       * A text that is displayed in the summary, if no
-       * element is assigned to the `summary` slot.
-       */
-      summary: {
-        type: String,
-        observer: '_summaryChanged',
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__updateAriaControls(focusElement, _contentElements)', '__updateAriaExpanded(focusElement, opened)'];
-  }
-
-  static get delegateAttrs() {
-    return ['theme'];
-  }
-
-  static get delegateProps() {
-    return ['disabled', 'opened'];
-  }
-
-  constructor() {
-    super();
-
-    this._summaryController = new SummaryController(this, 'vaadin-details-summary');
-    this._summaryController.addEventListener('slot-content-changed', (event) => {
-      const { node } = event.target;
-
-      this._setFocusElement(node);
-      this.stateTarget = node;
-
-      this._tooltipController.setTarget(node);
-    });
-
-    this._tooltipController = new TooltipController(this);
-    this._tooltipController.setPosition('bottom-start');
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addController(this._summaryController);
-    this.addController(this._tooltipController);
-  }
-
-  /**
-   * Override method inherited from `DisabledMixin`
-   * to not set `aria-disabled` on the host element.
-   *
-   * @protected
-   * @override
-   */
-  _setAriaDisabled() {
-    // The `aria-disabled` is set on the details summary.
-  }
-
-  /** @private */
-  _summaryChanged(summary) {
-    this._summaryController.setSummary(summary);
-  }
-
-  /** @private */
-  __updateAriaControls(summary, contentElements) {
-    if (summary && contentElements) {
-      const node = contentElements[0];
-
-      if (node && node.id) {
-        summary.setAttribute('aria-controls', node.id);
-      } else {
-        summary.removeAttribute('aria-controls');
-      }
-    }
-  }
-
-  /** @private */
-  __updateAriaExpanded(focusElement, opened) {
-    if (focusElement) {
-      focusElement.setAttribute('aria-expanded', opened ? 'true' : 'false');
-    }
-  }
 }
 
 customElements.define(Details.is, Details);

package/theme/lumo/vaadin-details-summary.js

@@ -0,0 +1,2 @@
+import './vaadin-details-summary-styles.js';
+import '../../src/vaadin-details-summary.js';

package/theme/lumo/vaadin-details.js

@@ -1,3 +1,3 @@
-import './vaadin-details-summary-styles.js';
+import './vaadin-details-summary.js';
 import './vaadin-details-styles.js';
 import '../../src/vaadin-details.js';

package/theme/material/vaadin-details-summary.js

@@ -0,0 +1,2 @@
+import './vaadin-details-summary-styles.js';
+import '../../src/vaadin-details-summary.js';

package/theme/material/vaadin-details.js

@@ -1,3 +1,3 @@
-import './vaadin-details-summary-styles.js';
+import './vaadin-details-summary.js';
 import './vaadin-details-styles.js';
 import '../../src/vaadin-details.js';

package/vaadin-details-summary.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-details-summary.js';

package/vaadin-details-summary.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-details-summary.js';
+export * from './src/vaadin-details-summary.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -76,15 +76,6 @@
           "name": "vaadin-details",
           "description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```\n<vaadin-details>\n  <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n  <div>\n    Toggle using mouse, Enter and Space keys.\n  </div>\n</vaadin-details>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name        | Description\n-----------------|----------------\n`content`        | The wrapper for the collapsible details content.\n\nThe following attributes are exposed for styling:\n\nAttribute    | Description\n-------------| -----------\n`opened`     | Set when the collapsible content is expanded and visible.\n`disabled`   | Set when the element is disabled.\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused`    | Set when the element is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
-            {
-              "name": "opened",
-              "description": "If true, the collapsible content is visible.",
-              "value": {
-                "type": [
-                  "boolean"
-                ]
-              }
-            },
             {
               "name": "disabled",
               "description": "If true, the user cannot interact with this element.",
@@ -107,6 +98,15 @@
                 ]
               }
             },
+            {
+              "name": "opened",
+              "description": "If true, the collapsible content is visible.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "summary",
               "description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
@@ -132,15 +132,6 @@
           ],
           "js": {
             "properties": [
-              {
-                "name": "opened",
-                "description": "If true, the collapsible content is visible.",
-                "value": {
-                  "type": [
-                    "boolean"
-                  ]
-                }
-              },
               {
                 "name": "disabled",
                 "description": "If true, the user cannot interact with this element.",
@@ -163,6 +154,15 @@
                   ]
                 }
               },
+              {
+                "name": "opened",
+                "description": "If true, the collapsible content is visible.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "summary",
                 "description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -41,22 +41,22 @@
           "extension": true,
           "attributes": [
             {
-              "name": "?opened",
-              "description": "If true, the collapsible content is visible.",
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "name": "?autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?autofocus",
-              "description": "Specify that this control should have input focus when the page loads.",
+              "name": "?opened",
+              "description": "If true, the collapsible content is visible.",
               "value": {
                 "kind": "expression"
               }