@vaadin/popover 24.5.0-alpha1 → 24.5.0-alpha11

package/theme/material/vaadin-popover-styles.js

@@ -1,17 +1,108 @@
+import '@vaadin/vaadin-material-styles/color.js';
 import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const popoverOverlay = css`
   :host {
-    --vaadin-popover-offset-top: 0.25rem;
-    --vaadin-popover-offset-bottom: 0.25rem;
-    --vaadin-popover-offset-start: 0.25rem;
-    --vaadin-popover-offset-end: 0.25rem;
+    --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-arrow-size: 0.5rem;
+    --_vaadin-popover-default-offset: 0.25rem;
+  }
+
+  [part='overlay'] {
+    outline: none;
   }
 
   [part='content'] {
     padding: 0.25rem 0.5rem;
   }
+
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+
+  :host([theme~='arrow']) {
+    --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25);
+  }
+
+  /* top / bottom position */
+  :host([theme~='arrow'][position^='top']) [part='arrow'],
+  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
+    border-left: var(--vaadin-popover-arrow-size) solid transparent;
+    border-right: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
+    bottom: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-top: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
+    top: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-bottom: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
+    transform: translateX(50%);
+    inset-inline-end: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 50%;
+  }
+
+  /* start / end position */
+  :host([theme~='arrow'][position^='start']) [part='arrow'],
+  :host([theme~='arrow'][position^='end']) [part='arrow'] {
+    border-top: var(--vaadin-popover-arrow-size) solid transparent;
+    border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
+    inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-right: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
+    inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-left: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
+    top: 0.5rem;
+  }
+
+  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
+    bottom: 0.5rem;
+  }
 `;
 
 registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'material-popover-overlay' });

package/web-types.json

@@ -1,15 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-popover",
-          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.",
+          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha11/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
@@ -54,6 +65,17 @@
                 ]
               }
             },
+            {
+              "name": "autofocus",
+              "description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "content-height",
               "description": "Height to be set on the overlay content.",
@@ -78,7 +100,7 @@
             },
             {
               "name": "focus-delay",
-              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "type": [
                   "number",
@@ -89,7 +111,7 @@
             },
             {
               "name": "hide-delay",
-              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "type": [
                   "number",
@@ -100,7 +122,7 @@
             },
             {
               "name": "hover-delay",
-              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "type": [
                   "number",
@@ -189,6 +211,17 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "position",
                 "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
@@ -244,6 +277,17 @@
                   ]
                 }
               },
+              {
+                "name": "autofocus",
+                "description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "contentHeight",
                 "description": "Height to be set on the overlay content.",
@@ -268,7 +312,7 @@
               },
               {
                 "name": "focusDelay",
-                "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+                "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
                   "type": [
                     "number",
@@ -279,7 +323,7 @@
               },
               {
                 "name": "hideDelay",
-                "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+                "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
                   "type": [
                     "number",
@@ -290,7 +334,7 @@
               },
               {
                 "name": "hoverDelay",
-                "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+                "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
                   "type": [
                     "number",
@@ -389,6 +433,10 @@
               }
             ],
             "events": [
+              {
+                "name": "closed",
+                "description": "Fired when the popover is closed."
+              },
               {
                 "name": "opened-changed",
                 "description": "Fired when the `opened` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,9 +16,16 @@
       "elements": [
         {
           "name": "vaadin-popover",
-          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.",
+          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha11/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?autofocus",
+              "description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?opened",
               "description": "True if the popover overlay is opened, false otherwise.",
@@ -54,6 +61,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
@@ -105,21 +119,21 @@
             },
             {
               "name": ".focusDelay",
-              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".hideDelay",
-              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".hoverDelay",
-              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "kind": "expression"
               }
@@ -145,6 +159,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@closed",
+              "description": "Fired when the popover is closed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@opened-changed",
               "description": "Fired when the `opened` property changes.",