typography-controller 1.1.0 → 1.2.1

package/dist/react/react-wrapper.js

@@ -1,261 +1,25 @@
 import { createComponent as a } from "@lit/react";
-import o from "react";
+import s from "react";
 let r = class extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          font-family: system-ui, sans-serif;
-          max-width: 420px;
-          padding: 18px 20px;
-          border-radius: 18px;
-          background: rgba(255, 255, 255, 0.65);
-          border: 1px solid rgba(0, 0, 0, 0.08);
-          backdrop-filter: blur(14px);
-          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
-          color: #0f172a;
-        }
-
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: baseline;
-          margin-bottom: 14px;
-        }
-
-        .title {
-          font-size: 14px;
-          font-weight: 600;
-          letter-spacing: 0.08em;
-          text-transform: uppercase;
-          color: #475569;
-        }
-
-        .badge {
-          font-size: 11px;
-          padding: 3px 8px;
-          border-radius: 999px;
-          background: rgba(59, 130, 246, 0.12);
-          color: #1d4ed8;
-          border: 1px solid rgba(59, 130, 246, 0.35);
-        }
-
-        .group {
-          margin-bottom: 14px;
-        }
-
-        .label-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 6px;
-        }
-
-        label {
-          font-size: 12px;
-          font-weight: 600;
-          color: #0f172a;
-        }
-
-        .value {
-          font-size: 11px;
-          color: #64748b;
-        }
-
-        input[type="range"] {
-          -webkit-appearance: none;
-          width: 100%;
-          height: 6px;
-          border-radius: 999px;
-          background: linear-gradient(90deg, #3b82f6, #60a5fa);
-          outline: none;
-        }
-
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          height: 18px;
-          width: 18px;
-          border-radius: 50%;
-          background: white;
-          border: 1px solid rgba(0, 0, 0, 0.15);
-          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
-          cursor: pointer;
-        }
-
-        select {
-          width: 100%;
-          padding: 6px 8px;
-          border-radius: 8px;
-          border: 1px solid rgba(148, 163, 184, 0.7);
-          background: rgba(255, 255, 255, 0.9);
-          font-size: 12px;
-          color: #0f172a;
-          outline: none;
-        }
-
-        select:focus {
-          outline: none;
-          box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
-          border-radius: 999px;
-        }
-        
-        /* Highlight the track when focused */
-        input[type="range"]:focus {
-          outline: none;
-          box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
-          border-radius: 999px;
-        }
-
-        /* Glow effect on the thumb when focused */
-        input[type="range"]:focus::-webkit-slider-thumb {
-          box-shadow:
-            0 0 0 4px rgba(37, 99, 235, 0.35),
-            0 4px 10px rgba(0, 0, 0, 0.25);
-          border-color: #2563eb;
-        }
-
-        /* Firefox thumb focus */
-        input[type="range"]::-moz-range-thumb:focus {
-          box-shadow:
-            0 0 0 4px rgba(37, 99, 235, 0.35),
-            0 4px 10px rgba(0, 0, 0, 0.25);
-          border-color: #2563eb;
-        }
-        input[type="range"]:hover::-webkit-slider-thumb {
-          transform: scale(1.05);
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-        }
-      </style>
-
-      <div class="header">
-        <h2 class="title" id="controllerTitle">Typography Controls</h2>
-        <span class="badge">v1.0.0</span>
-      </div>
-
-      <!-- Live region for announcements -->
-      <div aria-live="polite" class="sr-only" id="liveRegion"></div>
-
-      <div class="group" id="groupFontSize" role="group" aria-labelledby="labelFontSize">
-        <div class="label-row">
-          <label id="labelFontSize" for="fontSize">Font size</label>
-          <span class="value" id="fontSizeValue" aria-hidden="true"></span>
-        </div>
-
-        <input
-          type="range"
-          id="fontSize"
-          min="12"
-          max="60"
-          value="24"
-          aria-valuemin="12"
-          aria-valuemax="60"
-          aria-valuenow="24"
-          aria-labelledby="labelFontSize"
-        >
-      </div>
-
-      <div class="group" id="groupLetterSpacing" role="group" aria-labelledby="labelLetterSpacing">
-        <div class="label-row">
-          <label id="labelLetterSpacing" for="letterSpacing">Letter spacing</label>
-          <span class="value" id="letterSpacingValue" aria-hidden="true"></span>
-        </div>
-
-        <input
-          type="range"
-          id="letterSpacing"
-          min="0"
-          max="20"
-          value="0"
-          aria-valuemin="0"
-          aria-valuemax="20"
-          aria-valuenow="0"
-          aria-labelledby="labelLetterSpacing"
-        >
-      </div>
-
-      <div class="group" id="groupWordSpacing" role="group" aria-labelledby="labelWordSpacing">
-        <div class="label-row">
-          <label id="labelWordSpacing" for="wordSpacing">Word spacing</label>
-          <span class="value" id="wordSpacingValue" aria-hidden="true"></span>
-        </div>
-
-        <input
-          type="range"
-          id="wordSpacing"
-          min="0"
-          max="40"
-          value="0"
-          aria-valuemin="0"
-          aria-valuemax="40"
-          aria-valuenow="0"
-          aria-labelledby="labelWordSpacing"
-        >
-      </div>
-
-      <div class="group" id="groupLineHeight" role="group" aria-labelledby="labelLineHeight">
-        <div class="label-row">
-          <label id="labelLineHeight" for="lineHeight">Line height</label>
-          <span class="value" id="lineHeightValue" aria-hidden="true"></span>
-        </div>
-
-        <input
-          type="range"
-          id="lineHeight"
-          min="1"
-          max="3"
-          step="0.1"
-          value="1.5"
-          aria-valuemin="1"
-          aria-valuemax="3"
-          aria-valuenow="1.5"
-          aria-labelledby="labelLineHeight"
-        >
-      </div>
-
-      <div class="group" id="groupContrast" role="group" aria-labelledby="labelContrast">
-        <div class="label-row">
-          <label id="labelContrast" for="contrast">Contrast</label>
-          <span class="value" id="contrastValue" aria-hidden="true"></span>
-        </div>
-
-        <input
-          type="range"
-          id="contrast"
-          min="50"
-          max="200"
-          value="100"
-          aria-valuemin="50"
-          aria-valuemax="200"
-          aria-valuenow="100"
-          aria-labelledby="labelContrast"
-        >
-      </div>
-
-      <div class="group" id="groupFontFamily" role="group" aria-labelledby="labelFontFamily">
-        <div class="label-row">
-          <label id="labelFontFamily" for="fontFamily">Font family</label>
-        </div>
-
-        <select id="fontFamily" aria-labelledby="labelFontFamily">
-          <option value="system-ui, sans-serif">System</option>
-          <option value="Georgia, serif">Serif</option>
-          <option value="'Courier New', monospace">Monospace</option>
-          <option value="Verdana, sans-serif">Verdana</option>
-          <option value="inherit">Inherit</option>
-        </select>
-      </div>
-    `;
+    super(), this.attachShadow({ mode: "open" });
   }
-  connectedCallback() {
-    this.targetSelector = this.getAttribute("target"), this.toggleGroup("#groupLetterSpacing", !this.hasAttribute("hide-letter-spacing")), this.toggleGroup("#groupWordSpacing", !this.hasAttribute("hide-word-spacing")), this.toggleGroup("#groupLineHeight", !this.hasAttribute("hide-line-height")), this.toggleGroup("#groupContrast", !this.hasAttribute("hide-contrast")), this.fontSize = this.shadowRoot.querySelector("#fontSize"), this.letterSpacing = this.shadowRoot.querySelector("#letterSpacing"), this.wordSpacing = this.shadowRoot.querySelector("#wordSpacing"), this.lineHeight = this.shadowRoot.querySelector("#lineHeight"), this.contrast = this.shadowRoot.querySelector("#contrast"), this.fontFamily = this.shadowRoot.querySelector("#fontFamily");
-    const e = this.targetElement;
-    if (e) {
-      const i = getComputedStyle(e).fontFamily;
-      this.fontFamily.value = i;
+  async connectedCallback() {
+    const [t, i] = await Promise.all([
+      fetch("../src//typography-controller.html").then((o) => o.text()),
+      fetch("../src/typography-controller.css").then((o) => o.text())
+    ]);
+    this.shadowRoot.innerHTML = `
+      <style>${i}</style>
+      ${t}
+    `, this.targetSelector = this.getAttribute("target"), this.toggleGroup("#groupLetterSpacing", !this.hasAttribute("hide-letter-spacing")), this.toggleGroup("#groupWordSpacing", !this.hasAttribute("hide-word-spacing")), this.toggleGroup("#groupLineHeight", !this.hasAttribute("hide-line-height")), this.toggleGroup("#groupContrast", !this.hasAttribute("hide-contrast")), this.toggleGroup("#groupFamily", !this.hasAttribute("hide-font-family")), this.fontSize = this.shadowRoot.querySelector("#fontSize"), this.letterSpacing = this.shadowRoot.querySelector("#letterSpacing"), this.wordSpacing = this.shadowRoot.querySelector("#wordSpacing"), this.lineHeight = this.shadowRoot.querySelector("#lineHeight"), this.contrast = this.shadowRoot.querySelector("#contrast"), this.fontFamily = this.shadowRoot.querySelector("#fontFamily");
+    const n = this.targetElement;
+    if (n) {
+      const o = getComputedStyle(n).fontFamily;
+      this.fontFamily.value = o;
     }
-    this.fontSizeValue = this.shadowRoot.querySelector("#fontSizeValue"), this.letterSpacingValue = this.shadowRoot.querySelector("#letterSpacingValue"), this.wordSpacingValue = this.shadowRoot.querySelector("#wordSpacingValue"), this.lineHeightValue = this.shadowRoot.querySelector("#lineHeightValue"), this.contrastValue = this.shadowRoot.querySelector("#contrastValue");
-    const t = () => {
+    this.fontSizeValue = this.shadowRoot.querySelector("#fontSizeValue"), this.letterSpacingValue = this.shadowRoot.querySelector("#letterSpacingValue"), this.wordSpacingValue = this.shadowRoot.querySelector("#wordSpacingValue"), this.lineHeightValue = this.shadowRoot.querySelector("#lineHeightValue"), this.contrastValue = this.shadowRoot.querySelector("#contrastValue"), this.applyRange(this.fontSize, "font-size-min", "font-size-max"), this.applyRange(this.letterSpacing, "letter-spacing-min", "letter-spacing-max"), this.applyRange(this.wordSpacing, "word-spacing-min", "word-spacing-max"), this.applyRange(this.lineHeight, "line-height-min", "line-height-max"), this.applyRange(this.contrast, "contrast-min", "contrast-max");
+    const e = () => {
       this.update(), this.dispatchEvent(
         new CustomEvent("change", {
           detail: this.getValues(),
@@ -264,18 +28,18 @@ let r = class extends HTMLElement {
         })
       );
     };
-    this.fontSize.addEventListener("input", t), this.letterSpacing.addEventListener("input", t), this.wordSpacing.addEventListener("input", t), this.lineHeight.addEventListener("input", t), this.contrast.addEventListener("input", t), this.fontFamily.addEventListener("change", t), this.update();
+    this.fontSize.addEventListener("input", e), this.letterSpacing.addEventListener("input", e), this.wordSpacing.addEventListener("input", e), this.lineHeight.addEventListener("input", e), this.contrast.addEventListener("input", e), this.fontFamily.addEventListener("change", e), this.bindSlider(this.fontSize, this.fontSizeValue, "Font size"), this.bindSlider(this.letterSpacing, this.letterSpacingValue, "Letter spacing"), this.bindSlider(this.wordSpacing, this.wordSpacingValue, "Word spacing"), this.bindSlider(this.lineHeight, this.lineHeightValue, "Line height"), this.bindSlider(this.contrast, this.contrastValue, "Contrast"), this.update();
   }
-  toggleGroup(e, t) {
-    const i = this.shadowRoot.querySelector(e);
-    i && (i.style.display = t ? "block" : "none");
+  toggleGroup(t, i) {
+    const n = this.shadowRoot.querySelector(t);
+    n && (n.style.display = i ? "block" : "none");
   }
   get targetElement() {
     return document.querySelector(this.targetSelector);
   }
   update() {
-    const e = this.targetElement;
-    e && (e.style.fontSize = `${this.fontSize.value}px`, e.style.letterSpacing = `${this.letterSpacing.value}px`, e.style.wordSpacing = `${this.wordSpacing.value}px`, e.style.lineHeight = this.lineHeight.value, e.style.filter = `contrast(${this.contrast.value}%)`, e.style.fontFamily = this.fontFamily.value, this.fontSizeValue.textContent = `${this.fontSize.value}px`, this.letterSpacingValue.textContent = `${this.letterSpacing.value}px`, this.wordSpacingValue.textContent = `${this.wordSpacing.value}px`, this.lineHeightValue.textContent = this.lineHeight.value, this.contrastValue.textContent = `${this.contrast.value}%`);
+    const t = this.targetElement;
+    t && (t.style.fontSize = `${this.fontSize.value}px`, t.style.letterSpacing = `${this.letterSpacing.value}px`, t.style.wordSpacing = `${this.wordSpacing.value}px`, t.style.lineHeight = this.lineHeight.value, t.style.filter = `contrast(${this.contrast.value}%)`, t.style.fontFamily = this.fontFamily.value, this.fontSizeValue.textContent = `${this.fontSize.value}px`, this.letterSpacingValue.textContent = `${this.letterSpacing.value}px`, this.wordSpacingValue.textContent = `${this.wordSpacing.value}px`, this.lineHeightValue.textContent = this.lineHeight.value, this.contrastValue.textContent = `${this.contrast.value}%`);
   }
   getValues() {
     return {
@@ -287,22 +51,40 @@ let r = class extends HTMLElement {
       fontFamily: this.fontFamily.value
     };
   }
-  setValues(e = {}) {
-    if (e.fontSize !== void 0 && (this.fontSize.value = e.fontSize), e.letterSpacing !== void 0 && (this.letterSpacing.value = e.letterSpacing), e.wordSpacing !== void 0 && (this.wordSpacing.value = e.wordSpacing), e.lineHeight !== void 0 && (this.lineHeight.value = e.lineHeight), e.contrast !== void 0 && (this.contrast.value = e.contrast), e.fontFamily !== void 0)
-      if (e.fontFamily === "inherit" && target) {
-        const t = getComputedStyle(target).fontFamily;
-        this.fontFamily.value = t;
+  setValues(t = {}) {
+    if (t.fontSize !== void 0 && (this.fontSize.value = t.fontSize), t.letterSpacing !== void 0 && (this.letterSpacing.value = t.letterSpacing), t.wordSpacing !== void 0 && (this.wordSpacing.value = t.wordSpacing), t.lineHeight !== void 0 && (this.lineHeight.value = t.lineHeight), t.contrast !== void 0 && (this.contrast.value = t.contrast), t.fontFamily !== void 0) {
+      const i = this.targetElement;
+      if (t.fontFamily === "inherit" && i) {
+        const n = getComputedStyle(i).fontFamily;
+        this.fontFamily.value = n;
       } else
-        this.fontFamily.value = e.fontFamily;
+        this.fontFamily.value = t.fontFamily;
+    }
     this.update();
   }
-  setFeatures(e = {}) {
-    e.letterSpacing !== void 0 && (this.toggleGroup("#groupLetterSpacing", e.letterSpacing), e.letterSpacing ? this.removeAttribute("hide-letter-spacing") : this.setAttribute("hide-letter-spacing", "")), e.wordSpacing !== void 0 && (this.toggleGroup("#groupWordSpacing", e.wordSpacing), e.wordSpacing ? this.removeAttribute("hide-word-spacing") : this.setAttribute("hide-word-spacing", "")), e.lineHeight !== void 0 && (this.toggleGroup("#groupLineHeight", e.lineHeight), e.lineHeight ? this.removeAttribute("hide-line-height") : this.setAttribute("hide-line-height", "")), e.contrast !== void 0 && (this.toggleGroup("#groupContrast", e.contrast), e.contrast ? this.removeAttribute("hide-contrast") : this.setAttribute("hide-contrast", ""));
+  setFeatures(t = {}) {
+    t.letterSpacing !== void 0 && (this.toggleGroup("#groupLetterSpacing", t.letterSpacing), t.letterSpacing ? this.removeAttribute("hide-letter-spacing") : this.setAttribute("hide-letter-spacing", "")), t.wordSpacing !== void 0 && (this.toggleGroup("#groupWordSpacing", t.wordSpacing), t.wordSpacing ? this.removeAttribute("hide-word-spacing") : this.setAttribute("hide-word-spacing", "")), t.lineHeight !== void 0 && (this.toggleGroup("#groupLineHeight", t.lineHeight), t.lineHeight ? this.removeAttribute("hide-line-height") : this.setAttribute("hide-line-height", "")), t.contrast !== void 0 && (this.toggleGroup("#groupContrast", t.contrast), t.contrast ? this.removeAttribute("hide-contrast") : this.setAttribute("hide-contrast", "")), t.fontFamily !== void 0 && (this.toggleGroup("#groupFontFamily", t.fontFamily), t.fontFamily ? this.removeAttribute("hide-font-family") : this.setAttribute("hide-font-family", ""));
+  }
+  bindSlider(t, i, n) {
+    i.textContent = t.value, t.addEventListener("input", () => {
+      const e = t.value;
+      i.textContent = e, t.setAttribute("aria-valuenow", e), this.update(), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: this.getValues(),
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    });
+  }
+  applyRange(t, i, n) {
+    const e = this.getAttribute(i), o = this.getAttribute(n);
+    e !== null && (t.min = e, t.setAttribute("aria-valuemin", e)), o !== null && (t.max = o, t.setAttribute("aria-valuemax", o));
   }
 };
 customElements.define("typography-controller", r);
 const p = a({
-  react: o,
+  react: s,
   tagName: "typography-controller",
   elementClass: customElements.get("typography-controller"),
   events: {