@vaadin/details 24.0.0-alpha6 → 24.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,12 +37,11 @@
   "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-alpha8",
+    "@vaadin/component-base": "24.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
+  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
 }

package/src/content-controller.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+
+/**
+ * A controller to manage the default content slot.
+ */
+export class ContentController extends SlotChildObserveController {}

package/src/content-controller.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+
+/**
+ * A controller to manage the default content slot.
+ */
+export class ContentController extends SlotChildObserveController {
+  /**
+   * 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 });
+  }
+}

package/src/summary-controller.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+
+/**
+ * A controller to manage the summary element.
+ */
+export class SummaryController extends SlotChildObserveController {
+  /**
+   * String used for the summary.
+   */
+  protected summary: string | null | undefined;
+
+  /**
+   * Set summary based on corresponding host property.
+   */
+  setSummary(label: string | null | undefined): void;
+}

package/src/summary-controller.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+
+/**
+ * A controller to manage the summary element.
+ */
+export class SummaryController extends SlotChildObserveController {
+  constructor(host, tagName) {
+    super(host, 'summary', tagName);
+  }
+
+  /**
+   * Set summary based on corresponding host property.
+   *
+   * @param {string} summary
+   */
+  setSummary(summary) {
+    this.summary = summary;
+
+    // Restore the default summary, if needed.
+    const summaryNode = this.getSlotChild();
+    if (!summaryNode) {
+      this.restoreDefaultNode();
+    }
+
+    // When default summary is used, update it.
+    if (this.node === this.defaultNode) {
+      this.updateDefaultNode(this.node);
+    }
+  }
+
+  /**
+   * Override method inherited from `SlotChildObserveController`
+   * to restore and observe the default summary element.
+   *
+   * @protected
+   * @override
+   */
+  restoreDefaultNode() {
+    const { summary } = this;
+
+    // Restore the default summary.
+    if (summary && summary.trim() !== '') {
+      this.attachDefaultNode();
+    }
+  }
+
+  /**
+   * Override method inherited from `SlotChildObserveController`
+   * to update the default summary element text content.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
+   */
+  updateDefaultNode(node) {
+    if (node) {
+      node.textContent = this.summary;
+    }
+
+    // Notify the host after update.
+    super.updateDefaultNode(node);
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 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';
@@ -17,12 +17,7 @@ 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;
-
-  /**
-   * An element used to toggle the content visibility.
-   */
-  protected _toggleElement: HTMLElement;
+  protected _contentElements: HTMLElement[];
 }

package/src/vaadin-details-mixin.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ContentController } from './content-controller.js';
 
 /**
  * A mixin providing common details functionality.
@@ -25,58 +26,54 @@ 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,
-        },
-
-        /**
-         * An element used to toggle the content visibility.
-         *
-         * @type {!HTMLElement | undefined}
-         * @protected
-         */
-        _toggleElement: {
-          type: Object,
-          observer: '_toggleElementChanged',
+        _contentElements: {
+          type: Array,
         },
       };
     }
 
     static get observers() {
-      return ['_openedOrToggleChanged(opened, _toggleElement)', '_openedOrCollapsibleChanged(opened, _collapsible)'];
+      return ['_openedOrContentChanged(opened, _contentElements)'];
     }
 
-    /** @private */
-    _openedOrCollapsibleChanged(opened, collapsible) {
-      if (collapsible) {
-        collapsible.setAttribute('aria-hidden', opened ? 'false' : 'true');
-      }
+    constructor() {
+      super();
+
+      this._contentController = new ContentController(this);
+
+      this._contentController.addEventListener('slot-content-changed', (event) => {
+        const content = event.target.nodes || [];
+
+        // Exclude nodes that are no longer connected
+        this._contentElements = content.filter((node) => node.parentNode === this);
+      });
     }
 
-    /** @private */
-    _openedOrToggleChanged(opened, toggleElement) {
-      if (toggleElement) {
-        toggleElement.setAttribute('aria-expanded', opened ? 'true' : 'false');
-      }
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(this._contentController);
+
+      // 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', (event) => {
+        if (event.target === this.focusElement) {
+          this.opened = !this.opened;
+        }
+      });
     }
 
     /** @private */
