@k2b/ui 0.7.0 → 0.9.0

package/dist/ssr/feedback/toast.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["feedback/toast.ts"],"sourcesContent":["import { getK2bPortalRoot } from \"../internal/portal\";\nimport { resolveUiMessages } from \"../intl/messages\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\";\n\nexport type ToastAction = {\n  label: string;\n} & ({ href: string } | { onClick: () => void });\n\nexport type ToastOptions = {\n  variant?: ToastVariant;\n  duration?: number;\n  iconClass?: string;\n  title?: string;\n  action?: ToastAction | null;\n  /** Fraction from 0 to 1, or an indeterminate activity indicator. null removes it. */\n  progress?: number | \"indeterminate\" | null;\n  dismissLabel?: string;\n};\n\nexport type ToastHandle = {\n  dismiss: () => void;\n  update: (description: string, options?: ToastOptions) => void;\n};\n\nexport interface ToastFn {\n  (description: string, options?: ToastOptions): ToastHandle;\n  success: (description: string, options?: Omit<ToastOptions, \"variant\">) => ToastHandle;\n  error: (description: string, options?: Omit<ToastOptions, \"variant\">) => ToastHandle;\n  dismissAll: () => void;\n}\n\nconst DEFAULT_DURATION_MS = 3000;\nconst MAX_VISIBLE_TOASTS = 5;\nconst ANIMATION_MS = 200;\nexport const K2B_TOAST_CONTAINER_ID = \"k2b-ui-toast-container\";\nconst CONTAINER_ATTRIBUTE = \"data-k2b-toast-container\";\n\ntype VariantStyle = {\n  tone: \"info\" | \"success\" | \"danger\";\n  iconClass: string;\n  titleKey: \"info\" | \"success\" | \"error\";\n};\n\nconst VARIANT_STYLES: Record<ToastVariant, VariantStyle> = {\n  default: {\n    tone: \"info\",\n    iconClass: \"ti-info-circle\",\n    titleKey: \"info\",\n  },\n  success: {\n    tone: \"success\",\n    iconClass: \"ti-check\",\n    titleKey: \"success\",\n  },\n  error: {\n    tone: \"danger\",\n    iconClass: \"ti-x\",\n    titleKey: \"error\",\n  },\n};\n\n/** Default titles follow the document locale, like the other imperative `@k2b/ui` surfaces. */\nconst defaultTitle = (variant: ToastVariant): string => resolveUiMessages()[VARIANT_STYLES[variant].titleKey];\n\nconst normalizedIconClass = (iconClass: string): string => {\n  const tokens = iconClass\n    .split(/\\s+/)\n    .filter(Boolean)\n    .filter((token) => token !== \"ti\");\n  return [\"ti\", ...tokens].join(\" \");\n};\n\nconst applyIconClass = (icon: HTMLElement, iconClass: string): void => {\n  icon.className = normalizedIconClass(iconClass);\n};\n\nconst applyLiveRegion = (element: HTMLElement, variant: ToastVariant): void => {\n  const isError = variant === \"error\";\n  element.setAttribute(\"role\", isError ? \"alert\" : \"status\");\n  element.setAttribute(\"aria-live\", isError ? \"assertive\" : \"polite\");\n  element.setAttribute(\"aria-atomic\", \"true\");\n};\n\nconst liveToasts = new Set<ToastHandle>();\n\nconst ensureContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") return null;\n  const root = getK2bPortalRoot();\n  let container = root.querySelector<HTMLElement>(`[${CONTAINER_ATTRIBUTE}]`);\n  if (container) return container;\n\n  container = document.createElement(\"div\");\n  container.id = K2B_TOAST_CONTAINER_ID;\n  container.setAttribute(CONTAINER_ATTRIBUTE, \"\");\n  container.setAttribute(\"popover\", \"manual\");\n  // Keep the source rail geometry inline: it must defeat UA popover defaults\n  // even when a consumer has not loaded the optional package stylesheet yet.\n  container.style.cssText =\n    \"position:fixed;top:auto;left:auto;bottom:env(safe-area-inset-bottom,0px);right:env(safe-area-inset-right,0px);\" +\n    \"z-index:50;box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;\" +\n    \"width:min(22rem,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));\" +\n    \"height:auto;max-width:100vw;\" +\n    \"max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));\" +\n    \"margin:0;padding:1rem;border:0;background:transparent;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;\" +\n    \"pointer-events:none;\";\n  root.appendChild(container);\n  return container;\n};\n\nconst promoteToTopLayer = (container: HTMLElement): HTMLElement => {\n  if (typeof container.showPopover !== \"function\" || !container.isConnected) return container;\n  let active = container;\n  try {\n    if (container.matches(\":popover-open\") || document.querySelector(\"dialog:modal\")) {\n      const next = container.cloneNode(false) as HTMLElement;\n      while (container.firstChild) next.appendChild(container.firstChild);\n      const root = container.parentElement ?? getK2bPortalRoot();\n      container.remove();\n      root.appendChild(next);\n      active = next;\n    }\n    if (!active.matches(\":popover-open\")) active.showPopover();\n  } catch {\n    active.removeAttribute(\"popover\");\n  }\n  return active;\n};\n\n/** Close every empty rail so an emptied container does not linger in the top\n *  layer. Rails are resolved at call time on purpose: `promoteToTopLayer`\n *  swaps the element for a fresh clone, so a container captured when the toast\n *  was created can already be detached by the time the toast is dismissed. */\nconst hideEmptyContainers = (): void => {\n  if (typeof document === \"undefined\") return;\n  for (const container of Array.from(document.querySelectorAll<HTMLElement>(`[${CONTAINER_ATTRIBUTE}]`))) {\n    if (container.childElementCount > 0 || typeof container.hidePopover !== \"function\") continue;\n    try {\n      if (container.matches(\":popover-open\")) container.hidePopover();\n    } catch {\n      // Already hidden or disconnected.\n    }\n  }\n};\n\nconst renderLead = (lead: HTMLElement, variant: ToastVariant, iconClassOverride?: string): HTMLElement => {\n  const style = VARIANT_STYLES[variant];\n  lead.replaceChildren();\n  lead.className = \"k2b-toast__icon\";\n  lead.dataset.tone = style.tone;\n  const icon = document.createElement(\"i\");\n  applyIconClass(icon, iconClassOverride ?? style.iconClass);\n  icon.setAttribute(\"aria-hidden\", \"true\");\n  lead.appendChild(icon);\n  return icon;\n};\n\nconst showToast = (description: string, options?: ToastOptions): ToastHandle => {\n  const initialContainer = ensureContainer();\n  if (!initialContainer) {\n    const noop = () => {};\n    return { dismiss: noop, update: noop };\n  }\n\n  let dismissed = false;\n  let dismissTimer: ReturnType<typeof setTimeout> | null = null;\n  let currentVariant: ToastVariant = options?.variant ?? \"default\";\n  let currentProgress = options?.progress ?? null;\n  let currentDuration = options?.duration ?? DEFAULT_DURATION_MS;\n  let remainingDuration = currentDuration;\n  let timerStartedAt = 0;\n  let pausedByPointer = false;\n  let pausedByFocus = false;\n\n  const toastElement = document.createElement(\"div\");\n  toastElement.className = \"k2b-toast\";\n  toastElement.dataset.tone = VARIANT_STYLES[currentVariant].tone;\n  toastElement.dataset.k2bToast = \"\";\n\n  const leadElement = document.createElement(\"div\");\n  let leadIconElement = renderLead(leadElement, currentVariant, options?.iconClass);\n\n  const contentElement = document.createElement(\"div\");\n  contentElement.className = \"k2b-toast__content\";\n  applyLiveRegion(contentElement, currentVariant);\n\n  const titleElement = document.createElement(\"div\");\n  titleElement.className = \"k2b-toast__title\";\n  titleElement.textContent = options?.title ?? defaultTitle(currentVariant);\n  const descriptionElement = document.createElement(\"div\");\n  descriptionElement.className = \"k2b-toast__description\";\n  descriptionElement.textContent = description;\n  contentElement.append(titleElement, descriptionElement);\n\n  const closeButton = document.createElement(\"button\");\n  closeButton.type = \"button\";\n  closeButton.className = \"k2b-toast__close\";\n  closeButton.setAttribute(\"aria-label\", options?.dismissLabel ?? \"Dismiss notification\");\n  const closeIcon = document.createElement(\"i\");\n  closeIcon.className = \"ti ti-x\";\n  closeIcon.setAttribute(\"aria-hidden\", \"true\");\n  closeButton.appendChild(closeIcon);\n\n  toastElement.append(leadElement, contentElement, closeButton);\n\n  const clearDismissTimer = () => {\n    if (dismissTimer === null) return;\n    clearTimeout(dismissTimer);\n    dismissTimer = null;\n  };\n\n  const pauseDismissTimer = () => {\n    if (dismissTimer === null) return;\n    remainingDuration = Math.max(0, remainingDuration - (Date.now() - timerStartedAt));\n    clearDismissTimer();\n  };\n\n  const resumeDismissTimer = () => {\n    if (dismissed || currentProgress !== null || currentDuration === 0 || remainingDuration <= 0 || pausedByPointer || pausedByFocus)\n      return;\n    clearDismissTimer();\n    timerStartedAt = Date.now();\n    dismissTimer = setTimeout(() => dismiss(), remainingDuration);\n  };\n\n  const resetDismissTimer = (duration: number) => {\n    clearDismissTimer();\n    currentDuration = duration;\n    remainingDuration = duration;\n    resumeDismissTimer();\n  };\n\n  const dismiss = () => {\n    if (dismissed) return;\n    dismissed = true;\n    clearDismissTimer();\n    liveToasts.delete(handle);\n    toastElement.dataset.closing = \"true\";\n    setTimeout(() => {\n      toastElement.remove();\n      hideEmptyContainers();\n    }, ANIMATION_MS);\n  };\n\n  const progressElement = document.createElement(\"progress\");\n  progressElement.className = \"k2b-toast__progress\";\n  progressElement.max = 1;\n  const renderProgress = () => {\n    progressElement.hidden = currentProgress === null;\n    progressElement.setAttribute(\"aria-label\", titleElement.textContent || descriptionElement.textContent || \"\");\n    if (typeof currentProgress === \"number\")\n      progressElement.value = Number.isFinite(currentProgress) ? Math.max(0, Math.min(1, currentProgress)) : 0;\n    else progressElement.removeAttribute(\"value\");\n  };\n  contentElement.append(progressElement);\n  renderProgress();\n  let actionElement: HTMLAnchorElement | HTMLButtonElement | null = null;\n  const renderAction = (action: ToastAction | null | undefined) => {\n    actionElement?.remove();\n    actionElement = null;\n    if (!action) return;\n    if (\"href\" in action) {\n      const link = document.createElement(\"a\");\n      link.href = action.href;\n      actionElement = link;\n    } else {\n      const button = document.createElement(\"button\");\n      button.type = \"button\";\n      actionElement = button;\n    }\n    actionElement.className = \"k2b-toast__action\";\n    actionElement.textContent = action.label;\n    actionElement.addEventListener(\"click\", (event) => {\n      event.stopPropagation();\n      if (\"onClick\" in action) action.onClick();\n      else dismiss();\n    });\n    contentElement.appendChild(actionElement);\n  };\n  renderAction(options?.action);\n\n  const update = (nextDescription: string, nextOptions?: ToastOptions) => {\n    if (dismissed) return;\n    descriptionElement.textContent = nextDescription;\n\n    const variantChanged = nextOptions?.variant !== undefined && nextOptions.variant !== currentVariant;\n    if (variantChanged) {\n      currentVariant = nextOptions.variant!;\n      toastElement.dataset.tone = VARIANT_STYLES[currentVariant].tone;\n      leadIconElement = renderLead(leadElement, currentVariant, nextOptions.iconClass);\n      applyLiveRegion(contentElement, currentVariant);\n    } else if (nextOptions?.iconClass !== undefined) {\n      applyIconClass(leadIconElement, nextOptions.iconClass);\n    }\n\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"title\")) {\n      titleElement.textContent = nextOptions.title ?? \"\";\n    } else if (variantChanged) {\n      titleElement.textContent = defaultTitle(currentVariant);\n    }\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"action\")) renderAction(nextOptions.action);\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"duration\")) {\n      currentDuration = nextOptions.duration ?? DEFAULT_DURATION_MS;\n    }\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"progress\")) currentProgress = nextOptions.progress ?? null;\n    if (nextOptions?.dismissLabel) closeButton.setAttribute(\"aria-label\", nextOptions.dismissLabel);\n    renderProgress();\n    resetDismissTimer(currentDuration);\n  };\n\n  toastElement.addEventListener(\"click\", () => {\n    if (currentProgress === null) dismiss();\n  });\n  closeButton.addEventListener(\"click\", (event) => {\n    event.stopPropagation();\n    dismiss();\n  });\n  toastElement.addEventListener(\"pointerenter\", () => {\n    pausedByPointer = true;\n    pauseDismissTimer();\n  });\n  toastElement.addEventListener(\"pointerleave\", () => {\n    pausedByPointer = false;\n    resumeDismissTimer();\n  });\n  toastElement.addEventListener(\"focusin\", () => {\n    pausedByFocus = true;\n    pauseDismissTimer();\n  });\n  toastElement.addEventListener(\"focusout\", (event) => {\n    if (toastElement.contains(event.relatedTarget as Node | null)) return;\n    pausedByFocus = false;\n    resumeDismissTimer();\n  });\n\n  const handle: ToastHandle = { dismiss, update };\n  liveToasts.add(handle);\n  if (liveToasts.size > MAX_VISIBLE_TOASTS) liveToasts.values().next().value?.dismiss();\n  promoteToTopLayer(initialContainer).appendChild(toastElement);\n  requestAnimationFrame(() => {\n    if (!dismissed) toastElement.dataset.open = \"true\";\n  });\n  resetDismissTimer(currentDuration);\n  return handle;\n};\n\nexport const isPointInsideToast = (x: number, y: number): boolean => {\n  if (typeof document === \"undefined\") return false;\n  const containers = Array.from(document.querySelectorAll<HTMLElement>(`[${CONTAINER_ATTRIBUTE}]`));\n  for (const container of containers) {\n    for (const child of Array.from(container.children)) {\n      const rect = child.getBoundingClientRect();\n      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) return true;\n    }\n  }\n  return false;\n};\n\nconst toastFn = ((description: string, options?: ToastOptions) => showToast(description, options)) as ToastFn;\ntoastFn.success = (description, options) => showToast(description, { ...options, variant: \"success\" });\ntoastFn.error = (description, options) => showToast(description, { ...options, variant: \"error\" });\ntoastFn.dismissAll = () => {\n  for (const handle of Array.from(liveToasts)) handle.dismiss();\n};\n\nexport const toast: ToastFn = toastFn;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["feedback/toast.ts"],"sourcesContent":["import { getK2bPortalRoot } from \"../internal/portal\";\nimport { resolveUiMessages } from \"../intl/messages\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\";\n\nexport type ToastAction = {\n  label: string;\n} & ({ href: string } | { onClick: () => void });\n\nexport type ToastOptions = {\n  variant?: ToastVariant;\n  duration?: number;\n  iconClass?: string;\n  title?: string;\n  action?: ToastAction | null;\n  /** Fraction from 0 to 1, or an indeterminate activity indicator. null removes it. */\n  progress?: number | \"indeterminate\" | null;\n  dismissLabel?: string;\n};\n\nexport type ToastHandle = {\n  dismiss: () => void;\n  update: (description: string, options?: ToastOptions) => void;\n};\n\nexport interface ToastFn {\n  (description: string, options?: ToastOptions): ToastHandle;\n  success: (description: string, options?: Omit<ToastOptions, \"variant\">) => ToastHandle;\n  error: (description: string, options?: Omit<ToastOptions, \"variant\">) => ToastHandle;\n  dismissAll: () => void;\n}\n\nconst DEFAULT_DURATION_MS = 3000;\nconst MAX_VISIBLE_TOASTS = 5;\nconst ANIMATION_MS = 200;\nexport const K2B_TOAST_CONTAINER_ID = \"k2b-ui-toast-container\";\nconst CONTAINER_ATTRIBUTE = \"data-k2b-toast-container\";\n\ntype VariantStyle = {\n  tone: \"info\" | \"success\" | \"danger\";\n  iconClass: string;\n  titleKey: \"info\" | \"success\" | \"error\";\n};\n\nconst VARIANT_STYLES: Record<ToastVariant, VariantStyle> = {\n  default: {\n    tone: \"info\",\n    iconClass: \"ti-info-circle\",\n    titleKey: \"info\",\n  },\n  success: {\n    tone: \"success\",\n    iconClass: \"ti-check\",\n    titleKey: \"success\",\n  },\n  error: {\n    tone: \"danger\",\n    iconClass: \"ti-x\",\n    titleKey: \"error\",\n  },\n};\n\n/** Default titles follow the document locale, like the other imperative `@k2b/ui` surfaces. */\nconst defaultTitle = (variant: ToastVariant): string => resolveUiMessages()[VARIANT_STYLES[variant].titleKey];\n\nconst normalizedIconClass = (iconClass: string): string => {\n  const tokens = iconClass\n    .split(/\\s+/)\n    .filter(Boolean)\n    .filter((token) => token !== \"ti\");\n  return [\"ti\", ...tokens].join(\" \");\n};\n\nconst applyIconClass = (icon: HTMLElement, iconClass: string): void => {\n  icon.className = normalizedIconClass(iconClass);\n};\n\nconst applyLiveRegion = (element: HTMLElement, variant: ToastVariant): void => {\n  const isError = variant === \"error\";\n  element.setAttribute(\"role\", isError ? \"alert\" : \"status\");\n  element.setAttribute(\"aria-live\", isError ? \"assertive\" : \"polite\");\n  element.setAttribute(\"aria-atomic\", \"true\");\n};\n\nconst liveToasts = new Set<ToastHandle>();\n\nconst ensureContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") return null;\n  const root = getK2bPortalRoot();\n  let container = root.querySelector<HTMLElement>(`[${CONTAINER_ATTRIBUTE}]`);\n  if (container) return container;\n\n  container = document.createElement(\"div\");\n  container.id = K2B_TOAST_CONTAINER_ID;\n  container.setAttribute(CONTAINER_ATTRIBUTE, \"\");\n  container.setAttribute(\"popover\", \"manual\");\n  // Keep the source rail geometry inline: it must defeat UA popover defaults\n  // even when a consumer has not loaded the optional package stylesheet yet.\n  // The stylesheet only moves the rail to the top edge on narrow viewports\n  // through the two edge variables.\n  container.style.cssText =\n    \"position:fixed;left:auto;right:env(safe-area-inset-right,0px);\" +\n    \"top:var(--k2b-toast-rail-top,auto);bottom:var(--k2b-toast-rail-bottom,env(safe-area-inset-bottom,0px));\" +\n    \"z-index:50;box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;\" +\n    \"width:min(22rem,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));\" +\n    \"height:auto;max-width:100vw;\" +\n    \"max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));\" +\n    \"margin:0;padding:1rem;border:0;background:transparent;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;\" +\n    \"pointer-events:none;\";\n  root.appendChild(container);\n  return container;\n};\n\nconst promoteToTopLayer = (container: HTMLElement): HTMLElement => {\n  if (typeof container.showPopover !== \"function\" || !container.isConnected) return container;\n  let active = container;\n  try {\n    if (container.matches(\":popover-open\") || document.querySelector(\"dialog:modal\")) {\n      const next = container.cloneNode(false) as HTMLElement;\n      while (container.firstChild) next.appendChild(container.firstChild);\n      const root = container.parentElement ?? getK2bPortalRoot();\n      container.remove();\n      root.appendChild(next);\n      active = next;\n    }\n    if (!active.matches(\":popover-open\")) active.showPopover();\n  } catch {\n    active.removeAttribute(\"popover\");\n  }\n  return active;\n};\n\n/** Close every empty rail so an emptied container does not linger in the top\n *  layer. Rails are resolved at call time on purpose: `promoteToTopLayer`\n *  swaps the element for a fresh clone, so a container captured when the toast\n *  was created can already be detached by the time the toast is dismissed. */\nconst hideEmptyContainers = (): void => {\n  if (typeof document === \"undefined\") return;\n  for (const container of Array.from(document.querySelectorAll<HTMLElement>(`[${CONTAINER_ATTRIBUTE}]`))) {\n    if (container.childElementCount > 0 || typeof container.hidePopover !== \"function\") continue;\n    try {\n      if (container.matches(\":popover-open\")) container.hidePopover();\n    } catch {\n      // Already hidden or disconnected.\n    }\n  }\n};\n\nconst renderLead = (lead: HTMLElement, variant: ToastVariant, iconClassOverride?: string): HTMLElement => {\n  const style = VARIANT_STYLES[variant];\n  lead.replaceChildren();\n  lead.className = \"k2b-toast__icon\";\n  lead.dataset.tone = style.tone;\n  const icon = document.createElement(\"i\");\n  applyIconClass(icon, iconClassOverride ?? style.iconClass);\n  icon.setAttribute(\"aria-hidden\", \"true\");\n  lead.appendChild(icon);\n  return icon;\n};\n\nconst showToast = (description: string, options?: ToastOptions): ToastHandle => {\n  const initialContainer = ensureContainer();\n  if (!initialContainer) {\n    const noop = () => {};\n    return { dismiss: noop, update: noop };\n  }\n\n  let dismissed = false;\n  let dismissTimer: ReturnType<typeof setTimeout> | null = null;\n  let currentVariant: ToastVariant = options?.variant ?? \"default\";\n  let currentProgress = options?.progress ?? null;\n  let currentDuration = options?.duration ?? DEFAULT_DURATION_MS;\n  let remainingDuration = currentDuration;\n  let timerStartedAt = 0;\n  let pausedByPointer = false;\n  let pausedByFocus = false;\n\n  const toastElement = document.createElement(\"div\");\n  toastElement.className = \"k2b-toast\";\n  toastElement.dataset.tone = VARIANT_STYLES[currentVariant].tone;\n  toastElement.dataset.k2bToast = \"\";\n\n  const leadElement = document.createElement(\"div\");\n  let leadIconElement = renderLead(leadElement, currentVariant, options?.iconClass);\n\n  const contentElement = document.createElement(\"div\");\n  contentElement.className = \"k2b-toast__content\";\n  applyLiveRegion(contentElement, currentVariant);\n\n  const titleElement = document.createElement(\"div\");\n  titleElement.className = \"k2b-toast__title\";\n  titleElement.textContent = options?.title ?? defaultTitle(currentVariant);\n  const descriptionElement = document.createElement(\"div\");\n  descriptionElement.className = \"k2b-toast__description\";\n  descriptionElement.textContent = description;\n  contentElement.append(titleElement, descriptionElement);\n\n  const closeButton = document.createElement(\"button\");\n  closeButton.type = \"button\";\n  closeButton.className = \"k2b-toast__close\";\n  closeButton.setAttribute(\"aria-label\", options?.dismissLabel ?? resolveUiMessages().dismissNotification);\n  const closeIcon = document.createElement(\"i\");\n  closeIcon.className = \"ti ti-x\";\n  closeIcon.setAttribute(\"aria-hidden\", \"true\");\n  closeButton.appendChild(closeIcon);\n\n  toastElement.append(leadElement, contentElement, closeButton);\n\n  const clearDismissTimer = () => {\n    if (dismissTimer === null) return;\n    clearTimeout(dismissTimer);\n    dismissTimer = null;\n  };\n\n  const pauseDismissTimer = () => {\n    if (dismissTimer === null) return;\n    remainingDuration = Math.max(0, remainingDuration - (Date.now() - timerStartedAt));\n    clearDismissTimer();\n  };\n\n  const resumeDismissTimer = () => {\n    if (dismissed || currentProgress !== null || currentDuration === 0 || remainingDuration <= 0 || pausedByPointer || pausedByFocus)\n      return;\n    clearDismissTimer();\n    timerStartedAt = Date.now();\n    dismissTimer = setTimeout(() => dismiss(), remainingDuration);\n  };\n\n  const resetDismissTimer = (duration: number) => {\n    clearDismissTimer();\n    currentDuration = duration;\n    remainingDuration = duration;\n    resumeDismissTimer();\n  };\n\n  const dismiss = () => {\n    if (dismissed) return;\n    dismissed = true;\n    clearDismissTimer();\n    liveToasts.delete(handle);\n    toastElement.dataset.closing = \"true\";\n    setTimeout(() => {\n      toastElement.remove();\n      hideEmptyContainers();\n    }, ANIMATION_MS);\n  };\n\n  const progressElement = document.createElement(\"progress\");\n  progressElement.className = \"k2b-toast__progress\";\n  progressElement.max = 1;\n  const renderProgress = () => {\n    progressElement.hidden = currentProgress === null;\n    progressElement.setAttribute(\"aria-label\", titleElement.textContent || descriptionElement.textContent || \"\");\n    if (typeof currentProgress === \"number\")\n      progressElement.value = Number.isFinite(currentProgress) ? Math.max(0, Math.min(1, currentProgress)) : 0;\n    else progressElement.removeAttribute(\"value\");\n  };\n  contentElement.append(progressElement);\n  renderProgress();\n  let actionElement: HTMLAnchorElement | HTMLButtonElement | null = null;\n  const renderAction = (action: ToastAction | null | undefined) => {\n    actionElement?.remove();\n    actionElement = null;\n    if (!action) return;\n    if (\"href\" in action) {\n      const link = document.createElement(\"a\");\n      link.href = action.href;\n      actionElement = link;\n    } else {\n      const button = document.createElement(\"button\");\n      button.type = \"button\";\n      actionElement = button;\n    }\n    actionElement.className = \"k2b-toast__action\";\n    actionElement.textContent = action.label;\n    actionElement.addEventListener(\"click\", (event) => {\n      event.stopPropagation();\n      if (\"onClick\" in action) action.onClick();\n      else dismiss();\n    });\n    contentElement.appendChild(actionElement);\n  };\n  renderAction(options?.action);\n\n  const update = (nextDescription: string, nextOptions?: ToastOptions) => {\n    if (dismissed) return;\n    descriptionElement.textContent = nextDescription;\n\n    const variantChanged = nextOptions?.variant !== undefined && nextOptions.variant !== currentVariant;\n    if (variantChanged) {\n      currentVariant = nextOptions.variant!;\n      toastElement.dataset.tone = VARIANT_STYLES[currentVariant].tone;\n      leadIconElement = renderLead(leadElement, currentVariant, nextOptions.iconClass);\n      applyLiveRegion(contentElement, currentVariant);\n    } else if (nextOptions?.iconClass !== undefined) {\n      applyIconClass(leadIconElement, nextOptions.iconClass);\n    }\n\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"title\")) {\n      titleElement.textContent = nextOptions.title ?? \"\";\n    } else if (variantChanged) {\n      titleElement.textContent = defaultTitle(currentVariant);\n    }\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"action\")) renderAction(nextOptions.action);\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"duration\")) {\n      currentDuration = nextOptions.duration ?? DEFAULT_DURATION_MS;\n    }\n    if (nextOptions && Object.prototype.hasOwnProperty.call(nextOptions, \"progress\")) currentProgress = nextOptions.progress ?? null;\n    if (nextOptions?.dismissLabel) closeButton.setAttribute(\"aria-label\", nextOptions.dismissLabel);\n    renderProgress();\n    resetDismissTimer(currentDuration);\n  };\n\n  toastElement.addEventListener(\"click\", () => {\n    if (currentProgress === null) dismiss();\n  });\n  closeButton.addEventListener(\"click\", (event) => {\n    event.stopPropagation();\n    dismiss();\n  });\n  toastElement.addEventListener(\"pointerenter\", () => {\n    pausedByPointer = true;\n    pauseDismissTimer();\n  });\n  toastElement.addEventListener(\"pointerleave\", () => {\n    pausedByPointer = false;\n    resumeDismissTimer();\n  });\n  toastElement.addEventListener(\"focusin\", () => {\n    pausedByFocus = true;\n    pauseDismissTimer();\n  });\n  toastElement.addEventListener(\"focusout\", (event) => {\n    if (toastElement.contains(event.relatedTarget as Node | null)) return;\n    pausedByFocus = false;\n    resumeDismissTimer();\n  });\n\n  const handle: ToastHandle = { dismiss, update };\n  liveToasts.add(handle);\n  if (liveToasts.size > MAX_VISIBLE_TOASTS) liveToasts.values().next().value?.dismiss();\n  promoteToTopLayer(initialContainer).appendChild(toastElement);\n  requestAnimationFrame(() => {\n    if (!dismissed) toastElement.dataset.open = \"true\";\n  });\n  resetDismissTimer(currentDuration);\n  return handle;\n};\n\nexport const isPointInsideToast = (x: number, y: number): boolean => {\n  if (typeof document === \"undefined\") return false;\n  const containers = Array.from(document.querySelectorAll<HTMLElement>(`[${CONTAINER_ATTRIBUTE}]`));\n  for (const container of containers) {\n    for (const child of Array.from(container.children)) {\n      const rect = child.getBoundingClientRect();\n      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) return true;\n    }\n  }\n  return false;\n};\n\nconst toastFn = ((description: string, options?: ToastOptions) => showToast(description, options)) as ToastFn;\ntoastFn.success = (description, options) => showToast(description, { ...options, variant: \"success\" });\ntoastFn.error = (description, options) => showToast(description, { ...options, variant: \"error\" });\ntoastFn.dismissAll = () => {\n  for (const handle of Array.from(liveToasts)) handle.dismiss();\n};\n\nexport const toast: ToastFn = toastFn;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/MultiSelectInput.js

@@ -7,32 +7,33 @@ import { ssr as _$ssr } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<span class=\"k2b-multi-select-trigger__values\">", "</span>"],
-  _tmpl$2 = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
-  _tmpl$3 = ["<button type=\"button\" class=\"k2b-choice-control__clear k2b-input-clear-action\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$4 = ["<div class=\"k2b-choice-search\"><i class=\"ti ti-search\" aria-hidden=\"true\"></i><input type=\"search\"", "></div>"],
-  _tmpl$5 = ["<div class=\"k2b-choice-toolbar\">", "</div>"],
-  _tmpl$6 = ["<div class=\"k2b-choice-status\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><span>", "</span></div>"],
-  _tmpl$7 = ["<div class=\"k2b-choice-control\"", ">", "", "<div popover=\"manual\" class=\"k2b-choice-popover\" role=\"group\"", ">", "", "<div", " class=\"k2b-choice-options\" role=\"listbox\" aria-multiselectable=\"true\">", "", "", "</div></div>", "</div>"],
-  _tmpl$8 = ["<span class=\"k2b-choice-trigger__value\" data-placeholder=\"true\">", "</span>"],
-  _tmpl$9 = ["<span class=\"k2b-choice-pill\" style=\"", "\">", "<button type=\"button\"", "", " tabindex=\"-1\"><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button></span>"],
-  _tmpl$0 = ["<span>", "</span>"],
-  _tmpl$1 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$10 = ["<span class=\"k2b-choice-pill__content\">", "</span>"],
-  _tmpl$11 = ["<div class=\"k2b-choice-status\" data-tone=\"danger\"><span>", "</span><button type=\"button\">", "</button></div>"],
-  _tmpl$12 = ["<div class=\"k2b-choice-status\">", "</div>"],
-  _tmpl$13 = ["<button type=\"button\" id=\"", "\" class=\"k2b-choice-option\" role=\"option\"", "", "><span class=\"k2b-choice-option__checkbox\" aria-hidden=\"true\"><i class=\"ti ti-check\"></i></span>", "<span class=\"k2b-choice-option__content\">", "</span></button>"],
-  _tmpl$14 = ["<span class=\"k2b-choice-dot\" style=\"", "\" aria-hidden=\"true\"></span>"],
-  _tmpl$15 = ["<i", " style=\"", "\" aria-hidden=\"true\"></i>"],
-  _tmpl$16 = ["<strong>", "</strong>"],
-  _tmpl$17 = ["<small>", "</small>"],
-  _tmpl$18 = ["<input type=\"hidden\"", ">"];
-import { createMemo, createSignal, For, Show } from "solid-js";
+var _tmpl$ = ["<span class=\"k2b-multi-select-trigger__more\"", "><span aria-hidden=\"true\">+", "</span><span class=\"k2b-sr-only\">", "</span></span>"],
+  _tmpl$2 = ["<span class=\"k2b-multi-select-trigger__values\"", ">", "", "</span>"],
+  _tmpl$3 = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$4 = ["<button type=\"button\" class=\"k2b-choice-control__clear k2b-input-clear-action\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$5 = ["<div class=\"k2b-choice-search\"><i class=\"ti ti-search\" aria-hidden=\"true\"></i><input type=\"search\"", "></div>"],
+  _tmpl$6 = ["<div class=\"k2b-choice-toolbar\">", "</div>"],
+  _tmpl$7 = ["<div class=\"k2b-choice-status\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><span>", "</span></div>"],
+  _tmpl$8 = ["<div class=\"k2b-choice-control\"", ">", "", "<div popover=\"manual\" class=\"k2b-choice-popover\" role=\"group\"", ">", "", "<div", " class=\"k2b-choice-options\" role=\"listbox\" aria-multiselectable=\"true\">", "", "", "</div></div>", "</div>"],
+  _tmpl$9 = ["<span class=\"k2b-choice-trigger__value\" data-placeholder=\"true\">", "</span>"],
+  _tmpl$0 = ["<span class=\"k2b-choice-pill\" style=\"", "\"", ">", "<button type=\"button\"", "", " tabindex=\"-1\"><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button></span>"],
+  _tmpl$1 = ["<span>", "</span>"],
+  _tmpl$10 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$11 = ["<span class=\"k2b-choice-pill__content\">", "</span>"],
+  _tmpl$12 = ["<div class=\"k2b-choice-status\" data-tone=\"danger\"><span>", "</span><button type=\"button\">", "</button></div>"],
+  _tmpl$13 = ["<div class=\"k2b-choice-status\">", "</div>"],
+  _tmpl$14 = ["<button type=\"button\" id=\"", "\" class=\"k2b-choice-option\" role=\"option\"", "", "><span class=\"k2b-choice-option__checkbox\" aria-hidden=\"true\"><i class=\"ti ti-check\"></i></span>", "<span class=\"k2b-choice-option__content\">", "</span></button>"],
+  _tmpl$15 = ["<span class=\"k2b-choice-dot\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$16 = ["<i", " style=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$17 = ["<strong>", "</strong>"],
+  _tmpl$18 = ["<small>", "</small>"],
+  _tmpl$19 = ["<input type=\"hidden\"", ">"];
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { colorTintStyle, normalizeHexColor } from "../internal/color";
 import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
 import { useUiMessages } from "../intl/messages";
 import { ChoiceGroups } from "./ChoiceGroups";
-import { createChoiceLoader, createChoicePopover, filterChoiceOptions, nextEnabledChoiceIndex } from "./choice";
+import { createChoiceLoader, createChoicePopover, filterChoiceOptions, fitChoicePills, nextEnabledChoiceIndex } from "./choice";
 import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
 /** Cloud tints the option icon with the option color instead of adding a dot. */
 const iconColor = color => {
@@ -94,6 +95,41 @@ export function MultiSelectInput(props) {
   const selectedValues = createMemo(() => new Set(values()));
   const popover = createChoicePopover(() => Boolean(props.disabled));
   const focusedOption = () => visibleOptions()[focusedIndex()];
+
+  // Pills that do not fit the trigger collapse into a "+N" summary. Until the
+  // browser measures them (server HTML, hidden containers) every pill stays.
+  let valuesRef;
+  let moreRef;
+  const [visibleCount, setVisibleCount] = createSignal(Number.POSITIVE_INFINITY);
+  const hiddenOptions = createMemo(() => selected().slice(visibleCount()));
+  // While every pill fits, the invisible summary carries the largest count it
+  // could show, so measuring it reserves enough room for the real one.
+  const moreCount = () => hiddenOptions().length || selected().length - 1;
+  const fitValues = () => {
+    const values = valuesRef;
+    if (!values?.isConnected) return;
+    // Measuring releases a truncated first pill to its natural width; the
+    // browser paints only the final state.
+    values.dataset.measuring = "true";
+    const pills = Array.from(values.querySelectorAll(":scope > .k2b-choice-pill"), pill => pill.getBoundingClientRect().width);
+    const fit = fitChoicePills(values.getBoundingClientRect().width, pills, Number.parseFloat(getComputedStyle(values).columnGap) || 0, moreRef?.isConnected ? moreRef.getBoundingClientRect().width : 0);
+    delete values.dataset.measuring;
+    // Hidden pills leave the flow. While any are hidden the strip keeps the
+    // whole row as its preferred width, so a container sized by its content
+    // does not shrink with the collapse and grows back once it has room. The
+    // strip still flexes to the trigger's width.
+    values.style.width = fit.visible < pills.length ? `${fit.rowWidth}px` : "";
+    setVisibleCount(fit.visible);
+  };
+  const resizeObserver = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => fitValues());
+  onCleanup(() => resizeObserver?.disconnect());
+  createEffect(() => {
+    selected();
+    fitValues();
+  });
+  onMount(() => {
+    if ("fonts" in document) void document.fonts.ready.then(fitValues);
+  });
   const emit = next => {
     const unique = [...new Set(next)];
     commitFieldValue(props, unique);
@@ -188,7 +224,7 @@ export function MultiSelectInput(props) {
       return props.disabled;
     },
     get children() {
-      return _$ssr(_tmpl$7, _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$ssrElement("div", _$mergeProps({
+      return _$ssr(_tmpl$8, _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$ssrElement("div", _$mergeProps({
         get id() {
           return meta.controlId;
         },
@@ -217,14 +253,14 @@ export function MultiSelectInput(props) {
           return selected().length > 0;
         },
         get fallback() {
-          return _$ssr(_tmpl$8, _$escape(props.placeholder ?? messages().select));
+          return _$ssr(_tmpl$9, _$escape(props.placeholder ?? messages().select));
         },
         get children() {
-          return _$ssr(_tmpl$, _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$2, _$ssrAttribute("data-overflowing", hiddenOptions().length > 0 ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
             get each() {
               return selected();
             },
-            children: option => _$ssr(_tmpl$9, _$ssrStyle(colorTintStyle(option.color)), _$escape(_$createComponent(Show, {
+            children: (option, index) => _$ssr(_tmpl$0, _$ssrStyle(colorTintStyle(option.color)), _$ssrAttribute("title", _$escape(option.label, true), false) + _$ssrAttribute("data-hidden", index() >= visibleCount() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
               get when() {
                 return props.renderValue;
               },
@@ -233,13 +269,22 @@ export function MultiSelectInput(props) {
                   get when() {
                     return option.icon;
                   },
-                  children: icon => _$ssr(_tmpl$1, _$ssrAttribute("class", _$escape(icon(), true), false))
-                }), _$ssr(_tmpl$0, _$escape(option.label))];
+                  children: icon => _$ssr(_tmpl$10, _$ssrAttribute("class", _$escape(icon(), true), false))
+                }), _$ssr(_tmpl$1, _$escape(option.label))];
               },
-              children: render => _$ssr(_tmpl$10, _$escape(render()(option)))
+              children: render => _$ssr(_tmpl$11, _$escape(render()(option)))
             })), _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
               name: option.label
             }), true), false), _$ssrAttribute("disabled", props.disabled, true))
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return selected().length > 1;
+            },
+            get children() {
+              return _$ssr(_tmpl$, _$ssrAttribute("title", _$escape(hiddenOptions().map(option => option.label).join(", ") || undefined, true), false) + _$ssrAttribute("data-hidden", hiddenOptions().length === 0 ? "true" : _$escape(undefined, true), false), _$escape(moreCount()), _$escape(messages().moreSelected({
+                count: moreCount()
+              })));
+            }
           })));
         }
       })), _$escape(_$createComponent(Show, {
@@ -247,28 +292,28 @@ export function MultiSelectInput(props) {
           return !hasClearAction();
         },
         get children() {
-          return _$ssr(_tmpl$2, `${popover.open() ? _$escape(props.activeIcon ?? "ti ti-chevron-up", true) : _$escape(props.icon ?? "ti ti-chevron-down", true)} k2b-multi-select-trigger__chevron`);
+          return _$ssr(_tmpl$3, `${popover.open() ? _$escape(props.activeIcon ?? "ti ti-chevron-up", true) : _$escape(props.icon ?? "ti ti-chevron-down", true)} k2b-multi-select-trigger__chevron`);
         }
       }))], false), _$escape(_$createComponent(Show, {
         get when() {
           return hasClearAction();
         },
         get children() {
-          return _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(props.clearLabel ?? messages().clearSelection, true), false));
+          return _$ssr(_tmpl$4, _$ssrAttribute("aria-label", _$escape(props.clearLabel ?? messages().clearSelection, true), false));
         }
       })), _$ssrAttribute("aria-label", typeof props.label === "string" ? _$escape(props.label, true) : _$escape(props["aria-label"] ?? messages().options, true), false), _$escape(_$createComponent(Show, {
         get when() {
           return searchable();
         },
         get children() {
-          return _$ssr(_tmpl$4, _$ssrAttribute("value", _$escape(query(), true), false) + _$ssrAttribute("placeholder", _$escape(props.searchPlaceholder ?? messages().search, true), false) + _$ssrAttribute("aria-label", _$escape(props.searchPlaceholder ?? messages().searchOptions, true), false) + _$ssrAttribute("aria-controls", _$escape(listboxId, true), false) + _$ssrAttribute("aria-activedescendant", focusedOption() ? `${_$escape(listboxId, true)}-${_$escape(focusedIndex(), true)}` : _$escape(undefined, true), false));
+          return _$ssr(_tmpl$5, _$ssrAttribute("value", _$escape(query(), true), false) + _$ssrAttribute("placeholder", _$escape(props.searchPlaceholder ?? messages().search, true), false) + _$ssrAttribute("aria-label", _$escape(props.searchPlaceholder ?? messages().searchOptions, true), false) + _$ssrAttribute("aria-controls", _$escape(listboxId, true), false) + _$ssrAttribute("aria-activedescendant", focusedOption() ? `${_$escape(listboxId, true)}-${_$escape(focusedIndex(), true)}` : _$escape(undefined, true), false));
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
           return (props.groups?.length ?? 0) > 0;
         },
         get children() {
-          return _$ssr(_tmpl$5, _$escape(_$createComponent(ChoiceGroups, {
+          return _$ssr(_tmpl$6, _$escape(_$createComponent(ChoiceGroups, {
             get choices() {
               return groupChoices();
             },
@@ -286,13 +331,13 @@ export function MultiSelectInput(props) {
         get when() {
           return asyncOptions.error();
         },
-        children: message => _$ssr(_tmpl$11, _$escape(message()), _$escape(props.retryLabel ?? messages().retry))
+        children: message => _$ssr(_tmpl$12, _$escape(message()), _$escape(props.retryLabel ?? messages().retry))
       })), _$escape(_$createComponent(Show, {
         get when() {
           return _$memo(() => !!asyncOptions.loading())() && visibleOptions().length === 0;
         },
         get children() {
-          return _$ssr(_tmpl$6, _$escape(props.loadingLabel ?? messages().loading));
+          return _$ssr(_tmpl$7, _$escape(props.loadingLabel ?? messages().loading));
         }
       })), _$escape(_$createComponent(For, {
         get each() {
@@ -304,11 +349,11 @@ export function MultiSelectInput(props) {
               return _$memo(() => !!!asyncOptions.loading())() && !asyncOptions.error();
             },
             get children() {
-              return _$ssr(_tmpl$12, isAsync() || query() ? _$escape(props.noResultsLabel ?? messages().noResults) : _$escape(props.emptyLabel ?? messages().noOptions));
+              return _$ssr(_tmpl$13, isAsync() || query() ? _$escape(props.noResultsLabel ?? messages().noResults) : _$escape(props.emptyLabel ?? messages().noOptions));
             }
           });
         },
-        children: (option, index) => _$ssr(_tmpl$13, `${_$escape(listboxId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-label", _$escape(option.label, true), false) + _$ssrAttribute("aria-selected", _$escape(isSelected(option.value), true), false) + _$ssrAttribute("data-focused", index() === focusedIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("disabled", option.disabled, true), _$escape(_$createComponent(Show, {
+        children: (option, index) => _$ssr(_tmpl$14, `${_$escape(listboxId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-label", _$escape(option.label, true), false) + _$ssrAttribute("aria-selected", _$escape(isSelected(option.value), true), false) + _$ssrAttribute("data-focused", index() === focusedIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("disabled", option.disabled, true), _$escape(_$createComponent(Show, {
           get when() {
             return option.icon;
           },
@@ -317,20 +362,20 @@ export function MultiSelectInput(props) {
               get when() {
                 return normalizeHexColor(option.color);
               },
-              children: color => _$ssr(_tmpl$14, _$ssrStyleProperty("background:", _$escape(color(), true)))
+              children: color => _$ssr(_tmpl$15, _$ssrStyleProperty("background:", _$escape(color(), true)))
             });
           },
-          children: icon => _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(icon(), true), false), _$ssrStyle(iconColor(option.color)))
+          children: icon => _$ssr(_tmpl$16, _$ssrAttribute("class", _$escape(icon(), true), false), _$ssrStyle(iconColor(option.color)))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return props.renderOption;
           },
           get fallback() {
-            return [_$ssr(_tmpl$16, _$escape(option.label)), _$createComponent(Show, {
+            return [_$ssr(_tmpl$17, _$escape(option.label)), _$createComponent(Show, {
               get when() {
                 return option.description;
               },
-              children: description => _$ssr(_tmpl$17, _$escape(description()))
+              children: description => _$ssr(_tmpl$18, _$escape(description()))
             })];
           },
           children: render => render()(option)
@@ -339,7 +384,7 @@ export function MultiSelectInput(props) {
         get when() {
           return props.name;
         },
-        children: name => _$ssr(_tmpl$18, _$ssrAttribute("name", _$escape(name(), true), false) + _$ssrAttribute("value", _$escape(values().join(","), true), false))
+        children: name => _$ssr(_tmpl$19, _$ssrAttribute("name", _$escape(name(), true), false) + _$ssrAttribute("value", _$escape(values().join(","), true), false))
       })));
     }
   });

package/dist/ssr/inputs/MultiSelectInput.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/MultiSelectInput.tsx"],"sourcesContent":["import { createMemo, createSignal, For, type JSX, Show } from \"solid-js\";\nimport { colorTintStyle, normalizeHexColor } from \"../internal/color\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { ChoiceGroups } from \"./ChoiceGroups\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, filterChoiceOptions, nextEnabledChoiceIndex } from \"./choice\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport type { SelectGroup } from \"./Select\";\n\nexport type MultiSelectOption =\n  | string\n  | { id: string; label?: string; description?: string; icon?: string; color?: string; groups?: readonly string[] }\n  | ChoiceOption<string>;\ntype NormalizedOption = ChoiceOption<string>;\nexport type MultiSelectFetchDataFn = (query: string, signal: AbortSignal, group: string | null) => Promise<MultiSelectOption[]>;\n\nexport type MultiSelectInputProps = ValueFieldProps<string[]> & {\n  options?: MultiSelectOption[];\n  fetchData?: MultiSelectFetchDataFn;\n  selectedOptions?: () => MultiSelectOption[];\n  placeholder?: string;\n  icon?: string;\n  activeIcon?: string;\n  fetchDebounceMs?: number;\n  debounceMs?: number;\n  loadOptions?: (query: string, signal: AbortSignal, group: string | null) => Promise<readonly ChoiceOption<string>[]>;\n  groups?: readonly SelectGroup[];\n  defaultGroup?: string;\n  groupsAriaLabel?: string;\n  allGroupLabel?: string;\n  searchable?: boolean;\n  clearable?: boolean;\n  name?: string;\n  renderOption?: (option: ChoiceOption<string>) => JSX.Element;\n  renderValue?: (option: ChoiceOption<string>) => JSX.Element;\n  searchPlaceholder?: string;\n  loadingLabel?: string;\n  noResultsLabel?: string;\n  emptyLabel?: string;\n  retryLabel?: string;\n  clearLabel?: string;\n};\n\n/** Cloud tints the option icon with the option color instead of adding a dot. */\nconst iconColor = (color: string | undefined): JSX.CSSProperties | undefined => {\n  const normalized = normalizeHexColor(color);\n  return normalized ? { color: normalized } : undefined;\n};\n\nconst normalize = (option: MultiSelectOption): NormalizedOption =>\n  typeof option === \"string\"\n    ? { value: option, label: option }\n    : \"value\" in option\n      ? option\n      : { ...option, value: option.id, label: option.label || option.id };\n\nexport function MultiSelectInput(props: MultiSelectInputProps): JSX.Element {\n  const messages = useUiMessages();\n  const meta = createFieldMeta(props.id);\n  const listboxId = `${meta.controlId}-listbox`;\n  const [query, setQuery] = createSignal(\"\");\n  const [focusedIndex, setFocusedIndex] = createSignal(-1);\n  const [cache, setCache] = createSignal<Record<string, NormalizedOption>>({});\n  const [selectedGroup, setSelectedGroup] = createSignal<string | null>(props.defaultGroup ?? null);\n  let searchRef: HTMLInputElement | undefined;\n\n  const values = () => resolveMaybeAccessor(props.value) ?? [];\n  const error = () => resolveMaybeAccessor(props.error);\n  const activeGroup = createMemo(() => {\n    const current = selectedGroup();\n    return current && props.groups?.some((group) => group.value === current) ? current : null;\n  });\n  const groupChoices = createMemo(() => [{ value: null, label: props.allGroupLabel ?? messages().all }, ...(props.groups ?? [])]);\n  const asyncOptions = createChoiceLoader(\n    () =>\n      props.fetchData\n        ? async (query, signal) => (await props.fetchData!(query, signal, activeGroup())).map(normalize)\n        : props.loadOptions\n          ? (query, signal) => props.loadOptions!(query, signal, activeGroup())\n          : undefined,\n    () => props.fetchDebounceMs ?? props.debounceMs ?? 200,\n  );\n  const isAsync = () => Boolean(props.fetchData || props.loadOptions);\n  const sourceOptions = createMemo(() => (isAsync() ? asyncOptions.options() : (props.options ?? []).map(normalize)));\n  const groupedOptions = createMemo(() => {\n    const group = activeGroup();\n    return !isAsync() && group ? sourceOptions().filter((option) => option.groups?.includes(group)) : sourceOptions();\n  });\n  // Cloud's multi-select always renders its search field, and filters a static\n  // option list client-side while a remote loader filters server-side.\n  const searchable = () => isAsync() || (props.searchable ?? true);\n  const visibleOptions = createMemo(() =>\n    isAsync() ? groupedOptions() : filterChoiceOptions(groupedOptions(), searchable() ? query() : \"\"),\n  );\n  const optionByValue = createMemo(() => {\n    const options = new Map<string, NormalizedOption>();\n    for (const option of Object.values(cache())) options.set(option.value, option);\n    for (const option of (props.selectedOptions?.() ?? []).map(normalize)) options.set(option.value, option);\n    for (const option of sourceOptions()) options.set(option.value, option);\n    return options;\n  });\n  const selected = createMemo(() => values().map((value) => optionByValue().get(value) ?? ({ value, label: value } as NormalizedOption)));\n  const hasClearAction = () => Boolean(props.clearable && selected().length > 0 && !props.disabled);\n  const selectedValues = createMemo(() => new Set(values()));\n  const popover = createChoicePopover(() => Boolean(props.disabled));\n  const focusedOption = () => visibleOptions()[focusedIndex()];\n\n  const emit = (next: readonly string[]) => {\n    const unique = [...new Set(next)];\n    commitFieldValue(props, unique);\n  };\n  const isSelected = (value: string) => selectedValues().has(value);\n  const focusFirst = () => setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), -1, 1));\n  const chooseGroup = (group: string | null) => {\n    if (group === activeGroup()) return;\n    setSelectedGroup(group);\n    focusFirst();\n    if (isAsync()) asyncOptions.load(query(), true);\n  };\n  const open = () => {\n    if (props.disabled) return;\n    setQuery(\"\");\n    if (isAsync()) asyncOptions.load(\"\", true);\n    focusFirst();\n    popover.show();\n    if (searchable()) queueMicrotask(() => searchRef?.focus());\n  };\n  const close = (restoreFocus = false) => {\n    asyncOptions.cancel();\n    setQuery(\"\");\n    setFocusedIndex(-1);\n    popover.hide(restoreFocus);\n  };\n  const toggleOption = (option: NormalizedOption) => {\n    if (option.disabled) return;\n    setCache({ ...cache(), [option.value]: option });\n    emit(isSelected(option.value) ? values().filter((value) => value !== option.value) : [...values(), option.value]);\n  };\n  const remove = (value: string) => emit(values().filter((item) => item !== value));\n  const move = (direction: 1 | -1) => {\n    setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), focusedIndex(), direction));\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    const inToolbar = Boolean((event.target as HTMLElement | null)?.closest?.(\".k2b-choice-toolbar\"));\n    if (inToolbar && event.key !== \"Escape\" && event.key !== \"Tab\") return;\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!popover.open()) open();\n      else move(event.key === \"ArrowDown\" ? 1 : -1);\n      return;\n    }\n    if ((event.key === \"Enter\" || event.key === \" \") && !popover.open()) {\n      event.preventDefault();\n      open();\n      return;\n    }\n    if (event.key === \"Enter\" && popover.open()) {\n      const option = focusedOption();\n      if (option) {\n        event.preventDefault();\n        toggleOption(option);\n      }\n      return;\n    }\n    if (event.key === \"Backspace\" && popover.open() && !query() && values().length > 0) {\n      event.preventDefault();\n      const last = values().at(-1);\n      if (last) remove(last);\n      return;\n    }\n    if (event.key === \"Escape\" && popover.open()) {\n      event.preventDefault();\n      close(true);\n    } else if (event.key === \"Tab\" && popover.open()) {\n      close();\n    }\n  };\n\n  return (\n    <Field\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={error()}\n      meta={meta}\n      labelFor={false}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div class=\"k2b-choice-control\" data-invalid={error() ? \"true\" : undefined}>\n        <div\n          ref={popover.setTrigger}\n          id={meta.controlId}\n          class=\"k2b-multi-select-trigger\"\n          role=\"combobox\"\n          tabIndex={props.disabled ? -1 : 0}\n          aria-haspopup=\"listbox\"\n          aria-expanded={popover.open()}\n          aria-controls={listboxId}\n          aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n          {...fieldControlAria(meta, props)}\n          aria-disabled={props.disabled}\n          data-disabled={props.disabled ? \"true\" : undefined}\n          onClick={() => (popover.open() ? close() : open())}\n          onKeyDown={handleKeyDown}\n        >\n          <Show\n            when={selected().length > 0}\n            fallback={\n              <span class=\"k2b-choice-trigger__value\" data-placeholder=\"true\">\n                {props.placeholder ?? messages().select}\n              </span>\n            }\n          >\n            <span class=\"k2b-multi-select-trigger__values\">\n              <For each={selected()}>\n                {(option) => (\n                  <span class=\"k2b-choice-pill\" style={colorTintStyle(option.color)}>\n                    <Show\n                      when={props.renderValue}\n                      fallback={\n                        <>\n                          <Show when={option.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n                          <span>{option.label}</span>\n                        </>\n                      }\n                    >\n                      {(render) => <span class=\"k2b-choice-pill__content\">{render()(option)}</span>}\n                    </Show>\n                    <button\n                      type=\"button\"\n                      aria-label={messages().removeNamed({ name: option.label })}\n                      disabled={props.disabled}\n                      tabIndex={-1}\n                      onClick={(event) => {\n                        event.stopPropagation();\n                        remove(option.value);\n                      }}\n                    >\n                      <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                    </button>\n                  </span>\n                )}\n              </For>\n            </span>\n          </Show>\n          <Show when={!hasClearAction()}>\n            <i\n              class={`${popover.open() ? (props.activeIcon ?? \"ti ti-chevron-up\") : (props.icon ?? \"ti ti-chevron-down\")} k2b-multi-select-trigger__chevron`}\n              aria-hidden=\"true\"\n            />\n          </Show>\n        </div>\n        <Show when={hasClearAction()}>\n          <button\n            type=\"button\"\n            class=\"k2b-choice-control__clear k2b-input-clear-action\"\n            aria-label={props.clearLabel ?? messages().clearSelection}\n            onClick={(event) => {\n              event.stopPropagation();\n              emit([]);\n              popover.trigger()?.focus();\n            }}\n          >\n            <i class=\"ti ti-x\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n\n        <div\n          ref={popover.setPopover}\n          popover=\"manual\"\n          class=\"k2b-choice-popover\"\n          role=\"group\"\n          onKeyDown={handleKeyDown}\n          aria-label={typeof props.label === \"string\" ? props.label : (props[\"aria-label\"] ?? messages().options)}\n        >\n          <Show when={searchable()}>\n            <div class=\"k2b-choice-search\">\n              <i class=\"ti ti-search\" aria-hidden=\"true\" />\n              <input\n                ref={searchRef}\n                type=\"search\"\n                value={query()}\n                placeholder={props.searchPlaceholder ?? messages().search}\n                aria-label={props.searchPlaceholder ?? messages().searchOptions}\n                aria-controls={listboxId}\n                aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n                onInput={(event) => {\n                  const next = event.currentTarget.value;\n                  setQuery(next);\n                  if (isAsync()) asyncOptions.load(next);\n                  focusFirst();\n                }}\n              />\n            </div>\n          </Show>\n          <Show when={(props.groups?.length ?? 0) > 0}>\n            <div class=\"k2b-choice-toolbar\">\n              <ChoiceGroups\n                choices={groupChoices()}\n                value={activeGroup()}\n                onValueChange={chooseGroup}\n                ariaLabel={props.groupsAriaLabel ?? messages().filterOptions}\n                controls={listboxId}\n              />\n            </div>\n          </Show>\n          <div id={listboxId} class=\"k2b-choice-options\" role=\"listbox\" aria-multiselectable=\"true\">\n            <Show when={asyncOptions.error()}>\n              {(message) => (\n                <div class=\"k2b-choice-status\" data-tone=\"danger\">\n                  <span>{message()}</span>\n                  <button type=\"button\" onClick={asyncOptions.retry}>\n                    {props.retryLabel ?? messages().retry}\n                  </button>\n                </div>\n              )}\n            </Show>\n            <Show when={asyncOptions.loading() && visibleOptions().length === 0}>\n              <div class=\"k2b-choice-status\">\n                <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n                <span>{props.loadingLabel ?? messages().loading}</span>\n              </div>\n            </Show>\n            <For\n              each={asyncOptions.error() ? [] : visibleOptions()}\n              fallback={\n                <Show when={!asyncOptions.loading() && !asyncOptions.error()}>\n                  <div class=\"k2b-choice-status\">\n                    {isAsync() || query() ? (props.noResultsLabel ?? messages().noResults) : (props.emptyLabel ?? messages().noOptions)}\n                  </div>\n                </Show>\n              }\n            >\n              {(option, index) => (\n                <button\n                  type=\"button\"\n                  id={`${listboxId}-${index()}`}\n                  class=\"k2b-choice-option\"\n                  role=\"option\"\n                  aria-label={option.label}\n                  aria-selected={isSelected(option.value)}\n                  data-focused={index() === focusedIndex() ? \"true\" : undefined}\n                  disabled={option.disabled}\n                  onPointerMove={() => !option.disabled && setFocusedIndex(index())}\n                  onClick={() => toggleOption(option)}\n                >\n                  <span class=\"k2b-choice-option__checkbox\" aria-hidden=\"true\">\n                    <i class=\"ti ti-check\" />\n                  </span>\n                  <Show\n                    when={option.icon}\n                    fallback={\n                      <Show when={normalizeHexColor(option.color)}>\n                        {(color) => <span class=\"k2b-choice-dot\" style={{ background: color() }} aria-hidden=\"true\" />}\n                      </Show>\n                    }\n                  >\n                    {(icon) => <i class={icon()} style={iconColor(option.color)} aria-hidden=\"true\" />}\n                  </Show>\n                  <span class=\"k2b-choice-option__content\">\n                    <Show\n                      when={props.renderOption}\n                      fallback={\n                        <>\n                          <strong>{option.label}</strong>\n                          <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                        </>\n                      }\n                    >\n                      {(render) => render()(option)}\n                    </Show>\n                  </span>\n                </button>\n              )}\n            </For>\n          </div>\n        </div>\n        <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={values().join(\",\")} />}</Show>\n      </div>\n    </Field>\n  );\n}\n\nexport default MultiSelectInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["inputs/MultiSelectInput.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { colorTintStyle, normalizeHexColor } from \"../internal/color\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { ChoiceGroups } from \"./ChoiceGroups\";\nimport {\n  type ChoiceOption,\n  createChoiceLoader,\n  createChoicePopover,\n  filterChoiceOptions,\n  fitChoicePills,\n  nextEnabledChoiceIndex,\n} from \"./choice\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport type { SelectGroup } from \"./Select\";\n\nexport type MultiSelectOption =\n  | string\n  | { id: string; label?: string; description?: string; icon?: string; color?: string; groups?: readonly string[] }\n  | ChoiceOption<string>;\ntype NormalizedOption = ChoiceOption<string>;\nexport type MultiSelectFetchDataFn = (query: string, signal: AbortSignal, group: string | null) => Promise<MultiSelectOption[]>;\n\nexport type MultiSelectInputProps = ValueFieldProps<string[]> & {\n  options?: MultiSelectOption[];\n  fetchData?: MultiSelectFetchDataFn;\n  selectedOptions?: () => MultiSelectOption[];\n  placeholder?: string;\n  icon?: string;\n  activeIcon?: string;\n  fetchDebounceMs?: number;\n  debounceMs?: number;\n  loadOptions?: (query: string, signal: AbortSignal, group: string | null) => Promise<readonly ChoiceOption<string>[]>;\n  groups?: readonly SelectGroup[];\n  defaultGroup?: string;\n  groupsAriaLabel?: string;\n  allGroupLabel?: string;\n  searchable?: boolean;\n  clearable?: boolean;\n  name?: string;\n  renderOption?: (option: ChoiceOption<string>) => JSX.Element;\n  renderValue?: (option: ChoiceOption<string>) => JSX.Element;\n  searchPlaceholder?: string;\n  loadingLabel?: string;\n  noResultsLabel?: string;\n  emptyLabel?: string;\n  retryLabel?: string;\n  clearLabel?: string;\n};\n\n/** Cloud tints the option icon with the option color instead of adding a dot. */\nconst iconColor = (color: string | undefined): JSX.CSSProperties | undefined => {\n  const normalized = normalizeHexColor(color);\n  return normalized ? { color: normalized } : undefined;\n};\n\nconst normalize = (option: MultiSelectOption): NormalizedOption =>\n  typeof option === \"string\"\n    ? { value: option, label: option }\n    : \"value\" in option\n      ? option\n      : { ...option, value: option.id, label: option.label || option.id };\n\nexport function MultiSelectInput(props: MultiSelectInputProps): JSX.Element {\n  const messages = useUiMessages();\n  const meta = createFieldMeta(props.id);\n  const listboxId = `${meta.controlId}-listbox`;\n  const [query, setQuery] = createSignal(\"\");\n  const [focusedIndex, setFocusedIndex] = createSignal(-1);\n  const [cache, setCache] = createSignal<Record<string, NormalizedOption>>({});\n  const [selectedGroup, setSelectedGroup] = createSignal<string | null>(props.defaultGroup ?? null);\n  let searchRef: HTMLInputElement | undefined;\n\n  const values = () => resolveMaybeAccessor(props.value) ?? [];\n  const error = () => resolveMaybeAccessor(props.error);\n  const activeGroup = createMemo(() => {\n    const current = selectedGroup();\n    return current && props.groups?.some((group) => group.value === current) ? current : null;\n  });\n  const groupChoices = createMemo(() => [{ value: null, label: props.allGroupLabel ?? messages().all }, ...(props.groups ?? [])]);\n  const asyncOptions = createChoiceLoader(\n    () =>\n      props.fetchData\n        ? async (query, signal) => (await props.fetchData!(query, signal, activeGroup())).map(normalize)\n        : props.loadOptions\n          ? (query, signal) => props.loadOptions!(query, signal, activeGroup())\n          : undefined,\n    () => props.fetchDebounceMs ?? props.debounceMs ?? 200,\n  );\n  const isAsync = () => Boolean(props.fetchData || props.loadOptions);\n  const sourceOptions = createMemo(() => (isAsync() ? asyncOptions.options() : (props.options ?? []).map(normalize)));\n  const groupedOptions = createMemo(() => {\n    const group = activeGroup();\n    return !isAsync() && group ? sourceOptions().filter((option) => option.groups?.includes(group)) : sourceOptions();\n  });\n  // Cloud's multi-select always renders its search field, and filters a static\n  // option list client-side while a remote loader filters server-side.\n  const searchable = () => isAsync() || (props.searchable ?? true);\n  const visibleOptions = createMemo(() =>\n    isAsync() ? groupedOptions() : filterChoiceOptions(groupedOptions(), searchable() ? query() : \"\"),\n  );\n  const optionByValue = createMemo(() => {\n    const options = new Map<string, NormalizedOption>();\n    for (const option of Object.values(cache())) options.set(option.value, option);\n    for (const option of (props.selectedOptions?.() ?? []).map(normalize)) options.set(option.value, option);\n    for (const option of sourceOptions()) options.set(option.value, option);\n    return options;\n  });\n  const selected = createMemo(() => values().map((value) => optionByValue().get(value) ?? ({ value, label: value } as NormalizedOption)));\n  const hasClearAction = () => Boolean(props.clearable && selected().length > 0 && !props.disabled);\n  const selectedValues = createMemo(() => new Set(values()));\n  const popover = createChoicePopover(() => Boolean(props.disabled));\n  const focusedOption = () => visibleOptions()[focusedIndex()];\n\n  // Pills that do not fit the trigger collapse into a \"+N\" summary. Until the\n  // browser measures them (server HTML, hidden containers) every pill stays.\n  let valuesRef: HTMLSpanElement | undefined;\n  let moreRef: HTMLSpanElement | undefined;\n  const [visibleCount, setVisibleCount] = createSignal(Number.POSITIVE_INFINITY);\n  const hiddenOptions = createMemo(() => selected().slice(visibleCount()));\n  // While every pill fits, the invisible summary carries the largest count it\n  // could show, so measuring it reserves enough room for the real one.\n  const moreCount = () => hiddenOptions().length || selected().length - 1;\n  const fitValues = () => {\n    const values = valuesRef;\n    if (!values?.isConnected) return;\n    // Measuring releases a truncated first pill to its natural width; the\n    // browser paints only the final state.\n    values.dataset.measuring = \"true\";\n    const pills = Array.from(\n      values.querySelectorAll<HTMLElement>(\":scope > .k2b-choice-pill\"),\n      (pill) => pill.getBoundingClientRect().width,\n    );\n    const fit = fitChoicePills(\n      values.getBoundingClientRect().width,\n      pills,\n      Number.parseFloat(getComputedStyle(values).columnGap) || 0,\n      moreRef?.isConnected ? moreRef.getBoundingClientRect().width : 0,\n    );\n    delete values.dataset.measuring;\n    // Hidden pills leave the flow. While any are hidden the strip keeps the\n    // whole row as its preferred width, so a container sized by its content\n    // does not shrink with the collapse and grows back once it has room. The\n    // strip still flexes to the trigger's width.\n    values.style.width = fit.visible < pills.length ? `${fit.rowWidth}px` : \"\";\n    setVisibleCount(fit.visible);\n  };\n  const resizeObserver = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(() => fitValues());\n  onCleanup(() => resizeObserver?.disconnect());\n  createEffect(() => {\n    selected();\n    fitValues();\n  });\n  onMount(() => {\n    if (\"fonts\" in document) void document.fonts.ready.then(fitValues);\n  });\n\n  const emit = (next: readonly string[]) => {\n    const unique = [...new Set(next)];\n    commitFieldValue(props, unique);\n  };\n  const isSelected = (value: string) => selectedValues().has(value);\n  const focusFirst = () => setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), -1, 1));\n  const chooseGroup = (group: string | null) => {\n    if (group === activeGroup()) return;\n    setSelectedGroup(group);\n    focusFirst();\n    if (isAsync()) asyncOptions.load(query(), true);\n  };\n  const open = () => {\n    if (props.disabled) return;\n    setQuery(\"\");\n    if (isAsync()) asyncOptions.load(\"\", true);\n    focusFirst();\n    popover.show();\n    if (searchable()) queueMicrotask(() => searchRef?.focus());\n  };\n  const close = (restoreFocus = false) => {\n    asyncOptions.cancel();\n    setQuery(\"\");\n    setFocusedIndex(-1);\n    popover.hide(restoreFocus);\n  };\n  const toggleOption = (option: NormalizedOption) => {\n    if (option.disabled) return;\n    setCache({ ...cache(), [option.value]: option });\n    emit(isSelected(option.value) ? values().filter((value) => value !== option.value) : [...values(), option.value]);\n  };\n  const remove = (value: string) => emit(values().filter((item) => item !== value));\n  const move = (direction: 1 | -1) => {\n    setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), focusedIndex(), direction));\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    const inToolbar = Boolean((event.target as HTMLElement | null)?.closest?.(\".k2b-choice-toolbar\"));\n    if (inToolbar && event.key !== \"Escape\" && event.key !== \"Tab\") return;\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!popover.open()) open();\n      else move(event.key === \"ArrowDown\" ? 1 : -1);\n      return;\n    }\n    if ((event.key === \"Enter\" || event.key === \" \") && !popover.open()) {\n      event.preventDefault();\n      open();\n      return;\n    }\n    if (event.key === \"Enter\" && popover.open()) {\n      const option = focusedOption();\n      if (option) {\n        event.preventDefault();\n        toggleOption(option);\n      }\n      return;\n    }\n    if (event.key === \"Backspace\" && popover.open() && !query() && values().length > 0) {\n      event.preventDefault();\n      const last = values().at(-1);\n      if (last) remove(last);\n      return;\n    }\n    if (event.key === \"Escape\" && popover.open()) {\n      event.preventDefault();\n      close(true);\n    } else if (event.key === \"Tab\" && popover.open()) {\n      close();\n    }\n  };\n\n  return (\n    <Field\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={error()}\n      meta={meta}\n      labelFor={false}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div class=\"k2b-choice-control\" data-invalid={error() ? \"true\" : undefined}>\n        <div\n          ref={(element) => {\n            popover.setTrigger(element);\n            resizeObserver?.observe(element);\n          }}\n          id={meta.controlId}\n          class=\"k2b-multi-select-trigger\"\n          role=\"combobox\"\n          tabIndex={props.disabled ? -1 : 0}\n          aria-haspopup=\"listbox\"\n          aria-expanded={popover.open()}\n          aria-controls={listboxId}\n          aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n          {...fieldControlAria(meta, props)}\n          aria-disabled={props.disabled}\n          data-disabled={props.disabled ? \"true\" : undefined}\n          onClick={() => (popover.open() ? close() : open())}\n          onKeyDown={handleKeyDown}\n        >\n          <Show\n            when={selected().length > 0}\n            fallback={\n              <span class=\"k2b-choice-trigger__value\" data-placeholder=\"true\">\n                {props.placeholder ?? messages().select}\n              </span>\n            }\n          >\n            <span\n              ref={valuesRef}\n              class=\"k2b-multi-select-trigger__values\"\n              data-overflowing={hiddenOptions().length > 0 ? \"true\" : undefined}\n            >\n              <For each={selected()}>\n                {(option, index) => (\n                  <span\n                    class=\"k2b-choice-pill\"\n                    style={colorTintStyle(option.color)}\n                    title={option.label}\n                    data-hidden={index() >= visibleCount() ? \"true\" : undefined}\n                  >\n                    <Show\n                      when={props.renderValue}\n                      fallback={\n                        <>\n                          <Show when={option.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n                          <span>{option.label}</span>\n                        </>\n                      }\n                    >\n                      {(render) => <span class=\"k2b-choice-pill__content\">{render()(option)}</span>}\n                    </Show>\n                    <button\n                      type=\"button\"\n                      aria-label={messages().removeNamed({ name: option.label })}\n                      disabled={props.disabled}\n                      tabIndex={-1}\n                      onClick={(event) => {\n                        event.stopPropagation();\n                        remove(option.value);\n                      }}\n                    >\n                      <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                    </button>\n                  </span>\n                )}\n              </For>\n              <Show when={selected().length > 1}>\n                <span\n                  ref={(element) => {\n                    moreRef = element;\n                    resizeObserver?.observe(element);\n                    onCleanup(() => resizeObserver?.unobserve(element));\n                  }}\n                  class=\"k2b-multi-select-trigger__more\"\n                  title={\n                    hiddenOptions()\n                      .map((option) => option.label)\n                      .join(\", \") || undefined\n                  }\n                  data-hidden={hiddenOptions().length === 0 ? \"true\" : undefined}\n                >\n                  <span aria-hidden=\"true\">+{moreCount()}</span>\n                  <span class=\"k2b-sr-only\">{messages().moreSelected({ count: moreCount() })}</span>\n                </span>\n              </Show>\n            </span>\n          </Show>\n          <Show when={!hasClearAction()}>\n            <i\n              class={`${popover.open() ? (props.activeIcon ?? \"ti ti-chevron-up\") : (props.icon ?? \"ti ti-chevron-down\")} k2b-multi-select-trigger__chevron`}\n              aria-hidden=\"true\"\n            />\n          </Show>\n        </div>\n        <Show when={hasClearAction()}>\n          <button\n            type=\"button\"\n            class=\"k2b-choice-control__clear k2b-input-clear-action\"\n            aria-label={props.clearLabel ?? messages().clearSelection}\n            onClick={(event) => {\n              event.stopPropagation();\n              emit([]);\n              popover.trigger()?.focus();\n            }}\n          >\n            <i class=\"ti ti-x\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n\n        <div\n          ref={popover.setPopover}\n          popover=\"manual\"\n          class=\"k2b-choice-popover\"\n          role=\"group\"\n          onKeyDown={handleKeyDown}\n          aria-label={typeof props.label === \"string\" ? props.label : (props[\"aria-label\"] ?? messages().options)}\n        >\n          <Show when={searchable()}>\n            <div class=\"k2b-choice-search\">\n              <i class=\"ti ti-search\" aria-hidden=\"true\" />\n              <input\n                ref={searchRef}\n                type=\"search\"\n                value={query()}\n                placeholder={props.searchPlaceholder ?? messages().search}\n                aria-label={props.searchPlaceholder ?? messages().searchOptions}\n                aria-controls={listboxId}\n                aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n                onInput={(event) => {\n                  const next = event.currentTarget.value;\n                  setQuery(next);\n                  if (isAsync()) asyncOptions.load(next);\n                  focusFirst();\n                }}\n              />\n            </div>\n          </Show>\n          <Show when={(props.groups?.length ?? 0) > 0}>\n            <div class=\"k2b-choice-toolbar\">\n              <ChoiceGroups\n                choices={groupChoices()}\n                value={activeGroup()}\n                onValueChange={chooseGroup}\n                ariaLabel={props.groupsAriaLabel ?? messages().filterOptions}\n                controls={listboxId}\n              />\n            </div>\n          </Show>\n          <div id={listboxId} class=\"k2b-choice-options\" role=\"listbox\" aria-multiselectable=\"true\">\n            <Show when={asyncOptions.error()}>\n              {(message) => (\n                <div class=\"k2b-choice-status\" data-tone=\"danger\">\n                  <span>{message()}</span>\n                  <button type=\"button\" onClick={asyncOptions.retry}>\n                    {props.retryLabel ?? messages().retry}\n                  </button>\n                </div>\n              )}\n            </Show>\n            <Show when={asyncOptions.loading() && visibleOptions().length === 0}>\n              <div class=\"k2b-choice-status\">\n                <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n                <span>{props.loadingLabel ?? messages().loading}</span>\n              </div>\n            </Show>\n            <For\n              each={asyncOptions.error() ? [] : visibleOptions()}\n              fallback={\n                <Show when={!asyncOptions.loading() && !asyncOptions.error()}>\n                  <div class=\"k2b-choice-status\">\n                    {isAsync() || query() ? (props.noResultsLabel ?? messages().noResults) : (props.emptyLabel ?? messages().noOptions)}\n                  </div>\n                </Show>\n              }\n            >\n              {(option, index) => (\n                <button\n                  type=\"button\"\n                  id={`${listboxId}-${index()}`}\n                  class=\"k2b-choice-option\"\n                  role=\"option\"\n                  aria-label={option.label}\n                  aria-selected={isSelected(option.value)}\n                  data-focused={index() === focusedIndex() ? \"true\" : undefined}\n                  disabled={option.disabled}\n                  onPointerMove={() => !option.disabled && setFocusedIndex(index())}\n                  onClick={() => toggleOption(option)}\n                >\n                  <span class=\"k2b-choice-option__checkbox\" aria-hidden=\"true\">\n                    <i class=\"ti ti-check\" />\n                  </span>\n                  <Show\n                    when={option.icon}\n                    fallback={\n                      <Show when={normalizeHexColor(option.color)}>\n                        {(color) => <span class=\"k2b-choice-dot\" style={{ background: color() }} aria-hidden=\"true\" />}\n                      </Show>\n                    }\n                  >\n                    {(icon) => <i class={icon()} style={iconColor(option.color)} aria-hidden=\"true\" />}\n                  </Show>\n                  <span class=\"k2b-choice-option__content\">\n                    <Show\n                      when={props.renderOption}\n                      fallback={\n                        <>\n                          <strong>{option.label}</strong>\n                          <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                        </>\n                      }\n                    >\n                      {(render) => render()(option)}\n                    </Show>\n                  </span>\n                </button>\n              )}\n            </For>\n          </div>\n        </div>\n        <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={values().join(\",\")} />}</Show>\n      </div>\n    </Field>\n  );\n}\n\nexport default MultiSelectInput;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/choice.js

@@ -13,6 +13,33 @@ export const nextEnabledChoiceIndex = (options, current, direction) => {
   }
   return -1;
 };
+
+/**
+ * Counts the leading pills that fit into `available` pixels and measures the
+ * whole row. When not all of them fit, the rest collapse into a summary pill
+ * of width `more`; the first pill always stays and truncates when even it does
+ * not fit. Without a measured width (no layout yet) every pill stays. Half a
+ * pixel of slack absorbs layout rounding, so a row given exactly its own
+ * `rowWidth` always fits.
+ */
+export const fitChoicePills = (available, widths, gap, more) => {
+  const rowWidth = widths.reduce((sum, width) => sum + width, 0) + gap * Math.max(0, widths.length - 1);
+  if (available <= 0 || rowWidth <= available + 0.5) return {
+    visible: widths.length,
+    rowWidth
+  };
+  let used = more;
+  let visible = 0;
+  for (const width of widths) {
+    used += gap + width;
+    if (used > available) break;
+    visible += 1;
+  }
+  return {
+    visible: Math.max(1, visible),
+    rowWidth
+  };
+};
 const errorMessage = error => error instanceof Error ? error.message : "Failed to load options";
 export function createChoiceLoader(loader, debounceMs) {
   const [options, setOptions] = createSignal([]);