30:T563,function colorOpacity({value: v = '#000000ff', label, min = 0, max = 255, step = 1, width, disabled, validate, datalist} = {}) { const _form = Inputs.color({label, width, disabled, datalist}); const form = _form.cloneNode(); form.append(..._form.children); const iColor = form.querySelector('input[type="color"]'); const iRange = htl.html``; const iText = htl.html``; form.querySelector('output').replaceWith(iRange); iColor.style.flexShrink = 1.5; const applyOpacity = () => iColor.style.opacity = iRange.valueAsNumber / 255; iRange.addEventListener('input', applyOpacity); let value = '#00000ff'; const apply = () => { const v = iColor.value + iRange.valueAsNumber.toString(16).padStart(2, '0'); if(validate) { iText.value = v; if(!validate(iText)) return false; } return value = v, true; }; form.addEventListener('input', e => { apply() || e.stopImmediatePropagation() }); Object.defineProperty(form, 'value', { get: () => value, set: v => { const {color, opacity} = parseColor(v); iColor.value = color; iRange.value = opacity; apply(), applyOpacity(); } }); Object.defineProperties(form, { valueAsNumber: { get: () => toInt(value) }, }); form.value = v; return form; }31:[] 2e:{"title":"Transparent Color Widget","cells":[{"id":0,"value":"# Transparent Color Widget\n\nA color widget that supports opacity, built on top of Observable Inputs.\n\n~~~js\nimport {colorOpacity} from '@mootari/color-opacity'\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"---\n## Example","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof colors = Inputs.form([\n colorOpacity({value: '#ff95008c', label: 'Start color'}),\n colorOpacity({value: '#6bffff24', label: 'Mid color'}),\n colorOpacity({value: '#00ccff', label: 'End color'}),\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"colors","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"