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

package/dist/components/scroll.js

@@ -6,10 +6,10 @@
 // seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
 //
 function getOffset(element, parent) {
-  return {
-    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
-    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),
-  };
+    return {
+        top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+        left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),
+    };
 }
 
 const locks = new Set();
@@ -18,47 +18,47 @@ const locks = new Set();
 // without premature unlocking.
 //
 function lockBodyScrolling(lockingEl) {
-  locks.add(lockingEl);
-  document.body.classList.add('six-scroll-lock');
+    locks.add(lockingEl);
+    document.body.classList.add('six-scroll-lock');
 }
 //
 // Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
 //
 function unlockBodyScrolling(lockingEl) {
-  locks.delete(lockingEl);
-  if (locks.size === 0) {
-    document.body.classList.remove('six-scroll-lock');
-  }
+    locks.delete(lockingEl);
+    if (locks.size === 0) {
+        document.body.classList.remove('six-scroll-lock');
+    }
 }
 //
 // Scrolls an element into view of its container. If the element is already in view, nothing will happen.
 //
 function scrollIntoView(element, container, direction = 'vertical', behavior = 'smooth') {
-  const offset = getOffset(element, container);
-  const offsetTop = offset.top + container.scrollTop;
-  const offsetLeft = offset.left + container.scrollLeft;
-  const minX = container.scrollLeft;
-  const maxX = container.scrollLeft + container.offsetWidth;
-  const minY = container.scrollTop;
-  const maxY = container.scrollTop + container.offsetHeight;
-  if (direction === 'horizontal' || direction === 'both') {
-    if (offsetLeft < minX) {
-      container.scrollTo({ left: offsetLeft, behavior });
-    }
-    else if (offsetLeft + element.clientWidth > maxX) {
-      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
-    }
-  }
-  if (direction === 'vertical' || direction === 'both') {
-    if (offsetTop < minY) {
-      container.scrollTo({ top: offsetTop, behavior });
+    const offset = getOffset(element, container);
+    const offsetTop = offset.top + container.scrollTop;
+    const offsetLeft = offset.left + container.scrollLeft;
+    const minX = container.scrollLeft;
+    const maxX = container.scrollLeft + container.offsetWidth;
+    const minY = container.scrollTop;
+    const maxY = container.scrollTop + container.offsetHeight;
+    if (direction === 'horizontal' || direction === 'both') {
+        if (offsetLeft < minX) {
+            container.scrollTo({ left: offsetLeft, behavior });
+        }
+        else if (offsetLeft + element.clientWidth > maxX) {
+            container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+        }
     }
-    else if (offsetTop + element.clientHeight > maxY) {
-      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    if (direction === 'vertical' || direction === 'both') {
+        if (offsetTop < minY) {
+            container.scrollTo({ top: offsetTop, behavior });
+        }
+        else if (offsetTop + element.clientHeight > maxY) {
+            container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+        }
     }
-  }
 }
 
-export { getOffset as g, lockBodyScrolling as l, scrollIntoView as s, unlockBodyScrolling as u };
+export { lockBodyScrolling as l, scrollIntoView as s, unlockBodyScrolling as u };
 
 //# sourceMappingURL=scroll.js.map

package/dist/components/scroll.js.map

@@ -1 +1 @@
-{"file":"scroll.js","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;SACgB,SAAS,CAAC,OAAoB,EAAE,MAAmB;EACjE,OAAO;IACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;IACzF,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;GAC7F,CAAC;AACJ;;ACVA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;AACA;AACA;AACA;SACgB,iBAAiB,CAAC,SAAsB;EACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;EACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AACjD,CAAC;AAED;AACA;AACA;SACgB,mBAAmB,CAAC,SAAsB;EACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;EAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;IACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;GACnD;AACH,CAAC;AAED;AACA;AACA;SACgB,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA8B,QAAQ;EAEtC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;EACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;EAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;EACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;EAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;IACtD,IAAI,UAAU,GAAG,IAAI,EAAE;MACrB,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;KACpD;SAAM,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,EAAE;MAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClG;GACF;EAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;IACpD,IAAI,SAAS,GAAG,IAAI,EAAE;MACpB,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClD;SAAM,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;MAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClG;GACF;AACH;;;;","names":[],"sources":["./src/utils/offset.ts","./src/utils/scroll.ts"],"sourcesContent":["//\n// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n// parent doesn't have to be positioned relative or absolute.\n//\n// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent\n// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n//\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),\n  };\n}\n","import { getOffset } from './offset';\n\nconst locks = new Set();\n\n//\n// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n// without premature unlocking.\n//\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('six-scroll-lock');\n}\n\n//\n// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n//\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('six-scroll-lock');\n  }\n}\n\n//\n// Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n//\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"],"version":3}
+{"file":"scroll.js","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;SACgB,SAAS,CAAC,OAAoB,EAAE,MAAmB;IACjE,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACzF,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;KAC7F,CAAC;AACJ;;ACVA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;AACA;AACA;AACA;SACgB,iBAAiB,CAAC,SAAsB;IACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AACjD,CAAC;AAED;AACA;AACA;SACgB,mBAAmB,CAAC,SAAsB;IACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;KACnD;AACH,CAAC;AAED;AACA;AACA;SACgB,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA8B,QAAQ;IAEtC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;IACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;IACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;IAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;IAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;IACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;IAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;QACtD,IAAI,UAAU,GAAG,IAAI,EAAE;YACrB,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;SACpD;aAAM,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,EAAE;YAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;SAClG;KACF;IAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;QACpD,IAAI,SAAS,GAAG,IAAI,EAAE;YACpB,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;SAClD;aAAM,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;YAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC;SAClG;KACF;AACH;;;;","names":[],"sources":["src/utils/offset.ts","src/utils/scroll.ts"],"sourcesContent":["//\n// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n// parent doesn't have to be positioned relative or absolute.\n//\n// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent\n// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n//\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),\n  };\n}\n","import { getOffset } from './offset';\n\nconst locks = new Set();\n\n//\n// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n// without premature unlocking.\n//\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('six-scroll-lock');\n}\n\n//\n// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n//\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('six-scroll-lock');\n  }\n}\n\n//\n// Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n//\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"],"version":3}

package/dist/components/set-attributes.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SetAttributes extends Components.SetAttributes, HTMLElement {}
 export const SetAttributes: {
-  prototype: SetAttributes;
-  new (): SetAttributes;
+    prototype: SetAttributes;
+    new (): SetAttributes;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/set-attributes2.js

@@ -1,69 +1,71 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const SetAttributes = /*@__PURE__*/ proxyCustomElement(class SetAttributes extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    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() {
+        super();
+        this.__registerHost();
+        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 h("slot", null);
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "value": ["attrsUpdated"]
-  }; }
+    render() {
+        return h("slot", null);
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "value": ["attrsUpdated"]
+    }; }
 }, [4, "set-attributes", {
-    "value": [16]
-  }]);
+        "value": [16]
+    }, undefined, {
+        "value": ["attrsUpdated"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["set-attributes"];
-  components.forEach(tagName => { switch (tagName) {
-    case "set-attributes":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SetAttributes);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["set-attributes"];
+    components.forEach(tagName => { switch (tagName) {
+        case "set-attributes":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SetAttributes);
+            }
+            break;
+    } });
 }
 
 export { SetAttributes as S, defineCustomElement as d };

package/dist/components/set-attributes2.js.map

@@ -1 +1 @@
-{"file":"set-attributes2.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,OAAO,eAAQ,CAAC;GACjB;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/wrappers/set-attributes/set-attributes.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"],"version":3}
+{"file":"set-attributes2.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,OAAO,eAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/wrappers/set-attributes/set-attributes.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"],"version":3}

