@vaadin/icon 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -27,7 +27,7 @@ import '@vaadin/icon';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/icon/vaadin-icon.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -50,7 +50,7 @@ import '@vaadin/icon/src/vaadin-icon.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -33,13 +35,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70",
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

package/src/vaadin-icon-svg.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { nothing, SVGTemplateResult } from 'lit';
+import type { nothing, SVGTemplateResult } from 'lit';
 
 export type IconSvgLiteral = SVGTemplateResult | typeof nothing;
 

package/src/vaadin-icon-svg.js

@@ -17,7 +17,7 @@ export function cloneSvgNode(source) {
   if (source) {
     const content = source.cloneNode(true);
     content.removeAttribute('id');
-    result = svg`${unsafeSVG(content.innerHTML)}`;
+    result = svg`${unsafeSVG(content.outerHTML)}`;
   }
 
   return result;

package/src/vaadin-icon.d.ts

@@ -3,9 +3,10 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { IconSvgLiteral } from './vaadin-icon-svg.js';
+import type { IconSvgLiteral } from './vaadin-icon-svg.js';
 
 /**
  * `<vaadin-icon>` is a Web Component for displaying SVG icons.
@@ -46,7 +47,7 @@ import { IconSvgLiteral } from './vaadin-icon-svg.js';
  * }
  * ```
  */
-declare class Icon extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))) {
   /**
    * The name of the icon to use. The name should be of the form:
    * `iconset_name:icon_name`. When using `vaadin-icons` it is possible

package/src/vaadin-icon.js

@@ -4,7 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ensureSvgLiteral, renderSvg } from './vaadin-icon-svg.js';
 import { Iconset } from './vaadin-iconset.js';
@@ -51,10 +53,11 @@ const DEFAULT_ICONSET = 'vaadin';
  * ```
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
+class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -87,6 +90,8 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
         preserveAspectRatio="xMidYMid meet"
         aria-hidden="true"
       ></svg>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -147,6 +152,9 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
   ready() {
     super.ready();
     this.__svgElement = this.shadowRoot.querySelector('svg');
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
   }
 
   /** @private */

package/src/vaadin-iconset.d.ts

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { IconSvgLiteral } from './vaadin-icon-svg.js';
+import type { IconSvgLiteral } from './vaadin-icon-svg.js';
 
 /**
  * `<vaadin-iconset>` is a Web Component for creating SVG icon collections.

package/web-types.json

@@ -0,0 +1,155 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/icon",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-iconset",
+          "description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "size",
+              "description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "size",
+                "description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vaadin-icon",
+          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
+          "attributes": [
+            {
+              "name": "icon",
+              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "size",
+              "description": "The size of an icon, used to set the `viewBox` attribute.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "icon",
+                "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "svg",
+                "description": "The SVG icon wrapped in a Lit template literal.",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "size",
+                "description": "The size of an icon, used to set the `viewBox` attribute.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/icon",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-iconset",
+          "description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": ".name",
+              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".size",
+              "description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "name": "vaadin-icon",
+          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
+          "extension": true,
+          "attributes": [
+            {
+              "name": ".icon",
+              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".svg",
+              "description": "The SVG icon wrapped in a Lit template literal.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".size",
+              "description": "The size of an icon, used to set the `viewBox` attribute.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}