@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

package/dist/collection/components/shell-panel/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -109,12 +109,11 @@
 .separator {
   pointer-events: auto;
   position: absolute;
-  bottom: 0px;
-  top: 0px;
+  inset-block: 0px;
   z-index: 10;
   display: flex;
-  height: 100%;
-  width: 0.125rem;
+  block-size: 100%;
+  inline-size: 0.125rem;
   background-color: transparent;
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
@@ -140,11 +139,11 @@
 
 ::slotted(calcite-panel), 
 ::slotted(calcite-flow) {
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   flex: 1 1 auto;
-  max-height: unset;
-  max-width: unset;
+  max-block-size: unset;
+  max-inline-size: unset;
 }
 
 ::slotted(.calcite-match-height) {
@@ -162,10 +161,10 @@
   align-self: stretch;
   background-color: var(--calcite-ui-background);
   padding: 0px;
-  width: var(--calcite-shell-panel-width);
-  max-width: var(--calcite-shell-panel-max-width);
-  min-width: var(--calcite-shell-panel-min-width);
-  transition: max-height var(--calcite-animation-timing), max-width var(--calcite-animation-timing);
+  inline-size: var(--calcite-shell-panel-width);
+  max-inline-size: var(--calcite-shell-panel-max-width);
+  min-inline-size: var(--calcite-shell-panel-min-width);
+  transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);
 }
 
 .content__header {
@@ -214,21 +213,19 @@
 }
 
 .content--detached {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: auto;
-  height: auto;
+  margin-inline: 0.5rem;
+  margin-block: 0.5rem auto;
+  block-size: auto;
   overflow: hidden;
   border-radius: 0.25rem;
   --tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
   --tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  max-height: var(--calcite-shell-panel-detached-max-height);
+  max-block-size: var(--calcite-shell-panel-detached-max-height);
 }
 .content--detached ::slotted(calcite-panel),
 .content--detached ::slotted(calcite-flow) {
-  max-height: unset;
+  max-block-size: unset;
 }
 
 :host([position=start]) .content--detached ::slotted(calcite-panel), 

