@teipublisher/pb-components 2.26.0-next-3.9 → 2.26.0-next-3.11

package/pb-elements.json

@@ -2587,15 +2587,9 @@
       "path": "./src/pb-collapse.js",
       "description": "A collapsible block: in collapsed state it only shows a header and expands if clicked.\nThe header should go into slot `collapse-trigger`, the content into `collapse-content`.\nExample:\n\n```html\n<pb-collapse>\n  <div slot=\"collapse-trigger\">\n      Metadata\n  </div>\n  <pb-view slot=\"collapse-content\" src=\"document1\" subscribe=\"transcription\" xpath=\"//teiHeader\"></pb-view>\n</pb-collapse>\n```\n\nBy adding a CSS 'icon-right' to a `pb-collapse` the icon can be placed on the right side\n```\n<pb-collapse class='icon-right'>\n```",
       "attributes": [
-        {
-          "name": "horizontal",
-          "type": "boolean",
-          "default": "false",
-          "deprecatedMessage": "Corresponds to the iron-collapse's horizontal property."
-        },
         {
           "name": "no-animation",
-          "description": "Corresponds to the iron-collapse's noAnimation property.",
+          "description": "Whether to disable animations.",
           "type": "boolean",
           "default": "false"
         },
@@ -2605,24 +2599,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "expand-icon",
-          "description": "The iron-icon when collapsed. Value must be one of the icons defined by iron-icons",
-          "type": "string",
-          "default": "\"icons:expand-more\""
-        },
-        {
-          "name": "collapse-icon",
-          "description": "The icon when expanded.",
-          "type": "string",
-          "default": "\"icons:expand-less\""
-        },
-        {
-          "name": "no-icons",
-          "description": "Whether to hide the expand/collapse icon.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "toggles",
           "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\nSet to true to keep multiple pb-collapse open at the same time.",
@@ -2664,15 +2640,13 @@
       "properties": [
         {
           "name": "horizontal",
-          "attribute": "horizontal",
           "type": "boolean",
-          "default": "false",
-          "deprecatedMessage": "Corresponds to the iron-collapse's horizontal property."
+          "default": "false"
         },
         {
           "name": "noAnimation",
           "attribute": "no-animation",
-          "description": "Corresponds to the iron-collapse's noAnimation property.",
+          "description": "Whether to disable animations.",
           "type": "boolean",
           "default": "false"
         },
@@ -2685,22 +2659,16 @@
         },
         {
           "name": "expandIcon",
-          "attribute": "expand-icon",
-          "description": "The iron-icon when collapsed. Value must be one of the icons defined by iron-icons",
           "type": "string",
           "default": "\"icons:expand-more\""
         },
         {
           "name": "collapseIcon",
-          "attribute": "collapse-icon",
-          "description": "The icon when expanded.",
           "type": "string",
           "default": "\"icons:expand-less\""
         },
         {
           "name": "noIcons",
-          "attribute": "no-icons",
-          "description": "Whether to hide the expand/collapse icon.",
           "type": "boolean",
           "default": "false"
         },
@@ -2768,8 +2736,17 @@
       "cssProperties": [
         {
           "name": "--pb-collapse-icon-padding",
-          "description": "padding in px for the \"caret-down\" icon left to the collapsible item",
-          "default": "\"0 4px 0 0\""
+          "description": "padding left or right of the \"caret\" icon left to the collapsible item",
+          "default": "\".5rem\""
+        },
+        {
+          "name": "--pb-collapse-icon-size",
+          "description": "size of the \"caret\" icon left to the collapsible item",
+          "default": "\".75rem\""
+        },
+        {
+          "name": "--pb-collapse-icon-image",
+          "description": "image of the \"caret\" icon left to the collapsible item"
         }
       ]
     },
@@ -11944,6 +11921,11 @@
           "description": "The view type to use for paginating the document. Either `page`, `div` or `single`.\nOverwrites the same property specified on `pb-document`. Values have the following meaning:\n\nValue | Displayed content\n------|------------------\n`page` | content is displayed page by page as determined by tei:pb\n`div` | content is displayed by divisions\n`single` | do not paginate but display entire content at once",
           "type": "string"
         },
