@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

package/dist/types/components.d.ts

@@ -671,6 +671,118 @@ export namespace Components {
          */
         "subheading": string;
     }
+    interface NvDrawer {
+        /**
+          * Controls whether the drawer should automatically focus the first focusable element when opened. When disabled, prevents unwanted tooltip triggers on drawer open.
+          * @default false
+         */
+        "autofocus": boolean;
+        /**
+          * If true, the drawer will be closed when the backdrop is clicked.
+          * @default false
+         */
+        "clickOutside": boolean;
+        /**
+          * Call this method to hide the drawer, making it disappear from view.
+         */
+        "close": () => Promise<void>;
+        /**
+          * If true, the drawer visibility is managed manually through methods or the open prop.
+          * @default false
+         */
+        "controlled": boolean;
+        /**
+          * Use this prop to toggle the visibility of the drawer. Set to true to show the drawer and false to hide it.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Call this method to show the drawer, making it visible on the screen.
+         */
+        "show": () => Promise<void>;
+        /**
+          * Side from which the drawer appears.
+          * @default 'right'
+         */
+        "side": 'left' | 'right';
+        /**
+          * Size of the drawer. Defaults to 'md'. - 'sm': Small drawer (~320px) - 'md': Medium drawer (~400px) - 'lg': Large drawer (~600px) - 'full': Full width drawer (100vw on mobile, ~800px on desktop)
+          * @default 'md'
+         */
+        "size": 'sm' | 'md' | 'lg' | 'full';
+        /**
+          * Enables swipe gesture to open/close the drawer on touch devices. - Swipe from the edge (left for left drawer, right for right drawer) to open - Swipe towards the edge from inside the drawer to close
+          * @default false
+         */
+        "swipeToOpen": boolean;
+        /**
+          * If true, the drawer cannot be closed by the user.
+          * @default false
+         */
+        "undismissable": boolean;
+        /**
+          * Width of the drawer. If specified, this will override the size prop. Defaults to the width corresponding to the size prop (400px for 'md').
+         */
+        "width"?: string;
+    }
+    interface NvDrawerfooter {
+        /**
+          * Sets the label for the cancel button.
+          * @default 'Cancel'
+         */
+        "cancelLabel": string | null;
+        /**
+          * Sets the danger state for the primary button.
+          * @default false
+         */
+        "danger": boolean;
+        /**
+          * Disables the primary button, preventing user interaction.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * A form inside the drawer can be submitted through the drawer footer by giving the form an id and passing that id to the form attribute.
+          * @default null
+         */
+        "form"?: string | null;
+        /**
+          * Sets the leading icon for the primary button.
+          * @default null
+         */
+        "leadingIcon"?: string | null;
+        /**
+          * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
+         */
+        "primaryButtonType": `${ButtonType}`;
+        /**
+          * Sets the label for the primary button.
+          * @default 'Primary'
+         */
+        "primaryLabel": string | null;
+        /**
+          * Sets the trailing icon for the primary button.
+          * @default null
+         */
+        "trailingIcon"?: string | null;
+        /**
+          * Controls the visibility of the cancel button. When true, the cancel button is hidden.
+          * @default false
+         */
+        "undismissable": boolean;
+    }
+    interface NvDrawerheader {
+        /**
+          * Sets the heading text for the drawer.
+          * @default 'Drawer Title'
+         */
+        "heading": string | null;
+        /**
+          * Sets the subheading text for the drawer.
+          * @default null
+         */
+        "subheading"?: string | null;
+    }
     interface NvFieldcheckbox {
         /**
           * Marks the checkbox as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic.
@@ -2783,7 +2895,7 @@ export namespace Components {
         "active": boolean;
     }
     /**
-     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
+     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.
      */
     interface NvSplit {
         /**
@@ -3022,6 +3134,14 @@ export interface NvDialogfooterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvDialogfooterElement;
 }
+export interface NvDrawerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvDrawerElement;
+}
+export interface NvDrawerfooterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvDrawerfooterElement;
+}
 export interface NvFieldcheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvFieldcheckboxElement;
@@ -3368,6 +3488,47 @@ declare global {
         prototype: HTMLNvDialogheaderElement;
         new (): HTMLNvDialogheaderElement;
     };
+    interface HTMLNvDrawerElementEventMap {
+        "openChanged": boolean;
+    }
+    interface HTMLNvDrawerElement extends Components.NvDrawer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvDrawerElementEventMap>(type: K, listener: (this: HTMLNvDrawerElement, ev: NvDrawerCustomEvent<HTMLNvDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvDrawerElementEventMap>(type: K, listener: (this: HTMLNvDrawerElement, ev: NvDrawerCustomEvent<HTMLNvDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvDrawerElement: {
+        prototype: HTMLNvDrawerElement;
+        new (): HTMLNvDrawerElement;
+    };
+    interface HTMLNvDrawerfooterElementEventMap {
+        "drawerCanceled": void;
+        "drawerPrimaryClicked": void;
+    }
+    interface HTMLNvDrawerfooterElement extends Components.NvDrawerfooter, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvDrawerfooterElementEventMap>(type: K, listener: (this: HTMLNvDrawerfooterElement, ev: NvDrawerfooterCustomEvent<HTMLNvDrawerfooterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvDrawerfooterElementEventMap>(type: K, listener: (this: HTMLNvDrawerfooterElement, ev: NvDrawerfooterCustomEvent<HTMLNvDrawerfooterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvDrawerfooterElement: {
+        prototype: HTMLNvDrawerfooterElement;
+        new (): HTMLNvDrawerfooterElement;
+    };
+    interface HTMLNvDrawerheaderElement extends Components.NvDrawerheader, HTMLStencilElement {
+    }
+    var HTMLNvDrawerheaderElement: {
+        prototype: HTMLNvDrawerheaderElement;
+        new (): HTMLNvDrawerheaderElement;
+    };
     interface HTMLNvFieldcheckboxElementEventMap {
         "checkedChanged": boolean;
     }
@@ -3880,7 +4041,7 @@ declare global {
         "sizesChanged": number[];
     }
     /**
-     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
+     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.
      */
     interface HTMLNvSplitElement extends Components.NvSplit, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvSplitElementEventMap>(type: K, listener: (this: HTMLNvSplitElement, ev: NvSplitCustomEvent<HTMLNvSplitElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4018,6 +4179,9 @@ declare global {
         "nv-dialog": HTMLNvDialogElement;
         "nv-dialogfooter": HTMLNvDialogfooterElement;
         "nv-dialogheader": HTMLNvDialogheaderElement;
+        "nv-drawer": HTMLNvDrawerElement;
+        "nv-drawerfooter": HTMLNvDrawerfooterElement;
+        "nv-drawerheader": HTMLNvDrawerheaderElement;
         "nv-fieldcheckbox": HTMLNvFieldcheckboxElement;
         "nv-fielddate": HTMLNvFielddateElement;
         "nv-fielddaterange": HTMLNvFielddaterangeElement;
@@ -4801,6 +4965,123 @@ declare namespace LocalJSX {
          */
         "subheading"?: string;
     }
+    interface NvDrawer {
+        /**
+          * Controls whether the drawer should automatically focus the first focusable element when opened. When disabled, prevents unwanted tooltip triggers on drawer open.
+          * @default false
+         */
+        "autofocus"?: boolean;
+        /**
+          * If true, the drawer will be closed when the backdrop is clicked.
+          * @default false
+         */
+        "clickOutside"?: boolean;
+        /**
+          * If true, the drawer visibility is managed manually through methods or the open prop.
+          * @default false
+         */
+        "controlled"?: boolean;
+        /**
+          * Emitted when the drawer is closing in order to allow for cleanup, data-capture, etc.
+          * @bind open
+         */
+        "onOpenChanged"?: (event: NvDrawerCustomEvent<boolean>) => void;
+        /**
+          * Use this prop to toggle the visibility of the drawer. Set to true to show the drawer and false to hide it.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Side from which the drawer appears.
+          * @default 'right'
+         */
+        "side"?: 'left' | 'right';
+        /**
+          * Size of the drawer. Defaults to 'md'. - 'sm': Small drawer (~320px) - 'md': Medium drawer (~400px) - 'lg': Large drawer (~600px) - 'full': Full width drawer (100vw on mobile, ~800px on desktop)
+          * @default 'md'
+         */
+        "size"?: 'sm' | 'md' | 'lg' | 'full';
+        /**
+          * Enables swipe gesture to open/close the drawer on touch devices. - Swipe from the edge (left for left drawer, right for right drawer) to open - Swipe towards the edge from inside the drawer to close
+          * @default false
+         */
+        "swipeToOpen"?: boolean;
+        /**
+          * If true, the drawer cannot be closed by the user.
+          * @default false
+         */
+        "undismissable"?: boolean;
+        /**
+          * Width of the drawer. If specified, this will override the size prop. Defaults to the width corresponding to the size prop (400px for 'md').
+         */
+        "width"?: string;
+    }
+    interface NvDrawerfooter {
+        /**
+          * Sets the label for the cancel button.
+          * @default 'Cancel'
+         */
+        "cancelLabel"?: string | null;
+        /**
+          * Sets the danger state for the primary button.
+          * @default false
+         */
+        "danger"?: boolean;
+        /**
+          * Disables the primary button, preventing user interaction.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * A form inside the drawer can be submitted through the drawer footer by giving the form an id and passing that id to the form attribute.
+          * @default null
+         */
+        "form"?: string | null;
+        /**
+          * Sets the leading icon for the primary button.
+          * @default null
+         */
+        "leadingIcon"?: string | null;
+        /**
+          * Emitted when the cancel button is clicked. This will close the drawer.
+         */
+        "onDrawerCanceled"?: (event: NvDrawerfooterCustomEvent<void>) => void;
+        /**
+          * Emitted when the primary button is clicked. This allows to handle the primary action and potential data capture before closing the drawer.
+         */
+        "onDrawerPrimaryClicked"?: (event: NvDrawerfooterCustomEvent<void>) => void;
+        /**
+          * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
+         */
+        "primaryButtonType"?: `${ButtonType}`;
+        /**
+          * Sets the label for the primary button.
+          * @default 'Primary'
+         */
+        "primaryLabel"?: string | null;
+        /**
+          * Sets the trailing icon for the primary button.
+          * @default null
+         */
+        "trailingIcon"?: string | null;
+        /**
+          * Controls the visibility of the cancel button. When true, the cancel button is hidden.
+          * @default false
+         */
+        "undismissable"?: boolean;
+    }
+    interface NvDrawerheader {
+        /**
+          * Sets the heading text for the drawer.
+          * @default 'Drawer Title'
+         */
+        "heading"?: string | null;
+        /**
+          * Sets the subheading text for the drawer.
+          * @default null
+         */
+        "subheading"?: string | null;
+    }
     interface NvFieldcheckbox {
         /**
           * Marks the checkbox as required for accessibility purposes without triggering native HTML validation. Use this when implementing custom validation logic.
@@ -6987,7 +7268,7 @@ declare namespace LocalJSX {
         "active"?: boolean;
     }
     /**
-     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
+     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.
      */
     interface NvSplit {
         /**
@@ -7005,7 +7286,7 @@ declare namespace LocalJSX {
          */
         "minSizes"?: number[];
         /**
-          * Emitted when pane sizes are updated (either via dragging or programmatically).
+          * Emitted when pane sizes are updated (drag start/stop or programmatically).
           * @bind sizes
          */
         "onSizesChanged"?: (event: NvSplitCustomEvent<number[]>) => void;
@@ -7219,6 +7500,9 @@ declare namespace LocalJSX {
         "nv-dialog": NvDialog;
         "nv-dialogfooter": NvDialogfooter;
         "nv-dialogheader": NvDialogheader;
+        "nv-drawer": NvDrawer;
+        "nv-drawerfooter": NvDrawerfooter;
+        "nv-drawerheader": NvDrawerheader;
         "nv-fieldcheckbox": NvFieldcheckbox;
         "nv-fielddate": NvFielddate;
         "nv-fielddaterange": NvFielddaterange;
@@ -7290,6 +7574,9 @@ declare module "@stencil/core" {
             "nv-dialog": LocalJSX.NvDialog & JSXBase.HTMLAttributes<HTMLNvDialogElement>;
             "nv-dialogfooter": LocalJSX.NvDialogfooter & JSXBase.HTMLAttributes<HTMLNvDialogfooterElement>;
             "nv-dialogheader": LocalJSX.NvDialogheader & JSXBase.HTMLAttributes<HTMLNvDialogheaderElement>;
+            "nv-drawer": LocalJSX.NvDrawer & JSXBase.HTMLAttributes<HTMLNvDrawerElement>;
+            "nv-drawerfooter": LocalJSX.NvDrawerfooter & JSXBase.HTMLAttributes<HTMLNvDrawerfooterElement>;
+            "nv-drawerheader": LocalJSX.NvDrawerheader & JSXBase.HTMLAttributes<HTMLNvDrawerheaderElement>;
             "nv-fieldcheckbox": LocalJSX.NvFieldcheckbox & JSXBase.HTMLAttributes<HTMLNvFieldcheckboxElement>;
             /**
              * A field date component that combines an input with a calendar popover.
@@ -7371,7 +7658,7 @@ declare module "@stencil/core" {
              */
             "nv-sidebarnavsubitem": LocalJSX.NvSidebarnavsubitem & JSXBase.HTMLAttributes<HTMLNvSidebarnavsubitemElement>;
             /**
-             * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
+             * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.
              */
             "nv-split": LocalJSX.NvSplit & JSXBase.HTMLAttributes<HTMLNvSplitElement>;
             /**

package/dist/vscode-data.json

@@ -747,6 +747,146 @@
         }
       ]
     },
+    {
+      "name": "nv-drawer",
+      "description": {
+        "kind": "markdown",
+        "value": "The `nv-drawer` component is a side panel that slides in from the left or right side of the screen, providing a space-efficient way to display additional content or actions."
+      },
+      "attributes": [
+        {
+          "name": "autofocus",
+          "description": "Controls whether the drawer should automatically focus the first focusable\nelement when opened. When disabled, prevents unwanted tooltip triggers on\ndrawer open."
+        },
+        {
+          "name": "click-outside",
+          "description": "If true, the drawer will be closed when the backdrop is clicked."
+        },
+        {
+          "name": "controlled",
+          "description": "If true, the drawer visibility is managed manually through methods or the\nopen prop."
+        },
+        {
+          "name": "open",
+          "description": "Use this prop to toggle the visibility of the drawer. Set to true to show\nthe drawer and false to hide it."
+        },
+        {
+          "name": "side",
+          "description": "Side from which the drawer appears.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size of the drawer. Defaults to 'md'.\n- 'sm': Small drawer (~320px)\n- 'md': Medium drawer (~400px)\n- 'lg': Large drawer (~600px)\n- 'full': Full width drawer (100vw on mobile, ~800px on desktop)",
+          "values": [
+            {
+              "name": "full"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "sm"
+            }
+          ]
+        },
+        {
+          "name": "swipe-to-open",
+          "description": "Enables swipe gesture to open/close the drawer on touch devices.\n- Swipe from the edge (left for left drawer, right for right drawer) to open\n- Swipe towards the edge from inside the drawer to close"
+        },
+        {
+          "name": "undismissable",
+          "description": "If true, the drawer cannot be closed by the user."
+        },
+        {
+          "name": "width",
+          "description": "Width of the drawer. If specified, this will override the size prop.\nDefaults to the width corresponding to the size prop (400px for 'md')."
+        }
+      ]
+    },
+    {
+      "name": "nv-drawerfooter",
+      "description": {
+        "kind": "markdown",
+        "value": "Default footer for the drawer component."
+      },
+      "attributes": [
+        {
+          "name": "cancel-label",
+          "description": "Sets the label for the cancel button."
+        },
+        {
+          "name": "danger",
+          "description": "Sets the danger state for the primary button."
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the primary button, preventing user interaction."
+        },
+        {
+          "name": "form",
+          "description": "A form inside the drawer can be submitted through the drawer footer by\ngiving the form an id and passing that id to the form attribute."
+        },
+        {
+          "name": "leading-icon",
+          "description": "Sets the leading icon for the primary button."
+        },
+        {
+          "name": "primary-button-type",
+          "description": "Sets the type of the primary button. If using a form, this will default to\n'submit' if nothing passed.",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
+        },
+        {
+          "name": "primary-label",
+          "description": "Sets the label for the primary button."
+        },
+        {
+          "name": "trailing-icon",
+          "description": "Sets the trailing icon for the primary button."
+        },
+        {
+          "name": "undismissable",
+          "description": "Controls the visibility of the cancel button. When true, the cancel button is\nhidden."
+        }
+      ]
+    },
+    {
+      "name": "nv-drawerheader",
+      "description": {
+        "kind": "markdown",
+        "value": "Default header for the drawer component."
+      },
+      "attributes": [
+        {
+          "name": "heading",
+          "description": "Sets the heading text for the drawer."
+        },
+        {
+          "name": "subheading",
+          "description": "Sets the subheading text for the drawer."
+        }
+      ]
+    },
     {
       "name": "nv-fieldcheckbox",
       "description": {
@@ -3870,12 +4010,18 @@
             {
               "name": "external-link"
             },
+            {
+              "name": "eye-check"
+            },
             {
               "name": "eye-off"
             },
             {
               "name": "eye"
             },
+            {
+              "name": "eyeglass2"
+            },
             {
               "name": "face-id"
             },
@@ -5840,12 +5986,18 @@
             {
               "name": "external-link"
             },
+            {
+              "name": "eye-check"
+            },
             {
               "name": "eye-off"
             },
             {
               "name": "eye"
             },
+            {
+              "name": "eyeglass2"
+            },
             {
               "name": "face-id"
             },
@@ -6814,7 +6966,7 @@
       "name": "nv-split",
       "description": {
         "kind": "markdown",
-        "value": "The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel."
+        "value": "The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself."
       },
       "attributes": [
         {