@six-group/ui-library 0.0.0-insider.ccdf415 → 0.0.0-insider.cd56b84

package/dist/ui-library/p-50d589eb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,g as i}from"./p-e8d5a789.js";import{F as s}from"./p-6ee48e81.js";import{h as r,a as l}from"./p-0cebf1d2.js";import{E as n}from"./p-8bfb4bfc.js";const c=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.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:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.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;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox--focused .checkbox__control{outline:var(--six-focus-ring);outline-offset:0}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}';const a=c;let h=0;const d=class{constructor(t){e(this,t);this.sixBlur=o(this,"six-checkbox-blur",7);this.sixChange=o(this,"six-checkbox-change",7);this.sixFocus=o(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++h}`;this.labelId=`checkbox-label-${h}`;this.textId=`checkbox-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.eventListeners=new n;this.handleChange=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.indeterminate=false;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleMouseDown=e=>{var o;e.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.checked=false;this.indeterminate=false}handleCheckedChange(){if(this.nativeInput==null)return;this.nativeInput.checked=this.checked;this.checked=this.nativeInput.checked;this.nativeInput.indeterminate=this.indeterminate}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var e;(e=this.host.shadowRoot)===null||e===void 0?void 0:e.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-checkbox-change","change",this.host);this.eventListeners.forward("six-checkbox-blur","blur",this.host);this.eventListeners.forward("six-checkbox-focus","focus",this.host)}disconnectedCallback(){var e;(e=this.host.shadowRoot)===null||e===void 0?void 0:e.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const e=this.nativeInput;if(e==null){return}e.indeterminate=this.indeterminate}async setFocus(e){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(e)}async removeFocus(){var e;(e=this.nativeInput)===null||e===void 0?void 0:e.blur()}handleSlotChange(){this.hasLabelSlot=r(this.host,"label");this.hasErrorSlot=r(this.host,"error-text")}render(){return t(s,{key:"3d86769243701a88970d140cb59d8618006a826c",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,hasErrorTextSlot:this.hasErrorSlot,errorText:this.errorText,errorTextCount:this.errorTextCount,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},t("label",{key:"29a09dd1e61162652a4c204a47efc21059bfd1be",part:"base",class:{checkbox:true,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--invalid":this.invalid,"checkbox--indeterminate":this.indeterminate},htmlFor:this.inputId,onMouseDown:this.handleMouseDown},t("span",{key:"2ef4936f11b18f13719143b8e9c728a94eba9776",part:"control",class:"checkbox__control"},this.checked&&t("span",{part:"checked-icon",class:"checkbox__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},t("g",{stroke:"currentColor","stroke-width":"2"},t("g",{transform:"translate(3.428571, 3.428571)"},t("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),t("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&t("span",{part:"indeterminate-icon",class:"checkbox__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},t("g",{stroke:"currentColor","stroke-width":"2"},t("g",{transform:"translate(2.285714, 6.857143)"},t("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),t("input",{key:"d29de22f85a467a5b479c762e404193285ad50b5",ref:e=>this.nativeInput=e,id:this.inputId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"checkbox","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus})),t("span",{key:"39c4d70a0dc0e5e0bad96ddc9d192e7482eeb736",part:"text",id:this.textId,class:"checkbox__text"},t("slot",{key:"5c97a9611282ee621e4e8f5eadb5fd01891b73e2"}))))}get host(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};d.style=a;const x=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}:focus{outline:none}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-x-small) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--active:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item .menu-item__checkbox{margin-top:-1px}.menu-item--checked .menu-item__check{visibility:visible}";const b=x;const m=class{constructor(o){e(this,o);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}connectedCallback(){this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleMouseEnter=this.handleMouseEnter.bind(this);this.handleMouseLeave=this.handleMouseLeave.bind(this);this.handleCheckboxChange=this.handleCheckboxChange.bind(this)}async setFocus(e){var o;(o=this.menuItem)===null||o===void 0?void 0:o.focus(e)}async removeFocus(){var e;(e=this.menuItem)===null||e===void 0?void 0:e.blur()}getTextLabel(){return Promise.resolve(l(this.defaultSlot))}handleBlur(){this.hasFocus=false}handleFocus(){this.hasFocus=true}handleMouseEnter(){this.active=true}handleMouseLeave(){this.active=false;this.hasFocus=false}render(){return t("div",{key:"a91c841a6fac9e807f623cd337d9902a6ee98aaa",ref:e=>this.menuItem=e,part:"base",class:{"menu-item":true,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--focused":this.hasFocus,"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"&&t("span",{class:"menu-item__checkbox"},t("six-checkbox",{"onSix-checkbox-change":this.handleCheckboxChange,disabled:this.disabled,checked:this.checked})),t("span",{key:"5d4fa9c6c86e1506703cdbe0d295e753ba251302",part:"prefix",class:"menu-item__prefix"},t("slot",{key:"619b262517cddb822a90e7251ce720c8bee09bb9",name:"prefix"})),t("span",{key:"94c554dec6b00e361f84ab42f27c06c94908f9e7",part:"label",class:"menu-item__label"},t("slot",{key:"5e0dded9fd06cd4b1bf3cad28025f97da055326b",ref:e=>this.defaultSlot=e})),t("span",{key:"bd328a4e14592019cc68fc12ef66c9e2561f561f",part:"suffix",class:"menu-item__suffix"},t("slot",{key:"7a46bc384827392a4bc55e424d926de1f8d36766",name:"suffix"})),this.checkType==="check"&&t("span",{part:"checked-icon",class:"menu-item__check"},t("six-icon",{size:"small","aria-hidden":"true"},"check")))}get host(){return i(this)}};m.style=b;export{d as six_checkbox,m as six_menu_item};
+//# sourceMappingURL=p-50d589eb.entry.js.map

