@six-group/ui-library 0.0.0-insider.0052ba1

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

@@ -0,0 +1,171 @@
+'use strict';
+
+var index = require('./index-C8rK7OAe.js');
+var slot = require('./slot-DBK7c7jH.js');
+
+const sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--shadow{box-shadow:var(--six-shadow-medium)}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";
+
+const toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
+const SixAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixShow = index.createEvent(this, "six-alert-show");
+        this.sixAfterShow = index.createEvent(this, "six-alert-after-show");
+        this.sixHide = index.createEvent(this, "six-alert-hide");
+        this.sixAfterHide = index.createEvent(this, "six-alert-after-hide");
+        this.isVisible = false;
+        /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Set to true to make the alert closable. */
+        this.closable = false;
+        /** The type of alert. */
+        this.type = 'primary';
+        /**
+         * The length of time, in milliseconds, the alert will show before closing itself.
+         * If the user hovers over the toast alert, the timer will pause.
+         * On leaving the element with the mouse, the timer resets.
+         */
+        this.duration = Infinity;
+        this.handleCloseClick = () => {
+            this.hide();
+        };
+        this.handleMouseEnter = () => {
+            this.pauseAutoHide();
+        };
+        this.handleMouseLeave = () => {
+            this.resetAutoHide();
+        };
+        this.handleTransitionEnd = (event) => {
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'opacity' && target.classList.contains('alert')) {
+                this.isVisible = this.open;
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+            }
+        };
+    }
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
+    }
+    handleDurationChange() {
+        this.restartAutoHide();
+    }
+    componentWillLoad() {
+        // Show on init if open
+        if (this.open) {
+            this.show();
+        }
+    }
+    /** Shows the alert. */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible) {
+            return;
+        }
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
+        }
+        this.isVisible = true;
+        this.open = true;
+        if (this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+        }
+    }
+    /** Hides the alert */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible) {
+            return;
+        }
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
+        }
+        clearTimeout(this.autoHideTimeout);
+        this.isVisible = false;
+        this.open = false;
+    }
+    /**
+     * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+     * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+     * calling this method again. The returned promise will resolve after the alert is hidden.
+     * @param adjustPosition  If true, the top and right position of the toast stack is shifted according to the
+     *                        six-root header's height and the presence of a vertical scrollbar.
+     */
+    async toast(adjustPosition = true) {
+        return new Promise((resolve) => {
+            var _a;
+            if (!toastStack.parentElement) {
+                document.body.append(toastStack);
+            }
+            toastStack.append(this.host);
+            if (adjustPosition) {
+                const sixRoot = document.querySelector('six-root');
+                const headerSlot = slot.getSlot(sixRoot, 'header');
+                const mainSlot = (_a = sixRoot === null || sixRoot === void 0 ? void 0 : sixRoot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('host main');
+                if (mainSlot != null && mainSlot instanceof HTMLElement) {
+                    const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;
+                    toastStack.style.right = `${scrollbarWidth}px`;
+                }
+                if (headerSlot != null) {
+                    const rect = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.getBoundingClientRect();
+                    toastStack.style.top = `${rect.top + rect.height}px`;
+                }
+            }
+            else {
+                toastStack.style.top = '0';
+                toastStack.style.right = '0';
+            }
+            requestAnimationFrame(() => this.show());
+            this.host.addEventListener('six-alert-after-hide', () => {
+                this.host.remove();
+                resolve();
+                // Remove the toast stack from the DOM when there are no more alerts
+                if (toastStack.querySelector('six-alert') === null) {
+                    toastStack.remove();
+                }
+            }, { once: true });
+        });
+    }
+    pauseAutoHide() {
+        clearTimeout(this.autoHideTimeout);
+    }
+    resetAutoHide() {
+        if (this.open && this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+        }
+    }
+    restartAutoHide() {
+        this.pauseAutoHide();
+        this.resetAutoHide();
+    }
+    render() {
+        const asToast = this.host.closest('.six-toast-stack') != null;
+        return (index.h("div", { key: 'cd9d14bef5923cf2ec8add1f61e92733aa9dd59f', part: "base", class: {
+                alert: true,
+                'alert--open': this.open,
+                'alert--visible': this.isVisible,
+                'alert--closable': this.closable,
+                'alert--primary': this.type === 'primary',
+                'alert--success': this.type === 'success',
+                'alert--info': this.type === 'info',
+                'alert--warning': this.type === 'warning',
+                'alert--danger': this.type === 'danger',
+                'alert--shadow': asToast,
+            }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("span", { key: 'fb6e8cf52eb87ddb1a81a797482457b3afccaa98', part: "icon", class: "alert__icon" }, index.h("slot", { key: '3d97a399ac05620214ef8a4d6a19c37a103f76a2', name: "icon" })), index.h("span", { key: '3984ce04838d33a688b6cfafb7827646e0e9d582', part: "message", class: "alert__message" }, index.h("slot", { key: 'f84ff31b7b74571b2ff9f074b617cb344313939e' })), this.closable && (index.h("span", { key: '5291d4a747001042ad9882c32427094019e16dbb', class: "alert__close" }, index.h("six-icon-button", { key: '48a38b0a283400ae84ed95df38a43ee6a41e1fb0', name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"],
+        "duration": ["handleDurationChange"]
+    }; }
+};
+SixAlert.style = sixAlertCss;
+
+exports.six_alert = SixAlert;
+//# sourceMappingURL=six-alert.entry.cjs.js.map
+
+//# sourceMappingURL=six-alert.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"six-alert.entry.cjs.js","mappings":"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","names":["getSlot","h"],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    var(--six-transition-medium) opacity ease,\n    var(--six-transition-medium) transform ease;\n  margin: inherit;\n\n  &:not(.alert--visible) {\n    @include hidden;\n  }\n}\n\n.alert--shadow {\n  box-shadow: var(--six-shadow-medium);\n}\n\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n\n  ::slotted(*) {\n    margin-left: var(--six-spacing-large);\n  }\n}\n\n.alert--primary {\n  border-top-color: var(--six-color-web-rock-900);\n\n  .alert__icon {\n    color: var(--six-color-web-rock-900);\n  }\n}\n\n.alert--success {\n  border-top-color: var(--six-color-success-600);\n\n  .alert__icon {\n    color: var(--six-color-success-600);\n  }\n}\n\n.alert--info {\n  border-top-color: var(--six-color-action-500);\n\n  .alert__icon {\n    color: var(--six-color-action-500);\n  }\n}\n\n.alert--warning {\n  border-top-color: var(--six-color-warning-800);\n\n  .alert__icon {\n    color: var(--six-color-warning-800);\n  }\n}\n\n.alert--danger {\n  border-top-color: var(--six-color-danger-900);\n\n  .alert__icon {\n    color: var(--six-color-danger-900);\n  }\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: hidden;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n  padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot } from '../../utils/slot';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n  tag: 'six-alert',\n  styleUrl: 'six-alert.scss',\n  shadow: true,\n})\nexport class SixAlert {\n  private autoHideTimeout?: number;\n\n  @Element() host!: HTMLSixAlertElement;\n\n  @State() isVisible = false;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The type of alert. */\n  @Prop({ reflect: true }) type: AlertType = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself.\n   * If the user hovers over the toast alert, the timer will pause.\n   * On leaving the element with the mouse, the timer resets.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  /** Shows the alert. */\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.isVisible = true;\n    this.open = true;\n\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\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    clearTimeout(this.autoHideTimeout);\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   * @param adjustPosition  If true, the top and right position of the toast stack is shifted according to the\n   *                        six-root header's height and the presence of a vertical scrollbar.\n   */\n  @Method()\n  async toast(adjustPosition = true) {\n    return new Promise<void>((resolve) => {\n      if (!toastStack.parentElement) {\n        document.body.append(toastStack);\n      }\n      toastStack.append(this.host);\n\n      if (adjustPosition) {\n        const sixRoot = document.querySelector('six-root');\n        const headerSlot = getSlot(sixRoot, 'header');\n        const mainSlot = sixRoot?.shadowRoot?.querySelector('host main');\n        if (mainSlot != null && mainSlot instanceof HTMLElement) {\n          const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;\n          toastStack.style.right = `${scrollbarWidth}px`;\n        }\n        if (headerSlot != null) {\n          const rect = headerSlot?.getBoundingClientRect();\n          toastStack.style.top = `${rect.top + rect.height}px`;\n        }\n      } else {\n        toastStack.style.top = '0';\n        toastStack.style.right = '0';\n      }\n\n      requestAnimationFrame(() => this.show());\n\n      this.host.addEventListener(\n        'six-alert-after-hide',\n        () => {\n          this.host.remove();\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('six-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  private resetAutoHide() {\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  private restartAutoHide() {\n    this.pauseAutoHide();\n    this.resetAutoHide();\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleMouseEnter = () => {\n    this.pauseAutoHide();\n  };\n\n  private handleMouseLeave = () => {\n    this.resetAutoHide();\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('alert')) {\n      this.isVisible = this.open;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    const asToast = this.host.closest('.six-toast-stack') != null;\n\n    return (\n      <div\n        part=\"base\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--visible': this.isVisible,\n          'alert--closable': this.closable,\n          'alert--primary': this.type === 'primary',\n          'alert--success': this.type === 'success',\n          'alert--info': this.type === 'info',\n          'alert--warning': this.type === 'warning',\n          'alert--danger': this.type === 'danger',\n          'alert--shadow': asToast,\n        }}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        onTransitionEnd={this.handleTransitionEnd}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </span>\n\n        <span part=\"message\" class=\"alert__message\">\n          <slot />\n        </span>\n\n        {this.closable && (\n          <span class=\"alert__close\">\n            <six-icon-button\n              name=\"clear\"\n              exportparts=\"base:close-button\"\n              onClick={this.handleCloseClick}\n            ></six-icon-button>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\nexport type AlertType = 'primary' | 'success' | 'info' | 'warning' | 'danger';\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-alert.entry.cjs.js","sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    var(--six-transition-medium) opacity ease,\n    var(--six-transition-medium) transform ease;\n  margin: inherit;\n\n  &:not(.alert--visible) {\n    @include hidden;\n  }\n}\n\n.alert--shadow {\n  box-shadow: var(--six-shadow-medium);\n}\n\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n\n  ::slotted(*) {\n    margin-left: var(--six-spacing-large);\n  }\n}\n\n.alert--primary {\n  border-top-color: var(--six-color-web-rock-900);\n\n  .alert__icon {\n    color: var(--six-color-web-rock-900);\n  }\n}\n\n.alert--success {\n  border-top-color: var(--six-color-success-600);\n\n  .alert__icon {\n    color: var(--six-color-success-600);\n  }\n}\n\n.alert--info {\n  border-top-color: var(--six-color-action-500);\n\n  .alert__icon {\n    color: var(--six-color-action-500);\n  }\n}\n\n.alert--warning {\n  border-top-color: var(--six-color-warning-800);\n\n  .alert__icon {\n    color: var(--six-color-warning-800);\n  }\n}\n\n.alert--danger {\n  border-top-color: var(--six-color-danger-900);\n\n  .alert__icon {\n    color: var(--six-color-danger-900);\n  }\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: hidden;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n  padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot } from '../../utils/slot';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n  tag: 'six-alert',\n  styleUrl: 'six-alert.scss',\n  shadow: true,\n})\nexport class SixAlert {\n  private autoHideTimeout?: number;\n\n  @Element() host!: HTMLSixAlertElement;\n\n  @State() isVisible = false;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The type of alert. */\n  @Prop({ reflect: true }) type: AlertType = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself.\n   * If the user hovers over the toast alert, the timer will pause.\n   * On leaving the element with the mouse, the timer resets.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  /** Shows the alert. */\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.isVisible = true;\n    this.open = true;\n\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\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    clearTimeout(this.autoHideTimeout);\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   * @param adjustPosition  If true, the top and right position of the toast stack is shifted according to the\n   *                        six-root header's height and the presence of a vertical scrollbar.\n   */\n  @Method()\n  async toast(adjustPosition = true) {\n    return new Promise<void>((resolve) => {\n      if (!toastStack.parentElement) {\n        document.body.append(toastStack);\n      }\n      toastStack.append(this.host);\n\n      if (adjustPosition) {\n        const sixRoot = document.querySelector('six-root');\n        const headerSlot = getSlot(sixRoot, 'header');\n        const mainSlot = sixRoot?.shadowRoot?.querySelector('host main');\n        if (mainSlot != null && mainSlot instanceof HTMLElement) {\n          const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;\n          toastStack.style.right = `${scrollbarWidth}px`;\n        }\n        if (headerSlot != null) {\n          const rect = headerSlot?.getBoundingClientRect();\n          toastStack.style.top = `${rect.top + rect.height}px`;\n        }\n      } else {\n        toastStack.style.top = '0';\n        toastStack.style.right = '0';\n      }\n\n      requestAnimationFrame(() => this.show());\n\n      this.host.addEventListener(\n        'six-alert-after-hide',\n        () => {\n          this.host.remove();\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('six-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  private resetAutoHide() {\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  private restartAutoHide() {\n    this.pauseAutoHide();\n    this.resetAutoHide();\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleMouseEnter = () => {\n    this.pauseAutoHide();\n  };\n\n  private handleMouseLeave = () => {\n    this.resetAutoHide();\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('alert')) {\n      this.isVisible = this.open;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    const asToast = this.host.closest('.six-toast-stack') != null;\n\n    return (\n      <div\n        part=\"base\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--visible': this.isVisible,\n          'alert--closable': this.closable,\n          'alert--primary': this.type === 'primary',\n          'alert--success': this.type === 'success',\n          'alert--info': this.type === 'info',\n          'alert--warning': this.type === 'warning',\n          'alert--danger': this.type === 'danger',\n          'alert--shadow': asToast,\n        }}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        onTransitionEnd={this.handleTransitionEnd}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </span>\n\n        <span part=\"message\" class=\"alert__message\">\n          <slot />\n        </span>\n\n        {this.closable && (\n          <span class=\"alert__close\">\n            <six-icon-button\n              name=\"clear\"\n              exportparts=\"base:close-button\"\n              onClick={this.handleCloseClick}\n            ></six-icon-button>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\nexport type AlertType = 'primary' | 'success' | 'info' | 'warning' | 'danger';\n"],"names":["getSlot","h"],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-C8rK7OAe.js');
+
+const sixAvatarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;--size:2rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--size);height:var(--size);background-color:var(--six-avatar-background-color);font-family:var(--six-font-sans);font-size:calc(var(--size) * 0.5);font-weight:var(--six-font-weight-normal);color:var(--six-avatar-color);overflow:hidden;user-select:none;vertical-align:middle;cursor:pointer;outline:none}.avatar:hover{box-shadow:var(--six-shadow-medium)}.avatar--circle{border-radius:var(--six-border-radius-circle)}.avatar--rounded{border-radius:var(--six-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}";
+
+const SixAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hasError = false;
+        /** The image source to use for the avatar. */
+        this.image = '';
+        /** Alternative text for the image. */
+        this.alt = '';
+        /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+        this.initials = '';
+        /** The shape of the avatar. */
+        this.shape = 'circle';
+        this.handleImageError = () => {
+            this.hasError = true;
+        };
+    }
+    render() {
+        return (index.h("div", { key: 'c18818d8ee0e4c16ecc7036dee47334eafa8d38d', part: "base", class: {
+                avatar: true,
+                'avatar--circle': this.shape === 'circle',
+                'avatar--rounded': this.shape === 'rounded',
+                'avatar--square': this.shape === 'square',
+            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (index.h("div", { key: '793124283385b4d78d269217c0f80a303ea3af01', part: "icon", class: "avatar__icon" }, index.h("slot", { key: '20046d36c15a800783c245fc9bd9f8a0c462cd00', name: "icon" }, index.h("six-icon", { key: 'e25b68320947163b737d94484d6bd5a43117f6d7' }, "person")))), this.initials && (index.h("div", { key: '7f9e5c67a482b081116c0038ff248e1fdb9662d1', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (index.h("img", { key: '44c10b4d2755543a5e77fc3d6b15e02ba917ef7d', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+    }
+};
+SixAvatar.style = sixAvatarCss;
+
+exports.six_avatar = SixAvatar;
+//# sourceMappingURL=six-avatar.entry.cjs.js.map
+
+//# sourceMappingURL=six-avatar.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"six-avatar.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,qnCAAqnC;;MCoB7nC,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMW,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGjB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAG,CAAA,GAAA,GAAG,EAAE;;AAGR,QAAA,IAAQ,CAAA,QAAA,GAAG,EAAE;;AAGb,QAAA,IAAK,CAAA,KAAA,GAAoC,QAAQ;AAEjD,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,SAAC;AAoCF;IAlCC,MAAM,GAAA;AACJ,QAAA,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AACzC,gBAAA,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAC3C,gBAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AAC1C,aAAA,EACD,IAAI,EAAC,OAAO,EACA,YAAA,EAAA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC,EAAA,EAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,EACnCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACfA,OAA2B,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,QAAA,CAAA,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,EAAA,EAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,CAAI,CAC5F,CACG;;;;;;;","names":["h"],"sources":["src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --size: The size of the avatar.\n */\n:host {\n  display: inline-block;\n\n  --size: 2rem;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--six-avatar-background-color);\n  font-family: var(--six-font-sans);\n  font-size: calc(var(--size) * 0.5);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-avatar-color);\n  overflow: hidden;\n  user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  outline: none;\n\n  &:hover {\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.avatar--circle {\n  border-radius: var(--six-border-radius-circle);\n}\n\n.avatar--rounded {\n  border-radius: var(--six-border-radius-medium);\n}\n\n.avatar--square {\n  border-radius: 0;\n}\n\n.avatar__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.avatar__initials {\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.avatar__image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\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 icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  private handleImageError = () => {\n    this.hasError = true;\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {this.initials === '' && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-avatar.entry.cjs.js","sources":["src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --size: The size of the avatar.\n */\n:host {\n  display: inline-block;\n\n  --size: 2rem;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--six-avatar-background-color);\n  font-family: var(--six-font-sans);\n  font-size: calc(var(--size) * 0.5);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-avatar-color);\n  overflow: hidden;\n  user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  outline: none;\n\n  &:hover {\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.avatar--circle {\n  border-radius: var(--six-border-radius-circle);\n}\n\n.avatar--rounded {\n  border-radius: var(--six-border-radius-medium);\n}\n\n.avatar--square {\n  border-radius: 0;\n}\n\n.avatar__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.avatar__initials {\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.avatar__image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\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 icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  private handleImageError = () => {\n    this.hasError = true;\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {this.initials === '' && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,qnCAAqnC;;MCoB7nC,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMW,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGjB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAG,CAAA,GAAA,GAAG,EAAE;;AAGR,QAAA,IAAQ,CAAA,QAAA,GAAG,EAAE;;AAGb,QAAA,IAAK,CAAA,KAAA,GAAoC,QAAQ;AAEjD,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,SAAC;AAoCF;IAlCC,MAAM,GAAA;AACJ,QAAA,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AACzC,gBAAA,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAC3C,gBAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AAC1C,aAAA,EACD,IAAI,EAAC,OAAO,EACA,YAAA,EAAA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC,EAAA,EAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,EACnCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACfA,OAA2B,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,QAAA,CAAA,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,EAAA,EAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,CAAI,CAC5F,CACG;;;;;;;"}

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

@@ -0,0 +1,38 @@
+'use strict';
+
+var index = require('./index-C8rK7OAe.js');
+
+const sixBadgeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";
+
+const SixBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** The badge's type. */
+        this.type = 'primary';
+        /** Set to true to draw a pill-style badge with rounded edges. */
+        this.pill = false;
+        /** Set to true to make the badge pulsate to draw attention. */
+        this.pulse = false;
+    }
+    render() {
+        return (index.h("span", { key: '5f279e992f0f009a0a2be5128e21290c0ce9990a', part: "base", class: {
+                badge: true,
+                // Types
+                'badge--primary': this.type === 'primary',
+                'badge--secondary': this.type === 'secondary',
+                'badge--success': this.type === 'success',
+                'badge--warning': this.type === 'warning',
+                'badge--danger': this.type === 'danger',
+                'badge--action': this.type === 'action',
+                'badge--info': this.type === 'info',
+                'badge--pill': this.pill,
+                'badge--pulse': this.pulse,
+            }, role: "status" }, index.h("slot", { key: '08847cb32936a89c9407d36f9c94e32a35baa1fb' })));
+    }
+};
+SixBadge.style = sixBadgeCss;
+
+exports.six_badge = SixBadge;
+//# sourceMappingURL=six-badge.entry.cjs.js.map
+
+//# sourceMappingURL=six-badge.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"six-badge.entry.cjs.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,iyDAAiyD;;MCkBxyD,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAmF,SAAS;;AAGhG,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;;AAGZ,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AA0BtB;IAxBC,MAAM,GAAA;AACJ,QAAA,QACEA,OACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;;AAGX,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;AAC7C,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACvC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACvC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;AAC3B,aAAA,EACD,IAAI,EAAC,QAAQ,EAAA,EAEbA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;","names":["h"],"sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-x-small);\n  font-weight: var(--six-font-weight-semibold);\n  letter-spacing: var(--six-letter-spacing-normal);\n  line-height: 1;\n  border-radius: var(--six-border-radius-small);\n  white-space: nowrap;\n  padding: 3px 6px;\n  user-select: none;\n  cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n  background-color: var(--six-color-web-rock-900);\n  color: var(--six-color-white);\n}\n\n.badge--success {\n  background-color: var(--six-color-success-500);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n  background-color: var(--six-color-warning-700);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n  background-color: var(--six-color-danger-800);\n  color: var(--six-color-white);\n}\n\n.badge--action {\n  background-color: var(--six-color-action-500);\n  color: var(--six-color-white);\n}\n\n.badge--primary {\n  background-color: var(--six-color-clay-50);\n  color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n  animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n  --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n  --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n  --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n  --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n  --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n  --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 0.5rem transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\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 badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-badge.entry.cjs.js","sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-x-small);\n  font-weight: var(--six-font-weight-semibold);\n  letter-spacing: var(--six-letter-spacing-normal);\n  line-height: 1;\n  border-radius: var(--six-border-radius-small);\n  white-space: nowrap;\n  padding: 3px 6px;\n  user-select: none;\n  cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n  background-color: var(--six-color-web-rock-900);\n  color: var(--six-color-white);\n}\n\n.badge--success {\n  background-color: var(--six-color-success-500);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n  background-color: var(--six-color-warning-700);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n  background-color: var(--six-color-danger-800);\n  color: var(--six-color-white);\n}\n\n.badge--action {\n  background-color: var(--six-color-action-500);\n  color: var(--six-color-white);\n}\n\n.badge--primary {\n  background-color: var(--six-color-clay-50);\n  color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n  animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n  --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n  --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n  --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n  --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n  --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n  --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 0.5rem transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\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 badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,iyDAAiyD;;MCkBxyD,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAmF,SAAS;;AAGhG,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;;AAGZ,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AA0BtB;IAxBC,MAAM,GAAA;AACJ,QAAA,QACEA,OACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;;AAGX,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;AAC7C,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACvC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACvC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;AAC3B,aAAA,EACD,IAAI,EAAC,QAAQ,EAAA,EAEbA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;"}

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

@@ -0,0 +1,133 @@
+'use strict';
+
+var index = require('./index-C8rK7OAe.js');
+var slot = require('./slot-DBK7c7jH.js');
+var form = require('./form-CaXKJAMY.js');
+
+const sixButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none;flex:0 0 auto;display:flex;align-items:center}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:1px}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button.button--action-outline{border-color:var(--six-color-action-500);background-color:var(--six-color-white);color:var(--six-color-action-500)}.button.button--action-outline.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action-outline:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--action-outline:active:not(.button--disabled){border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";
+
+const SixButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixBlur = index.createEvent(this, "six-button-blur");
+        this.sixFocus = index.createEvent(this, "six-button-focus");
+        this.hasFocus = false;
+        this.hasLabel = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        /** The button's type. */
+        this.type = 'primary';
+        /** The button's size. */
+        this.size = 'medium';
+        /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+        this.caret = false;
+        /** Set to true to disable the button. */
+        this.disabled = false;
+        /** Set to true to draw the button in a loading state. */
+        this.loading = false;
+        /** Set to true to draw a pill-style button with rounded edges. */
+        this.pill = false;
+        /** Set to true to draw a circle button. */
+        this.circle = false;
+        /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+        this.submit = false;
+        /** Indicates if activating the button should reset the form. */
+        this.reset = false;
+        /** An optional name for the button. Ignored when `href` is set. */
+        this.name = '';
+        /** An optional value for the button. Ignored when `href` is set. */
+        this.value = '';
+        this.handleSlotChange = () => {
+            this.hasLabel = slot.hasSlot(this.host);
+            this.hasPrefix = slot.hasSlot(this.host, 'prefix');
+            this.hasSuffix = slot.hasSlot(this.host, 'suffix');
+            // set the correct icon size for suffix and prefix icons
+            const prefixIcon = this.host.querySelector('[slot="prefix"]');
+            const suffixIcon = this.host.querySelector('[slot="suffix"]');
+            if ((prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.tagName.toLowerCase()) === 'six-icon') {
+                prefixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));
+            }
+            if ((suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.tagName.toLowerCase()) === 'six-icon') {
+                suffixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));
+            }
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleClick = (event) => {
+            if (this.disabled || this.loading) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            if (this.submit) {
+                event.preventDefault();
+                form.submitForm(this.host);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    /** Sets focus on the button. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeButton) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the button. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeButton) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    mapSizeToIconSize(buttonSize) {
+        const sizeMap = {
+            small: 'xSmall',
+            medium: 'small',
+            large: 'medium',
+        };
+        return sizeMap[buttonSize] || 'small'; // Default to small
+    }
+    render() {
+        const isLink = this.href != null;
+        const isButton = !isLink;
+        const Button = isLink ? 'a' : 'button';
+        return (index.h("div", { key: '6eba8f1f34f9dfa51d29e4349870994acf7b89fb', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, index.h(Button, { key: '77cd544148f4ea4dcf2c6b34c4c6d62d4372372d', ref: (el) => (this.nativeButton = el), part: "base", class: {
+                button: true,
+                // Types
+                'button--secondary': this.type === 'secondary',
+                'button--primary': this.type === 'primary',
+                'button--link': this.type === 'link',
+                'button--success': this.type === 'success',
+                'button--warning': this.type === 'warning',
+                'button--danger': this.type === 'danger',
+                'button--action': this.type === 'action',
+                'button--action-outline': this.type === 'action-outline',
+                // Sizes
+                'button--small': this.size === 'small',
+                'button--medium': this.size === 'medium',
+                'button--large': this.size === 'large',
+                // Modifiers
+                'button--caret': this.caret,
+                'button--circle': this.circle,
+                'button--disabled': this.disabled,
+                'button--focused': this.hasFocus,
+                'button--loading': this.loading,
+                'button--pill': this.pill,
+                'button--has-label': this.hasLabel,
+                'button--has-prefix': this.hasPrefix,
+                'button--has-suffix': this.hasSuffix,
+            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, index.h("span", { key: '0fb19c85adc826ed6e92b306f734185e3557e30f', part: "prefix", class: "button__prefix" }, index.h("slot", { key: '8223eb8644d495ef27cd175a905ab68c3d10f14f', onSlotchange: this.handleSlotChange, name: "prefix" })), index.h("span", { key: '00d407ea8d28b9e515992a872cc91705e2906a24', part: "label", class: "button__label" }, index.h("slot", { key: '28fb5d1061bfdf0f404e2241ccf6f16b4e113ba7', onSlotchange: this.handleSlotChange })), index.h("span", { key: '65e82de3e6851445627b31212bbbeccc8ca85d35', part: "suffix", class: "button__suffix" }, index.h("slot", { key: 'd9608fad50cafb5fcc14e1eecd9e47cf99edcb14', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (index.h("span", { key: '4c8b4ad77d69e4a189621f53e3c20dbb7504c4cb', part: "caret", class: "button__caret" }, index.h("svg", { key: '16b2146dd6bd99677cadb4b2fe5cf67a4e32a39d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '4cdd831978519dcb553a929fe54f6bd49b25fbc5', points: "6 9 12 15 18 9" })))), this.loading && index.h("six-spinner", { key: 'df087e05782f46995bdc6f6325b4a610f74ce971' }))));
+    }
+    get host() { return index.getElement(this); }
+};
+SixButton.style = sixButtonCss;
+
+exports.six_button = SixButton;
+//# sourceMappingURL=six-button.entry.cjs.js.map
+
+//# sourceMappingURL=six-button.cjs.entry.js.map