+        {
+          "name": "fill",
+          "description": "Controls the pagination-by-div algorithm: if a page would have less than\n`fill` elements, it tries to fill\nup the page by pulling following divs in. When set to 0, it will never\nattempt to fill up the page. For the annotation editor this should\nalways be 0.",
+          "type": "number"
+        },
         {
           "name": "node-id",
           "description": "An eXist nodeId. If specified, selects the root of the fragment of the document\nwhich should be displayed. Normally this property is set automatically by pagination.",
@@ -12053,7 +12035,7 @@
         },
         {
           "name": "no-scroll",
-          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash)\nafter content was loaded.",
           "type": "boolean",
           "default": "false"
         },
@@ -12084,7 +12066,7 @@
         },
         {
           "name": "wait-for",
-          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature` \nelements.",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature`\nelements.",
           "type": "string"
         },
         {
@@ -12132,6 +12114,12 @@
           "description": "The view type to use for paginating the document. Either `page`, `div` or `single`.\nOverwrites the same property specified on `pb-document`. Values have the following meaning:\n\nValue | Displayed content\n------|------------------\n`page` | content is displayed page by page as determined by tei:pb\n`div` | content is displayed by divisions\n`single` | do not paginate but display entire content at once",
           "type": "string"
         },
+        {
+          "name": "fill",
+          "attribute": "fill",
+          "description": "Controls the pagination-by-div algorithm: if a page would have less than\n`fill` elements, it tries to fill\nup the page by pulling following divs in. When set to 0, it will never\nattempt to fill up the page. For the annotation editor this should\nalways be 0.",
+          "type": "number"
+        },
         {
           "name": "nodeId",
           "attribute": "node-id",
@@ -12267,7 +12255,7 @@
         {
           "name": "noScroll",
           "attribute": "no-scroll",
-          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash)\nafter content was loaded.",
           "type": "boolean",
           "default": "false"
         },
@@ -12304,7 +12292,7 @@
         {
           "name": "waitFor",
           "attribute": "wait-for",
-          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature` \nelements.",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature`\nelements.",
           "type": "string"
         },
         {
@@ -12441,6 +12429,11 @@
           "description": "The view type to use for paginating the document. Either `page`, `div` or `single`.\nOverwrites the same property specified on `pb-document`. Values have the following meaning:\n\nValue | Displayed content\n------|------------------\n`page` | content is displayed page by page as determined by tei:pb\n`div` | content is displayed by divisions\n`single` | do not paginate but display entire content at once",
           "type": "string"
         },
+        {
+          "name": "fill",
+          "description": "Controls the pagination-by-div algorithm: if a page would have less than\n`fill` elements, it tries to fill\nup the page by pulling following divs in. When set to 0, it will never\nattempt to fill up the page. For the annotation editor this should\nalways be 0.",
+          "type": "number"
+        },
         {
           "name": "node-id",
           "description": "An eXist nodeId. If specified, selects the root of the fragment of the document\nwhich should be displayed. Normally this property is set automatically by pagination.",
@@ -12550,7 +12543,7 @@
         },
         {
           "name": "no-scroll",
-          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash)\nafter content was loaded.",
           "type": "boolean",
           "default": "false"
         },
@@ -12581,7 +12574,7 @@
         },
         {
           "name": "wait-for",
-          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature` \nelements.",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature`\nelements.",
           "type": "string"
         },
         {
@@ -12604,6 +12597,12 @@
           "description": "The view type to use for paginating the document. Either `page`, `div` or `single`.\nOverwrites the same property specified on `pb-document`. Values have the following meaning:\n\nValue | Displayed content\n------|------------------\n`page` | content is displayed page by page as determined by tei:pb\n`div` | content is displayed by divisions\n`single` | do not paginate but display entire content at once",
           "type": "string"
         },
