@limetech/lime-elements 40.14.3 → 40.14.5

package/dist/collection/components/chip-set/chip-set.css

@@ -1662,12 +1662,12 @@
   padding-right: 2rem;
 }
 
-.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
+.mdc-text-field:not(.mdc-text-field--disabled):not(.lime-text-field--readonly) .mdc-text-field__input {
   color: rgba(var(--contrast-1400), 1);
   font-size: var(--limel-theme-default-font-size) !important;
   font-family: inherit !important;
 }
-.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input {
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input, .mdc-text-field.lime-text-field--readonly .mdc-text-field__input {
   color: rgba(var(--contrast-1400), 0.5);
 }
 

package/dist/collection/components/chip-set/chip-set.js

@@ -309,6 +309,28 @@ export class ChipSet {
     getDescribedBy() {
         return this.helperText ? this.helperTextId : undefined;
     }
+    handleReadonlyChange(isReadonly) {
+        if (isReadonly) {
+            this.endEditing();
+            return;
+        }
+        const input = this.host.shadowRoot.querySelector('input');
+        if (this.disabled ||
+            !input ||
+            this.host.shadowRoot.activeElement !== input) {
+            return;
+        }
+        this.editMode = true;
+        this.startEdit.emit();
+    }
+    endEditing() {
+        if (!this.editMode) {
+            return;
+        }
+        this.editMode = false;
+        this.inputChipIndexSelected = null;
+        this.stopEdit.emit();
+    }
     handleChangeChips(newValue, oldValue) {
         if (isEqual(newValue, oldValue)) {
             return;
@@ -321,13 +343,13 @@ export class ChipSet {
     renderInputChips() {
         return [
             this.value.map(this.renderInputChip),
-            h("input", { tabIndex: this.disabled || this.readonly ? -1 : 0, type: this.inputType, id: this.labelId, "aria-describedby": this.getDescribedBy(), "aria-invalid": this.isOutlineInvalid() ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, disabled: this.readonly || this.disabled, class: {
+            h("input", { tabIndex: this.disabled ? -1 : 0, type: this.inputType, id: this.labelId, "aria-describedby": this.getDescribedBy(), "aria-invalid": this.isOutlineInvalid() ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, disabled: this.disabled, class: {
                     'mdc-text-field__input': true,
                     hidden: this.inputHidden(),
                 }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput,
                 // Some browsers emit a change event on input elements, we need to stop
                 // that event from propagating since we are emitting our own change event
-                onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.isFull(), autocomplete: this.autocomplete }),
+                onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.readonly || this.isFull(), autocomplete: this.autocomplete }),
             this.renderLeadingIcon(),
             this.renderClearAllChipsButton(),
         ];
@@ -378,6 +400,9 @@ export class ChipSet {
      * additional space when the user it not typing anything
      */
     handleInputBlur() {
+        if (this.readonly) {
+            return;
+        }
         if (this.emptyInputOnBlur) {
             this.syncEmptyInput();
         }
@@ -1079,6 +1104,9 @@ export class ChipSet {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "readonly",
+                "methodName": "handleReadonlyChange"
+            }, {
                 "propName": "value",
                 "methodName": "handleChangeChips"
             }];

package/dist/collection/components/input-field/input-field.css

@@ -1709,32 +1709,32 @@
   /*rtl:end:ignore*/
 }
 
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-text-field__input {
+.mdc-text-field.lime-text-field--readonly .mdc-text-field__input {
   background-color: transparent;
   color: rgba(var(--contrast-1400), 1);
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-leading-icon .lime-looks-like-input-value, .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.has-leading-icon .lime-looks-like-input-value {
+.mdc-text-field.lime-text-field--readonly.mdc-text-field--with-leading-icon .lime-looks-like-input-value, .mdc-text-field.lime-text-field--readonly.has-leading-icon .lime-looks-like-input-value {
   padding-left: 1rem;
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .lime-looks-like-input-value {
+.mdc-text-field.lime-text-field--readonly .lime-looks-like-input-value {
   color: rgba(var(--contrast-1400), 1);
   opacity: 1;
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-floating-label {
+.mdc-text-field.lime-text-field--readonly .mdc-floating-label {
   color: rgba(var(--contrast-1200), 1);
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-notched-outline__leading,
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-notched-outline__notch,
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-notched-outline__trailing {
+.mdc-text-field.lime-text-field--readonly .mdc-notched-outline__leading,
+.mdc-text-field.lime-text-field--readonly .mdc-notched-outline__notch,
+.mdc-text-field.lime-text-field--readonly .mdc-notched-outline__trailing {
   border-color: transparent;
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
+.mdc-text-field.lime-text-field--readonly.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
   color: var(--limel-theme-error-text-color);
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon input.mdc-text-field__input {
+.mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon input.mdc-text-field__input {
   pointer-events: none;
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing, .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link {
+.mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing, .mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link {
   width: calc(100% - 1rem);
   position: absolute;
   left: 0;
@@ -1745,14 +1745,14 @@
   color: rgba(var(--contrast-1200), 1);
   border-radius: 0.25rem;
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
+.mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, .mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
   width: 1.5rem;
   margin-right: 0.25rem;
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:hover, .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:hover {
+.mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:hover, .mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:active, .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:active {
+.mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:active, .mdc-text-field.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:active {
   box-shadow: var(--button-shadow-pressed);
 }
 
@@ -1778,15 +1778,15 @@
 .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:focus-visible, .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:focus-visible {
   box-shadow: 0 0 0 0.125rem var(--lime-primary-color, var(--limel-theme-primary-color)) !important;
 }
-.mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):hover .mdc-text-field__icon--trailing, .mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):hover a.lime-trailing-icon-for-link {
+.mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):not(.lime-text-field--readonly):hover .mdc-text-field__icon--trailing, .mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):not(.lime-text-field--readonly):hover a.lime-trailing-icon-for-link {
   box-shadow: var(--button-shadow-normal);
   background-color: rgba(var(--contrast-100), 0.4);
 }
-.mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):hover .mdc-text-field__icon--trailing:hover, .mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):hover a.lime-trailing-icon-for-link:hover {
+.mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):not(.lime-text-field--readonly):hover .mdc-text-field__icon--trailing:hover, .mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):not(.lime-text-field--readonly):hover a.lime-trailing-icon-for-link:hover {
   background-color: rgb(var(--contrast-100));
   box-shadow: var(--button-shadow-hovered);
 }
-.mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):hover .mdc-text-field__icon--trailing:active, .mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):hover a.lime-trailing-icon-for-link:active {
+.mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):not(.lime-text-field--readonly):hover .mdc-text-field__icon--trailing:active, .mdc-text-field--with-trailing-icon:not(.mdc-text-field--disabled):not(.lime-text-field--readonly):hover a.lime-trailing-icon-for-link:active {
   box-shadow: var(--button-shadow-pressed);
 }
 .mdc-text-field--with-trailing-icon.mdc-text-field--invalid i.mdc-text-field__icon.invalid-icon limel-icon {
@@ -1826,12 +1826,13 @@ limel-notched-outline[has-value] .mdc-text-field__affix, limel-notched-outline:f
 .mdc-text-field {
   width: 100%;
 }
-.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix,
-.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
+.mdc-text-field:not(.mdc-text-field--disabled):not(.lime-text-field--readonly) .mdc-text-field__affix,
+.mdc-text-field:not(.mdc-text-field--disabled):not(.lime-text-field--readonly) .mdc-text-field__icon {
   color: rgb(var(--contrast-900));
 }
 .mdc-text-field.mdc-text-field--disabled .mdc-text-field__affix,
-.mdc-text-field.mdc-text-field--disabled .mdc-text-field__icon {
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__icon, .mdc-text-field.lime-text-field--readonly .mdc-text-field__affix,
+.mdc-text-field.lime-text-field--readonly .mdc-text-field__icon {
   color: rgb(var(--contrast-700));
 }
 
@@ -1841,7 +1842,7 @@ limel-notched-outline[has-value] .mdc-text-field__affix, limel-notched-outline:f
   z-index: 1;
   pointer-events: none;
 }
-.mdc-text-field:not(.mdc-text-field--focused):not(.mdc-text-field--invalid) .lime-formatted-input {
+.mdc-text-field:not(.mdc-text-field--focused):not(.mdc-text-field--invalid) .lime-formatted-input, .mdc-text-field.lime-text-field--readonly .lime-formatted-input {
   display: block;
 }
 .lime-formatted-input + .mdc-text-field__input {
@@ -1852,8 +1853,11 @@ limel-notched-outline[has-value] .mdc-text-field__affix, limel-notched-outline:f
   color: transparent;
   -webkit-text-fill-color: transparent;
 }
-.mdc-text-field:not(.mdc-text-field--focused):not(.mdc-text-field--invalid).lime-text-field--readonly .mdc-text-field__input[type=number] {
-  visibility: hidden;
+
+.mdc-text-field.lime-text-field--readonly .mdc-text-field__input[type=number] {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  user-select: none;
 }
 
 .autocomplete-list-container {
@@ -1878,10 +1882,10 @@ limel-notched-outline[has-value] .mdc-text-field__affix, limel-notched-outline:f
   font-size: var(--limel-theme-default-font-size) !important;
   font-family: inherit !important;
 }
-.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
+.mdc-text-field:not(.mdc-text-field--disabled):not(.lime-text-field--readonly) .mdc-text-field__input {
   color: rgba(var(--contrast-1400), 1);
 }
-.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input {
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input, .mdc-text-field.lime-text-field--readonly .mdc-text-field__input {
   color: rgba(var(--contrast-1400), 0.5);
 }
 

package/dist/collection/components/input-field/input-field.js

@@ -124,7 +124,7 @@ export class InputField {
                 'mdc-text-field': true,
                 'mdc-text-field--outlined': true,
                 'mdc-text-field--invalid': this.isInvalid(),
-                'mdc-text-field--disabled': this.disabled || this.readonly,
+                'mdc-text-field--disabled': this.disabled,
                 'lime-text-field--readonly': this.readonly,
                 'mdc-text-field--required': this.required,
                 'lime-text-field--empty': this.isEmpty(),
@@ -365,7 +365,7 @@ export class InputField {
                     return;
                 }
             }
-            return (h("span", { class: "lime-formatted-input lime-looks-like-input-value" }, renderValue));
+            return (h("span", { class: "lime-formatted-input lime-looks-like-input-value", "aria-hidden": this.readonly ? 'true' : undefined }, renderValue));
         };
         /**
          * Key handler for the input field
@@ -419,7 +419,9 @@ export class InputField {
             this.changeEmitter.flush();
         };
         this.renderAutocompleteList = () => {
-            if (this.type === 'textarea' || this.completions.length === 0) {
+            if (this.readonly ||
+                this.type === 'textarea' ||
+                this.completions.length === 0) {
                 return;
             }
             const dropdownZIndex = getComputedStyle(this.limelInputField).getPropertyValue('--dropdown-z-index');
@@ -524,7 +526,7 @@ export class InputField {
             // flagged it either.
             this.mdcTextField.valid = true;
         }
-        this.mdcTextField.disabled = this.disabled || this.readonly;
+        this.mdcTextField.disabled = this.disabled;
     }
     /**
      * Returns the start position of the current text selection.
@@ -589,7 +591,7 @@ export class InputField {
         properties.onBlur = this.onBlur;
         properties.required = this.required;
         properties.readonly = this.readonly;
-        properties.disabled = this.disabled || this.readonly;
+        properties.disabled = this.disabled;
         if (this.hasHelperText()) {
             properties['aria-describedby'] = this.helperTextId;
         }
@@ -599,7 +601,7 @@ export class InputField {
         if (this.renderAutocompleteList()) {
             properties['aria-controls'] = this.portalId;
         }
-        return (h(Host, { key: 'ed9c0ff9c44e672a33ff2c17cc6adf4ae8f518cd' }, h("limel-notched-outline", { key: 'ae6dc84f39a46175309ef4fe834f3e91910f6b99', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: 'c0ddb03c7c0c64b0002f2ed44db932fe77513ca8', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (h(Host, { key: '0f3e3dadc4345adb1abbbca32cd13a041172767b' }, h("limel-notched-outline", { key: '1f833a0fcb202529209ce58ce1c6ab313ab5e0e6', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '1f866999f40bd57e11dc80cb2c04935dcfe0f31b', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {

package/dist/collection/components/notched-outline/notched-outline.css

@@ -236,9 +236,11 @@ limel-notched-outline[invalid]:not([invalid=false]) .limel-notched-outline--notc
   color: var(--limel-theme-error-text-color);
 }
 limel-notched-outline[readonly]:not([readonly=false]) {
-  --limel-notched-outline-border-color: transparent !important;
   --limel-notched-outline-background-color: transparent !important;
 }
+limel-notched-outline[readonly]:not([readonly=false]):not(:has([slot=content]:is(:focus-visible, :focus-within))) {
+  --limel-notched-outline-border-color: transparent !important;
+}
 limel-notched-outline[readonly]:not([readonly=false]) .limel-notched-outline--notch label {
   transition-duration: 0s;
 }

package/dist/collection/components/picker/picker.js

@@ -181,7 +181,7 @@ export class Picker {
         this.updateTabIndex();
     }
     updateTabIndex() {
-        if (this.disabled || this.readonly) {
+        if (this.disabled) {
             this.host.setAttribute('tabindex', '-1');
             return;
         }
@@ -199,7 +199,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '52839878b5dfc5477a0fdc848ad3f7ea7a48019b', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: '48b339e4313ecdd3541e4256d96b54cebb04b0d8', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }
@@ -254,7 +254,7 @@ export class Picker {
         return Object.assign(Object.assign({}, action), { actions: [] });
     }
     shouldShowDropDownContent() {
-        if (this.isFull()) {
+        if (this.readonly || this.isFull()) {
             return false;
         }
         return !!this.chipSetEditMode;

package/dist/collection/components/select/select.css

@@ -1674,7 +1674,7 @@ div.limel-select__field--open limel-helper-line {
   display: none;
 }
 
-limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline--outlines {
+limel-notched-outline:not([invalid]:not([invalid=false])):not(:has([slot=content]:focus-visible)) .limel-notched-outline--outlines {
   --limel-notched-outline-border-color: transparent;
 }
 
@@ -1751,6 +1751,9 @@ limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline
   align-items: center;
   border-radius: 0.375rem;
 }
+.limel-select .limel-select-trigger:focus, .limel-select .limel-select-trigger:focus-visible {
+  outline: none;
+}
 .limel-select .limel-select-trigger,
 .limel-select .limel-select__selected-option {
   width: 100%;
@@ -1800,13 +1803,6 @@ limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline
   --limel-clickable-transition-speed: 0.2s;
   --limel-clickable-transform-speed: 0.16s;
 }
-.limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus {
-  outline: none;
-}
-.limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
-}
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused {
   background-color: rgba(var(--contrast-100), 0.8);
 }

package/dist/collection/components/select/select.js

@@ -57,10 +57,10 @@ export class Select {
          */
         this.disabled = false;
         /**
-         * Set to `true` to make the field read-only.
-         * This visualizes the component slightly differently.
-         * But shows no visual sign indicating that the component is disabled
-         * or can ever become interactable.
+         * Set to `true` to make the select read-only.
+         * Use `readonly` when the select is only there to present the data it holds,
+         * and will not become possible for the current user to edit.
+         * It is then drawn without any sign that it could be interacted with.
          */
         this.readonly = false;
         /**
@@ -81,6 +81,9 @@ export class Select {
         this.checkValid = false;
         this.typeaheadBuffer = new TypeaheadBuffer();
         this.handleMenuTriggerKeyDown = (event) => {
+            if (this.readonly) {
+                return;
+            }
             // Typeahead runs first, so that a space extends an ongoing typeahead
             // instead of just opening the dropdown. A *bare* space is declined by
             // `handleTypeaheadKey`, and keeps its usual meaning below.
@@ -180,7 +183,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '52540b6851ec8a02c81dff7e7b896208f8b11c84', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '768d4f7e5dae3eb741ab6e01eeda2379c76c62df', id: this.portalId, disabled: this.disabled, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {
@@ -552,7 +555,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `true` to make the field read-only.\nThis visualizes the component slightly differently.\nBut shows no visual sign indicating that the component is disabled\nor can ever become interactable."
+                    "text": "Set to `true` to make the select read-only.\nUse `readonly` when the select is only there to present the data it holds,\nand will not become possible for the current user to edit.\nIt is then drawn without any sign that it could be interacted with."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/select/select.template.js

@@ -24,7 +24,7 @@ export const SelectTemplate = (props) => {
     const classList = {
         'limel-select': true,
         'mdc-select': true,
-        'mdc-select--disabled': props.disabled,
+        'mdc-select--disabled': props.disabled || props.readonly,
         'limel-select--readonly': props.readonly,
         'limel-select--invalid': !isValid,
         'limel-select--with-helper-text': typeof props.helperText === 'string',
@@ -62,9 +62,9 @@ const SelectValue = (props) => {
         'limel-select-trigger': true,
         'limel-select--focused': props.isOpen,
     };
-    return (h("button", { id: TRIGGER_ID, slot: "content", class: anchorClassList, onClick: props.open, onKeyDown: props.onTriggerKeyDown, role: isCombobox ? 'combobox' : undefined, "aria-haspopup": "listbox", "aria-expanded": isCombobox ? String(props.isOpen) : undefined, "aria-controls": props.id, "aria-labelledby": props.label
+    return (h("button", { id: TRIGGER_ID, slot: "content", class: anchorClassList, onClick: props.readonly ? undefined : props.open, onKeyDown: props.onTriggerKeyDown, role: isCombobox ? 'combobox' : undefined, "aria-haspopup": "listbox", "aria-expanded": isCombobox ? String(props.isOpen) : undefined, "aria-controls": props.id, "aria-labelledby": props.label
             ? `${LABEL_ID} ${SELECTED_TEXT_ID}`
-            : SELECTED_TEXT_ID, "aria-describedby": getDescribedBy(props), "aria-required": isCombobox && props.required ? 'true' : undefined, "aria-invalid": isCombobox && !props.isValid ? 'true' : undefined, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: SELECTED_TEXT_ID, class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+            : SELECTED_TEXT_ID, "aria-describedby": getDescribedBy(props), "aria-required": isCombobox && props.required ? 'true' : undefined, "aria-invalid": isCombobox && !props.isValid ? 'true' : undefined, "aria-readonly": isCombobox && props.readonly ? 'true' : undefined, disabled: props.disabled || (props.native && props.readonly) }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: SELECTED_TEXT_ID, class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
     if (props.isValid) {
@@ -98,7 +98,7 @@ const NativeDropdown = (props) => {
     const options = props.options
         .filter((option) => !('separator' in option))
         .map(renderOption(props.value));
-    return (h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-describedby": getDescribedBy(props), "aria-disabled": props.disabled, "aria-invalid": props.isValid ? undefined : 'true', onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
+    return (h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-describedby": getDescribedBy(props), "aria-disabled": props.disabled, "aria-invalid": props.isValid ? undefined : 'true', onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled || props.readonly, multiple: props.multiple }, options));
 };
 const renderOption = (selectedOption) => {
     return (option) => {

package/dist/collection/components/slider/slider.js

@@ -35,9 +35,10 @@ export class Slider {
          */
         this.disabled = false;
         /**
-         * Disables the slider when `true`. This visualizes the slider slightly differently.
-         * But shows no visual sign indicating that the slider field
-         * is disabled or can ever become interactable.
+         * Set to `true` to make the slider read-only.
+         * Use `readonly` when the slider is only there to present the data it holds,
+         * and will not become possible for the current user to edit.
+         * It is then drawn without any sign that it could be interacted with.
          */
         this.readonly = false;
         /**
@@ -270,15 +271,15 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: '3a782f6aa420997f4a088e922438245c7c34143b', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '997046fb961c325d2a4a1e5cc51b08d84bcc2274', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: '985fceba0aa4385936c06b1e8cd083ead77823b2', slot: "content" }, h("div", { key: '47238548b281254d3fe7e9fe7350890ffb5f573e', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: 'f3fc215a6b2c331342487f206c549e04d109a061', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
+        return (h(Host, { key: '4fe4c4d105e9b5cbee5299d8eccb215a2da9e79e', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'e5a0b3e92e1a91c61e2da6489b0b02a684126c98', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'd4c854c56f632778ad84444de663883af90066f0', slot: "content" }, h("div", { key: '8ee47dd4e40db9ba9645d3725e6153df874318c1', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '44943cd55fcd376686cf7912665834932fc0f244', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
                 ? this.helperTextId
                 : undefined, "aria-invalid": this.invalid ? 'true' : undefined, "aria-valuetext": this.isUnset
                 ? translate.get('value-not-set', this.language)
                 : undefined, ref: (el) => {
                 this.inputElement = el;
-            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '407448db5cd86d489adb909e4c5ecc0e0d050c53', class: "track" }, h("div", { key: '7f8c47aa449ee1a5ffe9c8fbc35e7b8ec9c818ad', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '866541538223dddbd750c57836426941ef4e6139', class: "thumb" }, h("div", { key: 'b663cbb67b3656bec79b81a3d0b47fb08f234bfb', class: "knob" }), h("div", { key: '58bc88bc2c9ff6e1a2c4635708d2dd1c5744e7ac', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: 'fd5746650df94db4fd49a80566ae984b491c449d', class: "track" }, h("div", { key: '0096471f182419bcb738282520b3cd23bff091fd', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '1babaa01bf6238f0728f19ad14b84355dc094498', class: "thumb" }, h("div", { key: 'b3d3cb4785a1aaed224961e3809fa1ea18ccbd94', class: "knob" }), h("div", { key: '2ca4e3cc659ecf02fd05a144a35e6bd9969ca7bf', class: "indicator", "aria-hidden": "true" }, this.isUnset
             ? '\u{2194}\u{FE0E}'
-            : this.displayValue))), h("div", { key: '4bc12eebc0006e5e54ff2d6c44d04303e0370de0', class: "range-labels" }, h("span", { key: 'faa2e129c54b50f7503277fdfb8430270a154524', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: 'ade8069607794cddfddec0d6b5d574b54fb7da0e', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            : this.displayValue))), h("div", { key: '4309cea286f1f2a22ac2ae625cb7a9cd286df3c5', class: "range-labels" }, h("span", { key: 'd60949614cd7ce926f3c745ef731ee7a132ae342', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '4aa7e0b42c83079738fd83b85e8d8e8b796df7c3', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();
@@ -329,7 +330,7 @@ export class Slider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disables the slider when `true`. This visualizes the slider slightly differently.\nBut shows no visual sign indicating that the slider field\nis disabled or can ever become interactable."
+                    "text": "Set to `true` to make the slider read-only.\nUse `readonly` when the slider is only there to present the data it holds,\nand will not become possible for the current user to edit.\nIt is then drawn without any sign that it could be interacted with."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/switch/switch.js

@@ -29,9 +29,10 @@ export class Switch {
          */
         this.disabled = false;
         /**
-         * Disables the switch when `true`. This visualizes the switch slightly differently.
-         * But shows no visual sign indicating that the switch is disabled
-         * or can ever become interactable.
+         * Set to `true` to make the switch read-only.
+         * Use `readonly` when the switch is only there to present the data it holds,
+         * and will not become possible for the current user to edit.
+         * It is then drawn without any sign that it could be interacted with.
          */
         this.readonly = false;
         /**
@@ -78,7 +79,7 @@ export class Switch {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: 'b6c37d2c9a9dc66e7e02271fe7877d24f190aaa9' }, this.readonly
+        return (h(Host, { key: 'c85cef5b79b367de3c8ce07e486873f2311b47be' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }
@@ -150,7 +151,7 @@ export class Switch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disables the switch when `true`. This visualizes the switch slightly differently.\nBut shows no visual sign indicating that the switch is disabled\nor can ever become interactable."
+                    "text": "Set to `true` to make the switch read-only.\nUse `readonly` when the switch is only there to present the data it holds,\nand will not become possible for the current user to edit.\nIt is then drawn without any sign that it could be interacted with."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/style/internal/shared_input-select-picker.scss

@@ -86,7 +86,7 @@ $height-of-mdc-text-field: 2.5rem; //This is written directly in `rem`, becurse
                     var(--lime-primary-color, var(--limel-theme-primary-color)) !important; // has to be `!important` since we're using `box-shadow` insted of `outline` which is also used in `hover` mode
             }
         }
-        &:not(.mdc-text-field--disabled):hover {
+        &:not(.mdc-text-field--disabled):not(.lime-text-field--readonly):hover {
             .mdc-text-field__icon--trailing {
                 box-shadow: var(--button-shadow-normal);
                 background-color: rgba(var(--contrast-100), 0.4);
@@ -113,7 +113,7 @@ $height-of-mdc-text-field: 2.5rem; //This is written directly in `rem`, becurse
 }
 
 @mixin readonly-overrides {
-    .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly {
+    .mdc-text-field.lime-text-field--readonly {
         .mdc-text-field__input {
             background-color: transparent;
             color: $input-text-color;