diff --git a/src/uix/eidos/archetypes.css b/src/uix/eidos/archetypes.css index 32bbb4bf9..43d716c28 100644 --- a/src/uix/eidos/archetypes.css +++ b/src/uix/eidos/archetypes.css @@ -31,6 +31,21 @@ opacity: 0.5; } +/* ── Field trigger ──────────────────────────────────────────────────────── + * A field / input / select / picker overlay affordance (calendar · clock · + * swatch · chevron). It is NOT a generic button — it sits flush inside the + * field. When an `input`-archetype control hosts one, the input drops its + * padding on the TRIGGER SIDE (logical `padding-inline-end` → works in both LTR + * and RTL, the trigger is pushed to the inline-end): the trigger sits flush at + * the edge and provides its own inset (its centred glyph box), instead of the + * input's full text padding adding a second, larger gap. Lives here (global + + * archetype-keyed) so it covers EVERY field on every page, and outranks each + * `[data-x-field-input]` padding rule (0,2,0 > 0,1,0) regardless of load order. + */ +[data-archetype='input']:has([data-archetype='field-trigger']) { + padding-inline-end: 0; +} + /* ── Overlay ────────────────────────────────────────────────────────────── * Modal backdrops behind dialog/drawer/popover content. */ diff --git a/src/uix/eidos/components/field/field-control-trigger.css b/src/uix/eidos/components/field/field-control-trigger.css index 71933d032..7ea79ce85 100644 --- a/src/uix/eidos/components/field/field-control-trigger.css +++ b/src/uix/eidos/components/field/field-control-trigger.css @@ -15,15 +15,11 @@ */ /* - * When a field input hosts a control trigger, the input drops its padding on - * the trigger side (logical → works in both LTR and RTL): the trigger sits flush - * at the edge and provides its own inset (the centred glyph in its 1.75em box), - * instead of the input's full text padding adding a second, larger gap. One rule - * for every field — keys off the input archetype + the shared trigger marker. + * The trigger-side padding reset for the host input lives in the global + * `archetypes.css` (`[data-archetype='input']:has([data-archetype='field- + * trigger'])`) so it covers every field on every page, not only where this file + * is imported. */ -[data-archetype='input']:has([data-field-control-trigger]) { - padding-inline-end: 0; -} [data-field-control-trigger] { display: inline-flex;