@vaadin/details 24.0.0-alpha5 → 24.0.0-alpha7

package/README.md

@@ -9,8 +9,8 @@ A web component that provides an expandable panel for showing and hiding content
 
 ```html
 <vaadin-details opened>
-  <div slot="summary">Expandable Details</div>
-  Toggle using mouse, Enter and Space keys.
+  <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
+  <div>Toggle using mouse, Enter and Space keys.</div>
 </vaadin-details>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha5",
+  "version": "24.0.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -35,12 +35,14 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha5",
-    "@vaadin/field-base": "24.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha5"
+    "@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",
@@ -51,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "fc0b1721eda9e39cb289b239e440fc9e29573a31"
+  "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
 }

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

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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';
+
+/**
+ * A mixin providing common details functionality.
+ */
+export declare function DetailsMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DetailsMixinClass> & T;
+
+export declare class DetailsMixinClass {
+  /**
+   * If true, the collapsible content is visible.
+   */
+  opened: boolean;
+
+  /**
+   * 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

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin providing common details functionality.
+ *
+ * @polymerMixin
+ */
+export const DetailsMixin = (superClass) =>
+  class DetailsMixinClass extends superClass {
+    static get properties() {
+      return {
+        /**
+         * If true, the collapsible content is visible.
+         * @type {boolean}
+         */
+        opened: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          notify: true,
+        },
+
+        /**
+         * List of elements passed to the details default slot.
+         *
+         * @protected
+         */
+        _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)'];
+    }
+
+    /** @private */
+    _openedOrContentChanged(opened, elements) {
+      if (elements) {
+        elements.forEach((el) => {
+          el.setAttribute('aria-hidden', opened ? 'false' : 'true');
+        });
+      }
+    }
+
+    /** @private */
+    _openedOrToggleChanged(opened, toggleElement) {
+      if (toggleElement) {
+        toggleElement.setAttribute('aria-expanded', opened ? 'true' : 'false');
+      }
+    }
+
+    /** @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();
+        });
+      }
+    }
+
+    /** @private */
+    _toggle() {
+      this.opened = !this.opened;
+    }
+  };

package/src/vaadin-details-summary.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * The details summary element.
+ *
+ * @extends HTMLElement
+ * @mixes ButtonMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
+ */
+class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
+  static get is() {
+    return 'vaadin-details-summary';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          outline: none;
+          white-space: nowrap;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          user-select: none;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        :host([disabled]) {
+          pointer-events: none;
+        }
+      </style>
+      <span part="toggle" aria-hidden="true"></span>
+      <div part="content"><slot></slot></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * When true, the element is opened.
+       */
+      opened: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+}
+
+customElements.define(DetailsSummary.is, DetailsSummary);

package/src/vaadin-details.d.ts

@@ -5,8 +5,10 @@
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ShadowFocusMixin } from '@vaadin/field-base/src/shadow-focus-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';
 
 /**
  * Fired when the `opened` property changes.
@@ -25,8 +27,10 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
  *
  * ```
  * <vaadin-details>
- *   <div slot="summary">Expandable Details</div>
- *   Toggle using mouse, Enter and Space keys.
+ *   <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
+ *   <div>
+ *     Toggle using mouse, Enter and Space keys.
+ *   </div>
  * </vaadin-details>
  * ```
  *
@@ -54,12 +58,9 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Details extends ShadowFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
-  /**
-   * If true, the details content is visible.
-   */
-  opened: boolean;
-
+declare class Details extends DetailsMixin(
+  DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))),
+) {
   addEventListener<K extends keyof DetailsEventMap>(
     type: K,
     listener: (this: Details, ev: DetailsEventMap[K]) => void,

package/src/vaadin-details.js

@@ -3,13 +3,49 @@
  * Copyright (c) 2019 - 2022 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 { 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 { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-import { ShadowFocusMixin } from '@vaadin/field-base/src/shadow-focus-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';
+
+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
@@ -17,8 +53,10 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * ```
  * <vaadin-details>
- *   <div slot="summary">Expandable Details</div>
- *   Toggle using mouse, Enter and Space keys.
+ *   <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
+ *   <div>
+ *     Toggle using mouse, Enter and Space keys.
+ *   </div>
  * </vaadin-details>
  * ```
  *
@@ -48,11 +86,14 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @extends HTMLElement
  * @mixes ControllerMixin
- * @mixes ShadowFocusMixin
+ * @mixes DelegateFocusMixin
+ * @mixes DelegateStateMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Details extends ShadowFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
+class Details extends DetailsMixin(
+  DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))),
+) {
   static get template() {
     return html`
       <style>
