npm - @six-group/ui-library - Versions diffs - 5.0.0-rc.1 → 5.0.0-rc.2 - Mend

@six-group/ui-library 5.0.0-rc.1 → 5.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/dist/components/six-range.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-range.js","mappings":"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","names":["SixRange","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 2px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\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 input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-range.js","mappings":"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","names":["SixRange","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 2px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\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 input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/components/six-rating.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SixRating extends Components.SixRating, HTMLElement {}
+export const SixRating: {
+    prototype: SixRating;
+    new (): SixRating;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-rating.js ADDED Viewed

@@ -0,0 +1,173 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
+import { F as FormControl } from './p-DIkvCBxr.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$3 } from './p-CWKq6Dyt.js';
+import { d as defineCustomElement$2 } from './p-BSHZAiyG.js';
+const sixRatingCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.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{--six-rating-color:var(--six-color-web-rock-500);--six-rating-color-active:var(--six-color-warning-700);--six-rating-color-disabled-opacity:0.4;display:block}.six-rating{display:inline-flex;flex-direction:row;user-select:none;cursor:pointer}.six-rating--readonly{cursor:unset}.six-rating--disabled{cursor:not-allowed;opacity:var(--six-rating-color-disabled-opacity)}.six-rating__star{color:var(--six-rating-color)}.six-rating__star--filled{color:var(--six-rating-color-active)}";
+const SixRating$1 = /*@__PURE__*/ proxyCustomElement(class SixRating extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixBlur = createEvent(this, "six-rating-blur");
+        this.sixChange = createEvent(this, "six-rating-change");
+        this.sixFocus = createEvent(this, "six-rating-focus");
+        /** The rating's name attribute. */
+        this.name = '';
+        /** The rating's value attribute. */
+        this.value = 0;
+        /** Set to true to disable the rating. */
+        this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Maximum number of stars. Default is 5 */
+        this.max = 5;
+        /** Size of the stars */
+        this.size = 'medium';
+        /** If its readonly */
+        this.readonly = false;
+        /** The rating's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        // --
+        this.hasFocus = false;
+        this.hasLabelSlot = false;
+        this.hasErrorSlot = false;
+        this.hoveredValue = this.value;
+        this.ratingId = `rating-${++SixRating.id}`;
+        this.labelId = `rating-label-${SixRating.id}`;
+        this.errorTextId = `input-error-text-${SixRating.id}`;
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = hasSlot(this.el, 'label');
+            this.hasErrorSlot = hasSlot(this.el, 'error-text');
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit(this.value);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                if (this.hoveredValue > 0) {
+                    this.hoveredValue = this.hoveredValue - 1;
+                    this.value = this.hoveredValue;
+                }
+            }
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                if (this.hoveredValue < this.max) {
+                    this.hoveredValue = this.hoveredValue + 1;
+                }
+            }
+        };
+    }
+    handleValueChange() {
+        this.sixChange.emit(this.value);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    renderStars() {
+        return Array.from({ length: this.max }, (_, i) => {
+            const handleEvent = (event) => {
+                if (this.readonly || this.disabled) {
+                    return;
+                }
+                switch (event.type) {
+                    case 'mouseover':
+                        this.hoveredValue = i + 1;
+                        break;
+                    case 'mouseout':
+                        this.hoveredValue = this.value;
+                        break;
+                    case 'click':
+                        this.value = this.hoveredValue;
+                        break;
+                }
+            };
+            return (h("six-icon", { class: {
+                    'six-rating__star': true,
+                    'six-rating__star--filled': i < this.hoveredValue,
+                }, filled: true, size: this.size, onMouseOver: handleEvent, onMouseOut: handleEvent, onClick: handleEvent }, "star_rate"));
+        });
+    }
+    render() {
+        return (h(FormControl, { key: 'ca3de959a1ffb915f0102ca6baa4a43c799d67ec', inputId: this.ratingId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, helpText: this.helpText, hasErrorTextSlot: this.hasErrorSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'ef452485f9c3615f4caeaefce7f7034d7f64119f', part: "base", class: {
+                'six-rating': true,
+                'six-rating--readonly': this.readonly,
+                'six-rating--disabled': this.disabled,
+            }, role: "slider", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabindex: this.disabled ? '-1' : '0', onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, this.renderStars(), h("input", { key: '187ec03d83c3b29fc5917a9abab324d40930b8f4', part: "input", id: this.ratingId, type: "hidden", max: this.max, min: 0, name: this.name, value: this.value, disabled: this.disabled, required: this.required, role: "slider", "aria-labelledby": this.labelId }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return sixRatingCss; }
+}, [1, "six-rating", {
+        "name": [1],
+        "value": [1026],
+        "disabled": [4],
+        "required": [4],
+        "label": [1],
+        "errorText": [1, "error-text"],
+        "errorTextCount": [2, "error-text-count"],
+        "invalid": [516],
+        "max": [2],
+        "size": [513],
+        "readonly": [4],
+        "helpText": [1, "help-text"],
+        "hasFocus": [32],
+        "hasLabelSlot": [32],
+        "hasErrorSlot": [32],
+        "hoveredValue": [32]
+    }, undefined, {
+        "value": ["handleValueChange"]
+    }]);
+SixRating$1.id = 0;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-rating", "six-error", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-rating":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixRating$1);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const SixRating = SixRating$1;
+const defineCustomElement = defineCustomElement$1;
+export { SixRating, defineCustomElement };
+//# sourceMappingURL=six-rating.js.map
+//# sourceMappingURL=six-rating.js.map

package/dist/components/six-rating.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"six-rating.js","mappings":"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","names":["SixRating","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-rating/six-rating.scss?tag=six-rating&encapsulation=shadow","src/components/six-rating/six-rating.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --six-rating-color: var(--six-color-web-rock-500);\n --six-rating-color-active: var(--six-color-warning-700);\n --six-rating-color-disabled-opacity: 0.4;\n\n display: block;\n}\n\n.six-rating {\n display: inline-flex;\n flex-direction: row;\n user-select: none;\n cursor: pointer;\n\n &--readonly {\n cursor: unset;\n }\n\n &--disabled {\n cursor: not-allowed;\n opacity: var(--six-rating-color-disabled-opacity);\n }\n\n &__star {\n color: var(--six-rating-color);\n\n &--filled {\n color: var(--six-rating-color-active);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n@Component({\n tag: 'six-rating',\n styleUrl: 'six-rating.scss',\n shadow: true,\n})\nexport class SixRating {\n @Element() el!: HTMLSixRatingElement;\n\n /** The rating's name attribute. */\n @Prop() name = '';\n\n /** The rating's value attribute. */\n @Prop({ mutable: true }) value: number = 0;\n\n /** Set to true to disable the rating. */\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: string = '';\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 /** Maximum number of stars. Default is 5 */\n @Prop() max: number = 5;\n\n /** Size of the stars */\n @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n /** If its readonly */\n @Prop() readonly: boolean = false;\n\n /** The rating's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-rating-blur' }) sixBlur!: EventEmitter<number>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-rating-change' }) sixChange!: EventEmitter<number>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-rating-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n // --\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n @State() hoveredValue = this.value;\n\n private static id: number = 0;\n\n private ratingId = `rating-${++SixRating.id}`;\n private labelId = `rating-label-${SixRating.id}`;\n private errorTextId = `input-error-text-${SixRating.id}`;\n\n @Watch('value')\n handleValueChange() {\n this.sixChange.emit(this.value);\n }\n\n connectedCallback() {\n this.el.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n this.el.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.el, 'label');\n this.hasErrorSlot = hasSlot(this.el, 'error-text');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.value);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n if (this.hoveredValue > 0) {\n this.hoveredValue = this.hoveredValue - 1;\n this.value = this.hoveredValue;\n }\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n if (this.hoveredValue < this.max) {\n this.hoveredValue = this.hoveredValue + 1;\n }\n }\n };\n\n private renderStars() {\n return Array.from({ length: this.max }, (_, i) => {\n const handleEvent = (event: Event) => {\n if (this.readonly || this.disabled) {\n return;\n }\n switch (event.type) {\n case 'mouseover':\n this.hoveredValue = i + 1;\n break;\n case 'mouseout':\n this.hoveredValue = this.value;\n break;\n case 'click':\n this.value = this.hoveredValue;\n break;\n }\n };\n\n return (\n <six-icon\n class={{\n 'six-rating__star': true,\n 'six-rating__star--filled': i < this.hoveredValue,\n }}\n filled\n size={this.size}\n onMouseOver={handleEvent}\n onMouseOut={handleEvent}\n onClick={handleEvent}\n >\n star_rate\n </six-icon>\n );\n });\n }\n\n render() {\n return (\n <FormControl\n inputId={this.ratingId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n helpText={this.helpText}\n hasErrorTextSlot={this.hasErrorSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n 'six-rating': true,\n 'six-rating--readonly': this.readonly,\n 'six-rating--disabled': this.disabled,\n }}\n role=\"slider\"\n aria-label={this.label}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabindex={this.disabled ? '-1' : '0'}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n >\n {this.renderStars()}\n\n <input\n part=\"input\"\n id={this.ratingId}\n type=\"hidden\"\n max={this.max}\n min={0}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n role=\"slider\"\n aria-labelledby={this.labelId}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/components/six-root.js CHANGED Viewed

@@ -18,7 +18,7 @@ const SixRoot$1 = /*@__PURE__*/ proxyCustomElement(class SixRoot extends H {
         this.version = '';
     }
     render() {
-        return (h("host", { key: '005ad5514d4137e97a862fd2a09151013e6250d0', class: "six-root" }, h("header", { key: '4cde9e57f125b9ea179608c36b311d33449ab9d3', part: "header" }, this.stage && h("six-stage-indicator", { key: '9c8d9ce4ae9d7652249fd3e2bbb39431830e6813', stage: this.stage }, this.version), h("slot", { key: 'dd414f2b13ec59e96ebe1e1df8f2fb71de113a60', name: "header" })), h("nav", { key: 'b9abf9d3eae12e6c492b64aada73bd7101a4edb1', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'd664769001501f55dd65a0c772fa6df6742ffe4c', name: "left-sidebar" })), h("main", { key: '4fb77beeed3e16ccb53a6d486d1307893d16aac3', part: "main" }, h("div", { key: '587d43eedf0a41c790b184c54f41941ea12fdd37', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '66473b0c3e44effb55ce262b27f2980b668b4335', name: "main" })), h("div", { key: 'b4dcc58d0fe42bcee91f2d0586e07f026b70bf5f', class: "six-root__footer" }, h("slot", { key: 'bf3efc6011d2cfbdd121973d77b7eba58c12c440', name: "footer" }))), h("nav", { key: '88683d098fd1c75bf35b9ecb9aaf2d2e1b8f6715', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '3e38e0f3d3c0c66075c27f305d0460f52bbf725c', name: "right-sidebar" }))));
+        return (h("host", { key: '574331a30ddbdff3fb37129ec8e46c873bc1832e', class: "six-root" }, h("header", { key: 'f70f24b925ba9a88156d46a6481f6ab3f415bdad', part: "header" }, this.stage && h("six-stage-indicator", { key: '4fe5f33c59e77fcd1cae71afa5ccdd227fbd3d74', stage: this.stage }, this.version), h("slot", { key: '92fcdbb991e5593d0f5e602a3dc72b3bc95ce415', name: "header" })), h("nav", { key: 'd26e8e840ae344dcda1e81879e50f45981ad0035', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'da2e4b7ea1338e68970364d279753b7dd9ce4716', name: "left-sidebar" })), h("main", { key: '13c283e1e1150c3a6f0cc76feed50889023c8bfc', part: "main" }, h("div", { key: '0fd0a46e4d68dc7af4f4444de6cbd0cb68e3098a', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5591878851514068d3ce5751af12fa86aa6449ca', name: "main" })), h("div", { key: 'fe14e87f84217215d03545b5094f462981124093', class: "six-root__footer" }, h("slot", { key: '44cd8020e7ba2ee5a4bfb50a8e9f46cac4c6010f', name: "footer" }))), h("nav", { key: 'a26ca2c92e7e0ef955bea7796270a5d64e9c1aec', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '8d72471d1f4e06722eed5042dd8e4a5f9141b403', name: "right-sidebar" }))));
     }
     get host() { return this; }
     static get style() { return sixRootCss; }

package/dist/components/six-sidebar-item.js CHANGED Viewed

@@ -19,11 +19,11 @@ const SixSidebarItem$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebarItem e
     }
     render() {
         const Tag = this.href != null ? 'a' : 'div';
-        return (h(Tag, { key: 'd36654ad6af78000c79191da18b9af02d582dde1', class: {
+        return (h(Tag, { key: '968d681e125a0c399973cfa9d37ac5f9c269042f', class: {
                 'sidebar-item': true,
                 'sidebar-item--selected': this.selected,
                 'sidebar-item--disabled': this.disabled,
-            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && h("six-icon", { key: '8664269ee064fa6abd7529ddf92bfcd62e1fe83d', class: "six-sidebar-item__icon" }, this.icon), h("slot", { key: '528d1bd9d6b2e329292a90b7f21412f441dce27b' })));
+            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && h("six-icon", { key: 'cd6ecec3465b0aeb625d3f0d0e7f8f6a8e76a25f', class: "six-sidebar-item__icon" }, this.icon), h("slot", { key: 'a54998cb6bc27463ab2f9402736008a8767b8358' })));
     }
     static get style() { return sixSidebarItemCss; }
 }, [1, "six-sidebar-item", {

package/dist/components/six-sidebar.js CHANGED Viewed

@@ -181,7 +181,7 @@ const SixSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebar extends H
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (h("host", { key: '38d2d55b73e862c71ef3912fac01f6abd43a3b7c', class: "six-sidebar" }, h("div", { key: 'b8a7a32d48016310f943b42d03f1c4a44ff5bca4', class: {
+        return (h("host", { key: '11810533a79d5685e6ab768f0fbc8d9594d44de4', class: "six-sidebar" }, h("div", { key: '6908b34bd6df174046145e9c4813278703e0d7cf', class: {
                 sidebar__container: true,
                 'sidebar--visible': this.isVisible,
                 'sidebar--open': this.open,
@@ -190,7 +190,7 @@ const SixSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebar extends H
             }, style: {
                 width: this.width,
                 [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
-            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: 'a13e1cd44a68fa3ad15a94ccc56ec7c09f689e4c' }))));
+            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '31557fda47113669da4d999a54f0074b37daffc8' }))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"]

package/dist/components/six-switch.js CHANGED Viewed

@@ -108,12 +108,12 @@ const SixSwitch$1 = /*@__PURE__*/ proxyCustomElement(class SixSwitch extends H {
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(FormControl, { key: 'a358f086b57322b8e3225f4775b09506e766c968', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '7b87b1d45026bb79c0c1ce5c0cf2e969ee0d0ca7', part: "base", htmlFor: this.switchId, class: {
+        return (h(FormControl, { key: 'fd6c9c888316e46623e92b779c2215888783413b', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: 'd7d5f569d8aea4f7203f7c0973cf212bd6bcfc60', part: "base", htmlFor: this.switchId, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled,
                 'switch--focused': this.hasFocus,
-            }, onMouseDown: this.handleMouseDown }, h("span", { key: '35bd92fabfb1b177a048789e9f0f9d68499b7bd0', part: "control", class: "switch__control" }, h("span", { key: '0c85de3b5d75b3d083554931a5648be5ba26f7fc', part: "thumb", class: "switch__thumb" }), h("input", { key: '5c807156b356962f347820301050cd096ba67330', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: '923235545aec3ccb5c04aec3316fd8e5a2d027e2', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: '53e2689b7efaac1a93954d02eb7d6b1cdadc8c73' })))));
+            }, onMouseDown: this.handleMouseDown }, h("span", { key: '4043bb4abed6a44a360b5409b0e4ebd5929a719f', part: "control", class: "switch__control" }, h("span", { key: 'd93e868866ea81ae2c2832ddc6fdcb11c0b23679', part: "thumb", class: "switch__thumb" }), h("input", { key: '7e5cff86449295f36e85b221f8795f3df18808ae', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: 'c0823f84eb3a30c2e0fdfe5acb6f1390e2b389aa', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: 'aeb69e52fd37efab7ee8061d3c69bfab1c174933' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-switch.js","mappings":"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","names":["SixSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/*\n @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n /\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) 2);\n\n display: inline-block;\n}\n\n.switch {\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.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition:\n var(--six-transition-fast) transform ease,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\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 { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The switch's 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 switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = 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 componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\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=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-switch.js","mappings":"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","names":["SixSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/*\n @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n /\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) 2);\n\n display: inline-block;\n}\n\n.switch {\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.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition:\n var(--six-transition-fast) transform ease,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\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 { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The switch's 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 switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = 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 componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\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=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/components/six-tab-panel.js CHANGED Viewed

@@ -17,7 +17,7 @@ const SixTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class SixTabPanel extends
     render() {
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { key: '2a0ab4d655a8de97585c947099381c1fab61e858', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: '7ee7661cd01b4390bea7981c4f3fad3e8bb0e6c0', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '21c8561d0a126ef557c1fa9660209f10b6cd7936' }))));
+        h(Host, { key: 'b4c54fb42d68a3462abbd78dda16b1738e81dc57', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: '734645855fb3a875a6a43e46383122ddad15bbb3', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '1a789d112f5a048ac36f9a7e70208c99fb66c6c9' }))));
     }
     get host() { return this; }
     static get style() { return sixTabPanelCss; }

package/dist/components/six-tab.js CHANGED Viewed

@@ -43,7 +43,7 @@ const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends H {
         const placement = (_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.placement) !== null && _a !== void 0 ? _a : 'top';
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { key: '6b59af3a0794c9ea26b362fa1ea1c0d7513babea', id: this.host.id || this.componentId }, h("div", { key: '145b15cdb916d93ecb67a966fd558e37500db17c', part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: '40b4042f28816b55ef585cf24570b64a44031863', id: this.host.id || this.componentId }, h("div", { key: 'e4e8ba43cf2e1384a421835fe1131ea411ac7a18', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -54,7 +54,7 @@ const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends H {
                 'tab--active': this.active,
                 'tab--closable': this.closable,
                 'tab--disabled': this.disabled,
-            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: this.host.innerHTML }, h("slot", { key: '2a63428f882a98381746e578c98421cf7d065a16' }), this.closable && (h("six-icon-button", { key: 'dc0dbb47462d86dfae7b6806b667d6af69094f31', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '62bb67bb6a95d732e0961f349ada6f7d78a2e3a1', part: this.active ? 'active-tab-indicator' : '', class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: this.host.innerHTML }, h("slot", { key: '39b1a75c51726543e0371e2607c6aa9197483b34' }), this.closable && (h("six-icon-button", { key: 'b9b2468f19b875ea58292f9ed330b49cff084d7c', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'da5cf7175879826bfb96f52cd8aca427372e32e6', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements

package/dist/components/six-tag.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { a as getTextContent } from './p-j3oIB5oT.js';
 import { a as debounce } from './p-CKhg9ibv.js';
 import { d as defineCustomElement$4 } from './p-BSHZAiyG.js';
 import { d as defineCustomElement$3 } from './p-Cosz73fX.js';
-import { d as defineCustomElement$2 } from './p-Cs6mMfx-.js';
+import { d as defineCustomElement$2 } from './p-ClylOmYH.js';
 const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;overflow:hidden}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__content{text-overflow:ellipsis;overflow:hidden}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
@@ -46,7 +46,7 @@ const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends H {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h("span", { key: '6d436b39d9a220ad7e764afb2a61db3c15052bd8', part: "base", class: {
+        return (h("span", { key: 'e8a2448511ebcfa91f9714c1e575679fca929310', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -63,7 +63,7 @@ const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends H {
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, h("six-tooltip", { key: '12faec51f7e0ac427c47037b815564ff6509fa5b', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '38d9b9a805f423491334d8c91463ec7f5c4a5460', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '1dce2aee10cb11b41ea4ff2a3691a7ed6050e3b9', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: 'd31750ec14c421b44ddc7a2f62db6dfd4ac19dd1', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, h("six-tooltip", { key: 'a8bffabc14f61bff5f499cd9324cb17497a6082b', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '28a60248833682018fa9f11be5d02372893645e5', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: 'd47d95687a69a4822575ac3219872a51f445441d', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: '477d12d125ff90d1cc0adb2bb62bf11bc6510927', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
     static get style() { return sixTagCss; }
 }, [1, "six-tag", {

package/dist/components/six-textarea.js CHANGED Viewed

@@ -174,7 +174,7 @@ const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: 'e535cb9819c9f78361b451b106349d44aa13bc25', 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.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '5cf703bd10753ce53474c724839745a24769f843', part: "base", class: {
+        return (h(FormControl, { key: '82dacccbeabf732b3d49738f0b5b9d725938014d', 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.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '88ddaeed09431fd06608350652de1280e729d44d', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -189,7 +189,7 @@ const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, h("textarea", { key: '1a1fc11b8ae91f3c404670a05ea0cc9e0598fa80', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+            } }, h("textarea", { key: '59838f0a6a739c7f6ed950f7ec73c228571e201a', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
     }
     get host() { return this; }
     static get watchers() { return {