@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.ec3ffc2

package/dist/cjs/six-details.cjs.entry.js

@@ -2,145 +2,147 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f6daa5b.js');
-const focusVisible = require('./focus-visible-0b352c74.js');
+const index = require('./index-417a06c8.js');
+const focusVisible = require('./focus-visible-e2c9255a.js');
 
-const sixDetailsCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details--open:hover{color:var(--six-input-color-focus)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";
+const sixDetailsCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;--horizontal-padding:var(--six-spacing-medium);font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium) var(--horizontal-padding);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";
+const SixDetailsStyle0 = sixDetailsCss;
 
 let id = 0;
 const SixDetails = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixShow = index.createEvent(this, "six-details-show", 7);
-    this.sixAfterShow = index.createEvent(this, "six-details-after-show", 7);
-    this.sixHide = index.createEvent(this, "six-details-hide", 7);
-    this.sixAfterHide = index.createEvent(this, "six-details-after-hide", 7);
-    this.componentId = `details-${++id}`;
-    this.isVisible = false;
-    this.animateSummaryIcon = true;
-    this.open = false;
-    this.summary = '';
-    this.summaryIcon = undefined;
-    this.summaryIconSize = 'inherit';
-    this.disabled = false;
-    this.inline = false;
-    this.selectableEmpty = false;
-    this.hasContent = true;
-  }
-  handleOpenChange() {
-    if (this.body) {
-      this.open ? this.show() : this.hide();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixShow = index.createEvent(this, "six-details-show", 7);
+        this.sixAfterShow = index.createEvent(this, "six-details-after-show", 7);
+        this.sixHide = index.createEvent(this, "six-details-hide", 7);
+        this.sixAfterHide = index.createEvent(this, "six-details-after-hide", 7);
+        this.componentId = `details-${++id}`;
+        this.isVisible = false;
+        this.handleBodyTransitionEnd = (event) => {
+            if (this.body == null)
+                return;
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+                this.body.style.overflow = this.open ? 'visible' : 'hidden';
+                this.body.style.height = this.open ? 'auto' : '0';
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+                this.body.hidden = !this.open;
+            }
+        };
+        this.handleSummaryClick = () => {
+            var _a;
+            if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+                this.open ? this.hide() : this.show();
+                (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.handleSummaryKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.open ? this.hide() : this.show();
+            }
+            if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.hide();
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.show();
+            }
+        };
+        this.animateSummaryIcon = true;
+        this.open = false;
+        this.summary = '';
+        this.summaryIcon = undefined;
+        this.summaryIconSize = 'inherit';
+        this.disabled = false;
+        this.inline = false;
+        this.selectableEmpty = false;
+        this.hasContent = true;
     }
-  }
-  connectedCallback() {
-    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
-    this.handleSummaryClick = this.handleSummaryClick.bind(this);
-    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
-  }
-  componentDidLoad() {
-    focusVisible.focusVisible.observe(this.details);
-    this.body.hidden = !this.open;
-    // Show on init if open
-    if (this.open) {
-      this.show();
+    handleOpenChange() {
+        if (this.body != null) {
+            this.open ? this.show() : this.hide();
+        }
     }
-  }
-  disconnectedCallback() {
-    focusVisible.focusVisible.unobserve(this.details);
-  }
-  /** Shows the detail body */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
-      return;
+    componentDidLoad() {
+        if (this.details == null || this.body == null)
+            return;
+        focusVisible.focusVisible.observe(this.details);
+        this.body.hidden = !this.open;
+        // Show on init if open
+        if (this.open) {
+            this.show();
+        }
     }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    disconnectedCallback() {
+        if (this.details != null) {
+            focusVisible.focusVisible.unobserve(this.details);
+        }
     }
-    this.body.hidden = false;
-    if (this.body.scrollHeight === 0) {
-      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
-      // intiially, but not immediately visible (i.e. in a tab panel).
-      this.body.style.height = 'auto';
-      this.body.style.overflow = 'visible';
+    /** Shows the detail body */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible || this.body == null)
+            return;
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
+        }
+        this.body.hidden = false;
+        if (this.body.scrollHeight === 0) {
+            // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
+            // initially, but not immediately visible (i.e. in a tab panel).
+            this.body.style.height = 'auto';
+            this.body.style.overflow = 'visible';
+        }
+        else {
+            this.body.style.height = `${this.body.scrollHeight}px`;
+            this.body.style.overflow = 'hidden';
+        }
+        this.isVisible = true;
+        this.open = true;
     }