+        {
+          "name": "fill",
+          "attribute": "fill",
+          "description": "Controls the pagination-by-div algorithm: if a page would have less than\n`fill` elements, it tries to fill\nup the page by pulling following divs in. When set to 0, it will never\nattempt to fill up the page. For the annotation editor this should\nalways be 0.",
+          "type": "number"
+        },
         {
           "name": "nodeId",
           "attribute": "node-id",
@@ -12739,7 +12738,7 @@
         {
           "name": "noScroll",
           "attribute": "no-scroll",
-          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash)\nafter content was loaded.",
           "type": "boolean",
           "default": "false"
         },
@@ -12776,7 +12775,7 @@
         {
           "name": "waitFor",
           "attribute": "wait-for",
-          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature` \nelements.",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.\n\n`pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature`\nelements.",
           "type": "string"
         },
         {

package/src/pb-collapse.js

@@ -3,7 +3,6 @@ import {pbMixin} from './pb-mixin.js';
 import {themableMixin} from "./theming.js";
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';
-import '@polymer/iron-collapse';
 
 
 /**
@@ -27,7 +26,9 @@ import '@polymer/iron-collapse';
  *
  * @slot collapse-trigger - trigger toggling collapsed content on/off
  * @slot collapse-content - content to be collapsed
- * @cssprop [--pb-collapse-icon-padding=0 4px 0 0] - padding in px for the "caret-down" icon left to the collapsible item
+ * @cssprop [--pb-collapse-icon-padding=.5rem] - padding left or right of the "caret" icon left to the collapsible item
+ * @cssprop [--pb-collapse-icon-size=.75rem] - size of the "caret" icon left to the collapsible item
+ * @cssprop [--pb-collapse-icon-image] - image of the "caret" icon left to the collapsible item
  * @fires pb-collapse-open - Fires opening the collapsed section
  */
 export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
@@ -35,14 +36,7 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
         return {
             ...super.properties,
             /**
-             * @deprecated
-             * Corresponds to the iron-collapse's horizontal property.
-             */
-            horizontal: {
-                type: Boolean
-            },
-            /**
-             * Corresponds to the iron-collapse's noAnimation property.
+             * Whether to disable animations.
              *
              */
             noAnimation: {
@@ -62,27 +56,6 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
              */
             toggles: {
                 type: Boolean
-            },
-            /**
-             * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
-             */
-            expandIcon: {
-                type: String,
-                attribute: 'expand-icon'
-            },
-            /**
-             * The icon when expanded.
-             */
-            collapseIcon: {
-                type: String,
-                attribute: 'collapse-icon'
-            },
-            /**
-             * Whether to hide the expand/collapse icon.
-             */
-            noIcons: {
-                type: Boolean,
-                attribute: 'no-icons'
             }
         };
     }
@@ -118,6 +91,16 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
         }
     }
 
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened')) {
+            const details = this.shadowRoot.querySelector('details');
+            if (details) {
+                details.open = this.opened;
+            }
+        }
+    }
+
     /**
      * opens the collapsible section
      */
@@ -149,19 +132,21 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
         }
     }
 
+    _handleToggle(e) {
+        e.preventDefault();
+        this.toggle();
+    }
+
     render() {
         return html`
-            <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
-                ${
-                    !this.noIcons ?
-                html`<iron-icon icon="${this.opened ? this.collapseIcon : this.expandIcon}"></iron-icon>` :
-                        null
-                }
-                <slot id="collapseTrigger" name="collapse-trigger"></slot>
-            </div>
-            <iron-collapse id="collapse" horizontal="${this.horizontal}" no-animation="${this.noAnimation}" .opened="${this.opened}">
-                <slot name="collapse-content"></slot>
-            </iron-collapse>
+            <details ?open="${this.opened}" class="${this.horizontal ? 'horizontal' : ''}">
+                <summary @click="${this._handleToggle}" class="collapse-trigger">
+                    <slot id="collapseTrigger" name="collapse-trigger"></slot>
+                </summary>
+                <div class="collapse-content ${this.noAnimation ? 'no-animation' : ''}">
+                    <slot name="collapse-content"></slot>
+                </div>
+            </details>
         `;
     }
 
@@ -172,21 +157,91 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
                 position: relative;
             }
 
-            #trigger {
-                display: grid;
-                align-items:center;
-                grid-template-columns:min-content auto;
+            details {
+                display: block;
             }
 
-            iron-icon {
-                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
+            summary {
+                display: inline-flex;
+                align-items: center;
+                cursor: pointer;
+                list-style: none;
+                outline: none;
+                cursor: pointer;
+                user-select: none;
+                gap: var(--pb-collapse-icon-padding, .5rem);
             }
 
-            :host(.icon-right) iron-icon {
-                position: absolute;
-                right: 0;
+            :host(:not(.icon-right)) summary::before {
+                display: block;
+                content: "";
+                background-image: var(--pb-collapse-icon-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"));
+                transform: none;
+                height: var(--pb-collapse-icon-size, .75rem);
+                width: var(--pb-collapse-icon-size, .75rem);
+                background-size: var(--pb-collapse-icon-size, .75rem) auto;
+                background-position: left center;
+                background-repeat: no-repeat;
             }
 
+            :host(.icon-right) summary::after {
+                display: block;
+                content: "";
+                background-image: var(--pb-collapse-icon-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"));
+                transform: none;
+                height: var(--pb-collapse-icon-size, .75rem);
+                width: var(--pb-collapse-icon-size, .75rem);
+                background-size: var(--pb-collapse-icon-size, .75rem) auto;
+                background-position: right center;
+                background-repeat: no-repeat;
+            }
+
+            .dropdown-button[open]>summary::after {
+                transform: rotate(180deg);
+            }
+
+            .collapse-content {
+                overflow: hidden;
+                transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+            }
+
+            .collapse-content.no-animation {
+                transition: none;
+            }
+
+            details[open] .collapse-content {
+                animation: slideDown 0.3s ease-in-out;
+            }
+
+            details:not([open]) .collapse-content {
+                animation: slideUp 0.3s ease-in-out;
+            }
+
+            .horizontal .collapse-content {
+                transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
+            }
+
+            @keyframes slideDown {
+                from {
+                    opacity: 0;
+                    max-height: 0;
+                }
+                to {
+                    opacity: 1;
+                    max-height: 1000px;
+                }
+            }
+
+            @keyframes slideUp {
+                from {
+                    opacity: 1;
+                    max-height: 1000px;
+                }
+                to {
+                    opacity: 0;
+                    max-height: 0;
+                }
+            }
         `;
     }
 }