@@ -66,36 +107,20 @@ class Details extends ShadowFocusMixin(ElementMixin(ThemableMixin(ControllerMixi
 
         [part='content'] {
           display: none;
-          overflow: hidden;
-        }
-
-        [part='summary'][disabled] {
-          pointer-events: none;
         }
 
         :host([opened]) [part='content'] {
           display: block;
-          overflow: visible;
         }
       </style>
-      <div role="heading">
-        <div
-          role="button"
-          part="summary"
-          on-click="_onToggleClick"
-          on-keydown="_onToggleKeyDown"
-          disabled$="[[disabled]]"
-          aria-expanded$="[[_getAriaExpanded(opened)]]"
-          aria-controls$="[[_contentId]]"
-        >
-          <span part="toggle" aria-hidden="true"></span>
-          <span part="summary-content"><slot name="summary"></slot></span>
-        </div>
-        <slot name="tooltip"></slot>
-      </div>
-      <section id$="[[_contentId]]" part="content" aria-hidden$="[[_getAriaHidden(opened)]]">
+
+      <slot name="summary"></slot>
+
+      <div part="content">
         <slot></slot>
-      </section>
+      </div>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -103,83 +128,64 @@ class Details extends ShadowFocusMixin(ElementMixin(ThemableMixin(ControllerMixi
     return 'vaadin-details';
   }
 
-  static get properties() {
-    return {
-      /**
-       * If true, the details content is visible.
-       * @type {boolean}
-       */
-      opened: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-        notify: true,
-        observer: '_openedChanged',
-      },
-    };
+  static get delegateAttrs() {
+    return ['theme'];
   }
 
-  /**
-   * @return {!HTMLElement}
-   * @protected
-   */
-  get _collapsible() {
-    return this.shadowRoot.querySelector('[part="content"]');
-  }
-
-  /**
-   * Focusable element used by `ShadowFocusMixin`.
-   * @return {!HTMLElement}
-   * @protected
-   */
-  get focusElement() {
-    return this.shadowRoot.querySelector('[part="summary"]');
+  static get delegateProps() {
+    return ['disabled', 'opened'];
   }
 
   /** @protected */
   ready() {
     super.ready();
-    this._contentId = `${this.constructor.is}-content-${generateUniqueId()}`;
-    // Prevent Shift + Tab on content from host blur
-    this._collapsible.addEventListener('keydown', (e) => {
-      if (e.shiftKey && e.keyCode === 9) {
-        e.stopPropagation();
-      }
-    });
 
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-
-    this._tooltipController.setTarget(this.focusElement);
-    this._tooltipController.setPosition('bottom-start');
+    this._initSummary();
+    this._initContent();
+    this._initTooltip();
   }
 
-  /** @private */
-  _getAriaExpanded(opened) {
-    return opened ? 'true' : 'false';
+  /**
+   * 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 */
-  _getAriaHidden(opened) {
-    return opened ? 'false' : 'true';
+  _initSummary() {
+    this._summaryController = new SummaryController(this);
+    this.addController(this._summaryController);
   }
 
   /** @private */
-  _openedChanged(opened) {
-    this._collapsible.style.maxHeight = opened ? '' : '0px';
+  _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 */
-  _onToggleClick() {
-    this.opened = !this.opened;
-  }
+  _initTooltip() {
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
 
-  /** @private */
-  _onToggleKeyDown(e) {
-    if ([13, 32].indexOf(e.keyCode) > -1) {
-      e.preventDefault();
-      this.opened = !this.opened;
-    }
+    this._tooltipController.setTarget(this._toggleElement);
+    this._tooltipController.setPosition('bottom-start');
   }
 }
 

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

@@ -1,6 +1,4 @@
 import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
@@ -12,64 +10,10 @@ const details = css`
     outline: none;
   }
 
-  [part='summary'] {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    outline: none;
-    padding: var(--lumo-space-s) 0;
-    box-sizing: border-box;
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    font-weight: 500;
-    line-height: var(--lumo-line-height-xs);
-    color: var(--lumo-secondary-text-color);
-    background-color: inherit;
-    border-radius: var(--lumo-border-radius-m);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([focus-ring]) [part='summary'] {
+  :host([focus-ring]) ::slotted([slot='summary']) {
     box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
   }
 
-  [part='toggle'] {
-    display: block;
-    width: 1em;
-    height: 1em;
-    margin-left: calc(var(--lumo-space-xs) * -1);
-    margin-right: var(--lumo-space-xs);
-    font-size: var(--lumo-icon-size-s);
-    line-height: 1;
-    color: var(--lumo-contrast-60pct);
-    font-family: 'lumo-icons';
-    cursor: var(--lumo-clickable-cursor);
-  }
-
-  :host([disabled]) [part='summary'],
-  :host([disabled]) [part='toggle'] {
-    color: var(--lumo-disabled-text-color);
-    cursor: default;
-  }
-
-  @media (hover: hover) {
-    :host(:not([disabled])) [part='summary']:hover,
-    :host(:not([disabled])) [part='summary']:hover [part='toggle'] {
-      color: var(--lumo-contrast-80pct);
-    }
-  }
-
-  [part='toggle']::before {
-    content: var(--lumo-icons-angle-right);
-  }
-
-  :host([opened]) [part='toggle'] {
-    transform: rotate(90deg);
-  }
-
   [part='content'] {
     padding: var(--lumo-space-xs) 0 var(--lumo-space-s);
     font-size: var(--lumo-font-size-m);
@@ -81,66 +25,14 @@ const details = css`
     border-radius: var(--lumo-border-radius-m);
   }
 
-  :host([theme~='filled']) [part='summary'] {
-    padding: var(--lumo-space-s) calc(var(--lumo-space-s) + var(--lumo-space-xs) / 2);
-  }
-
   :host([theme~='filled']) [part='content'] {
     padding-left: var(--lumo-space-m);
     padding-right: var(--lumo-space-m);
   }
 
-  :host([theme~='small']) [part='summary'] {
-    padding-top: var(--lumo-space-xs);
-    padding-bottom: var(--lumo-space-xs);
-  }
-
-  :host([theme~='small']) [part='toggle'] {
-    margin-right: calc(var(--lumo-space-xs) / 2);
-  }
-
-  :host([theme~='small']) [part\$='content'] {
+  :host([theme~='small']) [part$='content'] {
     font-size: var(--lumo-font-size-s);
   }
-
-  :host([theme~='reverse']) [part='summary'] {
-    justify-content: space-between;
-  }
-
-  :host([theme~='reverse']) [part='toggle'] {
-    order: 1;
-    margin-right: 0;
-  }
-
-  :host([theme~='reverse'][theme~='filled']) [part='summary'] {
-    padding-left: var(--lumo-space-m);
-  }
-
-  /* RTL specific styles */
-  :host([dir='rtl']) [part='toggle'] {
-    margin-left: var(--lumo-space-xs);
-    margin-right: calc(var(--lumo-space-xs) * -1);
-  }
-
-  :host([dir='rtl']) [part='toggle']::before {
-    content: var(--lumo-icons-angle-left);
-  }
-
-  :host([opened][dir='rtl']) [part='toggle'] {
-    transform: rotate(-90deg);
-  }
-
-  :host([theme~='small'][dir='rtl']) [part='toggle'] {
-    margin-left: calc(var(--lumo-space-xs) / 2);
-  }
-
-  :host([theme~='reverse'][dir='rtl']) [part='toggle'] {
-    margin-left: 0;
-  }
-
-  :host([theme~='reverse'][theme~='filled'][dir='rtl']) [part='summary'] {
-    padding-right: var(--lumo-space-m);
-  }
 `;
 
 registerStyles('vaadin-details', details, { moduleId: 'lumo-details' });

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

@@ -0,0 +1,123 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const detailsSummary = css`
+  :host {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    outline: none;
+    padding: var(--lumo-space-s) 0;
+    box-sizing: border-box;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 500;
+    line-height: var(--lumo-line-height-xs);
+    color: var(--lumo-secondary-text-color);
+    background-color: inherit;
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([disabled]),
+  :host([disabled]) [part='toggle'] {
+    color: var(--lumo-disabled-text-color);
+    cursor: default;
+  }
+
+  @media (hover: hover) {
+    :host(:hover:not([disabled])),
+    :host(:hover:not([disabled])) [part='toggle'] {
+      color: var(--lumo-contrast-80pct);
+    }
+  }
+
+  [part='toggle'] {
+    display: block;
+    width: 1em;
+    height: 1em;
+    margin-left: calc(var(--lumo-space-xs) * -1);
+    margin-right: var(--lumo-space-xs);
+    font-size: var(--lumo-icon-size-s);
+    line-height: 1;
+    color: var(--lumo-contrast-60pct);
+    font-family: 'lumo-icons';
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part='toggle']::before {
+    content: var(--lumo-icons-angle-right);
+  }
+
+  :host([opened]) [part='toggle'] {
+    transform: rotate(90deg);
+  }
+
+  /* RTL styles */
+  :host([dir='rtl']) [part='toggle'] {
+    margin-left: var(--lumo-space-xs);
+    margin-right: calc(var(--lumo-space-xs) * -1);
+  }
+
+  :host([dir='rtl']) [part='toggle']::before {
+    content: var(--lumo-icons-angle-left);
+  }
+
+  :host([opened][dir='rtl']) [part='toggle'] {
+    transform: rotate(-90deg);
+  }
+
+  /* Small */
+  :host([theme~='small']) {
+    padding-top: var(--lumo-space-xs);
+    padding-bottom: var(--lumo-space-xs);
+  }
+
+  :host([theme~='small']) [part='toggle'] {
+    margin-right: calc(var(--lumo-space-xs) / 2);
+  }
+
+  :host([theme~='small'][dir='rtl']) [part='toggle'] {
+    margin-left: calc(var(--lumo-space-xs) / 2);
+  }
+
+  /* Filled */
+  :host([theme~='filled']) {
+    padding: var(--lumo-space-s) calc(var(--lumo-space-s) + var(--lumo-space-xs) / 2);
+  }
+
+  /* Reverse */
+  :host([theme~='reverse']) {
+    justify-content: space-between;
+  }
+
+  :host([theme~='reverse']) [part='toggle'] {
+    order: 1;
+    margin-right: 0;
+  }
+
+  :host([theme~='reverse'][dir='rtl']) [part='toggle'] {
+    margin-left: 0;
+  }
+
+  /* Filled reverse */
+  :host([theme~='reverse'][theme~='filled']) {
+    padding-left: var(--lumo-space-m);
+  }
+
+  :host([theme~='reverse'][theme~='filled'][dir='rtl']) {
+    padding-right: var(--lumo-space-m);
+  }
+`;
+
+registerStyles('vaadin-details-summary', detailsSummary, { moduleId: 'lumo-details-summary' });
+
+export { detailsSummary };

package/theme/lumo/vaadin-details.js

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

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

@@ -1,5 +1,4 @@
 import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/shadow.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -11,106 +10,13 @@ const details = css`
     outline: none;
   }
 
-  [part='summary'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    position: relative;
-    outline: none;
-    min-height: 48px;
-    padding: 0 24px;
-    box-sizing: border-box;
-    font-weight: 500;
-    font-size: var(--material-small-font-size);
-    background-color: var(--material-background-color);
-    color: var(--material-body-text-color);
-    cursor: default;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([disabled]) [part='summary'] {
-    color: var(--material-disabled-text-color);
-    background: var(--material-disabled-color);
-  }
-
-  :host([focus-ring]) [part='summary'] {
-    background: var(--material-secondary-background-color);
-  }
-
-  [part='summary-content'] {
-    margin: 12px 0;
-  }
-
-  [part='toggle'] {
-    position: relative;
-    order: 1;
-    margin-right: -8px;
-    width: 24px;
-    height: 24px;
-    padding: 4px;
-    color: var(--material-secondary-text-color);
-    line-height: 24px;
-    text-align: center;
-    transform: rotate(90deg);
-    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 0.1);
-  }
-
-  [part='toggle']::before {
-    font-family: 'material-icons';
-    font-size: 24px;
-    width: 24px;
-    display: inline-block;
-    content: var(--material-icons-chevron-right);
-  }
-
-  [part='toggle']::after {
-    display: inline-block;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: var(--material-disabled-text-color);
-    transform: scale(0);
-    opacity: 0;
-    transition: transform 0s 0.8s, opacity 0.8s;
-    will-change: transform, opacity;
-  }
-
-  :host([disabled]) [part='toggle'] {
-    color: var(--material-disabled-color);
-  }
-
-  :host(:not([disabled])) [part='summary']:active [part='toggle']::after {
-    transition-duration: 0.08s, 0.01s;
-    transition-delay: 0s, 0s;
-    transform: scale(1.25);
-    opacity: 0.15;
-  }
-
-  :host([opened]) [part='toggle'] {
-    transform: rotate(270deg);
+  :host([focus-ring]) ::slotted([slot='summary']) {
+    background-color: var(--material-secondary-background-color);
   }
 
   [part='content'] {
     padding: 8px 24px 24px;
   }
-
-  /* RTL specific styles */
-  :host([dir='rtl']) [part='toggle'] {
-    margin-left: -8px;
-    margin-right: 0;
-  }
-
-  :host([dir='rtl']) [part='toggle']::after {
-    left: auto;
-    right: 0;
-  }
 `;
 
 registerStyles('vaadin-details', details, { moduleId: 'material-details' });

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

@@ -0,0 +1,104 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const detailsSummary = css`
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    position: relative;
+    outline: none;
+    min-height: 48px;
+    padding: 0 24px;
+    box-sizing: border-box;
+    font-weight: 500;
+    font-size: var(--material-small-font-size);
+    background-color: var(--material-background-color);
+    color: var(--material-body-text-color);
+    cursor: default;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([disabled]) {
+    color: var(--material-disabled-text-color);
+    background-color: var(--material-disabled-color);
+  }
+
+  [part='content'] {
+    margin: 0;
+    position: relative;
+  }
+
+  [part='toggle'] {
+    position: relative;
+    order: 1;
+    margin-inline-start: auto;
+    right: -8px;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    color: var(--material-secondary-text-color);
+    line-height: 24px;
+    text-align: center;
+    transform: rotate(90deg);
+    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 0.1);
+  }
+
+  [part='toggle']::before {
+    font-family: 'material-icons';
+    font-size: 24px;
+    width: 24px;
+    display: inline-block;
+    content: var(--material-icons-chevron-right);
+  }
+
+  [part='toggle']::after {
+    display: inline-block;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--material-disabled-text-color);
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 0s 0.8s, opacity 0.8s;
+    will-change: transform, opacity;
+  }
+
+  :host([disabled]) [part='toggle'] {
+    color: var(--material-disabled-color);
+  }
+
+  :host([active]:not([disabled])) [part='toggle']::after {
+    transition-duration: 0.08s, 0.01s;
+    transition-delay: 0s, 0s;
+    transform: scale(1.25);
+    opacity: 0.15;
+  }
+
+  :host([opened]) [part='toggle'] {
+    transform: rotate(270deg);
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) [part='toggle'] {
+    right: 8px;
+  }
+
+  :host([dir='rtl']) [part='toggle']::after {
+    left: auto;
+    right: 0;
+  }
+`;
+
+registerStyles('vaadin-details-summary', detailsSummary, { moduleId: 'material-details-summary' });
+
+export { detailsSummary };

package/theme/material/vaadin-details.js

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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha5",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
-          "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  <div slot=\"summary\">Expandable Details</div>\n  Toggle using mouse, Enter and Space keys.\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.",
+          "name": "vaadin-details-summary",
+          "description": "The details summary element.",
           "attributes": [
             {
               "name": "disabled",
@@ -22,8 +22,8 @@
               }
             },
             {
-              "name": "autofocus",
-              "description": "Specify that this control should have input focus when the page loads.",
+              "name": "opened",
+              "description": "When true, the element is opened.",
               "value": {
                 "type": [
                   "boolean",
@@ -33,11 +33,68 @@
               }
             },
             {
-              "name": "opened",
-              "description": "If true, the details content is visible.",
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "opened",
+                "description": "When true, the element is opened.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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": "disabled",
+              "description": "If true, the user cannot interact with this element.",
               "value": {
                 "type": [
-                  "boolean"
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -78,21 +135,45 @@
                 }
               },
               {
-                "name": "opened",
-                "description": "If true, the details content is visible.",
+                "name": "rootPath",
+                "description": "",
                 "value": {
                   "type": [
-                    "boolean"
+                    "string"
                   ]
                 }
-              }
-            ],
-            "events": [
+              },
+              {
+                "name": "importPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "root",
+                "description": "",
+                "value": {
+                  "type": [
+                    "StampedTemplate",
+                    "HTMLElement",
+                    "ShadowRoot"
+                  ]
+                }
+              },
               {
-                "name": "opened-changed",
-                "description": "Fired when the `opened` property changes."
+                "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-alpha5",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -14,9 +14,30 @@
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "vaadin-details-summary",
+          "description": "The details summary element.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?opened",
+              "description": "When true, the element is opened.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
         {
           "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  <div slot=\"summary\">Expandable Details</div>\n  Toggle using mouse, Enter and Space keys.\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.",
+          "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": [
             {
@@ -34,15 +55,29 @@
               }
             },
             {
-              "name": "?opened",
-              "description": "If true, the details content is visible.",
+              "name": ".rootPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".importPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".root",
+              "description": "",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "@opened-changed",
-              "description": "Fired when the `opened` property changes.",
+              "name": ".$",
+              "description": "",
               "value": {
                 "kind": "expression"
               }