@six-group/ui-library 0.0.0-insider.0052ba1

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-range.js","sourceRoot":"","sources":["../../../src/components/six-range/six-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  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"]}

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

@@ -0,0 +1,125 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.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);
+}

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

@@ -0,0 +1,432 @@
+import { h } from "@stencil/core";
+import FormControl from "../../functional-components/form-control/form-control";
+import { hasSlot } from "../../utils/slot";
+export class SixRating {
+    constructor() {
+        /** 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 }))));
+    }
+    static get is() { return "six-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-rating.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rating's name attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rating's value attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the rating."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "attribute": "error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "attribute": "error-text-count",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of stars. Default is 5"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the stars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If its readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helpText": {
+                "type": "string",
+                "attribute": "help-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rating's help text. Alternatively, you can use the help-text slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasLabelSlot": {},
+            "hasErrorSlot": {},
+            "hoveredValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixBlur",
+                "name": "six-rating-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "sixChange",
+                "name": "six-rating-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's checked state changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "sixFocus",
+                "name": "six-rating-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+SixRating.id = 0;
+//# sourceMappingURL=six-rating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-rating.js","sourceRoot":"","sources":["../../../src/components/six-rating/six-rating.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+  overflow: hidden;
+  height: inherit;
+}
+
+.six-root {
+  display: grid;
+  grid-template: auto 1fr auto/auto 1fr auto;
+  height: 100%;
+}
+.six-root__container--padded {
+  padding: var(--six-spacing-xxx-large);
+}
+.six-root__left-sidebar {
+  height: 100%;
+  overflow: scroll;
+  grid-column: 1/2;
+}
+.six-root__right-sidebar {
+  height: 100%;
+  overflow: scroll;
+  grid-column: 3/4;
+}
+.six-root nav {
+  overflow: hidden;
+}
+
+header {
+  grid-column: 1/4;
+  position: sticky;
+  top: 0;
+  z-index: var(--six-z-index-header);
+  margin-right: 2px;
+}
+
+main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  grid-column: 2/3;
+  overflow: auto;
+}
+
+footer {
+  grid-column: 1/4;
+}