@phun-ky/speccer 5.0.0 → 6.0.0

package/speccer.min.css

@@ -1 +1 @@
-.ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400: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-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:var(--ph-speccer-pin-color);border-radius:100%;box-sizing:initial;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.is-specced:hover~.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin-hover)}.is-specced:hover~.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding-hover);color:var(--ph-speccer-color-text-light)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:12px;line-height:140%;max-width:none;min-width:320px;padding:8px 24px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);left:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.right:after{height:var(--ph-speccer-line-width);left:auto;right:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:48px;left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:12px;line-height:140%;list-style:none;margin:0;padding:0 0 0 1rem;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:12px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:12px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}
+.ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400: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-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}body.ph{box-sizing:border-box;margin:12px;padding:12px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:var(--ph-speccer-pin-color);border-radius:100%;box-sizing:initial;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}

package/src/{browser.js → browser.ts}

@@ -2,13 +2,15 @@
 'use strict';
 
 import * as resize from './lib/resize';
-import * as spec from './spec';
-import * as measure from './measure';
-import * as dissect from './dissect';
+import * as spec from './tasks/spec';
+import * as measure from './tasks/measure';
+import * as dissect from './tasks/dissect';
 
-export const dom = (speccer) => {
+export const dom = (speccer: Function) => {
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', speccer);
+    document.addEventListener('DOMContentLoaded', () => {
+      speccer();
+    });
   } else {
     // `DOMContentLoaded` already fired
     speccer();
@@ -17,9 +19,9 @@ export const dom = (speccer) => {
 
 export const lazy = () => {
   const _spec_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el) => {
+    els.forEach((el: IntersectionObserverEntry) => {
       if (el.intersectionRatio > 0) {
-        spec.element(el.target);
+        spec.element(el.target as HTMLElement);
         observer.unobserve(el.target);
       }
     });
@@ -32,7 +34,7 @@ export const lazy = () => {
   const _measure_observer = new IntersectionObserver((els, observer) => {
     els.forEach((el) => {
       if (el.intersectionRatio > 0) {
-        measure.element(el.target);
+        measure.element(el.target as HTMLElement);
         observer.unobserve(el.target);
       }
     });
@@ -58,20 +60,21 @@ export const lazy = () => {
   });
 };
 
-export const manual = (speccer) => {
+export const manual = (speccer: Function) => {
   window.speccer = speccer;
 };
 
-export const activate = (speccer) => {
+export const activate = (speccer: Function) => {
   const _script = document.currentScript;
 
   if (_script) {
     const _speccer_script_src = _script.getAttribute('src');
 
     if (
-      _speccer_script_src.indexOf('speccer.js') !== -1 ||
-      // for codepen
-      _speccer_script_src.indexOf('JaXpOK.js') !== -1
+      _speccer_script_src &&
+      (_speccer_script_src.indexOf('speccer.js') !== -1 ||
+        // for codepen
+        _speccer_script_src.indexOf('JaXpOK.js') !== -1)
     ) {
       if (_script.hasAttribute('data-manual')) {
         manual(speccer);

package/src/enums/area.ts

@@ -0,0 +1,17 @@
+export enum SpeccerAreaEnum {
+  Empty = '',
+  Left = 'left',
+  Right = 'right',
+  Bottom = 'bottom',
+  Top = 'top',
+}
+
+export enum DissectAreaEnum {
+  Outline = 'outline',
+  Enclose = 'enclose',
+  Full = 'full',
+  Left = 'left',
+  Right = 'right',
+  Bottom = 'bottom',
+  Top = 'top',
+}

package/src/helpers/dissect/index.ts

@@ -0,0 +1 @@
+export { styles } from './styles';

package/src/helpers/dissect/styles.ts

@@ -0,0 +1,154 @@
+import * as css from '../../lib/css';
+import * as number from '../../lib/number';
+import { get_body_correction } from '../../lib/position';
+import { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';
+import { DissectAreaEnum } from '../../enums/area';
+
+export const styles = (area: string, el: HTMLElement, dissectionEl: HTMLElement) => {
+  const _el_rect = el.getBoundingClientRect();
+  const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);
+  const _dissection_el_rect = dissectionEl.getBoundingClientRect();
+  const _body_correction = get_body_correction();
+  const _el_offset_top = el.offsetTop + _body_correction.top;
+  const _el_offset_left = el.offsetLeft + _body_correction.left;
+  const _left_layout_position_left = _el_offset_left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';
+  const _left_layout_position_top =
+    number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';
+  const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';
+  const _right_layout_position_top =
+    number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';
+  const _top_layout_position_left =
+    number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';
+  const _top_layout_position_top = _el_offset_top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';
+  const _bottom_layout_position_left =
+    number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';
+  const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';
+
+  let _dissection_styles = {};
+
+  if (area.indexOf(DissectAreaEnum.Outline) !== -1) {
+    if (area.indexOf(DissectAreaEnum.Left) !== -1) {
+      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
+        _dissection_styles = {
+          left: _el_offset_left - 8 + 'px',
+          top: _el_offset_top + -1 + 'px',
+          height: _el_rect.height + 'px'
+        };
+      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
+        _dissection_styles = {
+          left: _el_offset_left - 1 + 'px',
+          top: _el_offset_top + -1 + 'px',
+          height: _el_rect.height + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else {
+        _dissection_styles = {
+          left: _left_layout_position_left,
+          top: _left_layout_position_top
+        };
+      }
+    } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {
+      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
+        _dissection_styles = {
+          left: _el_offset_left + _el_rect.width + 'px',
+          top: _el_offset_top + -1 + 'px',
+          height: _el_rect.height + 'px'
+        };
+      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
+        _dissection_styles = {
+          left: _el_offset_left + -1 + 'px',
+          top: _el_offset_top + -1 + 'px',
+          height: _el_rect.height + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else {
+        _dissection_styles = {
+          left: _right_layout_position_left,
+          top: _right_layout_position_top
+        };
+      }
+    } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {
+      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
+        _dissection_styles = {
+          top: _el_offset_top + -8 + 'px',
+          left: _el_offset_left + -1 + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
+        _dissection_styles = {
+          top: _el_offset_top + -1 + 'px',
+          left: _el_offset_left + -1 + 'px',
+          height: _el_rect.height + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else {
+        _dissection_styles = {
+          left: _top_layout_position_left,
+          top: _top_layout_position_top
+        };
+      }
+    } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {
+      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
+        _dissection_styles = {
+          top: _el_offset_top + _el_rect.height + 'px',
+          left: _el_offset_left + -1 + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
+        _dissection_styles = {
+          top: _el_offset_top + -1 + 'px',
+          left: _el_offset_left + -1 + 'px',
+          height: _el_rect.height + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else {
+        _dissection_styles = {
+          left: _bottom_layout_position_left,
+          top: _bottom_layout_position_top
+        };
+      }
+    } else {
+      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
+        _dissection_styles = {
+          left: _el_offset_left + _el_rect.width + 'px',
+          top: _el_offset_top + 'px',
+          height: _el_rect.height + 'px'
+        };
+      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
+        _dissection_styles = {
+          left: _el_offset_left + _el_rect.width + 'px',
+          top: _el_offset_top + -1 + 'px',
+          height: _el_rect.height + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else {
+        _dissection_styles = {
+          left: _left_layout_position_left,
+          top: _left_layout_position_top
+        };
+      }
+    }
+  } else {
+    if (area.indexOf(DissectAreaEnum.Full) !== -1) {
+      _dissection_styles = {
+        left: _el_offset_left - 8 + 'px',
+        top: _el_offset_top + -1 + 'px',
+        height: _el_rect.height + 'px'
+      };
+    } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
+      _dissection_styles = {
+        left: _el_offset_left - 1 + 'px',
+        top: _el_offset_top + -1 + 'px',
+        height: _el_rect.height + 'px',
+        width: _el_rect.width + 'px'
+      };
+    } else {
+      _dissection_styles = {
+        left: _left_layout_position_left,
+        top: _left_layout_position_top
+      };
+    }
+  }
+
+  return _dissection_styles;
+};

package/src/helpers/typography/index.ts

@@ -0,0 +1,3 @@
+export { position } from './position';
+
+export { template } from './template';

package/src/helpers/typography/position.ts

@@ -0,0 +1,54 @@
+import * as css from '../../lib/css';
+import * as number from '../../lib/number';
+import { get_body_correction } from '../../lib/position';
+import { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';
+import { SpeccerAreaEnum } from '../../enums/area';
+
+export const position = (
+  area: string | null,
+  el: HTMLElement,
+  speccerEl: HTMLElement
+): { left: string; top: string } => {
+  const _el_rect = el.getBoundingClientRect();
+  const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);
+  const _speccer_el_rect = speccerEl.getBoundingClientRect();
+  const _body_correction = get_body_correction();
+  const _el_offset_top = el.offsetTop + _body_correction.top;
+  const _el_offset_left = el.offsetLeft + _body_correction.left;
+  const _left_layout_position_left = _el_offset_left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';
+  const _left_layout_position_top =
+    number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';
+  const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';
+  const _right_layout_position_top =
+    number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';
+  const _top_layout_position_left =
+    number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';
+  const _top_layout_position_top = _el_offset_top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';
+  const _bottom_layout_position_left =
+    number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';
+  const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';
+
+  let _position = {
+    left: _left_layout_position_left,
+    top: _left_layout_position_top
+  };
+
+  if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {
+    _position = {
+      left: _right_layout_position_left,
+      top: _right_layout_position_top
+    };
+  } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {
+    _position = {
+      left: _top_layout_position_left,
+      top: _top_layout_position_top
+    };
+  } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {
+    _position = {
+      left: _bottom_layout_position_left,
+      top: _bottom_layout_position_top
+    };
+  }
+
+  return _position;
+};

package/src/helpers/typography/template.ts

@@ -0,0 +1,27 @@
+import * as css from '../../lib/css';
+import * as styles from '../../lib/styles';
+
+export const template = async (el: HTMLElement): Promise<string> => {
+  const _el_styles = await styles.get(el);
+  const _styles = css.getTypography(_el_styles);
+
+  return (
+    `
+` +
+    'font-styles: {' +
+    '<ul class="speccer-styles">' +
+    `  <li><span class="property">font-family:</span> ${_styles['fontFamily']};</li>` +
+    `  <li><span class="property">font-size:</span> ${_styles['fontSize']} / ${
+      parseInt(_styles['fontSize'], 10) / 16
+    }rem;</li>` +
+    `  <li><span class="property">font-weight:</span> ${_styles['fontWeight']};</li>` +
+    `  <li><span class="property">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +
+    `  <li><span class="property">line-height:</span> ${_styles['lineHeight']} / ${
+      parseInt(_styles['lineHeight'], 10) / 16
+    }rem;</li>` +
+    `  <li><span class="property">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +
+    `  <li><span class="property">font-style:</span> ${_styles['fontStyle']};</li>` +
+    '</ul>' +
+    '}'
+  );
+};

package/src/{index.js → index.ts}

@@ -1,36 +1,36 @@
 /* eslint no-console:0 */
 'use strict';
 
+import './interfaces/global';
 import * as __node from './lib/node';
-import * as __spacing from './spec';
-import * as __dissect from './dissect';
-import * as __measure from './measure';
-import * as __typography from './typography';
+import * as __spacing from './tasks/spec';
+import * as __dissect from './tasks/dissect';
+import * as __measure from './tasks/measure';
+import * as __typography from './tasks/typography';
 import * as __browser from './browser';
 
+export const spacing = __spacing;
+
+export const dissect = __dissect;
+
+export const measure = __measure;
+
+export const typography = __typography;
+
 const speccer = () => {
   __node.removeAll('.speccer');
-  __node.removeAll('.dissection');
 
   const _els_to_be_specced = document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)');
   const _els_to_be_measured = document.querySelectorAll('[data-speccer-measure]');
   const _els_to_be_typography_specced = document.querySelectorAll('[data-speccer-typography]');
   const _els_to_be_dissected = document.querySelectorAll('[data-anatomy-section] [data-anatomy]');
 
-  _els_to_be_specced.forEach(__spacing.element);
-  _els_to_be_measured.forEach(__measure.element);
-  _els_to_be_typography_specced.forEach(__typography.element);
-  _els_to_be_dissected.forEach(__dissect.element);
+  _els_to_be_specced.forEach(spacing.element);
+  _els_to_be_measured.forEach(measure.element);
+  _els_to_be_typography_specced.forEach(typography.element);
+  _els_to_be_dissected.forEach(dissect.element);
 };
 
-export const spacing = __spacing;
-
-export const dissect = __dissect;
-
-export const measure = __measure;
-
-export const typography = __typography;
-
 export default speccer;
 
 __browser.activate(speccer);

package/src/interfaces/global.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    speccer: any;
+  }
+}

package/src/lib/attributes.ts

@@ -0,0 +1,18 @@
+/* eslint no-console:0 */
+'use strict';
+
+export const set = (el: HTMLElement, attrs: {}) => {
+  if (!el) return;
+
+  if (!attrs) return;
+
+  Object.keys(attrs).forEach((key) => el.setAttribute(key, attrs[key]));
+};
+
+export const remove = (el: HTMLElement, attrs: {}) => {
+  if (!el) return;
+
+  if (!attrs) return;
+
+  Object.keys(attrs).forEach((key) => el.removeAttribute(key));
+};

package/src/lib/classnames.ts

@@ -0,0 +1,43 @@
+/* eslint no-console:0 */
+'use strict';
+
+export const set = (el: HTMLElement, cls: string, avoid = 'noop') => {
+  if (!el) return;
+
+  if (!cls || (cls && cls.length === 0)) return;
+
+  cls
+    .trim()
+    .split(' ')
+    .filter((cl) => cl !== avoid)
+    .forEach((cl) => el.classList.add(cl));
+};
+
+export const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {
+  if (!el) return;
+
+  if (!cls || (cls && cls.length === 0)) return;
+
+  cls
+    .trim()
+    .split(' ')
+    .filter((cl) => cl !== avoid)
+    .forEach((cl) => el.classList.toggle(cl));
+};
+
+export const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {
+  if (!el) return;
+
+  if (!cls || (cls && cls.length === 0)) return;
+
+  cls
+    .trim()
+    .split(' ')
+    .filter((cl) => cl !== avoid)
+    .forEach((cl) => el.classList.remove(cl));
+};
+
+export const cx = (cls: string, cls_obj: {}): string =>
+  `${cls} ${Object.keys(cls_obj)
+    .filter((classname) => cls_obj[classname])
+    .join(' ')}`.trim();

package/src/lib/{constants.js → constants.ts}

@@ -2,4 +2,7 @@
 'use strict';
 
 export const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
+
 export const SPECCER_TAGS_TO_AVOID = ['TR', 'TH', 'TD', 'TBODY', 'THEAD', 'TFOOT'];
+
+export const SPECCER_DEFAULT_PIN_SPACE = 48;

package/src/lib/css.ts

@@ -0,0 +1,45 @@
+/* eslint no-console:0 */
+'use strict';
+import { SPECCER_DEFAULT_PIN_SPACE } from './constants';
+import { SpacingCSSPropertiesType, TypographyCSSPropertiesType } from '../types/css';
+
+export const getNumberValue = (value: string): number => parseInt(value, 10);
+
+export const normalizeNumberValue = (value: string | number): number => {
+  const _value = parseFloat(value + '');
+
+  return (_value >= 0 && _value < 1) || (_value <= 0 && _value > -1) ? 0 : _value;
+};
+
+export const getSpacing = (style: SpacingCSSPropertiesType): SpacingCSSPropertiesType => {
+  const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight } =
+    style;
+
+  return {
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  };
+};
+
+export const getTypography = (style: TypographyCSSPropertiesType): TypographyCSSPropertiesType => {
+  const { lineHeight, letterSpacing, fontFamily, fontSize, fontStyle, fontVariationSettings, fontWeight } = style;
+
+  return {
+    lineHeight,
+    letterSpacing,
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontVariationSettings,
+    fontWeight
+  };
+};
+
+export const pinSpace = (el: HTMLElement): number =>
+  getNumberValue(getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')) || SPECCER_DEFAULT_PIN_SPACE;

package/src/lib/debounce.ts

@@ -0,0 +1,29 @@
+/* eslint no-console:0 */
+'use strict';
+
+export const waitForFrame = () => new Promise(requestAnimationFrame);
+
+const debounce = function (func: Function, wait: number, immediate?: boolean): Function {
+  let timeout: null | ReturnType<typeof setTimeout>;
+
+  return function (this: any) {
+    const context = this;
+    const args = arguments;
+    const later = function () {
+      timeout = null;
+
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+
+    timeout = setTimeout(later, wait);
+
+    if (callNow) func.apply(context, args);
+  };
+};
+
+export default debounce;

package/src/lib/node.ts

@@ -0,0 +1,8 @@
+export const after = (el: HTMLElement | null, newSibling: HTMLElement) =>
+  el && el.insertAdjacentElement('afterend', newSibling);
+
+export const removeAll = (selector: string, el: Document = document) => {
+  [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {
+    e.remove();
+  });
+};

package/src/lib/number.ts

@@ -0,0 +1,4 @@
+/* eslint no-console:0 */
+'use strict';
+
+export const decimal = (number: string | number, decimals = 3): string => parseFloat(number + '').toFixed(decimals);

package/src/lib/position.ts

@@ -0,0 +1,16 @@
+export const get_horizontal_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>
+  modifier - startRect.width / 2 + targetRect.width / 2;
+
+export const get_vertical_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>
+  modifier - startRect.height / 2 + targetRect.height / 2;
+
+export const get_body_correction = () => {
+  const _body_style = getComputedStyle(document.body);
+  const _body_left_correction = parseInt(_body_style.paddingLeft) + parseInt(_body_style.marginLeft);
+  const _body_top_correction = parseInt(_body_style.paddingTop) + parseInt(_body_style.marginTop);
+
+  return {
+    top: _body_top_correction,
+    left: _body_left_correction
+  };
+};

package/src/lib/{resize.js → resize.ts}

@@ -3,10 +3,11 @@
 
 import debounce from './debounce';
 
-export const activate = speccer => {
-  const speccerEventFunc = debounce(() => {
-    speccer();
-  }, 300);
+export const activate = (speccer: Function) => {
+  const speccerEventFunc = () =>
+    debounce(() => {
+      speccer();
+    }, 300);
 
   window.removeEventListener('resize', speccerEventFunc);
   window.addEventListener('resize', speccerEventFunc);