scb-wc 0.1.75 → 0.1.76

package/scb-link/scb-link.js

@@ -1,10 +1,11 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
 import { ifDefined as o } from "lit/directives/if-defined.js";
 //#region src/scb-components/scb-link/scb-link.ts
-var s = class extends t {
+var s, c = () => {
+	customElements.get("md-focus-ring") || (s ??= import("@material/web/focus/md-focus-ring.js").then(() => void 0));
+}, l = class extends t {
 	constructor(...e) {
 		super(...e), this.href = "", this.disabled = !1, this.ariaLabel = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.#t = (e) => {
 			this.disabled && (e.preventDefault(), e.stopPropagation());
@@ -33,7 +34,10 @@ var s = class extends t {
       inset: 0;
       pointer-events: none;
       display: none;
-      border-radius: var(--scb-link-focus-ring-radius, var(--md-sys-shape-corner-small, 1px));
+      border-radius: var(
+        --scb-link-focus-ring-radius,
+        var(--md-sys-shape-corner-small, 1px)
+      );
     }
 
     a {
@@ -51,6 +55,9 @@ var s = class extends t {
     }
     a:hover { text-decoration-thickness: var(--scb-link-hover-thickness, 2px); }
     a:focus { outline: none; }
+    a:focus-visible + md-focus-ring {
+      display: block;
+    }
 
     :host([disabled]) a {
       pointer-events: none;
@@ -58,9 +65,6 @@ var s = class extends t {
       text-decoration: none;
       cursor: default;
     }
-    a:focus-visible + md-focus-ring {
-      display: block;
-    }
   `;
 	}
 	firstUpdated() {
@@ -89,10 +93,10 @@ var s = class extends t {
         download=${o(this.download)}
         aria-disabled=${this.disabled ? "true" : "false"}
         aria-label=${o(this.ariaLabel || void 0)}
+        @focusin=${c}
         @click=${this.#t}
       ><slot></slot></a>
-
-      <md-focus-ring></md-focus-ring>
+      <md-focus-ring aria-hidden="true"></md-focus-ring>
     `;
 	}
 	#t;
@@ -100,40 +104,40 @@ var s = class extends t {
 e([a({
 	type: String,
 	reflect: !0
-})], s.prototype, "href", void 0), e([a({
+})], l.prototype, "href", void 0), e([a({
 	type: String,
 	reflect: !0
-})], s.prototype, "target", void 0), e([a({
+})], l.prototype, "target", void 0), e([a({
 	type: String,
 	reflect: !0
-})], s.prototype, "rel", void 0), e([a({
+})], l.prototype, "rel", void 0), e([a({
 	type: String,
 	reflect: !0
-})], s.prototype, "download", void 0), e([a({
+})], l.prototype, "download", void 0), e([a({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "disabled", void 0), e([a({
+})], l.prototype, "disabled", void 0), e([a({
 	type: String,
 	attribute: "aria-label"
-})], s.prototype, "ariaLabel", void 0), e([a({
+})], l.prototype, "ariaLabel", void 0), e([a({
 	type: String,
 	reflect: !0
-})], s.prototype, "spacing", void 0), e([a({
+})], l.prototype, "spacing", void 0), e([a({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], s.prototype, "spacingTop", void 0), e([a({
+})], l.prototype, "spacingTop", void 0), e([a({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], s.prototype, "spacingBottom", void 0), e([a({
+})], l.prototype, "spacingBottom", void 0), e([a({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], s.prototype, "spacingLeft", void 0), e([a({
+})], l.prototype, "spacingLeft", void 0), e([a({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], s.prototype, "spacingRight", void 0), s = e([i("scb-link")], s);
+})], l.prototype, "spacingRight", void 0), l = e([i("scb-link")], l);
 //#endregion
-export { s as ScbLink };
+export { l as ScbLink };