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

package/dist/components/six-progress-ring.js

@@ -9,7 +9,7 @@ const SixProgressRing$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressRing
     this.__attachShadow();
     this.size = 128;
     this.strokeWidth = 4;
-    this.percentage = undefined;
+    this.percentage = 0;
   }
   handlePercentageChange() {
     this.updateProgress();
@@ -18,9 +18,9 @@ const SixProgressRing$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressRing
     this.updateProgress();
   }
   updateProgress() {
-    if (!this.indicator.r) {
+    var _a;
+    if (((_a = this.indicator) === null || _a === void 0 ? void 0 : _a.r) == null)
       return;
-    }
     const radius = this.indicator.r.baseVal.value;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - (this.percentage / 100) * circumference;

package/dist/components/six-progress-ring.js.map

@@ -1 +1 @@
-{"file":"six-progress-ring.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,+uBAA+uB;;MCmB7vBA,iBAAe;;;;;gBAIX,GAAG;uBAGI,CAAC;;;EAMvB,sBAAsB;IACpB,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE;MACrB,OAAO;KACR;IACD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;IAC9C,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,aAAa,CAAC;IAEvE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,aAAa,IAAI,aAAa,EAAE,CAAC;IAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,MAAM,EAAE,CAAC;GACrD;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IACpC,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,IACnE,cACE,KAAK,EAAC,sBAAsB,kBACd,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB,EAEF,cACE,GAAG,EAAE,CAAC,EAAoB,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EACpD,KAAK,EAAC,0BAA0B,kBAClB,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB,CACE,EAEN,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,IAC7C,eAAQ,CACH,CACH,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixProgressRing"],"sources":["./src/components/six-progress-ring/six-progress-ring.scss?tag=six-progress-ring&encapsulation=shadow","./src/components/six-progress-ring/six-progress-ring.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n\n  display: inline-flex;\n}\n\n.progress-ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.progress-ring__image {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.progress-ring__track {\n  stroke: var(--track-color);\n}\n\n.progress-ring__indicator {\n  stroke: var(--indicator-color);\n  transition: 0.35s stroke-dashoffset, 0.35s stroke;\n}\n\n.progress-ring__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  user-select: none;\n  font-family: var(--six-font-family);\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\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 - A label to show inside the ring.\n *\n * @part base - The component's base wrapper.\n * @part label - The progress ring label.\n */\n\n@Component({\n  tag: 'six-progress-ring',\n  styleUrl: 'six-progress-ring.scss',\n  shadow: true,\n})\nexport class SixProgressRing {\n  indicator: SVGCircleElement;\n\n  /** The size of the progress ring in pixels. */\n  @Prop() size = 128;\n\n  /** The stroke width of the progress ring in pixels. */\n  @Prop() strokeWidth = 4;\n\n  /** The current progress percentage, 0 - 100. */\n  @Prop() percentage: number;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  updateProgress() {\n    if (!this.indicator.r) {\n      return;\n    }\n    const radius = this.indicator.r.baseVal.value;\n    const circumference = radius * 2 * Math.PI;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;\n    this.indicator.style.strokeDashoffset = `${offset}`;\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"progress-ring\">\n        <svg class=\"progress-ring__image\" width={this.size} height={this.size}>\n          <circle\n            class=\"progress-ring__track\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n\n          <circle\n            ref={(el: SVGCircleElement) => (this.indicator = el)}\n            class=\"progress-ring__indicator\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n        </svg>\n\n        <span part=\"label\" class=\"progress-ring__label\">\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-progress-ring.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,+uBAA+uB;;MCmB7vBA,iBAAe;;;;;gBAIX,GAAG;uBAGI,CAAC;sBAGF,CAAC;;EAGtB,sBAAsB;IACpB,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAEO,cAAc;;IACpB,IAAI,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,CAAC,KAAI,IAAI;MAAE,OAAO;IAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;IAC9C,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,aAAa,CAAC;IAEvE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,aAAa,IAAI,aAAa,EAAE,CAAC;IAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,MAAM,EAAE,CAAC;GACrD;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IACpC,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,IACnE,cACE,KAAK,EAAC,sBAAsB,kBACd,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB,EAEF,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACtD,KAAK,EAAC,0BAA0B,kBAClB,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB,CACE,EAEN,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,IAC7C,eAAQ,CACH,CACH,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixProgressRing"],"sources":["./src/components/six-progress-ring/six-progress-ring.scss?tag=six-progress-ring&encapsulation=shadow","./src/components/six-progress-ring/six-progress-ring.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n\n  display: inline-flex;\n}\n\n.progress-ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.progress-ring__image {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.progress-ring__track {\n  stroke: var(--track-color);\n}\n\n.progress-ring__indicator {\n  stroke: var(--indicator-color);\n  transition: 0.35s stroke-dashoffset, 0.35s stroke;\n}\n\n.progress-ring__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  user-select: none;\n  font-family: var(--six-font-family);\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\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 - A label to show inside the ring.\n *\n * @part base - The component's base wrapper.\n * @part label - The progress ring label.\n */\n\n@Component({\n  tag: 'six-progress-ring',\n  styleUrl: 'six-progress-ring.scss',\n  shadow: true,\n})\nexport class SixProgressRing {\n  private indicator?: SVGCircleElement;\n\n  /** The size of the progress ring in pixels. */\n  @Prop() size = 128;\n\n  /** The stroke width of the progress ring in pixels. */\n  @Prop() strokeWidth = 4;\n\n  /** The current progress percentage, 0 - 100. */\n  @Prop() percentage = 0;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  private updateProgress() {\n    if (this.indicator?.r == null) return;\n\n    const radius = this.indicator.r.baseVal.value;\n    const circumference = radius * 2 * Math.PI;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;\n    this.indicator.style.strokeDashoffset = `${offset}`;\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"progress-ring\">\n        <svg class=\"progress-ring__image\" width={this.size} height={this.size}>\n          <circle\n            class=\"progress-ring__track\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n\n          <circle\n            ref={(el) => (this.indicator = el as SVGCircleElement)}\n            class=\"progress-ring__indicator\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n        </svg>\n\n        <span part=\"label\" class=\"progress-ring__label\">\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-root.js

@@ -19,7 +19,7 @@ const SixRoot$1 = /*@__PURE__*/ proxyCustomElement(class SixRoot extends HTMLEle
     this.padded = true;
     this.stage = null;
     this.version = '';
-    this.collapse = undefined;
+    this.collapse = false;
   }
   handleCollapsed(collapsed) {
     this.collapsedEvent.emit({ collapsed });

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

@@ -1 +1 @@
-{"file":"six-root.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,klBAAklB;;MCuBxlBA,SAAO;;;;;;IAoBlB,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;MACzC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;KACzC,CAAC,CAAC;sBAnBkB,IAAI;kBAGR,IAAI;iBAGM,IAAI;mBAGb,EAAE;;;EAapB,eAAe,CAAC,SAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACxC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACE,YAAM,KAAK,EAAC,UAAU,IACpB,cAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb,EACN,YAAM,IAAI,EAAC,MAAM,IACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,WAAK,KAAK,EAAC,kBAAkB,IAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixRoot"],"sources":["./src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","./src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","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 side bar on the left side.\n * @slot right-sidebar - Used to define the side bar 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: boolean;\n\n  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","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,klBAAklB;;MCuBxlBA,SAAO;;;;;;IAoBV,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;MACjD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;KACzC,CAAC,CAAC;sBAnBkB,IAAI;kBAGR,IAAI;iBAGM,IAAI;mBAGb,EAAE;oBAKA,KAAK;;EAQzB,eAAe,CAAC,SAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACxC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACE,YAAM,KAAK,EAAC,UAAU,IACpB,cAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb,EACN,YAAM,IAAI,EAAC,MAAM,IACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,WAAK,KAAK,EAAC,kBAAkB,IAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixRoot"],"sources":["./src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","./src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","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}

package/dist/components/six-search-field.js

@@ -14,7 +14,9 @@ const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField e
     this.searchFieldChange = createEvent(this, "six-search-field-change", 7);
     this.eventListeners = new EventListeners();
     this.handleInputChange = () => {
-      this.searchFieldChange.emit({ value: this.inputElement.value });
+      if (this.inputElement != null) {
+        this.searchFieldChange.emit({ value: this.inputElement.value });
+      }
     };
     this.placeholder = undefined;
     this.debounce = DEFAULT_DEBOUNCE_FAST;
@@ -23,14 +25,17 @@ const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField e
     this.clearable = false;
   }
   handleValueChange() {
-    if (this.inputElement) {
+    if (this.inputElement != null) {
       this.inputElement.value = this.value;
     }
   }
   componentDidLoad() {
+    if (this.inputElement == null)
+      return;
     this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
     this.eventListeners.add(this.inputElement, 'keydown', (event) => {
-      if (event.key === 'Enter') {
+      const keyboardEvent = event;
+      if (keyboardEvent.key === 'Enter') {
         // emit immediately
         this.handleInputChange();
       }

package/dist/components/six-search-field.js.map

@@ -1 +1 @@
-{"file":"six-search-field.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,iNAAiN;;MCoB9NA,gBAAc;;;;;;IAqBhB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAE/C,sBAAiB,GAAG;MAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;KACjE,CAAC;;oBApBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAczB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAoB;MACzE,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;;QAEzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;KACF,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACrB,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSearchField"],"sources":["./src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","./src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;\n\n  inputElement: HTMLSixInputElement;\n\n  readonly eventListeners = new EventListeners();\n\n  handleInputChange = () => {\n    this.searchFieldChange.emit({ value: this.inputElement.value });\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-search-field.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,iNAAiN;;MCoB9NA,gBAAc;;;;;;IAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAEtC,sBAAiB,GAAG;MAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;QAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;OACjE;KACF,CAAC;;oBAtBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAgBzB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;MAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;GACF;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;MAAE,OAAO;IAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY;MACjE,MAAM,aAAa,GAAG,KAAsB,CAAC;MAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;QAEjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;KACF,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACrB,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSearchField"],"sources":["./src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","./src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-select.js

@@ -11,57 +11,12 @@ import { d as defineCustomElement$4 } from './six-menu2.js';
 import { d as defineCustomElement$3 } from './six-menu-item2.js';
 import { d as defineCustomElement$2 } from './six-tag2.js';
 
-function getValue(value, multiple, menuItems) {
-  var _a, _b;
-  if (multiple) {
-    if (Array.isArray(value)) {
-      return getSelectedValues(value, menuItems);
-    }
-    else {
-      return getSelectedValuesFromString(value, menuItems);
-    }
-  }
-  return (_b = (_a = getSelectedMenuItem(value, menuItems)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
-}
-function isValidValue(value, multiple, menuItems) {
-  if (value === '') {
-    return true;
-  }
-  if (multiple) {
-    if (Array.isArray(value)) {
-      if (value.length === 0) {
-        return true;
-      }
-      return getSelectedValues(value, menuItems).length === value.length;
-    }
-    return getSelectedValuesFromString(value, menuItems).length > 0;
-  }
-  return getSelectedMenuItem(value, menuItems) != null;
-}
-function valueEquals(a, b) {
-  if (Array.isArray(a) && Array.isArray(b)) {
-    return a.length === b.length && a.every((element, index) => element === b[index]);
-  }
-  else if (typeof a === 'string' && typeof b === 'string') {
-    return a === b;
-  }
-  return false;
-}
 function isValueEmpty(value) {
   if (Array.isArray(value)) {
     return value.length === 0;
   }
   return value === '';
 }
-function getSelectedValues(values, menuItems) {
-  return menuItems.filter((menuItem) => values.includes(menuItem.value)).map((menuItem) => menuItem.value);
-}
-function getSelectedValuesFromString(value, menuItems) {
-  return menuItems.filter((menuItem) => value === menuItem.value).map((menuItem) => menuItem.value);
-}
-function getSelectedMenuItem(value, menuItems) {
-  return menuItems.find((item) => value === item.value);
-}
 
 const sixSelectCss = ":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:block}.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.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}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.select__label{flex-shrink:1;flex-grow:1;align-items:center;user-select:none;width:0;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.select__label::-webkit-scrollbar{width:0;height:0}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color)}.select--disabled.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color-disabled)}.select__tags{display:inline-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%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{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 .select__clear{margin-right:var(--six-spacing-xxx-small)}.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}.select--small .select__tags six-tag:not(:last-of-type){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);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{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 .select__clear{margin-right:var(--six-spacing-xxx-small)}.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}.select--medium .select__tags six-tag:not(:last-of-type){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);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{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 .select__clear{margin-right:var(--six-spacing-xxx-small)}.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}.select--large .select__tags six-tag:not(:last-of-type){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)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{max-width:50vw;width:fit-content}.select__menu--filtered{width:100% !important}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}";
 
@@ -114,8 +69,8 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         this.value = hasDeselectedOptions ? checkedItems : [];
       }
     };
-    this.handleKeyDown = async (event) => {
-      var _a;
+    this.handleKeyDown = (event) => {
+      var _a, _b, _c, _d;
       const target = event.target;
       const items = this.getItems();
       const firstItem = items[0];
@@ -126,8 +81,8 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
       }
       // Tabbing out of the control closes it
       if (event.key === 'Tab') {
-        if (this.isOpen && this.dropdown != null) {
-          await this.dropdown.hide();
+        if (this.isOpen) {
+          (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
         }
         return;
       }
@@ -135,29 +90,46 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
       if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
         event.preventDefault();
         // Show the menu if it's not already open
-        if (!this.isOpen && this.dropdown != null) {
-          await this.dropdown.show();
+        if (!this.isOpen) {
+          (_b = this.dropdown) === null || _b === void 0 ? void 0 : _b.show();
         }
         // Focus on a menu item
         if (event.key === 'ArrowDown' && firstItem) {
           firstItem.setFocus();
+          return;
         }
-        else if (event.key === 'ArrowUp' && lastItem) {
+        if (event.key === 'ArrowUp' && lastItem) {
           lastItem.setFocus();
+          return;
         }
       }
       // All other keys open the menu and initiate type to select
-      if (!this.isOpen && this.dropdown != null) {
+      if (!this.isOpen) {
         event.stopPropagation();
         event.preventDefault();
-        await this.dropdown.show();
-        await ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.typeToSelect(event.key));
+        (_c = this.dropdown) === null || _c === void 0 ? void 0 : _c.show();
+        (_d = this.menu) === null || _d === void 0 ? void 0 : _d.typeToSelect(event.key);
       }
     };
     this.handleLabelClick = () => {
       var _a;
       (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus();
     };
+    this.handleMenuSelect = (event) => {
+      const item = event.detail.item;
+      const getValue = () => {
+        if (this.multiple) {
+          return this.value.includes(item.value)
+            ? this.value.filter((v) => v !== item.value)
+            : [...this.value, item.value];
+        }
+        else {
+          return item.value;
+        }
+      };
+      this.value = getValue();
+      this.syncItemsFromValue();
+    };
     this.handleMenuShow = (event) => {
       var _a;
       if (this.disabled) {
@@ -177,7 +149,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
       this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
       this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
       this.hasLabelSlot = hasSlot(this.host, 'label');
-      this.update();
+      this.syncItemsFromValue();
     };
     this.handleTagInteraction = (event) => {
       // Don't toggle the menu when a tag's clear button is activated
@@ -224,97 +196,33 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
     this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
     this.options = null;
     this.virtualScroll = false;
-    this.defaultValue = undefined;
+    this.defaultValue = this.multiple ? [] : '';
   }
   handleDisabledChange() {
-    if (this.disabled && this.isOpen && this.dropdown != null) {
-      this.dropdown.hide();
+    var _a;
+    if (this.disabled && this.isOpen) {
+      (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
     }
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleMultipleChange() {
-    this.update();
+    // Cast to array | string based on `this.multiple`
+    const value = this.getValueAsArray();
+    this.value = this.multiple ? value : value[0] || '';
+    this.syncItemsFromValue();
   }
-  handleValueChange(newValue, oldValue) {
-    var _a;
-    let items = (_a = this.options) !== null && _a !== void 0 ? _a : this.getItems();
-    // normalize invalid values. This will re-trigger this watch handler
-    if (!isValidValue(newValue, this.multiple, items)) {
-      this.value = getValue(newValue, this.multiple, items);
-      return;
+  handleValueChange() {
+    if (this.multiple && !Array.isArray(this.value)) {
+      this.value = [];
     }
-    // avoid re-triggering if old and new values are equal. Needed because
-    // watch does a shallow comparison only.
-    if (valueEquals(getValue(oldValue, this.multiple, items), getValue(newValue, this.multiple, items))) {
-      return;
+    if (!this.multiple && typeof this.value !== 'string') {
+      this.value = '';
     }
-    this.update();
-    this.sixChange.emit({ value: this.value, isSelected: true });
-  }
-  update() {
-    var _a;
-    const items = this.getItems();
-    this.value = getValue(this.value, this.multiple, (_a = this.options) !== null && _a !== void 0 ? _a : items);
-    if (!Array.isArray(this.value)) {
-      // Sync checked states
-      items.forEach((item) => (item.checked = false));
-      const item = items.find((item) => this.value.includes(item.value));
-      if (item != null) {
-        item.checked = true;
-      }
-      // Sync input element content
-      this.displayLabel = this.extractLabelForSelectedItem([this.value], items);
-      this.displayTags = [];
-      const hasSelection = !isValueEmpty(this.value);
-      if (hasSelection) {
-        this.touched = true;
-      }
-      if (this.inputElement && this.touched) {
-        if (!this.autocomplete) {
-          this.inputElement.value = hasSelection ? this.displayLabel : '';
-        }
-        else if (hasSelection) {
-          this.inputElement.value = this.value;
-        }
-        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));
-      }
-    }
-    else {
-      // Sync checked states
-      items.forEach((item) => (item.checked = this.value.includes(item.value)));
-      // Sync display label
-      const checkedItems = [];
-      this.value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
-      this.displayTags = checkedItems.map((item) => {
-        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
-            event.stopPropagation();
-            if (!this.disabled) {
-              this.toggleItem(item);
-            }
-          } }, this.getItemLabel(item)));
-      });
-      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
-        const total = this.displayTags.length;
-        this.displayLabel = '';
-        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
-        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
-      }
-      // Sync input element content
-      const hasSelection = !isValueEmpty(this.value);
-      if (hasSelection) {
-        this.touched = true;
-      }
-      if (this.inputElement && this.touched) {
-        if (!this.autocomplete) {
-          this.inputElement.value = hasSelection ? this.displayLabel : '';
-        }
-        else if (hasSelection) {
-          this.inputElement.value = this.value.join(',');
-        }
-        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));
-      }
+    this.syncItemsFromValue();
+    if (this.input) {
+      this.sixChange.emit({ value: this.value, isSelected: true });
     }
   }
   connectedCallback() {
@@ -326,25 +234,30 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
   }
   componentWillLoad() {
     this.handleSlotChange();
+    if (this.multiple && this.value != null) {
+      this.value = this.getValueAsArray();
+    }
   }
   componentDidLoad() {
-    const inputElement = this.inputElement;
-    if (inputElement == null) {
+    if (this.input == null)
       return;
-    }
+    const input = this.input;
     this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
-    this.eventListeners.add(inputElement, 'invalid', async (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
-        this.customErrorText = await inputElement.getValidationMessage();
+    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
+    requestAnimationFrame(() => this.syncItemsFromValue());
+    this.eventListeners.add(this.input, 'invalid', async (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText == null && this.customErrorText == null)) {
+        this.customErrorText = await input.getValidationMessage();
       }
       event.preventDefault();
     });
-    this.eventListeners.add(inputElement, 'six-input-input', debounce((event) => {
-      const enteredValue = inputElement.value;
+    this.eventListeners.add(input, 'six-input-input', debounce((event) => {
+      const enteredValue = input.value;
       this.clearValues();
       this.sixChange.emit({ value: enteredValue, isSelected: false });
       event.stopPropagation();
     }, this.inputDebounce));
+    input.value = this.hasSelection() ? this.displayLabel : '';
   }
   disconnectedCallback() {
     var _a;
@@ -354,29 +267,30 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   async reportValidity() {
     var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
+    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.reportValidity();
   }
   /** Checks for validity. */
   async checkValidity() {
     var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.isValid();
+    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.isValid();
   }
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   async setCustomValidity(message) {
+    if (this.input == null)
+      return;
     this.customErrorText = '';
     this.customValidation = message !== '';
-    if (this.inputElement != null) {
-      await this.inputElement.setCustomValidity(message);
-      this.invalid = !(await this.inputElement.checkValidity());
-    }
+    await this.input.setCustomValidity(message);
+    this.invalid = !(await this.input.checkValidity());
   }
   /** Resets the formcontrol */
   async reset() {
-    var _a;
-    this.clearValues();
+    if (this.input == null)
+      return;
+    this.value = this.defaultValue;
     this.customErrorText = '';
     this.customValidation = false;
-    await ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(''));
+    await this.input.setCustomValidity('');
     this.invalid = false;
   }
   getItemLabel(item) {
@@ -399,18 +313,59 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
   hasMenuItems() {
     return this.getItems().length > 0;
   }
+  getValueAsArray() {
+    const values = Array.isArray(this.value) ? this.value : [this.value];
+    // enforce that the values are converted to 'string' before the value is compared
+    return values.map(String);
+  }
   clearValues() {
     var _a;
     this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
-    this.update();
+    this.syncItemsFromValue();
   }
-  async resizeMenu() {
-    if (this.menu == null || this.box == null) {
+  resizeMenu() {
+    if (this.menu == null || this.box == null)
       return;
-    }
     this.menu.style.minWidth = `${this.box.clientWidth}px`;
     if (this.dropdown) {
-      await this.dropdown.reposition();
+      this.dropdown.reposition();
+    }
+  }
+  async syncItemsFromValue() {
+    const items = this.getItems();
+    const value = this.getValueAsArray();
+    // Sync checked states
+    items.forEach((item) => (item.checked = value.includes(item.value)));
+    // Sync display label
+    if (this.multiple) {
+      const checkedItems = [];
+      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
+      this.displayTags = checkedItems.map((item) => {
+        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
+            event.stopPropagation();
+            if (!this.disabled) {
+              item.checked = false;
+              this.syncValueFromItems();
+            }
+          } }, this.getItemLabel(item)));
+      });
+      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
+        const total = this.displayTags.length;
+        this.displayLabel = '';
+        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
+        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
+      }
+    }
+    else {
+      this.displayLabel = this.extractLabelForSelectedItem(value, items);
+      this.displayTags = [];
+    }
+    if (!isValueEmpty(this.value)) {
+      this.touched = true;
+    }
+    if (this.touched && this.input != null) {
+      this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+      this.invalid = !(await this.input.checkValidity());
     }
   }
   extractLabelForSelectedItem(value, items) {
@@ -424,34 +379,23 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
     const checkedItem = items.find((item) => item.value === value[0]);
     return checkedItem ? this.getItemLabel(checkedItem) : '';
   }
-  toggleItem(item) {
-    var _a;
-    const value = getValue(this.value, this.multiple, (_a = this.options) !== null && _a !== void 0 ? _a : this.getItems());
-    if (Array.isArray(value)) {
-      const itemFound = value.find((v) => v === item.value);
-      if (itemFound == null) {
-        this.value = [...this.value, item.value];
-      }
-      else {
-        this.value = value.filter((v) => v !== item.value);
-      }
-    }
-    else {
-      if (item.value === value) {
-        this.value = '';
-      }
-      else {
-        this.value = item.value;
-      }
-    }
+  syncValueFromItems() {
+    const items = this.getItems();
+    const checkedItems = items.filter((item) => item.checked);
+    const checkedValues = checkedItems.map((item) => item.value);
+    this.value = this.multiple
+      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))
+      : checkedValues.length > 0
+        ? checkedValues[0]
+        : '';
   }
   displayError() {
     return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
   }
   render() {
     var _a;
-    const hasSelection = !isValueEmpty(this.value);
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+    const hasSelection = this.hasSelection();
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null && this.customErrorText !== '' ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
         select: true,
         'select--open': this.isOpen,
         'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -470,14 +414,17 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         select__box: true,
         'select__box--line': this.line,
         'select__box--autocomplete': this.autocomplete,
-      }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: "select__label" }, this.displayTags.length ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.inputElement = el), class: {
+      }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: "select__label" }, this.displayTags.length > 0 ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.input = el), class: {
         select__input: true,
         'select__hidden-select': !this.autocomplete,
       }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
         select__menu: true,
         'select__menu--filtered': this.filter || this.asyncFilter,
         'select__menu--hidden': !this.hasMenuItems(),
-      }, "onSix-menu-item-selected": (event) => this.toggleItem(event.detail.item), items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
+      }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
+  }
+  hasSelection() {
+    return this.multiple ? this.value.length > 0 : this.value !== '';
   }
   get host() { return this; }
   static get watchers() { return {