-    _toggleElementChanged(toggleElement) {
-      if (toggleElement) {
-        // Only handle click and not keydown, because `vaadin-details-summary` uses `ButtonMixin`
-        // that already covers this logic, and `vaadin-accordion-heading` uses native `<button>`.
-        toggleElement.addEventListener('click', () => {
-          this._toggle();
+    _openedOrContentChanged(opened, elements) {
+      if (elements) {
+        elements.forEach((el) => {
+          el.setAttribute('aria-hidden', opened ? 'false' : 'true');
         });
       }
     }
-
-    /** @private */
-    _toggle() {
-      this.opened = !this.opened;
-    }
   };

package/src/vaadin-details-summary.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-details.d.ts

@@ -1,12 +1,12 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { DelegateStateMixin } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DetailsMixin } from './vaadin-details-mixin.js';
 
@@ -61,6 +61,12 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
 declare class Details extends DetailsMixin(
   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;
+
   addEventListener<K extends keyof DetailsEventMap>(
     type: K,
     listener: (this: Details, ev: DetailsEventMap[K]) => void,

package/src/vaadin-details.js

@@ -1,32 +1,19 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 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 { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-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';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SummaryController } from './summary-controller.js';
 import { DetailsMixin } from './vaadin-details-mixin.js';
 
-class SummaryController extends SlotController {
-  constructor(host) {
-    super(host, 'summary', 'vaadin-details-summary', {
-      useUniqueId: true,
-      initializer: (node, host) => {
-        host._toggleElement = node;
-        host._setFocusElement(node);
-        host.stateTarget = node;
-      },
-    });
-  }
-}
-
 /**
  * `<vaadin-details>` is a Web Component which the creates an
  * expandable panel similar to `<details>` HTML element.
@@ -66,6 +53,7 @@ class SummaryController extends SlotController {
  *
  * @extends HTMLElement
  * @mixes ControllerMixin
+ * @mixes DetailsMixin
  * @mixes DelegateFocusMixin
  * @mixes DelegateStateMixin
  * @mixes ElementMixin
@@ -108,6 +96,23 @@ class Details extends DetailsMixin(
     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'];
   }
@@ -116,24 +121,31 @@ class Details extends DetailsMixin(
     return ['disabled', 'opened'];
   }
 
-  /** @protected */
-  ready() {
-    super.ready();
+  constructor() {
+    super();
 
-    // 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._summaryController = new SummaryController(this, 'vaadin-details-summary');
+    this._summaryController.addEventListener('slot-content-changed', (event) => {
+      const { node } = event.target;
 
-    this._collapsible = this.shadowRoot.querySelector('[part="content"]');
+      this._setFocusElement(node);
+      this.stateTarget = node;
 
-    this.addController(new SummaryController(this));
+      this._tooltipController.setTarget(node);
+    });
 
     this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-
-    this._tooltipController.setTarget(this._toggleElement);
     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.
@@ -144,6 +156,31 @@ class Details extends DetailsMixin(
   _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/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-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -76,6 +76,15 @@
           "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`summary`        | The element used to open and close collapsible content.\n`toggle`         | The element used as indicator, can represent an icon.\n`summary-content`| The wrapper for the slotted summary content.\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/custom-theme/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.",
@@ -98,6 +107,17 @@
                 ]
               }
             },
+            {
+              "name": "summary",
+              "description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -112,6 +132,15 @@
           ],
           "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.",
@@ -133,9 +162,25 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "summary",
+                "description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "opened-changed",
+                "description": "Fired when the `opened` property changes."
+              }
+            ]
           }
         }
       ]

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-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -40,6 +40,13 @@
           "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`summary`        | The element used to open and close collapsible content.\n`toggle`         | The element used as indicator, can represent an icon.\n`summary-content`| The wrapper for the slotted summary content.\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/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?opened",
+              "description": "If true, the collapsible content is visible.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?disabled",
               "description": "If true, the user cannot interact with this element.",
@@ -53,6 +60,20 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": ".summary",
+              "description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@opened-changed",
+              "description": "Fired when the `opened` property changes.",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         }