@vaadin/dashboard 25.1.0-beta1 → 25.1.0-beta3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/custom-elements.json +17 -208
  2. package/package.json +11 -11
  3. package/src/vaadin-dashboard-item-mixin.js +11 -11
  4. package/src/vaadin-dashboard-layout-mixin.js +0 -1
  5. package/src/vaadin-dashboard-section.d.ts +1 -0
  6. package/src/vaadin-dashboard-section.js +1 -1
  7. package/src/vaadin-dashboard-widget.d.ts +1 -0
  8. package/src/vaadin-dashboard-widget.js +1 -1
  9. package/src/vaadin-dashboard.d.ts +1 -0
  10. package/src/vaadin-dashboard.js +1 -1
  11. package/web-types.json +28 -9
  12. package/web-types.lit.json +4 -4
package/custom-elements.json CHANGED
@@ -62,71 +62,6 @@
62
62
  }
63
63
  ]
64
64
  },
65
- {
66
- "kind": "javascript-module",
67
- "path": "src/vaadin-dashboard-button.js",
68
- "declarations": [
69
- {
70
- "kind": "class",
71
- "description": "An element used internally by `<vaadin-dashboard>`. Not intended to be used separately.",
72
- "name": "DashboardButton",
73
- "members": [],
74
- "mixins": [
75
- {
76
- "name": "ButtonMixin",
77
- "package": "@vaadin/button/src/vaadin-button-mixin.js"
78
- },
79
- {
80
- "name": "ElementMixin",
81
- "package": "@vaadin/component-base/src/element-mixin.js"
82
- },
83
- {
84
- "name": "ThemableMixin",
85
- "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
86
- },
87
- {
88
- "name": "PolylitMixin",
89
- "package": "@vaadin/component-base/src/polylit-mixin.js"
90
- },
91
- {
92
- "name": "LumoInjectionMixin",
93
- "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
94
- }
95
- ],
96
- "superclass": {
97
- "name": "LitElement",
98
- "package": "lit"
99
- },
100
- "tagName": "vaadin-dashboard-button",
101
- "customElement": true,
102
- "attributes": [
103
- {
104
- "name": "tabindex",
105
- "type": {
106
- "text": "number"
107
- },
108
- "description": "Indicates whether the element can be focused and where it participates in sequential keyboard navigation.",
109
- "fieldName": "tabindex",
110
- "inheritedFrom": {
111
- "name": "TabindexMixin",
112
- "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
113
- }
114
- }
115
- ],
116
- "events": []
117
- }
118
- ],
119
- "exports": [
120
- {
121
- "kind": "js",
122
- "name": "DashboardButton",
123
- "declaration": {
124
- "name": "DashboardButton",
125
- "module": "src/vaadin-dashboard-button.js"
126
- }
127
- }
128
- ]
129
- },
130
65
  {
131
66
  "kind": "javascript-module",
132
67
  "path": "src/vaadin-dashboard-helpers.js",
@@ -428,36 +363,7 @@
428
363
  }
429
364
  }
430
365
  ],