package/dist/components/six-alert.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixAlert extends Components.SixAlert, HTMLElement {}
 export const SixAlert: {
-  prototype: SixAlert;
-  new (): SixAlert;
+    prototype: SixAlert;
+    new (): SixAlert;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-alert.js

@@ -1,162 +1,188 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as getSlot } from './slot.js';
 import { d as defineCustomElement$3 } from './six-icon2.js';
 import { d as defineCustomElement$2 } from './six-icon-button2.js';
 
-const sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";
+const sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--shadow{box-shadow:var(--six-shadow-medium)}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
 const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sixShow = createEvent(this, "six-alert-show", 7);
-    this.sixAfterShow = createEvent(this, "six-alert-after-show", 7);
-    this.sixHide = createEvent(this, "six-alert-hide", 7);
-    this.sixAfterHide = 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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixShow = createEvent(this, "six-alert-show", 7);
+        this.sixAfterShow = createEvent(this, "six-alert-after-show", 7);
+        this.sixHide = createEvent(this, "six-alert-hide", 7);
+        this.sixAfterHide = 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();
+        }
     }
-  }
-  /** Hides the alert */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
-      return;
+    /** 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);
+        }
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      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;
+    }
+    /**
+     * 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 = 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 (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 }, h("span", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("span", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("span", { class: "alert__close" }, h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "open": ["handleOpenChange"],
-    "duration": ["handleDurationChange"]
-  }; }
-  static get style() { return sixAlertCss; }
+    render() {
+        const asToast = this.host.closest('.six-toast-stack') != null;
+        return (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 }, h("span", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("span", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("span", { class: "alert__close" }, h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"],
+        "duration": ["handleDurationChange"]
+    }; }
+    static get style() { return sixAlertCss; }
 }, [1, "six-alert", {
-    "open": [1540],
-    "closable": [516],
-    "type": [513],
-    "duration": [2],
-    "isVisible": [32],
-    "show": [64],
-    "hide": [64],
-    "toast": [64]
-  }]);
+        "open": [1540],
+        "closable": [516],
+        "type": [513],
+        "duration": [2],
+        "isVisible": [32],
+        "show": [64],
+        "hide": [64],
+        "toast": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"],
+        "duration": ["handleDurationChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-alert", "six-icon", "six-icon-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-alert":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixAlert$1);
-      }
-      break;
-    case "six-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "six-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-alert", "six-icon", "six-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-alert":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixAlert$1);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const SixAlert = SixAlert$1;