@dnncommunity/dnn-elements 0.14.0-beta.1 → 0.14.0-beta.10

package/dist/esm/dnn-button.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-button.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,+8DAA+8D;;ICUv9D,SAAS;EALtB;;;;;;;;IAWU,SAAI,GAAyC,SAAS,CAAC;;;;IAKvD,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAa,KAAK,CAAC;;;;IAK1B,mBAAc,GAAY,KAAK,CAAC;;;;IAKhC,kBAAa,GAAY,IAAI,CAAC;;;;IAK9B,mBAAc,GAAY,gBAAgB,CAAC;;;;IAK3C,aAAQ,GAAY,KAAK,CAAC;IAEzB,iBAAY,GAAY,KAAK,CAAC;GA+ExC;EA1DC,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;MACzB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GAC5D;EAEO,aAAa;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAC;MACrC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,EAAC,IACtF,cAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC/E,eAAa,CACN,EACR,IAAI,CAAC,OAAO;MACT,iBAAW,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,IACvD,aAAI,IAAI,CAAC,cAAc,CAAK,EAC5B,WAAK,KAAK,EACR;UACE,OAAO,EAAE,MAAM;UACf,cAAc,EAAE,UAAU;SAC3B,IAED,kBAAY,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAc,EAC1H,kBAAY,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,aAAa,CAAc,CACtH,CACI,CAEX,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","./src/components/dnn-button/dnn-button.tsx"],"sourcesContent":[":host {\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: var(--backround-color);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  display: inline-block;\r\n  width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n  pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n  --background-color: var(--dnn-color-primary, blue);\r\n  --color: var(--dnn-color-primary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n  --color: var(--dnn-color-primary, blue);\r\n  --border-color: var(--dnn-color-primary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n  --background-color: var(--dnn-color-secondary, green);\r\n  --color: var(--dnn-color-secondary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n  --background-color: var(--dnn-color-secondary-contrast, white);\r\n  --color: var(--dnn-color-secondary, blue);\r\n  --border-color: var(--dnn-color-secondary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n  --background-color: var(--dnn-color-tertiary, yellow);\r\n  --color: var(--dnn-color-tertiary-contrast, black);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n  --background-color: var(--dnn-color-tertiary-contrast, white);\r\n  --color: var(--dnn-color-tertiary, blue);\r\n  --border-color: var(--dnn-color-tertiary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n  button{\r\n    border: var(--border-size) solid var(--border-color);\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding) calc(var(--padding) * 2);\r\n    background-color: transparent;\r\n    background-color: var(--background-color);\r\n    color: var(--color);\r\n    outline: none;\r\n    &:focus, &:hover{\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n  button{\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n:host(.small){\r\n  button{\r\n    padding: calc(var(--padding) / 2) var(--padding);\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n:host(.large){\r\n  button{\r\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n    font-size: 1.2em;\r\n  }\r\n}\r\n\r\nbutton{\r\n  height: 100%;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n  tag: 'dnn-button',\r\n  styleUrl: 'dnn-button.scss',\r\n  shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n  /**\r\n   * Optional button style,\r\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n   */\r\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n  /**\r\n   * Optionally reverses the button style.\r\n   */\r\n  @Prop() reversed: boolean = false;\r\n\r\n  /**\r\n   * Optionally sets the button size, small normal or large, defaults to normal\r\n   */\r\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n  /**\r\n   * Optionally add a confirmation dialog before firing the action.\r\n   */\r\n  @Prop() confirm?: boolean = false;\r\n\r\n  /**\r\n   * The text of the yes button for confirmation.\r\n   */\r\n  @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n  /**\r\n   * The text of the no button for confirmation.\r\n   */\r\n  @Prop() confirmNoText?: string = \"No\";\r\n\r\n  /**\r\n   * The text of the confirmation message;\r\n   */\r\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n  \r\n  /**\r\n   * Disables the button\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @State() modalVisible: boolean = false;\r\n\r\n  @Element() el!: HTMLDnnButtonElement;\r\n\r\n  private modal!: HTMLDnnModalElement;\r\n\r\n  /** \r\n   * Fires when confirm is true and the user confirms the action.\r\n  */\r\n  @Event({\r\n    eventName: 'confirmed',\r\n    bubbles: false,\r\n    cancelable: true,\r\n    composed: true\r\n  }) confirmed: EventEmitter;\r\n\r\n  /**\r\n   * Fires when confirm is true and the user cancels the action.\r\n   */\r\n  @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n  componentDidLoad(){\r\n    this.el.classList.add(this.type);\r\n    \r\n    if (this.reversed){\r\n      this.el.classList.add('reversed');\r\n    }\r\n\r\n    if (this.size !== 'normal'){\r\n      this.el.classList.add(this.size);\r\n    }\r\n\r\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n  }\r\n\r\n  private handleConfirm(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.confirmed.emit();\r\n  }\r\n\r\n  private handleCancel(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.canceled.emit();\r\n  }\r\n  \r\n  private handleClick(): void {\r\n    if (this.confirm && !this.modalVisible){\r\n      this.modal.show();\r\n      this.modalVisible = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n          <slot></slot>\r\n        </button>\r\n        {this.confirm &&\r\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n              <p>{this.confirmMessage}</p>\r\n              <div style={\r\n                {\r\n                  display: 'flex',\r\n                  justifyContent: 'flex-end'\r\n                }\r\n              }>\r\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n              </div>\r\n            </dnn-modal>\r\n          }\r\n      </Host>\r\n    );\r\n  }\r\n  \r\n\r\n}\r\n"],"version":3}
+{"file":"dnn-button.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,igEAAigE;;ICUzgE,SAAS;EALtB;;;;;;;;IAWU,SAAI,GAAyC,SAAS,CAAC;;;;IAKvD,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAa,KAAK,CAAC;;;;IAK1B,mBAAc,GAAY,KAAK,CAAC;;;;IAKhC,kBAAa,GAAY,IAAI,CAAC;;;;IAK9B,mBAAc,GAAY,gBAAgB,CAAC;;;;IAK3C,aAAQ,GAAY,KAAK,CAAC;IAEzB,iBAAY,GAAY,KAAK,CAAC;GA+ExC;EA1DC,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;MACzB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GAC5D;EAEO,aAAa;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAC;MACrC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,EAAC,IACtF,cAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC/E,eAAa,CACN,EACR,IAAI,CAAC,OAAO;MACT,iBAAW,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,IACvD,aAAI,IAAI,CAAC,cAAc,CAAK,EAC5B,WAAK,KAAK,EACR;UACE,OAAO,EAAE,MAAM;UACf,cAAc,EAAE,UAAU;SAC3B,IAED,kBAAY,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAc,EAC1H,kBAAY,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,aAAa,CAAc,CACtH,CACI,CAEX,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","./src/components/dnn-button/dnn-button.tsx"],"sourcesContent":[":host {\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: var(--backround-color);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  display: inline-block;\r\n  width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n  pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n  --background-color: var(--dnn-color-primary, blue);\r\n  --color: var(--dnn-color-primary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n  --color: var(--dnn-color-primary, blue);\r\n  --border-color: var(--dnn-color-primary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n  --background-color: var(--dnn-color-secondary, green);\r\n  --color: var(--dnn-color-secondary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n  --background-color: var(--dnn-color-secondary-contrast, white);\r\n  --color: var(--dnn-color-secondary, blue);\r\n  --border-color: var(--dnn-color-secondary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n  --background-color: var(--dnn-color-tertiary, yellow);\r\n  --color: var(--dnn-color-tertiary-contrast, black);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n  --background-color: var(--dnn-color-tertiary-contrast, white);\r\n  --color: var(--dnn-color-tertiary, blue);\r\n  --border-color: var(--dnn-color-tertiary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n  button{\r\n    border: var(--border-size) solid var(--border-color);\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding) calc(var(--padding) * 2);\r\n    background-color: transparent;\r\n    background-color: var(--background-color);\r\n    color: var(--color);\r\n    outline: none;\r\n    &:focus, &:hover{\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n  button{\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n:host(.small){\r\n  button{\r\n    padding: calc(var(--padding) / 2) var(--padding);\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n:host(.large){\r\n  button{\r\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n    font-size: 1.2em;\r\n  }\r\n}\r\n\r\nbutton{\r\n  height: 100%;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n  tag: 'dnn-button',\r\n  styleUrl: 'dnn-button.scss',\r\n  shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n  /**\r\n   * Optional button style,\r\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n   */\r\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n  /**\r\n   * Optionally reverses the button style.\r\n   */\r\n  @Prop() reversed: boolean = false;\r\n\r\n  /**\r\n   * Optionally sets the button size, small normal or large, defaults to normal\r\n   */\r\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n  /**\r\n   * Optionally add a confirmation dialog before firing the action.\r\n   */\r\n  @Prop() confirm?: boolean = false;\r\n\r\n  /**\r\n   * The text of the yes button for confirmation.\r\n   */\r\n  @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n  /**\r\n   * The text of the no button for confirmation.\r\n   */\r\n  @Prop() confirmNoText?: string = \"No\";\r\n\r\n  /**\r\n   * The text of the confirmation message;\r\n   */\r\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n  \r\n  /**\r\n   * Disables the button\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @State() modalVisible: boolean = false;\r\n\r\n  @Element() el!: HTMLDnnButtonElement;\r\n\r\n  private modal!: HTMLDnnModalElement;\r\n\r\n  /** \r\n   * Fires when confirm is true and the user confirms the action.\r\n  */\r\n  @Event({\r\n    eventName: 'confirmed',\r\n    bubbles: false,\r\n    cancelable: true,\r\n    composed: true\r\n  }) confirmed: EventEmitter;\r\n\r\n  /**\r\n   * Fires when confirm is true and the user cancels the action.\r\n   */\r\n  @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n  componentDidLoad(){\r\n    this.el.classList.add(this.type);\r\n    \r\n    if (this.reversed){\r\n      this.el.classList.add('reversed');\r\n    }\r\n\r\n    if (this.size !== 'normal'){\r\n      this.el.classList.add(this.size);\r\n    }\r\n\r\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n  }\r\n\r\n  private handleConfirm(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.confirmed.emit();\r\n  }\r\n\r\n  private handleCancel(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.canceled.emit();\r\n  }\r\n  \r\n  private handleClick(): void {\r\n    if (this.confirm && !this.modalVisible){\r\n      this.modal.show();\r\n      this.modalVisible = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n          <slot></slot>\r\n        </button>\r\n        {this.confirm &&\r\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n              <p>{this.confirmMessage}</p>\r\n              <div style={\r\n                {\r\n                  display: 'flex',\r\n                  justifyContent: 'flex-end'\r\n                }\r\n              }>\r\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n              </div>\r\n            </dnn-modal>\r\n          }\r\n      </Host>\r\n    );\r\n  }\r\n  \r\n\r\n}\r\n"],"version":3}

package/dist/esm/dnn-button_16.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-212d30ec.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cdbad319.js';
 import { D as Debounce } from './debounce-06f55268.js';
 
-const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
+const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
 
 let DnnButton = class {
   constructor(hostRef) {
@@ -80,7 +80,7 @@ let DnnButton = class {
 };
 DnnButton.style = dnnButtonCss;
 
-const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:inline-flex;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:flex;justify-content:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{box-shadow:0 0 2px 2px var(--focus-color)}";
+const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";
 
 let DnnCheckbox = class {
   constructor(hostRef) {
@@ -129,7 +129,7 @@ let DnnCheckbox = class {
 };
 DnnCheckbox.style = dnnCheckboxCss;
 
-const dnnChevronCss = ":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{transform:rotate(90deg)}";
+const dnnChevronCss = ":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";
 
 let DnnChevron = class {
   constructor(hostRef) {
@@ -154,18 +154,8 @@ let DnnChevron = class {
 };
 DnnChevron.style = dnnChevronCss;
 
-const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;transition:height 300ms ease-in-out}";
+const dnnCollapsibleCss = ":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 let DnnCollapsible = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -174,86 +164,46 @@ let DnnCollapsible = class {
     this.expanded = false;
     /** Defines the transition time in ms, defaults to 100ms */
     this.transitionDuration = 150;
-    this.animating = false;
   }
-  handleExpandedChanged(newValue) {
-    this.animating = true;
+  handleHeightChanged() {
     requestAnimationFrame(() => {
-      const container = this.el.shadowRoot.querySelector("#container");
-      if (newValue) {
-        container.style.height = container.scrollHeight + "px";
-      }
-      else {
-        container.style.height = "0px";
-      }
-    });
-    requestAnimationFrame(() => {
-      this.animating = false;
-      this.dnnCollapsibleHeightChanged.emit();
+      this.updateSize();
     });
   }
-  /** Updates the component height, use to update after a slot content changes. */
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
   async updateSize() {
-    this.updateComponentSize();
-  }
-  updateComponentSize() {
     if (this.expanded) {
-      this.animating = true;
       requestAnimationFrame(() => {
-        const container = this.el.shadowRoot.querySelector("#container");
-        let newHeight = 0;
-        container.querySelector('slot').assignedElements().forEach(node => {
-          newHeight += node.scrollHeight;
-        });
-        container.style.height = newHeight + "px";
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
       });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
     }
   }
-  handleOtherCollapsibleHeightChanged() {
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      this.container.style.maxHeight = "0px";
+    }
     setTimeout(() => {
-      this.updateComponentSize();
-    }, this.transitionDuration);
-  }
-  handleMutation(mutationList) {
-    mutationList.forEach(mutation => {
       requestAnimationFrame(() => {
-        mutation.target.closest('dnn-collapsible').updateSize();
+        this.dnnCollapsibleHeightChanged.emit();
       });
-    });
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver((mutationList) => {
-      this.handleMutation(mutationList);
-    });
-  }
-  componentDidLoad() {
-    const container = this.el.shadowRoot.querySelector('#container');
-    container.style.transitionDuration = this.transitionDuration + 'ms';
-    // Monitor for content changes and update own height
-    const childNodes = [this.el];
-    childNodes.forEach(element => {
-      this.mutationObserver.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
-    });
-    const slot = this.el.shadowRoot.querySelector('slot');
-    slot.addEventListener("slotchange", () => {
-      this.updateSize();
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    }, this.transitionDuration);
   }
-  /*eslint-enable @stencil/own-methods-must-be-private */
   render() {
-    return (h(Host, null, h("div", { id: "container" }, h("slot", null))));
+    return (h(Host, null, h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el }, h("slot", null))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "expanded": ["handleExpandedChanged"]
+    "expanded": ["handledExpandedChanged"]
   }; }
 };
-__decorate$2([
-  Debounce()
-], DnnCollapsible.prototype, "updateSize", null);
 DnnCollapsible.style = dnnCollapsibleCss;
 
 /** Color utility class with hsl and rgb converters
@@ -447,7 +397,7 @@ class ColorInfo {
   }
 }
 
-const dnnColorPickerCss = ".dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:flex;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:\"\";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:\"\";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:flex;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:\"\";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:flex;flex-direction:column;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:flex;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}";
+const dnnColorPickerCss = ".dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:-webkit-gradient(linear, left top, right top, from(white), to(red));background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:-webkit-gradient(linear, left top, left bottom, from(white), to(black));background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:\"\";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:\"\";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{-ms-flex-direction:column;flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{-ms-flex:auto;flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:-webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#f00));background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:\"\";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}";
 
 /** Reusable DNN UI component to pick a color
  * @copyright Copyright (c) .NET Foundation. All rights reserved.
@@ -746,7 +696,7 @@ __decorate$1([
 ], DnnColorPicker.prototype, "colorChangedHandler", null);
 DnnColorPicker.style = dnnColorPickerCss;
 
-const dnnDropzoneCss = ":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:flex;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:flex;justify-content:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:flex;justify-content:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:flex;flex-direction:column;align-items:center}.video-preview button{margin:1rem}";
+const dnnDropzoneCss = ":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";
 
 let DnnDropzone = class {
   constructor(hostRef) {
@@ -917,7 +867,7 @@ function getMovementFromEvent(event, previousTouch) {
   return { movementX, movementY };
 }
 
-const dnnImageCropperCss = ":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{backdrop-filter:saturate(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;box-shadow:black 0 0 0px 2px;backdrop-filter:saturate(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";
+const dnnImageCropperCss = ":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{-webkit-backdrop-filter:saturate(0.5);backdrop-filter:saturate(0.5);-webkit-backdrop-filter:brightness(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;-webkit-box-shadow:black 0 0 0px 2px;box-shadow:black 0 0 0px 2px;-webkit-backdrop-filter:saturate(2);backdrop-filter:saturate(2);-webkit-backdrop-filter:brightness(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";
 
 let DnnImageCropper = class {
   constructor(hostRef) {
@@ -1290,7 +1240,7 @@ let DnnImageCropper = class {
 };
 DnnImageCropper.style = dnnImageCropperCss;
 
-const dnnModalCss = ":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(2px);transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;transform:scale(2);transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:flex;justify-content:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{transform:scale(1);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";
+const dnnModalCss = ":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";
 
 let DnnModal = class {
   constructor(hostRef) {
@@ -1343,7 +1293,7 @@ let DnnModal = class {
 };
 DnnModal.style = dnnModalCss;
 
-const dnnSearchboxCss = ":host{position:relative;display:flex;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
+const dnnSearchboxCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1453,7 +1403,7 @@ let DnnTab = class {
 };
 DnnTab.style = dnnTabCss;
 
-const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
+const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
 
 let DnnTabs = class {
   constructor(hostRef) {
@@ -1496,7 +1446,7 @@ let DnnTabs = class {
 };
 DnnTabs.style = dnnTabsCss;
 
-const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none}button .handle{transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--dnn-controls-radius, 50%);position:absolute;top:calc(50% - 0.5em);left:2px}";
+const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--dnn-controls-radius, 50%);position:absolute;top:calc(50% - 0.5em);left:2px}";
 
 let DnnToggle = class {
   constructor(hostRef) {
@@ -1524,28 +1474,38 @@ let DnnToggle = class {
 };
 DnnToggle.style = dnnToggleCss;
 
-const dnnTreeviewItemCss = ":host{display:flex;overflow:hidden}.expander{width:24px;height:24px}.expander button{transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;outline:none;height:1em;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:flex;align-items:center;gap:0.25em}div.item div.children{overflow:hidden;height:0;transition:all 150ms ease-in-out}";
+const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";
 
 let DnnTreeviewItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** Defines if the current node is expanded  */
+    this.userExpanded = createEvent(this, "userExpanded", 3);
+    this.userCollapsed = createEvent(this, "userCollapsed", 3);
+    /** Defines if the current node is expanded.  */
     this.expanded = false;
+    /** Manages state for whether or not item has children. */
     this.hasChildren = false;
   }
+  /** Watch expanded Prop */
+  watchExpanded(expanded) {
+    if (expanded) {
+      this.expander.classList.add("expanded");
+      this.collapsible.expanded = true;
+      return;
+    }
+    this.expander.classList.remove("expanded");
+    this.collapsible.expanded = false;
+  }
   componentDidLoad() {
     requestAnimationFrame(() => {
-      const children = this.childrenElement.children[0];
-      const count = children.assignedElements().length;
+      const child = this.childElement.children[0];
+      const count = child.assignedElements().length;
       if (count > 0) {
         this.hasChildren = true;
       }
       if (this.expanded) {
         this.expander.classList.add("expanded");
-        this.collapsible.expanded = false;
-        setTimeout(() => {
-          this.collapsible.expanded = true;
-        }, 300);
+        this.collapsible.expanded = true;
       }
     });
   }
@@ -1553,19 +1513,24 @@ let DnnTreeviewItem = class {
     this.expanded = !this.expanded;
     if (this.expanded) {
       this.expander.classList.add("expanded");
+      this.userExpanded.emit();
       return;
     }
     this.expander.classList.remove("expanded");
+    this.userCollapsed.emit();
   }
   render() {
     return (h(Host, null, h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
-      h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.childrenElement = el }, h("slot", { name: "children" }))))));
+      h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.childElement = el }, h("slot", { name: "children" }))))));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "expanded": ["watchExpanded"]
+  }; }
 };
 DnnTreeviewItem.style = dnnTreeviewItemCss;
 
