stalefish 8.0.10 → 8.1.0

package/components/checkbox.mjs

@@ -30,10 +30,10 @@ let styles = css`
 `
 
 export default ({ wrapperStyle, holdingPen, label, property, required, indeterminate, disabled, darkBackground, onchange }) => {
-  let checkboxEl = html`<input data-gramm="false" ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed;' : ''}" class="${styles.checkbox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" value="${holdingPen[property] === true ? 'true' : null}" ?checked=${holdingPen[property] === true} onchange=${e => {
+  let checkboxEl = html`<input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed;' : ''}" class="${styles.checkbox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" value="${holdingPen[property] === true ? 'true' : null}" ?checked=${holdingPen[property] === true} onchange=${e => {
     formField(holdingPen, property)(e)
     onchange && onchange(e)
-  }} type="checkbox" ${required ? { required: 'required' } : ''} />`
+  }} type="checkbox" ?required=${required} />`
 
   checkboxEl.indeterminate = indeterminate || false
 

package/components/datePicker.mjs

@@ -0,0 +1,346 @@
+import { html, css, formField, fieldIsTouched, rerender } from 'halfcab'
+import calendarIcon from './icons/calendarIcon.mjs'
+import solidDown from './icons/solidDown.mjs'
+
+// Styles aligned with timePicker and prior design tweaks
+const styles = css`
+  .textfield {
+    padding: 10px;
+    border: solid 5px #c9c9c9;
+    transition: border 0.3s;
+    outline: none;
+    width: 100%;
+    font-size: 18px;
+    border-radius: 0;
+    box-shadow: none !important;
+    font-weight: normal;
+    box-sizing: border-box;
+    font-family: inherit;
+    line-height: 1.4em;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    z-index: 20;
+    position: relative;
+    height: 55px;
+    background-color: #FFF;
+    color: #999;
+  }
+
+  .noType {
+    caret-color: transparent;
+    user-select: none;
+  }
+
+  .textfield::placeholder { color: #999; }
+
+  .label {
+    transition: opacity 0.75s;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    user-select: none;
+    position: absolute;
+    top: -55px;
+    z-index: 10;
+  }
+
+  .icon {
+    position: absolute;
+    right: 12px;
+    top: 17px;
+    width: 20px;
+    height: 20px;
+    opacity: 0.8;
+    z-index: 25;
+    pointer-events: none;
+  }
+
+  .withRightIcon { padding-right: 44px; }
+
+  .clear {
+    cursor: pointer;
+    position: absolute;
+    color: #AAA;
+    font-size: 0.8em;
+    line-height: 0.9em;
+    font-weight: normal;
+    box-sizing: border-box;
+    right: 42px; /* 10px gap from calendar icon at right:12px, width 20px */
+    background-color: #EEE;
+    padding: 5px 10px;
+    z-index: 30;
+    border-radius: 3px;
+    top: 17px;
+  }
+
+  .popup { position: absolute; z-index: 9999; top: 55px; left: 0; background: #fff; border: 1px solid #c9c9c9; box-shadow: 0 2px 10px rgba(0,0,0,.15); padding: 4px; color: #999; }
+  .calHeader { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; }
+  .navBtn { background: transparent; border: none; cursor: pointer; padding: 4px; color: #ccc; }
+  .navBtn:focus { outline: none; }
+  .navBtn:focus-visible { outline: 2px solid #c9c9c9; outline-offset: 2px; }
+  .monthLabel { position: relative; top: -2px; font-weight: 500; }
+  .arrowIcon { display: inline-block; width: 13px; height: 13px; color: #c9c9c9; line-height: 0; }
+  .arrowIcon > svg { display: block; width: 13px; height: 13px; }
+  .yearWrap { display: inline-flex; align-items: center; gap: 8px; }
+  .yearNum { color: #787878; min-width: 3ch; text-align: right; }
+  .yearControls { display: inline-flex; flex-direction: column; align-items: center; gap: 0; margin-left: 2px; }
+  .yearBtn { background: transparent; border: none; cursor: pointer; padding: 0; line-height: 1; width: 18px; height: 14px; display: flex; align-items: center; justify-content: center; }
+  .yearBtn + .yearBtn { margin-top: -2px; }
+  .yearBtn:focus { outline: none; }
+  .yearBtn:focus-visible { outline: 2px solid #c9c9c9; outline-offset: 2px; }
+  .yearArrowIcon { display: block; width: 12px; height: 12px; color: #c9c9c9; line-height: 0; }
+  .yearArrowIcon > svg { display: block; width: 12px; height: 12px; }
+  .weekHead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 2px 6px; font-size: 12px; opacity: 0.8; }
+  .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 6px 6px; }
+`
+
+// Internal symbols for per-holdingPen state
+const STATE_SYMBOL = Symbol.for('stalefish.date.state')
+const ID_MAP_SYMBOL = Symbol.for('stalefish.date.idMap')
+
+function pad2 (n) { return (n < 10 ? '0' : '') + n }
+
+function parseYMD (str) {
+  if (!str || typeof str !== 'string') return null
+  const m = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec(str)
+  if (!m) return null
+  const y = parseInt(m[1], 10)
+  const mo = parseInt(m[2], 10) - 1
+  const d = parseInt(m[3], 10)
+  const dt = new Date(y, mo, d)
+  if (dt.getFullYear() !== y || dt.getMonth() !== mo || dt.getDate() !== d) return null
+  return dt
+}
+
+function toYMD (date) {
+  if (!(date instanceof Date)) return ''
+  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`
+}
+
+// Lightweight moment-style formatter for display only
+// Supported tokens: YYYY, YY, MMMM, MMM, MM, M, DD, D
+// This avoids adding a dependency while covering common needs
+const MONTH_NAMES_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+function formatDate (date, fmt = 'YYYY-MM-DD') {
+  if (!(date instanceof Date)) return ''
+  const Y = date.getFullYear()
+  const M = date.getMonth() + 1
+  const D = date.getDate()
+  // Build a token map and replace via a single regex pass to prevent
+  // cascading replacements (e.g., replacing D inside Dec from MMM).
+  const tokenMap = {
+    YYYY: String(Y),
+    YY: String(Y).slice(-2),
+    MMMM: MONTH_NAMES_FULL[M - 1],
+    MMM: MONTH_NAMES_SHORT[M - 1],
+    MM: pad2(M),
+    M: String(M),
+    DD: pad2(D),
+    D: String(D)
+  }
+  // Longest tokens first in alternation to ensure correct matching
+  const re = /(YYYY|MMMM|MMM|YY|MM|M|DD|D)/g
+  return fmt.replace(re, (match) => tokenMap[match] ?? match)
+}
+
+function ensureState (holdingPen, property) {
+  if (!holdingPen) return {}
+  if (!holdingPen[STATE_SYMBOL]) {
+    Object.defineProperty(holdingPen, STATE_SYMBOL, { value: {}, enumerable: false })
+  }
+  const map = holdingPen[STATE_SYMBOL]
+  if (!map[property]) {
+    map[property] = { open: false, viewMonth: null, viewYear: null, tmpDate: null }
+  }
+  return map[property]
+}
+
+function ensureId (holdingPen, property, uniqueKey) {
+  if (!holdingPen) return `sf-date-${property || Math.random().toString(36).slice(2)}`
+  if (!holdingPen[ID_MAP_SYMBOL]) {
+    Object.defineProperty(holdingPen, ID_MAP_SYMBOL, { value: {}, enumerable: false })
+  }
+  const map = holdingPen[ID_MAP_SYMBOL]
+  if (!map[property]) {
+    map[property] = `sf-date-${property}-${Math.random().toString(36).slice(2)}`
+  }
+  return `sf-date-${uniqueKey || map[property]}`
+}
+
+function commitValue ({ holdingPen, property, onchange, valueStr }) {
+  const fauxE = { currentTarget: { validity: { valid: true }, value: valueStr } }
+  formField(holdingPen, property)(fauxE)
+  onchange && onchange(fauxE)
+}
+
+function getMonthMatrix (year, month) {
+  const first = new Date(year, month, 1)
+  const startDay = first.getDay() // 0-6 Sun-Sat
+  const daysInMonth = new Date(year, month + 1, 0).getDate()
+  const prevMonthDays = new Date(year, month, 0).getDate()
+  const cells = []
+  // Fill leading blanks from previous month
+  for (let i = 0; i < startDay; i++) {
+    cells.push({ d: prevMonthDays - startDay + 1 + i, other: true })
+  }
+  // Current month days
+  for (let d = 1; d <= daysInMonth; d++) cells.push({ d, other: false })
+  // Trailing blanks to fill 6 rows of 7 or to end of grid
+  while (cells.length % 7 !== 0) cells.push({ d: cells.length, other: true })
+  return cells
+}
+
+function buildCalendarUI ({ state, today, onPickDay, onPrevMonth, onNextMonth, onPrevYear, onNextYear }) {
+  const y = state.viewYear
+  const m = state.viewMonth
+  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+  const weekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  const cells = getMonthMatrix(y, m)
+  const sel = state.tmpDate
+  const isToday = (d) => today.getFullYear() === y && today.getMonth() === m && today.getDate() === d
+  const isSelected = (d) => sel && sel.getFullYear() === y && sel.getMonth() === m && sel.getDate() === d
+
+  return html`
+    <div class="${styles.calHeader}">
+      <button type="button" class="${styles.navBtn}" onclick=${onPrevMonth} aria-label="Previous month">
+        <span class="${styles.arrowIcon}" style="transform: rotate(90deg);">${solidDown({ colour: '#ccc' })}</span>
+      </button>
+      <div class="${styles.monthLabel}">
+        <span>${monthNames[m]}</span>
+        <span class="${styles.yearWrap}" aria-label="Year controls">
+          <span class="${styles.yearNum}">${y}</span>
+          <span class="${styles.yearControls}">
+            <button type="button" class="${styles.yearBtn}" onclick=${onNextYear} aria-label="Next year">
+              <span class="${styles.yearArrowIcon}" style="transform: rotate(180deg);">${solidDown({ colour: '#ccc' })}</span>
+            </button>
+            <button type="button" class="${styles.yearBtn}" onclick=${onPrevYear} aria-label="Previous year">
+              <span class="${styles.yearArrowIcon}" style="transform: rotate(0deg);">${solidDown({ colour: '#ccc' })}</span>
+            </button>
+          </span>
+        </span>
+      </div>
+      <button type="button" class="${styles.navBtn}" onclick=${onNextMonth} aria-label="Next month">
+        <span class="${styles.arrowIcon}" style="transform: rotate(270deg);">${solidDown({ colour: '#ccc' })}</span>
+      </button>
+    </div>
+    <div class="${styles.weekHead}">${weekNames.map(w => html`<div style="text-align:center;">${w}</div>`)}</div>
+    <div class="${styles.grid}">
+      ${cells.map((c, idx) => {
+        if (c.other) return html`<div></div>`
+        const d = c.d
+        const selStyle = isSelected(d) ? 'background:#48aaf3; color:#fff;' : 'color:#999;'
+        const bgStyle = isSelected(d) ? '' : 'background:#fff;'
+        const todayStyle = isToday(d) ? 'box-shadow: inset 0 0 0 2px #c9c9c9;' : ''
+        return html`<button type="button" style="padding:6px; ${selStyle} ${bgStyle} ${todayStyle} border:1px solid #c9c9c9; cursor:pointer;" onclick=${() => onPickDay(d)}>${d}</button>`
+      })}
+    </div>
+  `
+}
+
+export default function datePicker ({
+  wrapperStyle = null,
+  holdingPen,
+  label,
+  placeholder,
+  property,
+  required,
+  pattern,
+  disabled,
+  disableClear = false,
+  onchange,
+  oninput,
+  format = 'YYYY-MM-DD',
+  uniqueKey
+} = {}) {
+  const wrapperId = ensureId(holdingPen, property, uniqueKey)
+  const state = ensureState(holdingPen, property)
+
+  const currentStr = holdingPen && property ? holdingPen[property] : ''
+  const now = new Date()
+  if (state.viewMonth === null || state.viewYear === null) {
+    const baseDate = parseYMD(currentStr) || now
+    state.viewMonth = baseDate.getMonth()
+    state.viewYear = baseDate.getFullYear()
+  }
+  if (!state.tmpDate) {
+    state.tmpDate = parseYMD(currentStr) || new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  }
+
+  const commit = () => {
+    const valueStr = state.tmpDate ? toYMD(state.tmpDate) : ''
+    commitValue({ holdingPen, property, onchange, valueStr })
+    state.open = false
+    rerender()
+  }
+
+  const clearValue = (e) => {
+    if (e) { e.stopPropagation(); e.preventDefault() }
+    commitValue({ holdingPen, property, onchange, valueStr: '' })
+    state.open = false
+    rerender()
+    return false
+  }
+
+  // No typing allowed for date input; interaction is via popup only
+
+  const open = (e) => {
+    if (disabled) return
+    e && e.stopPropagation()
+    // Make opening idempotent to avoid double-toggle on focus+click
+    if (state.open) return
+    state.open = true
+    rerender()
+    if (typeof window !== 'undefined' && state.open) {
+      const closeOnOutside = (ev) => {
+        const wrapperEl = document.getElementById(wrapperId)
+        if (!wrapperEl) return
+        if (!wrapperEl.contains(ev.target)) {
+          state.open = false
+          rerender()
+          document.removeEventListener('mousedown', closeOnOutside, true)
+        }
+      }
+      setTimeout(() => document.addEventListener('mousedown', closeOnOutside, true), 0)
+    }
+  }
+
+  const popup = state.open
+    ? html`<div class="${styles.popup}" role="dialog" aria-modal="false">
+        ${buildCalendarUI({
+          state,
+          today: new Date(),
+          onPickDay: (d) => { state.tmpDate = new Date(state.viewYear, state.viewMonth, d); commit() },
+          onPrevMonth: () => { if (state.viewMonth === 0) { state.viewMonth = 11; state.viewYear -= 1 } else { state.viewMonth -= 1 }; rerender() },
+          onNextMonth: () => { if (state.viewMonth === 11) { state.viewMonth = 0; state.viewYear += 1 } else { state.viewMonth += 1 }; rerender() },
+          onPrevYear: () => { state.viewYear -= 1; rerender() },
+          onNextYear: () => { state.viewYear += 1; rerender() }
+        })}
+      </div>`
+    : ''
+
+  const displayValue = (() => {
+    const d = parseYMD(currentStr)
+    if (!d) return ''
+    return formatDate(d, format || 'YYYY-MM-DD')
+  })()
+
+  return html`
+    <div id="${wrapperId}" class="${wrapperStyle}" style="min-height: 55px; display: inline-block; width: calc(100% - 10px); margin: 40px 5px 5px 5px;">
+      <div style="display: inline-block; width: 100%; text-align: left; position: relative; padding: 0;" onclick=${e => e.stopPropagation()}>
+        ${label ? html`<span class="${styles.label}" style="opacity: ${(holdingPen && (holdingPen[property] === 0 || holdingPen[property])) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,0.8); position: absolute; top: -36px;">${label}${required ? ' *' : ''}</span>` : ''}
+        ${!disableClear ? html`<div data-clear class="${styles.clear}" onclick=${clearValue}>clear</div>` : ''}
+        <div class="${styles.icon}">${calendarIcon({ colour: '#ccc', width: 20, height: 20 })}</div>
+        <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : 'cursor: pointer;'}" class="${styles.textfield} ${styles.noType} ${styles.withRightIcon} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ?required=${required}
+          onclick=${open}
+          onfocus=${open}
+          readonly
+          placeholder="${(placeholder || 'Date') + (required ? ' *' : '')}"
+          type="text" ${pattern ? { pattern } : ''}
+          .value=${displayValue} data-input />
+        ${popup}
+      </div>
+    </div>
+  `
+}

package/components/dropdown.mjs

@@ -1,6 +1,6 @@
 import { html, css } from 'halfcab'
 
-let styles = css`
+const styles = css`
 
   .dropdown {
     position: relative;
@@ -34,13 +34,35 @@ let styles = css`
   }
 `
 
-export default ({ menuItems, visible, side, width, margin, backgroundColour }) => html`
-  <div tabindex="-1" class="${styles.dropdown}" style="position: relative; z-index: 100000; ${!visible ? 'display: none;' : ''}${side === 'right' ? 'float: right;' : ''}">
-    <div class="${styles.dropdownContent}" style="background-color: ${backgroundColour || '#f9f9f9'}; ${side === 'right' ? 'right: 0;' : ''} width: ${width || '160px'};${margin ? `margin: ${margin};` : ''}">
-    ${menuItems.filter(item => !item.visibleUnder || (item.visibleUnder && typeof window !== 'undefined' && window.innerWidth <= parseInt(item.visibleUnder)))
-    .map(item => html`
-      ${item.separator ? html`<hr class="${styles.separator}">` : item.disabled === true ? html`<div style="opacity: 0.3; pointer-events: none;">${item.text}</div>` : html`<div style="cursor: pointer;" onclick=${item.action}>${item.text}</div>`}
-    `)}
+export default ({ menuItems = [], options = [], visible = true, side, width, margin, backgroundColour }) => {
+  const items = Array.isArray(menuItems) ? menuItems : (Array.isArray(options) ? options : [])
+  const filtered = items.filter(item => {
+    if (!item) return false
+    if (!item.visibleUnder) return true
+    if (typeof window === 'undefined') return false
+    const limit = parseInt(item.visibleUnder, 10)
+    return Number.isFinite(limit) ? window.innerWidth <= limit : true
+  })
+
+  return html`
+    <div tabindex="-1" class="${styles.dropdown}" style="position: relative; z-index: 100000; ${!visible ? 'display: none;' : ''}${side === 'right' ? 'float: right;' : ''}">
+      <div class="${styles.dropdownContent}" style="background-color: ${backgroundColour || '#f9f9f9'}; ${side === 'right' ? 'right: 0;' : ''} width: ${width || '160px'};${margin ? `margin: ${margin};` : ''}">
+      ${filtered.map(item => {
+        const label = item.text != null ? item.text : (item.name != null ? item.name : '')
+        const disabled = item.disabled === true
+        const hasAction = typeof item.action === 'function'
+        if (item.separator) {
+          return html`<hr class="${styles.separator}">`
+        }
+        if (disabled) {
+          return html`<div style="opacity: 0.3; pointer-events: none;">${label}</div>`
+        }
+        if (hasAction) {
+          return html`<div style="cursor: pointer;" onclick=${item.action}>${label}</div>`
+        }
+        return html`<div>${label}</div>`
+      })}
+      </div>
     </div>
-  </div>   
-`
+  `
+}

package/components/fab.mjs

@@ -69,7 +69,7 @@ export default ({ diameter, text, action, colour, disabled, on, icon, menuItems,
   `)}</div>` : ''}
   </div>
   <button class="${styles.fab}" onclick=${e => action(e)} 
-  ${disabled ? 'disabled' : ''}
+  ?disabled=${disabled}
   style="width: ${diameter}; height: ${diameter};background-color: ${colour};opacity: ${on ? '1' : '0'};bottom: ${on ? '15px' : `calc(-1 * (${diameter} + 10px))`}; ${icon ? 'padding-top: 2px' : ''};">${icon || text}</button>
 </div>
 `

package/components/selectbox.mjs

@@ -1,7 +1,7 @@
 import { html, css, formField, fieldIsTouched } from 'halfcab'
 import solidDown from './icons/solidDown.mjs'
 
-let styles = css`
+const styles = css`
   .selectBox {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -63,19 +63,20 @@ let styles = css`
 `
 
 export default ({ wrapperStyle = null, holdingPen, label, property, options, required, disabled, onchange, oninput }) => {
-  let currentOption = options.find(option => {
+  const currentOption = options.find(option => {
     if (typeof option === 'object') {
       return option.value === holdingPen[property]
     } else {
       return option === holdingPen[property]
     }
   })
+  // text color is always #999 per latest design; placeholder state no longer affects color
 
   return html`
-    <label style="text-align: left; position: relative; display: inline-block; width: 100%;" ${wrapperStyle ? { 'class': wrapperStyle } : ''}>
+    <label style="text-align: left; position: relative; display: inline-block; width: 100%;" ${wrapperStyle ? { class: wrapperStyle } : ''}>
       <div class="${styles.down}">${solidDown({ colour: '#ccc' })}</div>
       <span class="${styles.label}">${label}${required ? ' *' : ''}</span>
-      <select ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}background-color: ${typeof currentOption === 'object' && currentOption.colour ? `#${currentOption.colour}` : 'white'}" class="${styles.selectBox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" oninput=${e => { formField(holdingPen, property)(e); oninput && oninput(e) }} onchange=${e => { formField(holdingPen, property)(e); onchange && onchange(e) }} onblur=${formField(holdingPen, property)}>
+      <select ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}background-color: ${typeof currentOption === 'object' && currentOption.colour ? `#${currentOption.colour}` : 'white'}; color: #999;" class="${styles.selectBox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" oninput=${e => { formField(holdingPen, property)(e); oninput && oninput(e) }} onchange=${e => { formField(holdingPen, property)(e); onchange && onchange(e) }} onblur=${formField(holdingPen, property)}>
         <option value="${required ? 'Select an option' : ''}" ?selected=${!holdingPen[property]} ?disabled=${required} : ''}>${required ? 'Select an option' : ''}</option>
         ${options.map(option => {
     let optionValue

package/components/textarea.mjs

@@ -2,6 +2,7 @@ import { html, css, formField, fieldIsTouched } from 'halfcab'
 
 let styles = css`
   .textarea {
+    color: #999;
     padding: 10px;
     border: solid 5px #c9c9c9;
     transition: border 0.3s;
@@ -56,13 +57,13 @@ function change ({ e, holdingPen, property, label }) {
 }
 
 export default ({ holdingPen, label, placeholder, property, required, pattern, onkeyup, autofocus, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, darkBackground, onchange, height, oninput, element }) => {
-  let input = html`<textarea data-gramm="false" style="${height ? `height: ${height}` : ''}" class="${styles.textarea} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { height = window.getComputedStyle(element.querySelector('textarea')).height; change({ e, holdingPen, property, label: styles.label }); oninput && oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" ${pattern ? { pattern } : ''}>${holdingPen[property] || ''}</textarea>`
+  let input = html`<textarea data-gramm="false" style="${height ? `height: ${height}` : ''}" class="${styles.textarea} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ?required=${required} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { height = window.getComputedStyle(element.querySelector('textarea')).height; change({ e, holdingPen, property, label: styles.label }); oninput && oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" ${pattern ? { pattern } : ''}>${holdingPen[property] || ''}</textarea>`
 
   if (autofocus) {
     input.autofocus = true
   }
 
   return html`
-     <label ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}width: 100%; text-align: left; display: inline-block;"><span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>${input}</label>
+     <label ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}width: 100%; text-align: left; display: inline-block;"><span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>${input}</label>
   `
 }

package/components/textfield.mjs

@@ -1,6 +1,6 @@
 import { html, css, formField, fieldIsTouched } from 'halfcab'
 // language=CSS
-let styles = css`
+const styles = css`
     .textfield {
         padding: 10px;
         border: solid 5px #c9c9c9;
@@ -19,6 +19,7 @@ let styles = css`
         appearance: none;
         z-index: 20;
         position: relative;
+        color: #999;
     }
 
     .label {
@@ -63,9 +64,9 @@ let styles = css`
 `
 
 function change ({ e, holdingPen, property, label }) {
-  let ff = formField(holdingPen, property)(e)
-  let closestLabel = e.target.closest('label')
-  let labelEl = closestLabel.querySelector(label.selector)
+  const ff = formField(holdingPen, property)(e)
+  const closestLabel = e.target.closest('label')
+  const labelEl = closestLabel.querySelector(label.selector)
   if (labelEl) {
     if (holdingPen[property] === 0 || holdingPen[property]) {
       labelEl.style.opacity = 1
@@ -78,30 +79,35 @@ function change ({ e, holdingPen, property, label }) {
 }
 
 function determineType (type) {
-  if (type.toLowerCase() === 'float' || type.toLowerCase() === 'integer') {
-    return 'number'
-  }
+  // Normalize and guard against undefined/null/non-string values
+  const t = (typeof type === 'string' ? type : (type != null ? String(type) : 'text'))
+  const tl = t.toLowerCase()
 
-  return type || 'input'
+  if (tl === 'float' || tl === 'integer') return 'number'
+  if (tl === 'string') return 'text'
+  if (tl === 'input') return 'text'
+  return t || 'text'
 }
 
 function determineStep (type) {
-  if (type.toLowerCase() === 'float' || type.toLowerCase() === 'number') {
-    return '0.1'
-  }
-
+  const tl = typeof type === 'string' ? type.toLowerCase() : ''
+  if (tl === 'float' || tl === 'number') return '0.1'
   return '1'
 }
 
 export default ({ highlightBorder = false, wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, type, autofocus, valueContext, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, maxCharacters, maxNumber, minNumber, darkBackground, onkeyup, oninput, onchange }) => {
-  let input = html`<input data-gramm="false" ${disabled ? { disabled } : ''} ${maxNumber ? { max: maxNumber } : ''} ${minNumber ? { min: minNumber } : ''} ${maxCharacters ? { maxlength: maxCharacters } : ''} style="${type === 'color' ? 'height: 50px; padding: 2px 3px;' : ''}${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''} ${highlightBorder ? styles.highlight : ''}" value="${holdingPen[property] !== undefined && holdingPen[property] !== null ? holdingPen[property] : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { change({ e, holdingPen, property, label: styles.label }); oninput && oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${determineType(type)}" ${pattern ? { pattern } : ''} ${type.toLowerCase() === 'number' ? { step: determineStep(type) } : ''} />`
+  const normalizedType = determineType(type)
+  const isColor = normalizedType === 'color'
+  const isNumber = normalizedType === 'number'
+
+  const input = html`<input data-gramm="false" ?disabled=${disabled} ${maxNumber ? { max: maxNumber } : ''} ${minNumber ? { min: minNumber } : ''} ${maxCharacters ? { maxlength: maxCharacters } : ''} style="${isColor ? 'height: 50px; padding: 2px 3px;' : ''}${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''} ${highlightBorder ? styles.highlight : ''}" value="${holdingPen[property] !== undefined && holdingPen[property] !== null ? holdingPen[property] : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ?required=${required} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { change({ e, holdingPen, property, label: styles.label }); oninput && oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${normalizedType}" ${pattern ? { pattern } : ''} ${isNumber ? { step: determineStep(normalizedType) } : ''} />`
 
   if (autofocus) {
     input.autofocus = true
   }
 
   return html`
-      <div ${wrapperStyle ? { 'class': wrapperStyle } : ''} style="display: inline-block; width: calc(100% - 10px); margin: ${label ? '40' : '5'}px 5px 5px 5px;">
+      <div ${wrapperStyle ? { class: wrapperStyle } : ''} style="display: inline-block; width: calc(100% - 10px); margin: ${label ? '40' : '5'}px 5px 5px 5px;">
           <label style="width: 100%; text-align: left; position: relative; padding: 0;">
               ${valueContext ? html`<div class="${styles.valueContext}">${valueContext}</div>` : ''}
               ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>` : ''}