@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/textfield/_theme.scss

@@ -0,0 +1,264 @@
+/* https://material.io/archive/guidelines/components/text-fields.html#text-fields-states */
+
+@use '../../core/_platform.scss' as platform;
+
+.mdw-theme {
+  --mdw-textfield__text-rgb: var(--mdw-ink-default);
+  --mdw-textfield__default-text-opacity: var(--mdw-high-opacity);
+  --mdw-textfield__secondary-text-opacity: var(--mdw-medium-opacity);
+  --mdw-textfield__disabled-opacity: var(--mdw-inactive-opacity);
+}
+
+.mdw-theme[mdw-light] {
+  --mdw-textfield__placeholder-color__focus: RGBA(var(--mdw-ink-default), 0.42);
+  --mdw-textfield__filled-disabled-border-color: RGBA(var(--mdw-ink-default), 0.10);
+  --mdw-textfield__filled-disabled-background-color: RGBA(var(--mdw-ink-default), 0.03);
+  --mdw-textfield__fill-color: RGBA(var(--mdw-ink-default), 0.06);
+  --mdw-textfield__fill-color__hover: RGBA(var(--mdw-ink-default), 0.12);
+  --mdw-textfield__border-line-color: RGBA(var(--mdw-ink-default), 0.42);
+  --mdw-textfield__border-line-color__hover: RGBA(var(--mdw-ink-default), 0.87);
+
+  --mdw-textfield__warn-color: RGBA(var(--mdw-alias-warn-A700), 1.00);
+  --mdw-textfield__warn-color__selection: RGBA(var(--mdw-alias-warn-A700), 0.20);
+
+  --mdw-textfield__selection-opacity: #{0.08 + 0.12};
+
+  --mdw-textfield__date-picker-filter: none;
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-textfield__placeholder-color__focus: RGBA(var(--mdw-ink-default), 0.50);
+  --mdw-textfield__filled-disabled-border-color: RGBA(var(--mdw-ink-default), 0.30);
+  --mdw-textfield__filled-disabled-background-color: RGBA(var(--mdw-ink-default), 0.05);
+  --mdw-textfield__fill-color: RGBA(var(--mdw-ink-default), 0.10);
+  --mdw-textfield__fill-color__hover: RGBA(var(--mdw-ink-default), 0.20);
+  --mdw-textfield__border-line-color: RGBA(var(--mdw-ink-default), 0.70);
+  --mdw-textfield__border-line-color__hover: RGBA(var(--mdw-ink-default), 1.00);
+
+  --mdw-textfield__warn-color: RGBA(var(--mdw-alias-warn-A200), 1.00);
+  --mdw-textfield__warn-color__selection: RGBA(var(--mdw-alias-warn-A200), 0.40);
+
+  --mdw-textfield__selection-opacity: #{0.16 + 0.24};
+  --mdw-textfield__date-picker-filter: invert(1);
+}
+
+.mdw-textfield[mdw-outlined] {
+  &:active > .mdw-textfield__input:not(:disabled),
+  & > .mdw-textfield__input:not(:disabled):focus {
+    & ~ .mdw-textfield__border {
+      color: inherit;
+    }
+  }
+
+  &,
+  &[mdw-ink] {
+    &:active > .mdw-textfield__input:not(:disabled),
+    & > .mdw-textfield__input:not(:disabled):focus {
+      &:invalid {
+        & ~ .mdw-textfield__border,
+        & ~ .mdw-textfield__border::before {
+          color: var(--mdw-textfield__warn-color);
+        }
+      }
+    }
+  }
+}
+
+.mdw-textfield__error-text {
+  color: var(--mdw-textfield__warn-color);
+}
+
+.mdw-textfield {
+  // Focus
+  &:active > .mdw-textfield__input:not(:disabled),
+  & > .mdw-textfield__input:not(:disabled):active,
+  & > .mdw-textfield__input:not(:disabled):focus {
+    &::selection {
+      background-color: RGBA(var(--mdw-ink), var(--mdw-textfield__selection-opacity));
+    }
+
+    & ~ .mdw-textfield__border {
+      border-block-end-color: inherit;
+      color: inherit;
+    }
+
+    & ~ .mdw-textfield__border .mdw-textfield__label {
+      color: inherit;
+    }
+
+    & ~ .mdw-textfield__border::before {
+      color: inherit;
+    }
+  }
+
+  &:active > .mdw-textfield__input:not(:disabled):invalid,
+  & > .mdw-textfield__input:not(:disabled):focus:invalid {
+    caret-color: var(--mdw-textfield__warn-color);
+
+    &::selection {
+      background-color: var(--mdw-textfield__warn-color__selection);
+    }
+
+    & ~ .mdw-textfield__border {
+      border-block-end-color: currentColor;
+      color: var(--mdw-textfield__warn-color);
+    }
+
+    & ~ .mdw-textfield__border .mdw-textfield__label {
+      // color: var(--mdw-textfield__warn-color);
+    }
+
+    & ~ .mdw-textfield__border::after {
+      color: var(--mdw-textfield__warn-color);
+    }
+
+  }
+}
+
+.mdw-textfield__signifier,
+.mdw-textfield__label,
+.mdw-textfield__prefix,
+.mdw-textfield__suffix {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+}
+
+.mdw-textfield__icon[mdw-dropdown] {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+}
+
+.mdw-textfield[mdw-value-empty] > input.mdw-textfield__input:not(:focus) {
+  color: transparent;
+}
+
+input.mdw-textfield__input:not(:focus):placeholder-shown {
+  color: transparent;
+}
+
+.mdw-textfield__input::-webkit-calendar-picker-indicator {
+  filter: var(--mdw-textfield__date-picker-filter);
+}
+
+.mdw-textfield__input::selection {
+  // color: inherit;
+}
+
+.mdw-textfield__input::placeholder {
+  color: var(--mdw-textfield__placeholder-color__focus);
+}
+
+.mdw-textfield__input {
+  caret-color: RGBA(var(--mdw-ink));
+
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__default-text-opacity));
+
+  // Disabled
+  &:disabled,
+  &[aria-disabled="true"] {
+    &,
+    & ~ .mdw-textfield__border,
+    & ~ .mdw-textfield__border .mdw-textfield__label,
+    & ~ .mdw-textfield__signifier,
+    & ~ .mdw-textfield__prefix,
+    & ~ .mdw-textfield__suffix,
+    & ~ .mdw-textfield__icon {
+      color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__disabled-opacity));
+    }
+  }
+
+  // Hover
+  &:not(:focus):hover:not(:disabled):not(:active) ~ .mdw-textfield__border,
+  &:not(:focus):not(:disabled):not(:active) ~ .mdw-textfield__border:hover {
+    color: var(--mdw-textfield__border-line-color__hover);
+  }
+
+  &:not(:focus) {
+    /* Rules must be separated for IE11 support */
+    &:placeholder-shown ~ .mdw-textfield__prefix,
+    &:placeholder-shown ~ .mdw-textfield__suffix {
+      color: transparent;
+    }
+
+    .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__prefix,
+    .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__suffix {
+      color: transparent;
+    }
+  }
+}
+
+select.mdw-textfield__input {
+  // Firefox focusring styling workaround
+  // https://dxr.mozilla.org/mozilla-central/source/browser/components/extensions/extension.css
+  .mdw-textfield[mdw-value-empty] > & {
+    color: var(--mdw-textfield__placeholder-color__focus);
+
+    &:focus {
+      color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+    }
+
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 var(--mdw-textfield__placeholder-color__focus);
+    }
+
+    &:focus:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+    }
+  }
+
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+  }
+
+}
+
+.mdw-textfield__border {
+  color: var(--mdw-textfield__border-line-color);
+}
+
+.mdw-textfield__helper-text {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+}
+
+.mdw-textfield__input:disabled ~ .mdw-textfield__helper-text {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__disabled-opacity));
+}
+
+.mdw-textfield__input:focus:invalid ~ .mdw-textfield__helper-text {
+  color: transparent;
+}
+
+.mdw-textfield {
+  &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::placeholder {
+    color: transparent;
+  }
+
+  &:not([mdw-solo]) > .mdw-textfield__input:not(:focus):-ms-input-placeholder {
+    color: transparent !important;
+  }
+
+  &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::-ms-input-placeholder {
+    color: transparent !important;
+  }
+
+  .mdw-textfield__input:not(:focus) ~ .mdw-textfield__border {
+    color: var(--mdw-textfield__border-line-color);
+  }
+
+  .mdw-textfield__input:disabled ~ .mdw-textfield__border {
+    background-color: var(--mdw-textfield__filled-disabled-background-color);
+    color: var(--mdw-textfield__filled-disabled-border-color);
+  }
+
+  &:not([mdw-outlined]) > .mdw-textfield__border {
+    background-color: var(--mdw-textfield__fill-color);
+  }
+
+  &:not([mdw-outlined]) > .mdw-textfield__input:not(:disabled) {
+    & ~ .mdw-textfield__border:hover,
+    &:hover ~ .mdw-textfield__border {
+      background-color: var(--mdw-textfield__fill-color__hover);
+    }
+  }
+}

