@six-group/ui-library 0.0.0-insider.a9875a1 → 0.0.0-insider.ad9373a

package/dist/collection/components/six-menu-item/six-menu-item.js

@@ -18,7 +18,12 @@ import { getTextContent } from "../../utils/slot";
  */
 export class SixMenuItem {
     constructor() {
+        this.handleCheckboxChange = () => {
+            this.host.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
+        };
         this.hasFocus = false;
+        this.active = false;
+        this.checkType = 'check';
         this.checked = false;
         this.value = '';
         this.disabled = false;
@@ -28,6 +33,7 @@ export class SixMenuItem {
         this.handleFocus = this.handleFocus.bind(this);
         this.handleMouseEnter = this.handleMouseEnter.bind(this);
         this.handleMouseLeave = this.handleMouseLeave.bind(this);
+        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
     }
     /** Sets focus on the button. */
     async setFocus(options) {
@@ -50,10 +56,11 @@ export class SixMenuItem {
         this.hasFocus = true;
     }
     handleMouseEnter() {
-        return this.setFocus();
+        this.active = true;
     }
     handleMouseLeave() {
-        return this.removeFocus();
+        this.active = false;
+        this.hasFocus = false;
     }
     render() {
         return (h("div", { ref: (el) => (this.menuItem = el), part: "base", class: {
@@ -61,7 +68,8 @@ export class SixMenuItem {
                 'menu-item--checked': this.checked,
                 'menu-item--disabled': this.disabled,
                 'menu-item--focused': this.hasFocus,
-            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("span", { part: "prefix", class: "menu-item__prefix" }, h("slot", { name: "prefix" })), h("span", { part: "label", class: "menu-item__label" }, h("slot", { ref: (el) => (this.defaultSlot = el) })), h("span", { part: "suffix", class: "menu-item__suffix" }, h("slot", { name: "suffix" })), h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check"))));
+                'menu-item--active': this.active,
+            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { class: "menu-item__checkbox" }, h("six-checkbox", { "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { part: "prefix", class: "menu-item__prefix" }, h("slot", { name: "prefix" })), h("span", { part: "label", class: "menu-item__label" }, h("slot", { ref: (el) => (this.defaultSlot = el) })), h("span", { part: "suffix", class: "menu-item__suffix" }, h("slot", { name: "suffix" })), this.checkType === 'check' && (h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check")))));
     }
     static get is() { return "six-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -77,6 +85,24 @@ export class SixMenuItem {
     }
     static get properties() {
         return {
+            "checkType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'checkbox' | 'check'",
+                    "resolved": "\"check\" | \"checkbox\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the checked state is displayed as a checkbox or a check-icon"
+                },
+                "attribute": "check-type",
+                "reflect": false,
+                "defaultValue": "'check'"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": false,
@@ -89,7 +115,7 @@ export class SixMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set to true to draw the item in a checked state."
+                    "text": "Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the\nchecked state"
                 },
                 "attribute": "checked",
                 "reflect": true,
@@ -135,7 +161,8 @@ export class SixMenuItem {
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "active": {}
         };
     }
     static get methods() {
@@ -144,8 +171,9 @@ export class SixMenuItem {
                 "complexType": {
                     "signature": "(options?: FocusOptions) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -200,5 +228,6 @@ export class SixMenuItem {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=six-menu-item.js.map

package/dist/collection/components/six-menu-item/six-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-menu-item.js","sourceRoot":"","sources":["../../../src/components/six-menu-item/six-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  private menuItem?: HTMLElement;\n  private defaultSlot?: HTMLSlotElement;\n\n  @State() hasFocus = false;\n\n  /** Set to true to draw the item in a checked state. */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem?.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n  }\n\n  private handleMouseEnter() {\n    return this.setFocus();\n  }\n\n  private handleMouseLeave() {\n    return this.removeFocus();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : undefined}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <six-icon size=\"small\" aria-hidden=\"true\">\n            check\n          </six-icon>\n        </span>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-menu-item.js","sourceRoot":"","sources":["../../../src/components/six-menu-item/six-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  private menuItem?: HTMLElement;\n  private defaultSlot?: HTMLSlotElement;\n\n  @Element() host!: HTMLSixMenuItemElement;\n\n  @State() hasFocus = false;\n\n  @State() active = false;\n\n  /** Defines if the checked state is displayed as a checkbox or a check-icon */\n  @Prop() checkType: 'checkbox' | 'check' = 'check';\n\n  /** Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the\n   * checked state */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem?.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n  }\n\n  private handleMouseEnter() {\n    this.active = true;\n  }\n\n  private handleMouseLeave() {\n    this.active = false;\n    this.hasFocus = false;\n  }\n\n  private handleCheckboxChange = () => {\n    this.host.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n          'menu-item--active': this.active,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : undefined}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        {this.checkType === 'checkbox' && (\n          <span class=\"menu-item__checkbox\">\n            <six-checkbox\n              onSix-checkbox-change={this.handleCheckboxChange}\n              disabled={this.disabled}\n              checked={this.checked}\n            ></six-checkbox>\n          </span>\n        )}\n\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        {this.checkType === 'check' && (\n          <span part=\"checked-icon\" class=\"menu-item__check\">\n            <six-icon size=\"small\" aria-hidden=\"true\">\n              check\n            </six-icon>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-menu-label/six-menu-label.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {

package/dist/collection/components/six-progress-bar/six-progress-bar.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 /**

package/dist/collection/components/six-progress-ring/six-progress-ring.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 /**

package/dist/collection/components/six-radio/six-radio.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {

package/dist/collection/components/six-radio/six-radio.js

@@ -293,8 +293,9 @@ export class SixRadio {
                 "complexType": {
                     "signature": "(options?: FocusOptions) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/six-radio/six-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().forEach((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n      radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n      keyboardEvent.preventDefault();\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().forEach((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n      radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n      keyboardEvent.preventDefault();\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-range/six-range.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 .form-control .form-control__label {

package/dist/collection/components/six-range/six-range.js

@@ -534,8 +534,9 @@ export class SixRange {
                 "complexType": {
                     "signature": "(options?: FocusOptions) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/six-range/six-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-range.js","sourceRoot":"","sources":["../../../src/components/six-range/six-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        errorTextCount={this.errorTextCount}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-range.js","sourceRoot":"","sources":["../../../src/components/six-range/six-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        errorTextCount={this.errorTextCount}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-root/six-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/F;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;;QAoBV,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE;YACrD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1C,CAAC,CAAC,CAAC;0BAnBkB,IAAI;sBAGR,IAAI;qBAGM,IAAI;uBAGb,EAAE;wBAKA,KAAK;;IAQzB,eAAe,CAAC,SAAkB;QAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,YAAM,KAAK,EAAC,UAAU;YACpB,cAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb;YACN,YAAM,IAAI,EAAC,MAAM;gBACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\nexport interface SixRootCollapsedPayload {\n  collapsed: boolean;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */\n  @Prop() breakpoint = 1024;\n\n  /** Defines whether the content section should be padded */\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  /** Emitted when display size is updated. */\n  @Event({ eventName: 'six-root-collapsed' }) collapsedEvent!: EventEmitter<SixRootCollapsedPayload>;\n\n  @State() collapse = false;\n\n  private resizeObserver = new ResizeObserver(([host]) => {\n    const { width } = host.contentRect;\n    this.collapse = width < this.breakpoint;\n  });\n\n  @Watch('collapse')\n  handleCollapsed(collapsed: boolean) {\n    this.collapsedEvent.emit({ collapsed });\n  }\n\n  componentWillLoad() {\n    this.resizeObserver.observe(this.host);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <set-attributes value={{ open: !this.collapse }}>\n            <slot name=\"left-sidebar\" />\n          </set-attributes>\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/F;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;;QAqBV,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE;YACrD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1C,CAAC,CAAC,CAAC;0BApBkB,IAAI;sBAIR,IAAI;qBAGM,IAAI;uBAGb,EAAE;wBAKA,KAAK;;IAQzB,eAAe,CAAC,SAAkB;QAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,YAAM,KAAK,EAAC,UAAU;YACpB,cAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb;YACN,YAAM,IAAI,EAAC,MAAM;gBACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\nexport interface SixRootCollapsedPayload {\n  collapsed: boolean;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */\n  @Prop() breakpoint = 1024;\n\n  /** Defines whether the content section should be padded */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  /** Emitted when display size is updated. */\n  @Event({ eventName: 'six-root-collapsed' }) collapsedEvent!: EventEmitter<SixRootCollapsedPayload>;\n\n  @State() collapse = false;\n\n  private resizeObserver = new ResizeObserver(([host]) => {\n    const { width } = host.contentRect;\n    this.collapse = width < this.breakpoint;\n  });\n\n  @Watch('collapse')\n  handleCollapsed(collapsed: boolean) {\n    this.collapsedEvent.emit({ collapsed });\n  }\n\n  componentWillLoad() {\n    this.resizeObserver.observe(this.host);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <set-attributes value={{ open: !this.collapse }}>\n            <slot name=\"left-sidebar\" />\n          </set-attributes>\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-search-field/six-search-field.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {

package/dist/collection/components/six-select/six-select.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 .form-control .form-control__label {
@@ -86,10 +86,7 @@
   color: var(--six-input-label-color);
 }
 
-:host {
-  display: block;
-}
-
+:host,
 .select {
   display: block;
 }
@@ -149,7 +146,6 @@
 .select--disabled .select__box:not(.select__box--line) {
   border-color: var(--six-input-border-color-disabled);
 }
-.select--disabled .select__tags,
 .select--disabled .select__clear {
   pointer-events: none;
 }
@@ -161,25 +157,30 @@
   border-color: var(--six-input-border-color-danger);
 }
 
-.select__label {
-  flex-shrink: 1;
-  flex-grow: 1;
+.display__values {
+  display: flex;
+  flex: 1 1 auto;
   align-items: center;
   user-select: none;
-  width: 0; /* needed for firefox because due to "white-space: nowrap" the default is set to max-content */
+  overflow: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  overflow-x: auto;
-  overflow-y: hidden;
-  text-overflow: ellipsis;
 }
-.select__label::-webkit-scrollbar {
+.display__values::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
 
-.select__label--single {
+.display__values-values {
+  flex: 0 1 auto;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.display__values-and-counter {
+  display: flex;
+  overflow: hidden;
 }
 
 .select__clear {
@@ -199,22 +200,14 @@
   transform: rotate(-180deg);
 }
 
-.select--placeholder-visible .select__label {
+.placeholder {
   color: var(--six-input-placeholder-color);
 }
 
-.select--disabled.select--placeholder-visible .select__label {
+.select--disabled .placeholder {
   color: var(--six-input-placeholder-color-disabled);
 }
 
-.select__tags {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: left;
-  margin-left: var(--six-spacing-xx-small);
-}
-
 .select__hidden-select {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
@@ -242,8 +235,8 @@
   border: none;
   border-bottom: solid var(--six-border-width) var(--six-input-border-color);
 }
-.select--small .select__label {
-  margin: 0 var(--six-input-spacing-small);
+.select--small .display__values {
+  margin: 0 0 0 var(--six-input-spacing-small);
 }
 .select--small .select__clear {
   margin-right: var(--six-spacing-xxx-small);
@@ -251,16 +244,6 @@
 .select--small .select__icon {
   margin-right: var(--six-spacing-x-small);
 }
-.select--small .select__tags {
-  padding-bottom: 2px;
-}
-.select--small .select__tags six-tag {
-  padding-top: 2px;
-  margin-right: var(--six-spacing-xx-small);
-}
-.select--small.select--has-tags .select__label {
-  margin-left: 0;
-}
 
 .select--medium .select__box {
   border-radius: var(--six-input-border-radius-medium);
@@ -271,8 +254,8 @@
   border: none;
   border-bottom: solid var(--six-border-width) var(--six-input-border-color);
 }
-.select--medium .select__label {
-  margin: 0 var(--six-input-spacing-medium);
+.select--medium .display__values {
+  margin: 0 0 0 var(--six-input-spacing-medium);
 }
 .select--medium .select__clear {
   margin-right: var(--six-spacing-xxx-small);
@@ -280,16 +263,6 @@
 .select--medium .select__icon {
   margin-right: var(--six-spacing-x-small);
 }
-.select--medium .select__tags {
-  padding-bottom: 3px;
-}
-.select--medium .select__tags six-tag {
-  padding-top: 3px;
-  margin-right: var(--six-spacing-xx-small);
-}
-.select--medium.select--has-tags .select__label {
-  margin-left: 0;
-}
 
 .select--large .select__box {
   border-radius: var(--six-input-border-radius-large);
@@ -300,8 +273,8 @@
   border: none;
   border-bottom: solid var(--six-border-width) var(--six-input-border-color);
 }
-.select--large .select__label {
-  margin: 0 var(--six-input-spacing-large);
+.select--large .display__values {
+  margin: 0 0 0 var(--six-input-spacing-large);
 }
 .select--large .select__clear {
   margin-right: var(--six-spacing-xxx-small);
@@ -309,16 +282,6 @@
 .select--large .select__icon {
   margin-right: var(--six-spacing-x-small);
 }
-.select--large .select__tags {
-  padding-bottom: 4px;
-}
-.select--large .select__tags six-tag {
-  padding-top: 4px;
-  margin-right: var(--six-spacing-xx-small);
-}
-.select--large.select--has-tags .select__label {
-  margin-left: 0;
-}
 
 .select--pill.select--small .select__box {
   border-radius: var(--six-height-small);
@@ -331,11 +294,7 @@
 }
 
 .select__menu {
-  max-width: 50vw;
-  width: fit-content;
-}
-.select__menu--filtered {
-  width: 100% !important;
+  width: 100%;
 }
 .select__menu--hidden {
   display: none;
@@ -344,4 +303,33 @@
 six-icon-button::part(base) {
   padding-top: 0;
   padding-bottom: 0;
+}
+
+.selection-container--border {
+  border-bottom: solid var(--six-border-width) var(--six-menu-divider-color);
+  padding-top: var(--six-spacing-xx-small);
+  padding-bottom: var(--six-spacing-xx-small);
+}
+
+.display-value--hidden {
+  display: none;
+}
+
+.overflow-count {
+  color: var(--six-color-web-rock-600);
+  padding-left: var(--six-spacing-x-small);
+}
+
+.overflow-count-hidden {
+  display: none;
+}
+
+.separator--hidden {
+  display: none;
+}
+
+.select-all {
+  border-top: 1px solid var(--six-color-web-rock-300);
+  display: flex;
+  justify-content: end;
 }