-const dnnVerticalOverflowMenuCss = ":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--text-color:#222}.menu-container{display:flex;justify-content:flex-start;align-items:center;background-color:var(--background-color);color:var(--text-color)}.menu-container button{cursor:pointer}.menu-container button svg{fill:var(--foreground-color)}.menu-container .menu{margin:0.5em;display:flex;gap:1em;justify-content:flex-start;align-items:center;white-space:nowrap;width:100%}.menu-container .menu a{display:flex;align-items:center;color:var(--text-color);text-decoration:none}.menu-container .menu a svg{fill:var(--foreground-color)}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow .dropdown{position:absolute;display:flex;flex-direction:column;white-space:nowrap;right:0;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown a{color:var(--text-color)}.menu-container .overflow .dropdown a svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}.menu-container .overflow .dropdown>*{display:flex;align-items:center}";
+const dnnVerticalOverflowMenuCss = ":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--text-color:#222}.menu-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;background-color:var(--background-color);color:var(--text-color)}.menu-container .menu{margin:0.5em;display:-ms-flexbox;display:flex;gap:1em;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;white-space:nowrap;width:100%}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{cursor:pointer;padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow button svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;right:0;-webkit-transition:100ms ease-in-out;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}";
 
 let DnnVerticalOverflowMenu = class {
   constructor(hostRef) {
@@ -1576,7 +1541,6 @@ let DnnVerticalOverflowMenu = class {
   }
   componentDidRender() {
     requestAnimationFrame(() => {
-      this.moveAllSlottedItemsIntoMenu();
       this.moveItemsToDropDownIfNecessery();
       this.resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
@@ -1592,12 +1556,8 @@ let DnnVerticalOverflowMenu = class {
       this.resizeObserver.observe(this.element);
     });
   }
-  moveAllSlottedItemsIntoMenu() {
-    const menuItems = this.element.shadowRoot.querySelector("slot").assignedElements();
-    menuItems.forEach(menuItem => this.menu.appendChild(menuItem));
-  }
   moveItemsToDropDownIfNecessery() {
-    const menuItems = Array.from(this.menu.children);
+    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
     const availableWidth = this.menu.getBoundingClientRect().width;
     let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
     menuItems.forEach(item => neededWidth += this.getFullWidth(item));
@@ -1608,7 +1568,7 @@ let DnnVerticalOverflowMenu = class {
       if (this.dropdown == undefined) {
         return;
       }
-      this.dropdown.prepend(lastItem);
+      lastItem.slot = "dropdown";
       this.moveItemsToDropDownIfNecessery();
     }
   }
@@ -1616,16 +1576,20 @@ let DnnVerticalOverflowMenu = class {
     if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
       return;
     }
-    const menuItems = Array.from(this.menu.children);
+    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
     const availableWidth = this.menu.getBoundingClientRect().width;
     let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
     neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
     menuItems.forEach(item => neededWidth += this.getFullWidth(item));
-    neededWidth += this.getFullWidth(this.dropdown.children[0]);
+    const firstItem = this.dropdown.querySelector("slot").assignedElements()[0];
+    if (firstItem != undefined) {
+      neededWidth += this.getFullWidth(firstItem);
+    }
     if (neededWidth < availableWidth) {
-      const firstItem = this.dropdown.children[0];
-      this.menu.appendChild(firstItem);
-      if (!this.dropdown.hasChildNodes()) {
+      if (firstItem != undefined) {
+        firstItem.slot = "";
+      }
+      if (firstItem == undefined) {
         this.dropdown.classList.remove("visible");
         this.showDropdownMenu = false;
         this.showDropdownButton = false;
@@ -1646,7 +1610,7 @@ let DnnVerticalOverflowMenu = class {
     if (this.showDropdownMenu) {
       this.dropdown.classList.add("visible");
       let contentHeight = 0;
-      const items = Array.from(this.dropdown.children);
+      const items = Array.from(this.dropdown.querySelector("slot").assignedElements());
       items.forEach(item => contentHeight += item.getBoundingClientRect().height);
       var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;
       var additionalHeight = emHeight * (this.dropdown.children.length - 1);
@@ -1673,13 +1637,13 @@ let DnnVerticalOverflowMenu = class {
   }
   render() {
     return (h(Host, null, h("div", { class: "menu-container" }, h("div", { class: "menu", ref: el => this.menu = el }, h("slot", null)), this.showDropdownButton &&
-      h("div", { class: "overflow" }, h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))), h("div", { class: "dropdown", ref: el => this.dropdown = el })))));
+      h("div", { class: "overflow" }, h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))), h("div", { class: "dropdown", ref: el => this.dropdown = el }, h("slot", { name: "dropdown" }))))));
   }
   get element() { return getElement(this); }
 };
 DnnVerticalOverflowMenu.style = dnnVerticalOverflowMenuCss;
 
