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

package/dist/esm/scroll-99b214c2.js

@@ -0,0 +1,62 @@
+//
+// 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 });
+    }
+  }
+}
+
+export { getOffset as g, lockBodyScrolling as l, scrollIntoView as s, unlockBodyScrolling as u };

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

@@ -0,0 +1,66 @@
+import { r as registerInstance, h, g as getElement } from './index-a2605a62.js';
+
+let SetAttributes = class {
+  constructor(hostRef) {
+    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 h("slot", null);
+  }
+  get host() { return 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) {
+    registerInstance(this, hostRef);
+    /** The indicators value attribute */
+    this.stage = null;
+  }
+  render() {
+    return this.stage == null || this.stage == 'PROD' ? null : (h("div", { class: `indicator--${this.stage.toLowerCase()}` }, h("div", { class: "center-content" }, h("six-icon", { class: "align-item", size: "small" }, "error_outline"), h("span", { class: 'align-item' }, h("slot", null)))));
+  }
+};
+SixStageIndicator.style = sixStageIndicatorCss;
+
+export { SetAttributes as set_attributes, SixStageIndicator as six_stage_indicator };

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

@@ -0,0 +1,138 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.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) {
+    registerInstance(this, hostRef);
+    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.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 (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 }, 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 getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"],
+    "duration": ["handleDurationChange"]
+  }; }
+};
+SixAlert.style = sixAlertCss;
+
+export { SixAlert as six_alert };

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

