@plexui/vue 0.1.12 → 0.3.0

package/dist/es/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  nextTick,\n  onMounted,\n  ref,\n  useId,\n  watch,\n  withDirectives,\n  type PropType,\n  type TextareaHTMLAttributes,\n} from \"vue\"\nimport type { ControlSize, Sizes, Variants } from \"@plexui/styles/types\"\nimport { vServerText } from \"../../lib/defaultValue.js\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Textarea/Textarea.module.css\"\n\n// Vue port of packages/ui/src/components/Textarea/Textarea.tsx. Props,\n// defaults and rendered DOM match React 1:1 (checked by the parity tests).\n//\n// - `class` goes to the container; every other attribute and listener\n//   (`style`, `placeholder`, `@input`, `@change`, ...) goes to the <textarea>,\n//   like React's `className` and `...restProps`.\n// - Value: `value` + `update:value` mirror React's `value` prop\n//   (`v-model:value`) and fire on every input. Uncontrolled use takes\n//   `default-value`. Like a React controlled textarea, a `value` the parent\n//   does not update after input is put back.\n// - As in React, the textarea's text content (its `defaultValue`) follows\n//   the controlled value, or `default-value` when uncontrolled. It is set\n//   through the `textContent` property, which Vue's server renderer prints\n//   as the element's content, so `vServerText` can adjust it at SSR.\n\ntype ListenerValue = ((event: Event) => void) | Array<(event: Event) => void> | undefined\n\nconst invoke = (handler: unknown, event: Event) => {\n  for (const fn of ([] as unknown[]).concat(handler ?? [])) {\n    if (typeof fn === \"function\") fn(event)\n  }\n}\n\nconst TextareaComponent = defineComponent({\n  name: \"Textarea\",\n  inheritAttrs: false,\n  props: {\n    /** Visual style of the textarea. @default \"outline\" */\n    variant: { type: String as PropType<Variants<\"outline\" | \"soft\">>, default: \"outline\" },\n    /** Controls the size of the textarea. @default \"md\" */\n    size: { type: String as PropType<ControlSize>, default: \"md\" },\n    /** Applies a negative margin using the current gutter to optically align the text with surrounding content. */\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n    /** Controls gutter on the edges of the textarea, defaults to value from `size`. */\n    gutterSize: String as PropType<Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n    /** Disables the textarea visually and from interactions. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Makes the textarea read-only. @default false */\n    readOnly: { type: Boolean, default: false },\n    /** Native spelling of `readOnly` (`<Textarea readonly />`). @default false */\n    readonly: { type: Boolean, default: false },\n    /** Mark the textarea as invalid. @default false */\n    invalid: { type: Boolean, default: false },\n    /** Allow autofill extensions to appear in the textarea. @default `true` when `name` is set, else `false` */\n    allowAutofillExtensions: { type: Boolean, default: undefined },\n    /** Select all contents of the textarea when mounted (and whenever it turns `true`). @default false */\n    autoSelect: { type: Boolean, default: undefined },\n    /** Default number of rows to display. @default 3 */\n    rows: { type: Number, default: 3 },\n    /** Automatically adjust the height of the textarea based on its contents. @default false */\n    autoResize: { type: Boolean, default: undefined },\n    /** Maximum number of rows that can be displayed when autoResize is enabled. @default Math.max(rows, 10) */\n    maxRows: Number,\n    id: String,\n    name: String,\n    /** Controlled value (`v-model:value`) */\n    value: { type: [String, Number] as PropType<string | number>, default: undefined },\n    /** Initial value when uncontrolled */\n    defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n    /** The textarea's `autocomplete` attribute */\n    autoComplete: String,\n  },\n  emits: {\n    \"update:value\": (_value: string) => true,\n    /** Fired when the browser autofills the textarea */\n    \"autofill\": () => true,\n  },\n  setup(props, { attrs, emit, expose }) {\n    const textAreaRef = ref<HTMLTextAreaElement | null>(null)\n    // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n    // Allow user to override this for connecting to labels.\n    const onePasswordPreventionId = `search-ui-input-${useId()}`\n    const focused = ref(false)\n\n    const computedMaxRows = computed(() =>\n      props.autoResize ? Math.max(props.maxRows ?? 10, props.rows) : props.rows,\n    )\n    const controlledValue = () => props.value\n\n    const runAutoSelect = () => {\n      if (props.autoSelect) {\n        textAreaRef.value?.select()\n      }\n    }\n\n    const autosizeTextarea = () => {\n      const textarea = textAreaRef.value\n      if (!props.autoResize || !textarea || computedMaxRows.value === undefined) return\n      textarea.style.height = \"0px\"\n      const scrollHeight = textarea.scrollHeight\n      textarea.style.height = scrollHeight + \"px\"\n    }\n\n    // The textarea's value is set imperatively, like React DOM does: a `value`\n    // prop would make Vue mirror it into a `value` attribute, which React\n    // never renders. Puts the controlled value back when it differs.\n    const syncValue = () => {\n      const textarea = textAreaRef.value\n      const value = controlledValue()\n      if (!textarea || value == null) return\n      const nextValue = String(value)\n      if (textarea.value !== nextValue) textarea.value = nextValue\n    }\n\n    // React runs these effects after mount and when their dependencies change\n    onMounted(() => {\n      const textarea = textAreaRef.value\n      // React's initTextarea: the initial text becomes the (dirty) value\n      const initialValue = textarea?.textContent ?? \"\"\n      if (textarea && initialValue !== \"\") textarea.value = initialValue\n      runAutoSelect()\n      autosizeTextarea()\n    })\n    // React DOM writes a new value while committing, before any effect runs,\n    // so the selection covers the value that arrives with `autoSelect`\n    watch(\n      () => props.autoSelect,\n      () => {\n        syncValue()\n        runAutoSelect()\n      },\n      { flush: \"post\" },\n    )\n    // Resize if value changes outside of user input - e.g. form reset\n    watch(\n      () => [controlledValue(), props.rows, props.autoResize, computedMaxRows.value],\n      () => {\n        syncValue()\n        autosizeTextarea()\n      },\n      { flush: \"post\" },\n    )\n\n    const handleInput = (evt: Event) => {\n      const next = (evt.target as HTMLTextAreaElement).value\n      emit(\"update:value\", next)\n      autosizeTextarea()\n      // A controlled value the parent did not update wins over the typed text,\n      // as in React\n      void nextTick(syncValue)\n    }\n\n    expose({\n      /** The rendered <textarea> element */\n      textarea: textAreaRef,\n      focus: () => textAreaRef.value?.focus(),\n    })\n\n    return () => {\n      const {\n        class: className,\n        onInput,\n        onFocus,\n        onBlur,\n        onAnimationstart,\n        ...restAttrs\n      } = attrs as Record<string, unknown>\n\n      const { variant, size, gutterSize, disabled, invalid, rows } = props\n      const readOnly = props.readOnly || props.readonly\n      // Default to `true` when presence of `name`\n      const allowAutofillExtensions = props.allowAutofillExtensions ?? !!props.name\n      const value = controlledValue()\n      // React keeps the textarea's defaultValue (its text content) in sync with\n      // the controlled value, else with `defaultValue`\n      const textContent = String(value ?? props.defaultValue ?? \"\")\n\n      return h(\n        \"div\",\n        {\n          \"class\": [s.Container, className],\n          \"data-variant\": variant,\n          \"data-size\": size,\n          \"data-gutter-size\": gutterSize,\n          \"data-optically-align\": props.opticallyAlign,\n          \"data-focused\": String(focused.value),\n          \"data-disabled\": disabled ? \"\" : undefined,\n          \"data-readonly\": readOnly ? \"\" : undefined,\n          \"data-invalid\": invalid ? \"\" : undefined,\n          \"style\": toCssVariables({\n            \"textarea-min-rows\": `${rows}`,\n            \"textarea-max-rows\": `${computedMaxRows.value}`,\n          }),\n        },\n        [\n          withDirectives(\n            h(\"textarea\", {\n              ...restAttrs,\n              \"onInput\": (evt: Event) => {\n                invoke(onInput as ListenerValue, evt)\n                handleInput(evt)\n              },\n              \"ref\": textAreaRef,\n              \"id\": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),\n              \"class\": s.Textarea,\n              \"name\": props.name,\n              \"autocomplete\": props.autoComplete ?? restAttrs.autocomplete,\n              // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n              \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid || undefined),\n              \"readonly\": readOnly,\n              \"disabled\": disabled,\n              \"rows\": rows,\n              \"onFocus\": (evt: Event) => {\n                focused.value = true\n                invoke(onFocus as ListenerValue, evt)\n              },\n              \"onBlur\": (evt: Event) => {\n                focused.value = false\n                invoke(onBlur as ListenerValue, evt)\n              },\n              \"onAnimationstart\": (evt: AnimationEvent) => {\n                invoke(onAnimationstart as ListenerValue, evt)\n                if (evt.animationName === \"native-autofill-in\") {\n                  emit(\"autofill\")\n                }\n              },\n              // Prevent LastPass and 1Password from appearing\n              \"data-lpignore\": allowAutofillExtensions ? undefined : true,\n              \"data-1p-ignore\": allowAutofillExtensions ? undefined : true,\n              \"textContent\": textContent,\n            }),\n            [[vServerText, textContent]],\n          ),\n        ],\n      )\n    }\n  },\n})\n\ntype TextareaOwnProps = InstanceType<typeof TextareaComponent>[\"$props\"]\n\n/** Textarea props plus the native <textarea> attributes that fall through to it, as in React. */\nexport type TextareaProps = TextareaOwnProps & Omit<TextareaHTMLAttributes, keyof TextareaOwnProps | \"readonly\">\n\nexport const Textarea = TextareaComponent as typeof TextareaComponent & { new (): { $props: TextareaProps } }\n"]}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  nextTick,\n  onMounted,\n  ref,\n  useId,\n  watch,\n  withDirectives,\n  type PropType,\n  type TextareaHTMLAttributes,\n} from \"vue\"\nimport type { ControlSize, Sizes, Variants } from \"@plexui/styles/types\"\nimport { vServerText } from \"../../lib/defaultValue.js\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Textarea/Textarea.module.css\"\n\n// Vue port of packages/ui/src/components/Textarea/Textarea.tsx. Props,\n// defaults and rendered DOM match React 1:1 (checked by the parity tests).\n//\n// - `class` goes to the container; every other attribute and listener\n//   (`style`, `placeholder`, `@input`, `@change`, ...) goes to the <textarea>,\n//   like React's `className` and `...restProps`.\n// - Value: `value` + `update:value` mirror React's `value` prop\n//   (`v-model:value`) and fire on every input. Uncontrolled use takes\n//   `default-value`. Like a React controlled textarea, a `value` the parent\n//   does not update after input is put back.\n// - As in React, the textarea's text content (its `defaultValue`) follows\n//   the controlled value, or `default-value` when uncontrolled. It is set\n//   through the `textContent` property, which Vue's server renderer prints\n//   as the element's content, so `vServerText` can adjust it at SSR.\n\ntype ListenerValue = ((event: Event) => void) | Array<(event: Event) => void> | undefined\n\nconst invoke = (handler: unknown, event: Event) => {\n  for (const fn of ([] as unknown[]).concat(handler ?? [])) {\n    if (typeof fn === \"function\") fn(event)\n  }\n}\n\nconst TextareaComponent = defineComponent({\n  name: \"Textarea\",\n  inheritAttrs: false,\n  props: {\n    /** Visual style of the textarea. @default \"outline\" */\n    variant: { type: String as PropType<Variants<\"outline\" | \"soft\" | \"ghost\">>, default: \"outline\" },\n    /** Controls the size of the textarea. @default \"md\" */\n    size: { type: String as PropType<ControlSize>, default: \"md\" },\n    /** Applies a negative margin using the current gutter to optically align the text with surrounding content. */\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n    /** Controls gutter on the edges of the textarea, defaults to value from `size`. */\n    gutterSize: String as PropType<Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n    /** Disables the textarea visually and from interactions. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Makes the textarea read-only. @default false */\n    readOnly: { type: Boolean, default: false },\n    /** Native spelling of `readOnly` (`<Textarea readonly />`). @default false */\n    readonly: { type: Boolean, default: false },\n    /** Mark the textarea as invalid. @default false */\n    invalid: { type: Boolean, default: false },\n    /** Allow autofill extensions to appear in the textarea. @default `true` when `name` is set, else `false` */\n    allowAutofillExtensions: { type: Boolean, default: undefined },\n    /** Select all contents of the textarea when mounted (and whenever it turns `true`). @default false */\n    autoSelect: { type: Boolean, default: undefined },\n    /** Default number of rows to display. @default 3 */\n    rows: { type: Number, default: 3 },\n    /** Automatically adjust the height of the textarea based on its contents. @default false */\n    autoResize: { type: Boolean, default: undefined },\n    /** Maximum number of rows that can be displayed when autoResize is enabled. @default Math.max(rows, 10) */\n    maxRows: Number,\n    id: String,\n    name: String,\n    /** Controlled value (`v-model:value`) */\n    value: { type: [String, Number] as PropType<string | number>, default: undefined },\n    /** Initial value when uncontrolled */\n    defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n    /** The textarea's `autocomplete` attribute */\n    autoComplete: String,\n  },\n  emits: {\n    \"update:value\": (_value: string) => true,\n    /** Fired when the browser autofills the textarea */\n    \"autofill\": () => true,\n  },\n  setup(props, { attrs, emit, expose }) {\n    const textAreaRef = ref<HTMLTextAreaElement | null>(null)\n    // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n    // Allow user to override this for connecting to labels.\n    const onePasswordPreventionId = `search-ui-input-${useId()}`\n    const focused = ref(false)\n\n    const computedMaxRows = computed(() =>\n      props.autoResize ? Math.max(props.maxRows ?? 10, props.rows) : props.rows,\n    )\n    const controlledValue = () => props.value\n\n    const runAutoSelect = () => {\n      if (props.autoSelect) {\n        textAreaRef.value?.select()\n      }\n    }\n\n    const autosizeTextarea = () => {\n      const textarea = textAreaRef.value\n      if (!props.autoResize || !textarea || computedMaxRows.value === undefined) return\n      textarea.style.height = \"0px\"\n      const scrollHeight = textarea.scrollHeight\n      textarea.style.height = scrollHeight + \"px\"\n    }\n\n    // The textarea's value is set imperatively, like React DOM does: a `value`\n    // prop would make Vue mirror it into a `value` attribute, which React\n    // never renders. Puts the controlled value back when it differs.\n    const syncValue = () => {\n      const textarea = textAreaRef.value\n      const value = controlledValue()\n      if (!textarea || value == null) return\n      const nextValue = String(value)\n      if (textarea.value !== nextValue) textarea.value = nextValue\n    }\n\n    // React runs these effects after mount and when their dependencies change\n    onMounted(() => {\n      const textarea = textAreaRef.value\n      // React's initTextarea: the initial text becomes the (dirty) value\n      const initialValue = textarea?.textContent ?? \"\"\n      if (textarea && initialValue !== \"\") textarea.value = initialValue\n      runAutoSelect()\n      autosizeTextarea()\n    })\n    // React DOM writes a new value while committing, before any effect runs,\n    // so the selection covers the value that arrives with `autoSelect`\n    watch(\n      () => props.autoSelect,\n      () => {\n        syncValue()\n        runAutoSelect()\n      },\n      { flush: \"post\" },\n    )\n    // Resize if value changes outside of user input - e.g. form reset\n    watch(\n      () => [controlledValue(), props.rows, props.autoResize, computedMaxRows.value],\n      () => {\n        syncValue()\n        autosizeTextarea()\n      },\n      { flush: \"post\" },\n    )\n\n    const handleInput = (evt: Event) => {\n      const next = (evt.target as HTMLTextAreaElement).value\n      emit(\"update:value\", next)\n      autosizeTextarea()\n      // A controlled value the parent did not update wins over the typed text,\n      // as in React\n      void nextTick(syncValue)\n    }\n\n    expose({\n      /** The rendered <textarea> element */\n      textarea: textAreaRef,\n      focus: () => textAreaRef.value?.focus(),\n    })\n\n    return () => {\n      const {\n        class: className,\n        onInput,\n        onFocus,\n        onBlur,\n        onAnimationstart,\n        ...restAttrs\n      } = attrs as Record<string, unknown>\n\n      const { variant, size, gutterSize, disabled, invalid, rows } = props\n      const readOnly = props.readOnly || props.readonly\n      // Default to `true` when presence of `name`\n      const allowAutofillExtensions = props.allowAutofillExtensions ?? !!props.name\n      const value = controlledValue()\n      // React keeps the textarea's defaultValue (its text content) in sync with\n      // the controlled value, else with `defaultValue`\n      const textContent = String(value ?? props.defaultValue ?? \"\")\n\n      return h(\n        \"div\",\n        {\n          \"class\": [s.Container, className],\n          \"data-variant\": variant,\n          \"data-size\": size,\n          \"data-gutter-size\": gutterSize,\n          \"data-optically-align\": props.opticallyAlign,\n          \"data-focused\": String(focused.value),\n          \"data-disabled\": disabled ? \"\" : undefined,\n          \"data-readonly\": readOnly ? \"\" : undefined,\n          \"data-invalid\": invalid ? \"\" : undefined,\n          \"style\": toCssVariables({\n            \"textarea-min-rows\": `${rows}`,\n            \"textarea-max-rows\": `${computedMaxRows.value}`,\n          }),\n        },\n        [\n          withDirectives(\n            h(\"textarea\", {\n              ...restAttrs,\n              \"onInput\": (evt: Event) => {\n                invoke(onInput as ListenerValue, evt)\n                handleInput(evt)\n              },\n              \"ref\": textAreaRef,\n              \"id\": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),\n              \"class\": s.Textarea,\n              \"name\": props.name,\n              \"autocomplete\": props.autoComplete ?? restAttrs.autocomplete,\n              // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n              \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid || undefined),\n              \"readonly\": readOnly,\n              \"disabled\": disabled,\n              \"rows\": rows,\n              \"onFocus\": (evt: Event) => {\n                focused.value = true\n                invoke(onFocus as ListenerValue, evt)\n              },\n              \"onBlur\": (evt: Event) => {\n                focused.value = false\n                invoke(onBlur as ListenerValue, evt)\n              },\n              \"onAnimationstart\": (evt: AnimationEvent) => {\n                invoke(onAnimationstart as ListenerValue, evt)\n                if (evt.animationName === \"native-autofill-in\") {\n                  emit(\"autofill\")\n                }\n              },\n              // Prevent LastPass and 1Password from appearing\n              \"data-lpignore\": allowAutofillExtensions ? undefined : true,\n              \"data-1p-ignore\": allowAutofillExtensions ? undefined : true,\n              \"textContent\": textContent,\n            }),\n            [[vServerText, textContent]],\n          ),\n        ],\n      )\n    }\n  },\n})\n\ntype TextareaOwnProps = InstanceType<typeof TextareaComponent>[\"$props\"]\n\n/** Textarea props plus the native <textarea> attributes that fall through to it, as in React. */\nexport type TextareaProps = TextareaOwnProps & Omit<TextareaHTMLAttributes, keyof TextareaOwnProps | \"readonly\">\n\nexport const Textarea = TextareaComponent as typeof TextareaComponent & { new (): { $props: TextareaProps } }\n"]}

