@vaadin/details 24.0.0-alpha6 → 24.0.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -37,12 +37,12 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha6",
-    "@vaadin/component-base": "24.0.0-alpha6",
-    "@vaadin/field-base": "24.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha6"
+    "@vaadin/button": "24.0.0-alpha7",
+    "@vaadin/component-base": "24.0.0-alpha7",
+    "@vaadin/field-base": "24.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha7"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
+  "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
 }

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

@@ -17,9 +17,9 @@ export declare class DetailsMixinClass {
   opened: boolean;
 
   /**
-   * A content area controlled by the toggle element.
+   * List of elements passed to the details default slot.
    */
-  protected _collapsible: HTMLElement;
+  protected _contentElements: HTMLElement[];
 
   /**
    * An element used to toggle the content visibility.

package/src/vaadin-details-mixin.js

@@ -25,12 +25,12 @@ export const DetailsMixin = (superClass) =>
         },
 
         /**
-         * A content area controlled by the toggle element.
+         * List of elements passed to the details default slot.
          *
          * @protected
          */
-        _collapsible: {
-          type: Object,
+        _contentElements: {
+          type: Array,
         },
 
         /**
@@ -47,13 +47,15 @@ export const DetailsMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_openedOrToggleChanged(opened, _toggleElement)', '_openedOrCollapsibleChanged(opened, _collapsible)'];
+      return ['_openedOrToggleChanged(opened, _toggleElement)', '_openedOrContentChanged(opened, _contentElements)'];
     }
 
     /** @private */
-    _openedOrCollapsibleChanged(opened, collapsible) {
-      if (collapsible) {
-        collapsible.setAttribute('aria-hidden', opened ? 'false' : 'true');
+    _openedOrContentChanged(opened, elements) {
+      if (elements) {
+        elements.forEach((el) => {
+          el.setAttribute('aria-hidden', opened ? 'false' : 'true');
+        });
       }
     }
 

package/src/vaadin-details.js

@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotObserveController } from '@vaadin/component-base/src/slot-observe-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { DelegateStateMixin } from '@vaadin/field-base/src/delegate-state-mixin.js';
@@ -27,6 +28,25 @@ class SummaryController extends SlotController {
   }
 }
 
+class ContentController extends SlotObserveController {
+  /**
+   * Override method from `SlotController` to change
+   * the ID prefix for the default slot content.
+   *
+   * @param {HTMLElement} host
+   * @return {string}
+   * @protected
+   * @override
+   */
+  static generateId(host) {
+    return super.generateId(host, 'content');
+  }
+
+  constructor(host) {
+    super(host, '', null, { multiple: true });
+  }
+}
+
 /**
  * `<vaadin-details>` is a Web Component which the creates an
  * expandable panel similar to `<details>` HTML element.
@@ -120,18 +140,9 @@ class Details extends DetailsMixin(
   ready() {
     super.ready();
 
-    // TODO: Generate unique IDs for a summary and a content panel when added to the slot,
-    // and use them to set `aria-controls` and `aria-labelledby` attributes, respectively.
-
-    this._collapsible = this.shadowRoot.querySelector('[part="content"]');
-
-    this.addController(new SummaryController(this));
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-
-    this._tooltipController.setTarget(this._toggleElement);
-    this._tooltipController.setPosition('bottom-start');
+    this._initSummary();
+    this._initContent();
+    this._initTooltip();
   }
 
   /**
@@ -144,6 +155,38 @@ class Details extends DetailsMixin(
   _setAriaDisabled() {
     // The `aria-disabled` is set on the details summary.
   }
+
+  /** @private */
+  _initSummary() {
+    this._summaryController = new SummaryController(this);
+    this.addController(this._summaryController);
+  }
+
+  /** @private */
+  _initContent() {
+    this._contentController = new ContentController(this);
+    this._contentController.addEventListener('slot-content-changed', (event) => {
+      // Store nodes to toggle `aria-hidden` attribute
+      const { nodes } = event.target;
+      this._contentElements = nodes;
+
+      if (nodes[0] && nodes[0].id) {
+        this._toggleElement.setAttribute('aria-controls', nodes[0].id);
+      } else {
+        this._toggleElement.removeAttribute('aria-controls');
+      }
+    });
+    this.addController(this._contentController);
+  }
+
+  /** @private */
+  _initTooltip() {
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+
+    this._tooltipController.setTarget(this._toggleElement);
+    this._tooltipController.setPosition('bottom-start');
+  }
 }
 
 customElements.define(Details.is, Details);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -133,6 +133,44 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "rootPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "importPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "root",
+                "description": "",
+                "value": {
+                  "type": [
+                    "StampedTemplate",
+                    "HTMLElement",
+                    "ShadowRoot"
+                  ]
+                }
+              },
+              {
+                "name": "$",
+                "description": "",
+                "value": {
+                  "type": [
+                    "Object.<string, Element>"
+                  ]
+                }
               }
             ],
             "events": []

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -53,6 +53,34 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": ".rootPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".importPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".root",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".$",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         }