feat(blockquote-directive-svg-to-data-image): lit3

packages/directives/blockquote-directive-svg-to-data-image/README.md

@@ -1,6 +1,6 @@
 # blockquoteDirectiveSvgToDataImage
 
-![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
+![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
 
 This directive receives an `<svg>` HTML element from a [Template Result](https://lit.dev/docs/api/templates/#TemplateResult)
 and returns it as data URI (data:image/svg+xml).

packages/directives/blockquote-directive-svg-to-data-image/custom-elements.json

@@ -8,7 +8,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "# blockquoteDirectiveSvgToDataImage\n\n![Lit](https://img.shields.io/badge/lit-2.0.0-blue)\n\nThis directive receives an `<svg>` HTML element from a [Template Result](https://lit.dev/docs/api/templates/#TemplateResult)\nand returns it as data URI (data:image/svg+xml).\n\n> [svg-templates](https://lit.dev/tutorials/svg-templates/#1)\n\n## Usage:\n\n### Simple SVG\n\n```js\nget _svgTag() {\n  return html` <svg\n    xmlns=\"htt://www.w3.org/2000/svg\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 100 100\"\n    xml:space=\"preserve\"\n    height=\"100px\"\n    width=\"100px\"\n  >\n    <!-- ... (SVG content) ... -->\n  </svg>`;\n}\n\nrender() {\n  return html`\n    <div\n      aria-hidden=\"true\"\n      style=\"background-image: url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}');\"\n    ></div>\n  `;\n}\n```\n\n### Complex SVG\n\n```js\nget _bgTpl() {\n  return svg` <circle fill=\"${this.bgFill}\" cx=\"100\" cy=\"100\" r=\"100\"></circle> `;\n}\n\nget _shapeTpl() {\n  return svg`\n    <g fill=\"#fff\">\n      <!-- ... (SVG content) ... -->\n    </g>\n  `;\n}\n\nget _svgTag() {\n  return html`<svg\n    id=\"${Math.random().toString(36).substring(2, 10)}\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"200\"\n    height=\"200\"\n    focusable=\"false\"\n    role=\"presentation\"\n    viewBox=\"0 0 200 200\"\n  >\n    ${this._bgTpl} ${this._shapeTpl}\n  </svg>`;\n}\n\nrender() {\n  return html`\n    <div\n      aria-hidden=\"true\"\n      style=\"background-image:var(--bgUrl, url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}'));\"\n    ></div>\n  `;\n}\n```",
+          "description": "# blockquoteDirectiveSvgToDataImage\n\n![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)\n\nThis directive receives an `<svg>` HTML element from a [Template Result](https://lit.dev/docs/api/templates/#TemplateResult)\nand returns it as data URI (data:image/svg+xml).\n\n> [svg-templates](https://lit.dev/tutorials/svg-templates/#1)\n\n## Usage:\n\n### Simple SVG\n\n```js\nget _svgTag() {\n  return html` <svg\n    xmlns=\"htt://www.w3.org/2000/svg\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 100 100\"\n    xml:space=\"preserve\"\n    height=\"100px\"\n    width=\"100px\"\n  >\n    <!-- ... (SVG content) ... -->\n  </svg>`;\n}\n\nrender() {\n  return html`\n    <div\n      aria-hidden=\"true\"\n      style=\"background-image: url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}');\"\n    ></div>\n  `;\n}\n```\n\n### Complex SVG\n\n```js\nget _bgTpl() {\n  return svg` <circle fill=\"${this.bgFill}\" cx=\"100\" cy=\"100\" r=\"100\"></circle> `;\n}\n\nget _shapeTpl() {\n  return svg`\n    <g fill=\"#fff\">\n      <!-- ... (SVG content) ... -->\n    </g>\n  `;\n}\n\nget _svgTag() {\n  return html`<svg\n    id=\"${Math.random().toString(36).substring(2, 10)}\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"200\"\n    height=\"200\"\n    focusable=\"false\"\n    role=\"presentation\"\n    viewBox=\"0 0 200 200\"\n  >\n    ${this._bgTpl} ${this._shapeTpl}\n  </svg>`;\n}\n\nrender() {\n  return html`\n    <div\n      aria-hidden=\"true\"\n      style=\"background-image:var(--bgUrl, url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}'));\"\n    ></div>\n  `;\n}\n```",
           "name": "README",
           "superclass": {
             "name": "Text",

packages/directives/blockquote-directive-svg-to-data-image/package.json

@@ -131,6 +131,7 @@
       ],
       "import/no-unresolved": "off",
       "import/prefer-default-export": "off",
+      "lit/no-classfield-shadowing": "off",
       "lit/no-native-attributes": "off"
     }
   },
@@ -145,7 +146,7 @@
     }
   },
   "dependencies": {
-    "lit": "^2.8.0"
+    "lit": "^3.1.0"
   },
   "devDependencies": {
     "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.5.0",

packages/directives/blockquote-directive-svg-to-data-image/src/BlockquoteDirectiveSvgToDataImage.js

@@ -6,7 +6,7 @@ import { noChange } from 'lit';
 /**
  * # blockquoteDirectiveSvgToDataImage
  *
- * ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
  *
  * This directive receives an `<svg>` HTML element from a [Template Result](https://lit.dev/docs/api/templates/#TemplateResult)
  * and returns it as data URI (data:image/svg+xml).