package/src/pb-odd-editor.js

@@ -45,7 +45,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 padding:0;
                 height:auto;
             }
-            
+
             #layout {
                 width: 100%;
                 display: grid;
@@ -131,15 +131,13 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 white-space: nowrap;
             }
 
-            /* todo: this doesn't work - should refactor to have the complete trigger exposed here (move out of pb-collapse) */
-            pb-collapse#meta ::slotted(.collapse-trigger){
-                /*height:56px;*/
+            details {
+                --details-transition-duration:0.8s;
             }
-
-            iron-collapse {
-                --iron-collapse-transition-duration:0.8s;
+            details[open] {
+                padding: 0;
             }
-            
+
             pb-message#errorMsg{
                 background: var(--paper-red-500);
                 color:white;
@@ -148,19 +146,19 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 height:100%;
                 overflow:auto;
             }
-            
+
             paper-tab{
                 width:100px;
             }
-            
+
             .editingView {
                 width:100%;
             }
-            
+
             vaadin-tabs{
                 margin-top:10px;
             }
-            
+
             vaadin-tab{
                 background:var(--paper-grey-200);
                 padding:0 6px;
@@ -300,7 +298,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 handle-as="json" content-type="application/x-www-form-urlencoded"
                 with-credentials
                 method="GET"></iron-ajax>
-                
+
         <iron-ajax id="saveOdd"
                 handle-as="json"
                 with-credentials></iron-ajax>
@@ -315,7 +313,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                             <pb-edit-xml id="editSource"><paper-icon-button icon="code" title="${translate('odd.editor.odd-source')}"></paper-icon-button></pb-edit-xml>
                             <paper-icon-button @click="${() => this.save(true)}" icon="icons:cloud-download" title="${fsSupported ? translate('odd.editor.save-as'): translate('odd.editor.download')}"></paper-icon-button>
                             <paper-icon-button @click="${this._reload}" icon="refresh" title="${translate('odd.editor.reload')}"></paper-icon-button>
-                            <paper-icon-button @click="${() => this.save(false)}" icon="save" title="${translate('odd.editor.save')} ${this.display('save')}" 
+                            <paper-icon-button @click="${() => this.save(false)}" icon="save" title="${translate('odd.editor.save')} ${this.display('save')}"
                                 ?disabled="${!this.loggedIn}"></paper-icon-button>
                         </span>
                     </h3>
@@ -328,7 +326,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                     <div id="jump-to">
                         <paper-autocomplete id="jumpTo" label="${translate('odd.editor.jump-to')}" always-float-label="always-float-label"></paper-autocomplete>
                     </div>
-                    
+
                     <h3>${translate('odd.editor.specs')}</h3>
             </div>
             <div id="navlist">
@@ -340,7 +338,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 `)}
             </div>
             <section class="specs" id="specs">
-    
+
                 <paper-card class="metadata">
                     <pb-collapse id="meta">
                         <h4 slot="collapse-trigger" class="panel-title">
@@ -372,21 +370,21 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                         </div>
                     </pb-collapse>
                 </paper-card>
-    
+
                 <!-- todo: import elementspec to make it function  -->
-    
+
                 <div class="editingView">
                     <vaadin-tabs id="tabs" selected="${this.tabIndex}">
                         ${repeat(this.tabs, (i) => i.id, (i, index) =>
                 html`
                             <vaadin-tab name="${i}" @click="${(e) => this._selectTab(e, i)}"><span style="padding-right:20px;">${i}</span><paper-icon-button icon="close" @click="${(ev) => this._closeTabHandler(ev, index)}"></paper-icon-button></vaadin-tab>
-                        `)}                    
+                        `)}
                     </vaadin-tabs>
