@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.daba936

package/dist/cjs/set-attributes_2.cjs.entry.js

@@ -2,68 +2,68 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
+const index = require('./index-5dd19c4b.js');
 
 const SetAttributes = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.value = {};
-  }
-  componentWillLoad() {
-    this.injectAttrs();
-  }
-  attrsUpdated() {
-    this.injectAttrs();
-  }
-  injectAttrs() {
-    const slot = this.host.firstElementChild;
-    if (typeof (slot === null || slot === void 0 ? void 0 : slot.assignedElements) !== 'function') {
-      return;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.value = {};
     }
-    const child = slot.assignedElements().pop();
-    if (!child) {
-      return;
+    componentWillLoad() {
+        this.injectAttrs();
     }
-    const types = {
-      // no need for function and bigint
-      undefined: (key) => child.removeAttribute(key),
-      boolean: (key, value) => {
-        if (value != null) {
-          child.setAttribute(key, '');
+    attrsUpdated() {
+        this.injectAttrs();
+    }
+    injectAttrs() {
+        const slot = this.host.firstElementChild;
+        if (typeof (slot === null || slot === void 0 ? void 0 : slot.assignedElements) !== 'function') {
+            return;
+        }
+        const child = slot.assignedElements().pop();
+        if (!child) {
+            return;
         }
-        else {
-          child.removeAttribute(key);
+        const types = {
+            // no need for function and bigint
+            undefined: (key) => child.removeAttribute(key),
+            boolean: (key, value) => {
+                if (value != null) {
+                    child.setAttribute(key, '');
+                }
+                else {
+                    child.removeAttribute(key);
+                }
+            },
+            number: (key, value) => child.setAttribute(key, value),
+            string: (key, value) => child.setAttribute(key, value),
+            object: (key, value) => child.setAttribute(key, JSON.stringify(value)),
+        };
+        for (const [key, value] of Object.entries(this.value)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            types[typeof value](key, value);
         }
-      },
-      number: (key, value) => child.setAttribute(key, value),
-      string: (key, value) => child.setAttribute(key, value),
-      object: (key, value) => child.setAttribute(key, JSON.stringify(value)),
-    };
-    for (const [key, value] of Object.entries(this.value)) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      types[typeof value](key, value);
     }
-  }
-  render() {
-    return index.h("slot", null);
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["attrsUpdated"]
-  }; }
+    render() {
+        return index.h("slot", null);
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["attrsUpdated"]
+    }; }
 };
 
-const sixStageIndicatorCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";
+const sixStageIndicatorCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";
 
 const SixStageIndicator = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stage = null;
