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

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

@@ -3,106 +3,106 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const slot = require('./slot-8abe833c.js');
+const slot = require('./slot-ad537f24.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) {
-    index.registerInstance(this, hostRef);
-    this.sixBlur = index.createEvent(this, "six-button-blur", 7);
-    this.sixFocus = index.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 = slot.hasSlot(this.host);
-    this.hasPrefix = slot.hasSlot(this.host, 'prefix');
-    this.hasSuffix = slot.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 (index.h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, index.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" }, index.h("span", { part: "prefix", class: "button__prefix" }, index.h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), index.h("span", { part: "label", class: "button__label" }, index.h("slot", { onSlotchange: this.handleSlotChange })), index.h("span", { part: "suffix", class: "button__suffix" }, index.h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (index.h("span", { part: "caret", class: "button__caret" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && index.h("six-spinner", null))));
-  }
-  get host() { return index.getElement(this); }
-};
+let SixButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixBlur = index.createEvent(this, "six-button-blur", 7);
+    this.sixFocus = index.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 = slot.hasSlot(this.host);
+    this.hasPrefix = slot.hasSlot(this.host, 'prefix');
+    this.hasSuffix = slot.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 (index.h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, index.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" }, index.h("span", { part: "prefix", class: "button__prefix" }, index.h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), index.h("span", { part: "label", class: "button__label" }, index.h("slot", { onSlotchange: this.handleSlotChange })), index.h("span", { part: "suffix", class: "button__suffix" }, index.h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (index.h("span", { part: "caret", class: "button__caret" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && index.h("six-spinner", null))));
+  }
+  get host() { return index.getElement(this); }
+};
 SixButton.style = sixButtonCss;
 
 exports.six_button = SixButton;

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

@@ -6,14 +6,14 @@ const index = require('./index-341df120.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) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-};
+let SixCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
 SixCard.style = sixCardCss;
 
 exports.six_card = SixCard;

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

@@ -3,161 +3,161 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const formControl = require('./form-control-9e4dffd1.js');
-const slot = require('./slot-8abe833c.js');
-const eventListeners = require('./event-listeners-4a8d66d5.js');
+const formControl = require('./form-control-866bbece.js');
+const slot = require('./slot-ad537f24.js');
+const eventListeners = require('./event-listeners-74715e62.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) {
-    index.registerInstance(this, hostRef);
-    this.sixBlur = index.createEvent(this, "six-checkbox-blur", 7);
-    this.sixChange = index.createEvent(this, "six-checkbox-change", 7);
-    this.sixFocus = index.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.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 = slot.hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = slot.hasSlot(this.host, 'label');
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
-  render() {
-    return (index.h(formControl.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() }, index.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 }, index.h("span", { part: "control", class: "checkbox__control" }, this.checked && (index.h("span", { part: "checked-icon", class: "checkbox__icon" }, index.h("svg", { viewBox: "0 0 16 16" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { stroke: "currentColor", "stroke-width": "2" }, index.h("g", { transform: "translate(3.428571, 3.428571)" }, index.h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), index.h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (index.h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, index.h("svg", { viewBox: "0 0 16 16" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { stroke: "currentColor", "stroke-width": "2" }, index.h("g", { transform: "translate(2.285714, 6.857143)" }, index.h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), index.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 })), index.h("span", { part: "text", id: this.textId, class: "checkbox__text" }, index.h("slot", null)))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "checked": ["handleCheckedChange"],
-    "indeterminate": ["handleCheckedChange"],
-    "errorText": ["handleLabelChange"],
-    "label": ["handleLabelChange"]
-  }; }
-};
+let id = 0;
+let SixCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixBlur = index.createEvent(this, "six-checkbox-blur", 7);
+    this.sixChange = index.createEvent(this, "six-checkbox-change", 7);
+    this.sixFocus = index.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.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 = slot.hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = slot.hasSlot(this.host, 'label');
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  }
+  render() {
+    return (index.h(formControl.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() }, index.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 }, index.h("span", { part: "control", class: "checkbox__control" }, this.checked && (index.h("span", { part: "checked-icon", class: "checkbox__icon" }, index.h("svg", { viewBox: "0 0 16 16" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { stroke: "currentColor", "stroke-width": "2" }, index.h("g", { transform: "translate(3.428571, 3.428571)" }, index.h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), index.h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (index.h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, index.h("svg", { viewBox: "0 0 16 16" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { stroke: "currentColor", "stroke-width": "2" }, index.h("g", { transform: "translate(2.285714, 6.857143)" }, index.h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), index.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 })), index.h("span", { part: "text", id: this.textId, class: "checkbox__text" }, index.h("slot", null)))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["handleCheckedChange"],
+    "indeterminate": ["handleCheckedChange"],
+    "errorText": ["handleLabelChange"],
+    "label": ["handleLabelChange"]
+  }; }
+};
 SixCheckbox.style = sixCheckboxCss;
 
 exports.six_checkbox = SixCheckbox;