@seliseblocks/mailcraft 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",

package/src/render/fields.js

@@ -489,7 +489,12 @@ export function renderField(f) {
     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' });
     head.appendChild(value);
     const holder = el('div', { padding: '11px 0 4px' });
-    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` pins the track like every value-shaped inspector field: under
+    // an RTL locale the native input mirrors itself (thumb measured from the
+    // right) while the painted fill below stays a left-anchored gradient, so
+    // the two showed opposite ends of the range. Pinned, thumb, fill and
+    // drag direction always agree.
+    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' });
     input.value = f.value;
     const place = () => {
       const pct = (input.value - f.min) / (f.max - f.min || 1);

package/src/render/style.js

@@ -287,7 +287,12 @@ export const STYLE = `
 #mc .mc-workspace [data-mc-sheet="1"] { border: 1px solid rgba(15,23,42,.10); border-radius: 4px; background: #ffffff; box-shadow: 0 2px 5px rgba(15,23,42,.05), 0 14px 38px rgba(15,23,42,.10) !important; }
 #mc[data-chrome="dark"] .mc-workspace [data-mc-sheet="1"] { border-color: rgba(148,163,184,.46); box-shadow: 0 0 0 1px rgba(15,23,42,.48), 0 22px 58px rgba(0,0,0,.38) !important; }
 #mc[data-chrome="dark"] .mc-preview-body [data-mc-sheet="1"] { border: 0; box-shadow: none !important; }
-#mc .mc-inspector { box-shadow: -10px 0 30px rgba(42,47,77,.04); color: var(--ed-panel-label); }
+/* A real elevation, not a hint: at .04 the panel read as flush with the
+   canvas, which is exactly what its border already says -- the shadow is
+   there to lift the settings panel above the workspace. Dark chrome needs
+   its own, stronger pass: a dark shadow on a dark ground disappears. */
+#mc .mc-inspector { box-shadow: -14px 0 34px rgba(15,23,42,.09), -2px 0 8px rgba(15,23,42,.05); color: var(--ed-panel-label); }
+#mc[data-chrome="dark"] .mc-inspector { box-shadow: -14px 0 34px rgba(0,0,0,.42), -2px 0 8px rgba(0,0,0,.28); }
 #mc .mc-tabbar { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 7px 8px 0; gap: 3px; border-bottom: 0 !important; background: var(--ed-panel) !important; overflow: visible; position: relative; z-index: 12; }
 #mc .mc-tabbar button { position: relative; min-width: 0; height: 39px; border-radius: 8px 8px 0 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; font-family: var(--ed-font) !important; }
 #mc .mc-tabbar button svg { width: 16px; height: 16px; display: block; }