-                                       
+
                     <div id="currentElement"></div>
                 </div>
             </section>
-            
+
         </div>
 
 
@@ -921,7 +919,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 "output-root": this.outputRoot,};
             saveOdd.body = data;
         }
-        
+
         const request = saveOdd.generateRequest();
         request.completes
             .then((req) => {
@@ -956,9 +954,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
             document.dispatchEvent(new CustomEvent('pb-end-update'));
             return;
         }
-        
+
         let msg;
-        
+
         if (this.lessThanApiVersion('1.0.0')) {
             const report = data.report.map(PbOddEditor._renderReport);
             msg = `<div class="list-group">${report.join('')}</div>`;
@@ -966,9 +964,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
             const report = data.report;
             msg = `<div class="list-group">${report}</div>`;
         }
-        
+
         this.shadowRoot.getElementById('dialog').set(i18n("odd.editor.saved"), msg);
-        
+
         this._hasChanges = false;
         document.dispatchEvent(new CustomEvent('pb-end-update'));
 

package/src/pb-odd-elementspec-editor.js

@@ -12,7 +12,7 @@ import '@polymer/paper-menu-button/paper-menu-button';
 import '@polymer/paper-listbox/paper-listbox';
 import '@polymer/paper-styles/color';
 import '@polymer/paper-item/paper-item';
-import '@polymer/iron-collapse/iron-collapse';
+
 import './pb-message.js';
 import './pb-odd-model-editor.js';
 
@@ -95,8 +95,8 @@ export class PbOddElementspecEditor extends LitElement {
             }
 
             /*todo: this does not take effect*/
-            iron-collapse.models{
-                --iron-collapse-transition-duration:0.4s;
+            details.models{
+                --details-transition-duration:0.4s;
             }
             
             .models{