@seliseblocks/mailcraft 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/DOCS.md +2 -2
  2. package/dist/mailcraft-editor.bundle.js +1 -1
  3. package/dist/mailcraft-editor.bundle.js.map +2 -2
  4. package/package.json +1 -1
  5. package/src/render/fields.js +6 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seliseblocks/mailcraft",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
5
5
  "license": "MIT",
6
6
  "author": "SELISE Digital Platforms",
package/src/render/fields.js CHANGED
@@ -489,7 +489,12 @@ export function renderField(f) {
489
489
  const value = el('output', { minWidth: '58px', height: '25px', padding: '0 8px', boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--ed-line)', borderRadius: '7px', background: 'var(--ed-panel-2)', color: 'var(--ed-accent)', fontFamily: 'var(--ed-font)', fontSize: '11.5px', fontWeight: '600', whiteSpace: 'nowrap' }, { 'aria-live': 'polite' });
490
490
  head.appendChild(value);
491
491
  const holder = el('div', { padding: '11px 0 4px' });
492
- const input = el('input', { width: '100%', margin: '0', display: 'block', boxSizing: 'border-box' }, { type: 'range', min: f.min, max: f.max, step: f.step, class: 'mc-slider', 'aria-label': f.label, 'data-focus-key': `f${f.key}` });
492
+ // `dir=ltr` pins the track like every value-shaped inspector field: under
493
+ // an RTL locale the native input mirrors itself (thumb measured from the
494
+ // right) while the painted fill below stays a left-anchored gradient, so
495
+ // the two showed opposite ends of the range. Pinned, thumb, fill and
496
+ // drag direction always agree.
497
+ const input = el('input', { width: '100%', margin: '0', display: 'block', boxSizing: 'border-box' }, { type: 'range', min: f.min, max: f.max, step: f.step, class: 'mc-slider', 'aria-label': f.label, 'data-focus-key': `f${f.key}`, dir: 'ltr' });
493
498
  input.value = f.value;
494
499
  const place = () => {
495
500
  const pct = (input.value - f.min) / (f.max - f.min || 1);