@redvars/peacock 3.2.3 → 3.2.5

package/dist/custom-elements-jsdocs.json

@@ -966,7 +966,6 @@
           "type": {
             "text": "HTMLElement | null"
           },
-          "privacy": "private",
           "readonly": true,
           "inheritedFrom": {
             "name": "BaseButton",
@@ -2868,6 +2867,15 @@
           "attribute": "visible",
           "reflects": true
         },
+        {
+          "kind": "field",
+          "name": "element",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "attribute": "element"
+        },
         {
           "kind": "field",
           "name": "_control",
@@ -2879,6 +2887,18 @@
           "kind": "field",
           "name": "control"
         },
+        {
+          "kind": "method",
+          "name": "__focusin"
+        },
+        {
+          "kind": "method",
+          "name": "__focusout"
+        },
+        {
+          "kind": "method",
+          "name": "__pointerdown"
+        },
         {
           "kind": "method",
           "name": "attach"
@@ -2896,6 +2916,14 @@
           },
           "default": "false",
           "fieldName": "visible"
+        },
+        {
+          "name": "element",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "fieldName": "element"
         }
       ],
       "superclass": {
@@ -3502,7 +3530,6 @@
           "type": {
             "text": "HTMLElement | null"
           },
-          "privacy": "private",
           "readonly": true,
           "inheritedFrom": {
             "name": "BaseButton",

package/dist/custom-elements.json

@@ -852,6 +852,158 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "Controls the color of the badge.",
+              "name": "--badge-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value to display in the badge.",
+              "attribute": "value"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value to display in the badge.",
+              "fieldName": "value"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "base-badge",
+          "customElement": true,
+          "summary": "The badge component is used to display a small amount of information to the user.",
+          "rawTag": {
+            "name": "badge",
+            "description": ""
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/badge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "./badge.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/p-badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PBadge",
+          "superclass": {
+            "name": "Badge",
+            "module": "/src/badge/badge.js"
+          },
+          "tagName": "p-badge",
+          "customElement": true,
+          "cssProperties": [
+            {
+              "description": "Controls the color of the badge.",
+              "name": "--badge-color",
+              "inheritedFrom": {
+                "name": "Badge",
+                "module": "src/badge/badge.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value to display in the badge.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Badge",
+                "module": "src/badge/badge.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value to display in the badge.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "Badge",
+                "module": "src/badge/badge.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PBadge",
+          "declaration": {
+            "name": "PBadge",
+            "module": "src/badge/p-badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "p-badge",
+          "declaration": {
+            "name": "PBadge",
+            "module": "src/badge/p-badge.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/avatar/avatar.ts",
@@ -1092,158 +1244,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Badge",
-          "cssProperties": [
-            {
-              "description": "Controls the color of the badge.",
-              "name": "--badge-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The value to display in the badge.",
-              "attribute": "value"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The value to display in the badge.",
-              "fieldName": "value"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "base-badge",
-          "customElement": true,
-          "summary": "The badge component is used to display a small amount of information to the user.",
-          "rawTag": {
-            "name": "badge",
-            "description": ""
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/badge.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "./badge.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/p-badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PBadge",
-          "superclass": {
-            "name": "Badge",
-            "module": "/src/badge/badge.js"
-          },
-          "tagName": "p-badge",
-          "customElement": true,
-          "cssProperties": [
-            {
-              "description": "Controls the color of the badge.",
-              "name": "--badge-color",
-              "inheritedFrom": {
-                "name": "Badge",
-                "module": "src/badge/badge.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The value to display in the badge.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "Badge",
-                "module": "src/badge/badge.ts"
-              }
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The value to display in the badge.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "Badge",
-                "module": "src/badge/badge.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PBadge",
-          "declaration": {
-            "name": "PBadge",
-            "module": "src/badge/p-badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "p-badge",
-          "declaration": {
-            "name": "PBadge",
-            "module": "src/badge/p-badge.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/breadcrumb/index.ts",
@@ -1442,7 +1442,6 @@
               "type": {
                 "text": "HTMLElement | null"
               },
-              "privacy": "private",
               "readonly": true
             },
             {
@@ -3684,6 +3683,15 @@
               "attribute": "visible",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "element",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "element"
+            },
             {
               "kind": "field",
               "name": "_control",
@@ -3695,6 +3703,18 @@
               "kind": "field",
               "name": "control"
             },
+            {
+              "kind": "method",
+              "name": "__focusin"
+            },
+            {
+              "kind": "method",
+              "name": "__focusout"
+            },
+            {
+              "kind": "method",
+              "name": "__pointerdown"
+            },
             {
               "kind": "method",
               "name": "attach"
@@ -3712,6 +3732,14 @@
               },
               "default": "false",
               "fieldName": "visible"
+            },
+            {
+              "name": "element",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "element"
             }
           ],
           "superclass": {
@@ -8153,7 +8181,6 @@
               "type": {
                 "text": "HTMLElement | null"
               },
-              "privacy": "private",
               "readonly": true,
               "inheritedFrom": {
                 "name": "BaseButton",
@@ -8878,7 +8905,6 @@
               "type": {
                 "text": "HTMLElement | null"
               },
-              "privacy": "private",
               "readonly": true,
               "inheritedFrom": {
                 "name": "BaseButton",
@@ -9703,6 +9729,25 @@
               "default": "false",
               "attribute": "selected"
             },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Sets or retrieves the window or frame at which to target content.",
+              "attribute": "target"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -9725,6 +9770,31 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "__isLink"
+            },
+            {
+              "kind": "field",
+              "name": "menuItemElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus"
+            },
+            {
+              "kind": "method",
+              "name": "blur"
+            },
+            {
+              "kind": "method",
+              "name": "renderContent"
             }
           ],
           "attributes": [
@@ -9752,6 +9822,22 @@
               "default": "false",
               "fieldName": "selected"
             },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Sets or retrieves the window or frame at which to target content.",
+              "fieldName": "target"
+            },
             {
               "name": "variant",
               "type": {

package/dist/{erb-m-j2vBLm.js → erb-ChJ68mCV.js}

@@ -1,5 +1,5 @@
 import html from './html-CvRj4Gf8.js';
-import ruby from './ruby-w0WL1wp4.js';
+import ruby from './ruby-D6iviT7z.js';
 import './javascript-B-eMraLN.js';
 import './css-BirQihPv.js';
 import './haml-B9jY-Dmk.js';
@@ -27,4 +27,4 @@ lang
 ];
 
 export { erb as default };
-//# sourceMappingURL=erb-m-j2vBLm.js.map
+//# sourceMappingURL=erb-ChJ68mCV.js.map

package/dist/{erb-m-j2vBLm.js.map → erb-ChJ68mCV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"erb-m-j2vBLm.js","sources":["../node_modules/@shikijs/langs/dist/erb.mjs"],"sourcesContent":["import html from './html.mjs'\nimport ruby from './ruby.mjs'\n\nconst lang = Object.freeze(JSON.parse(\"{\\\"displayName\\\":\\\"ERB\\\",\\\"fileTypes\\\":[\\\"erb\\\",\\\"rhtml\\\",\\\"html.erb\\\"],\\\"injections\\\":{\\\"text.html.erb - (meta.embedded.block.erb | meta.embedded.line.erb | comment)\\\":{\\\"patterns\\\":[{\\\"begin\\\":\\\"^(\\\\\\\\s*)(?=<%+#(?![^%]*%>))\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.comment.leading.erb\\\"}},\\\"end\\\":\\\"(?!\\\\\\\\G)(\\\\\\\\s*$\\\\\\\\n)?\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.comment.trailing.erb\\\"}},\\\"patterns\\\":[{\\\"include\\\":\\\"#comment\\\"}]},{\\\"begin\\\":\\\"^(\\\\\\\\s*)(?=<%(?![^%]*%>))\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.embedded.leading.erb\\\"}},\\\"end\\\":\\\"(?!\\\\\\\\G)(\\\\\\\\s*$\\\\\\\\n)?\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.embedded.trailing.erb\\\"}},\\\"patterns\\\":[{\\\"include\\\":\\\"#tags\\\"}]},{\\\"include\\\":\\\"#comment\\\"},{\\\"include\\\":\\\"#tags\\\"}]}},\\\"name\\\":\\\"erb\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"text.html.basic\\\"}],\\\"repository\\\":{\\\"comment\\\":{\\\"patterns\\\":[{\\\"begin\\\":\\\"<%+#\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.comment.begin.erb\\\"}},\\\"end\\\":\\\"%>\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.comment.end.erb\\\"}},\\\"name\\\":\\\"comment.block.erb\\\"}]},\\\"tags\\\":{\\\"patterns\\\":[{\\\"begin\\\":\\\"<%+(?!>)[-=]?(?![^%]*%>)\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.begin.erb\\\"}},\\\"contentName\\\":\\\"source.ruby\\\",\\\"end\\\":\\\"(-?%)>\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.end.erb\\\"},\\\"1\\\":{\\\"name\\\":\\\"source.ruby\\\"}},\\\"name\\\":\\\"meta.embedded.block.erb\\\",\\\"patterns\\\":[{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.definition.comment.erb\\\"}},\\\"match\\\":\\\"(#).*?(?=-?%>)\\\",\\\"name\\\":\\\"comment.line.number-sign.erb\\\"},{\\\"include\\\":\\\"source.ruby\\\"}]},{\\\"begin\\\":\\\"<%+(?!>)[-=]?\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.begin.erb\\\"}},\\\"contentName\\\":\\\"source.ruby\\\",\\\"end\\\":\\\"(-?%)>\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.end.erb\\\"},\\\"1\\\":{\\\"name\\\":\\\"source.ruby\\\"}},\\\"name\\\":\\\"meta.embedded.line.erb\\\",\\\"patterns\\\":[{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.definition.comment.erb\\\"}},\\\"match\\\":\\\"(#).*?(?=-?%>)\\\",\\\"name\\\":\\\"comment.line.number-sign.erb\\\"},{\\\"include\\\":\\\"source.ruby\\\"}]}]}},\\\"scopeName\\\":\\\"text.html.erb\\\",\\\"embeddedLangs\\\":[\\\"html\\\",\\\"ruby\\\"]}\"))\n\nexport default [\n...html,\n...ruby,\nlang\n]\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,gtEAAgtE,CAAC;;AAEvvE,UAAe;AACf,GAAG,IAAI;AACP,GAAG,IAAI;AACP;AACA;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"erb-ChJ68mCV.js","sources":["../node_modules/@shikijs/langs/dist/erb.mjs"],"sourcesContent":["import html from './html.mjs'\nimport ruby from './ruby.mjs'\n\nconst lang = Object.freeze(JSON.parse(\"{\\\"displayName\\\":\\\"ERB\\\",\\\"fileTypes\\\":[\\\"erb\\\",\\\"rhtml\\\",\\\"html.erb\\\"],\\\"injections\\\":{\\\"text.html.erb - (meta.embedded.block.erb | meta.embedded.line.erb | comment)\\\":{\\\"patterns\\\":[{\\\"begin\\\":\\\"^(\\\\\\\\s*)(?=<%+#(?![^%]*%>))\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.comment.leading.erb\\\"}},\\\"end\\\":\\\"(?!\\\\\\\\G)(\\\\\\\\s*$\\\\\\\\n)?\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.comment.trailing.erb\\\"}},\\\"patterns\\\":[{\\\"include\\\":\\\"#comment\\\"}]},{\\\"begin\\\":\\\"^(\\\\\\\\s*)(?=<%(?![^%]*%>))\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.embedded.leading.erb\\\"}},\\\"end\\\":\\\"(?!\\\\\\\\G)(\\\\\\\\s*$\\\\\\\\n)?\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.whitespace.embedded.trailing.erb\\\"}},\\\"patterns\\\":[{\\\"include\\\":\\\"#tags\\\"}]},{\\\"include\\\":\\\"#comment\\\"},{\\\"include\\\":\\\"#tags\\\"}]}},\\\"name\\\":\\\"erb\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"text.html.basic\\\"}],\\\"repository\\\":{\\\"comment\\\":{\\\"patterns\\\":[{\\\"begin\\\":\\\"<%+#\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.comment.begin.erb\\\"}},\\\"end\\\":\\\"%>\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.comment.end.erb\\\"}},\\\"name\\\":\\\"comment.block.erb\\\"}]},\\\"tags\\\":{\\\"patterns\\\":[{\\\"begin\\\":\\\"<%+(?!>)[-=]?(?![^%]*%>)\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.begin.erb\\\"}},\\\"contentName\\\":\\\"source.ruby\\\",\\\"end\\\":\\\"(-?%)>\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.end.erb\\\"},\\\"1\\\":{\\\"name\\\":\\\"source.ruby\\\"}},\\\"name\\\":\\\"meta.embedded.block.erb\\\",\\\"patterns\\\":[{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.definition.comment.erb\\\"}},\\\"match\\\":\\\"(#).*?(?=-?%>)\\\",\\\"name\\\":\\\"comment.line.number-sign.erb\\\"},{\\\"include\\\":\\\"source.ruby\\\"}]},{\\\"begin\\\":\\\"<%+(?!>)[-=]?\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.begin.erb\\\"}},\\\"contentName\\\":\\\"source.ruby\\\",\\\"end\\\":\\\"(-?%)>\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.embedded.end.erb\\\"},\\\"1\\\":{\\\"name\\\":\\\"source.ruby\\\"}},\\\"name\\\":\\\"meta.embedded.line.erb\\\",\\\"patterns\\\":[{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.definition.comment.erb\\\"}},\\\"match\\\":\\\"(#).*?(?=-?%>)\\\",\\\"name\\\":\\\"comment.line.number-sign.erb\\\"},{\\\"include\\\":\\\"source.ruby\\\"}]}]}},\\\"scopeName\\\":\\\"text.html.erb\\\",\\\"embeddedLangs\\\":[\\\"html\\\",\\\"ruby\\\"]}\"))\n\nexport default [\n...html,\n...ruby,\nlang\n]\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,gtEAAgtE,CAAC;;AAEvvE,UAAe;AACf,GAAG,IAAI;AACP,GAAG,IAAI;AACP;AACA;;;;","x_google_ignoreList":[0]}

package/dist/focus-ring.js

@@ -37,6 +37,7 @@ class FocusRing extends i$1 {
     constructor() {
         super(...arguments);
         this.visible = false;
+        this.element = '';
     }
     render() {
         return A;
@@ -60,26 +61,37 @@ class FocusRing extends i$1 {
         this.detach();
         super.disconnectedCallback();
     }
+    __focusin() {
+        // @ts-ignore
+        this.visible = this._control[this.element].matches(':focus-visible') ?? false;
+    }
+    __focusout() {
+        this.visible = false;
+    }
+    __pointerdown() {
+        this.visible = false;
+    }
     attach() {
-        // @ts-ignore - buttonElement is not defined on the base class
-        this._control?.buttonElement?.addEventListener('focusin', () => {
-            this.visible =
-                // @ts-ignore - buttonElement is not defined on the base class
-                this._control?.buttonElement?.matches(':focus-visible') ?? false;
-        });
-        // @ts-ignore - buttonElement is not defined on the base class
-        this._control?.buttonElement?.addEventListener('focusout', () => {
-            this.visible = false;
-        });
-        // @ts-ignore - buttonElement is not defined on the base class
-        this._control?.buttonElement?.addEventListener('pointerdown', () => {
-            this.visible = false;
-        });
+        // @ts-ignore
+        if (this._control && this._control[this.element]) {
+            // @ts-ignore
+            this._control[this.element].addEventListener('focusin', this.__focusin.bind(this));
+            // @ts-ignore
+            this._control[this.element].addEventListener('focusout', this.__focusin.bind(this));
+            // @ts-ignore
+            this._control[this.element].addEventListener('pointerdown', this.__focusin.bind(this));
+        }
     }
     detach() {
-        this._control?.removeEventListener('focusin', () => { });
-        this._control?.removeEventListener('focusout', () => { });
-        this._control?.removeEventListener('pointerdown', () => { });
+        // @ts-ignore
+        if (this._control && this._control[this.element]) {
+            // @ts-ignore
+            this._control[this.element].removeEventListener('focusin', this.__focusin);
+            // @ts-ignore
+            this._control[this.element].removeEventListener('focusout', this.__focusout);
+            // @ts-ignore
+            this._control[this.element].removeEventListener('pointerdown', this.__pointerdown);
+        }
         this._control = undefined;
     }
 }
@@ -87,6 +99,9 @@ FocusRing.styles = [css_248z];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
+__decorate([
+    n({ type: String })
+], FocusRing.prototype, "element", void 0);
 
 export { FocusRing };
 //# sourceMappingURL=focus-ring.js.map

package/dist/focus-ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-ring.js","sources":["../../src/focus-ring/focus-ring.ts"],"sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './focus-ring.scss';\n\n/**\n * @label Focus Ring\n *\n * @tag focus-ring\n * @rawTag focus-ring\n *\n * @summary Adds a focus ring to an element.\n *\n *\n * @tags display\n */\nexport class FocusRing extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) visible: boolean = false;\n\n  render() {\n    return nothing;\n  }\n\n  _control?: HTMLElement;\n\n  get control() {\n    return this._control || null;\n  }\n\n  set control(control: HTMLElement | null) {\n    if (control) {\n      this._control = control;\n    } else {\n      this.detach();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.attach();\n  }\n\n  disconnectedCallback() {\n    this.detach();\n    super.disconnectedCallback();\n  }\n\n  attach() {\n    // @ts-ignore - buttonElement is not defined on the base class\n    this._control?.buttonElement?.addEventListener('focusin', () => {\n      this.visible =\n        // @ts-ignore - buttonElement is not defined on the base class\n        this._control?.buttonElement?.matches(':focus-visible') ?? false;\n    });\n    // @ts-ignore - buttonElement is not defined on the base class\n    this._control?.buttonElement?.addEventListener('focusout', () => {\n      this.visible = false;\n    });\n    // @ts-ignore - buttonElement is not defined on the base class\n    this._control?.buttonElement?.addEventListener('pointerdown', () => {\n      this.visible = false;\n    });\n  }\n\n  detach() {\n    this._control?.removeEventListener('focusin', () => {});\n    this._control?.removeEventListener('focusout', () => {});\n    this._control?.removeEventListener('pointerdown', () => {});\n    this._control = undefined;\n  }\n}\n"],"names":["LitElement","nothing","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;AAUG;AACG,MAAO,SAAU,SAAQA,GAAU,CAAA;AAAzC,IAAA,WAAA,GAAA;;QAG8C,IAAA,CAAA,OAAO,GAAY,KAAK;IAqDtE;IAnDE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAO;IAChB;AAIA,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI;IAC9B;IAEA,IAAI,OAAO,CAAC,OAA2B,EAAA;QACrC,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,QAAQ,GAAG,OAAO;QACzB;aAAO;YACL,IAAI,CAAC,MAAM,EAAE;QACf;IACF;IAEA,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,MAAM,EAAE;IACf;IAEA,oBAAoB,GAAA;QAClB,IAAI,CAAC,MAAM,EAAE;QACb,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAEA,MAAM,GAAA;;QAEJ,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,gBAAgB,CAAC,SAAS,EAAE,MAAK;AAC7D,YAAA,IAAI,CAAC,OAAO;;gBAEV,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,OAAO,CAAC,gBAAgB,CAAC,IAAI,KAAK;AACpE,QAAA,CAAC,CAAC;;QAEF,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,gBAAgB,CAAC,UAAU,EAAE,MAAK;AAC9D,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACtB,QAAA,CAAC,CAAC;;QAEF,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,gBAAgB,CAAC,aAAa,EAAE,MAAK;AACjE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACtB,QAAA,CAAC,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,SAAS,EAAE,MAAK,EAAE,CAAC,CAAC;AACvD,QAAA,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,UAAU,EAAE,MAAK,EAAE,CAAC,CAAC;AACxD,QAAA,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,aAAa,EAAE,MAAK,EAAE,CAAC,CAAC;AAC3D,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;;AAtDO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAA2B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;;;;"}
+{"version":3,"file":"focus-ring.js","sources":["../../src/focus-ring/focus-ring.ts"],"sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './focus-ring.scss';\n\n/**\n * @label Focus Ring\n *\n * @tag focus-ring\n * @rawTag focus-ring\n *\n * @summary Adds a focus ring to an element.\n *\n *\n * @tags display\n */\nexport class FocusRing extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) visible: boolean = false;\n\n  @property({ type: String}) element = '';\n\n\n  render() {\n    return nothing;\n  }\n\n  _control?: HTMLElement;\n\n  get control() {\n    return this._control || null;\n  }\n\n  set control(control: HTMLElement | null) {\n    if (control) {\n      this._control = control;\n    } else {\n      this.detach();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.attach();\n  }\n\n  disconnectedCallback() {\n    this.detach();\n    super.disconnectedCallback();\n  }\n\n  __focusin() {\n    // @ts-ignore\n    this.visible = this._control[this.element].matches(':focus-visible') ?? false;\n  }\n\n  __focusout() {\n    this.visible = false;\n  }\n\n  __pointerdown() {\n    this.visible = false;\n  }\n\n  attach() {\n    // @ts-ignore\n    if (this._control && this._control[this.element]) {\n      // @ts-ignore\n      this._control[this.element].addEventListener('focusin', this.__focusin.bind(this));\n      // @ts-ignore\n      this._control[this.element].addEventListener('focusout', this.__focusin.bind(this));\n      // @ts-ignore\n      this._control[this.element].addEventListener('pointerdown', this.__focusin.bind(this));\n    }\n  }\n\n  detach() {\n    // @ts-ignore\n    if (this._control && this._control[this.element]) {\n      // @ts-ignore\n      this._control[this.element].removeEventListener('focusin', this.__focusin);\n      // @ts-ignore\n      this._control[this.element].removeEventListener('focusout', this.__focusout);\n      // @ts-ignore\n      this._control[this.element].removeEventListener('pointerdown', this.__pointerdown);\n    }\n    this._control = undefined;\n  }\n}\n"],"names":["LitElement","nothing","styles","property"],"mappings":"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"}