@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/cjs/{scroll-5b8676ba.js → scroll-76e6f5d7.js}

@@ -1,64 +1,64 @@
 'use strict';
 
-//
-// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
-// parent doesn't have to be positioned relative or absolute.
-//
-// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent
-// 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),
-  };
+//
+// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+// parent doesn't have to be positioned relative or absolute.
+//
+// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent
+// 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),
+  };
 }
 
-const locks = new Set();
-//
-// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
-// without premature unlocking.
-//
-function lockBodyScrolling(lockingEl) {
-  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');
-  }
-}
-//
-// 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 });
-    }
-    else if (offsetTop + element.clientHeight > maxY) {
-      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
-    }
-  }
+const locks = new Set();
+//
+// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+// without premature unlocking.
+//
+function lockBodyScrolling(lockingEl) {
+  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');
+  }
+}
+//
+// 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 });
+    }
+    else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    }
+  }
 }
 
 exports.getOffset = getOffset;

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

@@ -4,67 +4,67 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
 
-let SetAttributes = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Attributes map */
-    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;
-    }
-    const child = slot.assignedElements().pop();
-    if (!child) {
-      return;
-    }
-    const types = {
-      // no need for function and bigint
-      undefined: (key) => child.removeAttribute(key),
-      boolean: (key, value) => {
-        if (value) {
-          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)) {
-      types[typeof value](key, value);
-    }
-  }
-  render() {
-    return index.h("slot", null);
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["attrsUpdated"]
-  }; }
+let SetAttributes = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Attributes map */
+    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;
+    }
+    const child = slot.assignedElements().pop();
+    if (!child) {
+      return;
+    }
+    const types = {
+      // no need for function and bigint
+      undefined: (key) => child.removeAttribute(key),
+      boolean: (key, value) => {
+        if (value) {
+          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)) {
+      types[typeof value](key, value);
+    }
+  }
+  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)}";
 
-let SixStageIndicator = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** The indicators value attribute */
-    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)))));
-  }
-};
+let SixStageIndicator = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The indicators value attribute */
+    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;
 
 exports.set_attributes = SetAttributes;

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

@@ -6,137 +6,137 @@ const index = require('./index-341df120.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 toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
-let 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.isVisible = false;
-    /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /** Set to true to make the alert closable. */
-    this.closable = false;
-    /** The type of alert. */
-    this.type = 'primary';
-    /**
-     * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the
-     * alert before it closes (e.g. moves the mouse over it), the timer will restart.
-     */
-    this.duration = Infinity;
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-  }
-  handleDurationChange() {
-    this.restartAutoHide();
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-  }
-  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 = setTimeout(() => this.hide(), this.duration);
-    }
-  }
-  /** Hides the alert */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
-      return;
-    }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
-    }
-    clearTimeout(this.autoHideTimeout);
-    this.isVisible = false;
-    this.open = false;
-  }
-  /**
-   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   */
-  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();
-        }
-      }, { once: true });
-    });
-  }
-  handleCloseClick() {
-    this.hide();
-  }
-  handleMouseMove() {
-    this.restartAutoHide();
-  }
-  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();
-    }
-  }
-  restartAutoHide() {
-    clearTimeout(this.autoHideTimeout);
-    if (this.open && this.duration < Infinity) {
-      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
-    }
-  }
-  render() {
-    return (index.h("div", { ref: (el) => (this.alert = el), 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"]
-  }; }
-};
+const toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
+let 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.isVisible = false;
+    /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Set to true to make the alert closable. */
+    this.closable = false;
+    /** The type of alert. */
+    this.type = 'primary';
+    /**
+     * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the
+     * alert before it closes (e.g. moves the mouse over it), the timer will restart.
+     */
+    this.duration = Infinity;
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+  }
+  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 = setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  /** Hides the alert */
+  async hide() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (!this.isVisible) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    clearTimeout(this.autoHideTimeout);
+    this.isVisible = false;
+    this.open = false;
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  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();
+        }
+      }, { once: true });
+    });
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleMouseMove() {
+    this.restartAutoHide();
+  }
+  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();
+    }
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  render() {
+    return (index.h("div", { ref: (el) => (this.alert = el), 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"]
+  }; }
+};
 SixAlert.style = sixAlertCss;
 
 exports.six_alert = SixAlert;

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

@@ -6,34 +6,34 @@ const index = require('./index-341df120.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}";
 
-let SixAvatar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.hasError = false;
-    /** The image source to use for the avatar. */
-    this.image = '';
-    /** Alternative text for the image. */
-    this.alt = '';
-    /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-    this.initials = '';
-    /** The shape of the avatar. */
-    this.shape = 'circle';
-  }
-  connectedCallback() {
-    this.handleImageError = this.handleImageError.bind(this);
-  }
-  handleImageError() {
-    this.hasError = true;
-  }
-  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 }))));
-  }
-};
+let SixAvatar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hasError = false;
+    /** The image source to use for the avatar. */
+    this.image = '';
+    /** Alternative text for the image. */
+    this.alt = '';
+    /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+    this.initials = '';
+    /** The shape of the avatar. */
+    this.shape = 'circle';
+  }
+  connectedCallback() {
+    this.handleImageError = this.handleImageError.bind(this);
+  }
+  handleImageError() {
+    this.hasError = true;
+  }
+  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;
 
 exports.six_avatar = SixAvatar;

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

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