-    else {
-      this.body.style.height = `${this.body.scrollHeight}px`;
-      this.body.style.overflow = 'hidden';
+    /** Hides the detail body */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible || this.body == null)
+            return;
+        const body = this.body;
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
+        }
+        // We can't transition out of `height: auto`, so let's set it to the current height first
+        body.style.height = `${body.scrollHeight}px`;
+        body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            body.style.height = '0';
+        });
+        this.isVisible = false;
+        this.open = false;
     }
-    this.isVisible = true;
-    this.open = true;
-  }
-  /** Hides the detail body */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
-      return;
+    render() {
+        const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
+        return (index.h("div", { key: '790a6c1cdc4bbc6c266f9e24bf7c94d151379115', ref: (el) => (this.details = el), part: "base", class: {
+                details: true,
+                'details--open': this.open,
+                'details--disabled': this.disabled,
+                inline: this.inline,
+            } }, index.h("header", { key: 'e02a32f9923779375d81ee3d79d89aa2ddea38a1', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, index.h("div", { key: 'd8647eb075674116011662baf9b8baf3130ae0b7', part: "summary", class: "details__summary" }, index.h("slot", { key: '5e53c611396e795eb725e4ff364127a781544aad', name: "summary" }, this.summary)), index.h("span", { key: 'a2108bba713114123324ab7e41a250755daa5204', part: "summary-icon", class: {
+                'details__summary-icon': true,
+                'details__summary-icon--animate': this.animateSummaryIcon,
+            } }, index.h("slot", { key: '344e5c319ce8e8fe2171afa277a4799c8477178b', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && index.h("six-icon", { key: '2b0fc2a643d699fcd17138d8cbf7320957d909b6', size: this.summaryIconSize }, summaryIcon)))), index.h("div", { key: 'e09bd4d2cb12bc92c595db4ada7d435b24453fb8', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, index.h("div", { key: '065ff7a042f603ccbccd137ecaba36016ccadf6b', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, index.h("slot", { key: 'c7fa18ef6842f4f8af87e02d7a2e7ae892664276' })))));
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
-    }
-    // We can't transition out of `height: auto`, so let's set it to the current height first
-    this.body.style.height = `${this.body.scrollHeight}px`;
-    this.body.style.overflow = 'hidden';
-    requestAnimationFrame(() => {
-      this.body.style.height = '0';
-    });
-    this.isVisible = false;
-    this.open = false;
-  }
-  handleBodyTransitionEnd(event) {
-    const target = event.target;
-    // Ensure we only emit one event when the target element is no longer visible
-    if (event.propertyName === 'height' && target.classList.contains('details__body')) {
-      this.body.style.overflow = this.open ? 'visible' : 'hidden';
-      this.body.style.height = this.open ? 'auto' : '0';
-      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-      this.body.hidden = !this.open;
-    }
-  }
-  handleSummaryClick() {
-    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
-      this.open ? this.hide() : this.show();
-      this.header.focus();
-    }
-  }
-  handleSummaryKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this.open ? this.hide() : this.show();
-    }
-    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.hide();
-    }
-    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.show();
-    }
-  }
-  render() {
-    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
-    return (index.h("div", { ref: (el) => (this.details = el), part: "base", class: {
-        details: true,
-        'details--open': this.open,
-        'details--disabled': this.disabled,
-        inline: this.inline,
-      } }, index.h("header", { ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, index.h("div", { part: "summary", class: "details__summary" }, index.h("slot", { name: "summary" }, this.summary)), index.h("span", { part: "summary-icon", class: {
-        'details__summary-icon': true,
-        'details__summary-icon--animate': this.animateSummaryIcon,
-      } }, index.h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && index.h("six-icon", { size: this.summaryIconSize }, summaryIcon)))), index.h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, index.h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, index.h("slot", null)))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
 };
