@six-group/ui-library 0.0.0-insider.cd0cd0d → 0.0.0-insider.d82aaa2

package/dist/collection/components/six-details/six-details.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { focusVisible } from '../../utils/focus-visible';
+import { h } from "@stencil/core";
+import { focusVisible } from "../../utils/focus-visible";
 let id = 0;
 /**
  * @since 1.0
@@ -322,7 +322,8 @@ export class SixDetails {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -342,7 +343,8 @@ export class SixDetails {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -362,7 +364,8 @@ export class SixDetails {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -382,7 +385,8 @@ export class SixDetails {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -396,7 +400,8 @@ export class SixDetails {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -412,7 +417,8 @@ export class SixDetails {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/six-details/six-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-details.js","sourceRoot":"","sources":["../../../src/components/six-details/six-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host!: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  private body?: HTMLElement;\n  private details?: HTMLElement;\n  private header?: HTMLElement;\n  private componentId = `details-${++id}`;\n  private isVisible = false;\n\n  /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */\n  @Prop() selectableEmpty = false;\n\n  /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n  @Prop() hasContent = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body != null) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.details == null || this.body == null) return;\n\n    focusVisible.observe(this.details);\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.details != null) {\n      focusVisible.unobserve(this.details);\n    }\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.body == null) return;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // initially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.body == null) return;\n    const body = this.body;\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    body.style.height = `${body.scrollHeight}px`;\n    body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      body.clientWidth; // force a reflow\n      body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  private handleBodyTransitionEnd = (event: TransitionEvent) => {\n    if (this.body == null) return;\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  };\n\n  private handleSummaryClick = () => {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header?.focus();\n    }\n  };\n\n  private handleSummaryKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-details.js","sourceRoot":"","sources":["../../../src/components/six-details/six-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host!: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  private body?: HTMLElement;\n  private details?: HTMLElement;\n  private header?: HTMLElement;\n  private componentId = `details-${++id}`;\n  private isVisible = false;\n\n  /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */\n  @Prop() selectableEmpty = false;\n\n  /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n  @Prop() hasContent = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body != null) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.details == null || this.body == null) return;\n\n    focusVisible.observe(this.details);\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.details != null) {\n      focusVisible.unobserve(this.details);\n    }\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.body == null) return;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // initially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.body == null) return;\n    const body = this.body;\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    body.style.height = `${body.scrollHeight}px`;\n    body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      body.clientWidth; // force a reflow\n      body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  private handleBodyTransitionEnd = (event: TransitionEvent) => {\n    if (this.body == null) return;\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  };\n\n  private handleSummaryClick = () => {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header?.focus();\n    }\n  };\n\n  private handleSummaryKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-details/test/six-details.spec.js

@@ -0,0 +1,36 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixDetails } from "../six-details";
+describe('six-details', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixDetails],
+      html: `<six-details></six-details>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-details summary-icon-size="inherit">
+        <mock:shadow-root>
+          <div class="details" part="base">
+            <header aria-controls="details-1-content" aria-disabled="false" aria-expanded="false" class="details__header" id="details-1-header" part="header" role="button" tabindex="0">
+              <div class="details__summary" part="summary">
+                <slot name="summary"></slot>
+              </div>
+              <span class="details__summary-icon details__summary-icon--animate" part="summary-icon">
+                <slot name="summary-icon">
+                  <six-icon size="inherit">
+                    expand_more
+                  </six-icon>
+                </slot>
+              </span>
+            </header>
+            <div class="details__body" hidden="">
+              <div aria-labelledby="details-1-header" class="details__content" id="details-1-content" part="content" role="region">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </six-details>
+    `);
+  });
+});
+//# sourceMappingURL=six-details.spec.js.map

