@six-group/ui-library 0.0.0-insider.b85326c → 0.0.0-insider.b9211de

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

@@ -9,7 +9,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuDivider {
     render() {
-        return h("div", { key: '186bd0295f652e28206b3e01a092c0cc67128874', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
+        return h("div", { key: 'e5cfe610c3578305a43cac1d94aabd9d4f3483f8', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
     }
     static get is() { return "six-menu-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,13 +68,13 @@ export class SixMenuItem {
         this.hasFocus = false;
     }
     render() {
-        return (h("div", { key: '1272ddcb536f11b8362d2d6050e7e022f2c57601', ref: (el) => (this.menuItem = el), part: "base", class: {
+        return (h("div", { key: '068b0e516f28354bf1e0e6171fd5a57c42e6805d', ref: (el) => (this.menuItem = el), part: "base", class: {
                 'menu-item': true,
                 'menu-item--checked': this.checked,
                 'menu-item--disabled': this.disabled,
                 'menu-item--focused': this.hasFocus,
                 'menu-item--active': this.active,
-            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { key: '433f8c7ea79197d6881f02d5daad580cdc45ad75', class: "menu-item__checkbox" }, h("six-checkbox", { key: 'a2bb3ef76de46374e058f814723ae2e601d9d12e', "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '7e068c6cca0e53ecac63a461945d13b3a157e9e6', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '4a8b59e044ec0d20fa96a4f2c8dabcc697e24641', name: "prefix" })), h("span", { key: '9d33d8597e12e94d6b4da75480bf034053124e34', part: "label", class: "menu-item__label" }, h("slot", { key: 'eb1f6a5ac3dd253c3844b7b2f1abd8eab5d8e2f7', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'dafb3d36a73291eb05e3bb53744204400f0cde66', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: 'b544b01d90f3a5ab49a99ca39b4abc622fed87c1', name: "suffix" })), this.checkType === 'check' && (h("span", { key: 'f7dc2836cbd13a851db43967f9e1f4334937f19e', part: "checked-icon", class: "menu-item__check" }, h("six-icon", { key: 'db186867ab833a1064f091d592f4c39675a9aeeb', size: "small", "aria-hidden": "true" }, "check")))));
+            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { key: '2a4a44cc50eab0f85553779829f194ce2940a8b4', class: "menu-item__checkbox" }, h("six-checkbox", { key: '60db41a831898917a66c5b36a66569ca511d4087', "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '11ef1aedb06a67538e1a8ffa7ced64f27f554725', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '698842d190731f589a9d031893c13bb8ee2dc8f4', name: "prefix" })), h("span", { key: '20fda9cdc6b3aef51b7231edda1d6fb48f03dbeb', part: "label", class: "menu-item__label" }, h("slot", { key: 'b564482ff277a47e5f50554755649a7d8e7ebe47', ref: (el) => (this.defaultSlot = el) })), h("span", { key: '437c77e718827d816786159675dec3439ac1c1e4', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '533be0933a9d597641bc1496c7375b9b36db98bb', name: "suffix" })), this.checkType === 'check' && (h("span", { key: '43b77ffd3510aa1603bc9278c31684c1ecfc711f', part: "checked-icon", class: "menu-item__check" }, h("six-icon", { key: 'a7569cb3d856bac8767c634cb5862c900ce69e45', size: "small", "aria-hidden": "true" }, "check")))));
     }
     static get is() { return "six-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuLabel {
     render() {
-        return (h("div", { key: 'ac09a02af0b1d088f83877d5065b9b747032be77', part: "base", class: "menu-label" }, h("slot", { key: 'a4f45f90b223d3951bdb5a36b8667d67bcbf1fc7' })));
+        return (h("div", { key: '8d796cb82a38cccc46f32ff8ce33d453e7bb7166', part: "base", class: "menu-label" }, h("slot", { key: '551f3905fa1d78d307912f1ba366b3718ae8facf' })));
     }
     static get is() { return "six-menu-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class SixPicto {
     render() {
         var _a;
         const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-        return (h(Host, { key: 'ed06500ac52374ead53dbb7012ee1b4b07d21b25' }, h("div", { key: '1f134c2254d4c3659e66b1a0c79556fb8131220d', part: "icon", class: {
+        return (h(Host, { key: 'bc4d73489e8e09be226f51682e282b1c4c5a2175' }, h("div", { key: 'ee1ff26b654c5ffd678f6928edd3bd44ab4acd15', part: "icon", class: {
                 [`is-size-${this.size}`]: typeof this.size != null || this.size.trim() !== '',
                 [`${iconName}`]: true,
             } })));

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

@@ -19,12 +19,12 @@ export class SixProgressBar {
         this.indeterminate = false;
     }
     render() {
-        return (h("div", { key: 'e11c3e9f83321a55170e04e84ab63c2e8b9f12a7', part: "base", class: {
+        return (h("div", { key: 'd89c7c456819839b638cadc372bf2ab071e73918', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: '9c8b4a3f5ada54163272cbd7e8cf9e7cb90dc39b', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: 'ce4d45162f0aeb2c5affd3a6aef552c2f4078a1b', part: "indicator", class: "progress-bar__indicator", style: {
                 width: `${this.percentage}%`,
-            } }, !this.indeterminate && (h("span", { key: '16be9dda6192ecf33efb192b23694cc006ceb4fd', part: "label", class: "progress-bar__label" }, h("slot", { key: '1e102597d1ec71a54fecb87f336aa711fddd8558' }))))));
+            } }, !this.indeterminate && (h("span", { key: '911269a53f42a7e94fc1be782f9e903e32650c75', part: "label", class: "progress-bar__label" }, h("slot", { key: '59daab81dd0812c99c32b304479b794d94c6e82e' }))))));
     }
     static get is() { return "six-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class SixProgressRing {
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: '6f48ef171c32eef14162bb15d53befc7bf30f923', part: "base", class: "progress-ring" }, h("svg", { key: 'b1479eec3a5dbabdb39716484c58396a09db1272', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: 'abb6fd5f35d514fe1580e02fd251774e107da5ce', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'ca3fb1650516df81c8757594a0ce0d62d82febd3', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: 'c9b746f63f7c8bb0b325397d0344f6d82b8e3c0d', part: "label", class: "progress-ring__label" }, h("slot", { key: '905b3a001f4d95c31e80e5d74ecd29d0ec59992a' }))));
+        return (h("div", { key: '4b619cac39642c43455886ab94067bfd1a96183c', part: "base", class: "progress-ring" }, h("svg", { key: 'eb438641c5bcc7de1ab356881b8480bc65115f62', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '63a5359a0f22e0c657a629f50ec9addefd409113', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'ccf1f8120f745cbc060f0a5fb9fed00ef52fa4db', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: '775c0d0707e480496807e2cadb47be1a551cc128', part: "label", class: "progress-ring__label" }, h("slot", { key: '6849d9832eb3845066bb7008a19604668d548ce8' }))));
     }
     static get is() { return "six-progress-ring"; }
     static get encapsulation() { return "shadow"; }

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

@@ -108,12 +108,12 @@ export class SixRadio {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: 'cdb722e8b78cf02f527d97b3dab6f0679b333c21', part: "base", class: {
+        return (h("label", { key: '879cb08317d04deeca8282c8b69e6eb20a9adf07', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '9c627a113fe27c340b7f6162d9bde328220c8960', part: "control", class: "radio__control" }, h("span", { key: '2ce65408f6c88cb7396c480eba0cc2dd663a3c85', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'f4aac67ee8b4a5fb2af26305799b6648e496941e', viewBox: "0 0 16 16" }, h("g", { key: 'f1bc8651eae70a2ede2dcbf5f48f8237d9f883e6', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '7ffa14023971330ae34e041871c0db912789999a', fill: "currentColor" }, h("circle", { key: '10d6f37d1227677ba8044a8bffd89f8828e54e0d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '55ae32be4a36646c17d1238e486df0a483db2650', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '08128b78c44c561e9dc97f840bacf46059c2483b', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '9dd8bcf11566bd74d7b8e91a71cd276947562426' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '6c2acde83c5a7d3ec9de36b6e73776f7c614b8f4', part: "control", class: "radio__control" }, h("span", { key: 'f741f110abf476e80c54d5ba7e55f9ce7babb68b', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '9635c588916db7dc635a4581e50416d16114ee58', viewBox: "0 0 16 16" }, h("g", { key: '5d33f15ab6063156808d054bd6f736303e8afecc', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '25aead7a47efab4b1b86aa50070ba656855bfdf0', fill: "currentColor" }, h("circle", { key: '33364d9740a62291991de71288535fe685593fa1', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '2ba91f62d15618ea3292902137649fdc579e05fa', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'e8d5db9e8b63c6f5c25ef1239291c175257edf90', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '1aed8a157b967b10acbfb960cd725b88fdf83cf3' }))));
     }
     static get is() { return "six-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,7 +200,7 @@ export class SixRange {
         }
     }
     render() {
-        return (h(FormControl, { key: '0f53d7ccd1af680cc40ec8de87960b243c33a3be', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'd51cc4d2afde55aed2941878912eb3f741c89cf1', part: "base", class: {
+        return (h(FormControl, { key: '9b01de18ce3b59ec8fe5c60edbf94ca2d7911d9d', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '66581ce24488802b0b81030aa916dfc6880e4498', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -208,7 +208,7 @@ export class SixRange {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: 'bfa94717d2ad6e8b5e7b513aa49697b1232e0502', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '4db780c67679a9e6d36ead8ae23e5ba6ead2a5ec', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '9e6a87ae4004e65bc9861064654bcc1a5babcd07', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '701b765cf0c2e3e3ed3a8ebcb3853a53f389ff3b', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     static get is() { return "six-range"; }
     static get encapsulation() { return "shadow"; }

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);
+}