@@ -0,0 +1,35 @@
+import { r as registerInstance, h } from './index-a2605a62.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) {
+    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 (h("div", { part: "base", class: {
+        avatar: true,
+        'avatar--circle': this.shape === 'circle',
+        'avatar--rounded': this.shape === 'rounded',
+        'avatar--square': this.shape === 'square',
+      }, role: "image", "aria-label": this.alt, tabIndex: 0 }, !this.initials && (h("div", { part: "icon", class: "avatar__icon" }, h("slot", { name: "icon" }, h("six-icon", null, "person")))), this.initials && (h("div", { part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+  }
+};
+SixAvatar.style = sixAvatarCss;
+
+export { SixAvatar as six_avatar };

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, h } from './index-a2605a62.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) {
+    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 (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" }, h("slot", null)));
+  }
+};
+SixBadge.style = sixBadgeCss;
+
+export { SixBadge as six_badge };

package/dist/esm/six-button.entry.js

@@ -0,0 +1,104 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
+import { h as hasSlot } from './slot-5253e199.js';
+
+const sixButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:var(--six-focus-ring-width)}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:focus:not(.button--disabled){border-color:var(--six-color-web-rock-400)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:focus:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:focus:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:focus:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:focus:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";
+
+let SixButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixBlur = createEvent(this, "six-button-blur", 7);
+    this.sixFocus = createEvent(this, "six-button-focus", 7);
+    this.hasFocus = false;
+    this.hasLabel = false;
+    this.hasPrefix = false;
+    this.hasSuffix = false;
+    /** The button's type. */
+    this.type = 'primary';
+    /** The button's size. */
+    this.size = 'medium';
+    /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+    this.caret = false;
+    /** Set to true to disable the button. */
+    this.disabled = false;
+    /** Set to true to draw the button in a loading state. */
+    this.loading = false;
+    /** Set to true to draw a pill-style button with rounded edges. */
+    this.pill = false;
+    /** Set to true to draw a circle button. */
+    this.circle = false;
+    /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+    this.submit = false;
+    /** Indicates if activating the button should reset the form. */
+    this.reset = false;
+  }
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  /** Sets focus on the button. */
+  async setFocus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  async removeFocus() {
+    this.button.blur();
+  }
+  handleSlotChange() {
+    this.hasLabel = hasSlot(this.host);
+    this.hasPrefix = hasSlot(this.host, 'prefix');
+    this.hasSuffix = hasSlot(this.host, 'suffix');
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleClick(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  render() {
+    const isLink = !!this.href;
+    const isButton = !isLink;
+    const Button = isLink ? 'a' : 'button';
+    return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { ref: (el) => (this.button = el), part: "base", class: {
+        button: true,
+        // Types
+        'button--secondary': this.type === 'secondary',
+        'button--primary': this.type === 'primary',
+        'button--link': this.type === 'link',
+        'button--success': this.type === 'success',
+        'button--warning': this.type === 'warning',
+        'button--danger': this.type === 'danger',
+        'button--action': this.type === 'action',
+        // Sizes
+        'button--small': this.size === 'small',
+        'button--medium': this.size === 'medium',
+        'button--large': this.size === 'large',
+        // Modifiers
+        'button--caret': this.caret,
+        'button--circle': this.circle,
+        'button--disabled': this.disabled,
+        'button--focused': this.hasFocus,
+        'button--loading': this.loading,
+        'button--pill': this.pill,
+        'button--has-label': this.hasLabel,
+        'button--has-prefix': this.hasPrefix,
+        'button--has-suffix': this.hasSuffix,
+      }, disabled: isButton ? this.disabled : null, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null, name: isButton ? this.name : null, value: isButton ? this.value : null, href: isLink && this.href, target: isLink && this.target ? this.target : null, download: isLink && this.download ? this.download : null, rel: isLink && this.target ? 'noreferrer noopener' : null, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, "data-testid": "button" }, h("span", { part: "prefix", class: "button__prefix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { part: "label", class: "button__label" }, h("slot", { onSlotchange: this.handleSlotChange })), h("span", { part: "suffix", class: "button__suffix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { part: "caret", class: "button__caret" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", null))));
+  }
+  get host() { return getElement(this); }
+};
+SixButton.style = sixButtonCss;
+
+export { SixButton as six_button };

package/dist/esm/six-card.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-a2605a62.js';
+
+const sixCardCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block;box-shadow:var(--six-elevation-8dp);border-radius:0;padding:1rem;margin-bottom:0.6rem}";
+
+let SixCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+SixCard.style = sixCardCss;
+
+export { SixCard as six_card };

package/dist/esm/six-checkbox.entry.js

@@ -0,0 +1,159 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
+import { F as FormControl } from './form-control-17478ad2.js';
+import { h as hasSlot } from './slot-5253e199.js';
+import { E as EventListeners } from './event-listeners-1bef934e.js';
+
+const sixCheckboxCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
+
+let id = 0;
+let SixCheckbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixBlur = createEvent(this, "six-checkbox-blur", 7);
+    this.sixChange = createEvent(this, "six-checkbox-change", 7);
+    this.sixFocus = createEvent(this, "six-checkbox-focus", 7);
+    this.inputId = `checkbox-${++id}`;
+    this.labelId = `checkbox-label-${id}`;
+    this.textId = `checkbox-text-${id}`;
+    this.errorTextId = `input-error-text-${id}`;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.eventListeners = new EventListeners();
+    this.hasFocus = false;
+    this.hasLabelSlot = false;
+    this.hasErrorTextSlot = false;
+    /** Set to true to disable the checkbox. */
+    this.disabled = false;
+    /** Set to true to make the checkbox a required field. */
+    this.required = false;
+    /** The checkbox label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The checkbox's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** Set to true to draw the checkbox in a checked state. */
+    this.checked = false;
+    /** Set to true to draw the checkbox in an indeterminate state. */
+    this.indeterminate = false;
+    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+    this.invalid = false;
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** default state whether the radio button should be checked or not when resetting */
+    this.defaultState = false;
+  }
+  handleCheckedChange() {
+    if (!this.input) {
+      return;
+    }
+    this.input.checked = this.checked;
+    this.input.indeterminate = this.indeterminate;
+    this.invalid = !this.input.checkValidity();
+    this.sixChange.emit();
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleInvalid = this.handleInvalid.bind(this);
+    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  componentWillLoad() {
+    this.defaultState = this.checked;
+    this.handleSlotChange();
+  }
+  componentDidLoad() {
+    this.input.indeterminate = this.indeterminate;
+    this.eventListeners.add(this.input, 'invalid', (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
+        this.customErrorText = this.input.validationMessage;
+      }
+      event.preventDefault();
+    });
+  }
+  /** Sets focus on the checkbox. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the checkbox. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.validity.valid;
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.customErrorText = '';
+    this.customValidation = message !== '';
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.checked = this.defaultState;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  handleChange() {
+    this.checked = this.input.checked;
+    this.indeterminate = false;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleMouseDown(event) {
+    // Prevent clicks on the label from briefly blurring the input
+    event.preventDefault();
+    this.input.focus();
+  }
+  handleInvalid() {
+    this.invalid = true;
+  }
+  handleSlotChange() {
+    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = hasSlot(this.host, 'label');
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  }
+  render() {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("label", { part: "base", class: {
+        checkbox: true,
+        'checkbox--checked': this.checked,
+        'checkbox--disabled': this.disabled,
+        'checkbox--focused': this.hasFocus,
+        'checkbox--invalid': this.invalid,
+        'checkbox--indeterminate': this.indeterminate,
+      }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "checkbox__control" }, this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(3.428571, 3.428571)" }, h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(2.285714, 6.857143)" }, h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid })), h("span", { part: "text", id: this.textId, class: "checkbox__text" }, h("slot", null)))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["handleCheckedChange"],
+    "indeterminate": ["handleCheckedChange"],
+    "errorText": ["handleLabelChange"],
+    "label": ["handleLabelChange"]
+  }; }
+};
+SixCheckbox.style = sixCheckboxCss;
+
+export { SixCheckbox as six_checkbox };