@phun-ky/speccer 11.3.0 → 11.3.1

package/README.md

@@ -1,6 +1,6 @@
-# @phun-ky/speccer
+# SPECCER
 
-![Speccer hero, with logo and slogan: A zero dependency package to annotate or highlight elements](./public/speccer-hero.png)
+![Speccer hero, with logo and slogan: A zero dependency package to annotate or highlight elements](./docs/public/speccer-hero.png)
 
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com)
@@ -16,7 +16,7 @@
 
 ## About
 
-![Image of speccer](./public/speccer-pin-parent-align-light.png)
+![Image of speccer](./docs/public/speccer-pin-parent-align-light.png)
 
 **SPECCER** was originally created to simplify documenting components in a
 design system, but it can be used to annotate or highlight any HTML element on a
@@ -24,52 +24,13 @@ webpage. If you need to draw attention to elements, **SPECCER** is your tool!
 
 ## Table of Contents<!-- omit from toc -->
 
-- [@phun-ky/speccer](#phun-kyspeccer)
+- [SPECCER](#speccer)
   - [About](#about)
   - [Installation](#installation)
-  - [Usage](#usage)
-    - [Typescript](#typescript)
-    - [ESM](#esm)
-      - [Lazy loading](#lazy-loading)
-    - [Script](#script)
-      - [Advanced usage](#advanced-usage)
-    - [React](#react)
-      - [1. Create a hook](#1-create-a-hook)
-      - [2. Use the hook](#2-use-the-hook)
-    - [Storybook](#storybook)
-  - [Features](#features)
-    - [Element spacing](#element-spacing)
-      - [Bound spacing](#bound-spacing)
-    - [Element dimensions](#element-dimensions)
-      - [Slim measure](#slim-measure)
-    - [Pin element to annotate or highlight the anatomy](#pin-element-to-annotate-or-highlight-the-anatomy)
-      - [Default](#default)
-      - [Bracket](#bracket)
-      - [Enclose](#enclose)
-      - [Align with parent container](#align-with-parent-container)
-      - [Pin with text](#pin-with-text)
-      - [Custom literals](#custom-literals)
-      - [Subtle anatomy](#subtle-anatomy)
-      - [Curly brackets](#curly-brackets)
-      - [Pin programmatically](#pin-programmatically)
-    - [Element typography](#element-typography)
-      - [Syntax highlighting for typography](#syntax-highlighting-for-typography)
-  - [Grid spacing](#grid-spacing)
-  - [Mark elements](#mark-elements)
-    - [A11y notation](#a11y-notation)
-      - [Tab stops](#tab-stops)
-      - [Landmarks and regions](#landmarks-and-regions)
-      - [Headings](#headings)
-      - [Autocomplete](#autocomplete)
-      - [Keys and shortcut](#keys-and-shortcut)
-    - [Customization](#customization)
-  - [API](#api)
-  - [Development](#development)
+  - [Documentation](#documentation)
   - [Used by](#used-by)
-  - [Contributing](#contributing)
   - [License](#license)
   - [Changelog](#changelog)
-  - [FAQ](#faq)
   - [Sponsor me](#sponsor-me)
 
 ## Installation
@@ -78,792 +39,14 @@ webpage. If you need to draw attention to elements, **SPECCER** is your tool!
 npm i --save @phun-ky/speccer
 ```
 
-[See a live demo](https://codepen.io/phun-ky/full/OJejexN).
+## Documentation
 
-## Usage
-
-### Typescript
-
-Types can be found in `@phun-ky/speccer/dist/speccer.d.ts`.
-
-### ESM
-
-Either import and run the required functions:
-
-```javascript
-import '@phun-ky/speccer/dist/speccer.min.css';
-import speccer from '@phun-ky/speccer';
-
-// do stuff
-speccer();
-```
-
-#### Lazy loading
-
-If you're importing **SPECCER** instead of with a script tag,
-[you can use the following approach](https://codepen.io/phun-ky/pen/VwRRLyY) to
-apply lazy loading:
-
-```javascript
-import { pin } from 'https://esm.sh/@phun-ky/speccer';
-
-const { pinElements } = pin;
-/**
- * Callback function for IntersectionObserver
- * @param {IntersectionObserverEntry[]} entries - Array of entries being observed
- * @param {IntersectionObserver} observer - The IntersectionObserver instance
- * @returns {Promise<void>} Promise that resolves when element dissection is complete
- */
-const intersectionCallback: IntersectionObserverCallback = async (entries, observer) => {
-  entries.forEach(async (entry) => {
-    if (entry.intersectionRatio > 0) {
-      await pinElements(entry.target);
-      observer.unobserve(entry.target);
-    }
-  });
-};
-// Creating IntersectionObserver instance with the callback
-const pinElementObserver = new IntersectionObserver(intersectionCallback);
-/**
- * Function to observe elements using IntersectionObserver
- * @param {Element} el - The element to be observed
- */
-const observeElement = (el: Element): void => {
-  pinElementObserver.observe(el);
-};
-
-// Observing elements with the specified data attribute
-document.querySelectorAll('[data-speccer="pin-area"]').forEach((el) => {
-  observeElement(el);
-});
-```
-
-### Script
-
-Or place these `script` and `link` tags in your web page:
-
-```html
-<link rel="stylesheet" href="../path/to/speccer.min.css" />
-<script src="../path/to/speccer.js"></script>
-```
-
-Or with a CDN:
-
-```html
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/@phun-ky/speccer/dist/speccer.min.css"
-/>
-<script src="https://unpkg.com/@phun-ky/speccer/dist/speccer.js"></script>
-```
-
-And then follow the steps below to display the specifications you want :)
-
-#### Advanced usage
-
-If you want to control **SPECCER** a bit more, you have some options. Apply one
-of these attributes to the script element for different types of initialization:
-
-```html
-<script src="../speccer.js" data-<manual|instant|dom|lazy></script>
-```
-
-Or with a CDN:
-
-```html
-<script src="https://unpkg.com/@phun-ky/speccer/dist/speccer.js" data-<manual|instant|dom|lazy></script>
-```
-
-| Tag            | Description                                                         |
-| -------------- | ------------------------------------------------------------------- |
-| `data-manual`  | Makes `window.speccer()` available to be used when you feel like it |
-| `data-instant` | fires off `speccer()` right away                                    |
-| `data-dom`     | Waits for `DOMContentLoaded`                                        |
-| `data-lazy`    | Lazy loads `speccer()` per specced element                          |
-
-If no attribute is applied, it will default to `data-dom`, as in, it will
-initialize when `DOMContentLoaded` is fired.
-
-### React
-
-If you use React, you can use an effect like this:
-
-```javascript
-import React, { useEffect } from 'react';
-
-import debounce from './lib/debounce';
-import '@phun-ky/speccer/dist/speccer.min.css';
-
-const Component = () => {
-  let speccerEventFunc;
-
-  useEffect(async () => {
-    const { default: speccer } = await import('@phun-ky/speccer');
-
-    speccer();
-
-    speccerEventFunc = debounce(function () {
-      speccer();
-    }, 300);
-
-    window.addEventListener('resize', speccerEventFunc);
-
-    return () => {
-      window.removeEventListener('resize', speccerEventFunc);
-    };
-  }, []);
-
-  return <div />;
-};
-
-export default Component;
-```
-
-Or a hook like this:
-
-#### 1. Create a hook
-
-```typescript
-// ./hooks/useSpeccer.ts
-import { useEffect } from 'react';
-
-import '@phun-ky/speccer/dist/speccer.min.css';
-import debounce from './lib/debounce';
-
-const useSpeccer = () => {
-  useEffect(() => {
-    let speccerEventFunc: () => void;
-
-    const loadSpeccer = async () => {
-      const { default: speccer } = await import('@phun-ky/speccer');
-
-      speccer();
-
-      speccerEventFunc = debounce(() => {
-        speccer();
-      }, 300);
-
-      window.addEventListener('resize', speccerEventFunc);
-    };
-
-    loadSpeccer();
-
-    return () => {
-      if (speccerEventFunc) {
-        window.removeEventListener('resize', speccerEventFunc);
-      }
-    };
-  }, []);
-};
-```
-
-#### 2. Use the hook
-
-```typescript
-import { useSpeccer } from './hooks/useSpeccer';
-
-export const MyComponent = () => {
-  …
-  useSpeccer();
-  …
-  return <div data-speccer="pin bracket top">…</div>;
-};
-```
-
-### Storybook
-
-You can add **SPECCER** to your stories!
-
-![Image of the Storybook implementation](./public/storybook.png)
-
-In `preview.tsx`:
-
-```typescript
-import '@phun-ky/speccer/dist/speccer.min.css';
-import { debounce } from '@mui/material'; // or any other debounce function
-import { addons } from '@storybook/preview-api';
-
-let speccerEventFunc: (() => void) | undefined;
-
-addons.getChannel().on('docsRendered', async () => {
-  const { default: speccer } = await import('@phun-ky/speccer');
-
-  speccer();
-  speccerEventFunc = debounce(() => {
-    speccer();
-  }, 100);
-
-  window.addEventListener('resize', speccerEventFunc);
-});
-
-addons.getChannel().on('storyChanged', () => {
-  if (speccerEventFunc) {
-    window.removeEventListener('resize', speccerEventFunc);
-    speccerEventFunc = undefined;
-  }
-
-  // Remove all pinned elements
-  document.querySelectorAll('.ph-speccer')?.forEach((el) => {
-    if (el instanceof HTMLElement) {
-      el.remove();
-    }
-  });
-});
-```
-
-And then in your `*.stories.tsx`:
-
-```typescript
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { MyComponent } from '../path-to-component/MyComponent';
-
-export default {
-    title: 'Components/MyComponent',
-    component: MyComponent,
-    tags: ['autodocs'],
-    …
-
-} as ComponentMeta<typeof MyComponent>
-
-const Template: ComponentStory<typeof MyComponent> = (args) => {
-
-  …
-  // you need `data-speccer="pin-area"` on the container of the elements you want to spec
-  return (
-    <div data-speccer="pin-area">
-      <MyComponent {...args} />
-    </div>
-  );
-};
-
-export const Basic = Template.bind({});
-Basic.args = {
-  …,
-  "data-speccer": "pin bracket top",
-};
-```
-
-> [!IMPORTANT] Just make sure `MyComponent` passed down the attributes to the
-> DOM element
-
-## Features
-
-### Element spacing
-
-![Image of the spacing feature](./public/speccer-spacing-light.png)
-
-Use the following attribute to display element padding and margin:
-
-```html
-<div data-speccer="spacing [padding|margin] [bound]" class="…"></div>
-```
-
-This will display the element _and all of it's children_ padding and margin,
-unless you specify `padding` and `margin`
-
-![Image of the spacing feature in dark mode](./public/speccer-spacing-dark.png)
-
-#### Bound spacing
-
-![spacing](./public/speccer-spacing-bound.png)
-
-This option binds the speccer elements to the bounds of the element container.
-
-```html
-<div data-speccer="spacing bound" class="…"></div>
-```
-
-### Element dimensions
-
-![Image of the measure feature](./public/speccer-measure-right-full-light.png)
-![Image of the measure feature](./public/speccer-measure-bottom-dark.png)
-
-Display dimensions with:
-
-```html
-<div
-  data-speccer="measure [height left|right] | [width top|bottom]"
-  class="…"
-></div>
-```
-
-Where `height` and `width` comes with placement flags. Default for `height` is
-`left`, default for `width` is `top`.
-
-![Image of the measure feature](./public/speccer-measure-spacing-example-dark.png)
-
-#### Slim measure
-
-![Image of slim option for measure](./public/speccer-measure-right-light.png)
-
-Use a slim style:
-
-```html
-<div data-speccer="measure slim height left" class="…"></div>
-```
-
-This will give a slimmer look and feel.
-
-##### Subtle slim measure
-
-Use a subtle style for the slim option, uses a dashed line instead of a solid
-line:
-
-```html
-<div data-speccer="measure slim height left subtle" class="…"></div>
-```
-
-This will give a dashed border.
-
-### Pin element to annotate or highlight the anatomy
-
-![Image of speccer](./public/anatomy.png)
-
-In your component examples, use the following attribute. Remember to use the
-`data-speccer="pin-area"`-attribute on a parent element to scope the marking.
-
-```html
-<div data-speccer="pin-area">
-  <div
-    data-speccer="pin [bracket [curly] |enclose] [left|right|top|bottom]"
-    class="…"
-  ></div>
-</div>
-```
-
-This will place a pin to the outline of the element. Default is `top`.
-
-#### Default
-
-![Image of speccer](./public/speccer-pin-default-light.png)
-
-```html
-<div data-speccer="pin-area">
-  <div data-speccer="pin" class="…"></div>
-</div>
-```
-
-#### Bracket
-
-```html
-<div data-speccer="pin-area">
-  <div data-speccer="pin bracket" class="…"></div>
-</div>
-```
-
-#### Enclose
-
-![Image of speccer](./public/speccer-pin-enclose-light.png)
-
-```html
-<div data-speccer="pin-area">
-  <div data-speccer="pin enclose" class="…"></div>
-</div>
-```
-
-##### Subtle enclose
-
-![Image of speccer](./public/speccer-pin-enclose-subtle-light.png)
-
-```html
-<div data-speccer="pin-area">
-  <div data-speccer="pin enclose" class="…"></div>
-</div>
-```
-
-#### Align with parent container
-
-![Screenshot of the dissection/anatomy feature where the pins are aligned with the parent container](./public/speccer-pin-parent-align-default-light.png)
-
-You can also align the pins to the parent container.
-
-```html
-<div data-speccer="pin-area">
-  <div data-speccer="pin parent [left|right|top|bottom]" class="…"></div>
-</div>
-```
-
-> [!NOTE] Only works with `pin [left|right|top|bottom]`, and not with `enclose`,
-> `bracket` or `curly`!
-
-The lines from the element to the pin is drawn with a svg path and circle, so
-remember to add the following svg into your document:
-
-```html
-<svg
-  class="ph-speccer"
-  viewBox="0 0"
-  id="ph-speccer-svg"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    class="ph-speccer path original"
-    id="ph-speccer-path"
-    fill="none"
-    stroke-width="1"
-    stroke="currentColor"
-  />
-</svg>
-```
-
-![Screenshot of the dissection/anatomy feature where the pins are aligned with the parent container](./public/speccer-pin-parent-align-light.png)
-
-#### Pin with text
-
-![Image of text pin option](./public/speccer-pin-text-light.png)
-
-If you want _text-in-place_ pinning feature, instead of referencing the pins,
-you can use the `text` feature:
-
-```html
-<input
-  type="text"
-  …
-  data-speccer="pin left text"
-  data-speccer-title="Static text"
-  data-speccer-description="Document size [xx] by [yy][units]"
-  …
-/>
-```
-
-#### Custom literals
-
-![Image of japanese literals instead of latin characters](./public/speccer-pin-symbols-light.png)
-
-You can use custom literals by assigned a global variable with the literals you
-want:
-
-```js
-window.SPECCER_LITERALS = [
-  'あ',
-  'い',
-  'う',
-  'え',
-  'お',
-  'か',
-  'き',
-  'く',
-  …
-];
-```
-
-Or with a data attribute on the `data-speccer="pin-area"`-element:
-
-```html
-<div data-speccer="pin-area" data-speccer-literals="ऄ|अआइईउऊऋऌऍऎएऐऑऒओऔकखगघङच">
-  …
-</div>
-```
-
-> [!TIP] Try it out with emoticons!
->
-> ```js
-> window.SPECCER_LITERALS = [
->   '🥰',
->   …
-> ];
-> ```
-
-#### Subtle anatomy
-
-![Image of subtle option for anatomy](./public/speccer-pin-default-subtle-light.png)
-
-You can also give a more subtle touch to the anatomy elements.
-
-```html
-<div data-speccer="pin-area">
-  <div data-speccer="pin top subtle" class="…"></div>
-</div>
-```
-
-This will give a dashed border, and a more subtle pin style.
-
-#### Curly brackets
-
-You can use curly brackets with the `curly` tag in `data-speccer` along side
-`pin bracket` to provide a more sleek style.
-
-![Image of curly option for anatomy](./public/speccer-pin-curly-light.png)
-
-> [!NOTE] Only works with `pin bracket`
-
-The curly brackets are made with SVG paths, and it is required to have the
-following snippet on your page for it to render:
-
-```html
-<svg
-  class="ph-speccer"
-  viewBox="0 0"
-  id="ph-speccer-svg"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    class="ph-speccer path original"
-    id="ph-speccer-path"
-    fill="none"
-    stroke-width="1"
-    stroke="currentColor"
-  />
-</svg>
-```
-
-#### Pin programmatically
-
-from v9.5 you can utilize the `pin` feature to annotate or highlight the anatomy
-of an element programmatically.
-[Here is an example with a click event](https://codepen.io/phun-ky/pen/LYKOWyP).
-
-[Kazam_screencast_00002.webm](https://github.com/user-attachments/assets/5c78cece-de46-4876-81f2-98c9108a2103)
-
-### Element typography
-
-![Image of typography speccer](./public/speccer-typography-light.png)
-
-Display typography details:
-
-```html
-<p data-speccer="typography [left|right|top|bottom]" class="…">Some text</p>
-```
-
-This will place a box to display typography information. Default is `left`.
-
-> [!NOTE] > `getComputedStyles` are used to get the _computed_ values, so for
-> example, a `line-height` set to `1.5` will be presented in pixels, like `96px`
-> if the `font-size` is set to `64px`.
-
-#### Syntax highlighting for typography
-
-If you want to produce a box that uses `pre` and `code` tags with support for
-syntax highlighting ([PrismJS](https://prismjs.com/) compatible), add `syntax`
-to the `data-speccer="typography"` attribute.
-
-```html
-<p data-speccer="typography syntax right" class="…">Some text</p>
-```
-
-You can then override the colors, based on these variables:
-
-```css
-.ph-speccer.speccer.typography.syntax {
-  --ph-speccer-color-code-color-1: #737373;
-  --ph-speccer-color-code-color-2: #ff3aa8;
-  --ph-speccer-color-code-color-3: #38383d;
-  --ph-speccer-color-code-color-4: #ff3aa8;
-  --ph-speccer-color-code-color-5: #ff3aa8;
-  --ph-speccer-color-code-color-6: #0074e8;
-  --ph-speccer-color-code-color-7: #000000;
-  --ph-speccer-color-code-color-8: #cd0404;
-}
-```
-
-Here is an example with these colors and overrides:
-
-```css
-.ph-speccer.speccer.typography.syntax {
-  color: #8c9b9b;
-  background-color: #262831;
-  border-radius: 0.375rem;
-  font-size: 12px;
-  line-height: 1.5;
-  border: none;
-  --ph-speccer-color-code-color-1: #859ba3;
-  --ph-speccer-color-code-color-2: #c79500;
-  --ph-speccer-color-code-color-3: #2caaa0;
-  --ph-speccer-color-code-color-4: #469edd;
-  --ph-speccer-color-code-color-5: #8c9b9b;
-  --ph-speccer-color-code-color-6: #e4e4e7;
-  --ph-speccer-color-code-color-7: #262831;
-  --ph-speccer-color-code-color-8: #ff6666;
-}
-```
-
-![Screenshot of typography with different syntax theme](./public/speccer-typography-syntax-light.png)
-
-## Grid spacing
-
-![Screenshot of grid feature](./public/speccer-grid-full-light.png)
-
-This will highlight the grid spacing in a `display: grid;` element.
-
-In your component examples, use the following attribute on your grid container.
-
-```html
-<div data-speccer="grid" …>…</div>
-```
-
-> [!TIP] If you only want to display `rows` or `columns`, use this syntax
-> (default is both with `grid` only):
->
-> ```html
-> <div data-speccer="grid [rows|columns]" …>…</div>
-> ```
-
-![Screenshot of grid feature](./public/speccer-grid-full-dark.png)
-
-## Mark elements
-
-![Screenshot of marked elements](./public/speccer-pin-mark-light.png)
-
-This will mark the given elements.
-
-In your component examples, use the following attribute.
-
-```html
-<div data-speccer="mark" …>…</div>
-```
-
-### A11y notation
-
-With **SPECCER**, you can also display accessibility notation, like
-[Accessibility Bluelines](https://dribbble.com/shots/6269661-Accessibility-Bluelines?utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share)
-or
-[A11y Annotation Kit](https://www.figma.com/community/file/953682768192596304):
-
-Prior art: [Jeremy Elder](https://twitter.com/JeremyElder) and
-[Stephanie Hagadorn](https://shagadorn.work/)
-
-#### Tab stops
-
-![Screenshot of speccer a11y tab stops in use](./public/speccer-a11y-tabstops-light.png)
-
-If you want to display tab stops, append `data-speccer="a11y tabstops"` as an
-attribute to the container you want to display the tab stops in.
-
-#### Landmarks and regions
-
-![Screenshot of speccer a11y landmarks in use](./public/speccer-a11y-landmarks-light.png)
-
-If you want to display landmarks and regions, append
-`data-speccer="a11y landmark"` as an attribute to the container you want to
-display the landmarks and regions in.
-
-#### Headings
-
-![Screenshot of speccer a11y headings in use](./public/speccer-a11y-headings-light.png)
-
-If you want to display headings, append `data-speccer="a11y headings"` as an
-attribute to the container you want to display the headings in.
-
-#### Autocomplete
-
-![Screenshot of speccer a11y autocomplete in use](./public/speccer-a11y-autocomplete-light.png)
-
-If you want to display autocomplete, append `data-speccer="a11y autocomplete"`
-as an attribute to the container you want to display the autocomplete in.
-
-#### Keys and shortcut
-
-![Screenshot of speccer a11y shortcuts in use](./public/speccer-a11y-shortcuts-light.png)
-
-If you want to display the shortcut with keys used for elements, use
-`data-speccer="a11y shortcut"` and `data-speccer-a11y-shortcut="<shortcut>"` on
-the element that uses this shortcut:
-
-```html
-<button
-  type="button"
-  data-speccer="a11y shortcut"
-  data-speccer-a11y-shortcut="ctrl + s"
->
-  Save
-</button>
-```
-
-### Customization
-
-![Screenshot of speccer in a dark mode example](./public/speccer-measure-spacing-example-dark.png)
-
-Although the styling works nicely with dark mode, you can use the provided CSS
-variables to customize the look and feel. If more control is needed, you can use
-CSS overrides :)
-
-```css
-.ph-speccer.speccer {
-  --ph-speccer-color-artificialStrawberry: #ff3aa8;
-  --ph-speccer-color-venusSlipperOrchid: #db6fff;
-  --ph-speccer-color-superBanana: #fff76f;
-  --ph-speccer-color-white: #ffffff;
-  --ph-speccer-color-carbon: #333333;
-  --ph-speccer-color-red: #ff0000;
-  --ph-speccer-color-niuZaiSeDenim: #0074e8;
-  --ph-speccer-color-beautifulBlue: #1868b2;
-  --ph-speccer-color-fuchsiaBlue: #7e60c5;
-  --ph-speccer-base-color: var(--ph-speccer-color-artificialStrawberry);
-  --ph-speccer-spacing-color: var(--ph-speccer-base-color);
-  --ph-speccer-spacing-padding-color: var(--ph-speccer-color-carbon);
-  --ph-speccer-spacing-padding-color-background: rgb(
-    from var(--ph-speccer-color-venusSlipperOrchid) r g b /
-      var(--ph-speccer-opacity-40)
-  );
-  --ph-speccer-spacing-margin-color: var(--ph-speccer-color-red);
-  --ph-speccer-spacing-margin-color-background: rgb(
-    from var(--ph-speccer-color-superBanana) r g b /
-      var(--ph-speccer-opacity-40)
-  );
-  --ph-speccer-spacing-line-width: var(--ph-speccer-line-width);
-  --ph-speccer-typography-background-color: var(--ph-speccer-color-white);
-  --ph-speccer-typography-color-property: var(--ph-speccer-color-niuZaiSeDenim);
-  --ph-speccer-typography-color-text: var(--ph-speccer-base-color);
-  --ph-speccer-typography-color-value: var(--ph-speccer-base-color);
-  --ph-speccer-mark-background-color: rgb(
-    from var(--ph-speccer-base-color) r g b / var(--ph-speccer-opacity-20)
-  );
-  --ph-speccer-mark-border-color: var(--ph-speccer-base-color);
-  --ph-speccer-mark-border-width: 1.5px;
-  --ph-speccer-mark-border-style: solid;
-  --ph-speccer-measure-color: var(--ph-speccer-color-red);
-  --ph-speccer-measure-line-width: 1.5px;
-  --ph-speccer-measure-border-style: dotted;
-  --ph-speccer-measure-size: 8px;
-  --ph-speccer-a11y-color-background: var(--ph-speccer-color-beautifulBlue);
-  --ph-speccer-a11y-landmark-color-background: var(
-    --ph-speccer-color-fuchsiaBlue
-  );
-  --ph-speccer-color-text-light: var(--ph-speccer-color-white);
-  --ph-speccer-color-text-dark: var(--ph-speccer-color-carbon);
-  --ph-speccer-pin-color: var(--ph-speccer-base-color);
-  --ph-speccer-pin-size: 24px;
-  --ph-speccer-pin-space: 48px;
-  --ph-speccer-line-height: 12px;
-  --ph-speccer-line-width: 1.5px;
-  --ph-speccer-line-width-negative: -1.5px;
-  --ph-speccer-opacity-20: 0.2;
-  --ph-speccer-opacity-40: 0.4;
-  --ph-speccer-font-family:
-    'Menlo for Powerline', 'Menlo Regular for Powerline', 'DejaVu Sans Mono',
-    Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  --ph-speccer-font-size: 12px;
-  --ph-speccer-transition-default: all 2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-```
-
-## API
-
-Full API documentation is available
-[here](https://github.com/phun-ky/speccer/blob/main/docs/api/index.md).
-
-## Development
-
-```shell-session
-// Build
-$ npm run build
-// Run dev
-$ npm run dev
-// Test
-$ npm test
-```
+To see the documentation, go to [speccer.dev](https://speccer.dev).
 
 ## Used by
 
-| [![if insurance logo](./public/used-by-if.png)](https://www.if-insurance.com) | [![24seven office logo](./public/used-by-tfso.png)](https://24sevenoffice.com) |
-| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-
-## Contributing
-
-Want to contribute? Please read the
-[CONTRIBUTING.md](https://github.com/phun-ky/speccer/blob/main/CONTRIBUTING.md)
-and
-[CODE_OF_CONDUCT.md](https://github.com/phun-ky/speccer/blob/main/CODE_OF_CONDUCT.md)
+| [![if insurance logo](./docs/public/used-by-if.png)](https://www.if-insurance.com) | [![24seven office logo](./docs/public/used-by-tfso.png)](https://24sevenoffice.com) |
+| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
 
 ## License
 
@@ -877,12 +60,6 @@ See the
 [CHANGELOG.md](https://github.com/phun-ky/speccer/blob/main/CHANGELOG.md) for
 details on the latest updates.
 
-## FAQ
-
-See the
-[discussions](https://github.com/phun-ky/speccer/discussions/categories/q-a) for
-an FAQ or to ask questions if no answer is given.
-
 ## Sponsor me
 
 I'm an Open Source evangelist, creating stuff that does not exist yet to help
@@ -895,7 +72,7 @@ we're all part of :)
 
 [Support me on GitHub Sponsors](https://github.com/sponsors/phun-ky).
 
-![Speccer banner, with logo and slogan: A zero dependency package to annotate or highlight elements](./public/speccer-banner.png)
+![Speccer banner, with logo and slogan: A zero dependency package to annotate or highlight elements](./docs/public/speccer-banner.png)
 
 p.s. **Ukraine is still under brutal Russian invasion. A lot of Ukrainian people
 are hurt, without shelter and need help**. You can help in various ways, for

package/dist/speccer.d.ts

@@ -21,7 +21,7 @@ declare global {
         speccer: any;
         /**
          * Represents the custom literals to be used.
-         * ![Screenshot of speccer with custom literals](https://github.com/phun-ky/speccer/blob/main/public/literals.png?raw=true)
+         * ![Screenshot of speccer with custom literals](/literals.png?raw=true)
          * @example
          * ```js
          * window.SPECCER_LITERALS = [あ,い,う,え,お,か,き,く,け,こ,さ,し,す,せ,そ,た,ち,つ,て,と,な,に,ぬ,ね,の,は,ひ,ふ,へ,ほ,ま,み,む,め,も,や,ゆ,よ,ら,り,る,れ,ろ,わ,を];
@@ -38,7 +38,7 @@ declare global {
  *
  * This feature will annotate or highlight accessibility areas like landmarks and region. It can also display tab stops/sequence and any keyboard shortcuts assigned
  *
- * ![pin](https://github.com/phun-ky/speccer/blob/main/public/speccer-a11y-tabstops-light.png?raw=true)
+ * ![pin](/speccer-a11y-tabstops-light.png?raw=true)
  *
  * @example
  *
@@ -318,7 +318,7 @@ declare const removeSpeccerElement: (el: HTMLElement) => void;
 /**
  * This feature will highlight the grid spacing in a `display: grid;` element.
  *
- * ![pin](https://github.com/phun-ky/speccer/blob/main/public/speccer-grid-full-light.png?raw=true)
+ * ![pin](/speccer-grid-full-light.png?raw=true)
  *
  * @example
  *
@@ -353,7 +353,7 @@ declare const grid: {
 /**
  * This feature highlights the spacing of an element.
  *
- * ![pin](https://github.com/phun-ky/speccer/blob/main/public/speccer-spacing-dark.png?raw=true)
+ * ![pin](/speccer-spacing-dark.png?raw=true)
  * *
  * @example
  *
@@ -379,7 +379,7 @@ declare const spacing: {
 /**
  * This feature annotate or highlight the anatomy of an element.
  *
- * ![pin](https://github.com/phun-ky/speccer/blob/main/public/anatomy.png?raw=true)
+ * ![pin](/anatomy.png?raw=true)
  *
  * In your component examples, use the following attribute. Remember to use the `data-speccer="pin-area"`-attribute on a parent element to scope the marking.
  *
@@ -402,7 +402,7 @@ declare const pin: {
 /**
  * This feature measures given element
  *
- * ![pin](https://github.com/phun-ky/speccer/blob/main/public/speccer-pin-measure-height-light.png?raw=true)
+ * ![pin](/speccer-pin-measure-height-light.png?raw=true)
  *
  * @example
  *
@@ -437,7 +437,7 @@ declare const measure: {
 /**
  * This feature marks given element
  *
- * ![pin](https://github.com/phun-ky/speccer/blob/main/public/speccer-pin-mark-light.png?raw=true)
+ * ![pin](/speccer-pin-mark-light.png?raw=true)
  *
  * @example
  *
@@ -469,7 +469,7 @@ declare const mark: {
 /**
  * This feature presents typography
  *
- * ![pin](https://github.com/phun-ky/speccer/blob/main/public/speccer-typography-light.png?raw=true)
+ * ![pin](/speccer-typography-light.png?raw=true)
  *
  * @example
  *

package/dist/speccer.esm.js

@@ -2,7 +2,7 @@
 * @phun-ky/speccer
 * A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
 * @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
-* @version 11.3.0
+* @version 11.3.1
 * @license
 * Copyright (c) 2018-2025 Alexander Vassbotn Røyne-Helgesen
 *

package/dist/speccer.js

@@ -2,7 +2,7 @@
 * @phun-ky/speccer
 * A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
 * @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
-* @version 11.3.0
+* @version 11.3.1
 * @license
 * Copyright (c) 2018-2025 Alexander Vassbotn Røyne-Helgesen
 *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "11.3.0",
+  "version": "11.3.1",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "keywords": [
     "a11y",