@phun-ky/speccer 10.1.0 → 11.1.0

package/dist/speccer.css

@@ -13,19 +13,22 @@
 .ph-speccer.speccer{
   --ph-speccer-base-color: var(--ph-speccer-color-artificialStrawberry);
   --ph-speccer-spacing-color: var(--ph-speccer-base-color);
-  --ph-speccer-spacing-color-padding: rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b / var(--ph-speccer-opacity-40));
-  --ph-speccer-spacing-color-padding-hover: var(--ph-speccer-color-venusSlipperOrchid);
-  --ph-speccer-spacing-color-margin: rgb(from var(--ph-speccer-color-superBanana) r g b / var(--ph-speccer-opacity-40));
-  --ph-speccer-spacing-color-margin-hover: var(--ph-speccer-color-superBanana);
+  --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: 1px;
+  --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);
@@ -35,8 +38,8 @@
   --ph-speccer-pin-size: 24px;
   --ph-speccer-pin-space: 48px;
   --ph-speccer-line-height: 12px;
-  --ph-speccer-line-width: 1px;
-  --ph-speccer-line-width-negative: -1px;
+  --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;
@@ -88,7 +91,7 @@ svg.ph-speccer .ph-speccer.circle {
   counter-reset: type;
 }
 .ph-speccer.speccer.pin {
-  font-family: sans-serif;
+  font-family: var(--ph-speccer-font-family);
   height: var(--ph-speccer-pin-size);
   width: var(--ph-speccer-pin-size);
   display: flex;
@@ -113,6 +116,7 @@ svg.ph-speccer .ph-speccer.circle {
   z-index: 99999;
 }
 .ph-speccer.speccer.pin.svg::after,
+.ph-speccer.speccer.pin.text::after,
 .ph-speccer.speccer.pin.curly::after {
   content: none !important;
 }
@@ -155,6 +159,59 @@ svg.ph-speccer .ph-speccer.circle {
   top: 50%;
   right: 100%;
 }
+.ph-speccer.path.speccer.text {
+  color: var(--ph-speccer-color-text-dark);
+}
+.ph-speccer.speccer.pin.text {
+  font-family: var(--ph-speccer-font-family);
+  height: auto;
+  min-height: var(--ph-speccer-pin-size);
+  display: flex;
+  position: absolute;
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--ph-speccer-color-text-dark);
+  font-weight: 400;
+  align-items: flex-start;
+  justify-content: center;
+  line-height: 130%;
+  z-index: 100000;
+  flex-direction: column;
+  width: 250px;
+  grid-gap: 2px;
+}
+.ph-speccer.speccer.pin.text.right {
+  padding-left: 1rem;
+}
+.ph-speccer.speccer.pin.text.left {
+  padding-right: 1rem;
+  width: 170px;
+}
+.ph-speccer.speccer.pin.text.top {
+  padding-bottom: 1rem;
+}
+.ph-speccer.speccer.pin.text.bottom {
+  padding-top: 1rem;
+}
+.ph-speccer.speccer.pin.text .ph-speccer.title {
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 11px;
+}
+.ph-speccer.speccer.pin.text .ph-speccer.description {
+  line-height: 130%;
+  position: relative;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+.ph-speccer.speccer.pin.text .ph-speccer.heading {
+  line-height: 130%;
+  position: relative;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  color: var(--ph-speccer-base-color);
+}
 .ph-speccer.speccer.pin.enclose {
   border-radius: 0;
   background-color: transparent;
@@ -668,6 +725,13 @@ svg.ph-speccer .ph-speccer.circle {
 }
 .ph-speccer.speccer.typography.syntax > pre {
   margin: 0;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  font-family: var(--ph-speccer-font-family);
+  color: var(--ph-speccer-color-text-light);
+  background: transparent;
+  border-radius: 0;
 }
 .ph-speccer.speccer.typography.syntax {
   --ph-speccer-color-code-color-1: #737373;
@@ -808,7 +872,7 @@ svg.ph-speccer .ph-speccer.circle {
   left: -32px;
   top: 100%;
   width: 32px;
-  height: calc(var(--ph-speccer-grid-gap) + 2px);
+  height: calc(var(--ph-speccer-grid-row-gap) + 2px);
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
 }
@@ -846,7 +910,7 @@ svg.ph-speccer .ph-speccer.circle {
   left: -32px;
   top: 100%;
   width: 32px;
-  height: calc(var(--ph-speccer-grid-gap) + 2px);
+  height: calc(var(--ph-speccer-grid-row-gap) + 2px);
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
 }
@@ -883,185 +947,324 @@ svg.ph-speccer .ph-speccer.circle {
   bottom: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
 }
 .ph-speccer.speccer.spacing {
-  pointer-events: auto;
+  pointer-events: none;
   transition: none;
-  border: var(--ph-speccer-line-width) solid transparent;
-}
-.ph-speccer.speccer.spacing:hover {
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-}
-.ph-speccer.speccer.spacing.margin {
-  background-color: var(--ph-speccer-spacing-color-margin);
-  color: var(--ph-speccer-color-text-dark);
+  white-space: nowrap;
 }
 .ph-speccer.speccer.spacing.padding {
-  background-color: var(--ph-speccer-spacing-color-padding);
-  color: var(--ph-speccer-spacing-color);
-}
-.ph-speccer.speccer.spacing.margin.bottom::after,
-.ph-speccer.speccer.spacing.margin.top::after {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 100%;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  width: 9px;
-  left: 40%;
-}
-.ph-speccer.speccer.spacing.margin.bottom::before,
-.ph-speccer.speccer.spacing.margin.top::before {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 100%;
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  margin-left: 4px;
-  width: 0;
-  left: 40%;
+  background-color: var(--ph-speccer-spacing-padding-color-background);
+  color: var(--ph-speccer-spacing-padding-color);
 }
-.ph-speccer.speccer.spacing.margin.left::after,
-.ph-speccer.speccer.spacing.margin.right::after {
+.ph-speccer.speccer.spacing.padding::after,
+.ph-speccer.speccer.spacing.padding::before {
   transition: none;
   content: "";
   position: absolute;
-  height: 9px;
-  border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  width: 100%;
-  top: 10%;
 }
-.ph-speccer.speccer.spacing.margin.left::before,
-.ph-speccer.speccer.spacing.margin.right::before {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 0;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  margin-top: 4px;
-  width: 100%;
-  top: 10%;
+.ph-speccer.speccer.spacing.padding.bottom,
+.ph-speccer.speccer.spacing.padding.top {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 4px;
 }
 .ph-speccer.speccer.spacing.padding.bottom::after,
 .ph-speccer.speccer.spacing.padding.top::after {
-  transition: none;
-  content: "";
-  position: absolute;
+  left: calc(6ch - 5px);
   height: 100%;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  width: 9px;
-  left: 40%;
+  width: 10px;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
+  border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
 }
 .ph-speccer.speccer.spacing.padding.bottom::before,
 .ph-speccer.speccer.spacing.padding.top::before {
-  transition: none;
-  content: "";
-  position: absolute;
+  left: 6ch;
   height: 100%;
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  margin-left: 4px;
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
   width: 0;
-  left: 40%;
+}
+.ph-speccer.speccer.spacing.padding.left,
+.ph-speccer.speccer.spacing.padding.right {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  padding-bottom: 4px;
 }
 .ph-speccer.speccer.spacing.padding.left::after,
 .ph-speccer.speccer.spacing.padding.right::after {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 9px;
-  border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
+  top: calc(100% - 24px - 10px);
+  height: 10px;
   width: 100%;
-  top: 10%;
+  border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
 }
 .ph-speccer.speccer.spacing.padding.left::before,
 .ph-speccer.speccer.spacing.padding.right::before {
+  top: calc(100% - 24px - 5px);
+  height: 0;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
+  width: 100%;
+}
+.ph-speccer.speccer.spacing.margin {
+  background-color: var(--ph-speccer-spacing-margin-color-background);
+  color: var(--ph-speccer-spacing-margin-color);
+}
+.ph-speccer.speccer.spacing.margin.bottom,
+.ph-speccer.speccer.spacing.margin.top {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 4px;
+}
+.ph-speccer.speccer.spacing.margin.right,
+.ph-speccer.speccer.spacing.margin.left {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  padding-bottom: 4px;
+}
+.ph-speccer.speccer.spacing.margin::after,
+.ph-speccer.speccer.spacing.margin::before {
   transition: none;
   content: "";
   position: absolute;
+}
+.ph-speccer.speccer.spacing.margin.bottom::after,
+.ph-speccer.speccer.spacing.margin.top::after {
+  left: calc(6ch - 5px);
+  height: 100%;
+  width: 10px;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+}
+.ph-speccer.speccer.spacing.margin.bottom::before,
+.ph-speccer.speccer.spacing.margin.top::before {
+  left: 6ch;
+  height: 100%;
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  width: 0;
+}
+.ph-speccer.speccer.spacing.margin.left::after,
+.ph-speccer.speccer.spacing.margin.right::after {
+  height: 10px;
+  border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  width: 100%;
+  top: calc(100% - 24px - 10px);
+}
+.ph-speccer.speccer.spacing.margin.left::before,
+.ph-speccer.speccer.spacing.margin.right::before {
   height: 0;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  margin-top: 4px;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
   width: 100%;
-  top: 10%;
+  top: calc(100% - 24px - 5px);
+}
+.ph-speccer.speccer.spacing.bound.padding.bottom,
+.ph-speccer.speccer.spacing.bound.margin.bottom,
+.ph-speccer.speccer.spacing.bound.padding.top,
+.ph-speccer.speccer.spacing.bound.margin.top,
+.ph-speccer.speccer.spacing.bound.padding.right,
+.ph-speccer.speccer.spacing.bound.margin.right,
+.ph-speccer.speccer.spacing.bound.padding.left,
+.ph-speccer.speccer.spacing.bound.margin.left {
+  justify-content: center;
+  align-items: center;
+  padding: 0;
 }
 .ph-speccer.speccer.measure {
   display: flex;
 }
-.ph-speccer.speccer.measure.width {
+.ph-speccer.speccer.measure.height {
   color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
-  border-bottom: none;
-  height: var(--ph-speccer-measure-size);
+  border-top: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
+  border-bottom: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
 }
-.ph-speccer.speccer.measure.width::after {
-  content: attr(data-measure);
+.ph-speccer.speccer.measure.height.left::before {
+  content: '';
+  display: block;
+  height: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
   position: absolute;
-  top: calc(-100% - 10px);
-}
-.ph-speccer.speccer.measure.width.bottom {
-  color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
-  border-top: none;
+  left: calc(64px - 5px);
+  width: 10px;
+  border-top: var(--ph-speccer-measure-line-width) solid;
+  border-bottom: var(--ph-speccer-measure-line-width) solid;
 }
-.ph-speccer.speccer.measure.width.bottom::after {
+.ph-speccer.speccer.measure.height.left::after {
+  position: static;
   content: attr(data-measure);
+  display: flex;
+  width: 64px;
+  height: 100%;
+  line-height: 100%;
+  margin-right: auto;
+  border-right: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+.ph-speccer.speccer.measure.height.right::before {
+  content: '';
+  display: block;
+  height: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
   position: absolute;
-  top: calc(100% + 5px);
+  left: calc(100% - 64px - 5px);
+  width: 10px;
+  border-top: var(--ph-speccer-measure-line-width) solid;
+  border-bottom: var(--ph-speccer-measure-line-width) solid;
+}
+.ph-speccer.speccer.measure.height.right::after {
+  position: static;
+  content: attr(data-measure);
+  display: flex;
+  width: 64px;
+  height: 100%;
+  line-height: 100%;
+  margin-left: auto;
+  border-left: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-start;
+  padding-left: 8px;
 }
-.ph-speccer.speccer.measure.width.top {
+.ph-speccer.speccer.measure.width {
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
   color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
-  border-bottom: none;
+  border-left: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
+  border-right: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
+}
+.ph-speccer.speccer.measure.width.top::before {
+  content: '';
+  display: block;
+  width: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
+  position: absolute;
+  top: calc(36px - 5px);
+  height: 10px;
+  border-left: var(--ph-speccer-measure-line-width) solid;
+  border-right: var(--ph-speccer-measure-line-width) solid;
 }
 .ph-speccer.speccer.measure.width.top::after {
+  position: static;
   content: attr(data-measure);
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  width: 100%;
+  line-height: 18px;
+  margin-bottom: auto;
+  border-bottom: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-end;
+  padding-bottom: 4px;
+}
+.ph-speccer.speccer.measure.width.bottom::before {
+  content: '';
+  display: block;
+  width: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
   position: absolute;
-  bottom: calc(100% + 5px);
+  top: calc(100% - 36px - 5px);
+  height: 10px;
+  border-left: var(--ph-speccer-measure-line-width) solid;
+  border-right: var(--ph-speccer-measure-line-width) solid;
+}
+.ph-speccer.speccer.measure.width.bottom::after {
+  position: static;
+  content: attr(data-measure);
+  display: flex;
+  height: 36px;
+  width: 100%;
+  line-height: 18px;
+  margin-top: auto;
+  flex-direction: column;
+  border-top: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-start;
+  padding-top: 4px;
+}
+.ph-speccer.speccer.measure.slim.height {
+  width: var(--ph-speccer-measure-size);
 }
-.ph-speccer.speccer.measure.height.left {
+.ph-speccer.speccer.measure.slim.height::before {
+  content: none !important;
+}
+.ph-speccer.speccer.measure.slim.height.left {
   color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
   border-right: none;
-  width: var(--ph-speccer-measure-size);
 }
-.ph-speccer.speccer.measure.height.left::after {
-  content: attr(data-measure);
+.ph-speccer.speccer.measure.slim.height.right {
+  color: var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
+  border-left: none;
+}
+.ph-speccer.speccer.measure.slim.height.left::after {
   position: absolute;
   top: 50%;
+  width: auto;
+  height: auto;
+  margin: 0;
+  white-space: nowrap;
+  padding: 0;
+  border: none;
   left: calc(-100% - 20px - var(--ph-speccer-line-width));
   transform: translateY(-50%) rotate(-90deg);
 }
-.ph-speccer.speccer.measure.height.right {
-  color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
-  border-left: none;
-  width: var(--ph-speccer-measure-size);
-}
-.ph-speccer.speccer.measure.height.right::after {
-  content: attr(data-measure);
+.ph-speccer.speccer.measure.slim.height.right::after {
   position: absolute;
+  width: auto;
+  height: auto;
+  border: none;
+  padding: 0;
+  margin: 0;
   top: 50%;
+  white-space: nowrap;
   left: calc(100% - var(--ph-speccer-measure-size));
   transform: translateY(-50%) rotate(90deg);
 }
-.ph-speccer.speccer.measure.subtle.width.top,
-.ph-speccer.speccer.measure.subtle.width.bottom,
-.ph-speccer.speccer.measure.subtle.height.right,
-.ph-speccer.speccer.measure.subtle.height.left {
+.ph-speccer.speccer.measure.slim.width {
+  height: var(--ph-speccer-measure-size);
+}
+.ph-speccer.speccer.measure.slim.width::before {
+  content: none !important;
+}
+.ph-speccer.speccer.measure.slim.width.bottom {
+  color: var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
+  border-top: none;
+}
+.ph-speccer.speccer.measure.slim.width.top {
+  color: var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
+  border-bottom: none;
+}
+.ph-speccer.speccer.measure.slim.width.top::after {
+  position: absolute;
+  bottom: calc(100% + 5px);
+  padding: 0;
+  border: none;
+  height: auto;
+}
+.ph-speccer.speccer.measure.slim.width.bottom::after {
+  position: absolute;
+  top: calc(100% + 5px);
+  padding: 0;
+  border: none;
+  height: auto;
+}
+.ph-speccer.speccer.measure.slim.subtle.width.top,
+.ph-speccer.speccer.measure.slim.subtle.width.bottom,
+.ph-speccer.speccer.measure.slim.subtle.height.right,
+.ph-speccer.speccer.measure.slim.subtle.height.left {
   border-style: dashed;
 }
-.ph-speccer.speccer.measure.subtle.width.top {
+.ph-speccer.speccer.measure.slim.subtle.width.top {
   border-bottom: none;
 }
-.ph-speccer.speccer.measure.subtle.width.bottom {
+.ph-speccer.speccer.measure.slim.subtle.width.bottom {
   border-top: none;
 }
-.ph-speccer.speccer.measure.subtle.height.right {
+.ph-speccer.speccer.measure.slim.subtle.height.right {
   border-left: none;
 }
-.ph-speccer.speccer.measure.subtle.height.left {
+.ph-speccer.speccer.measure.slim.subtle.height.left {
   border-right: none;
 }
 .ph-speccer.speccer.mark {

package/dist/speccer.d.ts

@@ -1,4 +1,40 @@
 type SpeccerFunctionType = () => void;
+type SpeccerFeatureType = 'pin' | 'grid' | 'mark' | 'typography' | 'measure' | 'spacing';
+type SpeccerPositionType = 'top' | 'left' | 'right' | 'bottom';
+interface SpeccerOptionsInterface {
+    slug: string;
+    position: SpeccerPositionType;
+    type: SpeccerFeatureType;
+    pin?: {
+        bracket: boolean;
+        enclose: boolean;
+        subtle: boolean;
+        parent: boolean;
+        text: boolean;
+        useSVGLine: boolean;
+        useCurlyBrackets: boolean;
+    };
+    measure?: {
+        slim: boolean;
+        height: boolean;
+        width: boolean;
+    };
+    typography?: {
+        useSyntaxHighlighting: boolean;
+    };
+    spacing?: {
+        margin?: boolean;
+        padding?: boolean;
+        both?: boolean;
+        bound?: boolean;
+    };
+    grid?: {
+        toggle: string;
+        both?: boolean;
+        rows?: boolean;
+        columns?: boolean;
+    };
+}
 
 /**
  * Extends the global Window interface to add custom properties.
@@ -35,30 +71,49 @@ declare global {
 }
 //# sourceMappingURL=global.d.ts.map
 
+/**
+ * Remove a speccer element by removing associated elements and SVG paths.
+ *
+ * This function removes any speccer elements linked to the specified element and
+ * also removes any SVG paths that might be associated with it.
+ *
+ * @param {HTMLElement} el - The HTML element to unpin.
+ * @returns {void} This function does not return a value.
+ *
+ * @example
+ * ```ts
+ * const element = document.getElementById('my-element');
+ * if (element) {
+ *   removeSpeccerElement(element);
+ * }
+ * ```
+ */
+declare const removeSpeccerElement: (el: HTMLElement) => void;
+
 declare const grid: {
-    create: (targetElement: HTMLElement, styles: CSSStyleDeclaration, options: Record<string, string>) => Promise<void>;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    create: (targetElement: HTMLElement, styles: CSSStyleDeclaration, options: SpeccerOptionsInterface) => Promise<void>;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const spacing: {
     create: (text?: string | number, tag?: string) => HTMLElement;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const pin: {
-    createPinElement: (textContent: string | undefined, area: string, id?: string, n?: string) => HTMLElement;
-    pinElement: (targetElement: HTMLElement, symbol: string, parentElement: HTMLElement, areas?: string) => Promise<string | void>;
-    pinElements: (sectionElement: HTMLElement) => Promise<void>;
+    createPinElement: (content: string | undefined, options: SpeccerOptionsInterface, id?: string, n?: string) => HTMLElement;
+    pinElement: (targetElement: HTMLElement, parentElement: HTMLElement, content: string, options: SpeccerOptionsInterface) => Promise<string | void>;
+    pinElements: (sectionElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const measure: {
-    create: (text?: string | number, area?: string | null, tag?: string) => HTMLElement;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    create: (text: (string | number) | undefined, options: SpeccerOptionsInterface, id: string, tag?: string) => HTMLElement;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const mark: {
-    create: (n?: string) => HTMLElement;
+    create: (id: string, n?: string) => HTMLElement;
     element: (targetElement: HTMLElement) => Promise<void>;
 };
 declare const typography: {
-    create: (html: string, area: string | null) => HTMLElement;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    create: (html: string, options: SpeccerOptionsInterface, id: string) => HTMLElement;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const modes: {
     dom: (speccer: SpeccerFunctionType) => void;
@@ -68,4 +123,4 @@ declare const modes: {
 };
 declare const speccer: () => void;
 
-export { speccer as default, grid, mark, measure, modes, pin, spacing, typography };
+export { speccer as default, grid, mark, measure, modes, pin, removeSpeccerElement, spacing, typography };