@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -12,6 +12,8 @@
  */
 .button {
   all: unset;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -25,20 +27,20 @@
   color: var(--limel-dock-item-text-color);
   background-color: var(--dock-background-color);
 }
-.button:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused);
-}
-.dock-item:not(.selected) .button:not(.disabled) {
-  cursor: pointer;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-}
-.dock-item:not(.selected) .button:not(.disabled):hover {
+.button:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-.dock-item:not(.selected) .button:not(.disabled):active {
+.button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
+.button:focus {
+  outline: none;
+}
+.button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .button:hover {
   z-index: 1;
 }
@@ -47,12 +49,16 @@
   background-color: var(--dock-item-background-color--selected, rgb(var(--contrast-200)));
   box-shadow: var(--button-shadow-inset);
 }
+.button.selected:focus-visible {
+  box-shadow: var(--button-shadow-inset), var(--shadow-depth-8-focused);
+}
 .button.selected .icon {
   color: var(--limel-dock-item-text--selected);
 }
 
 limel-popover {
   display: grid;
+  grid-template-columns: 100%;
 }
 
 .text {

package/dist/collection/components/dock/dock-button/dock-button.js

@@ -1,22 +1,17 @@
-import { Component, Event, h, Prop, State } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../../util/random-string';
 /**
  * @private
  */
 export class DockButton {
   constructor() {
-    /**
-     * @inheritdoc
-     */
-    this.expanded = false;
-    /**
-     * @inheritdoc
-     */
-    this.useMobileLayout = false;
-    this.isOpen = false;
     this.openPopover = (event) => {
       event.stopPropagation();
       this.isOpen = true;
+      this.menuOpen.emit(this.item);
+    };
+    this.setCustomComponentElement = (element) => {
+      this.customComponentElement = element;
     };
     this.onPopoverClose = () => {
       this.isOpen = false;
@@ -24,8 +19,18 @@ export class DockButton {
     };
     this.handleClick = (event) => {
       event.stopPropagation();
-      this.interact.emit(this.item);
+      this.itemSelected.emit(this.item);
     };
+    this.focusCustomComponentElement = () => {
+      var _a, _b, _c;
+      if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
+        (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
+      }
+    };
+    this.item = undefined;
+    this.expanded = false;
+    this.useMobileLayout = false;
+    this.isOpen = false;
     this.tooltipId = createRandomString();
   }
   render() {
@@ -35,22 +40,24 @@ export class DockButton {
     }
     return this.renderButton(this.handleClick);
   }
+  openWatcher() {
+    if (!this.isOpen) {
+      return;
+    }
+    const observer = new IntersectionObserver(this.focusCustomComponentElement);
+    observer.observe(this.customComponentElement);
+  }
   renderPopover() {
     var _a;
     const CustomComponent = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu.componentName;
-    return (h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose },
-      this.renderButton(this.openPopover, 'trigger'),
-      h(CustomComponent, Object.assign({}, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
+    return (h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose }, this.renderButton(this.openPopover, 'trigger'), h(CustomComponent, Object.assign({ ref: this.setCustomComponentElement }, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
   }
   renderButton(handleClick, slot) {
     var _a;
     return (h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
         button: true,
         selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
-      }, onClick: handleClick },
-      this.renderIcon(),
-      this.renderLabel(),
-      this.renderTooltip()));
+      }, onClick: handleClick }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
   }
   renderIcon() {
     if (!this.item.icon) {
@@ -72,116 +79,143 @@ export class DockButton {
     }
   }
   static get is() { return "limel-dock-button"; }
-  static get originalStyleUrls() { return {
-    "$": ["dock-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dock-button.css"]
-  }; }
-  static get properties() { return {
-    "item": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DockItem",
-        "resolved": "DockItem",
-        "references": {
-          "DockItem": {
-            "location": "import",
-            "path": "../dock.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["dock-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dock-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "item": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DockItem",
+          "resolved": "DockItem",
+          "references": {
+            "DockItem": {
+              "location": "import",
+              "path": "../dock.types"
+            }
           }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Item that is placed in the dock."
         }
       },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
-      }
-    },
-    "expanded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
+      "expanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When the dock is expanded or collapsed, dock items\nshow labels and tooltips as suitable for the layout."
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "expanded",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "useMobileLayout": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "attribute": "use-mobile-layout",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "isOpen": {}
-  }; }
-  static get events() { return [{
-      "method": "interact",
-      "name": "interact",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when clicking on the flow item."
-      },
-      "complexType": {
-        "original": "DockItem",
-        "resolved": "DockItem",
-        "references": {
-          "DockItem": {
-            "location": "import",
-            "path": "../dock.types"
+      "useMobileLayout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When dock is using mobile layout, dock items\nshow labels and tooltips as suitable for the layout."
+        },
+        "attribute": "use-mobile-layout",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemSelected",
+        "name": "itemSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a dock item has been selected from the dock."
+        },
+        "complexType": {
+          "original": "DockItem",
+          "resolved": "DockItem",
+          "references": {
+            "DockItem": {
+              "location": "import",
+              "path": "../dock.types"
+            }
           }
         }
-      }
-    }, {
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
+      }, {
+        "method": "menuOpen",
+        "name": "menuOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a dock menu is opened."
+        },
+        "complexType": {
+          "original": "DockItem",
+          "resolved": "DockItem",
+          "references": {
+            "DockItem": {
+              "location": "import",
+              "path": "../dock.types"
+            }
+          }
+        }
+      }, {
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when the popover is closed."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "isOpen",
+        "methodName": "openWatcher"
+      }];
+  }
 }

package/dist/collection/components/dock/dock.css

@@ -92,15 +92,19 @@ nav::-webkit-scrollbar {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
+.expand-shrink:focus {
+  outline: none;
+}
+.expand-shrink:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .expand-shrink.expanded {
   justify-content: flex-end;
 }
 .expand-shrink.expanded limel-icon {
   transform: rotateY(180deg);
 }
-.expand-shrink:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused);
-}
 .expand-shrink limel-icon {
   width: calc(var(--dock-expand-shrink-button-height) - 0.25rem);
   color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));