package/dist/collection/components/six-details/test/six-details.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-details.spec.js","sourceRoot":"","sources":["../../../../src/components/six-details/test/six-details.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixDetails } from '../six-details';\n\ndescribe('six-details', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixDetails],\n      html: `<six-details></six-details>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-details summary-icon-size=\"inherit\">\n        <mock:shadow-root>\n          <div class=\"details\" part=\"base\">\n            <header aria-controls=\"details-1-content\" aria-disabled=\"false\" aria-expanded=\"false\" class=\"details__header\" id=\"details-1-header\" part=\"header\" role=\"button\" tabindex=\"0\">\n              <div class=\"details__summary\" part=\"summary\">\n                <slot name=\"summary\"></slot>\n              </div>\n              <span class=\"details__summary-icon details__summary-icon--animate\" part=\"summary-icon\">\n                <slot name=\"summary-icon\">\n                  <six-icon size=\"inherit\">\n                    expand_more\n                  </six-icon>\n                </slot>\n              </span>\n            </header>\n            <div class=\"details__body\" hidden=\"\">\n              <div aria-labelledby=\"details-1-header\" class=\"details__content\" id=\"details-1-content\" part=\"content\" role=\"region\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </six-details>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-dialog/six-dialog.js

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';
-import { hasSlot } from '../../utils/slot';
-import { isPreventScrollSupported } from '../../utils/support';
-import Modal from '../../utils/modal';
+import { h } from "@stencil/core";
+import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
+import { hasSlot } from "../../utils/slot";
+import { isPreventScrollSupported } from "../../utils/support";
+import Modal from "../../utils/modal";
 const hasPreventScroll = isPreventScrollSupported();
 let id = 0;
 /**
@@ -240,7 +240,8 @@ export class SixDialog {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -260,7 +261,8 @@ export class SixDialog {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -280,7 +282,8 @@ export class SixDialog {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -300,7 +303,8 @@ export class SixDialog {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -320,7 +324,8 @@ export class SixDialog {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -340,7 +345,8 @@ export class SixDialog {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -354,7 +360,8 @@ export class SixDialog {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -370,7 +377,8 @@ export class SixDialog {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/six-dialog/six-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-dialog.js","sourceRoot":"","sources":["../../../src/components/six-dialog/six-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.dialog.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-dialog.js","sourceRoot":"","sources":["../../../src/components/six-dialog/six-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.dialog.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-dialog/test/six-dialog.spec.js

@@ -0,0 +1,34 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixDialog } from "../six-dialog";
+describe('six-dialog', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixDialog],
+      html: `<six-dialog></six-dialog>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-dialog>
+        <mock:shadow-root>
+          <div class="dialog" part="base">
+            <div class="dialog__overlay" part="overlay"></div>
+            <div aria-hidden="true" aria-labelledby="dialog-1-title" aria-modal="true" class="dialog__panel" part="panel" role="dialog" tabindex="0">
+              <header class="dialog__header" part="header">
+                <span class="dialog__title" id="dialog-1-title" part="title">
+                    <slot name="label"></slot>
+                </span>
+                <six-icon-button class="dialog__close" exportparts="base:close-button" name="close"></six-icon-button>
+              </header>
+              <div class="dialog__body" part="body">
+                <slot></slot>
+              </div>
+              <footer class="dialog__footer" part="footer">
+                <slot name="footer"></slot>
+              </footer>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </six-dialog>
+    `);
+  });
+});
+//# sourceMappingURL=six-dialog.spec.js.map

package/dist/collection/components/six-dialog/test/six-dialog.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-dialog.spec.js","sourceRoot":"","sources":["../../../../src/components/six-dialog/test/six-dialog.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,2BAA2B;KAClC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixDialog } from '../six-dialog';\n\ndescribe('six-dialog', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixDialog],\n      html: `<six-dialog></six-dialog>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-dialog>\n        <mock:shadow-root>\n          <div class=\"dialog\" part=\"base\">\n            <div class=\"dialog__overlay\" part=\"overlay\"></div>\n            <div aria-hidden=\"true\" aria-labelledby=\"dialog-1-title\" aria-modal=\"true\" class=\"dialog__panel\" part=\"panel\" role=\"dialog\" tabindex=\"0\">\n              <header class=\"dialog__header\" part=\"header\">\n                <span class=\"dialog__title\" id=\"dialog-1-title\" part=\"title\">\n                    <slot name=\"label\"></slot>\n                </span>\n                <six-icon-button class=\"dialog__close\" exportparts=\"base:close-button\" name=\"close\"></six-icon-button>\n              </header>\n              <div class=\"dialog__body\" part=\"body\">\n                <slot></slot>\n              </div>\n              <footer class=\"dialog__footer\" part=\"footer\">\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </six-dialog>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-drawer/six-drawer.js

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';
-import { hasSlot } from '../../utils/slot';
-import { isPreventScrollSupported } from '../../utils/support';
-import Modal from '../../utils/modal';
+import { h } from "@stencil/core";
+import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
+import { hasSlot } from "../../utils/slot";
+import { isPreventScrollSupported } from "../../utils/support";
+import Modal from "../../utils/modal";
 const hasPreventScroll = isPreventScrollSupported();
 let id = 0;
 /**
@@ -292,7 +292,8 @@ export class SixDrawer {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -312,7 +313,8 @@ export class SixDrawer {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -332,7 +334,8 @@ export class SixDrawer {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -352,7 +355,8 @@ export class SixDrawer {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -372,7 +376,8 @@ export class SixDrawer {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -392,7 +397,8 @@ export class SixDrawer {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -406,7 +412,8 @@ export class SixDrawer {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -422,7 +429,8 @@ export class SixDrawer {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/six-drawer/six-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-drawer.js","sourceRoot":"","sources":["../../../src/components/six-drawer/six-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  private componentId = `drawer-${++id}`;\n  private drawer?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-drawer.js","sourceRoot":"","sources":["../../../src/components/six-drawer/six-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  private componentId = `drawer-${++id}`;\n  private drawer?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-drawer/test/six-drawer.spec.js

@@ -0,0 +1,34 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixDrawer } from "../six-drawer";
+describe('six-drawer', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixDrawer],
+      html: `<six-drawer></six-drawer>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-drawer>
+        <mock:shadow-root>
+          <div class="drawer drawer--fixed drawer--right" part="base">
+            <div class="drawer__overlay" part="overlay" tabindex="-1"></div>
+            <div aria-hidden="true" aria-labelledby="drawer-1-title" aria-modal="true" class="drawer__panel" part="panel" role="dialog" tabindex="0">
+              <header class="drawer__header" part="header">
+                <span class="drawer__title" id="drawer-1-title" part="title">
+                  <slot name="label"></slot>
+                </span>
+                <six-icon-button class="drawer__close" exportparts="base:close-button" name="x"></six-icon-button>
+              </header>
+              <div class="drawer__body" part="body">
+                <slot></slot>
+              </div>
+              <footer class="drawer__footer" part="footer">
+                <slot name="footer"></slot>
+              </footer>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </six-drawer>
+    `);
+  });
+});
+//# sourceMappingURL=six-drawer.spec.js.map

package/dist/collection/components/six-drawer/test/six-drawer.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-drawer.spec.js","sourceRoot":"","sources":["../../../../src/components/six-drawer/test/six-drawer.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,2BAA2B;KAClC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixDrawer } from '../six-drawer';\n\ndescribe('six-drawer', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixDrawer],\n      html: `<six-drawer></six-drawer>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-drawer>\n        <mock:shadow-root>\n          <div class=\"drawer drawer--fixed drawer--right\" part=\"base\">\n            <div class=\"drawer__overlay\" part=\"overlay\" tabindex=\"-1\"></div>\n            <div aria-hidden=\"true\" aria-labelledby=\"drawer-1-title\" aria-modal=\"true\" class=\"drawer__panel\" part=\"panel\" role=\"dialog\" tabindex=\"0\">\n              <header class=\"drawer__header\" part=\"header\">\n                <span class=\"drawer__title\" id=\"drawer-1-title\" part=\"title\">\n                  <slot name=\"label\"></slot>\n                </span>\n                <six-icon-button class=\"drawer__close\" exportparts=\"base:close-button\" name=\"x\"></six-icon-button>\n              </header>\n              <div class=\"drawer__body\" part=\"body\">\n                <slot></slot>\n              </div>\n              <footer class=\"drawer__footer\" part=\"footer\">\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </six-drawer>\n    `);\n  });\n});\n"]}