Merge pull request #265 from phun-ky/chore/some-updates

Chore/some updates

README.md

@@ -24,6 +24,7 @@
     - [React](#react)
   - [Features](#features)
     - [Element spacing](#element-spacing)
+      - [Bound spacing](#bound-spacing)
     - [Element dimensions](#element-dimensions)
       - [Slim measure](#slim-measure)
     - [Pin element to highlight the anatomy](#pin-element-to-highlight-the-anatomy)
@@ -207,13 +208,23 @@ export default Component;
 Use the following attribute to display element padding and margin:
 
 ```html
-<div data-speccer="spacing" class="..."></div>
+<div data-speccer="spacing [padding|margin] [bound]" class="…"></div>
 ```
 
-This will display the element _and all of it's children_ padding and margin.
+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)
@@ -224,7 +235,7 @@ Display dimensions with:
 ```html
 <div
   data-speccer="measure [height left|right] | [width top|bottom]"
-  class="..."
+  class="…"
 ></div>
 ```
 
@@ -239,7 +250,7 @@ Where `height` and `width` comes with placement flags. Default for `height` is `
 Use a slim style:
 
 ```html
-<div data-speccer="measure slim height left" class="..."></div>
+<div data-speccer="measure slim height left" class="…"></div>
 ```
 
 This will give a slimmer look and feel.
@@ -249,7 +260,7 @@ This will give a slimmer look and feel.
 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>
+<div data-speccer="measure slim height left subtle" class="…"></div>
 ```
 
 This will give a dashed border.
@@ -264,7 +275,7 @@ In your component examples, use the following attribute. Remember to use the `da
 <div data-speccer="pin-area">
   <div
     data-speccer="pin [bracket [curly] |enclose] [left|right|top|bottom]"
-    class="..."
+    class="…"
   ></div>
 </div>
 ```
@@ -277,7 +288,7 @@ This will place a pin to the outline of the element. Default is `top`.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin" class="..."></div>
+  <div data-speccer="pin" class="…"></div>
 </div>
 ```
 
@@ -287,7 +298,7 @@ This will place a pin to the outline of the element. Default is `top`.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin enclose" class="..."></div>
+  <div data-speccer="pin enclose" class="…"></div>
 </div>
 ```
 
@@ -297,7 +308,7 @@ This will place a pin to the outline of the element. Default is `top`.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin enclose" class="..."></div>
+  <div data-speccer="pin enclose" class="…"></div>
 </div>
 ```
 
@@ -309,7 +320,7 @@ 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 data-speccer="pin parent [left|right|top|bottom]" class="…"></div>
 </div>
 ```
 
@@ -400,7 +411,7 @@ 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 data-speccer="pin top subtle" class="…"></div>
 </div>
 ```
 
@@ -447,7 +458,7 @@ from v9.5 you can utilize the `pin` feature to highlight the anatomy of an eleme
 Display typography details:
 
 ```html
-<p data-speccer="typography [left|right|top|bottom]" class="...">Some text</p>
+<p data-speccer="typography [left|right|top|bottom]" class="…">Some text</p>
 ```
 
 This will place a box to display typography information. Default is `left`.
@@ -460,7 +471,7 @@ This will place a box to display typography information. Default is `left`.
 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>
+<p data-speccer="typography syntax right" class="…">Some text</p>
 ```
 
 You can then override the colors, based on these variables:

SECURITY.md

@@ -8,8 +8,8 @@ These are the versions that is updated with security patches.
 
 | Version | Supported          |
 | ------- | ------------------ |
-| >= 10.0 | :white_check_mark: |
-| < 10.0  | :x:                |
+| >= 11.0 | :white_check_mark: |
+| < 11.0  | :x:                |
 
 ## Reporting a Vulnerability
 

api/README.md

@@ -8,7 +8,7 @@
 
 ---
 
-> Last updated 2024-08-28T10:13:18.025Z
+> Last updated 2024-08-30T19:21:42.296Z
 
 ## Modules
 
@@ -66,6 +66,7 @@
 - [utils/node](utils/node.md)
 - [utils/number](utils/number.md)
 - [utils/position](utils/position.md)
+- [utils/remove-speccer-element](utils/remove-speccer-element.md)
 - [utils/resize](utils/resize.md)
 - [utils/style-property](utils/style-property.md)
 - [utils/styles](utils/styles.md)

api/config/browser.md

@@ -6,7 +6,7 @@
 
 # config/browser
 
-> Last updated 2024-08-28T10:13:18.027Z
+> Last updated 2024-08-30T19:21:42.299Z
 
 Contains the helper functions to activate SPECCER via a script tag, based on attributes:
 
@@ -102,7 +102,7 @@ A function to activate speccer based on script attributes.
 
 #### Defined in
 
-[config/browser.ts:156](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L156)
+[config/browser.ts:217](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L217)
 
 ---
 
@@ -133,7 +133,7 @@ A function to initialize speccer when the DOM is ready.
 
 #### Defined in
 
-[config/browser.ts:69](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L69)
+[config/browser.ts:81](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L81)
 
 ---
 
@@ -158,7 +158,7 @@ A function to initialize lazy speccer functionality.
 
 #### Defined in
 
-[config/browser.ts:87](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L87)
+[config/browser.ts:99](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L99)
 
 ---
 
@@ -189,7 +189,7 @@ A function to manually activate speccer.
 
 #### Defined in
 
-[config/browser.ts:141](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L141)
+[config/browser.ts:202](https://github.com/phun-ky/speccer/blob/main/src/config/browser.ts#L202)
 
 ---
 

api/features/a11y.md

@@ -6,10 +6,59 @@
 
 # features/a11y
 
-> Last updated 2024-08-28T10:13:18.031Z
+> Last updated 2024-08-30T19:21:42.301Z
+
+This feature will 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)
+
+## Table of Contents
+
+- [Example](#example)
+- [Functions](#functions)
+  - [a11y()](#a11y)
+  - [element()](#element)
+  - [shortcut()](#shortcut)
+
+## Example
+
+Use the following code, either for html or js:
+
+```html
+<div data-speccer="a11y [shortcuts|tabstops|landmark]" class="…">…</div>
+```
+
+```ts
+const targetElement = document.getElementById('target');
+a11y(targetElement);
+```
 
 ## Functions
 
+### a11y()
+
+```ts
+function a11y(): void;
+```
+
+Initializes the accessibility elements on the document.
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+a11y();
+```
+
+#### Defined in
+
+[features/a11y/index.ts:154](https://github.com/phun-ky/speccer/blob/main/src/features/a11y/index.ts#L154)
+
+---
+
 ### element()
 
 ```ts
@@ -19,7 +68,7 @@ function element(targetEl, content?, type?): Promise<void>;
 Adds an accessibility element to the document body based on the target element and type.
 
 ![Screenshot of speccer a11y tab stops in use](https://github.com/phun-ky/speccer/blob/main/public/speccer-a11y-tabstops-light.png?raw=true)
-![Screenshot of speccer a11y landmark in use](https://github.com/phun-ky/speccer/blob/main/public/a11y-landmark.png?raw=true)
+![Screenshot of speccer a11y landmark in use](https://github.com/phun-ky/speccer/blob/main/public/speccer-a11y-landmarks-light.png?raw=true)
 
 #### Parameters
 
@@ -47,31 +96,7 @@ if (targetElement) {
 
 #### Defined in
 
-[features/a11y/index.ts:34](https://github.com/phun-ky/speccer/blob/main/src/features/a11y/index.ts#L34)
-
----
-
-### init()
-
-```ts
-function init(): void;
-```
-
-Initializes the accessibility elements on the document.
-
-#### Returns
-
-`void`
-
-#### Example
-
-```ts
-init();
-```
-
-#### Defined in
-
-[features/a11y/index.ts:129](https://github.com/phun-ky/speccer/blob/main/src/features/a11y/index.ts#L129)
+[features/a11y/index.ts:59](https://github.com/phun-ky/speccer/blob/main/src/features/a11y/index.ts#L59)
 
 ---
 
@@ -83,7 +108,7 @@ function shortcut(el, shortcutString): Promise<void>;
 
 Adds a shortcut element to the document body based on the provided HTML element and shortcut string.
 
-![Screenshot of speccer a11y shortcuts in use](https://github.com/phun-ky/speccer/blob/main/public/a11y-shortcut.png?raw=true)
+![Screenshot of speccer a11y shortcuts in use](https://github.com/phun-ky/speccer/blob/main/public/speccer-a11y-shortcuts-light.png?raw=true)
 
 #### Parameters
 
@@ -109,7 +134,7 @@ if (shortcutElement) {
 
 #### Defined in
 
-[features/a11y/index.ts:77](https://github.com/phun-ky/speccer/blob/main/src/features/a11y/index.ts#L77)
+[features/a11y/index.ts:102](https://github.com/phun-ky/speccer/blob/main/src/features/a11y/index.ts#L102)
 
 ---
 

api/features/a11y/constants.md

@@ -6,7 +6,7 @@
 
 # features/a11y/constants
 
-> Last updated 2024-08-28T10:13:18.032Z
+> Last updated 2024-08-30T19:21:42.302Z
 
 ## Variables
 

api/features/a11y/utils/create-a11y-element.md

@@ -6,7 +6,7 @@
 
 # features/a11y/utils/create-a11y-element
 
-> Last updated 2024-08-28T10:13:18.034Z
+> Last updated 2024-08-30T19:21:42.303Z
 
 ## Functions
 

api/features/a11y/utils/styles.md

@@ -6,7 +6,7 @@
 
 # features/a11y/utils/styles
 
-> Last updated 2024-08-28T10:13:18.034Z
+> Last updated 2024-08-30T19:21:42.303Z
 
 ## Functions