include icon.pug mixin text-field - const slots = {} mixin slot(key) - slots[key] = block - block ? block() : undefined let classes = { 'o-text-field': true, 'o-text-field--extended': !!block, 'is-invalid': attributes.invalid, 'is-disabled': attributes.disabled, 'l-media': !!block, 'l-media--flush': !!block, 'l-media--gapless': !!block, } if (attributes.class) { classes[attributes.class] = true; } const attr = { placeholder: attributes.placeholder, disabled: attributes.disabled, readonly: attributes.readonly, pattern: attributes.pattern, required: attributes.required, value: attributes.value, } div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) if !!block if slots.pre .u-d-contents.t-hi - slots.pre() input.o-text-field__native.l-media__block.l-media__block--main&attributes(attr) if slots.post .u-d-contents.t-hi - slots.post() .o-text-field__bg else input.o-text-field__native&attributes(attr) .o-text-field__bg