@vaadin/app-layout 23.3.0-alpha1 → 23.3.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -36,15 +36,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.3.0-alpha1",
-    "@vaadin/component-base": "23.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
+    "@vaadin/button": "23.3.0-alpha3",
+    "@vaadin/component-base": "23.3.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/tabs": "23.3.0-alpha1",
+    "@vaadin/tabs": "23.3.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
+  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
 }

package/src/vaadin-drawer-toggle.js

@@ -3,8 +3,10 @@
  * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { Button } from '@vaadin/button/src/vaadin-button.js';
+import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
 
 /**
  * The Drawer Toggle component controls the drawer in App Layout component.
@@ -56,9 +58,10 @@ class DrawerToggle extends Button {
           top: 12px;
         }
       </style>
-      <slot>
+      <slot id="slot">
         <div part="icon"></div>
       </slot>
+      <div part="icon" hidden$="[[!_showFallbackIcon]]"></div>
       <slot name="tooltip"></slot>
     `;
   }
@@ -74,6 +77,12 @@ class DrawerToggle extends Button {
         value: 'Toggle navigation panel',
         reflectToAttribute: true,
       },
+
+      /** @private */
+      _showFallbackIcon: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -84,6 +93,23 @@ class DrawerToggle extends Button {
       this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
     });
   }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._observer = new FlattenedNodesObserver(this, () => {
+      this._toggleFallbackIcon();
+    });
+  }
+
+  /** @private */
+  _toggleFallbackIcon() {
+    const nodes = this.$.slot.assignedNodes();
+
+    // Show fallback icon if there are 1-2 empty text nodes assigned to the default slot.
+    this._showFallbackIcon = nodes.length > 0 && nodes.every((node) => isEmptyTextNode(node));
+  }
 }
 
 customElements.define(DrawerToggle.is, DrawerToggle);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -104,14 +104,6 @@
               {
                 "name": "overlay-changed",
                 "description": "Fired when the `overlay` property changes."
-              },
-              {
-                "name": "primarySection-changed",
-                "description": "Fired when the `primarySection` property changes."
-              },
-              {
-                "name": "drawerOpened-changed",
-                "description": "Fired when the `drawerOpened` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -74,20 +74,6 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": "@primarySection-changed",
-              "description": "Fired when the `primarySection` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@drawerOpened-changed",
-              "description": "Fired when the `drawerOpened` property changes.",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         },