@mgdis/mg-components 5.0.0 → 5.2.0

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css

@@ -185,21 +185,40 @@
 .mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
   justify-content: space-between;
 }
+.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
+  width: 100%;
+}
 .mg-input.mg-input--width-full .mg-input__input-container {
   flex: auto;
   width: 100%;
 }
 .mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
+  max-width: 100%;
+}
+.mg-input:not(.mg-input--label-on-top) .mg-input__box {
   width: 100%;
+  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
+  min-width: 5rem;
 }
-.mg-input.mg-input--width-16 .mg-input__box {
-  width: 21rem;
+.mg-input.mg-input--width-16 .mg-input__input-container {
+  width: 100%;
 }
-.mg-input.mg-input--width-4 .mg-input__box {
-  width: 7rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
+  width: 100%;
+  max-width: 21rem;
 }
-.mg-input.mg-input--width-2 .mg-input__box {
-  width: 5rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
+  width: 100%;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
+  max-width: 21rem;
+  min-width: 100%;
+}
+.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
+  max-width: 7rem;
+}
+.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
+  max-width: 5rem;
 }
 
 /**
@@ -228,4 +247,7 @@
   padding-top: 0;
   padding-bottom: 0;
   padding-right: 1rem;
+}
+.mg-input.mg-input--select:not(.mg-input--label-on-top) .mg-input__box {
+  max-width: unset;
 }

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js

@@ -42,8 +42,8 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
 };
 export class MgInputSelect {
   constructor() {
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -82,8 +82,8 @@ export class MgInputSelect {
      */
     this.handleInput = () => {
       this.checkValidity();
-      if (this.hasError) {
-        this.checkError();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
       }
       if (this.input.value !== '') {
         this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
@@ -102,19 +102,16 @@ export class MgInputSelect {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity && this.input.checkValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid && this.input.validity.valueMissing) {
@@ -153,6 +150,16 @@ export class MgInputSelect {
       throw new Error('<mg-input-select> prop "items" is required and all items must be the same type, string or Option.');
     }
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   /**
    * Public method to display errors
    *
@@ -160,8 +167,8 @@ export class MgInputSelect {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -193,7 +200,10 @@ export class MgInputSelect {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => (this.input = el) }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+        if (el !== null)
+          this.input = el;
+      } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
     h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
   }
   static get is() { return "mg-input-select"; }
@@ -606,6 +616,15 @@ export class MgInputSelect {
       }, {
         "propName": "items",
         "methodName": "validateItems"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css

@@ -185,21 +185,40 @@
 .mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
   justify-content: space-between;
 }
+.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
+  width: 100%;
+}
 .mg-input.mg-input--width-full .mg-input__input-container {
   flex: auto;
   width: 100%;
 }
 .mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
+  max-width: 100%;
+}
+.mg-input:not(.mg-input--label-on-top) .mg-input__box {
+  width: 100%;
+  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
+  min-width: 5rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container {
+  width: 100%;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
+  width: 100%;
+  max-width: 21rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
   width: 100%;
 }
-.mg-input.mg-input--width-16 .mg-input__box {
-  width: 21rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
+  max-width: 21rem;
+  min-width: 100%;
 }
-.mg-input.mg-input--width-4 .mg-input__box {
-  width: 7rem;
+.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
+  max-width: 7rem;
 }
-.mg-input.mg-input--width-2 .mg-input__box {
-  width: 5rem;
+.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
+  max-width: 5rem;
 }
 
 /**

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js

@@ -7,12 +7,12 @@ export class MgInputText {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classFocus = 'is-focused';
     this.classIsInputGroupAppend = 'mg-input--is-input-group-append';
     this.classHasIcon = 'mg-input--has-icon';
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -61,8 +61,8 @@ export class MgInputText {
      */
     this.handleInput = () => {
       this.checkValidity();
-      if (this.hasError) {
-        this.checkError();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
       }
       this.value = this.input.value;
     };
@@ -93,21 +93,18 @@ export class MgInputText {
      * @returns {void}
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      *
      * @returns {void}
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       // Does not match pattern
@@ -120,7 +117,7 @@ export class MgInputText {
       }
     };
     /**
-     * Validate patern configuration
+     * Validate pattern configuration
      *
      * @returns {void}
      */
@@ -159,6 +156,16 @@ export class MgInputText {
       this.classList.delete(this.classHasIcon);
     }
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   /**
    * Public method to play input focus
    *
@@ -174,8 +181,8 @@ export class MgInputText {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -210,7 +217,10 @@ export class MgInputText {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
-      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+        if (el !== null)
+          this.input = el;
+      } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
   }
   static get is() { return "mg-input-text"; }
   static get encapsulation() { return "shadow"; }
@@ -688,6 +698,15 @@ export class MgInputText {
       }, {
         "propName": "icon",
         "methodName": "validateIcon"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css

@@ -185,21 +185,40 @@
 .mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
   justify-content: space-between;
 }
+.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
+  width: 100%;
+}
 .mg-input.mg-input--width-full .mg-input__input-container {
   flex: auto;
   width: 100%;
 }
 .mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
+  max-width: 100%;
+}
+.mg-input:not(.mg-input--label-on-top) .mg-input__box {
+  width: 100%;
+  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
+  min-width: 5rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container {
+  width: 100%;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
+  width: 100%;
+  max-width: 21rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
   width: 100%;
 }
-.mg-input.mg-input--width-16 .mg-input__box {
-  width: 21rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
+  max-width: 21rem;
+  min-width: 100%;
 }
-.mg-input.mg-input--width-4 .mg-input__box {
-  width: 7rem;
+.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
+  max-width: 7rem;
 }
-.mg-input.mg-input--width-2 .mg-input__box {
-  width: 5rem;
+.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
+  max-width: 5rem;
 }
 
 /**

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js

@@ -7,11 +7,11 @@ export class MgInputTextarea {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classFocus = 'is-focused';
     this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -61,9 +61,9 @@ export class MgInputTextarea {
      * Handle input event
      */
     this.handleInput = () => {
-      if (this.hasError) {
+      if (this.hasDisplayedError) {
         this.checkValidity();
-        this.checkError();
+        this.setErrorMessage();
       }
       this.value = this.input.value;
     };
@@ -95,19 +95,16 @@ export class MgInputTextarea {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity && this.input.checkValidity() && this.getPatternValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined && this.input.checkValidity() && this.getPatternValidity());
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       // Does not match pattern
@@ -135,6 +132,16 @@ export class MgInputTextarea {
     this.checkValidity();
     this.valueChange.emit(newValue);
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   validateDisplayCharacterLeft(newValue) {
     if (newValue) {
       this.classList.add(this.classHasDisplayCharacterLeft);
@@ -150,8 +157,8 @@ export class MgInputTextarea {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -186,7 +193,10 @@ export class MgInputTextarea {
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
         'mg-input__box--resizable-vertical': this.resizable === 'vertical',
-      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
+      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+        if (el !== null)
+          this.input = el;
+      } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
   }
   static get is() { return "mg-input-textarea"; }
   static get encapsulation() { return "shadow"; }
@@ -643,6 +653,15 @@ export class MgInputTextarea {
     return [{
         "propName": "value",
         "methodName": "handleValue"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }, {
         "propName": "displayCharacterLeft",
         "methodName": "validateDisplayCharacterLeft"

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js

@@ -15,7 +15,7 @@ export class MgInputToggle {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classReadonly = 'mg-input--toggle-readonly';
     this.classDisabled = 'mg-input--toggle-disabled';
     this.classIsActive = 'mg-input--toggle-is-active';

package/dist/collection/components/molecules/mg-details/doc/mg-details.stories.js

@@ -20,4 +20,5 @@ MgDetails.args = {
   toggleClosed: 'Show details',
   toggleOpened: 'Hide details',
   expanded: false,
+  hideSummary: false,
 };

package/dist/collection/components/molecules/mg-details/mg-details.css

@@ -1,3 +1,24 @@
+/**
+ * A11Y
+ */
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .mg-details summary {
   display: flex;
   align-items: baseline;
@@ -7,6 +28,14 @@
 .mg-details__toggle {
   margin-left: 1.5rem;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 0.6rem;
+  min-height: calc(var(--font-size) * var(--line-height));
+}
+.mg-details__toggle mg-icon {
+  align-self: self-end;
 }
 
 .mg-details__details {

package/dist/collection/components/molecules/mg-details/mg-details.js

@@ -1,6 +1,10 @@
 import { h } from '@stencil/core';
 export class MgDetails {
   constructor() {
+    /**
+     * Hide summary element
+     */
+    this.hideSummary = false;
     /**
      * Define if details are diplayed
      */
@@ -15,7 +19,7 @@ export class MgDetails {
     };
   }
   validateTitles(newValue) {
-    if (newValue === undefined || newValue === '') {
+    if (newValue === undefined || newValue.trim() === '') {
       throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
     }
   }
@@ -40,7 +44,7 @@ export class MgDetails {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), " ", this.expanded ? this.toggleOpened : this.toggleClosed)), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-details"; }
   static get encapsulation() { return "shadow"; }
@@ -64,7 +68,7 @@ export class MgDetails {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -81,7 +85,7 @@ export class MgDetails {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -90,6 +94,24 @@ export class MgDetails {
         "attribute": "toggle-opened",
         "reflect": false
       },
+      "hideSummary": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide summary element"
+        },
+        "attribute": "hide-summary",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "expanded": {
         "type": "boolean",
         "mutable": true,