@six-group/ui-library 0.0.0-insider.bc75fdf → 0.0.0-insider.bea5ab5

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

@@ -1 +1 @@
-{"version":3,"file":"six-alert.js","sourceRoot":"","sources":["../../../src/components/six-alert/six-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/six-alert/six-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/six-avatar/six-avatar.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 /**
@@ -33,7 +33,7 @@
   outline: none;
 }
 .avatar:hover {
-  box-shadow: var(--six-elevation-4dp);
+  box-shadow: var(--six-shadow-medium);
 }
 
 .avatar--circle {

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

@@ -13,116 +13,116 @@ import { h } from "@stencil/core";
  * @part image - The avatar image.
  */
 export class SixAvatar {
-  constructor() {
-    this.handleImageError = () => {
-      this.hasError = true;
-    };
-    this.hasError = false;
-    this.image = '';
-    this.alt = '';
-    this.initials = '';
-    this.shape = 'circle';
-  }
-  render() {
-    return (h("div", { 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 is() { return "six-avatar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-avatar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-avatar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "image": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The image source to use for the avatar."
-        },
-        "attribute": "image",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "alt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Alternative text for the image."
-        },
-        "attribute": "alt",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "initials": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Initials to use as a fallback when no image is available (1-2 characters max recommended)."
-        },
-        "attribute": "initials",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "shape": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'circle' | 'square' | 'rounded'",
-          "resolved": "\"circle\" | \"rounded\" | \"square\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The shape of the avatar."
-        },
-        "attribute": "shape",
-        "reflect": false,
-        "defaultValue": "'circle'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasError": {}
-    };
-  }
+    constructor() {
+        this.handleImageError = () => {
+            this.hasError = true;
+        };
+        this.hasError = false;
+        this.image = '';
+        this.alt = '';
+        this.initials = '';
+        this.shape = 'circle';
+    }
+    render() {
+        return (h("div", { key: '241da083cd4a35349c26dcee5aa7f73d9bce0de8', 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", { key: '24ff23d7f3a6624422582766512d8d6bf293b9f5', part: "icon", class: "avatar__icon" }, h("slot", { key: 'a906ebe35934f5d94e762fa3c1f5017492aa3df5', name: "icon" }, h("six-icon", { key: '30387b657f408050ce97b0f630fd107ae571d3e9' }, "person")))), this.initials && (h("div", { key: '025c49d919586b0167e7851183f1bc288601f94c', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { key: 'd2860b07997dbb935766cd124f2c670e24dc40a4', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+    }
+    static get is() { return "six-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image source to use for the avatar."
+                },
+                "attribute": "image",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image."
+                },
+                "attribute": "alt",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initials to use as a fallback when no image is available (1-2 characters max recommended)."
+                },
+                "attribute": "initials",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square' | 'rounded'",
+                    "resolved": "\"circle\" | \"rounded\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape of the avatar."
+                },
+                "attribute": "shape",
+                "reflect": false,
+                "defaultValue": "'circle'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasError": {}
+        };
+    }
 }
 //# sourceMappingURL=six-avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-avatar.js","sourceRoot":"","sources":["../../../src/components/six-avatar/six-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,SAAS;;IAeZ,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;oBAhBkB,KAAK;iBAGT,EAAE;eAGJ,EAAE;oBAGG,EAAE;iBAG4B,QAAQ;;EAMzD,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;QACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;QACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;QAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;OAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC;MAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,CACvB,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;QACnC,YAAM,IAAI,EAAC,MAAM;UACf,6BAA2B,CACtB,CACH,CACP;MAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP;MAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/six-avatar/six-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,SAAS;;QAeZ,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;wBAhBkB,KAAK;qBAGT,EAAE;mBAGJ,EAAE;wBAGG,EAAE;qBAG4B,QAAQ;;IAMzD,MAAM;QACJ,OAAO,CACL,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;YAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,CACvB,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;gBACnC,6DAAM,IAAI,EAAC,MAAM;oBACf,4EAA2B,CACtB,CACH,CACP;YAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP;YAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/six-badge/six-badge.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {

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

@@ -10,95 +10,95 @@ import { h } from "@stencil/core";
  * @part base - The base wrapper
  */
 export class SixBadge {
-  constructor() {
-    this.type = 'primary';
-    this.pill = false;
-    this.pulse = false;
-  }
-  render() {
-    return (h("span", { 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" }, h("slot", null)));
-  }
-  static get is() { return "six-badge"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-badge.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-badge.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'",
-          "resolved": "\"action\" | \"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The badge's type."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "pill": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to draw a pill-style badge with rounded edges."
-        },
-        "attribute": "pill",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "pulse": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to make the badge pulsate to draw attention."
-        },
-        "attribute": "pulse",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
+    constructor() {
+        this.type = 'primary';
+        this.pill = false;
+        this.pulse = false;
+    }
+    render() {
+        return (h("span", { key: 'af8c1f6bf15fb2ef27a05bda206b18ad306bf168', 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" }, h("slot", { key: '59d58d613fb4665d0e7f03e21c43cd1300c00a19' })));
+    }
+    static get is() { return "six-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'",
+                    "resolved": "\"action\" | \"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The badge's type."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw a pill-style badge with rounded edges."
+                },
+                "attribute": "pill",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to make the badge pulsate to draw attention."
+                },
+                "attribute": "pulse",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
 }
 //# sourceMappingURL=six-badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-badge.js","sourceRoot":"","sources":["../../../src/components/six-badge/six-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;;gBAE4E,SAAS;gBAGzF,KAAK;iBAGJ,KAAK;;EAErB,MAAM;IACJ,OAAO,CACL,YACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QAEX,QAAQ;QACR,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;QAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI;QACxB,cAAc,EAAE,IAAI,CAAC,KAAK;OAC3B,EACD,IAAI,EAAC,QAAQ;MAEb,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/six-badge/six-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;;oBAE4E,SAAS;oBAGzF,KAAK;qBAGJ,KAAK;;IAErB,MAAM;QACJ,OAAO,CACL,6DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBAEX,QAAQ;gBACR,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;YAEb,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/six-button/six-button.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
@@ -41,6 +41,7 @@
 }
 .button ::slotted(six-icon) {
   pointer-events: none;
+  transform: translateY(-1.5px);
 }
 
 .button-wrapper--disabled {
@@ -71,10 +72,6 @@
 .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);
@@ -189,6 +186,23 @@
   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);