@vaadin/details 24.0.0-alpha7 → 24.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha7",
+  "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-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"
+    "@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": "aeb4535336813636736759e0a5de148b26bfc3b6"
+  "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';
@@ -20,9 +20,4 @@ export declare class DetailsMixinClass {
    * List of elements passed to the details default slot.
    */
   protected _contentElements: HTMLElement[];
-
-  /**
-   * An element used to toggle the content visibility.
-   */
-  protected _toggleElement: 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.
@@ -32,53 +33,47 @@ export const DetailsMixin = (superClass) =>
         _contentElements: {
           type: Array,
         },
-
-        /**
-         * An element used to toggle the content visibility.
-         *
-         * @type {!HTMLElement | undefined}
-         * @protected
-         */
-        _toggleElement: {
-          type: Object,
-          observer: '_toggleElementChanged',
-        },
       };
     }
 
     static get observers() {
-      return ['_openedOrToggleChanged(opened, _toggleElement)', '_openedOrContentChanged(opened, _contentElements)'];
+      return ['_openedOrContentChanged(opened, _contentElements)'];
     }
 
-    /** @private */
-    _openedOrContentChanged(opened, elements) {
-      if (elements) {
-        elements.forEach((el) => {
-          el.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,52 +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 { 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';
 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;
-      },
-    });
-  }
-}
-
-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.
@@ -86,6 +53,7 @@ class ContentController extends SlotObserveController {
  *
  * @extends HTMLElement
  * @mixes ControllerMixin
+ * @mixes DetailsMixin
  * @mixes DelegateFocusMixin
  * @mixes DelegateStateMixin
  * @mixes ElementMixin
@@ -128,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'];
   }
@@ -136,13 +121,29 @@ class Details extends DetailsMixin(
     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._initSummary();
-    this._initContent();
-    this._initTooltip();
+    this.addController(this._summaryController);
+    this.addController(this._tooltipController);
   }
 
   /**
@@ -157,35 +158,28 @@ class Details extends DetailsMixin(
   }
 
   /** @private */
-  _initSummary() {
-    this._summaryController = new SummaryController(this);
-    this.addController(this._summaryController);
+  _summaryChanged(summary) {
+    this._summaryController.setSummary(summary);
   }
 
   /** @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);
+  __updateAriaControls(summary, contentElements) {
+    if (summary && contentElements) {
+      const node = contentElements[0];
+
+      if (node && node.id) {
+        summary.setAttribute('aria-controls', node.id);
       } else {
-        this._toggleElement.removeAttribute('aria-controls');
+        summary.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');
+  __updateAriaExpanded(focusElement, opened) {
+    if (focusElement) {
+      focusElement.setAttribute('aria-expanded', opened ? 'true' : 'false');
+    }
   }
 }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha7",
+  "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.",
@@ -135,45 +164,23 @@
                 }
               },
               {
-                "name": "rootPath",
-                "description": "",
+                "name": "summary",
+                "description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
                 "value": {
                   "type": [
-                    "string"
-                  ]
-                }
-              },
-              {
-                "name": "importPath",
-                "description": "",
-                "value": {
-                  "type": [
-                    "string"
-                  ]
-                }
-              },
-              {
-                "name": "root",
-                "description": "",
-                "value": {
-                  "type": [
-                    "StampedTemplate",
-                    "HTMLElement",
-                    "ShadowRoot"
-                  ]
-                }
-              },
-              {
-                "name": "$",
-                "description": "",
-                "value": {
-                  "type": [
-                    "Object.<string, Element>"
+                    "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-alpha7",
+  "version": "24.0.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -41,43 +41,36 @@
           "extension": true,
           "attributes": [
             {
-              "name": "?disabled",
-              "description": "If true, the user cannot interact with this element.",
-              "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"
               }
             },
             {
-              "name": ".rootPath",
-              "description": "",
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".importPath",
-              "description": "",
+              "name": "?autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".root",
-              "description": "",
+              "name": ".summary",
+              "description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".$",
-              "description": "",
+              "name": "@opened-changed",
+              "description": "Fired when the `opened` property changes.",
               "value": {
                 "kind": "expression"
               }