-const dnnVerticalSplitviewCss = ":host{display:flex;align-items:stretch;margin:0 auto}button{background-color:transparent;border:none;margin:0;padding:0;cursor:ew-resize}.pane{height:100%;overflow-y:auto}.pane.transition{transition:all 300ms ease-in-out}";
+const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
 
 let DnnVerticalSplitview = class {
   constructor(hostRef) {
@@ -1697,6 +1661,7 @@ let DnnVerticalSplitview = class {
     const panes = this.element.shadowRoot.querySelectorAll(".pane");
     requestAnimationFrame(() => {
       panes.forEach(pane => pane.classList.add("transition"));
+      this.splitter.classList.add("transition");
       requestAnimationFrame(() => {
         const fullWidth = this.element.getBoundingClientRect().width;
         let newLeft = fullWidth * newWidth / 100;
@@ -1710,6 +1675,7 @@ let DnnVerticalSplitview = class {
         this.rightWidth = fullWidth - newLeft;
         setTimeout(() => {
           panes.forEach(pane => pane.classList.remove("transition"));
+          this.splitter.classList.remove("transition");
         }, 300);
       });
     });
@@ -1781,10 +1747,12 @@ let DnnVerticalSplitview = class {
     this.rightWidth = fullWidth - this.leftWidth;
   }
   render() {
-    return (h(Host, null, h("div", { class: "pane", style: {
+    return (h(Host, null, h("div", { class: "left pane", style: {
         width: `${this.leftWidth}px`,
-        height: "100%",
-      } }, h("slot", { name: "left" })), h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), style: { minWidth: `${this.splitterWidth.toString()}px` } }, h("slot", null)), h("div", { class: "pane", style: {
+      } }, h("slot", { name: "left" })), h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
+        minWidth: `${this.splitterWidth.toString()}px`,
+        left: `${this.leftWidth - 2}px`,
+      } }, h("slot", null)), h("div", { class: "right pane", style: {
         width: `${this.rightWidth}px`,
       } }, h("slot", { name: "right" }))));
   }