-SixDetails.style = sixDetailsCss;
+SixDetails.style = SixDetailsStyle0;
 
 exports.six_details = SixDetails;
 

package/dist/cjs/six-details.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-details.entry.cjs.js","mappings":"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","names":["focusVisible","h"],"sources":["./src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","./src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --hide-duration: var(--six-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--six-transition-medium);\n  --show-timing-function: ease;\n\n  font-family: var(--six-font-family);\n  display: block;\n}\n\n.details {\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: var(--six-border-radius-medium);\n  color: var(--six-details-color);\n  overflow-anchor: none;\n  font-size: var(--six-input-font-size-medium);\n\n  &:hover:not(.details--disabled):not(.details--open) {\n    border-color: var(--six-input-border-color-hover);\n  }\n\n  &.inline {\n    border: none;\n    color: var(--six-sidebar-color);\n\n    &:hover {\n      background-color: var(--six-sidebar-hover-background-color);\n    }\n\n    &.details--open {\n      background-color: var(--six-color-web-rock-50);\n\n      &:hover {\n        border: none;\n        box-shadow: none;\n      }\n\n      & > .details__header {\n        color: var(--six-sidebar-color);\n        font-weight: var(--six-font-weight-bold);\n        background-color: var(--six-sidebar-header-background-color);\n      }\n    }\n  }\n}\n\n.details--disabled {\n  background-color: var(--six-input-background-color-disabled);\n  border-color: var(--six-input-border-color-disabled);\n  color: var(--six-input-color-disabled);\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--six-spacing-medium);\n  user-select: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n  border-width: 1px;\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.2em;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n  transform: rotate(-180deg);\n}\n\n.details--open:hover {\n  color: var(--six-input-color-focus);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--six-spacing-medium);\n}\n","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  body: HTMLElement;\n  componentId = `details-${++id}`;\n  details: HTMLElement;\n  header: HTMLElement;\n  isVisible = false;\n\n  /** Indicates whether or not 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  @Prop() readonly hasContent: boolean = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body) {\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  connectedCallback() {\n    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);\n    this.handleSummaryClick = this.handleSummaryClick.bind(this);\n    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.details);\n\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    focusVisible.unobserve(this.details);\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) {\n      return;\n    }\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      // intiially, 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\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) {\n      return;\n    }\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    this.body.style.height = `${this.body.scrollHeight}px`;\n    this.body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      this.body.clientWidth; // force a reflow\n      this.body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  handleBodyTransitionEnd(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 === '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  handleSummaryClick() {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header.focus();\n    }\n  }\n\n  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.entry.cjs.js","mappings":"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","names":["focusVisible","h"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n * @prop --horizontal-padding: The horizontal padding\n */\n:host {\n  --hide-duration: var(--six-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--six-transition-medium);\n  --show-timing-function: ease;\n  --horizontal-padding: var(--six-spacing-medium);\n\n  font-family: var(--six-font-family);\n  display: block;\n}\n\n.details {\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: var(--six-border-radius-medium);\n  color: var(--six-details-color);\n  overflow-anchor: none;\n  font-size: var(--six-input-font-size-medium);\n\n  &:hover:not(.details--disabled):not(.details--open) {\n    border-color: var(--six-input-border-color-hover);\n  }\n\n  &.inline {\n    border: none;\n    color: var(--six-sidebar-color);\n\n    &:hover {\n      background-color: var(--six-sidebar-hover-background-color);\n    }\n\n    &.details--open {\n      background-color: var(--six-color-web-rock-50);\n\n      &:hover {\n        border: none;\n        box-shadow: none;\n      }\n\n      & > .details__header {\n        color: var(--six-sidebar-color);\n        font-weight: var(--six-font-weight-bold);\n        background-color: var(--six-sidebar-header-background-color);\n      }\n    }\n  }\n}\n\n.details--disabled {\n  background-color: var(--six-input-background-color-disabled);\n  border-color: var(--six-input-border-color-disabled);\n  color: var(--six-input-color-disabled);\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--six-spacing-medium) var(--horizontal-padding);\n  user-select: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n  border-width: 1px;\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.2em;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n  transform: rotate(-180deg);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--six-spacing-medium);\n}\n","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  // eslint-disable-next-line @stencil-community/ban-default-true\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}