package/dist/ui-library/p-50d589eb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixCheckboxCss","SixCheckboxStyle0","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","eventListeners","EventListeners","handleChange","nativeInput","checked","indeterminate","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleMouseDown","event","preventDefault","_a","focus","handleCheckedChange","handleLabelChange","handleSlotChange","connectedCallback","host","shadowRoot","addEventListener","forward","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","setFocus","options","removeFocus","blur","hasLabelSlot","hasSlot","hasErrorSlot","render","h","FormControl","key","label","hasErrorTextSlot","errorText","errorTextCount","size","disabled","required","displayError","invalid","part","class","checkbox","htmlFor","onMouseDown","viewBox","stroke","fill","transform","d","ref","el","type","name","value","role","onChange","onBlur","onFocus","sixMenuItemCss","SixMenuItemStyle0","SixMenuItem","handleCheckboxChange","dispatchEvent","Event","bubbles","cancelable","bind","handleMouseEnter","handleMouseLeave","menuItem","getTextLabel","Promise","resolve","getTextContent","defaultSlot","active","tabIndex","undefined","onMouseEnter","onMouseLeave","checkType"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx","src/components/six-menu-item/six-menu-item.scss?tag=six-menu-item&encapsulation=shadow","src/components/six-menu-item/six-menu-item.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox--focused {\n  .checkbox__control {\n    outline: var(--six-focus-ring);\n    outline-offset: 0;\n  }\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","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 checkbox label.\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 control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = 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  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) return;\n\n    this.nativeInput.checked = this.checked;\n    this.checked = this.nativeInput.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n    this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n    this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\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 handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\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        errorTextId={this.errorTextId}\n        hasErrorTextSlot={this.hasErrorSlot}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n:focus {\n  outline: none;\n}\n\n.menu-item {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  text-align: left;\n  color: var(--six-input-color);\n  border-radius: var(--six-border-radius-medium);\n  padding: var(--six-spacing-x-small) var(--six-spacing-medium);\n  transition: var(--six-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &.menu-item--focused:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--active:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n    align-self: center;\n  }\n\n  .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:last-child) {\n      margin-right: 0.5em;\n    }\n  }\n\n  .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:first-child) {\n      margin-left: 0.5em;\n    }\n  }\n\n  .menu-item__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-left: var(--six-spacing-small);\n    visibility: hidden;\n    font-size: inherit;\n  }\n\n  .menu-item__checkbox {\n    margin-top: -1px;\n  }\n}\n\n.menu-item--checked .menu-item__check {\n  visibility: visible;\n}\n","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"],"mappings":"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"}