-  }
-  render() {
-    return this.stage == null || this.stage == 'PROD' ? null : (index.h("div", { class: `indicator--${this.stage.toLowerCase()}` }, index.h("div", { class: "center-content" }, index.h("six-icon", { class: "align-item", size: "small" }, "error_outline"), index.h("span", { class: 'align-item' }, index.h("slot", null)))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.stage = null;
+    }
+    render() {
+        return this.stage == null || this.stage == 'PROD' ? null : (index.h("div", { class: `indicator--${this.stage.toLowerCase()}` }, index.h("div", { class: "center-content" }, index.h("six-icon", { class: "align-item", size: "small" }, "error_outline"), index.h("span", { class: 'align-item' }, index.h("slot", null)))));
+    }
 };
 SixStageIndicator.style = sixStageIndicatorCss;
 

package/dist/cjs/set-attributes_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"set-attributes.six-stage-indicator.entry.cjs.js","mappings":";;;;;;MAKa,aAAa;;;iBAIR,EAAE;;EAElB,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAGD,YAAY;IACV,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAEO,WAAW;IACjB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAoC,CAAC;IAE5D,IAAI,QAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KAAK,UAAU,EAAE;MAChD,OAAO;KACR;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,CAAC;IAE5C,IAAI,CAAC,KAAK,EAAE;MACV,OAAO;KACR;IAED,MAAM,KAAK,GAAG;;MAEZ,SAAS,EAAE,CAAC,GAAW,KAAK,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC;MACtD,OAAO,EAAE,CAAC,GAAW,EAAE,KAAc;QACnC,IAAI,KAAK,IAAI,IAAI,EAAE;UACjB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SAC7B;aAAM;UACL,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAC5B;OACF;MACD,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;MACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;MACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KACvF,CAAC;IAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;;;MAGrD,KAAK,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;KACjC;GACF;EAED,MAAM;IACJ,OAAOA,qBAAQ,CAAC;GACjB;;;;;;;ACzDH,MAAM,oBAAoB,GAAG,+1BAA+1B;;MCS/2B,iBAAiB;;;iBAED,IAAI;;EAE/B,MAAM;IACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtDA,iBAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAClDA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,sBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B,EACXA,kBAAM,KAAK,EAAE,YAAY,IACvBA,qBAAQ,CACH,CACH,CACF,CACP,CAAC;GACH;;;;;;;","names":["h"],"sources":["./src/wrappers/set-attributes/set-attributes.tsx","./src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","./src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'set-attributes',\n})\nexport class SetAttributes {\n  @Element() host!: HTMLSetAttributesElement;\n\n  /** Attributes map */\n  @Prop() value = {};\n\n  componentWillLoad() {\n    this.injectAttrs();\n  }\n\n  @Watch('value')\n  attrsUpdated() {\n    this.injectAttrs();\n  }\n\n  private injectAttrs() {\n    const slot = this.host.firstElementChild as HTMLSlotElement;\n\n    if (typeof slot?.assignedElements !== 'function') {\n      return;\n    }\n\n    const child = slot.assignedElements().pop();\n\n    if (!child) {\n      return;\n    }\n\n    const types = {\n      // no need for function and bigint\n      undefined: (key: string) => child.removeAttribute(key),\n      boolean: (key: string, value: unknown) => {\n        if (value != null) {\n          child.setAttribute(key, '');\n        } else {\n          child.removeAttribute(key);\n        }\n      },\n      number: (key: string, value: string) => child.setAttribute(key, value),\n      string: (key: string, value: string) => child.setAttribute(key, value),\n      object: (key: string, value: string) => child.setAttribute(key, JSON.stringify(value)),\n    };\n\n    for (const [key, value] of Object.entries(this.value)) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      types[typeof value](key, value);\n    }\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: grid;\n}\n\n.center-content {\n  display: grid;\n  align-self: center;\n  justify-self: center;\n  grid-gap: 5px;\n  grid-auto-flow: column;\n}\n\n.align-item {\n  margin: auto;\n}\n\n.indicator {\n  font-family: var(--six-font-family);\n  font-size: 14px;\n  font-weight: var(--six-font-weight-bold);\n  display: grid;\n  align-content: center;\n  width: 100%;\n  height: 24px;\n\n  &--itu {\n    @extend .indicator;\n    background-color: var(--six-color-success-600);\n    color: var(--six-color-web-rock-900);\n  }\n\n  &--dev {\n    @extend .indicator;\n    background-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n  }\n\n  &--etu {\n    @extend .indicator;\n    background-color: var(--six-color-action-600);\n    color: var(--six-color-white);\n  }\n\n  &--acceptance {\n    @extend .indicator;\n    background-color: var(--six-color-warning-800);\n    color: var(--six-color-web-rock-900);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"set-attributes.six-stage-indicator.entry.cjs.js","mappings":";;;;;;MAKa,aAAa;;;qBAIR,EAAE;;IAElB,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAGD,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAEO,WAAW;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAoC,CAAC;QAE5D,IAAI,QAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KAAK,UAAU,EAAE;YAChD,OAAO;SACR;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,CAAC;QAE5C,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QAED,MAAM,KAAK,GAAG;;YAEZ,SAAS,EAAE,CAAC,GAAW,KAAK,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC;YACtD,OAAO,EAAE,CAAC,GAAW,EAAE,KAAc;gBACnC,IAAI,KAAK,IAAI,IAAI,EAAE;oBACjB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;iBAC7B;qBAAM;oBACL,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;iBAC5B;aACF;YACD,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;YACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;YACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;SACvF,CAAC;QAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;;;YAGrD,KAAK,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;SACjC;KACF;IAED,MAAM;QACJ,OAAOA,qBAAQ,CAAC;KACjB;;;;;;;ACzDH,MAAM,oBAAoB,GAAG,k2BAAk2B;;MCSl3B,iBAAiB;;;qBAED,IAAI;;IAE/B,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtDA,iBAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAClDA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,sBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B,EACXA,kBAAM,KAAK,EAAE,YAAY,IACvBA,qBAAQ,CACH,CACH,CACF,CACP,CAAC;KACH;;;;;;;","names":["h"],"sources":["src/wrappers/set-attributes/set-attributes.tsx","src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'set-attributes',\n})\nexport class SetAttributes {\n  @Element() host!: HTMLSetAttributesElement;\n\n  /** Attributes map */\n  @Prop() value = {};\n\n  componentWillLoad() {\n    this.injectAttrs();\n  }\n\n  @Watch('value')\n  attrsUpdated() {\n    this.injectAttrs();\n  }\n\n  private injectAttrs() {\n    const slot = this.host.firstElementChild as HTMLSlotElement;\n\n    if (typeof slot?.assignedElements !== 'function') {\n      return;\n    }\n\n    const child = slot.assignedElements().pop();\n\n    if (!child) {\n      return;\n    }\n\n    const types = {\n      // no need for function and bigint\n      undefined: (key: string) => child.removeAttribute(key),\n      boolean: (key: string, value: unknown) => {\n        if (value != null) {\n          child.setAttribute(key, '');\n        } else {\n          child.removeAttribute(key);\n        }\n      },\n      number: (key: string, value: string) => child.setAttribute(key, value),\n      string: (key: string, value: string) => child.setAttribute(key, value),\n      object: (key: string, value: string) => child.setAttribute(key, JSON.stringify(value)),\n    };\n\n    for (const [key, value] of Object.entries(this.value)) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      types[typeof value](key, value);\n    }\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: grid;\n}\n\n.center-content {\n  display: grid;\n  align-self: center;\n  justify-self: center;\n  grid-gap: 5px;\n  grid-auto-flow: column;\n}\n\n.align-item {\n  margin: auto;\n}\n\n.indicator {\n  font-family: var(--six-font-family);\n  font-size: 14px;\n  font-weight: var(--six-font-weight-bold);\n  display: grid;\n  align-content: center;\n  width: 100%;\n  height: 24px;\n\n  &--itu {\n    @extend .indicator;\n    background-color: var(--six-color-success-600);\n    color: var(--six-color-web-rock-900);\n  }\n\n  &--dev {\n    @extend .indicator;\n    background-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n  }\n\n  &--etu {\n    @extend .indicator;\n    background-color: var(--six-color-action-600);\n    color: var(--six-color-white);\n  }\n\n  &--acceptance {\n    @extend .indicator;\n    background-color: var(--six-color-warning-800);\n    color: var(--six-color-web-rock-900);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,128 +2,151 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
+const index = require('./index-5dd19c4b.js');
+const slot = require('./slot-1b1232a1.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 toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
 const SixAlert = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixShow = index.createEvent(this, "six-alert-show", 7);
-    this.sixAfterShow = index.createEvent(this, "six-alert-after-show", 7);
-    this.sixHide = index.createEvent(this, "six-alert-hide", 7);
-    this.sixAfterHide = index.createEvent(this, "six-alert-after-hide", 7);
-    this.handleCloseClick = () => {
-      this.hide();
-    };
-    this.handleMouseMove = () => {
-      this.restartAutoHide();
-    };
-    this.handleTransitionEnd = (event) => {
-      const target = event.target;
-      // Ensure we only emit one event when the target element is no longer visible
-      if (event.propertyName === 'opacity' && target.classList.contains('alert')) {
-        this.isVisible = this.open;
-        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-      }
-    };
-    this.isVisible = false;
-    this.open = false;
-    this.closable = false;
-    this.type = 'primary';
-    this.duration = Infinity;
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-  }
-  handleDurationChange() {
-    this.restartAutoHide();
-  }
-  componentWillLoad() {
-    // Show on init if open
-    if (this.open) {
-      this.show();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixShow = index.createEvent(this, "six-alert-show", 7);
+        this.sixAfterShow = index.createEvent(this, "six-alert-after-show", 7);
+        this.sixHide = index.createEvent(this, "six-alert-hide", 7);
+        this.sixAfterHide = index.createEvent(this, "six-alert-after-hide", 7);
+        this.handleCloseClick = () => {
+            this.hide();
+        };
+        this.handleMouseMove = () => {
+            this.restartAutoHide();
+        };
+        this.handleTransitionEnd = (event) => {
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'opacity' && target.classList.contains('alert')) {
+                this.isVisible = this.open;
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+            }
+        };
+        this.isVisible = false;
+        this.open = false;
+        this.closable = false;
+        this.type = 'primary';
+        this.duration = Infinity;
     }
-  }
-  /** Shows the alert. */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
-      return;
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
     }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    handleDurationChange() {
+        this.restartAutoHide();
     }
-    this.isVisible = true;
-    this.open = true;
-    if (this.duration < Infinity) {
-      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+    componentWillLoad() {
+        // Show on init if open
+        if (this.open) {
+            this.show();
+        }
+    }
+    /** Shows the alert. */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible) {
+            return;
+        }
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
+        }
+        this.isVisible = true;
+        this.open = true;
+        if (this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+        }
     }
