@mario_hahn/jumpy-ui 0.8.0 → 0.9.0

package/README.md

@@ -1,11 +1,88 @@
 # @mario_hahn/jumpy-ui
 
+## Text with inline tokens
+
+`JumpTokenInput` shares the normal field shell, labels, hints, focus and alarm
+styles, but its value is structured. `JumpInput` remains a native string input.
+
+```tsx
+import { useRef, useState } from 'react'
+import { JumpTokenInput, JumpButton, type JumpTokenInputValue,
+  type JumpTokenInputHandle } from '@mario_hahn/jumpy-ui'
+
+function MessageEditor() {
+  const input = useRef<JumpTokenInputHandle>(null)
+  const [value, setValue] = useState<JumpTokenInputValue>([
+    { type: 'text', text: 'Hello ' },
+    { type: 'token', id: 'name-1', value: 'customer.firstName', label: 'First name' },
+    { type: 'text', text: '!' },
+  ])
+  return <>
+    <JumpTokenInput ref={input} label="Message" hint="Insert placeholders"
+      value={value} onChange={setValue} placeholder="Write a message" />
+    <JumpButton onClick={() => input.current?.insertToken({
+      value: 'order.number', label: 'Order number',
+    })}>Insert order number</JumpButton>
+    <JumpButton onClick={() => setValue([])}>Clear</JumpButton>
+  </>
+}
+```
+
+- `value`/`onChange` control the entire structured value. For uncontrolled editing
+  use `defaultValue`. Adjacent text parts are merged and empty text parts omitted.
+- Each token instance needs a unique `id`; `value` is its business identifier and
+  may repeat. `label` is display text. `insertToken` generates an ID when omitted.
+- Ref methods: `focus()`, `insertToken({ id?, value, label })`, `insertText(text)`,
+  and `removeToken(id)`. Insertion replaces the current/last selection, or appends
+  if there is none. Opening an external toolbar does not lose the insertion point.
+- Backspace **after** a token or Delete **before** it removes the whole token.
+  Backspace before a token deletes the preceding character. Tokens also have a
+  remove button. Explicit `onTokenInsert`/`onTokenRemove` callbacks accompany edit
+  notifications (including undo/redo); `onChange` remains the state update API.
+- Undo/redo uses Lexical history. External value replacement resets that history.
+- Internal copy/paste preserves tokens and assigns fresh IDs to pasted instances.
+  Other applications receive plain labels/text. Plain-text paste is supported;
+  arbitrary HTML is not inserted. The field is single-line: pasted line breaks
+  become spaces and Enter does not insert a paragraph.
+- `disabled`, `readOnly`, `error`, `status`, `label`, `hint`, `placeholder` and ARIA
+  props are supported. Read-only tokens cannot be removed. The ref is an editor
+  handle, not an `HTMLInputElement`. Submit the structured value through your form
+  state; this is not a native input's string-valued form serialization.
+
+Playground: `/?component=token-input`. The component uses Lexical with atomic token
+nodes; there is no manual HTML-to-value parsing and no consumer Tailwind dependency.
+
+## Dropdown popup width
+
+The default dropdown popup aligns with the outer visible field and uses its full
+width, including the icon area (but excluding helper text). For longer options:
+
+```tsx
+<JumpDropdown label="Areas" items={items} popupMinWidth={320} />
+```
+
+`popupMinWidth` is an optional minimum in CSS pixels. The popup never shrinks below
+the field width unless viewport space requires it. It is constrained to the
+available viewport and shifted at screen edges. Searching does not change its
+requested width. The prop does not change the field's own width. `inputRef` still
+points to the combobox input, and Escape/single selection restore input focus.
+
+## Field widths
+
+Text fields, dropdowns, date pickers and time pickers fill their parent container.
+Constrain the surrounding layout for compact controls, for example with a grid
+column or a wrapper `maxWidth`. Calendar and time popups retain their own sizing;
+they do not expand to match a wide field.
+
 ## Sticky tables and selection
 
 `JumpTable stickyHeader` fixes both the header and footer inside the scrollable
 container. They use `--jumpy-cmp-table-backdrop-color` for a continuous background
 behind the decorative cell surfaces. The default resolves to the opaque semantic
-floating surface in each preset. Keep any custom backdrop override opaque.
+card surface in each preset. Normal cell decorations are transparent; selected
+and hovered cells use their semantic interaction surfaces. The scroll container
+and pinned cells share the same backdrop. Keep any custom backdrop override opaque.
+Use `showHorizontalBorders` for explicit row separators in all columns.
 
 `JumpTableCell` and `JumpTableHeaderCell` support `pinned="left"` or `pinned="right"`;
 use `pinnedEdge` for the edge divider. Pinned cells use the same backdrop as the
@@ -75,7 +152,7 @@ Jumpy Components als ein gemeinsames UI-Paket.
 Starting with 0.5.0, Jumpy UI uses the public npmjs registry. No package token is required to install:
 
 ```bash
-npm install @mario_hahn/jumpy-ui@^0.8.0
+npm install @mario_hahn/jumpy-ui@^0.9.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases

package/dist/{chunk-HQ4NWZ65.js → chunk-3QWVEQL3.js}

@@ -22624,6 +22624,10 @@ var providerStyles = `
     transform var(--jumpy-animation-duration-xsmall) var(--jumpy-animation-easing-drift);
 }
 
