elements-kit 0.18.2 → 0.19.0

package/dist/ui/overlay/overlay.css

@@ -0,0 +1,332 @@
+.x-overlay {
+  color: var(--neutral-12);
+}
+
+.x-overlay:where([open])::backdrop {
+  background: var(--overlay-backdrop, var(--color-overlay));
+}
+
+.x-overlay > .x-card {
+  contain: none;
+  touch-action: pan-y;
+  position: static;
+  overflow-y: auto;
+}
+
+:where(.x-overlay:not([data-material-background], [data-material-background] .x-overlay)) {
+  --color-material: var(--color-material-solid);
+  --backdrop-filter-material: none;
+}
+
+.x-overlay:where([data-resize], [data-draggable]):before, .x-overlay:where([data-resize], [data-draggable]):after {
+  content: "";
+  z-index: 1;
+  pointer-events: none;
+  position: absolute;
+}
+
+.x-overlay:where([data-draggable]:not([data-resize^="end-"])):after {
+  width: var(--space-3);
+  height: var(--space-3);
+  border-radius: var(--overlay-grip-radius, var(--radius-5));
+  background-color: var(--neutral-a8);
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+}
+
+.x-overlay:where([data-draggable][data-resize="start-start"]):after {
+  inset-inline-start: auto;
+  inset-inline-end: var(--space-2);
+}
+
+.x-overlay:where([data-draggable][data-resize^="end-"]):after {
+  top: var(--space-2);
+  width: var(--space-8);
+  height: var(--space-1);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-inline: auto;
+  inset-inline: 0;
+}
+
+.x-overlay:where([data-resize^="block-"]):before {
+  width: var(--space-8);
+  height: var(--space-1);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-inline: auto;
+  inset-inline: 0;
+}
+
+.x-overlay:where([data-resize="block-start"]):before {
+  top: var(--space-2);
+}
+
+.x-overlay:where([data-resize="block-end"]):before {
+  bottom: var(--space-2);
+}
+
+.x-overlay:where([data-resize^="inline-"]):before {
+  width: var(--space-1);
+  height: var(--space-8);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-block: auto;
+  inset-block: 0;
+}
+
+.x-overlay:where([data-resize="inline-start"]):before {
+  inset-inline-start: var(--space-2);
+}
+
+.x-overlay:where([data-resize="inline-end"]):before {
+  inset-inline-end: var(--space-2);
+}
+
+.x-overlay:where([data-resize^="start-"], [data-resize^="end-"]):before {
+  --_grip-r: max(calc(var(--overlay-grip-radius, var(--radius-5)) - var(--space-1)),
+    0px);
+  --_cap: min(var(--space-1), calc(var(--_grip-r) * 9999));
+  --_gx: 1;
+  --_gy: 1;
+  content: "";
+  z-index: 1;
+  pointer-events: none;
+  width: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
+  height: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
+  border: var(--space-1) solid var(--neutral-a8);
+  border-bottom-right-radius: var(--_grip-r);
+  transform: scale(var(--_gx), var(--_gy));
+  -webkit-mask: /* tails, cut flat at the cap centers (full length when capless) */
+    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
+      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
+    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
+      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
+    /* arc quadrant — the border's own curve shows through */
+    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
+      no-repeat,
+    /* round caps, centered on the flat cuts over solid border ink */
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
+  mask: /* tails, cut flat at the cap centers (full length when capless) */
+    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
+      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
+    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
+      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
+    /* arc quadrant — the border's own curve shows through */
+    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
+      no-repeat,
+    /* round caps, centered on the flat cuts over solid border ink */
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
+  position: absolute;
+}
+
+.x-overlay:where([data-resize="start-end"], [data-resize="end-end"]):before {
+  inset-inline-end: var(--space-1);
+}
+
+.x-overlay:where([data-resize="start-start"], [data-resize="end-start"]):before {
+  --_gx: -1;
+  inset-inline-start: var(--space-1);
+}
+
+.x-overlay:where([data-resize^="end-"]):before {
+  bottom: var(--space-1);
+}
+
+.x-overlay:where([data-resize^="start-"]):before {
+  top: var(--space-1);
+  --_gy: -1;
+}
+
+.x-overlay:where([data-resize="start-end"], [data-resize="end-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  --_gx: -1;
+}
+
+.x-overlay:where([data-resize="start-start"], [data-resize="end-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  --_gx: 1;
+}
+
+@supports (transition-behavior: allow-discrete) {
+  .x-overlay {
+    transition-property: top, left, translate, width, height, opacity, scale, display;
+    transition-duration: var(--overlay-duration);
+    transition-timing-function: var(--overlay-easing);
+    transition-behavior: allow-discrete;
+  }
+
+  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]) {
+    opacity: 0;
+    scale: .97;
+  }
+
+  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
+    opacity: 1;
+    scale: 1;
+  }
+
+  @starting-style {
+    .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
+      opacity: 0;
+      scale: .97;
+    }
+  }
+
+  .x-overlay:where([data-resize="block-start"]) {
+    --_ey: 100%;
+  }
+
+  .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
+    --_ey: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
+      --_ey: 100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="block-end"]) {
+    --_ey: -100%;
+  }
+
+  .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
+    --_ey: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
+      --_ey: -100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-start"]) {
+    --_ex: 100%;
+  }
+
+  .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
+      --_ex: 100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+    --_ex: -100%;
+  }
+
+  .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+      --_ex: -100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-end"]) {
+    --_ex: -100%;
+  }
+
+  .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
+      --_ex: -100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+    --_ex: 100%;
+  }
+
+  .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+      --_ex: 100%;
+    }
+  }
+
+  .x-overlay::backdrop {
+    opacity: 0;
+    transition-property: opacity, display;
+    transition-duration: var(--overlay-duration);
+    transition-timing-function: var(--overlay-easing);
+    transition-behavior: allow-discrete;
+  }
+
+  .x-overlay:where([open])::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    .x-overlay:where([open])::backdrop {
+      opacity: 0;
+    }
+  }
+
+  @supports (overlay: auto) {
+    .x-overlay {
+      transition-property: top, left, translate, width, height, opacity, scale, display, overlay;
+    }
+
+    .x-overlay::backdrop {
+      transition-property: opacity, display, overlay;
+    }
+  }
+}
+
+@supports selector(:has(*)) {
+  [data-overlay-deck] {
+    transform-origin: 50% 0;
+    transition-property: scale, translate, border-radius;
+    transition-duration: var(--overlay-duration, .3s);
+    transition-timing-function: var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
+  }
+
+  :root:has(.x-overlay[data-resize="block-start"][open]) [data-overlay-deck] {
+    scale: .96;
+    translate: 0 var(--space-2);
+    border-radius: var(--radius-4);
+    overflow: clip;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .x-overlay, .x-overlay::backdrop, [data-overlay-deck] {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .x-overlay:where([data-resize]):before {
+    background-color: buttontext;
+    border-color: buttontext;
+  }
+
+  .x-overlay:where([data-draggable]):after {
+    background-color: buttontext;
+  }
+}

package/dist/utilities/form-object.d.mts

@@ -0,0 +1,96 @@
+//#region src/utilities/form-object.d.ts
+/** Leaf value a single control contributes to the extracted object. */
+type FormObjectValue = string | number | boolean | File | null;
+/** A nested plain object built from a form's dot-notation field names. */
+type FormValues = {
+  [key: string]: unknown;
+};
+/** Named controls FormObject reads from and writes to. */
+type NamedControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+/**
+ * One control's contribution, as seen by transforms before the nested object
+ * is assembled. `value` is the raw extracted value; `checked` is present only
+ * for checkbox / radio controls.
+ */
+interface Field {
+  control: NamedControl;
+  /** Dot-notation path. Transforms may rewrite it to remap the output key. */
+  name: string;
+  /** `string | string[] | File | File[] | boolean` depending on control type. */
+  value: unknown;
+  /** Whether the control is checked — checkbox / radio only. */
+  checked?: boolean;
+}
+/**
+ * Per-field transform. Return the (possibly modified) field to keep it, or
+ * `null` to drop it from the output. Run in order during {@link FormObject.toObject}.
+ */
+type FormFieldTransform = (field: Field) => Field | null;
+interface FormObjectOptions {
+  /**
+   * Pipeline applied to each field during `toObject()`. Defaults to
+   * {@link defaultTransforms}. Providing this **replaces** the defaults —
+   * spread `...defaultTransforms` to extend them.
+   */
+  transforms?: FormFieldTransform[];
+}
+/** Drop disabled controls (mirrors native `FormData`). */
+declare const skipDisabled: FormFieldTransform;
+/** Drop submit / reset / button / image controls and `<button>` elements. */
+declare const skipButtons: FormFieldTransform;
+/** Drop fields whose control is an unchecked checkbox / radio. */
+declare const dropUnchecked: FormFieldTransform;
+/**
+ * Include unchecked **checkboxes** with the given `value` instead of dropping
+ * them. Unchecked **radios** are still dropped (only the selected radio is
+ * meaningful). Use this **in place of** {@link dropUnchecked}.
+ *
+ * @example transforms: [skipDisabled, skipButtons, uncheckedAs(false)]
+ */
+declare function uncheckedAs(value: unknown): FormFieldTransform;
+/** Drop fields whose value is empty: `""`, `null`, or an empty array. */
+declare const skipEmpty: FormFieldTransform;
+/** Default pipeline: skip disabled controls, buttons, and unchecked checkboxes/radios. */
+declare const defaultTransforms: FormFieldTransform[];
+/**
+ * Extracts an {@link HTMLFormElement} into a nested plain object (and writes one
+ * back) using dot-notation field names — `name="user.address.city"` nests into
+ * objects, numeric segments like `name="tags.0"` build arrays. A static snapshot:
+ * values are read/written at call time, no reactivity.
+ *
+ * Extraction runs each field through a composable {@link FormFieldTransform}
+ * pipeline ({@link defaultTransforms} by default), which decides inclusion and
+ * may rewrite names/values. Mirrors the ergonomics of the native `FormData`
+ * constructor.
+ *
+ * @example
+ * ```ts
+ * import { FormObject, defaultTransforms, uncheckedAs }
+ *   from "elements-kit/utilities/form-object";
+ *
+ * // <input name="user.name"> <input name="tags.0"> <input name="tags.1">
+ * const data = new FormObject(form).toObject();
+ * // => { user: { name: "..." }, tags: ["...", "..."] }
+ *
+ * // Replace the pipeline — include unchecked checkboxes as false
+ * new FormObject(form, {
+ *   transforms: [...defaultTransforms.slice(0, 2), uncheckedAs(false)],
+ * }).toObject();
+ *
+ * new FormObject(form).fromObject({ user: { name: "Wael" }, tags: ["a", "b"] });
+ * ```
+ */
+declare class FormObject {
+  #private;
+  constructor(form: HTMLFormElement, options?: FormObjectOptions);
+  /** Snapshot the form into a nested object built from dot-notation names. */
+  toObject(): FormValues;
+  /** Alias for {@link toObject} — lets `JSON.stringify(instance)` work. */
+  toJSON(): FormValues;
+  /** Write values from a nested object back onto the form's named controls. */
+  fromObject(data: FormValues): this;
+  /** Reset every named control to its empty/default state. */
+  clear(): this;
+}
+//#endregion
+export { Field, FormFieldTransform, FormObject, FormObjectOptions, FormObjectValue, FormValues, NamedControl, defaultTransforms, dropUnchecked, skipButtons, skipDisabled, skipEmpty, uncheckedAs };