431
- "attributes": [
432
- {
433
- "name": "focused",
434
- "type": {
435
- "text": "boolean"
436
- },
437
- "fieldName": "__focused"
438
- },
439
- {
440
- "name": "move-mode",
441
- "type": {
442
- "text": "boolean"
443
- },
444
- "fieldName": "__moveMode"
445
- },
446
- {
447
- "name": "resize-mode",
448
- "type": {
449
- "text": "boolean"
450
- },
451
- "fieldName": "__resizeMode"
452
- },
453
- {
454
- "name": "selected",
455
- "type": {
456
- "text": "boolean"
457
- },
458
- "fieldName": "__selected"
459
- }
460
- ],
366
+ "attributes": [],
461
367
  "mixins": [
462
368
  {
463
369
  "name": "ResizeMixin",
@@ -693,7 +599,7 @@
693
599
  "declarations": [
694
600
  {
695
601
  "kind": "class",
696
- "description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|-------------\n`header` | The header of the section\n`title` | The title of the section\n`move-button` | The move button\n`remove-button` | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
602
+ "description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|-------------\n`header` | The header of the section\n`title` | The title of the section\n`button` | Set on all the buttons (move, remove and others)\n`move-button` | The move button\n`remove-button` | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
697
603
  "name": "DashboardSection",
698
604
  "members": [
699
605
  {
@@ -701,64 +607,20 @@
701
607
  "name": "sectionTitle",
702
608
  "privacy": "public",
703
609
  "type": {
704
- "text": "string | null | undefined"
610
+ "text": "string"
705
611
  },
706
612
  "description": "The title of the section",
707
613
  "attribute": "section-title"
708
614
  }
709
615
  ],
710
616
  "attributes": [
711
- {
712
- "name": "focused",
713
- "type": {
714
- "text": "boolean"
715
- },
716
- "fieldName": "__focused",
717
- "inheritedFrom": {
718
- "name": "DashboardItemMixin",
719
- "module": "src/vaadin-dashboard-item-mixin.js"
720
- }
721
- },
722
- {
723
- "name": "move-mode",
724
- "type": {
725
- "text": "boolean"
726
- },
727
- "fieldName": "__moveMode",
728
- "inheritedFrom": {
729
- "name": "DashboardItemMixin",
730
- "module": "src/vaadin-dashboard-item-mixin.js"
731
- }
732
- },
733
- {
734
- "name": "resize-mode",
735
- "type": {
736
- "text": "boolean"
737
- },
738
- "fieldName": "__resizeMode",
739
- "inheritedFrom": {
740
- "name": "DashboardItemMixin",
741
- "module": "src/vaadin-dashboard-item-mixin.js"
742
- }
743
- },
744
617
  {
745
618
  "name": "section-title",
746
619
  "type": {
747
- "text": "string | null | undefined"
620
+ "text": "string"
748
621
  },
749
622
  "description": "The title of the section",
750
623
  "fieldName": "sectionTitle"
751
- },
752
- {
753
- "name": "selected",
754
- "type": {
755
- "text": "boolean"
756
- },
757
- "fieldName": "__selected",
758
- "inheritedFrom": {
759
- "name": "DashboardItemMixin",
760
- "module": "src/vaadin-dashboard-item-mixin.js"
761
- }
762
624
  }
763
625
  ],
764
626
  "mixins": [
@@ -840,7 +702,7 @@
840
702
  "declarations": [
841
703
  {
842
704
  "kind": "class",
843
- "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
705
+ "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`button` | Set on all the buttons (move, resize and others)\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
844
706
  "name": "DashboardWidget",
845
707
  "members": [
846
708
  {
@@ -848,61 +710,17 @@
848
710
  "name": "widgetTitle",
849
711
  "privacy": "public",
850
712
  "type": {
851
- "text": "string | null | undefined"
713
+ "text": "string"
852
714
  },
853
715
  "description": "The title of the widget.",
854
716
  "attribute": "widget-title"
855
717
  }
856
718
  ],
857
719
  "attributes": [
858
- {
859
- "name": "focused",
860
- "type": {
861
- "text": "boolean"
862
- },
863
- "fieldName": "__focused",
864
- "inheritedFrom": {
865
- "name": "DashboardItemMixin",
866
- "module": "src/vaadin-dashboard-item-mixin.js"
867
- }
868
- },
869
- {
870
- "name": "move-mode",
871
- "type": {
872
- "text": "boolean"
873
- },
874
- "fieldName": "__moveMode",
875
- "inheritedFrom": {
876
- "name": "DashboardItemMixin",
877
- "module": "src/vaadin-dashboard-item-mixin.js"
878
- }
879
- },
880
- {
881
- "name": "resize-mode",
882
- "type": {
883
- "text": "boolean"
884
- },
885
- "fieldName": "__resizeMode",
886
- "inheritedFrom": {
887
- "name": "DashboardItemMixin",
888
- "module": "src/vaadin-dashboard-item-mixin.js"
889
- }
890
- },
891
- {
892
- "name": "selected",
893
- "type": {
894
- "text": "boolean"
895
- },
896
- "fieldName": "__selected",
897
- "inheritedFrom": {
898
- "name": "DashboardItemMixin",
899
- "module": "src/vaadin-dashboard-item-mixin.js"
900
- }
901
- },
902
720
  {
903
721
  "name": "widget-title",
904
722
  "type": {
905
- "text": "string | null | undefined"
723
+ "text": "string"
906
724
  },
907
725
  "description": "The title of the widget.",
908
726
  "fieldName": "widgetTitle"
@@ -1017,20 +835,12 @@
1017
835
  {
1018
836
  "kind": "field",
1019
837
  "name": "i18n",
1020
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n selectSection: 'Select section for editing',\n selectWidget: 'Select widget for editing',\n remove: 'Remove',\n resize: 'Resize',\n resizeApply: 'Apply',\n resizeShrinkWidth: 'Shrink width',\n resizeGrowWidth: 'Grow width',\n resizeShrinkHeight: 'Shrink height',\n resizeGrowHeight: 'Grow height',\n move: 'Move',\n moveApply: 'Apply',\n moveForward: 'Move Forward',\n moveBackward: 'Move Backward',\n}\n```",
1021
- "return": {
1022
- "type": {
1023
- "text": "!DashboardI18n"
1024
- }
838
+ "privacy": "public",
839
+ "type": {
840
+ "text": "Object"
1025
841
  },
1026
- "parameters": [
1027
- {
1028
- "name": "value",
1029
- "type": {
1030
- "text": "Object"
1031
- }
1032
- }
1033
- ],
842
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n selectSection: 'Select section for editing',\n selectWidget: 'Select widget for editing',\n remove: 'Remove',\n resize: 'Resize',\n resizeApply: 'Apply',\n resizeShrinkWidth: 'Shrink width',\n resizeGrowWidth: 'Grow width',\n resizeShrinkHeight: 'Shrink height',\n resizeGrowHeight: 'Grow height',\n move: 'Move',\n moveApply: 'Apply',\n moveForward: 'Move Forward',\n moveBackward: 'Move Backward',\n}\n```",
843
+ "attribute": "i18n",
1034
844
  "inheritedFrom": {
1035
845
  "name": "I18nMixin",
1036
846
  "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -1130,12 +940,6 @@
1130
940
  "name": "DashboardLayoutMixin",
1131
941
  "module": "src/vaadin-dashboard-layout-mixin.js"
1132
942
  }
1133
- },
1134
- {
1135
- "name": "eventName",
1136
- "type": {
1137
- "text": "CustomEvent"
1138
- }
1139
943
  }
1140
944
  ],
1141
945
  "attributes": [
@@ -1161,6 +965,11 @@
1161
965
  },
1162
966
  {
1163
967
  "name": "i18n",
968
+ "type": {
969
+ "text": "Object"
970
+ },
971
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
972
+ "fieldName": "i18n",
1164
973
  "inheritedFrom": {
1165
974
  "name": "I18nMixin",
1166
975
  "package": "@vaadin/component-base/src/i18n-mixin.js"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dashboard",
3
- "version": "25.1.0-beta1",
3
+ "version": "25.1.0-beta3",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,19 +37,19 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/a11y-base": "25.1.0-beta1",
41
- "@vaadin/button": "25.1.0-beta1",
42
- "@vaadin/component-base": "25.1.0-beta1",
43
- "@vaadin/vaadin-themable-mixin": "25.1.0-beta1",
40
+ "@vaadin/a11y-base": "25.1.0-beta3",
41
+ "@vaadin/button": "25.1.0-beta3",
42
+ "@vaadin/component-base": "25.1.0-beta3",
43
+ "@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@vaadin/aura": "25.1.0-beta1",
48
- "@vaadin/chai-plugins": "25.1.0-beta1",
49
- "@vaadin/test-runner-commands": "25.1.0-beta1",
47
+ "@vaadin/aura": "25.1.0-beta3",
48
+ "@vaadin/chai-plugins": "25.1.0-beta3",
49
+ "@vaadin/test-runner-commands": "25.1.0-beta3",
50
50
  "@vaadin/testing-helpers": "^2.0.0",
51
- "@vaadin/vaadin-lumo-styles": "25.1.0-beta1",
52
- "sinon": "^21.0.0"
51
+ "@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
52
+ "sinon": "^21.0.2"
53
53
  },
54
54
  "cvdlName": "vaadin-dashboard",
55
55
  "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
57
57
  "web-types.json",
58
58
  "web-types.lit.json"
59
59
  ],
60
- "gitHead": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
60
+ "gitHead": "4251850231a42298fda23b83928da588831cdb5d"
61
61
  }
package/src/vaadin-dashboard-item-mixin.js CHANGED
@@ -97,7 +97,7 @@ export const DashboardItemMixin = (superClass) =>
97
97
  id="drag-handle"
98
98
  draggable="true"
99
99
  class="drag-handle"
100
- part="move-button"
100
+ part="button move-button"
101
101
  theme="icon tertiary"
102
102
  aria-label="${this.__i18n.move}"
103
103
  title="${this.__i18n.move}"
@@ -114,7 +114,7 @@ export const DashboardItemMixin = (superClass) =>
114
114
  aria-label="${this.__i18n.remove}"
115
115
  title="${this.__i18n.remove}"
116
116
  id="remove-button"
117
- part="remove-button"
117
+ part="button remove-button"
118
118
  theme="icon tertiary"
119
119
  tabindex="${this.__selected ? 0 : -1}"
120
120
  @click="${() => fireRemove(this)}"
@@ -156,7 +156,7 @@ export const DashboardItemMixin = (superClass) =>
156
156
  aria-label="${this.__i18n.resize}"
157
157
  title="${this.__i18n.resize}"
158
158
  id="resize-handle"
159
- part="resize-button"
159
+ part="button resize-button"
160
160
  class="resize-handle"
161
161
  theme="icon tertiary"
162
162
  tabindex="${this.__selected ? 0 : -1}"
@@ -180,7 +180,7 @@ export const DashboardItemMixin = (superClass) =>
180
180
  title="${this.__i18n.moveBackward}"
181
181
  @click="${() => fireMove(this, -1)}"
182
182
  id="move-backward"
183
- part="move-backward-button"
183
+ part="button move-backward-button"
184
184
  >
185
185
  <div class="icon"></div>
186
186
  </vaadin-dashboard-button>
@@ -190,7 +190,7 @@ export const DashboardItemMixin = (superClass) =>
190
190
  title="${this.__i18n.moveApply}"
191
191
  @click="${() => this.__exitMode(true)}"
192
192
  id="move-apply"
193
- part="move-apply-button"
193
+ part="button move-apply-button"
194
194
  >
195
195
  <div class="icon"></div>
196
196
  </vaadin-dashboard-button>
@@ -200,7 +200,7 @@ export const DashboardItemMixin = (superClass) =>
200
200
  title="${this.__i18n.moveForward}"
201
201
  @click="${() => fireMove(this, 1)}"
202
202
  id="move-forward"
203
- part="move-forward-button"
203
+ part="button move-forward-button"
204
204
  >
205
205
  <div class="icon"></div>
206
206
  </vaadin-dashboard-button>
@@ -233,7 +233,7 @@ export const DashboardItemMixin = (superClass) =>
233
233
  title="${this.__i18n.resizeApply}"
234
234
  @click="${() => this.__exitMode(true)}"
235
235
  id="resize-apply"
236
- part="resize-apply-button"
236
+ part="button resize-apply-button"
237
237
  >
238
238
  <div class="icon"></div>
239
239
  </vaadin-dashboard-button>
@@ -244,7 +244,7 @@ export const DashboardItemMixin = (superClass) =>
244
244
  @click="${() => fireResize(this, -1, 0)}"
245
245
  .hidden="${!canShrinkWidth}"
246
246
  id="resize-shrink-width"
247
- part="resize-shrink-width-button"
247
+ part="button resize-shrink-width-button"
248
248
  >
249
249
  <div class="icon"></div>
250
250
  </vaadin-dashboard-button>
@@ -255,7 +255,7 @@ export const DashboardItemMixin = (superClass) =>
255
255
  @click="${() => fireResize(this, 1, 0)}"
256
256
  .hidden="${!canGrowWidth}"
257
257
  id="resize-grow-width"
258
- part="resize-grow-width-button"
258
+ part="button resize-grow-width-button"
259
259
  >
260
260
  <div class="icon"></div>
261
261
  </vaadin-dashboard-button>
@@ -265,7 +265,7 @@ export const DashboardItemMixin = (superClass) =>
265
265
  title="${this.__i18n.resizeShrinkHeight}"
266
266
  @click="${() => fireResize(this, 0, -1)}"
267
267
  id="resize-shrink-height"
268
- part="resize-shrink-height-button"
268
+ part="button resize-shrink-height-button"
269
269
  .hidden="${!hasMinRowHeight || !canShrinkHeight}"
270
270
  >
271
271
  <div class="icon"></div>
@@ -276,7 +276,7 @@ export const DashboardItemMixin = (superClass) =>
276
276
  title="${this.__i18n.resizeGrowHeight}"
277
277
  @click="${() => fireResize(this, 0, 1)}"
278
278
  id="resize-grow-height"
279
- part="resize-grow-height-button"
279
+ part="button resize-grow-height-button"
280
280
  .hidden="${!hasMinRowHeight}"
281
281
  >
282
282
  <div class="icon"></div>
package/src/vaadin-dashboard-layout-mixin.js CHANGED
@@ -24,7 +24,6 @@ export const DashboardLayoutMixin = (superClass) =>
24
24
  * Whether the dashboard layout is dense.
25
25
  *
26
26
  * @attr {boolean} dense-layout
27
- * @type {boolean}
28
27
  */
29
28
  denseLayout: {
30
29
  type: Boolean,
package/src/vaadin-dashboard-section.d.ts CHANGED
@@ -39,6 +39,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
39
39
  * -----------------------|-------------
40
40
  * `header` | The header of the section
41
41
  * `title` | The title of the section
42
+ * `button` | Set on all the buttons (move, remove and others)
42
43
  * `move-button` | The move button
43
44
  * `remove-button` | The remove button
44
45
  * `move-backward-button` | The move backward button when in move mode
package/src/vaadin-dashboard-section.js CHANGED
@@ -45,6 +45,7 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
45
45
  * -----------------------|-------------
46
46
  * `header` | The header of the section
47
47
  * `title` | The title of the section
48
+ * `button` | Set on all the buttons (move, remove and others)
48
49
  * `move-button` | The move button
49
50
  * `remove-button` | The remove button
50
51
  * `move-backward-button` | The move backward button when in move mode
@@ -117,7 +118,6 @@ class DashboardSection extends DashboardItemMixin(
117
118
  * The title of the section
118
119
  *
119
120
  * @attr {string} section-title
120
- * @type {string | null | undefined}
121
121
  */
122
122
  sectionTitle: {
123
123
  type: String,
package/src/vaadin-dashboard-widget.d.ts CHANGED
@@ -48,6 +48,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
48
48
  * `header` | The header of the widget
49
49
  * `title` | The title of the widget
50
50
  * `content` | The content of the widget
51
+ * `button` | Set on all the buttons (move, resize and others)
51
52
  * `move-button` | The move button
52
53
  * `remove-button` | The remove button
53
54
  * `resize-button` | The resize button
package/src/vaadin-dashboard-widget.js CHANGED
@@ -56,6 +56,7 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
56
56
  * `header` | The header of the widget
57
57
  * `title` | The title of the widget
58
58
  * `content` | The content of the widget
59
+ * `button` | Set on all the buttons (move, resize and others)
59
60
  * `move-button` | The move button
60
61
  * `remove-button` | The remove button
61
62
  * `resize-button` | The resize button
@@ -157,7 +158,6 @@ class DashboardWidget extends DashboardItemMixin(
157
158
  * The title of the widget.
158
159
  *
159
160
  * @attr {string} widget-title
160
- * @type {string | null | undefined}
161
161
  */
162
162
  widgetTitle: {
163
163
  type: String,
package/src/vaadin-dashboard.d.ts CHANGED
@@ -227,6 +227,7 @@ export interface DashboardI18n {
227
227
  *
228
228
  * @fires {CustomEvent} dashboard-item-moved - Fired when an item was moved
229
229
  * @fires {CustomEvent} dashboard-item-resized - Fired when an item was resized
230
+ * @fires {CustomEvent} dashboard-item-before-remove - Fired before an item is removed. Calling preventDefault() on the event will cancel the removal.
230
231
  * @fires {CustomEvent} dashboard-item-removed - Fired when an item was removed
231
232
  * @fires {CustomEvent} dashboard-item-selected-changed - Fired when an item selected state changed
232
233
  * @fires {CustomEvent} dashboard-item-move-mode-changed - Fired when an item move mode changed
package/src/vaadin-dashboard.js CHANGED
@@ -196,7 +196,7 @@ class Dashboard extends DashboardLayoutMixin(
196
196
  * moveBackward: 'Move Backward',
197
197
  * }
198
198
  * ```
199
- * @return {!DashboardI18n}
199
+ * @type {!DashboardI18n}
200
200
  */
201
201
  get i18n() {
202
202
  return super.i18n;
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/dashboard",
4
- "version": "25.1.0-beta1",
4
+ "version": "25.1.0-beta3",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -15,7 +15,9 @@
15
15
  "description": "Whether the dashboard layout is dense.",
16
16
  "value": {
17
17
  "type": [
18
- "boolean"
18
+ "boolean",
19
+ "null",
20
+ "undefined"
19
21
  ]
20
22
  }
21
23
  },
@@ -49,7 +51,9 @@
49
51
  "description": "Whether the dashboard layout is dense.",
50
52
  "value": {
51
53
  "type": [
52
- "boolean"
54
+ "boolean",
55
+ "null",
56
+ "undefined"
53
57
  ]
54
58
  }
55
59
  },
@@ -70,7 +74,7 @@
70
74
  },
71
75
  {
72
76
  "name": "vaadin-dashboard-section",
73
- "description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|-------------\n`header` | The header of the section\n`title` | The title of the section\n`move-button` | The move button\n`remove-button` | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
77
+ "description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|-------------\n`header` | The header of the section\n`title` | The title of the section\n`button` | Set on all the buttons (move, remove and others)\n`move-button` | The move button\n`remove-button` | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
74
78
  "attributes": [
75
79
  {
76
80
  "name": "section-title",
@@ -114,7 +118,7 @@
114
118
  },
115
119
  {
116
120
  "name": "vaadin-dashboard-widget",
117
- "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
121
+ "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`button` | Set on all the buttons (move, resize and others)\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
118
122
  "attributes": [
119
123
  {
120
124
  "name": "theme",
@@ -158,14 +162,16 @@
158
162
  },
159
163
  {
160
164
  "name": "vaadin-dashboard",
161
- "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
165
+ "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
162
166
  "attributes": [
163
167
  {
164
168
  "name": "dense-layout",
165
169
  "description": "Whether the dashboard layout is dense.",
166
170
  "value": {
167
171
  "type": [
168
- "boolean"
172
+ "boolean",
173
+ "null",
174
+ "undefined"
169
175
  ]
170
176
  }
171
177
  },
@@ -180,6 +186,17 @@
180
186
  ]
181
187
  }
182
188
  },
189
+ {
190
+ "name": "i18n",
191
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
192
+ "value": {
193
+ "type": [
194
+ "Object",
195
+ "null",
196
+ "undefined"
197
+ ]
198
+ }
199
+ },
183
200
  {
184
201
  "name": "root-heading-level",
185
202
  "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
@@ -210,7 +227,9 @@
210
227
  "description": "Whether the dashboard layout is dense.",
211
228
  "value": {
212
229
  "type": [
213
- "boolean"
230
+ "boolean",
231
+ "null",
232
+ "undefined"
214
233
  ]
215
234
  }
216
235
  },
@@ -230,7 +249,7 @@
230
249
  "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n selectSection: 'Select section for editing',\n selectWidget: 'Select widget for editing',\n remove: 'Remove',\n resize: 'Resize',\n resizeApply: 'Apply',\n resizeShrinkWidth: 'Shrink width',\n resizeGrowWidth: 'Grow width',\n resizeShrinkHeight: 'Shrink height',\n resizeGrowHeight: 'Grow height',\n move: 'Move',\n moveApply: 'Apply',\n moveForward: 'Move Forward',\n moveBackward: 'Move Backward',\n}\n```",
231
250
  "value": {
232
251
  "type": [
233
- "DashboardI18n"
252
+ "?"
234
253
  ]
235
254
  }
236
255
  },
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/dashboard",
4
- "version": "25.1.0-beta1",
4
+ "version": "25.1.0-beta3",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -37,7 +37,7 @@
37
37
  },
38
38
  {
39
39
  "name": "vaadin-dashboard-section",
40
- "description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|-------------\n`header` | The header of the section\n`title` | The title of the section\n`move-button` | The move button\n`remove-button` | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
40
+ "description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|-------------\n`header` | The header of the section\n`title` | The title of the section\n`button` | Set on all the buttons (move, remove and others)\n`move-button` | The move button\n`remove-button` | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
41
41
  "extension": true,
42
42
  "attributes": [
43
43
  {
@@ -51,7 +51,7 @@
51
51
  },
52
52
  {
53
53
  "name": "vaadin-dashboard-widget",
54
- "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
54
+ "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`button` | Set on all the buttons (move, resize and others)\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
55
55
  "extension": true,
56
56
  "attributes": [
57
57
  {
@@ -65,7 +65,7 @@
65
65
  },
66
66
  {
67
67
  "name": "vaadin-dashboard",
68
- "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
68
+ "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
69
69
  "extension": true,
70
70
  "attributes": [
71
71
  {