package/components/textfield/index.eta

@@ -0,0 +1,74 @@
+<label <%~ Object.entries({
+  'class': [
+    'mdw-textfield',
+    it?.ink || it?.theme ? 'mdw-theme' : '',
+    it?.labelClass,
+  ].filter(v=>v).join(' '),
+  'mdw-outlined': it?.outlined,
+  'mdw-autosize': it?.autosize,
+  'mdw-ink': it?.ink,
+  ...it?.labelAttributes,
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`
+  }).filter(v=>v).join(' ')-%>>
+
+  <%_ if (it?.signifier) { _%>
+  <div <%~ Object.entries({
+      'class': [
+        'mdw-textfield__signifier',
+        it?.signifier.class,
+      ].join(' '),
+      ...it?.signifier.attributes,
+      }).map(([key, value]) => {
+      if (value === true) return key;
+      if (value === false || value == null) return false;
+      return `${key}="${value}"`;
+    }).filter(v=>v).join(' ')-%>><%~ it?.signifier.body ?? '' %><%= it?.signifier.text ?? '' %></div>
+  <%_ } _%>
+
+  <input <%~ Object.entries({
+    'class': [
+      'mdw-textfield__input',
+      it?.class,
+    ].filter(v=>v).join(' '),
+    'disabled': it?.disabled && it?.disabled !== 'false',
+    'aria-disabled': it?.disabled === true ? 'true' : it?.disabled,
+    'minlength': it?.minlength,
+    'placeholder': it?.placeholder ?? ' ',
+    'required': it?.required,
+    'name': it?.name,
+    'type': it?.type ?? 'text',
+    'value': it?.value,
+    ...it?.attributes,
+    }).map(([key, value]) => {
+      if (value === true) return key;
+      if (value === false || value == null) return false;
+      return `${key}="${value}"`;
+    }).filter(v=>v).join(' ')-%> />
+
+  <%_ _%>
+
+  <div class="mdw-textfield__border">
+    <div class="mdw-textfield__outline-gap">
+      <div class="mdw-textfield__label"><%= it?.body ?? '' %><%= it?.text ?? '' %></div>
+    </div>
+  </div>
+
+  <%_ if (it?.prefix) { _%>
+  <div class="mdw-textfield__prefix"><%= it?.prefix %></div>
+  <%_ } _%>
+
+  <%_ if (it?.suffix) { _%>
+  <div class="mdw-textfield__suffix"><%= it?.suffix %></div>
+  <% } %>
+
+  <%_ if (it?.helper) { _%>
+  <div class="mdw-textfield__helper-text"><%= it?.helper %></div>
+  <%_ } _%>
+
+  <%_ if (it?.error) { _%>
+  <div class="mdw-textfield__error-text"><%= it?.error %></div>
+  <%_ } _%>
+</label>

package/components/textfield/index.js

@@ -1,166 +1,160 @@
-import { getChildElementByClass } from '../common/dom';
-
-class TextField {
-  /**
-   * @param {Element} textfieldElement
-   * @return {void}
-   */
-  static attach(textfieldElement) {
-    /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */
-    const input = (getChildElementByClass(textfieldElement, 'mdw-textfield__input'));
-    if (input) {
-      input.addEventListener('input', TextField.onInput);
-      TextField.onInput({ currentTarget: input });
-    }
-  }
-
-  /**
-   * @param {Element} textfieldElement
-   * @return {void}
-   */
-  static detach(textfieldElement) {
-    textfieldElement.removeAttribute('mdw-value-empty');
-    const input = getChildElementByClass(textfieldElement, 'mdw-textfield__input');
-    if (input) {
-      input.removeEventListener('input', TextField.onInput);
+/**
+ * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} inputElement
+ * @return {void}
+ */
+export function updateInputEmptyState(inputElement) {
+  const attrName = 'mdw-value-empty';
+  const textfieldElement = inputElement.parentElement;
+  if (inputElement.value) {
+    if (textfieldElement.hasAttribute(attrName)) {
+      textfieldElement.removeAttribute(attrName);
     }
+  } else if (!textfieldElement.hasAttribute(attrName)) {
+    textfieldElement.setAttribute(attrName, '');
   }
+}
 
-  /**
-   * @param {Event|{currentTarget}} event
-   * @return {void}
-   */
-  static onInput(event) {
-    const inputElement = event.currentTarget;
-    if (inputElement.parentElement.hasAttribute('mdw-autosize')) {
-      TextField.updateTextAreaSize(inputElement);
+/**
+ * @param {HTMLTextAreaElement} inputElement
+ * @return {number} Single row height
+ */
+export function updateTextAreaSize(inputElement) {
+  const previousRowsAttrValue = inputElement.getAttribute('rows');
+  inputElement.rows = 1;
+  const { height, paddingTop } = window.getComputedStyle(inputElement);
+  if (!height || height === 'auto') {
+    if (previousRowsAttrValue == null) {
+      inputElement.removeAttribute('rows');
+    } else {
+      inputElement.setAttribute('rows', previousRowsAttrValue);
     }
-    TextField.updateInputEmptyState(inputElement);
+    return -1;
   }
+  const heightPx = Number.parseInt(height.replace('px', ''), 10);
+  const paddingTopPx = Number.parseInt(paddingTop.replace('px', ''), 10);
+  inputElement.rows = Math.floor((inputElement.scrollHeight - paddingTopPx) / heightPx);
+  return heightPx;
+}
 
-  /**
-   * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} inputElement
-   * @return {void} */
-  static updateInputEmptyState(inputElement) {
-    const attributeName = 'mdw-value-empty';
-    const textfieldElement = inputElement.parentElement;
-    if (inputElement.value) {
-      if (textfieldElement.hasAttribute(attributeName)) {
-        textfieldElement.removeAttribute(attributeName);
-      }
-    } else if (!textfieldElement.hasAttribute(attributeName)) {
-      textfieldElement.setAttribute('mdw-value-empty', '');
-    }
+/**
+ * @param {Event|{currentTarget:HTMLElement}} event
+ * @return {void}
+ */
+export function onInput(event) {
+  const inputElement = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (event.currentTarget);
+  if (inputElement.parentElement.hasAttribute('mdw-autosize')) {
+    updateTextAreaSize(/** @type {HTMLTextAreaElement} */ (inputElement));
   }
+  updateInputEmptyState(inputElement);
+}
 
-  /**
-   * @param {HTMLInputElement} inputElement
-   * @return {number} Single row height */
-  static updateTextAreaSize(inputElement) {
-    const previousRowsValue = inputElement.getAttribute('rows');
-    inputElement.setAttribute('rows', '1');
-    const { height, paddingTop } = window.getComputedStyle(inputElement);
-    if (!height || height === 'auto') {
-      inputElement.setAttribute('rows', previousRowsValue);
-      return -1;
-    }
-    const heightPx = parseInt(height.replace('px', ''), 10);
-    const paddingTopPx = parseInt(paddingTop.replace('px', ''), 10);
-    inputElement.setAttribute('rows', Math.floor((inputElement.scrollHeight - paddingTopPx) / heightPx).toString());
-    return heightPx;
+/**
+ * @param {Element} textfieldElement
+ * @return {string|Date|number}
+ */
+export function getValue(textfieldElement) {
+  const input = /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if ((input instanceof HTMLTextAreaElement) || (input instanceof HTMLSelectElement)) {
+    return input.value;
   }
-
-  /**
-   * @param {Element} textfieldElement
-   * @return {string|Date|number}
-   */
-  static getValue(textfieldElement) {
-    /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */
-    const input = (getChildElementByClass(textfieldElement, 'mdw-textfield__input'));
-    if ((input instanceof HTMLTextAreaElement) || (input instanceof HTMLSelectElement)) {
+  switch (input.type) {
+    case 'number':
+    case 'range':
+      return Number.isNaN(input.valueAsNumber) ? null : input.valueAsNumber;
+    case 'date':
+    case 'datetime-local':
+    case 'time':
+      if (input.value == null) {
+        return null;
+      }
+      return new Date(
+        (new Date(input.valueAsNumber).getTimezoneOffset() * 60 * 1000) + input.valueAsNumber,
+      );
+    default:
       return input.value;
-    }
-    const type = input.hasAttribute('type') && input.getAttribute('type').toLowerCase();
-    switch (type) {
-      case 'number':
-      case 'range':
-        return Number.isNaN(input.valueAsNumber) ? null : input.valueAsNumber;
-      case 'date':
-      case 'datetime-local':
-      case 'time':
-        if (input.value == null) {
-          return null;
-        }
-        return new Date((new Date(input.valueAsNumber).getTimezoneOffset() * 60 * 1000) + input.valueAsNumber);
-      default:
-        return input.value;
-    }
   }
+}
 
-  /**
-   * @param {Element} textfieldElement
-   * @param {(string|Date|number)=} value
-   * @return {void}
-   */
-  static setValue(textfieldElement, value) {
-    /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */
-    const input = (getChildElementByClass(textfieldElement, 'mdw-textfield__input'));
-    if (value == null) {
-      input.value = null;
-    } else if (input instanceof HTMLTextAreaElement || input instanceof HTMLSelectElement) {
-      if (value instanceof Date) {
-        input.value = value.toString();
-      } else if (typeof value === 'string') {
-        input.value = value;
-      } else {
-        input.value = value.toString(10);
-      }
-    } else if (value instanceof Date) {
-      const type = input.hasAttribute('type') && input.getAttribute('type').toLowerCase();
-      if (type === 'time') {
-        const hoursStr = `${value.getHours() < 10 ? '0' : ''}${value.getHours()}`;
-        const minutesStr = `${value.getMinutes() < 10 ? '0' : ''}${value.getMinutes()}`;
-        const secondsStr = `${value.getSeconds() < 10 ? '0' : ''}${value.getSeconds()}`;
-        input.value = `${hoursStr}:${minutesStr}:${secondsStr}.${value.getMilliseconds()}`;
-      } else {
-        switch (type) {
-          case 'date':
-            input.valueAsDate = value;
-            break;
-          case 'datetime-local':
-            input.valueAsNumber = value.getTime() - (value.getTimezoneOffset() * 60 * 1000);
-            break;
-          case 'number':
-          case 'range':
-            input.valueAsNumber = value.getTime();
-            break;
-          default:
-            input.value = value.toString();
-        }
-      }
+/**
+ * @param {Element} textfieldElement
+ * @param {string|Date|number|null} [value]
+ * @return {void}
+ */
+export function setValue(textfieldElement, value) {
+  const input = /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if (value == null) {
+    input.value = null;
+  } else if (input instanceof HTMLTextAreaElement || input instanceof HTMLSelectElement) {
+    if (value instanceof Date) {
+      input.value = value.toString();
     } else if (typeof value === 'string') {
       input.value = value;
     } else {
-      const type = input.hasAttribute('type') && input.getAttribute('type').toLowerCase();
-      switch (type) {
+      input.value = value.toString(10);
+    }
+  } else if (value instanceof Date) {
+    if (input.type === 'time') {
+      const hoursStr = `${value.getHours() < 10 ? '0' : ''}${value.getHours()}`;
+      const minutesStr = `${value.getMinutes() < 10 ? '0' : ''}${value.getMinutes()}`;
+      const secondsStr = `${value.getSeconds() < 10 ? '0' : ''}${value.getSeconds()}`;
+      input.value = `${hoursStr}:${minutesStr}:${secondsStr}.${value.getMilliseconds()}`;
+    } else {
+      switch (input.type) {
         case 'date':
-        case 'time':
+          input.valueAsDate = value;
+          break;
         case 'datetime-local':
+          input.valueAsNumber = value.getTime() - (value.getTimezoneOffset() * 60 * 1000);
+          break;
         case 'number':
         case 'range':
-          input.valueAsNumber = value;
+          input.valueAsNumber = value.getTime();
           break;
         default:
           input.value = value.toString();
       }
     }
-    TextField.updateInputEmptyState(input);
-    if (textfieldElement.hasAttribute('mdw-multiline')) {
-      TextField.updateTextAreaSize(input);
+  } else if (typeof value === 'string') {
+    input.value = value;
+  } else {
+    switch (input.type) {
+      case 'date':
+      case 'time':
+      case 'datetime-local':
+      case 'number':
+      case 'range':
+        input.valueAsNumber = value;
+        break;
+      default:
+        input.value = value.toString();
     }
   }
+  updateInputEmptyState(input);
+  if (input instanceof HTMLTextAreaElement && textfieldElement.hasAttribute('mdw-autosize')) {
+    updateTextAreaSize(input);
+  }
 }
 
-export {
-  TextField,
-};
+/**
+ * @param {Element} textfieldElement
+ * @return {void}
+ */
+export function attach(textfieldElement) {
+  const input = /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */ (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if (input) {
+    input.addEventListener('input', onInput, { passive: true });
+    onInput({ currentTarget: input });
+  }
+}
+
+/**
+ * @param {Element} textfieldElement
+ * @return {void}
+ */
+export function detach(textfieldElement) {
+  textfieldElement.removeAttribute('mdw-value-empty');
+  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if (input) {
+    input.removeEventListener('input', onInput);
+  }
+}

package/components/textfield/index.pug

@@ -0,0 +1,30 @@
+mixin mdwTextField(options={})
+  label.mdw-textfield(class=([
+  options.ink ? 'mdw-theme' : '',
+  ].filter(v=>v).join(' '))
+  mdw-outlined=(options.outlined)
+  mdw-autosize=(options.autosize)
+  mdw-ink=(options.ink)
+  )
+    if (options.signifierClass || options.signifier)
+      .mdw-textfield__signifier(class=options.signifierClass)= options.signifier
+    input.mdw-textfield__input(
+    disabled=(options.disabled ? '' : false)
+    minlength=(options.minlength ? `${options.minlength}` : false)
+    placeholder=(options.placeholder ? options.placeholder: ' ')
+    required=(options.required ? '' : false)
+    type=(options.type ? options.type : 'text')
+    value=(options.value)
+    )&attributes(attributes)
+    .mdw-textfield__border
+      .mdw-textfield__outline-gap
+        .mdw-textfield__label
+          block
+    if (options.prefix)
+      .mdw-textfield__prefix= options.prefix
+    if (options.suffix)
+      .mdw-textfield__suffix= options.suffix
+    if (options.helperText)
+      .mdw-textfield__helper-text= options.helperText
+    if (options.errorText)
+      .mdw-textfield__error-text= options.errorText

package/components/textfield/index.scss

@@ -0,0 +1,2 @@
+@forward './_spec.scss';
+@forward './_theme.scss';