dictate-button 1.1.2 → 1.2.0

package/README.md

@@ -15,6 +15,7 @@ Developed for [dictate-button.io](https://dictate-button.io).
 - Dark and light theme support
 - Event-based API for interaction with your application
 - Built with SolidJS for optimal performance
+- Accessibility is ensured with ARIA attributes, high-contrast mode support, and clear keyboard focus states
 
 ## Supported tags (by our inject scripts)
 

package/dist/dictate-button.js

@@ -1,49 +1,49 @@
-const pt = (t, e) => t === e, B = {
-  equals: pt
+const wt = (t, e) => t === e, B = {
+  equals: wt
 };
-let gt = lt;
-const C = 1, R = 2, et = {
+let vt = ht;
+const S = 1, R = 2, lt = {
   owned: null,
   cleanups: null,
   context: null,
   owner: null
 };
-var b = null;
-let z = null, bt = null, p = null, g = null, w = null, L = 0;
-function yt(t, e) {
-  const n = p, s = b, r = t.length === 0, o = e === void 0 ? s : e, l = r ? et : {
+var _ = null;
+let V = null, Ct = null, p = null, g = null, m = null, L = 0;
+function mt(t, e) {
+  const n = p, o = _, r = t.length === 0, i = e === void 0 ? o : e, l = r ? lt : {
     owned: null,
     cleanups: null,
-    context: o ? o.context : null,
-    owner: o
-  }, i = r ? t : () => t(() => G(() => E(l)));
-  b = l, p = null;
+    context: i ? i.context : null,
+    owner: i
+  }, s = r ? t : () => t(() => W(() => $(l)));
+  _ = l, p = null;
   try {
-    return x(i, !0);
+    return T(s, !0);
   } finally {
-    p = n, b = s;
+    p = n, _ = o;
   }
 }
-function nt(t, e) {
+function at(t, e) {
   e = e ? Object.assign({}, B, e) : B;
   const n = {
     value: t,
     observers: null,
     observerSlots: null,
     comparator: e.equals || void 0
-  }, s = (r) => (typeof r == "function" && (r = r(n.value)), st(n, r));
-  return [rt.bind(n), s];
+  }, o = (r) => (typeof r == "function" && (r = r(n.value)), ut(n, r));
+  return [ct.bind(n), o];
 }
 function I(t, e, n) {
-  const s = ot(t, e, !1, C);
-  K(s);
+  const o = dt(t, e, !1, S);
+  K(o);
 }
-function _t(t, e, n) {
+function St(t, e, n) {
   n = n ? Object.assign({}, B, n) : B;
-  const s = ot(t, e, !0, 0);
-  return s.observers = null, s.observerSlots = null, s.comparator = n.equals || void 0, K(s), rt.bind(s);
+  const o = dt(t, e, !0, 0);
+  return o.observers = null, o.observerSlots = null, o.comparator = n.equals || void 0, K(o), ct.bind(o);
 }
-function G(t) {
+function W(t) {
   if (p === null) return t();
   const e = p;
   p = null;
@@ -53,12 +53,12 @@ function G(t) {
     p = e;
   }
 }
-function rt() {
+function ct() {
   if (this.sources && this.state)
-    if (this.state === C) K(this);
+    if (this.state === S) K(this);
     else {
       const t = g;
-      g = null, x(() => D(this), !1), g = t;
+      g = null, T(() => D(this), !1), g = t;
     }
   if (p) {
     const t = this.observers ? this.observers.length : 0;
@@ -66,12 +66,12 @@ function rt() {
   }
   return this.value;
 }
-function st(t, e, n) {
-  let s = t.value;
-  return (!t.comparator || !t.comparator(s, e)) && (t.value = e, t.observers && t.observers.length && x(() => {
+function ut(t, e, n) {
+  let o = t.value;
+  return (!t.comparator || !t.comparator(o, e)) && (t.value = e, t.observers && t.observers.length && T(() => {
     for (let r = 0; r < t.observers.length; r += 1) {
-      const o = t.observers[r], l = z && z.running;
-      l && z.disposed.has(o), (l ? !o.tState : !o.state) && (o.pure ? g.push(o) : w.push(o), o.observers && at(o)), l || (o.state = C);
+      const i = t.observers[r], l = V && V.running;
+      l && V.disposed.has(i), (l ? !i.tState : !i.state) && (i.pure ? g.push(i) : m.push(i), i.observers && pt(i)), l || (i.state = S);
     }
     if (g.length > 1e6)
       throw g = [], new Error();
@@ -79,105 +79,105 @@ function st(t, e, n) {
 }
 function K(t) {
   if (!t.fn) return;
-  E(t);
+  $(t);
   const e = L;
-  wt(t, t.value, e);
+  xt(t, t.value, e);
 }
-function wt(t, e, n) {
-  let s;
-  const r = b, o = p;
-  p = b = t;
+function xt(t, e, n) {
+  let o;
+  const r = _, i = p;
+  p = _ = t;
   try {
-    s = t.fn(e);
+    o = t.fn(e);
   } catch (l) {
-    return t.pure && (t.state = C, t.owned && t.owned.forEach(E), t.owned = null), t.updatedAt = n + 1, ct(l);
+    return t.pure && (t.state = S, t.owned && t.owned.forEach($), t.owned = null), t.updatedAt = n + 1, gt(l);
   } finally {
-    p = o, b = r;
+    p = i, _ = r;
   }
-  (!t.updatedAt || t.updatedAt <= n) && (t.updatedAt != null && "observers" in t ? st(t, s) : t.value = s, t.updatedAt = n);
+  (!t.updatedAt || t.updatedAt <= n) && (t.updatedAt != null && "observers" in t ? ut(t, o) : t.value = o, t.updatedAt = n);
 }
-function ot(t, e, n, s = C, r) {
-  const o = {
+function dt(t, e, n, o = S, r) {
+  const i = {
     fn: t,
-    state: s,
+    state: o,
     updatedAt: null,
     owned: null,
     sources: null,
     sourceSlots: null,
     cleanups: null,
     value: e,
-    owner: b,
-    context: b ? b.context : null,
+    owner: _,
+    context: _ ? _.context : null,
     pure: n
   };
-  return b === null || b !== et && (b.owned ? b.owned.push(o) : b.owned = [o]), o;
+  return _ === null || _ !== lt && (_.owned ? _.owned.push(i) : _.owned = [i]), i;
 }
-function it(t) {
+function ft(t) {
   if (t.state === 0) return;
   if (t.state === R) return D(t);
-  if (t.suspense && G(t.suspense.inFallback)) return t.suspense.effects.push(t);
+  if (t.suspense && W(t.suspense.inFallback)) return t.suspense.effects.push(t);
   const e = [t];
   for (; (t = t.owner) && (!t.updatedAt || t.updatedAt < L); )
     t.state && e.push(t);
   for (let n = e.length - 1; n >= 0; n--)
-    if (t = e[n], t.state === C)
+    if (t = e[n], t.state === S)
       K(t);
     else if (t.state === R) {
-      const s = g;
-      g = null, x(() => D(t, e[0]), !1), g = s;
+      const o = g;
+      g = null, T(() => D(t, e[0]), !1), g = o;
     }
 }
-function x(t, e) {
+function T(t, e) {
   if (g) return t();
   let n = !1;
-  e || (g = []), w ? n = !0 : w = [], L++;
+  e || (g = []), m ? n = !0 : m = [], L++;
   try {
-    const s = t();
-    return Ct(n), s;
-  } catch (s) {
-    n || (w = null), g = null, ct(s);
+    const o = t();
+    return At(n), o;
+  } catch (o) {
+    n || (m = null), g = null, gt(o);
   }
 }
-function Ct(t) {
-  if (g && (lt(g), g = null), t) return;
-  const e = w;
-  w = null, e.length && x(() => gt(e), !1);
+function At(t) {
+  if (g && (ht(g), g = null), t) return;
+  const e = m;
+  m = null, e.length && T(() => vt(e), !1);
 }
-function lt(t) {
-  for (let e = 0; e < t.length; e++) it(t[e]);
+function ht(t) {
+  for (let e = 0; e < t.length; e++) ft(t[e]);
 }
 function D(t, e) {
   t.state = 0;
   for (let n = 0; n < t.sources.length; n += 1) {
-    const s = t.sources[n];
-    if (s.sources) {
-      const r = s.state;
-      r === C ? s !== e && (!s.updatedAt || s.updatedAt < L) && it(s) : r === R && D(s, e);
+    const o = t.sources[n];
+    if (o.sources) {
+      const r = o.state;
+      r === S ? o !== e && (!o.updatedAt || o.updatedAt < L) && ft(o) : r === R && D(o, e);
     }
   }
 }
-function at(t) {
+function pt(t) {
   for (let e = 0; e < t.observers.length; e += 1) {
     const n = t.observers[e];
-    n.state || (n.state = R, n.pure ? g.push(n) : w.push(n), n.observers && at(n));
+    n.state || (n.state = R, n.pure ? g.push(n) : m.push(n), n.observers && pt(n));
   }
 }
-function E(t) {
+function $(t) {
   let e;
   if (t.sources)
     for (; t.sources.length; ) {
-      const n = t.sources.pop(), s = t.sourceSlots.pop(), r = n.observers;
+      const n = t.sources.pop(), o = t.sourceSlots.pop(), r = n.observers;
       if (r && r.length) {
-        const o = r.pop(), l = n.observerSlots.pop();
-        s < r.length && (o.sourceSlots[l] = s, r[s] = o, n.observerSlots[s] = l);
+        const i = r.pop(), l = n.observerSlots.pop();
+        o < r.length && (i.sourceSlots[l] = o, r[o] = i, n.observerSlots[o] = l);
       }
     }
   if (t.tOwned) {
-    for (e = t.tOwned.length - 1; e >= 0; e--) E(t.tOwned[e]);
+    for (e = t.tOwned.length - 1; e >= 0; e--) $(t.tOwned[e]);
     delete t.tOwned;
   }
   if (t.owned) {
-    for (e = t.owned.length - 1; e >= 0; e--) E(t.owned[e]);
+    for (e = t.owned.length - 1; e >= 0; e--) $(t.owned[e]);
     t.owned = null;
   }
   if (t.cleanups) {
@@ -186,95 +186,95 @@ function E(t) {
   }
   t.state = 0;
 }
-function St(t) {
+function Et(t) {
   return t instanceof Error ? t : new Error(typeof t == "string" ? t : "Unknown error", {
     cause: t
   });
 }
-function ct(t, e = b) {
-  throw St(t);
+function gt(t, e = _) {
+  throw Et(t);
 }
-function M(t, e) {
-  return G(() => t(e || {}));
+function N(t, e) {
+  return W(() => t(e || {}));
 }
-const N = (t) => _t(() => t());
-function mt(t, e, n) {
-  let s = n.length, r = e.length, o = s, l = 0, i = 0, a = e[r - 1].nextSibling, u = null;
-  for (; l < r || i < o; ) {
-    if (e[l] === n[i]) {
-      l++, i++;
+const j = (t) => St(() => t());
+function kt(t, e, n) {
+  let o = n.length, r = e.length, i = o, l = 0, s = 0, a = e[r - 1].nextSibling, u = null;
+  for (; l < r || s < i; ) {
+    if (e[l] === n[s]) {
+      l++, s++;
       continue;
     }
-    for (; e[r - 1] === n[o - 1]; )
-      r--, o--;
+    for (; e[r - 1] === n[i - 1]; )
+      r--, i--;
     if (r === l) {
-      const f = o < s ? i ? n[i - 1].nextSibling : n[o - i] : a;
-      for (; i < o; ) t.insertBefore(n[i++], f);
-    } else if (o === i)
+      const d = i < o ? s ? n[s - 1].nextSibling : n[i - s] : a;
+      for (; s < i; ) t.insertBefore(n[s++], d);
+    } else if (i === s)
       for (; l < r; )
         (!u || !u.has(e[l])) && e[l].remove(), l++;
-    else if (e[l] === n[o - 1] && n[i] === e[r - 1]) {
-      const f = e[--r].nextSibling;
-      t.insertBefore(n[i++], e[l++].nextSibling), t.insertBefore(n[--o], f), e[r] = n[o];
+    else if (e[l] === n[i - 1] && n[s] === e[r - 1]) {
+      const d = e[--r].nextSibling;
+      t.insertBefore(n[s++], e[l++].nextSibling), t.insertBefore(n[--i], d), e[r] = n[i];
     } else {
       if (!u) {
         u = /* @__PURE__ */ new Map();
-        let _ = i;
-        for (; _ < o; ) u.set(n[_], _++);
+        let w = s;
+        for (; w < i; ) u.set(n[w], w++);
       }
-      const f = u.get(e[l]);
-      if (f != null)
-        if (i < f && f < o) {
-          let _ = l, v = 1, T;
-          for (; ++_ < r && _ < o && !((T = u.get(e[_])) == null || T !== f + v); )
-            v++;
-          if (v > f - i) {
-            const $ = e[l];
-            for (; i < f; ) t.insertBefore(n[i++], $);
-          } else t.replaceChild(n[i++], e[l++]);
+      const d = u.get(e[l]);
+      if (d != null)
+        if (s < d && d < i) {
+          let w = l, E = 1, P;
+          for (; ++w < r && w < i && !((P = u.get(e[w])) == null || P !== d + E); )
+            E++;
+          if (E > d - s) {
+            const M = e[l];
+            for (; s < d; ) t.insertBefore(n[s++], M);
+          } else t.replaceChild(n[s++], e[l++]);
         } else l++;
       else e[l++].remove();
     }
   }
 }
-const J = "_$DX_DELEGATE";
-function k(t, e, n, s) {
+const et = "_$DX_DELEGATE";
+function O(t, e, n, o) {
   let r;
-  const o = () => {
-    const i = document.createElement("template");
-    return i.innerHTML = t, i.content.firstChild;
-  }, l = () => (r || (r = o())).cloneNode(!0);
+  const i = () => {
+    const s = document.createElement("template");
+    return s.innerHTML = t, s.content.firstChild;
+  }, l = () => (r || (r = i())).cloneNode(!0);
   return l.cloneNode = l, l;
 }
-function At(t, e = window.document) {
-  const n = e[J] || (e[J] = /* @__PURE__ */ new Set());
-  for (let s = 0, r = t.length; s < r; s++) {
-    const o = t[s];
-    n.has(o) || (n.add(o), e.addEventListener(o, Et));
+function $t(t, e = window.document) {
+  const n = e[et] || (e[et] = /* @__PURE__ */ new Set());
+  for (let o = 0, r = t.length; o < r; o++) {
+    const i = t[o];
+    n.has(i) || (n.add(i), e.addEventListener(i, Ot));
   }
 }
-function ut(t, e, n) {
+function k(t, e, n) {
   n == null ? t.removeAttribute(e) : t.setAttribute(e, n);
 }
-function vt(t, e, n) {
-  if (!e) return n ? ut(t, "style") : e;
-  const s = t.style;
-  if (typeof e == "string") return s.cssText = e;
-  typeof n == "string" && (s.cssText = n = void 0), n || (n = {}), e || (e = {});
-  let r, o;
-  for (o in n)
-    e[o] == null && s.removeProperty(o), delete n[o];
-  for (o in e)
-    r = e[o], r !== n[o] && (s.setProperty(o, r), n[o] = r);
+function Tt(t, e, n) {
+  if (!e) return n ? k(t, "style") : e;
+  const o = t.style;
+  if (typeof e == "string") return o.cssText = e;
+  typeof n == "string" && (o.cssText = n = void 0), n || (n = {}), e || (e = {});
+  let r, i;
+  for (i in n)
+    e[i] == null && o.removeProperty(i), delete n[i];
+  for (i in e)
+    r = e[i], r !== n[i] && (o.setProperty(i, r), n[i] = r);
   return n;
 }
-function A(t, e, n, s) {
-  if (n !== void 0 && !s && (s = []), typeof e != "function") return F(t, e, s, n);
-  I((r) => F(t, e(), r, n), s);
+function C(t, e, n, o) {
+  if (n !== void 0 && !o && (o = []), typeof e != "function") return F(t, e, o, n);
+  I((r) => F(t, e(), r, n), o);
 }
-function Et(t) {
+function Ot(t) {
   let e = t.target;
-  const n = `$$${t.type}`, s = t.target, r = t.currentTarget, o = (a) => Object.defineProperty(t, "target", {
+  const n = `$$${t.type}`, o = t.target, r = t.currentTarget, i = (a) => Object.defineProperty(t, "target", {
     configurable: !0,
     value: a
   }), l = () => {
@@ -283,8 +283,8 @@ function Et(t) {
       const u = e[`${n}Data`];
       if (u !== void 0 ? a.call(e, u, t) : a.call(e, t), t.cancelBubble) return;
     }
-    return e.host && typeof e.host != "string" && !e.host._$host && e.contains(t.target) && o(e.host), !0;
-  }, i = () => {
+    return e.host && typeof e.host != "string" && !e.host._$host && e.contains(t.target) && i(e.host), !0;
+  }, s = () => {
     for (; l() && (e = e._$host || e.parentNode || e.host); ) ;
   };
   if (Object.defineProperty(t, "currentTarget", {
@@ -294,133 +294,133 @@ function Et(t) {
     }
   }), t.composedPath) {
     const a = t.composedPath();
-    o(a[0]);
+    i(a[0]);
     for (let u = 0; u < a.length - 2 && (e = a[u], !!l()); u++) {
       if (e._$host) {
-        e = e._$host, i();
+        e = e._$host, s();
         break;
       }
       if (e.parentNode === r)
         break;
     }
-  } else i();
-  o(s);
+  } else s();
+  i(o);
 }
-function F(t, e, n, s, r) {
+function F(t, e, n, o, r) {
   for (; typeof n == "function"; ) n = n();
   if (e === n) return n;
-  const o = typeof e, l = s !== void 0;
-  if (t = l && n[0] && n[0].parentNode || t, o === "string" || o === "number") {
-    if (o === "number" && (e = e.toString(), e === n))
+  const i = typeof e, l = o !== void 0;
+  if (t = l && n[0] && n[0].parentNode || t, i === "string" || i === "number") {
+    if (i === "number" && (e = e.toString(), e === n))
       return n;
     if (l) {
-      let i = n[0];
-      i && i.nodeType === 3 ? i.data !== e && (i.data = e) : i = document.createTextNode(e), n = S(t, n, s, i);
+      let s = n[0];
+      s && s.nodeType === 3 ? s.data !== e && (s.data = e) : s = document.createTextNode(e), n = x(t, n, o, s);
     } else
       n !== "" && typeof n == "string" ? n = t.firstChild.data = e : n = t.textContent = e;
-  } else if (e == null || o === "boolean")
-    n = S(t, n, s);
+  } else if (e == null || i === "boolean")
+    n = x(t, n, o);
   else {
-    if (o === "function")
+    if (i === "function")
       return I(() => {
-        let i = e();
-        for (; typeof i == "function"; ) i = i();
-        n = F(t, i, n, s);
+        let s = e();
+        for (; typeof s == "function"; ) s = s();
+        n = F(t, s, n, o);
       }), () => n;
     if (Array.isArray(e)) {
-      const i = [], a = n && Array.isArray(n);
-      if (H(i, e, n, r))
-        return I(() => n = F(t, i, n, s, !0)), () => n;
-      if (i.length === 0) {
-        if (n = S(t, n, s), l) return n;
-      } else a ? n.length === 0 ? Z(t, i, s) : mt(t, n, i) : (n && S(t), Z(t, i));
-      n = i;
+      const s = [], a = n && Array.isArray(n);
+      if (G(s, e, n, r))
+        return I(() => n = F(t, s, n, o, !0)), () => n;
+      if (s.length === 0) {
+        if (n = x(t, n, o), l) return n;
+      } else a ? n.length === 0 ? nt(t, s, o) : kt(t, n, s) : (n && x(t), nt(t, s));
+      n = s;
     } else if (e.nodeType) {
       if (Array.isArray(n)) {
-        if (l) return n = S(t, n, s, e);
-        S(t, n, null, e);
+        if (l) return n = x(t, n, o, e);
+        x(t, n, null, e);
       } else n == null || n === "" || !t.firstChild ? t.appendChild(e) : t.replaceChild(e, t.firstChild);
       n = e;
     }
   }
   return n;
 }
-function H(t, e, n, s) {
+function G(t, e, n, o) {
   let r = !1;
-  for (let o = 0, l = e.length; o < l; o++) {
-    let i = e[o], a = n && n[t.length], u;
-    if (!(i == null || i === !0 || i === !1)) if ((u = typeof i) == "object" && i.nodeType)
-      t.push(i);
-    else if (Array.isArray(i))
-      r = H(t, i, a) || r;
+  for (let i = 0, l = e.length; i < l; i++) {
+    let s = e[i], a = n && n[t.length], u;
+    if (!(s == null || s === !0 || s === !1)) if ((u = typeof s) == "object" && s.nodeType)
+      t.push(s);
+    else if (Array.isArray(s))
+      r = G(t, s, a) || r;
     else if (u === "function")
-      if (s) {
-        for (; typeof i == "function"; ) i = i();
-        r = H(t, Array.isArray(i) ? i : [i], Array.isArray(a) ? a : [a]) || r;
+      if (o) {
+        for (; typeof s == "function"; ) s = s();
+        r = G(t, Array.isArray(s) ? s : [s], Array.isArray(a) ? a : [a]) || r;
       } else
-        t.push(i), r = !0;
+        t.push(s), r = !0;
     else {
-      const f = String(i);
-      a && a.nodeType === 3 && a.data === f ? t.push(a) : t.push(document.createTextNode(f));
+      const d = String(s);
+      a && a.nodeType === 3 && a.data === d ? t.push(a) : t.push(document.createTextNode(d));
     }
   }
   return r;
 }
-function Z(t, e, n = null) {
-  for (let s = 0, r = e.length; s < r; s++) t.insertBefore(e[s], n);
+function nt(t, e, n = null) {
+  for (let o = 0, r = e.length; o < r; o++) t.insertBefore(e[o], n);
 }
-function S(t, e, n, s) {
+function x(t, e, n, o) {
   if (n === void 0) return t.textContent = "";
-  const r = s || document.createTextNode("");
+  const r = o || document.createTextNode("");
   if (e.length) {
-    let o = !1;
+    let i = !1;
     for (let l = e.length - 1; l >= 0; l--) {
-      const i = e[l];
-      if (r !== i) {
-        const a = i.parentNode === t;
-        !o && !l ? a ? t.replaceChild(r, i) : t.insertBefore(r, n) : a && i.remove();
-      } else o = !0;
+      const s = e[l];
+      if (r !== s) {
+        const a = s.parentNode === t;
+        !i && !l ? a ? t.replaceChild(r, s) : t.insertBefore(r, n) : a && s.remove();
+      } else i = !0;
     }
   } else t.insertBefore(r, n);
   return [r];
 }
-function xt(t) {
-  return Object.keys(t).reduce((n, s) => {
-    const r = t[s];
-    return n[s] = Object.assign({}, r), dt(r.value) && !Pt(r.value) && !Array.isArray(r.value) && (n[s].value = Object.assign({}, r.value)), Array.isArray(r.value) && (n[s].value = r.value.slice(0)), n;
+function Pt(t) {
+  return Object.keys(t).reduce((n, o) => {
+    const r = t[o];
+    return n[o] = Object.assign({}, r), _t(r.value) && !Rt(r.value) && !Array.isArray(r.value) && (n[o].value = Object.assign({}, r.value)), Array.isArray(r.value) && (n[o].value = r.value.slice(0)), n;
   }, {});
 }
-function kt(t) {
-  return t ? Object.keys(t).reduce((n, s) => {
-    const r = t[s];
-    return n[s] = dt(r) && "value" in r ? r : {
+function Mt(t) {
+  return t ? Object.keys(t).reduce((n, o) => {
+    const r = t[o];
+    return n[o] = _t(r) && "value" in r ? r : {
       value: r
-    }, n[s].attribute || (n[s].attribute = Ot(s)), n[s].parse = "parse" in n[s] ? n[s].parse : typeof n[s].value != "string", n;
+    }, n[o].attribute || (n[o].attribute = Bt(o)), n[o].parse = "parse" in n[o] ? n[o].parse : typeof n[o].value != "string", n;
   }, {}) : {};
 }
-function Tt(t) {
-  return Object.keys(t).reduce((n, s) => (n[s] = t[s].value, n), {});
+function Nt(t) {
+  return Object.keys(t).reduce((n, o) => (n[o] = t[o].value, n), {});
 }
-function $t(t, e) {
-  const n = xt(e);
+function jt(t, e) {
+  const n = Pt(e);
   return Object.keys(e).forEach((r) => {
-    const o = n[r], l = t.getAttribute(o.attribute), i = t[r];
-    l != null && (o.value = o.parse ? ft(l) : l), i != null && (o.value = Array.isArray(i) ? i.slice(0) : i), o.reflect && Q(t, o.attribute, o.value, !!o.parse), Object.defineProperty(t, r, {
+    const i = n[r], l = t.getAttribute(i.attribute), s = t[r];
+    l != null && (i.value = i.parse ? bt(l) : l), s != null && (i.value = Array.isArray(s) ? s.slice(0) : s), i.reflect && rt(t, i.attribute, i.value, !!i.parse), Object.defineProperty(t, r, {
       get() {
-        return o.value;
+        return i.value;
       },
       set(a) {
-        const u = o.value;
-        o.value = a, o.reflect && Q(this, o.attribute, o.value, !!o.parse);
-        for (let f = 0, _ = this.__propertyChangedCallbacks.length; f < _; f++)
-          this.__propertyChangedCallbacks[f](r, a, u);
+        const u = i.value;
+        i.value = a, i.reflect && rt(this, i.attribute, i.value, !!i.parse);
+        for (let d = 0, w = this.__propertyChangedCallbacks.length; d < w; d++)
+          this.__propertyChangedCallbacks[d](r, a, u);
       },
       enumerable: !0,
       configurable: !0
     });
   }), n;
 }
-function ft(t) {
+function bt(t) {
   if (t)
     try {
       return JSON.parse(t);
@@ -428,25 +428,25 @@ function ft(t) {
       return t;
     }
 }
-function Q(t, e, n, s) {
+function rt(t, e, n, o) {
   if (n == null || n === !1) return t.removeAttribute(e);
-  let r = s ? JSON.stringify(n) : n;
+  let r = o ? JSON.stringify(n) : n;
   t.__updating[e] = !0, r === "true" && (r = ""), t.setAttribute(e, r), Promise.resolve().then(() => delete t.__updating[e]);
 }
-function Ot(t) {
+function Bt(t) {
   return t.replace(/\.?([A-Z]+)/g, (e, n) => "-" + n.toLowerCase()).replace("_", "-").replace(/^-/, "");
 }
-function dt(t) {
+function _t(t) {
   return t != null && (typeof t == "object" || typeof t == "function");
 }
-function Pt(t) {
+function Rt(t) {
   return Object.prototype.toString.call(t) === "[object Function]";
 }
-function Mt(t) {
+function It(t) {
   return typeof t == "function" && t.toString().indexOf("class") === 0;
 }
-let V;
-function Nt(t, e) {
+let q;
+function Dt(t, e) {
   const n = Object.keys(e);
   return class extends t {
     static get observedAttributes() {
@@ -457,16 +457,16 @@ function Nt(t, e) {
     }
     connectedCallback() {
       if (this.__initialized) return;
-      this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = $t(this, e);
-      const r = Tt(this.props), o = this.Component, l = V;
+      this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = jt(this, e);
+      const r = Nt(this.props), i = this.Component, l = q;
       try {
-        V = this, this.__initialized = !0, Mt(o) ? new o(r, {
+        q = this, this.__initialized = !0, It(i) ? new i(r, {
           element: this
-        }) : o(r, {
+        }) : i(r, {
           element: this
         });
       } finally {
-        V = l;
+        q = l;
       }
     }
     async disconnectedCallback() {
@@ -476,15 +476,15 @@ function Nt(t, e) {
       for (; r = this.__releaseCallbacks.pop(); ) r(this);
       delete this.__initialized, this.__released = !0;
     }
-    attributeChangedCallback(r, o, l) {
+    attributeChangedCallback(r, i, l) {
       if (this.__initialized && !this.__updating[r] && (r = this.lookupProp(r), r in e)) {
         if (l == null && !this[r]) return;
-        this[r] = e[r].parse ? ft(l) : l;
+        this[r] = e[r].parse ? bt(l) : l;
       }
     }
     lookupProp(r) {
       if (e)
-        return n.find((o) => r === o || r === e[o].attribute);
+        return n.find((i) => r === i || r === e[i].attribute);
     }
     get renderRoot() {
       return this.shadowRoot || this.attachShadow({
@@ -499,54 +499,54 @@ function Nt(t, e) {
     }
   };
 }
-function jt(t, e = {}, n = {}) {
+function Ft(t, e = {}, n = {}) {
   const {
-    BaseElement: s = HTMLElement,
+    BaseElement: o = HTMLElement,
     extension: r,
-    customElements: o = window.customElements
+    customElements: i = window.customElements
   } = n;
   return (l) => {
-    let i = o.get(t);
-    return i ? (i.prototype.Component = l, i) : (i = Nt(s, kt(e)), i.prototype.Component = l, i.prototype.registeredTag = t, o.define(t, i, r), i);
+    let s = i.get(t);
+    return s ? (s.prototype.Component = l, s) : (s = Dt(o, Mt(e)), s.prototype.Component = l, s.prototype.registeredTag = t, i.define(t, s, r), s);
   };
 }
-function Bt(t) {
+function Lt(t) {
   const e = Object.keys(t), n = {};
-  for (let s = 0; s < e.length; s++) {
-    const [r, o] = nt(t[e[s]]);
-    Object.defineProperty(n, e[s], {
+  for (let o = 0; o < e.length; o++) {
+    const [r, i] = at(t[e[o]]);
+    Object.defineProperty(n, e[o], {
       get: r,
       set(l) {
-        o(() => l);
+        i(() => l);
       }
     });
   }
   return n;
 }
-function Rt(t) {
+function Kt(t) {
   if (t.assignedSlot && t.assignedSlot._$owner) return t.assignedSlot._$owner;
   let e = t.parentNode;
   for (; e && !e._$owner && !(e.assignedSlot && e.assignedSlot._$owner); )
     e = e.parentNode;
   return e && e.assignedSlot ? e.assignedSlot._$owner : t._$owner;
 }
-function It(t) {
+function Ut(t) {
   return (e, n) => {
-    const { element: s } = n;
-    return yt((r) => {
-      const o = Bt(e);
-      s.addPropertyChangedCallback((i, a) => o[i] = a), s.addReleaseCallback(() => {
-        s.renderRoot.textContent = "", r();
+    const { element: o } = n;
+    return mt((r) => {
+      const i = Lt(e);
+      o.addPropertyChangedCallback((s, a) => i[s] = a), o.addReleaseCallback(() => {
+        o.renderRoot.textContent = "", r();
       });
-      const l = t(o, n);
-      return A(s.renderRoot, l);
-    }, Rt(s));
+      const l = t(i, n);
+      return C(o.renderRoot, l);
+    }, Kt(o));
   };
 }
-function Dt(t, e, n) {
-  return arguments.length === 2 && (n = e, e = {}), jt(t, e)(It(n));
+function zt(t, e, n) {
+  return arguments.length === 2 && (n = e, e = {}), Ft(t, e)(Ut(n));
 }
-const Ft = `
+const Vt = `
 :host([theme="dark"]) {
   color-scheme: only dark;
 }
@@ -560,15 +560,25 @@ const Ft = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: light-dark(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.95));
-  background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.7));
+  color: light-dark(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));
+  background-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.85));
   border-radius: 50%;
   border: none;
-  transition: box-shadow 0.05s linear;
+  transition: box-shadow 0.05s linear, background-color 0.2s ease;
   box-sizing: border-box;
 }
-:host .dictate-button__button:hover, :host .dictate-button__button:focus {
-  background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.6));
+:host .dictate-button__button:hover {
+  background-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.7));
+}
+
+:host .dictate-button__button:focus {
+  background-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.7));
+  outline: none;
+}
+
+:host .dictate-button__button:focus-visible {
+  outline: 2px solid light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
+  outline-offset: 2px;
 }
 
 :host .dictate-button__button .dictate-button__icon {
@@ -584,121 +594,144 @@ const Ft = `
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+@media (forced-colors: active) {
+  :host .dictate-button__button {
+    border: 1px solid currentColor;
+  }
+  :host .dictate-button__button:focus-visible {
+    outline: 3px solid currentColor;
+  }
+}
 `;
-var Lt = /* @__PURE__ */ k("<div part=container class=dictate-button__container><style></style><button part=button class=dictate-button__button>"), Kt = /* @__PURE__ */ k('<svg part=icon class="dictate-button__icon dictate-button__icon--idle"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z">'), Ut = /* @__PURE__ */ k('<svg part=icon class="dictate-button__icon dictate-button__icon--recording"viewBox="0 0 24 24"fill=currentColor><circle cx=12 cy=12 r=10>'), zt = /* @__PURE__ */ k('<svg part=icon class="dictate-button__icon dictate-button__icon--processing"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round><path d="M12 2v4"></path><path d="m16.2 7.8 2.9-2.9"></path><path d="M18 12h4"></path><path d="m16.2 16.2 2.9 2.9"></path><path d="M12 18v4"></path><path d="m4.9 19.1 2.9-2.9"></path><path d="M2 12h4"></path><path d="m4.9 4.9 2.9 2.9">'), Vt = /* @__PURE__ */ k('<svg part=icon class="dictate-button__icon dictate-button__icon--error"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=4 stroke-linecap=round stroke-linejoin=round><line x1=12 x2=12 y1=4 y2=14></line><line x1=12 x2=12.01 y1=20 y2=20>');
-console.debug("dictate-button version:", "1.1.2");
-const qt = "https://api.dictate-button.io/transcribe", j = "dictate-button.io", q = -70, Y = -10, tt = 0, Ht = 4, Gt = 0.25, Wt = 0.05;
-Dt("dictate-button", {
+var qt = /* @__PURE__ */ O('<div part=container class=dictate-button__container><style></style><div aria-live=polite class=dictate-button__status-announcer style="position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></div><button part=button class=dictate-button__button>'), Ht = /* @__PURE__ */ O('<svg part=icon class="dictate-button__icon dictate-button__icon--idle"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor role=img aria-hidden=true><path stroke-linecap=round stroke-linejoin=round d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z">'), Gt = /* @__PURE__ */ O('<svg part=icon class="dictate-button__icon dictate-button__icon--recording"viewBox="0 0 24 24"fill=currentColor role=img aria-hidden=true><circle cx=12 cy=12 r=10>'), Wt = /* @__PURE__ */ O('<svg part=icon class="dictate-button__icon dictate-button__icon--processing"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round role=img aria-hidden=true><path d="M12 2v4"></path><path d="m16.2 7.8 2.9-2.9"></path><path d="M18 12h4"></path><path d="m16.2 16.2 2.9 2.9"></path><path d="M12 18v4"></path><path d="m4.9 19.1 2.9-2.9"></path><path d="M2 12h4"></path><path d="m4.9 4.9 2.9 2.9">'), Xt = /* @__PURE__ */ O('<svg part=icon class="dictate-button__icon dictate-button__icon--error"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=4 stroke-linecap=round stroke-linejoin=round role=img aria-hidden=true><line x1=12 x2=12 y1=4 y2=14></line><line x1=12 x2=12.01 y1=20 y2=20>');
+console.debug("dictate-button version:", "1.2.0");
+const Jt = "https://api.dictate-button.io/transcribe", v = "dictate-button.io", H = -70, ot = -10, it = 0, Zt = 4, Qt = 0.25, Yt = 0.05;
+zt("dictate-button", {
   size: 30,
-  apiEndpoint: qt,
+  apiEndpoint: Jt,
   language: void 0
 }, (t, {
   element: e
 }) => {
   console.debug("api", t.apiEndpoint);
-  const [n, s] = nt("idle");
-  let r = null, o = [], l = null, i = null, a = null, u = !1, f = 0;
-  const _ = (d) => d <= q ? 0 : d >= Y ? 1 : (d - q) / (Y - q), v = (d) => {
+  const [n, o] = at("idle");
+  let r = null, i = [], l = null, s = null, a = null, u = !1, d = 0;
+  const w = (f) => f <= H ? 0 : f >= ot ? 1 : (f - H) / (ot - H), E = (f) => {
     let y = 0;
-    for (let h = 0; h < d.length; h++) {
-      const c = (d[h] - 128) / 128;
+    for (let b = 0; b < f.length; b++) {
+      const c = (f[b] - 128) / 128;
       y += c * c;
     }
-    return Math.sqrt(y / d.length);
-  }, T = (d) => 20 * Math.log10(Math.max(d, 1e-8)), $ = (d) => {
+    return Math.sqrt(y / f.length);
+  }, P = (f) => 20 * Math.log10(Math.max(f, 1e-8)), M = (f) => {
     const y = e.shadowRoot.querySelector(".dictate-button__button");
     if (!y)
       return;
-    const h = tt + d * (Ht - tt), c = 0 + d * 0.4;
-    y.style.boxShadow = `0 0 0 ${h}px light-dark(rgba(0, 0, 0, ${c}), rgba(255, 255, 255, ${c}))`;
-  }, W = () => {
-    if (!u || !i || !a) return;
-    i.getByteTimeDomainData(a);
-    const d = v(a), y = T(d), h = _(y), c = h > f ? Gt : Wt;
-    f = c * h + (1 - c) * f, $(f), requestAnimationFrame(W);
+    const b = it + f * (Zt - it), c = 0 + f * 0.4;
+    y.style.boxShadow = `0 0 0 ${b}px light-dark(rgba(0, 0, 0, ${c}), rgba(255, 255, 255, ${c}))`;
+  }, X = () => {
+    if (!u || !s || !a) return;
+    s.getByteTimeDomainData(a);
+    const f = E(a), y = P(f), b = w(y), c = b > d ? Qt : Yt;
+    d = c * b + (1 - c) * d, M(d), requestAnimationFrame(X);
   }, U = () => {
-    r && r.state !== "inactive" && r.stop(), o = [], u = !1, l && l.state !== "closed" && l.close(), l = null, i = null, a = null, f = 0, $(0);
+    r && r.state !== "inactive" && r.stop(), i = [], u = !1, l && l.state !== "closed" && l.close(), l = null, s = null, a = null, d = 0, M(0);
   };
   e.addEventListener("disconnected", U);
-  const ht = async () => {
+  const yt = async () => {
     if (U(), n() === "idle")
       try {
-        const d = await navigator.mediaDevices.getUserMedia({
+        const f = await navigator.mediaDevices.getUserMedia({
           audio: !0
         });
         l = new (window.AudioContext || window.webkitAudioContext)();
-        const y = l.createMediaStreamSource(d);
-        i = l.createAnalyser(), i.fftSize = 2048, y.connect(i), a = new Uint8Array(i.fftSize), r = new MediaRecorder(d, {
+        const y = l.createMediaStreamSource(f);
+        s = l.createAnalyser(), s.fftSize = 2048, y.connect(s), a = new Uint8Array(s.fftSize), r = new MediaRecorder(f, {
           mimeType: "audio/webm"
-        }), o = [], r.ondataavailable = (h) => {
-          o.push(h.data);
+        }), i = [], r.ondataavailable = (b) => {
+          i.push(b.data);
         }, r.onstop = async () => {
-          u = !1, s("processing"), m(e, "transcribing:started", "Started transcribing");
-          const h = new Blob(o, {
+          u = !1, o("processing"), A(e, "transcribing:started", "Started transcribing");
+          const b = new Blob(i, {
             type: "audio/webm"
           });
           try {
             const c = new FormData();
-            c.append("audio", h, "recording.webm"), c.append("origin", window?.location?.origin), t.language && c.append("language", t.language);
-            const O = await fetch(t.apiEndpoint, {
+            c.append("audio", b, "recording.webm"), c.append("origin", window?.location?.origin), t.language && c.append("language", t.language);
+            const h = await fetch(t.apiEndpoint, {
               method: "POST",
               body: c
             });
-            if (!O.ok) throw new Error("Failed to transcribe audio");
-            const P = await O.json();
+            if (!h.ok) throw new Error("Failed to transcribe audio");
+            const z = await h.json();
             if (n() !== "processing") return;
-            m(e, "transcribing:finished", P.text), s("idle");
+            A(e, "transcribing:finished", z.text), o("idle");
           } catch (c) {
-            console.error("Failed to transcribe audio:", c), m(e, "transcribing:failed", "Failed to transcribe audio"), X();
+            console.error("Failed to transcribe audio:", c), A(e, "transcribing:failed", "Failed to transcribe audio"), J();
           }
-        }, r.start(), m(e, "recording:started", "Started recording"), u = !0, W(), s("recording");
-      } catch (d) {
-        console.error("Failed to start recording:", d), m(e, "recording:failed", "Failed to start recording"), X();
+        }, r.start(), A(e, "recording:started", "Started recording"), u = !0, X(), o("recording");
+      } catch (f) {
+        console.error("Failed to start recording:", f), A(e, "recording:failed", "Failed to start recording"), J();
       }
     else
-      m(e, "recording:stopped", "Stopped recording"), s("idle"), U();
-  }, X = () => {
-    s("error"), setTimeout(() => s("idle"), 2e3);
+      A(e, "recording:stopped", "Stopped recording"), o("idle"), U();
+  }, J = () => {
+    o("error"), setTimeout(() => o("idle"), 2e3);
   };
   return (() => {
-    var d = Lt(), y = d.firstChild, h = y.nextSibling;
-    return A(y, Ft), h.$$click = ht, A(h, (() => {
-      var c = N(() => n() === "idle");
-      return () => c() && M(Jt, {});
-    })(), null), A(h, (() => {
-      var c = N(() => n() === "recording");
-      return () => c() && M(Zt, {});
-    })(), null), A(h, (() => {
-      var c = N(() => n() === "processing");
-      return () => c() && M(Qt, {});
-    })(), null), A(h, (() => {
-      var c = N(() => n() === "error");
-      return () => c() && M(Yt, {});
-    })(), null), I((c) => {
-      var O = `width:${t.size}px;height:${t.size}px"`, P = Xt(n());
-      return c.e = vt(h, O, c.e), P !== c.t && ut(h, "title", c.t = P), c;
+    var f = qt(), y = f.firstChild, b = y.nextSibling, c = b.nextSibling;
+    return C(y, Vt), C(b, () => st(n())), c.$$click = yt, C(c, (() => {
+      var h = j(() => n() === "idle");
+      return () => h() && N(ee, {});
+    })(), null), C(c, (() => {
+      var h = j(() => n() === "recording");
+      return () => h() && N(ne, {});
+    })(), null), C(c, (() => {
+      var h = j(() => n() === "processing");
+      return () => h() && N(re, {});
+    })(), null), C(c, (() => {
+      var h = j(() => n() === "error");
+      return () => h() && N(oe, {});
+    })(), null), I((h) => {
+      var z = `width:${t.size}px;height:${t.size}px"`, Z = te(n()), Q = st(n()), Y = n() === "recording", tt = n() === "processing";
+      return h.e = Tt(c, z, h.e), Z !== h.t && k(c, "title", h.t = Z), Q !== h.a && k(c, "aria-label", h.a = Q), Y !== h.o && k(c, "aria-pressed", h.o = Y), tt !== h.i && k(c, "aria-busy", h.i = tt), h;
     }, {
       e: void 0,
-      t: void 0
-    }), d;
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), f;
   })();
 });
-const Xt = (t) => {
+const te = (t) => {
+  switch (t) {
+    case "idle":
+      return `Start dictation (${v})`;
+    case "recording":
+      return `Stop dictation (${v})`;
+    case "processing":
+      return `Stop processing (${v})`;
+    case "error":
+      return `Click to reset (${v})`;
+  }
+}, st = (t) => {
   switch (t) {
     case "idle":
-      return `Start dictation (${j})`;
+      return `Start dictation (${v})`;
     case "recording":
-      return `Stop dictation (${j})`;
+      return `Dictation in progress. Click to stop it (${v})`;
     case "processing":
-      return `Stop processing (${j})`;
+      return `Processing dictation. Click to cancel it (${v})`;
     case "error":
-      return `Click to reset (${j})`;
+      return `Dictation error. Click to reset (${v})`;
   }
-}, m = (t, e, n) => {
+}, A = (t, e, n) => {
   t.dispatchEvent(new CustomEvent(e, {
     detail: n,
     bubbles: !0,
     composed: !0
   }));
-}, Jt = () => Kt(), Zt = () => Ut(), Qt = () => zt(), Yt = () => Vt();
-At(["click"]);
+}, ee = () => Ht(), ne = () => Gt(), re = () => Wt(), oe = () => Xt();
+$t(["click"]);

package/dist/dictate-button.styles.d.ts

@@ -1 +1 @@
-export declare const dictateButtonStyles = "\n:host([theme=\"dark\"]) {\n  color-scheme: only dark;\n}\n:host([theme=\"light\"]) {\n  color-scheme: only light;\n}\n\n:host .dictate-button__button {\n  cursor: pointer;\n  padding: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: light-dark(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.95));\n  background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.7));\n  border-radius: 50%;\n  border: none;\n  transition: box-shadow 0.05s linear;\n  box-sizing: border-box;\n}\n:host .dictate-button__button:hover, :host .dictate-button__button:focus {\n  background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.6));\n}\n\n:host .dictate-button__button .dictate-button__icon {\n  width: 100%;\n  height: 100%;\n}\n\n:host .dictate-button__button .dictate-button__icon.dictate-button__icon--processing {\n  animation: dictate-button-rotate 1s linear infinite;\n}\n\n@keyframes dictate-button-rotate {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
+export declare const dictateButtonStyles = "\n:host([theme=\"dark\"]) {\n  color-scheme: only dark;\n}\n:host([theme=\"light\"]) {\n  color-scheme: only light;\n}\n\n:host .dictate-button__button {\n  cursor: pointer;\n  padding: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: light-dark(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));\n  background-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.85));\n  border-radius: 50%;\n  border: none;\n  transition: box-shadow 0.05s linear, background-color 0.2s ease;\n  box-sizing: border-box;\n}\n:host .dictate-button__button:hover {\n  background-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.7));\n}\n\n:host .dictate-button__button:focus {\n  background-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.7));\n  outline: none;\n}\n\n:host .dictate-button__button:focus-visible {\n  outline: 2px solid light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));\n  outline-offset: 2px;\n}\n\n:host .dictate-button__button .dictate-button__icon {\n  width: 100%;\n  height: 100%;\n}\n\n:host .dictate-button__button .dictate-button__icon.dictate-button__icon--processing {\n  animation: dictate-button-rotate 1s linear infinite;\n}\n\n@keyframes dictate-button-rotate {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n@media (forced-colors: active) {\n  :host .dictate-button__button {\n    border: 1px solid currentColor;\n  }\n  :host .dictate-button__button:focus-visible {\n    outline: 3px solid currentColor;\n  }\n}\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dictate-button",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Dictate Button (Web Component)",
   "keywords": [
     "custom-element",