package/dist/es/lib/sortable.js

@@ -0,0 +1,524 @@
+import s from "@plexui/styles/components/Sortable/Sortable.module.css";
+const START_DISTANCE = 4;
+const TOUCH_HOLD = 200;
+// Long enough to pass over a target on the way to another
+const TARGET_HOLD = 500;
+const SCROLL_EDGE = 80;
+const SCROLL_SLOW = 4;
+const SCROLL_FAST = 30;
+const NEAR_LIST = 40;
+const LINE_INSET = 16;
+const PART = 4;
+// --cubic-enter: an animation here cannot read a CSS variable
+const EASING = "cubic-bezier(.19,1,.22,1)";
+const HANDLE = "[data-sortable-handle]";
+const GRAB = "[data-sortable-grab]";
+const STATIC = "data-sortable-static";
+const INTERACTIVE = [
+    "a[href]",
+    "button",
+    "input",
+    "select",
+    "summary",
+    "textarea",
+    "[contenteditable]",
+    "[role=button]",
+    "[role=checkbox]",
+    "[role=combobox]",
+    "[role=link]",
+    "[role=radio]",
+    "[role=slider]",
+    "[role=switch]",
+    "[role=tab]",
+].join(",");
+// Read at the moment of use: the setting can change while the page is open
+const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** How far the line stands in from the sides of the list */
+const lineInset = (list) => {
+    const inset = parseFloat(getComputedStyle(list).getPropertyValue("--sortable-line-inset"));
+    return Number.isNaN(inset) ? LINE_INSET : inset;
+};
+/** A head row or an empty message stands among the items and is not one of them */
+const itemsOf = (list) => [...list.children].filter((item) => !item.hasAttribute(STATIC));
+/** The lists a drag from this one can reach, in the order of the page */
+const listsOf = (list) => {
+    const { group } = list.dataset;
+    if (!group)
+        return [list];
+    return [...document.querySelectorAll(`[data-sortable][data-group="${CSS.escape(group)}"]:not([data-disabled])`)];
+};
+/** Grips stand in a table, elsewhere only when the list asks for them */
+const showsHandles = (list) => (list.dataset.handles ?? String(list.tagName === "TBODY")) === "true";
+/** The direct child of the list that holds `target` */
+const itemOf = (list, target) => {
+    let node = target;
+    while (node && node.parentElement !== list)
+        node = node.parentElement;
+    return node;
+};
+/** The order after a move. `to` counts the list without the moved item. */
+export const moveItem = (items, from, to) => {
+    const next = [...items];
+    next.splice(to, 0, ...next.splice(from, 1));
+    return next;
+};
+const labelOf = (item) => {
+    const named = item.dataset.sortableLabel ?? item.querySelector("[data-sortable-label], label")?.textContent;
+    if (named)
+        return named.trim();
+    // The cells of a row or the lines of a card run together: the first one is the name
+    const texts = document.createTreeWalker(item, NodeFilter.SHOW_TEXT);
+    while (texts.nextNode()) {
+        if (texts.currentNode.textContent?.trim())
+            return texts.currentNode.parentElement?.textContent?.trim() ?? "";
+    }
+    return "";
+};
+/** What a screen reader hears: a picture has no text of its own */
+const nameOf = (item) => labelOf(item) || item.querySelector("img")?.alt || "";
+function makeChip(item) {
+    const chip = document.createElement("div");
+    chip.className = s.Chip;
+    const image = item.querySelector("[data-sortable-image], img");
+    if (image instanceof HTMLImageElement) {
+        const picture = document.createElement("img");
+        picture.className = s.ChipImage;
+        picture.src = image.currentSrc || image.src;
+        picture.alt = "";
+        chip.append(picture);
+    }
+    else if (image) {
+        // A cropped background: the chip takes the element as it stands, at the chip's size
+        const picture = image.cloneNode(false);
+        picture.className = s.ChipImage;
+        picture.hidden = false;
+        chip.append(picture);
+    }
+    const text = labelOf(item);
+    if (text) {
+        const label = document.createElement("span");
+        label.className = s.ChipLabel;
+        label.textContent = text;
+        chip.append(label);
+    }
+    document.body.append(chip);
+    return chip;
+}
+function announce(text) {
+    let region = document.querySelector("[data-sortable-live]");
+    if (!region) {
+        region = document.createElement("div");
+        region.className = s.Live;
+        region.setAttribute("aria-live", "polite");
+        region.setAttribute("data-sortable-live", "");
+        document.body.append(region);
+    }
+    region.textContent = text;
+}
+const scrollParent = (start) => {
+    for (let node = start; node && node !== document.body; node = node.parentElement) {
+        if (/auto|scroll/.test(getComputedStyle(node).overflowY) && node.scrollHeight > node.clientHeight)
+            return node;
+    }
+    return undefined;
+};
+// The nearer the edge the faster: slow to aim at a row, fast across a long list
+const scrollStep = (depth) => SCROLL_SLOW + (SCROLL_FAST - SCROLL_SLOW) * Math.min(depth / SCROLL_EDGE, 1);
+function listSlots(list, items) {
+    const box = list.getBoundingClientRect();
+    const inset = lineInset(list);
+    if (!items.length) {
+        // Above a message or an empty row: the line must not cross its text
+        const rest = (list.lastElementChild ?? list).getBoundingClientRect();
+        return [{ gap: 0, x: inset, y: rest.top - box.top, length: box.width - inset * 2 }];
+    }
+    const rects = items.map((item) => item.getBoundingClientRect());
+    return Array.from({ length: items.length + 1 }, (_, gap) => {
+        const above = rects[gap - 1];
+        const below = rects[gap];
+        const y = above && below ? (above.bottom + below.top) / 2 : (below?.top ?? above.bottom);
+        return {
+            gap,
+            x: inset,
+            y: y - box.top,
+            length: box.width - inset * 2,
+            before: items[gap - 1],
+            after: items[gap],
+        };
+    });
+}
+// One slot per gap, and two where a line wraps: the end of one line and the start of the next
+function gridSlots(list, items) {
+    const box = list.getBoundingClientRect();
+    if (!items.length)
+        return [{ gap: 0, x: 0, y: 0, length: box.height }];
+    const half = (parseFloat(getComputedStyle(list).columnGap) || 8) / 2;
+    const rects = items.map((item) => item.getBoundingClientRect());
+    const slots = [];
+    const add = (gap, x, rect, before, after) => slots.push({ gap, x: x - box.left, y: rect.top - box.top, length: rect.height, before, after });
+    rects.forEach((rect, gap) => {
+        const previous = rects[gap - 1];
+        if (previous && Math.abs(previous.top - rect.top) < rect.height / 2) {
+            add(gap, (previous.right + rect.left) / 2, rect, items[gap - 1], items[gap]);
+            return;
+        }
+        if (previous)
+            add(gap, previous.right + half, previous, items[gap - 1]);
+        add(gap, rect.left - half, rect, undefined, items[gap]);
+    });
+    const last = rects.length - 1;
+    add(rects.length, rects[last].right + half, rects[last], items[last]);
+    return slots;
+}
+// The chip keeps its size and fades out: grown to the item, its text would stand over the item's own
+function flyChip(chip, to, layout) {
+    if (reduced() || !to) {
+        chip.remove();
+        return;
+    }
+    const from = chip.getBoundingClientRect();
+    const x = layout === "grid" ? to.left + (to.width - from.width) / 2 : to.left;
+    const y = to.top + (to.height - from.height) / 2;
+    chip.animate([
+        { transform: `translate(${from.left}px, ${from.top}px)`, opacity: 1 },
+        { transform: `translate(${x}px, ${y}px)`, opacity: 0 },
+    ], { duration: 200, easing: EASING, fill: "forwards" }).onfinish = () => chip.remove();
+}
+/** The items that changed place slide there from where they stood */
+async function flip(items, work, skip) {
+    const before = new Map(items.map((item) => [item, item.getBoundingClientRect()]));
+    await work();
+    if (reduced())
+        return;
+    items
+        .filter((item) => item !== skip && item.isConnected)
+        .forEach((item) => {
+        const was = before.get(item);
+        const now = item.getBoundingClientRect();
+        const x = was.left - now.left;
+        const y = was.top - now.top;
+        if (x || y)
+            item.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: "none" }], { duration: 200, easing: EASING });
+    });
+}
+const swallow = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+};
+function startDrag(event, list, source, layout, immediate, commit, link) {
+    const touch = event.pointerType === "touch" && !immediate;
+    const origin = { x: event.clientX, y: event.clientY };
+    const pointer = { ...origin };
+    const holdTimer = touch ? setTimeout(begin, TOUCH_HOLD) : undefined;
+    const style = getComputedStyle(list);
+    const part = parseFloat(layout === "grid" ? style.columnGap : style.rowGap) ? PART : 0;
+    const scroller = scrollParent(list);
+    const { group } = list.dataset;
+    const targets = group ? `[data-sortable-target="${CSS.escape(group)}"]` : undefined;
+    let drag;
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    function onMove({ clientX, clientY }) {
+        pointer.x = clientX;
+        pointer.y = clientY;
+        if (drag)
+            return;
+        const moved = Math.hypot(clientX - origin.x, clientY - origin.y) >= START_DISTANCE;
+        if (moved && touch)
+            stopListening();
+        else if (moved)
+            begin();
+    }
+    function onUp() {
+        finish(true);
+    }
+    function onCancel() {
+        finish(false);
+    }
+    function onKey(keyEvent) {
+        if (keyEvent.key !== "Escape")
+            return;
+        keyEvent.stopPropagation();
+        finish(false);
+    }
+    function blockScroll(touchEvent) {
+        touchEvent.preventDefault();
+    }
+    function stopListening() {
+        clearTimeout(holdTimer);
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onCancel);
+        window.removeEventListener("keydown", onKey, true);
+        window.removeEventListener("touchmove", blockScroll);
+    }
+    function measure() {
+        return listsOf(list).map((entry) => {
+            const items = itemsOf(entry);
+            entry.setAttribute("data-dragging", "");
+            return { list: entry, items, slots: layout === "grid" ? gridSlots(entry, items) : listSlots(entry, items) };
+        });
+    }
+    function begin() {
+        const areas = measure();
+        window.getSelection()?.removeAllRanges();
+        document.documentElement.classList.add(s.Dragging);
+        source.setAttribute("data-sortable-source", "");
+        window.addEventListener("keydown", onKey, true);
+        window.addEventListener("touchmove", blockScroll, { passive: false });
+        const chip = makeChip(source);
+        const line = document.createElement("div");
+        line.className = s.Line;
+        line.hidden = true;
+        document.body.append(line);
+        const { width, height } = chip.getBoundingClientRect();
+        drag = { chip, line, width, height, areas };
+        tick();
+    }
+    function tick() {
+        if (!drag)
+            return;
+        drag.under = targets ? document.elementFromPoint(pointer.x, pointer.y) : undefined;
+        autoScroll();
+        update();
+        drag.frame = requestAnimationFrame(tick);
+    }
+    /** A column of targets with a scroll of its own scrolls alone, the page stays */
+    function panelUnder() {
+        const panel = targets && drag?.under ? scrollParent(drag.under) : undefined;
+        return panel && panel !== scroller && panel.querySelector(targets) ? panel : undefined;
+    }
+    function autoScroll() {
+        const area = panelUnder() ?? scroller;
+        const box = area?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight };
+        const above = box.top + SCROLL_EDGE - pointer.y;
+        const below = pointer.y - box.bottom + SCROLL_EDGE;
+        const step = above > 0 ? -scrollStep(above) : below > 0 ? scrollStep(below) : 0;
+        if (!step)
+            return;
+        if (area)
+            area.scrollTop += step;
+        else
+            window.scrollBy(0, step);
+    }
+    function update() {
+        if (!drag)
+            return;
+        drag.chip.style.transform = `translate(${pointer.x - drag.width / 2}px, ${pointer.y - drag.height / 2}px)`;
+        const target = (targets && drag.under?.closest(targets)) || undefined;
+        if (target !== drag.target)
+            pointAt(target);
+        const box = source.getBoundingClientRect();
+        const overSource = pointer.x >= box.left && pointer.x <= box.right && pointer.y >= box.top && pointer.y <= box.bottom;
+        source.toggleAttribute("data-sortable-away", !overSource);
+        showGap(target || overSource ? undefined : nearestSlot());
+    }
+    function pointAt(target) {
+        if (!drag)
+            return;
+        clearTimeout(drag.rest);
+        drag.target?.removeAttribute("data-over");
+        drag.target = target;
+        if (!target)
+            return;
+        target.setAttribute("data-over", "");
+        drag.rest = setTimeout(() => {
+            link?.hold?.(target.dataset.name);
+            // What the hold changed is drawn two frames on: a list opened, the page jumped
+            requestAnimationFrame(() => requestAnimationFrame(() => drag && (drag.areas = measure())));
+        }, TARGET_HOLD);
+    }
+    function distance(slot, box) {
+        if (layout === "list")
+            return Math.abs(pointer.y - (box.top + slot.y));
+        const top = box.top + slot.y;
+        return Math.hypot(pointer.x - (box.left + slot.x), Math.max(top - pointer.y, 0, pointer.y - top - slot.length));
+    }
+    function nearestSlot() {
+        if (!drag)
+            return undefined;
+        let best;
+        let closest = Infinity;
+        for (const area of drag.areas) {
+            const box = area.list.getBoundingClientRect();
+            const near = pointer.x >= box.left - NEAR_LIST &&
+                pointer.x <= box.right + NEAR_LIST &&
+                pointer.y >= box.top - NEAR_LIST &&
+                pointer.y <= box.bottom + NEAR_LIST;
+            if (!near)
+                continue;
+            for (const slot of area.slots) {
+                const away = distance(slot, box);
+                if (away < closest) {
+                    closest = away;
+                    best = { area, slot };
+                }
+            }
+        }
+        if (!best)
+            return undefined;
+        const index = best.area.items.indexOf(source);
+        return index >= 0 && (best.slot.gap === index || best.slot.gap === index + 1) ? undefined : best;
+    }
+    function shift(slot, by) {
+        const move = (item, offset) => {
+            if (!item || !part)
+                return;
+            item.style.transform = by
+                ? layout === "grid"
+                    ? `translateX(${offset}px)`
+                    : `translateY(${offset}px)`
+                : "";
+        };
+        move(slot?.before, -by);
+        move(slot?.after, by);
+    }
+    function showGap(found) {
+        if (!drag)
+            return;
+        if (found?.slot !== drag.found?.slot) {
+            shift(drag.found?.slot, 0);
+            shift(found?.slot, part);
+        }
+        drag.found = found;
+        drag.line.hidden = !found;
+        if (!found)
+            return;
+        const box = found.area.list.getBoundingClientRect();
+        if (layout === "grid") {
+            drag.line.style.transform = `translate(${box.left + found.slot.x - 1}px, ${box.top + found.slot.y}px)`;
+            drag.line.style.height = `${found.slot.length}px`;
+        }
+        else {
+            drag.line.style.transform = `translate(${box.left + found.slot.x}px, ${box.top + found.slot.y - 1}px)`;
+            drag.line.style.width = `${found.slot.length}px`;
+        }
+    }
+    function restoreSource() {
+        source.removeAttribute("data-sortable-source");
+        source.removeAttribute("data-sortable-away");
+    }
+    function settle(chip, item = source) {
+        const shown = item?.isConnected ? item : undefined;
+        flyChip(chip, shown?.getBoundingClientRect(), layout);
+        if (!reduced() && shown)
+            shown.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, easing: EASING });
+    }
+    async function land(chip, areas, { area, slot: { gap } }, clear) {
+        const from = itemsOf(list).indexOf(source);
+        restoreSource();
+        if (area.list === list) {
+            const to = gap > from ? gap - 1 : gap;
+            await flip(area.items, () => {
+                clear();
+                return commit(from, to);
+            }, source);
+            announce(`${nameOf(source)}, ${to + 1} / ${area.items.length}`);
+            settle(chip);
+            return;
+        }
+        const name = nameOf(source);
+        await flip(areas.flatMap(({ items }) => items), () => {
+            clear();
+            return link?.move(from, area.list.dataset.name, gap);
+        }, source);
+        announce(`${name}, ${gap + 1} / ${area.items.length + 1}`);
+        // A framework builds the row anew under its new parent
+        settle(chip, source.isConnected ? source : itemsOf(area.list)[gap]);
+    }
+    async function dropOn(chip, areas, name, clear) {
+        const from = itemsOf(list).indexOf(source);
+        restoreSource();
+        await flip(areas.flatMap(({ items }) => items), () => {
+            clear();
+            return link?.move(from, name);
+        }, source);
+        flyChip(chip, undefined, layout);
+    }
+    function finish(drop) {
+        stopListening();
+        if (!drag)
+            return;
+        const { chip, line, found, areas, frame, target, rest } = drag;
+        if (frame)
+            cancelAnimationFrame(frame);
+        clearTimeout(rest);
+        target?.removeAttribute("data-over");
+        // The pointer lifts over a row: that click must not act on it
+        window.addEventListener("click", swallow, { capture: true, once: true });
+        setTimeout(() => window.removeEventListener("click", swallow, { capture: true }));
+        line.remove();
+        drag = undefined;
+        // On a drop this waits for the flip to read where the parted items stand
+        const clear = () => {
+            areas.forEach((area) => area.list.removeAttribute("data-dragging"));
+            document.documentElement.classList.remove(s.Dragging);
+            shift(found?.slot, 0);
+        };
+        const targetName = target?.dataset.name;
+        if (drop && targetName && targetName !== list.dataset.name) {
+            void dropOn(chip, areas, targetName, clear);
+            return;
+        }
+        if (drop && found && !target) {
+            void land(chip, areas, found, clear);
+            return;
+        }
+        clear();
+        restoreSource();
+        settle(chip);
+    }
+}
+/** Starts a drag from a press inside the list. Goes on the list's `pointerdown`. */
+export function sortablePointerDown(event, list, layout, commit, link) {
+    const target = event.target;
+    if (event.button || target.closest("[data-sortable]") !== list)
+        return;
+    const source = itemOf(list, target);
+    if (!source || source.hasAttribute(STATIC))
+        return;
+    const handle = target.closest(HANDLE);
+    const control = target.closest(INTERACTIVE);
+    // A grip in sight is the only way to drag, otherwise anything but a control
+    // starts it, and a control that opens its row on a click may let a pull through
+    if (source.querySelector(HANDLE) && showsHandles(list) ? !handle : control && !control.closest(GRAB))
+        return;
+    startDrag(event, list, source, layout, !!handle, commit, link);
+}
+const KEY_STEPS = { ArrowUp: -1, ArrowLeft: -1, ArrowDown: 1, ArrowRight: 1 };
+/** Moves the focused handle's item with the arrow keys. Goes on the list's `keydown`. */
+export async function sortableKeyDown(event, list, commit, link) {
+    const step = KEY_STEPS[event.key];
+    const target = event.target;
+    if (!step || target.closest("[data-sortable]") !== list)
+        return;
+    const source = itemOf(list, target);
+    if (!source || (target !== source && !target.closest(HANDLE)))
+        return;
+    const items = itemsOf(list);
+    const from = items.indexOf(source);
+    const to = from + step;
+    if (to < 0 || to >= items.length) {
+        // Past the end of the list: on to the next list of the group
+        const lists = listsOf(list);
+        const next = lists[lists.indexOf(list) + step];
+        if (!next || !link)
+            return;
+        event.preventDefault();
+        const place = step > 0 ? 0 : itemsOf(next).length;
+        const name = nameOf(source);
+        await flip(lists.flatMap(itemsOf), () => link.move(from, next.dataset.name, place));
+        const landed = itemsOf(next)[place];
+        (landed?.querySelector(HANDLE) ?? landed)?.focus();
+        announce(`${name}, ${place + 1} / ${itemsOf(next).length}`);
+        return;
+    }
+    event.preventDefault();
+    await flip(items, () => commit(from, to));
+    // Moving an element in the document drops its focus
+    if (target.isConnected && document.activeElement !== target)
+        target.focus();
+    announce(`${nameOf(source)}, ${to + 1} / ${items.length}`);
+}
+//# sourceMappingURL=sortable.js.map