-  }
-  /** Hides the alert */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
-      return;
+    /** Hides the alert */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible) {
+            return;
+        }
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
+        }
+        clearTimeout(this.autoHideTimeout);
+        this.isVisible = false;
+        this.open = false;
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    /**
+     * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+     * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+     * calling this method again. The returned promise will resolve after the alert is hidden.
+     * @param adjustPosition  If true, the top and right position of the toast stack is shifted according to the
+     *                        six-root header's height and the presence of a vertical scrollbar.
+     */
+    async toast(adjustPosition = true) {
+        return new Promise((resolve) => {
+            var _a;
+            if (!toastStack.parentElement) {
+                document.body.append(toastStack);
+            }
+            toastStack.append(this.host);
+            if (adjustPosition) {
+                const sixRoot = document.querySelector('six-root');
+                const headerSlot = slot.getSlot(sixRoot, 'header');
+                const mainSlot = (_a = sixRoot === null || sixRoot === void 0 ? void 0 : sixRoot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('host main');
+                if (mainSlot != null && mainSlot instanceof HTMLElement) {
+                    const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;
+                    toastStack.style.right = `${scrollbarWidth}px`;
+                }
+                if (headerSlot != null) {
+                    const rect = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.getBoundingClientRect();
+                    toastStack.style.top = `${rect.top + rect.height}px`;
+                }
+            }
+            else {
+                toastStack.style.top = '0';
+                toastStack.style.right = '0';
+            }
+            requestAnimationFrame(() => this.show());
+            this.host.addEventListener('six-alert-after-hide', () => {
+                this.host.remove();
+                resolve();
+                // Remove the toast stack from the DOM when there are no more alerts
+                if (toastStack.querySelector('six-alert') === null) {
+                    toastStack.remove();
+                }
+            }, { once: true });
+        });
     }
-    clearTimeout(this.autoHideTimeout);
-    this.isVisible = false;
-    this.open = false;
-  }
-  /**
-   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   */
-  async toast() {
-    return new Promise((resolve) => {
-      if (!toastStack.parentElement) {
-        document.body.append(toastStack);
-      }
-      toastStack.append(this.host);
-      requestAnimationFrame(() => this.show());
-      this.host.addEventListener('six-alert-after-hide', () => {
-        this.host.remove();
-        resolve();
-        // Remove the toast stack from the DOM when there are no more alerts
-        if (toastStack.querySelector('six-alert') === null) {
-          toastStack.remove();
+    restartAutoHide() {
+        clearTimeout(this.autoHideTimeout);
+        if (this.open && this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
         }
-      }, { once: true });
-    });
-  }
-  restartAutoHide() {
-    clearTimeout(this.autoHideTimeout);
-    if (this.open && this.duration < Infinity) {
-      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
     }
-  }
-  render() {
-    return (index.h("div", { part: "base", class: {
-        alert: true,
-        'alert--open': this.open,
-        'alert--visible': this.isVisible,
-        'alert--closable': this.closable,
-        'alert--primary': this.type === 'primary',
-        'alert--success': this.type === 'success',
-        'alert--info': this.type === 'info',
-        'alert--warning': this.type === 'warning',
-        'alert--danger': this.type === 'danger',
-      }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, index.h("span", { part: "icon", class: "alert__icon" }, index.h("slot", { name: "icon" })), index.h("span", { part: "message", class: "alert__message" }, index.h("slot", null)), this.closable && (index.h("span", { class: "alert__close" }, index.h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpenChange"],
-    "duration": ["handleDurationChange"]
-  }; }
+    render() {
+        const asToast = this.host.closest('.six-toast-stack') != null;
+        return (index.h("div", { part: "base", class: {
+                alert: true,
+                'alert--open': this.open,
+                'alert--visible': this.isVisible,
+                'alert--closable': this.closable,
+                'alert--primary': this.type === 'primary',
+                'alert--success': this.type === 'success',
+                'alert--info': this.type === 'info',
+                'alert--warning': this.type === 'warning',
+                'alert--danger': this.type === 'danger',
+                'alert--shadow': asToast,
+            }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, index.h("span", { part: "icon", class: "alert__icon" }, index.h("slot", { name: "icon" })), index.h("span", { part: "message", class: "alert__message" }, index.h("slot", null)), this.closable && (index.h("span", { class: "alert__close" }, index.h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"],
+        "duration": ["handleDurationChange"]
+    }; }
 };
 SixAlert.style = sixAlertCss;
 

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

@@ -1 +1 @@
-{"file":"six-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,u1DAAu1D;;ACG32D,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,CAAC;MAsBrF,QAAQ;;;;;;;IA2HX,qBAAgB,GAAG;MACzB,IAAI,CAAC,IAAI,EAAE,CAAC;KACb,CAAC;IAEM,oBAAe,GAAG;MACxB,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAsB;MACnD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;MAG3C,IAAI,KAAK,CAAC,YAAY,KAAK,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;QAC1E,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;OACjE;KACF,CAAC;qBAtImB,KAAK;gBAGqB,KAAK;oBAGhB,KAAK;gBAG8C,SAAS;oBAM7E,QAAQ;;EAG3B,gBAAgB;IACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;GACvC;EAGD,oBAAoB;IAClB,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAcD,iBAAiB;;IAEf,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;;EAID,MAAM,IAAI;;IAER,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO;KACR;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,OAAO,CAAC,gBAAgB,EAAE;MAC5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAEjB,IAAI,IAAI,CAAC,QAAQ,GAAG,QAAQ,EAAE;MAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5E;GACF;;EAID,MAAM,IAAI;;IAER,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,OAAO;KACR;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,OAAO,CAAC,gBAAgB,EAAE;MAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO;KACR;IAED,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACnC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;;;;;;EAQD,MAAM,KAAK;IACT,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO;MAC/B,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;QAC7B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;OAClC;MAED,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAC7B,qBAAqB,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;MAEzC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACxB,sBAAsB,EACtB;QACE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,EAAE,CAAC;;QAGV,IAAI,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;UAClD,UAAU,CAAC,MAAM,EAAE,CAAC;SACrB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH,CAAC,CAAC;GACJ;EAoBO,eAAe;IACrB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACnC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,QAAQ,EAAE;MACzC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5E;GACF;EAED,MAAM;IACJ,QACEA,iBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,IAAI,CAAC,IAAI;QACxB,gBAAgB,EAAE,IAAI,CAAC,SAAS;QAChC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;QAChC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QACnC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;OACxC,EACD,IAAI,EAAC,OAAO,eACF,WAAW,iBACT,MAAM,iBACL,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EACzC,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,eAAe,EAAE,IAAI,CAAC,mBAAmB,IAEzCA,kBAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACnCA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,EAEPA,kBAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,IACzCA,qBAAQ,CACH,EAEN,IAAI,CAAC,QAAQ,KACZA,kBAAM,KAAK,EAAC,cAAc,IACxBA,6BACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,mBAAmB,EAC/B,OAAO,EAAE,IAAI,CAAC,gBAAgB,GACb,CACd,CACR,CACG,EACN;GACH;;;;;;;;;;;","names":["h"],"sources":["./src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","./src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: 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.entry.cjs.js","mappings":"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","names":["getSlot","h"],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: 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. 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   * @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 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    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        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\nexport type AlertType = 'primary' | 'success' | 'info' | 'warning' | 'danger';\n"],"version":3}

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

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
+const index = require('./index-5dd19c4b.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 SixAvatar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.handleImageError = () => {
-      this.hasError = true;
-    };
-    this.hasError = false;
-    this.image = '';
-    this.alt = '';
-    this.initials = '';
-    this.shape = 'circle';
-  }
-  render() {
-    return (index.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 === '' && (index.h("div", { part: "icon", class: "avatar__icon" }, index.h("slot", { name: "icon" }, index.h("six-icon", null, "person")))), this.initials && (index.h("div", { part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (index.h("img", { part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.handleImageError = () => {
+            this.hasError = true;
+        };
+        this.hasError = false;
+        this.image = '';
+        this.alt = '';
+        this.initials = '';
+        this.shape = 'circle';
+    }
+    render() {
+        return (index.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 === '' && (index.h("div", { part: "icon", class: "avatar__icon" }, index.h("slot", { name: "icon" }, index.h("six-icon", null, "person")))), this.initials && (index.h("div", { part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (index.h("img", { part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+    }
 };
 SixAvatar.style = sixAvatarCss;
 

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

@@ -1 +1 @@
-{"file":"six-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,u/BAAu/B;;MCoB//B,SAAS;;;IAeZ,qBAAgB,GAAG;MACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB,CAAC;oBAhBkB,KAAK;iBAGT,EAAE;eAGJ,EAAE;oBAGG,EAAE;iBAG4B,QAAQ;;EAMzD,MAAM;IACJ,QACEA,iBACE,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,IAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnBA,iBAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACnCA,kBAAM,IAAI,EAAC,MAAM,IACfA,mCAA2B,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZA,iBAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3BA,iBAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","./src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --size: The size of the avatar.\n */\n:host {\n  display: inline-block;\n\n  --size: 2rem;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--six-avatar-background-color);\n  font-family: var(--six-font-sans);\n  font-size: calc(var(--size) * 0.5);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-avatar-color);\n  overflow: hidden;\n  user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  outline: none;\n\n  &:hover {\n    box-shadow: var(--six-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.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,0/BAA0/B;;MCoBlgC,SAAS;;;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,QACEA,iBACE,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,KACnBA,iBAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACnCA,kBAAM,IAAI,EAAC,MAAM,IACfA,mCAA2B,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZA,iBAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3BA,iBAAK,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":["h"],"sources":["src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --size: The size of the avatar.\n */\n:host {\n  display: inline-block;\n\n  --size: 2rem;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--six-avatar-background-color);\n  font-family: var(--six-font-sans);\n  font-size: calc(var(--size) * 0.5);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-avatar-color);\n  overflow: hidden;\n  user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  outline: none;\n\n  &:hover {\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.avatar--circle {\n  border-radius: var(--six-border-radius-circle);\n}\n\n.avatar--rounded {\n  border-radius: var(--six-border-radius-medium);\n}\n\n.avatar--square {\n  border-radius: 0;\n}\n\n.avatar__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.avatar__initials {\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.avatar__image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  private handleImageError = () => {\n    this.hasError = true;\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {this.initials === '' && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}