typography-controller 1.0.2 → 1.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Achuth Kamath
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights  
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
-copies of the Software, and to permit persons to whom the Software is  
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in  
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  
-FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER  
+MIT License
+
+Copyright (c) 2026 Achuth Kamath
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
+copies of the Software, and to permit persons to whom the Software is  
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in  
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER  
 DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,135 +1,137 @@
-# Typography Controller
-
-A framework-agnostic Web Component that provides a beautiful typography control panel:
-font size, letter spacing, word spacing, line height, contrast, and font family.
-
-
-## Features
-
-- Font Size: Adjust the font size with a slider (range: 12-48px)
-- Letter Spacing: Control the spacing between characters
-- Word Spacing: Adjust spacing between words
-- Line Height: Set the line height (1-3)
-- Contrast: Apply a contrast filter (50-200%)
-- Font Family: Choose from predefined fonts (Arial, Georgia, Courier New, Verdana)
-
-![alt text](https://raw.githubusercontent.com/achuthkamath91/Typography-Controller/main/image.png)
-
-## Usage
-
-1. Include the `typography-controller.js` script in your HTML file:
-
-```html
-<script src="typography-controller.js"></script>
-```
-
-2. Add the `<typography-controller>` element to your HTML, specifying the target element via the `target` attribute:
-
-```html
-<typography-controller target="#myText"></typography-controller>
-<div id="myText">This is the text to style.</div>
-```
-
-The controller will automatically apply the selected styles to the target element.
-
-## API
-
-### Methods
-
-- `getValues()`: Returns an object with current values.
-- `setValues(values)`: Sets the values from an object.
-
-### Events
-
-- `change`: Fired when any control changes, with `detail` containing the current values.
-
-### JavaScript API Usage
-
-```javascript
-const controller = document.querySelector("typography-controller");
-
-controller.addEventListener("change", (e) => {
-  console.log("Updated values:", e.detail);
-});
-
-controller.setValues({
-  fontSize: 30,
-  letterSpacing: 2,
-  fontFamily: "Georgia"
-});
-```
-
-## Example
-
-See `index.html` for a complete example.
-
-### Quick note on bundling (Vite/Rollup)
-
-You can start without bundling (just `src/` + `demo/`), then later add:
-
-- `vite.config.js` or `rollup.config.js` to build `src/typography-controller.js` into `dist/typography-controller.js`
-- `package.json` with `"module": "dist/typography-controller.js"`
-
-If you want, next step we can wire up a minimal Vite config and `package.json` ready for `npm publish`.
-
-### React usage
-
-```
-import { TypographyController } from "./react-wrapper/TypographyController";
-
-export default function App() {
-  return (
-    <div>
-      <h2 id="demoText">Typography should feel like breathing space.</h2>
-
-      <TypographyController
-        target="#demoText"
-        hide-letter-spacing
-        onChange={(e) => console.log(e.detail)}
-      />
-    </div>
-  );
-}
-
-```
-
-### Support JS API (setFeatures, setValues) in React
-
-React reference
-```
-import { useRef, useEffect } from "react";
-import { TypographyController } from "./react-wrapper/TypographyController";
-
-export default function App() {
-  const ref = useRef();
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.setFeatures({
-        letterSpacing: true,
-        wordSpacing: false,
-        lineHeight: true,
-        contrast: true
-      });
-    }
-  }, []);
-
-  return (
-    <>
-      <h2 id="demoText">Hello world</h2>
-
-      <TypographyController
-        ref={ref}
-        target="#demoText"
-        onChange={(e) => console.log(e.detail)}
-      />
-    </>
-  );
-}
-
-```
-
-
-## License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+# Typography Controller
+
+A lightweight, framework‑agnostic Web Component that provides a beautiful, interactive typography control panel.
+Adjust font size, letter spacing, word spacing, line height, contrast, and font family — all in real time.
+
+![alt text](https://raw.githubusercontent.com/achuthkamath91/Typography-Controller/main/image.png)
+
+## 🚀 Features
+
+- Font Size: Adjust the font size with a slider (range: 12-48px).
+- Letter Spacing: Control the spacing between characters.
+- Word Spacing: Adjust spacing between words.
+- Line Height: Set the line height (1-3).
+- Contrast: Apply a contrast filter (50-200%).
+- Font Family: Choose from predefined fonts (Arial, Georgia, Courier New, Verdana).
+- Framework‑agnostic — Works in HTML, React, Vue, Svelte, etc.
+- Public API — getValues(), setValues(), setFeatures(), and change events.
+- EAA - This component is designed with full EAA‑aligned accessibility practices, including keyboard navigation, ARIA labeling, and perceivable focus states.
+
+## 📦 Installation
+
+```bash
+npm install typography-controller
+```
+
+## Usage
+
+1. Import the component
+
+```html
+import "typography-controller/dist/typography-controller.js";
+```
+
+2. Add the `<typography-controller>` element to your HTML, specifying the target element via the `target` attribute:
+
+```html
+<h2 id="myText">This is the text to style.</h2>
+<typography-controller target="#myText"></typography-controller>
+```
+
+## 🌐 Using via CDN (no bundler)
+
+```
+<script type="module" src="https://unpkg.com/typography-controller/dist/typography-controller.js"></script>
+
+<h2 id="demo">Hello World</h2>
+<typography-controller target="#demo"></typography-controller>
+```
+
+## 📚 JavaScript API
+
+### Methods
+| Method | Description | Parameters/Return |
+|--------|-------------|-------------------|
+| getValues() | Returns the current typography values as an object. | Returns: `{ fontSize: number, letterSpacing: number, wordSpacing: number, lineHeight: number, contrast: number, fontFamily: string }` |
+| setValues(values) | Sets the typography values programmatically. | Parameters: `values` (object with keys like `fontSize`, `letterSpacing`, etc.) |
+| setFeatures(features) | Enables or disables specific features (e.g., sliders). | Parameters: `features` (object with boolean keys like `letterSpacing: true`) |
+
+### Events
+| Event | Description | Detail |
+|-------|-------------|--------|
+| change | Fired whenever a value changes via the UI or API. | `event.detail`: Object containing updated values (same as `getValues()` return). |
+
+
+Example
+
+```
+const controller = document.querySelector("typography-controller");
+
+controller.addEventListener("change", (e) => {
+  console.log("Updated values:", e.detail);
+});
+
+controller.setValues({
+  fontSize: 30,
+  letterSpacing: 2,
+  fontFamily: "Georgia"
+});
+```
+
+## ⚛️ React Usage
+
+Basic usage
+```
+import "typography-controller/dist/typography-controller.js";
+
+export default function App() {
+  return (
+    <div>
+      <h2 id="demoText">Typography should feel like breathing space.</h2>
+
+      <typography-controller
+        target="#demoText"
+        hide-letter-spacing
+        onChange={(e) => console.log(e.detail)}
+      ></typography-controller>
+    </div>
+  );
+}
+```
+
+Using JS API (setFeatures, setValues) with refs
+```
+import { useRef, useEffect } from "react";
+import "typography-controller/dist/typography-controller.js";
+
+export default function App() {
+  const ref = useRef();
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.setFeatures({
+        letterSpacing: true,
+        wordSpacing: false,
+        lineHeight: true,
+        contrast: true
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <h2 id="demoText">Hello world</h2>
+
+      <typography-controller
+        ref={ref}
+        target="#demoText"
+        onChange={(e) => console.log(e.detail)}
+      ></typography-controller>
+    </>
+  );
+}
+```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/react/react-wrapper.js

@@ -0,0 +1,314 @@
+import { createComponent as a } from "@lit/react";
+import o 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>
+    `;
+  }
+  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;
+    }
+    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.update(), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: this.getValues(),
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+    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();
+  }
+  toggleGroup(e, t) {
+    const i = this.shadowRoot.querySelector(e);
+    i && (i.style.display = t ? "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}%`);
+  }
+  getValues() {
+    return {
+      fontSize: Number(this.fontSize.value),
+      letterSpacing: Number(this.letterSpacing.value),
+      wordSpacing: Number(this.wordSpacing.value),
+      lineHeight: Number(this.lineHeight.value),
+      contrast: Number(this.contrast.value),
+      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;
+      } else
+        this.fontFamily.value = e.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", ""));
+  }
+};
+customElements.define("typography-controller", r);
+const p = a({
+  react: o,
+  tagName: "typography-controller",
+  elementClass: customElements.get("typography-controller"),
+  events: {
+    onChange: "change"
+  }
+});
+export {
+  p as TypographyController
+};