/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { C as CSS_UTILITY, b as resizeShiftStep, d as resizeStep, c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
import { css, html } from "lit";
import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
import { createRef, ref } from "lit/directives/ref.js";
import { useDirection } from "@arcgis/lumina/controllers";
import { B as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
import { c as createObserver } from "../../chunks/observers.js";
import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
import { a as ariaValueFromSize } from "../../chunks/aria.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useTopLayer } from "../../chunks/useTopLayer.js";
const CSS = {
  scrim: "scrim",
  container: "container",
  containerOpen: "container--open",
  content: "content",
  contentContainer: "content-container",
  containerEmbedded: "container--embedded",
  resizeHandle: "resize-handle",
  resizeHandleBar: "resize-handle-bar"
};
const IDS = {
  sheetContent: "sheet-content"
};
const ICONS = {
  dragVertical: "drag-resize-vertical",
  dragHorizontal: "drag-resize-horizontal"
};
const styles = css`:host{position:absolute;inset:0;display:flex;visibility:hidden!important;--calcite-sheet-scrim-background-internal: rgba(0, 0, 0, .85);--calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}:host([embedded]){z-index:var(--calcite-z-index-overlay)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{visibility:hidden;position:fixed;box-sizing:border-box;display:flex;opacity:0;color:var(--calcite-sheet-text-color, var(--calcite-color-text-2));transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out}:host([top-layer-disabled]) .container,:host([embedded]) .container{z-index:var(--calcite-z-index-overlay)}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{box-shadow:var(--calcite-sheet-shadow, var(--calcite-shadow-sm))}:host([display-mode=overlay][position=inline-start]) .content{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .content{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .content{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .content{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([position^=inline]) .width-s{--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px)}:host([position^=inline]) .width-m{--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px)}:host([position^=inline]) .width-l{--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px)}:host([position^=block]) .height-s{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh)}:host([position^=block]) .height-m{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh)}:host([position^=block]) .height-l{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0;display:flex;overflow:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}[popover]{padding:0;margin:0;border:none;background-color:transparent;position:fixed;display:flex;inline-size:100%;block-size:100%}[popover]:popover-open{display:flex}:host([opened]){visibility:visible!important}.content{position:relative;box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;background-color:var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out;transform:var(--calcite-sheet-hidden-position-internal)}:host([top-layer-disabled]),:host([top-layer-disabled]) .content,:host([embedded]) .content{z-index:var(--calcite-z-index-modal)}.content-container{position:relative;display:flex;max-block-size:100%;max-inline-size:100%;flex:1 1 0%;overflow:hidden}.content-container ::slotted(*){block-size:auto}.container--open .content{transform:translateZ(0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container,:host([display-mode=float]) .content-container{border-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([display-mode=float]) .container{padding:var(--calcite-spacing-md)}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear,opacity var(--calcite-internal-animation-timing-medium) ease-in-out,max-inline-size var(--calcite-internal-animation-timing-medium) ease-in-out,max-block-size var(--calcite-internal-animation-timing-medium) ease-in-out;transition-delay:0ms}@starting-style{.container--open{opacity:0;visibility:hidden}}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=inline-start]) .content{flex-direction:row}:host([position=inline-end]) .content{flex-direction:row-reverse}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position=block-start]) .content{flex-direction:column}:host([position=block-end]) .content{flex-direction:column-reverse}:host([resizable][position=inline-start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=inline-end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-sheet-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-start]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-end]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-start]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-start]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-end-end-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-end]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-end]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position]) .container--embedded{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
class Sheet extends LitElement {
  constructor() {
    super();
    this.contentRef = createRef();
    this.direction = useDirection();
    this.focusTrap = useFocusTrap({
      triggerProp: "open",
      focusTrapOptions: {
        // scrim closes on click, so we let it take over
        clickOutsideDeactivates: () => this.embedded,
        escapeDeactivates: (event) => {
          if (!event.defaultPrevented && !this.escapeDisabled) {
            this.open = false;
            event.preventDefault();
          }
          return false;
        }
      }
    })(this);
    this.usePreventDocumentScroll = usePreventDocumentScroll()(this);
    this.messages = useT9n();
    this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
    this._open = false;
    this.openProp = "opened";
    this.transitionProp = "opacity";
    this.transitionRef = createRef();
    this.focusSetter = useSetFocus()(this);
    this.keyDownHandler = (event) => {
      const { defaultPrevented, key } = event;
      if (!defaultPrevented && !this.escapeDisabled && this.focusTrapDisabled && this.open && key === "Escape") {
        event.preventDefault();
        this.open = false;
      }
    };
    this.sizeOverride = useSizeOverride({
      targetElement: this.contentRef,
      getBounds: () => ({
        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
      }),
      onResize: (resizeValues) => {
        this.resizeValues = { ...resizeValues };
      }
    });
    this.topLayer = useTopLayer({
      disabledOverride: () => this.embedded,
      target: this.transitionRef
    })(this);
    this.resizeValues = {
      inlineSize: null,
      blockSize: null,
      minInlineSize: null,
      minBlockSize: null,
      maxInlineSize: null,
      maxBlockSize: null
    };
    this.displayMode = "overlay";
    this.embedded = false;
    this.escapeDisabled = false;
    this.focusTrapDisabled = false;
    this.heightScale = "m";
    this.opened = false;
    this.outsideCloseDisabled = false;
    this.position = "inline-start";
    this.resizable = false;
    this.topLayerDisabled = false;
    this.widthScale = "m";
    this.calciteSheetBeforeClose = createEvent({ cancelable: false });
    this.calciteSheetBeforeOpen = createEvent({ cancelable: false });
    this.calciteSheetClose = createEvent({ cancelable: false });
    this.calciteSheetOpen = createEvent({ cancelable: false });
    this.listen("keydown", this.keyDownHandler);
  }
  static {
    this.properties = { resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heightScale: [3, {}, { reflect: true }], height: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], opened: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  get preventDocumentScroll() {
    return !this.embedded;
  }
  get open() {
    return this._open;
  }
  set open(value) {
    const oldValue = this._open;
    if (value !== oldValue) {
      this.setOpenState(value);
    }
  }
  async setFocus(options) {
    return this.focusSetter(() => this.el, options);
  }
  async updateFocusTrapElements(extraContainers) {
    this.focusTrap.setExtraContainers(extraContainers);
    this.focusTrap.updateContainerElements();
  }
  async updateSize(size) {
    this.updateSizeInternal(size);
  }
  connectedCallback() {
    super.connectedCallback();
    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
    if (this.hasUpdated) {
      this.refreshResize();
    }
  }
  willUpdate(changes) {
    if (changes.has("opened") && (this.hasUpdated || this.opened !== false) && this.transitionRef.value) {
      toggleOpenClose(this);
    }
    if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("position") && (this.hasUpdated || this.position !== "inline-start") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("direction")) {
      this.refreshResize();
    }
    if (this.contentRef.value) {
      this.contentId = ensureId(this.contentRef.value);
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.mutationObserver?.disconnect();
    this.embedded = false;
    this.cleanUpInteractions();
  }
  async setOpenState(value) {
    if (this.beforeClose && !value) {
      try {
        await this.beforeClose?.(this.el);
      } catch {
        return;
      }
    }
    this._open = value;
    if (value) {
      await this.componentOnReady();
    }
    this.opened = value;
  }
  getResizeIcon() {
    const { position } = this;
    return position === "block-start" || position === "block-end" ? ICONS.dragVertical : ICONS.dragHorizontal;
  }
  getContentRefDOMRect() {
    return this.contentRef.value?.getBoundingClientRect();
  }
  handleKeyDown(event) {
    const { key, defaultPrevented, shiftKey } = event;
    const { contentRef, position, resizable, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
    const arrowKeys = position === "block-end" || position === "block-start" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
    const keys = [...arrowKeys, "Home", "End"];
    if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
      return;
    }
    const rect = this.getContentRefDOMRect();
    const invertRTL = this.direction === "rtl" ? -1 : 1;
    const stepValue = shiftKey ? resizeShiftStep : resizeStep;
    switch (key) {
      case "ArrowUp":
        this.updateSizeInternal({
          block: rect.height + (position === "block-end" ? stepValue : -stepValue)
        });
        event.preventDefault();
        break;
      case "ArrowDown":
        this.updateSizeInternal({
          block: rect.height + (position === "block-end" ? -stepValue : stepValue)
        });
        event.preventDefault();
        break;
      case "ArrowLeft":
        this.updateSizeInternal({
          inline: rect.width + (position === "inline-end" ? stepValue : -stepValue) * invertRTL
        });
        event.preventDefault();
        break;
      case "ArrowRight":
        this.updateSizeInternal({
          inline: rect.width + (position === "inline-end" ? -stepValue : stepValue) * invertRTL
        });
        event.preventDefault();
        break;
      case "Home":
        this.updateSizeInternal(position === "block-start" || position === "block-end" ? { block: minBlockSize } : { inline: minInlineSize });
        event.preventDefault();
        break;
      case "End":
        this.updateSizeInternal(position === "block-start" || position === "block-end" ? { block: maxBlockSize } : { inline: maxInlineSize });
        event.preventDefault();
        break;
    }
  }
  updateSizeInternal(size) {
    if (!this.contentRef.value) {
      return;
    }
    this.sizeOverride.resize(size);
  }
  cleanUpInteractions() {
    this.interaction?.unset();
  }
  updateResizeValues() {
    const { contentRef } = this;
    if (!contentRef.value) {
      return;
    }
    const computedStyle = window.getComputedStyle(contentRef.value);
    this.resizeValues = {
      inlineSize: getStylePixelValue(computedStyle.inlineSize),
      blockSize: getStylePixelValue(computedStyle.blockSize),
      minInlineSize: getStylePixelValue(computedStyle.minInlineSize),
      minBlockSize: getStylePixelValue(computedStyle.minBlockSize),
      maxInlineSize: getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth,
      maxBlockSize: getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight
    };
  }
  refreshResize() {
    this.updateResizeValues();
    this.setUpResizeInteractions();
  }
  setUpResizeInteractions() {
    this.cleanUpInteractions();
    const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
    if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
      return;
    }
    const rtl = this.direction === "rtl";
    this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
      edges: {
        top: position === "block-end" ? resizeHandleEl : false,
        right: position === (rtl ? "inline-end" : "inline-start") ? resizeHandleEl : false,
        bottom: position === "block-start" ? resizeHandleEl : false,
        left: position === (rtl ? "inline-start" : "inline-end") ? resizeHandleEl : false
      },
      modifiers: [
        interact.modifiers.restrictSize({
          min: {
            width: this.resizeValues.minInlineSize,
            height: this.resizeValues.minBlockSize
          },
          max: {
            width: this.resizeValues.maxInlineSize,
            height: this.resizeValues.maxBlockSize
          }
        })
      ],
      listeners: {
        move: ({ rect }) => {
          const isBlock = position === "block-start" || position === "block-end";
          this.updateSizeInternal(isBlock ? { block: rect.height } : { inline: rect.width });
        }
      }
    });
  }
  onBeforeOpen() {
    this.calciteSheetBeforeOpen.emit();
    this.topLayer.show();
  }
  onOpen() {
    if (this.focusTrapDisabled) {
      this.setFocus();
    }
    this.focusTrap.activate();
    this.calciteSheetOpen.emit();
  }
  onBeforeClose() {
    this.calciteSheetBeforeClose.emit();
  }
  onClose() {
    this.calciteSheetClose.emit();
    this.focusTrap.deactivate();
    this.topLayer.hide();
  }
  setResizeHandleEl(el) {
    this.resizeHandleEl = el;
    this.refreshResize();
  }
  handleOutsideClose() {
    if (this.outsideCloseDisabled) {
      return;
    }
    this.open = false;
  }
  handleMutationObserver() {
    this.focusTrap.updateContainerElements();
  }
  render() {
    const { resizable, position, resizeValues } = this;
    const dir = this.direction;
    const isBlockPosition = position === "block-start" || position === "block-end";
    setAttribute(this.el, "aria-describedby", this.contentId);
    this.el.ariaLabel = this.label;
    this.el.ariaModal = "true";
    this.el.role = "dialog";
    return html`<div class=${safeClassMap({
      [CSS.container]: true,
      [CSS.containerOpen]: this.opened,
      [CSS.containerEmbedded]: this.embedded,
      [CSS_UTILITY.rtl]: dir === "rtl",
      [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
      [getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
  }
}
customElement("calcite-sheet", Sheet);
export {
  Sheet
};