package/dist/collection/components/shell-panel/shell-panel.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -393,8 +393,8 @@ export class ShellPanel {
         "text": "Emitted when collapse has been toggled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/slider/slider.css

@@ -72,13 +72,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]){
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 .scale--s {
   --calcite-slider-handle-size: 10px;
   --calcite-slider-handle-extension-height: 6.5px;
@@ -125,20 +133,15 @@
   display: block;
   overflow-wrap: normal;
   word-break: normal;
-  padding: calc(var(--calcite-slider-handle-size) * 0.5);
-  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
+  padding-inline: calc(var(--calcite-slider-handle-size) * 0.5);
+  padding-block: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin-block: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin-inline: 0;
   --calcite-slider-full-handle-height: calc(
     var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
   );
 }
 
-:host([disabled]){
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) .track__range,
 :host([disabled]) .tick--active {
   background-color: var(--calcite-ui-text-3);
@@ -167,7 +170,7 @@
 
 .thumb-container{
   position: relative;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .thumb {
@@ -188,14 +191,13 @@
 }
 .thumb .handle__label.static,  .thumb .handle__label.transformed{
   position: absolute;
-  top: 0px;
-  bottom: 0px;
+  inset-block: 0px;
   opacity: 0;
 }
 .thumb .handle__label.hyphen::after {
   content: "—";
   display: inline-block;
-  width: 1em;
+  inline-size: 1em;
 }
 .thumb .handle__label.hyphen--wrap {
   display: flex;
@@ -205,14 +207,14 @@
   border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
   outline-color: transparent;
-  height: var(--calcite-slider-handle-size);
-  width: var(--calcite-slider-handle-size);
+  block-size: var(--calcite-slider-handle-size);
+  inline-size: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
   transition: border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;
 }
 .thumb .handle-extension{
-  width: 0.125rem;
-  height: var(--calcite-slider-handle-extension-height);
+  inline-size: 0.125rem;
+  block-size: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
 .thumb:hover .handle {
@@ -250,12 +252,12 @@
 
 :host([has-histogram][label-handles]) .handle__label,
 :host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label {
-  margin-top: 0.5em;
+  margin-block-start: 0.5em;
 }
 
 :host(:not([has-histogram]):not([precise])) .handle__label,
 :host([label-handles]:not([has-histogram])) .thumb--value .handle__label {
-  margin-bottom: 0.5em;
+  margin-block-end: 0.5em;
 }
 
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
@@ -282,7 +284,7 @@
 
 .track{
   position: relative;
-  height: 0.125rem;
+  block-size: 0.125rem;
   border-radius: 0px;
   background-color: var(--calcite-ui-border-2);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in;
@@ -290,8 +292,8 @@
 
 .track__range{
   position: absolute;
-  top: 0px;
-  height: 0.125rem;
+  inset-block-start: 0px;
+  block-size: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
 
@@ -300,10 +302,10 @@
 }
 .container--range .track__range:after{
   position: absolute;
-  width: 100%;
+  inline-size: 100%;
   content: "";
-  top: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
-  height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
+  inset-block-start: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
+  block-size: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
 @media (forced-colors: active) {
@@ -335,13 +337,13 @@
 }
 .tick{
   position: absolute;
-  height: 0.25rem;
-  width: 0.125rem;
+  block-size: 0.25rem;
+  inline-size: 0.125rem;
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-border-input);
   border-color: var(--calcite-ui-foreground-1);
-  top: -2px;
+  inset-block-start: -2px;
   pointer-events: none;
   margin-inline-start: calc(-1 * 0.125rem);
 }
@@ -352,7 +354,7 @@
 
 .tick__label{
   pointer-events: none;
-  margin-top: 0.875rem;
+  margin-block-start: 0.875rem;
   display: flex;
   justify-content: center;
 }
@@ -375,49 +377,46 @@
 
 .graph {
   color: var(--calcite-ui-foreground-3);
-  height: 48px;
+  block-size: 48px;
 }
 
 :host([label-ticks][ticks]) .container {
-  padding-bottom: calc(0.875rem + var(--calcite-slider-container-font-size));
+  padding-block-end: calc(0.875rem + var(--calcite-slider-container-font-size));
 }
 
 :host([has-histogram]):host([precise][label-handles]) .container {
-  padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
+  padding-block-end: calc(var(--calcite-slider-full-handle-height) + 1em);
 }
 :host([has-histogram]):host([label-handles]:not([precise])) .container {
-  padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
+  padding-block-end: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
 }
 :host([has-histogram]):host([precise]:not([label-handles])) .container {
-  padding-bottom: var(--calcite-slider-full-handle-height);
+  padding-block-end: var(--calcite-slider-full-handle-height);
 }
 
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
-  padding-top: var(--calcite-slider-full-handle-height);
+  padding-block-start: var(--calcite-slider-full-handle-height);
 }
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
-  padding-bottom: var(--calcite-slider-full-handle-height);
+  padding-block-end: var(--calcite-slider-full-handle-height);
 }
 :host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
-  padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
+  padding-block-start: calc(var(--calcite-slider-full-handle-height) + 4px);
 }
 :host(:not([has-histogram])):host([label-handles][precise]) .container {
-  padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
+  padding-block-start: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 :host(:not([has-histogram])):host([label-handles][precise]) .container--range {
-  padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
+  padding-block-end: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
 ::slotted(input[slot=hidden-form-input]) {
-  bottom: 0 !important;
-  left: 0 !important;
   margin: 0 !important;
   opacity: 0 !important;
   outline: none !important;
   padding: 0 !important;
   position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
+  inset: 0 !important;
   transform: none !important;
   -webkit-appearance: none !important;
   z-index: -1 !important;

package/dist/collection/components/slider/slider.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -1247,8 +1247,8 @@ export class Slider {
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -1262,8 +1262,8 @@ export class Slider {
         "text": "Fires on when the thumb is released on slider\nIf you need to constantly listen to the drag event,\nplease use calciteSliderInput instead"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -1280,8 +1280,8 @@ export class Slider {
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/sortable-list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.css

@@ -71,17 +71,13 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host {
-  display: flex;
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -89,6 +85,11 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: flex;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */

package/dist/collection/components/sortable-list/sortable-list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";
@@ -291,8 +291,8 @@ export class SortableList {
         "text": "Emitted when the order of the list has changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/split-button/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.css

@@ -71,13 +71,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 :host {
   display: inline-block;
 }
@@ -87,7 +95,7 @@
   align-items: stretch;
 }
 :host .split-button__container > calcite-dropdown > calcite-button {
-  height: 100%;
+  block-size: 100%;
   vertical-align: top;
 }
 
@@ -148,37 +156,35 @@
 }
 
 .width-auto {
-  width: auto;
+  inline-size: auto;
 }
 
 .width-half {
-  width: 50%;
+  inline-size: 50%;
 }
 
 .width-full {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .split-button__divider-container {
   display: flex;
-  width: 1px;
+  inline-size: 1px;
   align-items: stretch;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   background-color: var(--calcite-split-button-background);
 }
 
 .split-button__divider {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+  margin-block: 0.25rem;
   display: inline-block;
-  width: 1px;
+  inline-size: 1px;
   background-color: var(--calcite-split-button-divider);
 }
 
 :host([appearance=outline]) .split-button__divider-container,
 :host([appearance=clear]) .split-button__divider-container {
-  border-top: 1px solid var(--calcite-split-button-divider);
-  border-bottom: 1px solid var(--calcite-split-button-divider);
+  border-block: 1px solid var(--calcite-split-button-divider);
 }
 :host([appearance=outline]):hover .split-button__divider-container,
 :host([appearance=clear]):hover .split-button__divider-container {
@@ -203,13 +209,6 @@
   background-color: var(--calcite-split-button-divider);
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) .split-button__divider-container {
   opacity: var(--calcite-ui-opacity-disabled);
 }

package/dist/collection/components/split-button/split-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";
@@ -36,8 +36,8 @@ export class SplitButton {
     this.scale = "m";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
-    this.calciteSplitButtonPrimaryClickHandler = (e) => this.calciteSplitButtonPrimaryClick.emit(e);
-    this.calciteSplitButtonSecondaryClickHandler = (e) => this.calciteSplitButtonSecondaryClick.emit(e);
+    this.calciteSplitButtonPrimaryClickHandler = (event) => this.calciteSplitButtonPrimaryClick.emit(event);
+    this.calciteSplitButtonSecondaryClickHandler = (event) => this.calciteSplitButtonSecondaryClick.emit(event);
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -69,7 +69,7 @@ export class SplitButton {
       h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText),
       h("div", { class: CSS.dividerContainer },
         h("div", { class: CSS.divider })),
-      h("calcite-dropdown", { active: this.active, disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-trailing", scale: this.scale, width: this.scale },
+      h("calcite-dropdown", { active: this.active, disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, width: this.scale },
         h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary", type: "button" }),
         h("slot", null))));
   }
@@ -243,7 +243,7 @@ export class SplitButton {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -402,12 +402,17 @@ export class SplitButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fired when the primary button is clicked"
+        "text": "fired when the primary button is clicked\n\n**Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click."
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteSplitButtonSecondaryClick",
@@ -417,12 +422,17 @@ export class SplitButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fired when the secondary button is clicked"
+        "text": "fired when the secondary button is clicked\n\n**Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click."
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }]; }
   static get elementRef() { return "el"; }

package/dist/collection/components/stepper/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export {};

package/dist/collection/components/stepper/stepper.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -81,8 +81,8 @@
 :host {
   position: relative;
   display: flex;
-  width: 100%;
-  min-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 100%;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
@@ -94,10 +94,7 @@
   flex-direction: column;
 }
 
-:host ::slotted(.calcite-stepper-content) {
-  display: flex;
-  width: 100%;
-  min-width: 100%;
-  flex-direction: column;
-  flex-wrap: wrap;
+:host([layout=horizontal]) {
+  display: grid;
+  grid-template-areas: "items" "content";
 }