@six-group/ui-library 0.0.0-insider.faf050a → 0.0.0-insider.fbc1348

package/dist/components/six-alert.js

@@ -1,8 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as getSlot } from './slot.js';
 import { d as defineCustomElement$3 } from './six-icon2.js';
 import { d as defineCustomElement$2 } from './six-icon-button2.js';
 
-const sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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--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 sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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 SixAlertStyle0 = sixAlertCss;
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
 const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLElement {
@@ -17,8 +19,11 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
         this.handleCloseClick = () => {
             this.hide();
         };
-        this.handleMouseMove = () => {
-            this.restartAutoHide();
+        this.handleMouseEnter = () => {
+            this.pauseAutoHide();
+        };
+        this.handleMouseLeave = () => {
+            this.resetAutoHide();
         };
         this.handleTransitionEnd = (event) => {
             const target = event.target;
@@ -82,13 +87,33 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
      * 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() {
+    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 = 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();
@@ -100,14 +125,21 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
             }, { once: true });
         });
     }
-    restartAutoHide() {
+    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() {
-        return (h("div", { part: "base", class: {
+        const asToast = this.host.closest('.six-toast-stack') != null;
+        return (h("div", { key: 'cd9d14bef5923cf2ec8add1f61e92733aa9dd59f', part: "base", class: {
                 alert: true,
                 'alert--open': this.open,
                 'alert--visible': this.isVisible,
@@ -117,14 +149,15 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
                 'alert--info': this.type === 'info',
                 'alert--warning': this.type === 'warning',
                 'alert--danger': this.type === 'danger',
-            }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, h("span", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("span", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("span", { class: "alert__close" }, h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
+                '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 }, h("span", { key: 'fb6e8cf52eb87ddb1a81a797482457b3afccaa98', part: "icon", class: "alert__icon" }, h("slot", { key: '3d97a399ac05620214ef8a4d6a19c37a103f76a2', name: "icon" })), h("span", { key: '3984ce04838d33a688b6cfafb7827646e0e9d582', part: "message", class: "alert__message" }, h("slot", { key: 'f84ff31b7b74571b2ff9f074b617cb344313939e' })), this.closable && (h("span", { class: "alert__close" }, h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "open": ["handleOpenChange"],
         "duration": ["handleDurationChange"]
     }; }
-    static get style() { return sixAlertCss; }
+    static get style() { return SixAlertStyle0; }
 }, [1, "six-alert", {
         "open": [1540],
         "closable": [516],

package/dist/components/six-alert.js.map

@@ -1 +1 @@
-{"file":"six-alert.js","mappings":"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","names":["SixAlert"],"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: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n  margin: inherit;\n\n  &:not(.alert--visible) {\n    @include hidden;\n  }\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, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\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   */\n  @Method()\n  async toast() {\n    return new Promise<void>((resolve) => {\n      if (!toastStack.parentElement) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.append(this.host);\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 handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\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  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  render() {\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        }}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        onMouseMove={this.handleMouseMove}\n        onTransitionEnd={this.handleTransitionEnd}\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"],"version":3}
+{"file":"six-alert.js","mappings":"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","names":["SixAlert"],"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: var(--six-transition-medium) opacity ease, 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/components/six-avatar.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './six-icon2.js';
 
-const sixAvatarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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-elevation-4dp)}.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 sixAvatarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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 SixAvatarStyle0 = sixAvatarCss;
 
 const SixAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SixAvatar extends HTMLElement {
     constructor() {
@@ -18,14 +19,14 @@ const SixAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SixAvatar extends HTM
         this.shape = 'circle';
     }
     render() {
-        return (h("div", { part: "base", class: {
+        return (h("div", { key: 'a34616731683542d8bbdc16778ab34093654d773', 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 === '' && (h("div", { part: "icon", class: "avatar__icon" }, h("slot", { name: "icon" }, h("six-icon", null, "person")))), this.initials && (h("div", { part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
     }
-    static get style() { return sixAvatarCss; }
+    static get style() { return SixAvatarStyle0; }
 }, [1, "six-avatar", {
         "image": [1],
         "alt": [1],

package/dist/components/six-avatar.js.map

@@ -1 +1 @@
-{"file":"six-avatar.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,u/BAAu/B;;MCoB//BA,WAAS;;;;;QAeZ,qBAAgB,GAAG;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB,CAAC;wBAhBkB,KAAK;qBAGT,EAAE;mBAGJ,EAAE;wBAGG,EAAE;qBAG4B,QAAQ;;IAMzD,MAAM;QACJ,QACE,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnB,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACnC,YAAM,IAAI,EAAC,MAAM,IACf,6BAA2B,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZ,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixAvatar"],"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-elevation-4dp);\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}
+{"file":"six-avatar.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,0/BAA0/B,CAAC;AAChhC,wBAAe,YAAY;;MCmBdA,WAAS;;;;;QAeZ,qBAAgB,GAAG;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB,CAAC;wBAhBkB,KAAK;qBAGT,EAAE;mBAGJ,EAAE;wBAGG,EAAE;qBAG4B,QAAQ;;IAMzD,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnB,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACnC,YAAM,IAAI,EAAC,MAAM,IACf,6BAA2B,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZ,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixAvatar"],"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/components/six-badge.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const sixBadgeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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 sixBadgeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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 SixBadgeStyle0 = sixBadgeCss;
 
 const SixBadge$1 = /*@__PURE__*/ proxyCustomElement(class SixBadge extends HTMLElement {
     constructor() {
@@ -12,7 +13,7 @@ const SixBadge$1 = /*@__PURE__*/ proxyCustomElement(class SixBadge extends HTMLE
         this.pulse = false;
     }
     render() {
-        return (h("span", { part: "base", class: {
+        return (h("span", { key: '25b1dedcb8bc33ec21f80ce88ca7a30ea62181c0', part: "base", class: {
                 badge: true,
                 // Types
                 'badge--primary': this.type === 'primary',
@@ -24,9 +25,9 @@ const SixBadge$1 = /*@__PURE__*/ proxyCustomElement(class SixBadge extends HTMLE
                 'badge--info': this.type === 'info',
                 'badge--pill': this.pill,
                 'badge--pulse': this.pulse,
-            }, role: "status" }, h("slot", null)));
+            }, role: "status" }, h("slot", { key: 'ac5c9645468d85700838f1cfaf71546bbb1b747b' })));
     }
-    static get style() { return sixBadgeCss; }
+    static get style() { return SixBadgeStyle0; }
 }, [1, "six-badge", {
         "type": [1],
         "pill": [4],

package/dist/components/six-badge.js.map

@@ -1 +1 @@
-{"file":"six-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mqDAAmqD;;MCkB1qDA,UAAQ;;;;;oBAE4E,SAAS;oBAGzF,KAAK;qBAGJ,KAAK;;IAErB,MAAM;QACJ,QACE,YACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;;gBAGX,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;gBAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;aAC3B,EACD,IAAI,EAAC,QAAQ,IAEb,eAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixBadge"],"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}
+{"file":"six-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,sqDAAsqD,CAAC;AAC3rD,uBAAe,WAAW;;MCiBbA,UAAQ;;;;;oBAE4E,SAAS;oBAGzF,KAAK;qBAGJ,KAAK;;IAErB,MAAM;QACJ,QACE,6DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;;gBAGX,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;gBAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;aAC3B,EACD,IAAI,EAAC,QAAQ,IAEb,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixBadge"],"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/components/six-button.js

@@ -1,145 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as hasSlot } from './slot.js';
-import { s as submitForm } from './form.js';
-import { d as defineCustomElement$2 } from './six-spinner2.js';
-
-const sixButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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}.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:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400)}.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--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$1 = /*@__PURE__*/ proxyCustomElement(class SixButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.sixBlur = createEvent(this, "six-button-blur", 7);
-        this.sixFocus = createEvent(this, "six-button-focus", 7);
-        this.handleSlotChange = () => {
-            this.hasLabel = hasSlot(this.host);
-            this.hasPrefix = hasSlot(this.host, 'prefix');
-            this.hasSuffix = hasSlot(this.host, 'suffix');
-        };
-        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();
-                submitForm(this.host);
-            }
-        };
-        this.hasFocus = false;
-        this.hasLabel = false;
-        this.hasPrefix = false;
-        this.hasSuffix = false;
-        this.type = 'primary';
-        this.size = 'medium';
-        this.caret = false;
-        this.disabled = false;
-        this.loading = false;
-        this.pill = false;
-        this.circle = false;
-        this.submit = false;
-        this.reset = false;
-        this.name = '';
-        this.value = '';
-        this.href = undefined;
-        this.target = undefined;
-        this.download = undefined;
-    }
-    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();
-    }
-    render() {
-        const isLink = this.href != null;
-        const isButton = !isLink;
-        const Button = isLink ? 'a' : 'button';
-        return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { 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',
-                // 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" }, h("span", { part: "prefix", class: "button__prefix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { part: "label", class: "button__label" }, h("slot", { onSlotchange: this.handleSlotChange })), h("span", { part: "suffix", class: "button__suffix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { part: "caret", class: "button__caret" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", null))));
-    }
-    get host() { return this; }
-    static get style() { return sixButtonCss; }
-}, [1, "six-button", {
-        "type": [513],
-        "size": [513],
-        "caret": [4],
-        "disabled": [516],
-        "loading": [516],
-        "pill": [516],
-        "circle": [516],
-        "submit": [516],
-        "reset": [516],
-        "name": [1],
-        "value": [1],
-        "href": [1],
-        "target": [1],
-        "download": [1],
-        "hasFocus": [32],
-        "hasLabel": [32],
-        "hasPrefix": [32],
-        "hasSuffix": [32],
-        "setFocus": [64],
-        "removeFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["six-button", "six-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "six-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SixButton$1);
-            }
-            break;
-        case "six-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { S as SixButton$1, d as defineCustomElement$1 } from './six-button2.js';
 
 const SixButton = SixButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-button.js.map

@@ -1 +1 @@
-{"file":"six-button.js","mappings":"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","names":["SixButton"],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--six-border-width);\n  border-radius: 0;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n    var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: inherit;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.button--disabled {\n    pointer-events: none;\n  }\n\n  // Clicks on icons shouldn't prevent the button from gaining focus\n  ::slotted(six-icon) {\n    pointer-events: none;\n  }\n}\n\n.button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n\n  &.button--secondary {\n    background-color: var(--six-color-white);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n      border-color: var(--six-color-web-rock-400);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-300);\n      border-color: var(--six-color-web-rock-900);\n      border-width: 1px;\n    }\n  }\n\n  &.button--primary {\n    background-color: var(--six-color-web-rock-900);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-800);\n      border-color: var(--six-color-web-rock-800);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-900);\n      opacity: 70%;\n    }\n  }\n\n  &.button--link {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--six-color-action-500);\n\n    &.button--disabled {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &:hover:not(.button--disabled) {\n      color: var(--six-color-action-600);\n    }\n\n    &:active:not(.button--disabled) {\n      color: var(--six-color-action-light-to-be-defined);\n    }\n  }\n\n  &.button--danger {\n    background-color: var(--six-color-danger-800);\n    border-color: var(--six-color-danger-800);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-danger-900);\n      border-color: var(--six-color-danger-900);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-danger-800);\n      opacity: 70%;\n    }\n  }\n\n  &.button--warning {\n    background-color: var(--six-color-warning-700);\n    border-color: var(--six-color-warning-700);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-warning-800);\n      border-color: var(--six-color-warning-800);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-warning-700);\n      opacity: 70%;\n    }\n  }\n\n  &.button--success {\n    background-color: var(--six-color-success-500);\n    border-color: var(--six-color-success-500);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-success-600);\n      border-color: var(--six-color-success-600);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-success-500);\n      opacity: 70%;\n    }\n  }\n\n  &.button--action {\n    background-color: var(--six-color-action-500);\n    border-color: var(--six-color-action-500);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-action-600);\n      border-color: var(--six-color-action-600);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-action-500);\n      opacity: 70%;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--six-button-font-size-small);\n  height: var(--six-height-small);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: var(--six-height-medium);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n  font-size: var(--six-button-font-size-large);\n  height: var(--six-height-large);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n  &.button--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.button--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.button--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n  font-size: revert;\n\n  &.button--small {\n    width: var(--six-height-small);\n    border-radius: 50%;\n  }\n\n  &.button--medium {\n    width: var(--six-height-medium);\n    border-radius: 50%;\n  }\n\n  &.button--large {\n    width: var(--six-height-large);\n    border-radius: 50%;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__caret {\n    display: none;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n  .button__suffix {\n    display: none;\n  }\n\n  .button__caret {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n      width: 1em;\n      height: 1em;\n    }\n  }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n  .button__caret {\n    svg {\n      color: var(--six-color-white);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n\n  six-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--six-spacing-small);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--six-spacing-medium);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--six-spacing-large);\n  }\n}\n\n.button--has-prefix {\n  &.button--small {\n    padding-left: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}