ov-modal

src/ov-modal.js

LIFTED FROM demo/form.html

Attributes

None.

Properties

None.

Events

None.

Using it

import 'overscan'
import 'overscan/overscan.css'

<ov-modal>
  <dialog
    class="ov-modal__box"
    open
    style="position:static;margin:0;inline-size:100%;max-inline-size:100%;min-inline-size:0;box-sizing:border-box"
  >
    <span class="ov-modal__title">
      PRESSURE LOSS
    </span>
    <p style="margin:0;color:var(--ov-dim);line-height:1.7">
      SECTOR 4 HAS BEEN VENTING FOR 184 SECONDS. ACKNOWLEDGING STOPS THE ALARM AND DOES NOT STOP THE VENT.
    </p>
    <label class="ov-check">
      <input type="checkbox">
      LOG THIS
    </label>
    <div class="ov-modal__foot">
      <button class="ov-btn">
        <span>
          CANCEL
        </span>
      </button>
      <button
        class="ov-btn"
        aria-pressed="true"
      >
        <span>
          ACKNOWLEDGE
        </span>
      </button>
    </div>
  </dialog>
</ov-modal>

import { OvModal } from 'overscan/react'

<OvModal />

import { OvModal } from 'overscan/vue'

<OvModal />

import OvModal from 'overscan/svelte/OvModal.svelte'

<OvModal />

The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'

A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.

Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.

The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 72 getter-only properties across 39 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.