@vaadin/details 24.2.0-alpha9 → 24.2.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/details",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -41,12 +41,12 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha9",
-    "@vaadin/button": "24.2.0-alpha9",
-    "@vaadin/component-base": "24.2.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha9"
+    "@vaadin/a11y-base": "24.2.0-beta1",
+    "@vaadin/button": "24.2.0-beta1",
+    "@vaadin/component-base": "24.2.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e9765733fea96542e379e02e6f42b07145893140"
+  "gitHead": "67c8eef57d1c59e7476e29adaf003cf4548878f2"
 }

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

@@ -5,6 +5,9 @@
  */
 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';
 
@@ -14,6 +17,9 @@ export declare function DetailsBaseMixin<T extends Constructor<HTMLElement>>(
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DetailsBaseMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<TabindexMixinClass> &
   T;
 
 export declare class DetailsBaseMixinClass {

package/src/vaadin-details-summary.js

@@ -5,6 +5,7 @@
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -32,6 +33,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ButtonMixin
  * @mixes DirMixin
@@ -80,4 +82,4 @@ class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))
   }
 }
 
-customElements.define(DetailsSummary.is, DetailsSummary);
+defineCustomElement(DetailsSummary);

package/src/vaadin-details.js

@@ -6,6 +6,7 @@
 import './vaadin-details-summary.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
@@ -44,6 +45,7 @@ import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ControllerMixin
  * @mixes DetailsBaseMixin
@@ -86,6 +88,6 @@ class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixi
   }
 }
 
-customElements.define(Details.is, Details);
+defineCustomElement(Details);
 
 export { Details };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {