stalefish 8.1.2 → 8.1.13

package/components/checkbox.mjs

@@ -1,6 +1,6 @@
 import { html, css, formField, fieldIsTouched } from 'halfcab'
 
-let styles = css`
+const styles = css`
     .checkbox {
         margin: 0 10px 0 20px !important;
         position: absolute;
@@ -8,6 +8,11 @@ let styles = css`
         top: 16.5px;
     }
 
+    /* Do not show native blue focus ring on the actual checkbox; we use the
+       outer label's darker border (.activeFocus) as the visual focus cue. */
+    .checkbox:focus { outline: none; box-shadow: none; }
+    .checkbox:focus-visible { outline: none; box-shadow: none; }
+
     .label {
         position: relative;
         display: inline-flex;
@@ -15,7 +20,7 @@ let styles = css`
         border-radius: 0;
         font-size: 18px;
         font-weight: normal;
-        color: #999;
+        color: #666;
         margin: 5px 5px 5px 5px;
         border: solid 5px #c9c9c9;
         user-select: none;
@@ -24,16 +29,38 @@ let styles = css`
         width: calc(100% - 10px);
     }
 
+    /* Programmatic visual focus/active indicator to match other fields */
+    .activeFocus {
+        border: solid 5px #969696;
+    }
+
     .checkbox.touched:invalid:not(:focus) {
         outline: red solid 2px;
     }
 `
 
 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 => {
-      formField(holdingPen, property)(e)
-      onchange && onchange(e)
-  }} type="checkbox" ?required=${required} />`
+  const addActive = (e) => {
+    if (!e) return
+    const wrapper = e.target && typeof e.target.closest === 'function' && e.target.closest('label')
+    if (!wrapper) return
+    const box = wrapper.querySelector('.' + styles.label)
+    if (box && box.classList) box.classList.add(styles.activeFocus)
+  }
+  const removeActive = (e) => {
+    if (!e) return
+    const wrapper = e.target && typeof e.target.closest === 'function' && e.target.closest('label')
+    if (!wrapper) return
+    const box = wrapper.querySelector('.' + styles.label)
+    if (box && box.classList) box.classList.remove(styles.activeFocus)
+  }
+
+  const 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); addActive(e) }}
+    onfocus=${e => { addActive(e) }}
+    onblur=${e => { removeActive(e) }}
+    onclick=${e => { addActive(e) }}
+    type="checkbox" ?required=${required} />`
 
   checkboxEl.indeterminate = indeterminate || false
 

package/components/datePicker.mjs

@@ -24,7 +24,7 @@ const styles = css`
         position: relative;
         height: 55px;
         background-color: #FFF;
-        color: #999;
+        color: #666;
     }
 
     .noType {
@@ -34,6 +34,9 @@ const styles = css`
 
     .textfield::placeholder { color: #999; }
 
+    /* Programmatic visual focus when interacting via popup/nav */
+    .activeFocus { border: solid 5px #969696; }
+
     .label {
         transition: opacity 0.75s;
         border-top-right-radius: 5px;
@@ -204,25 +207,25 @@ function buildCalendarUI ({ state, today, onPickDay, onPrevMonth, onNextMonth, o
 
   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 type="button" class="${styles.navBtn}" onclick=${onPrevMonth} aria-label="Previous month" style="transform: rotate(90deg);" tabindex="-1" onmousedown=${(e) => e.preventDefault()}>
+              <span class="${styles.arrowIcon}">${solidDown({ colour: '#ccc', width: '13', height: '13' })}</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 type="button" class="${styles.yearBtn}" onclick=${onNextYear} aria-label="Next year" style="transform: rotate(180deg);" tabindex="-1" onmousedown=${(e) => e.preventDefault()}>
+              <span class="${styles.yearArrowIcon}">${solidDown({ colour: '#ccc', width: '12', height: '12' })}</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 type="button" class="${styles.yearBtn}" onclick=${onPrevYear} aria-label="Previous year" style="transform: rotate(0deg);" tabindex="-1" onmousedown=${(e) => e.preventDefault()}>
+              <span class="${styles.yearArrowIcon}">${solidDown({ colour: '#ccc', width: '12', height: '12' })}</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 type="button" class="${styles.navBtn}" onclick=${onNextMonth} aria-label="Next month" style="transform: rotate(270deg);" tabindex="-1" onmousedown=${(e) => e.preventDefault()}>
+              <span class="${styles.arrowIcon}">${solidDown({ colour: '#ccc', width: '13', height: '13' })}</span>
           </button>
       </div>
       <div class="${styles.weekHead}">${weekNames.map(w => html`<div style="text-align:center;">${w}</div>`)}</div>
@@ -233,7 +236,7 @@ function buildCalendarUI ({ state, today, onPickDay, onPrevMonth, onNextMonth, o
               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>`
+              return html`<button type="button" style="padding:6px; ${selStyle} ${bgStyle} ${todayStyle} border:1px solid #c9c9c9; cursor:pointer;" onclick=${() => onPickDay(d)} tabindex="-1" onmousedown=${(e) => e.preventDefault()}>${d}</button>`
           })}
       </div>
   `
@@ -268,11 +271,25 @@ export default function datePicker ({
     state.tmpDate = parseYMD(currentStr) || new Date(now.getFullYear(), now.getMonth(), now.getDate())
   }
 
+  // Emphasize focus styling on the input and keep it until blur/close
+  const pulseActive = () => {
+    if (typeof window === 'undefined') return
+    setTimeout(() => {
+      const el = document.getElementById(`${wrapperId}-input`)
+      if (!el || el.disabled) return
+      try { el.focus && el.focus({ preventScroll: true }) } catch (e) {}
+      el.classList && el.classList.add(styles.activeFocus)
+      // Do not auto-remove; rely on blur/close logic below
+    }, 0)
+  }
+
   const commit = () => {
     const valueStr = state.tmpDate ? toYMD(state.tmpDate) : ''
     commitValue({ holdingPen, property, onchange, valueStr })
     state.open = false
     rerender()
+    // Keep focus style only if input retains focus; otherwise it will be cleared on blur
+    pulseActive()
   }
 
   const clearValue = (e) => {
@@ -280,6 +297,7 @@ export default function datePicker ({
     commitValue({ holdingPen, property, onchange, valueStr: '' })
     state.open = false
     rerender()
+    pulseActive()
     return false
   }
 
@@ -292,16 +310,26 @@ export default function datePicker ({
     if (state.open) return
     state.open = true
     rerender()
+    pulseActive()
     if (typeof window !== 'undefined' && state.open) {
+      // Clean up any previous listener in case of defensive re-open
+      if (state._closeOnOutside) {
+        try { document.removeEventListener('mousedown', state._closeOnOutside, true) } catch {}
+      }
       const closeOnOutside = (ev) => {
         const wrapperEl = document.getElementById(wrapperId)
         if (!wrapperEl) return
         if (!wrapperEl.contains(ev.target)) {
           state.open = false
           rerender()
+          // Remove active styling when popup closes due to outside click
+          const el = document.getElementById(`${wrapperId}-input`)
+          if (el && el.classList) el.classList.remove(styles.activeFocus)
           document.removeEventListener('mousedown', closeOnOutside, true)
+          state._closeOnOutside = null
         }
       }
+      state._closeOnOutside = closeOnOutside
       setTimeout(() => document.addEventListener('mousedown', closeOnOutside, true), 0)
     }
   }
@@ -312,10 +340,10 @@ export default function datePicker ({
                   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() }
+                  onPrevMonth: () => { if (state.viewMonth === 0) { state.viewMonth = 11; state.viewYear -= 1 } else { state.viewMonth -= 1 } rerender(); pulseActive() },
+                  onNextMonth: () => { if (state.viewMonth === 11) { state.viewMonth = 0; state.viewYear += 1 } else { state.viewMonth += 1 } rerender(); pulseActive() },
+                  onPrevYear: () => { state.viewYear -= 1; rerender(); pulseActive() },
+                  onNextYear: () => { state.viewYear += 1; rerender(); pulseActive() }
               })}
           </div>`
     : ''
@@ -336,9 +364,21 @@ export default function datePicker ({
               ${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}
+              <input id="${wrapperId}-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}
+                     onfocus=${(e) => { open(e); const el = e && e.target; if (el && el.classList) el.classList.add(styles.activeFocus) }}
+                     onblur=${(e) => {
+                       // Close the popup when tabbing/clicking away to avoid multiple open popups
+                       state.open = false
+                       rerender()
+                       const el = e && e.target
+                       if (el && el.classList) el.classList.remove(styles.activeFocus)
+                       // Also remove any pending outside-click listener
+                       if (typeof window !== 'undefined' && state._closeOnOutside) {
+                         try { document.removeEventListener('mousedown', state._closeOnOutside, true) } catch {}
+                         state._closeOnOutside = null
+                       }
+                     }}
                      readonly
                      placeholder="${(placeholder || 'Date') + (required ? ' *' : '')}"
                      type="text" ${pattern ? { pattern } : ''}

package/components/selectbox.mjs

@@ -36,7 +36,7 @@ const styles = css`
         left: 5px;
         font-size: 16px;
         font-weight: normal;
-        color: #999;
+        color: #666;
         margin-left: 5px;
         padding: 9px;
         background-color: rgba(255,255,255,0.8);
@@ -70,18 +70,19 @@ export default ({ wrapperStyle = null, holdingPen, label, property, options, req
       return option === holdingPen[property]
     }
   })
-  // text color is always #999 per latest design; placeholder state no longer affects color
 
   const wrapperClassName = wrapperStyle
     ? (typeof wrapperStyle === 'string' ? wrapperStyle : (wrapperStyle.toString ? wrapperStyle.toString() : ''))
     : ''
 
+  const isPlaceholder = !currentOption || (typeof currentOption === 'object' && currentOption.value === '') || currentOption === ''
+
   return html`
       <label style="text-align: left; position: relative; display: inline-block; width: 100%;" class="${wrapperClassName}">
           <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'}; 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>
+          <select ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}background-color: ${typeof currentOption === 'object' && currentOption.colour ? `#${currentOption.colour}` : 'white'}; color: ${isPlaceholder ? '#999' : '#666'};" 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
                   let optionName
@@ -91,7 +92,7 @@ export default ({ wrapperStyle = null, holdingPen, label, property, options, req
                   } else {
                       optionValue = option
                   }
-                  return html`<option value="${optionValue}" ?selected=${holdingPen[property] == optionValue}>${optionName || optionValue}</option>` // eslint-disable-line
+                  return html`<option style="color: ${optionValue === '' ? '#999' : '#666'};" value="${optionValue}" ?selected=${holdingPen[property] == optionValue}>${optionName || optionValue}</option>` // eslint-disable-line
               })}
           </select>
       </label>

package/components/textarea.mjs

@@ -2,7 +2,7 @@ import { html, css, formField, fieldIsTouched } from 'halfcab'
 
 let styles = css`
     .textarea {
-        color: #999;
+        color: #666;
         padding: 10px;
         border: solid 5px #c9c9c9;
         transition: border 0.3s;

package/components/textfield.mjs

@@ -1,4 +1,5 @@
-import { html, css, formField, fieldIsTouched } from 'halfcab'
+import { html, css, formField, fieldIsTouched, rerender } from 'halfcab'
+import solidDown from './icons/solidDown.mjs'
 // language=CSS
 const styles = css`
     .textfield {
@@ -19,9 +20,14 @@ const styles = css`
         appearance: none;
         z-index: 20;
         position: relative;
-        color: #999;
+        color: #666;
     }
 
+    /* Provide room for custom right-side controls when present */
+    .withRightControls { padding-right: 44px; }
+    /* Legacy fixed padding when valueContext present (no longer used; kept for backward compat) */
+    .withRightControlsAndValueContext { padding-right: 114px; }
+
     .label {
         transition: opacity 0.75s;
         border-top-right-radius: 5px;
@@ -32,6 +38,11 @@ const styles = css`
         z-index: 10;
     }
 
+    /* Color input slightly shifts internal box metrics; lift label by ~6px for perfect alignment */
+    .labelColorAdjustForColorType {
+        top: -61px;
+    }
+
     .textfield.highlight {
         border-color: #ff4081;
     }
@@ -40,6 +51,11 @@ const styles = css`
         border: solid 5px #969696;
     }
 
+    /* Programmatic visual focus when clicking custom controls or related UI */
+    .activeFocus {
+        border: solid 5px #969696;
+    }
+
     .textfield::placeholder {
         color: #999;
     }
@@ -48,30 +64,96 @@ const styles = css`
         border-color: red;
     }
 
+    /* Normalize native color input height to match other fields (55px)
+       Use the same padding as other textfields so overlay elements (label/valueContext)
+       align identically regardless of type. */
+    input[type="color"].textfield {
+        height: 55px;            /* match date/time/text visual height */
+        padding: 10px;           /* match standard textfield padding to avoid vertical shift */
+    }
+    /* WebKit-specific internals to remove extra inset spacing/border */
+    input[type="color"].textfield::-webkit-color-swatch-wrapper { padding: 0; }
+    input[type="color"].textfield::-webkit-color-swatch { border: none; }
+
     .valueContext {
         position: absolute;
         color: #AAA;
         font-size: 1.1em;
-        line-height: 1.2em;
+        /* Enforce exact badge height and vertical centering */
+        height: 42px;
+        line-height: 42px;
         font-weight: normal;
         box-sizing: border-box;
         top: -12px;
         right: 7px;
         background-color: #EEE;
-        padding: 10px;
+        /* Horizontal padding only so height remains exactly 42px */
+        padding: 0 10px;
         z-index: 30;
     }
+
+    /* Custom up/down controls (aligned with datePicker/timePicker) */
+    .controls {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        z-index: 30;
+        width: 24px;
+        pointer-events: auto;
+    }
+
+    /* Dynamic positioning is handled via JS when valueContext is present */
+    .controlsWithValueContext { right: 80px; }
+
+    .btn {
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        padding: 0;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 16px;
+    }
+    .btn + .btn { margin-top: -3px; }
+    .btn:focus { outline: none; }
+    .btn:focus-visible { outline: 2px solid #c9c9c9; outline-offset: 2px; }
+
+    /* Match requested styling: light grey (#CCC) and ~40% smaller (12px -> 7px) */
+    .arrowIcon { display: block; width: 7px; height: 7px; color: #CCC; line-height: 0; transform-origin: 50% 50%; margin: 0 auto; }
+    .arrowIcon > svg { display: block; width: 7px; height: 7px; }
+
+    /* Hide native number spinners for consistency across browsers */
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+    input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 `
 
 function change ({ e, holdingPen, property, label }) {
   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
-    } else {
-      labelEl.style.opacity = 0
+
+  // When programmatically changing via custom arrows we may not have e.target
+  // Guard DOM lookups so we don't throw and skip label opacity tweaks in that case
+  const target = e && (e.target || e.currentTarget)
+  const canQuery = target && typeof target.closest === 'function'
+  if (canQuery) {
+    const closestLabel = target.closest('label')
+    if (closestLabel) {
+      const labelEl = label && label.selector ? closestLabel.querySelector(label.selector) : null
+      if (labelEl) {
+        if (holdingPen[property] === 0 || holdingPen[property]) {
+          labelEl.style.opacity = 1
+        } else {
+          labelEl.style.opacity = 0
+        }
+      }
     }
   }
 
@@ -96,11 +178,112 @@ function determineStep (type) {
 }
 
 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 }) => {
+  // Generate a stable wrapper id per holdingPen+property to enable DOM measurement for dynamic positioning
+  const TF_ID_MAP_SYMBOL = Symbol.for('stalefish.textfield.idMap')
+  function ensureId (holding, prop) {
+    if (!holding) return `sf-textfield-${prop || Math.random().toString(36).slice(2)}`
+    if (!holding[TF_ID_MAP_SYMBOL]) {
+      Object.defineProperty(holding, TF_ID_MAP_SYMBOL, { value: {}, enumerable: false })
+    }
+    const map = holding[TF_ID_MAP_SYMBOL]
+    if (!map[prop]) {
+      map[prop] = `sf-textfield-${prop}-${Math.random().toString(36).slice(2)}`
+    }
+    return map[prop]
+  }
+
+  const wrapperId = ensureId(holdingPen, property)
   const normalizedType = determineType(type)
-  const isColor = normalizedType === 'color'
   const isNumber = normalizedType === 'number'
+  const isInteger = typeof type === 'string' && type.toLowerCase() === 'integer'
+  // Hide valueContext when type is color (design requirement)
+  const hasValueContext = !!valueContext && normalizedType !== 'color'
+
+  // Increment/decrement logic for custom controls
+  const coerce = (val) => {
+    if (val === '' || val === null || val === undefined) return null
+    const n = Number(val)
+    return Number.isFinite(n) ? n : null
+  }
+  // Derive step details and use scaled integer math to avoid FP artifacts (e.g., 3.3000000000000003)
+  const stepStr = determineStep(normalizedType)
+  const stepDp = isInteger ? 0 : (String(stepStr).includes('.') ? (String(stepStr).split('.')[1] || '').length : 0)
+  const scale = Math.pow(10, stepDp)
+  const stepInt = isInteger ? 1 : Math.round(Number(stepStr) * scale) // integer number of scaled units per step
+  const clamp = (n) => {
+    if (typeof maxNumber === 'number' && n > maxNumber) n = maxNumber
+    if (typeof minNumber === 'number' && n < minNumber) n = minNumber
+    return n
+  }
+  const setValue = (newVal) => {
+    // Provide a faux event compatible with formField and our guarded change()
+    const faux = { currentTarget: { value: String(newVal), validity: { valid: true } } }
+    change({ e: faux, holdingPen, property, label: styles.label })
+    onchange && onchange(faux)
+    rerender()
+  }
+
+  // Briefly emphasize focus styling when interacting via custom arrows
+  const pulseActive = () => {
+    if (typeof window === 'undefined') return
+    setTimeout(() => {
+      const el = document.getElementById(`${wrapperId}-input`)
+      if (!el || el.disabled) return
+      try { el.focus && el.focus({ preventScroll: true }) } catch (e) {}
+      el.classList && el.classList.add(styles.activeFocus)
+      setTimeout(() => { el && el.classList && el.classList.remove(styles.activeFocus) }, 400)
+    }, 0)
+  }
+  const inc = () => {
+    const cur = coerce(holdingPen[property])
+    const base = cur == null ? (typeof minNumber === 'number' ? minNumber : 0) : cur
+    let next
+    if (isInteger) {
+      next = Math.trunc(base + 1)
+    } else {
+      const scaled = Math.round(base * scale)
+      next = (scaled + stepInt) / scale
+      next = Number(next.toFixed(stepDp))
+    }
+    next = clamp(next)
+    setValue(next)
+    pulseActive()
+  }
+  const dec = () => {
+    const cur = coerce(holdingPen[property])
+    const base = cur == null ? (typeof minNumber === 'number' ? minNumber : 0) : cur
+    let next
+    if (isInteger) {
+      next = Math.trunc(base - 1)
+    } else {
+      const scaled = Math.round(base * scale)
+      next = (scaled - stepInt) / scale
+      next = Number(next.toFixed(stepDp))
+    }
+    next = clamp(next)
+    setValue(next)
+    pulseActive()
+  }
 
-  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) } : ''} />`
+  const input = html`<input data-gramm="false"
+    ?disabled=${disabled}
+    ${maxNumber ? { max: maxNumber } : ''}
+    ${minNumber ? { min: minNumber } : ''}
+    ${maxCharacters ? { maxlength: maxCharacters } : ''}
+    style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}"
+    id="${wrapperId}-input"
+    class="${styles.textfield} ${isNumber ? styles.withRightControls : ''} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''} ${highlightBorder ? styles.highlight : ''}"
+    value="${holdingPen[property] !== undefined && holdingPen[property] !== null ? holdingPen[property] : ''}"
+    onkeyup=${e => { onkeyup && onkeyup(e); if (isNumber && e && e.key === 'ArrowUp') { e.preventDefault && e.preventDefault(); inc() } else if (isNumber && e && e.key === 'ArrowDown') { e.preventDefault && e.preventDefault(); dec() } }}
+    ?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
@@ -110,12 +293,53 @@ export default ({ highlightBorder = false, wrapperStyle = null, holdingPen, labe
     ? (typeof wrapperStyle === 'string' ? wrapperStyle : (wrapperStyle.toString ? wrapperStyle.toString() : ''))
     : ''
 
+  // Dynamically position the custom up/down controls 10px to the left of valueContext (if present)
+  if (typeof window !== 'undefined') {
+    const applyLayout = () => {
+      if (!hasValueContext) return
+      const vc = document.getElementById(`${wrapperId}-vc`)
+      const ctrls = document.getElementById(`${wrapperId}-ctrls`)
+      const inputEl = document.getElementById(`${wrapperId}-input`)
+      if (!vc || !ctrls) return
+      const badgeWidth = vc.offsetWidth || 0
+      const rightOffset = 7 + badgeWidth + 10 // valueContext right is 7px; keep 10px gap
+      ctrls.style.right = rightOffset + 'px'
+      if (inputEl) {
+        const safety = 10
+        const arrowsWidth = 24
+        inputEl.style.paddingRight = (rightOffset + arrowsWidth + safety) + 'px'
+      }
+    }
+    // Schedule after render
+    setTimeout(applyLayout, 0)
+    // Observe badge width changes
+    setTimeout(() => {
+      if (!hasValueContext) return
+      const vc = document.getElementById(`${wrapperId}-vc`)
+      if (vc && typeof window !== 'undefined' && typeof window.ResizeObserver === 'function') {
+        const ro = new window.ResizeObserver(() => applyLayout())
+        ro.observe(vc)
+      }
+      window.addEventListener('resize', applyLayout)
+    }, 0)
+  }
+
   return html`
-      <div class="${wrapperClassName}" style="display: inline-block; width: calc(100% - 10px); margin: ${label ? '40' : '5'}px 5px 5px 5px;">
+      <div id="${wrapperId}" class="${wrapperClassName}" 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>` : ''}
+              ${hasValueContext ? html`<div id="${wrapperId}-vc" data-vc class="${styles.valueContext}">${valueContext}</div>` : ''}
+              ${label ? html`<span class="${styles.label} ${normalizedType === 'color' ? styles.labelColorAdjustForColorType : ''}" 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}
+              ${
+                (isNumber && !disabled)
+                  ? html`
+                      <span id="${wrapperId}-ctrls" class="${styles.controls} ${hasValueContext ? styles.controlsWithValueContext : ''}" aria-hidden="false">
+                        <button type="button" tabindex="-1" aria-label="Increase value" class="${styles.btn}" style="transform: rotate(180deg);" onmousedown=${(e) => e.preventDefault()} onclick=${inc}>${solidDown({ colour: '#CCC', width: '14px', height: '14px' })}</button>
+                        <button type="button" tabindex="-1" aria-label="Decrease value" class="${styles.btn}" onmousedown=${(e) => e.preventDefault()} onclick=${dec}>${solidDown({ colour: '#CCC', width: '14px', height: '14px' })}</button>
+                      </span>
+                    `
+                  : ''
+              }
           </label>
       </div>
   `

package/components/timePicker.mjs

@@ -23,7 +23,7 @@ const styles = css`
         position: relative;
         height: 55px;
         background-color: #FFF;
-        color: #999;
+        color: #666;
     }
 
     /* Placeholder text color */
@@ -86,6 +86,9 @@ const styles = css`
     }
     .arrowIcon > svg { display: block; width: 12px; height: 12px; }
 
+    /* Programmatic visual focus when clicking custom controls */
+    .activeFocus { border: solid 5px #969696; }
+
     .clear {
         cursor: pointer;
         position: absolute;
@@ -223,7 +226,33 @@ export default function timePicker ({
   if (typeof state.tmpHour !== 'number') state.tmpHour = hm.h
   if (typeof state.tmpMinute !== 'number') state.tmpMinute = hm.min
 
+  // Emphasize focus styling on the input and keep it until blur
+  const pulseActive = () => {
+    if (typeof window === 'undefined') return
+    setTimeout(() => {
+      const el = document.querySelector(`#${wrapperId} [data-input]`)
+      if (!el || el.disabled) return
+      try { el.focus && el.focus({ preventScroll: true }) } catch (e) {}
+      el.classList && el.classList.add(styles.activeFocus)
+      // Do not auto-remove; rely on onblur handler below to clear the class
+    }, 0)
+  }
+
   const stepMinute = (delta) => () => {
+    // Before stepping, resync internal state from the visible input value if possible.
+    // This ensures that after manual typing (e.g., "12" → auto "12:00"), the arrows
+    // operate on the currently displayed HH:MM rather than any stale tmp state.
+    if (typeof document !== 'undefined') {
+      try {
+        const el = document.querySelector(`#${wrapperId} [data-input]`)
+        const txt = el && typeof el.value === 'string' ? el.value.trim() : ''
+        const parsed = parseHM(txt)
+        if (parsed && Number.isFinite(parsed.h) && Number.isFinite(parsed.min)) {
+          state.tmpHour = Math.max(0, Math.min(23, parsed.h | 0))
+          state.tmpMinute = Math.max(0, Math.min(59, parsed.min | 0))
+        }
+      } catch {}
+    }
     // If stepping by 15 minutes, snap to quarters (00, 15, 30, 45) instead of adding to arbitrary minutes
     if (minuteStep === 15) {
       const dir = delta >= 0 ? 1 : -1
@@ -254,6 +283,7 @@ export default function timePicker ({
       const valueStr = `${pad2(h)}:${pad2(m)}`
       commitValue({ holdingPen, property, onchange, valueStr })
       rerender()
+      pulseActive()
       return
     }
 
@@ -264,6 +294,7 @@ export default function timePicker ({
     const valueStr = `${pad2(state.tmpHour)}:${pad2(state.tmpMinute)}`
     commitValue({ holdingPen, property, onchange, valueStr })
     rerender()
+    pulseActive()
   }
 
   // Helpers for caret-preserving normalization
@@ -483,6 +514,10 @@ export default function timePicker ({
             }
           } catch (err) { /* ignore */ }
         }
+        // Keep internal state in sync so arrow controls operate on the visible value (HH:00)
+        // Do not commit yet to avoid disrupting the user's minute entry; arrows will commit when used.
+        state.tmpHour = hh
+        state.tmpMinute = 0
         // Do not commit yet; allow subsequent typing to edit minutes naturally
         oninput && oninput(e)
         return
@@ -610,6 +645,7 @@ export default function timePicker ({
     if (e) { e.stopPropagation(); e.preventDefault() }
     commitValue({ holdingPen, property, onchange, valueStr: '' })
     rerender()
+    pulseActive()
     return false
   }
 
@@ -625,10 +661,19 @@ export default function timePicker ({
               ${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}">${timeIcon({ colour: '#ccc', width: 20, height: 20 })}</div>
-              <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${styles.withRightIcon} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ?required=${required}
+              <input id="${wrapperId}-input" data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${styles.withRightIcon} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ?required=${required}
                      onchange=${onTypedChange}
                      oninput=${onTypedChange}
-                     onblur=${finalizeTypedValue}
+                     onfocus=${() => {
+                       const el = typeof document !== 'undefined' && document.querySelector(`#${wrapperId} [data-input]`)
+                       if (el && el.classList) el.classList.add(styles.activeFocus)
+                     }}
+                     onblur=${(ev) => {
+                       // finalize value and remove active class on blur
+                       finalizeTypedValue(ev)
+                       const el = ev && ev.target
+                       if (el && el.classList) el.classList.remove(styles.activeFocus)
+                     }}
                      onkeydown=${(ev) => {
                          if (ev.key === 'ArrowUp') {
                              ev.preventDefault()
@@ -646,11 +691,11 @@ export default function timePicker ({
                      .value=${displayValue} data-input />
 
               <div class="${styles.controls}">
-                  <button type="button" tabindex="-1" class="${styles.btn}" onclick=${stepMinute(minuteStep)} aria-label="Increase time by ${minuteStep} minutes">
-                      <span class="${styles.arrowIcon}" style="transform: rotate(180deg); display:inline-block;">${solidDown({ colour: '#ccc' })}</span>
+                  <button type="button" tabindex="-1" class="${styles.btn}" style="transform: rotate(180deg);" onmousedown=${(e) => e.preventDefault()} onclick=${stepMinute(minuteStep)} aria-label="Increase time by ${minuteStep} minutes">
+                      <span class="${styles.arrowIcon}">${solidDown({ colour: '#ccc', width: '12', height: '12' })}</span>
                   </button>
-                  <button type="button" tabindex="-1" class="${styles.btn}" onclick=${stepMinute(-minuteStep)} aria-label="Decrease time by ${minuteStep} minutes">
-                      <span class="${styles.arrowIcon}" style="transform: rotate(0deg); display:inline-block;">${solidDown({ colour: '#ccc' })}</span>
+                  <button type="button" tabindex="-1" class="${styles.btn}" onmousedown=${(e) => e.preventDefault()} onclick=${stepMinute(-minuteStep)} aria-label="Decrease time by ${minuteStep} minutes">
+                      <span class="${styles.arrowIcon}">${solidDown({ colour: '#ccc', width: '12', height: '12' })}</span>
                   </button>
               </div>
           </div>

package/components/uploader.mjs

@@ -81,6 +81,11 @@ const styles = css`
         z-index: 20;
     }
 
+    /* Programmatic visual focus/active indicator to match other fields */
+    .activeFocus {
+        border: solid 5px #969696;
+    }
+
     .dragOver {}
     .dragAccept {}
     .dragReject {}
@@ -129,6 +134,14 @@ function clearAllUploaderFrames () {
     })
   } catch {}
 }
+
+// Ensure only one uploader shows the active (darker) border at a time
+function clearAllUploaderActiveFocus () {
+  try {
+    const frames = document.querySelectorAll(`.${styles.frame}`)
+    frames.forEach(f => f.classList.remove(styles.activeFocus))
+  } catch {}
+}
 /**
  * Functional uploader component compatible with halfcab's lit-html base.
  * No internal instance caching; simply returns a template.
@@ -288,6 +301,20 @@ export default function uploader (args) {
   }
 
   // Helpers for drag & drop behavior
+  const addActive = (frameEl) => {
+    try {
+      if (!frameEl || disabled) return
+      // Exclusivity: remove active state from all other uploader frames first
+      clearAllUploaderActiveFocus()
+      frameEl.classList && frameEl.classList.add(styles.activeFocus)
+    } catch {}
+  }
+  const removeActive = (frameEl) => {
+    try {
+      if (!frameEl) return
+      frameEl.classList && frameEl.classList.remove(styles.activeFocus)
+    } catch {}
+  }
   const parseAcceptList = (acceptStr) => {
     if (!acceptStr) return null
     return acceptStr.split(',').map(s => s.trim().toLowerCase()).filter(Boolean)
@@ -404,6 +431,8 @@ export default function uploader (args) {
       frame.classList.add(styles.dragOver)
       frame.classList.add(styles.dragReject)
     }
+    // Always show active border while a drag is over the frame
+    addActive(frame)
   }
 
   const onDragEnter = (e) => {
@@ -417,6 +446,8 @@ export default function uploader (args) {
       frame.classList.add(styles.dragOver)
       frame.classList.add(styles.dragReject)
     }
+    // Indicate active when drag enters
+    addActive(frame)
   }
 
   const onDragLeave = (e) => {
@@ -427,6 +458,8 @@ export default function uploader (args) {
     if (!related || !frame.contains(related)) {
       // Remove local reject indicators; global will maintain accept state
       frame.classList.remove(styles.dragReject)
+      // Remove active indicator when leaving drop zone
+      removeActive(frame)
     }
   }
 
@@ -437,6 +470,8 @@ export default function uploader (args) {
     // Clear all global highlights so every frame returns to neutral on drop
     clearAllUploaderFrames()
     const frame = e.currentTarget
+    // Keep active state after a successful drop
+    addActive(frame)
     const input = frame.querySelector('input[type="file"]')
     const files = e.dataTransfer && e.dataTransfer.files
     let ok = true
@@ -473,6 +508,8 @@ export default function uploader (args) {
     } else {
       addDragClass(frame, styles.dragReject)
       setTimeout(() => clearDragClasses(frame), 180)
+      // If rejected, also remove active state shortly after to reflect error
+      setTimeout(() => removeActive(frame), 180)
     }
   }
 
@@ -529,6 +566,8 @@ export default function uploader (args) {
       if (!inputEl || disabled) return
       const frame = inputEl.closest ? inputEl.closest(`.${styles.frame}`) : inputEl.parentElement
       if (!frame || frame.dataset.opening === '1') return
+      // Add active border immediately while chooser is opening
+      addActive(frame)
       const placeholderEl = frame.querySelector(`.${styles.placeholder}`)
       if (!placeholderEl) return // only show when placeholder is currently visible
 
@@ -566,10 +605,25 @@ export default function uploader (args) {
       <div class="${wrapperClassName}" style="display: inline-block; width: 100%; margin-top: 36px;">
           <label style="width: 100%; text-align: left; position: relative; padding: 0; cursor: pointer;">
               ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0};">${label}${required ? ' *' : ''}</span>` : ''}
-              <span class="${styles.frame}" data-accept="${acceptAttr || ''}" data-disabled="${!!disabled}" ondragenter=${onDragEnter} ondragover=${onDragOver} ondragleave=${onDragLeave} ondrop=${onDrop} onmousedown=${(e) => {
+              <span class="${styles.frame}" style="color: ${holdingPen[property] ? '#666' : '#999'};" data-accept="${acceptAttr || ''}" data-disabled="${!!disabled}" ondragenter=${onDragEnter} ondragover=${onDragOver} ondragleave=${onDragLeave} ondrop=${onDrop} onmousedown=${(e) => {
                   if (disabled) return
                   try {
                       const frame = e.currentTarget
+                      // Prevent the wrapper from losing active state when clicking internal controls
+                      e.preventDefault && e.preventDefault()
+                      addActive(frame)
+                      // Remove active state if user clicks outside the label area next time
+                      const labelEl = frame && frame.closest('label')
+                      const onDocDown = (ev) => {
+                        try {
+                          if (!labelEl) return
+                          const target = ev && ev.target
+                          if (target && labelEl.contains(target)) return
+                          removeActive(frame)
+                          document.removeEventListener('mousedown', onDocDown, true)
+                        } catch {}
+                      }
+                      setTimeout(() => document.addEventListener('mousedown', onDocDown, true), 0)
                       const input = frame && frame.querySelector('input[type="file"]')
                       showOpeningWhileChoosing(input)
                   } catch {}
@@ -588,21 +642,34 @@ export default function uploader (args) {
                           <div
                                   class="${styles.clear}"
                                   role="button"
-                                  tabindex="0"
+                                  tabindex="-1"
+                                  onmousedown=${(e) => {
+                                      // Prevent focus from moving to the clear control; keep focus/active on the frame
+                                      e.preventDefault()
+                                      e.stopPropagation()
+                                  }}
                                   onclick=${(e) => {
                                       // Prevent the label's default behavior of triggering the hidden file input
                                       e.preventDefault()
                                       e.stopPropagation()
+                                      try {
+                                        const frame = e.currentTarget && e.currentTarget.closest && e.currentTarget.closest('label') && e.currentTarget.closest('label').querySelector('.' + styles.frame)
+                                        addActive(frame)
+                                      } catch {}
                                       // Only clear when there is a value; otherwise do nothing
                                       if (holdingPen && Object.prototype.hasOwnProperty.call(holdingPen, property) && holdingPen[property]) {
                                           if (typeof onclear === 'function') onclear(e)
                                       }
                                   }}
                                   onkeydown=${(e) => {
-                                      // Also handle keyboard activation without triggering the file chooser
+                                      // Keep handler for programmatic focus cases; Tab will not reach here due to tabindex -1
                                       if (e.key === 'Enter' || e.key === ' ') {
                                           e.preventDefault()
                                           e.stopPropagation()
+                                          try {
+                                            const frame = e.currentTarget && e.currentTarget.closest && e.currentTarget.closest('label') && e.currentTarget.closest('label').querySelector('.' + styles.frame)
+                                            addActive(frame)
+                                          } catch {}
                                           if (holdingPen && Object.prototype.hasOwnProperty.call(holdingPen, property) && holdingPen[property]) {
                                               if (typeof onclear === 'function') onclear(e)
                                           }

package/example/app.mjs

@@ -7,7 +7,9 @@ const styles = css`
   .card { padding: 12px; border: 1px solid #8884; border-radius: 8px; background: #efefef; }
   .title { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
   .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
-  .subtle { font-size: 12px; opacity: 0.7; }
+  .subtle { font-size: 12px; opacity: 0.7; },
+  .textfieldSelectBox { width: 260px }
+  .variantSelectFull { width: 100%; }
 `
 
 // Demo form state
@@ -43,12 +45,12 @@ const Showcase = () => html`
       <div class="${styles.card}">
         <div class="${styles.title}">Text field</div>
         <div class="${styles.row}">
-          <label style="display:flex; align-items:center; gap:8px;">
-            <span class="${styles.subtle}">variant</span>
+          <div style="width: 100%;">
             ${sf.selectbox({
     holdingPen: state.demo,
     property: 'textType',
-    label: 'Type',
+    label: 'Variant',
+    wrapperStyle: styles.variantSelectFull,
     options: [
       { name: 'string', value: 'string' },
       { name: 'number', value: 'number' },
@@ -73,15 +75,17 @@ const Showcase = () => html`
       rerender()
     }
   })}
-          </label>
+          </div>
         </div>
         ${sf.textfield({
-    holdingPen: state.demo,
-    property: 'text',
-    label: 'Value',
-    placeholder: state.demo.textType === 'color' ? '#rrggbb' : (state.demo.textType === 'number' || state.demo.textType === 'integer' ? 'enter a number' : 'e.g. Ada Lovelace'),
-    type: state.demo.textType
-  })}
+          holdingPen: state.demo,
+          property: 'text',
+          label: 'Value',
+          placeholder: state.demo.textType === 'color' ? '#rrggbb' : (state.demo.textType === 'number' || state.demo.textType === 'integer' ? 'enter a number' : 'e.g. Ada Lovelace'),
+          type: state.demo.textType,
+          valueContext: 'longer',
+          wrapperStyle: styles.textfieldSelectBox
+        })}
       </div>
 
       <div class="${styles.card}">

package/example/index.html

@@ -15,6 +15,7 @@
           "shifty-router/create-location.js": "https://esm.sh/shifty-router@0.1.1/create-location.js",
 
           "lit": "https://esm.sh/lit@3.3.2",
+          "lit/directives/unsafe-html.js": "https://esm.sh/lit@3.3.2/directives/unsafe-html.js",
           "@lit-labs/ssr-client": "https://esm.sh/@lit-labs/ssr-client@1.1.8",
           "@lit-labs/ssr": "/stalefish/example/ssr-browser-stub.js",
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stalefish",
-  "version": "8.1.2",
+  "version": "8.1.13",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",
@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/lorengreenfield/stalefish#readme",
   "devDependencies": {
-    "halfcab": "^15.0.3",
+    "halfcab": "^15.0.4",
     "standard": "^12.0.1"
   },
   "dependencies": {