+[data-jumpy-theme='true'] [data-jumpy-component='token-input'] > p {
+  margin: 0;
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='card'][data-interactive='true'] {
   cursor: pointer;
   --jumpy-cmp-card-checkmark-right: var(--jumpy-spacing-gap-xsmall);
@@ -23744,7 +23748,7 @@ var providerStyles = `
 }
 
 [data-jumpy-theme='true'] [data-jumpy-slot='table-wrapper'] {
-  --jumpy-cmp-table-backdrop-color: var(--jumpy-non-interactive-background-default-floating);
+  --jumpy-cmp-table-backdrop-color: var(--jumpy-color-surface-card);
   display: block;
   position: relative;
   width: 100%;
@@ -23756,6 +23760,7 @@ var providerStyles = `
   width: 100%;
   max-width: 100%;
   overflow: auto;
+  background-color: var(--jumpy-cmp-table-backdrop-color);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] {
@@ -23775,18 +23780,6 @@ var providerStyles = `
   top: 0;
 }
 
-/* Table section backgrounds can be clipped to rounded cell boxes by the table
-   painting algorithm. An independent layer also covers those outer corners. */
-[data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] thead::before,
-[data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] tfoot::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background-color: var(--jumpy-cmp-table-backdrop-color);
-}
-
 [data-jumpy-theme='true'] [data-jumpy-slot='table-container'][data-sticky-header='true'] :is(thead, tfoot) > [data-jumpy-component='table-row'] > :is([data-jumpy-component='table-cell'], [data-jumpy-component='table-header-cell']):is(:first-child, :last-child) {
   /* Only the decorative surface is rounded; sticky backdrops are rectangular. */
   border-radius: 0;
@@ -23840,7 +23833,7 @@ var providerStyles = `
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-cell'],
 [data-jumpy-theme='true'] [data-jumpy-component='table-header-cell'] {
-  --jumpy-cmp-table-cell-surface-color: var(--jumpy-interactive-inactive-regular-default-surface, transparent);
+  --jumpy-cmp-table-cell-surface-color: transparent;
   display: table-cell;
   position: relative;
   height: var(--jumpy-spacing-size-2xlarge);
@@ -23852,7 +23845,7 @@ var providerStyles = `
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-header-cell'] {
-  --jumpy-cmp-table-cell-surface-color: color-mix(in srgb, var(--jumpy-color-neutral-ultralight) calc(var(--jumpy-opacity-medium) * 100%), transparent);
+  --jumpy-cmp-table-cell-surface-color: color-mix(in srgb, var(--jumpy-color-surface-field) calc(var(--jumpy-opacity-medium) * 100%), transparent);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-cell'][data-align='start'],
@@ -23887,9 +23880,10 @@ var providerStyles = `
 [data-jumpy-theme='true'] [data-jumpy-component='table-cell']::before,
 [data-jumpy-theme='true'] [data-jumpy-component='table-header-cell']::before {
   position: absolute;
+  z-index: 1;
   inset-inline: 0;
   bottom: 0;
-  background-color: var(--jumpy-color-neutral-ultralight, var(--jumpy-color-border-subtle));
+  background-color: var(--jumpy-color-border-subtle);
   height: var(--jumpy-spacing-outline-small);
   content: '';
 }
@@ -24139,31 +24133,17 @@ var providerStyles = `
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-footer'] {
   position: relative;
-  background-color: var(--jumpy-interactive-inactive-regular-default-surface);
-}
-
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::before,
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::after {
-  position: absolute;
-  right: 0;
-  left: 0;
-  z-index: 1;
-  background-color: var(--jumpy-interactive-inactive-regular-default-border);
-  height: var(--jumpy-spacing-outline-small);
-  content: '';
+  background-color: var(--jumpy-cmp-table-backdrop-color);
 }
 
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::before {
-  top: 0;
+/* Native cell borders paint consistently on either side of pinned boundaries.
+   A section pseudo-element would be covered only by the sticky cells. */
+[data-jumpy-theme='true'] [data-jumpy-component='table-footer'] > [data-jumpy-component='table-row']:first-child > :is([data-jumpy-component='table-cell'], [data-jumpy-component='table-header-cell']) {
+  border-top: var(--jumpy-spacing-outline-small) solid var(--jumpy-color-border-subtle);
 }
 
-[data-jumpy-theme='true'] [data-jumpy-component='table-footer']::after {
-  display: none;
-  bottom: 0;
-}
-
-[data-jumpy-theme='true'] [data-jumpy-component='table'][data-horizontal-borders='true'] [data-jumpy-component='table-footer']::after {
-  display: block;
+[data-jumpy-theme='true'] [data-jumpy-component='table'][data-horizontal-borders='true'] > [data-jumpy-component='table-footer'] > [data-jumpy-component='table-row']:last-child > :is([data-jumpy-component='table-cell'], [data-jumpy-component='table-header-cell']) {
+  border-bottom: var(--jumpy-spacing-outline-small) solid var(--jumpy-color-border-subtle);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='table-footer'] [data-jumpy-component='table-cell']::before {