@vaadin/details 24.0.0-alpha9 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -37,20 +37,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha9",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/button": "24.0.0-beta2",
+    "@vaadin/component-base": "24.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

package/src/collapsible-mixin.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * A mixin providing common functionality for making content collapsible,
+ * used by `<vaadin-details>` and `<vaadin-accordion-panel>` elements.
+ */
+export declare function CollapsibleMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<CollapsibleMixinClass> & T;
+
+export declare class CollapsibleMixinClass {
+  /**
+   * If true, the collapsible content is visible.
+   */
+  opened: boolean;
+
+  /**
+   * List of elements assigned to the default `<slot>`
+   * that represent the collapsible content.
+   */
+  protected _contentElements: HTMLElement[];
+}

package/src/{vaadin-details-mixin.js → collapsible-mixin.js}

@@ -6,12 +6,13 @@
 import { ContentController } from './content-controller.js';
 
 /**
- * A mixin providing common details functionality.
+ * A mixin providing common functionality for making content collapsible,
+ * used by `<vaadin-details>` and `<vaadin-accordion-panel>` elements.
  *
  * @polymerMixin
  */
-export const DetailsMixin = (superClass) =>
-  class DetailsMixinClass extends superClass {
+export const CollapsibleMixin = (superClass) =>
+  class CollapsibleMixinClass extends superClass {
     static get properties() {
       return {
         /**
@@ -26,7 +27,8 @@ export const DetailsMixin = (superClass) =>
         },
 
         /**
-         * List of elements passed to the details default slot.
+         * List of elements assigned to the default `<slot>`
+         * that represent the collapsible content.
          *
          * @protected
          */

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+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.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are exposed for styling:
+ *
+ * Part name  | Description
+ * -----------|-------------------
+ * `toggle`   | The icon element
+ * `content`  | The content wrapper
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------| -----------
+ * `active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.
+ * `opened`     | Set when the element is expanded and related collapsible content is visible.
+ * `disabled`   | Set when the element is disabled.
+ * `focus-ring` | Set when the element is focused using the keyboard.
+ * `focused`    | Set when the element is focused.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ */
+declare class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(HTMLElement))) {
+  /**
+   * When true, the element is opened.
+   */
+  opened: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-details-summary': DetailsSummary;
+  }
+}
+
+export { DetailsSummary };

package/src/vaadin-details-summary.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -11,6 +11,27 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 /**
  * The details summary element.
  *
+ * ### Styling
+ *
+ * The following shadow DOM parts are exposed for styling:
+ *
+ * Part name  | Description
+ * -----------|-------------------
+ * `toggle`   | The icon element
+ * `content`  | The content wrapper
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------| -----------
+ * `active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.
+ * `opened`     | Set when the element is expanded and related collapsible content is visible.
+ * `disabled`   | Set when the element is disabled.
+ * `focus-ring` | Set when the element is focused using the keyboard.
+ * `focused`    | Set when the element is focused.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ *
  * @extends HTMLElement
  * @mixes ButtonMixin
  * @mixes DirMixin

package/src/vaadin-details.d.ts

@@ -8,7 +8,7 @@ import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mi
 import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DetailsMixin } from './vaadin-details-mixin.js';
+import { CollapsibleMixin } from './collapsible-mixin.js';
 
 /**
  * Fired when the `opened` property changes.
@@ -58,7 +58,7 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Details extends DetailsMixin(
+declare class Details extends CollapsibleMixin(
   DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))),
 ) {
   /**

package/src/vaadin-details.js

@@ -11,8 +11,8 @@ import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mi
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CollapsibleMixin } from './collapsible-mixin.js';
 import { SummaryController } from './summary-controller.js';
-import { DetailsMixin } from './vaadin-details-mixin.js';
 
 /**
  * `<vaadin-details>` is a Web Component which the creates an
@@ -52,14 +52,14 @@ import { DetailsMixin } from './vaadin-details-mixin.js';
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
  * @extends HTMLElement
+ * @mixes CollapsibleMixin
  * @mixes ControllerMixin
- * @mixes DetailsMixin
  * @mixes DelegateFocusMixin
  * @mixes DelegateStateMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Details extends DetailsMixin(
+class Details extends CollapsibleMixin(
   DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))),
 ) {
   static get template() {

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-details-summary",
-          "description": "The details summary element.",
+          "description": "The details summary element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name  | Description\n-----------|-------------------\n`toggle`   | The icon element\n`content`  | The content wrapper\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------| -----------\n`active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.\n`opened`     | Set when the element is expanded and related collapsible content is 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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-details-summary",
-          "description": "The details summary element.",
+          "description": "The details summary element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name  | Description\n-----------|-------------------\n`toggle`   | The icon element\n`content`  | The content wrapper\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------| -----------\n`active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.\n`opened`     | Set when the element is expanded and related collapsible content is 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": [
             {

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

@@ -1,23 +0,0 @@
-/**
- * @license
- * 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';
-
-/**
- * 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[];
-}