@lostgradient/cinder 0.9.0 → 0.11.0

package/dist/components/schedule-builder/schedule-builder.css

@@ -0,0 +1,121 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@import '../chip/chip.css';
+@import '../input/input.css';
+@import '../number-input/number-input.css';
+@import '../segmented-control/segmented-control.css';
+@import '../select/select.css';
+@import '../time-field/time-field.css';
+
+@layer cinder.components {
+  /* ========================================
+   * SCHEDULE-BUILDER
+   * Recurrence-definition control: presets, cron, and interval authoring
+   * modes behind a tablist, with an always-visible summary line, next-fires
+   * preview, and timezone display slot.
+   * ======================================== */
+
+  .cinder-schedule-builder {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-4);
+  }
+
+  /* ----------------------------------------
+   * Mode panel
+   * ---------------------------------------- */
+
+  .cinder-schedule-builder__panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
+    padding-block-start: var(--cinder-space-1);
+  }
+
+  .cinder-schedule-builder__preset-kind {
+    margin-block-end: var(--cinder-space-1);
+  }
+
+  .cinder-schedule-builder__field-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-schedule-builder__field-row > * {
+    flex: 1 1 10rem;
+    min-inline-size: 8rem;
+  }
+
+  .cinder-schedule-builder__weekday-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-schedule-builder__cron-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+    gap: var(--cinder-space-3);
+  }
+
+  /* ----------------------------------------
+   * Always-visible informational blocks: summary, preview, timezone
+   * ---------------------------------------- */
+
+  .cinder-schedule-builder__summary,
+  .cinder-schedule-builder__preview,
+  .cinder-schedule-builder__timezone {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    margin: 0;
+    padding: var(--cinder-space-3);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-md);
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-schedule-builder__section-label {
+    display: block;
+    margin: 0;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    text-transform: uppercase;
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-schedule-builder__summary-text {
+    margin: 0;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+  }
+
+  .cinder-schedule-builder__preview-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-schedule-builder__preview-item {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .cinder-schedule-builder__timezone-value {
+    margin: 0;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    font-family: var(--cinder-font-mono);
+  }
+
+  .cinder-schedule-builder__empty {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+    font-style: italic;
+  }
+}

package/dist/components/schedule-builder/schedule-builder.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/schedule-builder/schedule-builder.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/schedule-builder/schedule-builder.schema.js

@@ -0,0 +1,141 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/schedule-builder/schedule-builder.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    value: {
+      anyOf: [
+        {
+          type: "object",
+          properties: {
+            mode: {
+              const: "cron"
+            },
+            expression: {
+              type: "string"
+            }
+          },
+          additionalProperties: false,
+          required: ["expression", "mode"]
+        },
+        {
+          type: "object",
+          properties: {
+            mode: {
+              const: "interval"
+            },
+            every: {
+              type: "integer",
+              minimum: 1
+            },
+            unit: {
+              enum: ["minutes", "hours", "days", "weeks"]
+            }
+          },
+          additionalProperties: false,
+          required: ["every", "mode", "unit"]
+        }
+      ],
+      description: "The current recurrence value (controlled). When omitted, the component\nstarts from a sensible default (`interval`, every 15 minutes)."
+    },
+    previewCount: {
+      type: "integer",
+      description: "How many upcoming fires to request from `computeNextFires`. Defaults to 5.",
+      minimum: 1
+    },
+    timezoneLabel: {
+      type: "string",
+      description: "Timezone label rendered in the always-visible timezone display slot."
+    },
+    label: {
+      type: "string",
+      description: 'Accessible label for the whole control. Defaults to "Schedule".'
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS classes applied to the root element."
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "computeNextFires",
+        reason: "function-or-snippet",
+        description: `Injected next-fires computation. The component passes the current value and
+the requested count and renders whatever fires the consumer returns. When
+omitted, the preview list is hidden (the component ships no date logic).`
+      },
+      {
+        name: "onchange",
+        reason: "function-or-snippet",
+        description: `Called whenever the user edits the recurrence. Receives the next lossless
+{@link ScheduleValue}. The consumer owns persistence and validation.`
+      },
+      {
+        name: "timezone",
+        reason: "function-or-snippet",
+        description: "Custom content for the timezone display slot. Takes precedence over\n`timezoneLabel` when both are supplied."
+      }
+    ]
+  }
+};
+var schedule_builder_schema_default = schema;
+export {
+  schedule_builder_schema_default as default
+};
+
+//# debugId=AA80EA75536D901B64756E2164756E21

package/dist/components/schedule-builder/schedule-builder.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @cinder
+ * @category form
+ * @status beta
+ * @purpose Recurrence-definition control that authors a cron or fixed-interval schedule via presets, raw cron fields, or an interval, alongside an always-visible summary, next-fires preview, and timezone slot.
+ * @tag schedule
+ * @tag recurrence
+ * @tag cron
+ * @tag form
+ * @useWhen Letting a user define when a job or notification recurs, supplying your own date/cron library to compute upcoming fire times.
+ * @useWhen You want a friendly presets UI (every N, daily, weekly, monthly) that still round-trips to a portable cron or interval value.
+ * @avoidWhen You need overlap policy, jitter, or backfill controls — those belong to the consumer's surrounding form. | invocation-rule-builder
+ * @avoidWhen You only need to pick a single point in time, not a recurrence — use date-picker instead. | date-picker
+ * @related date-picker, segmented-control, input, time-field
+ * @a11yPattern WAI-ARIA Tabs
+ * @a11yNote The three authoring modes (presets, cron, interval) are a tablist; each cron field reports validity via aria-invalid and an associated hint/error.
+ */
+export type { ScheduleAuthoringMode, ScheduleBuilderProps, ScheduleFire, ScheduleIntervalUnit, ScheduleValue, } from './schedule-builder.types.ts';
+import type { ScheduleBuilderProps } from './schedule-builder.types.ts';
+declare const ScheduleBuilder: import("svelte").Component<ScheduleBuilderProps, {}, "">;
+type ScheduleBuilder = ReturnType<typeof ScheduleBuilder>;
+export default ScheduleBuilder;

package/dist/components/schedule-builder/schedule-builder.types.d.ts

@@ -0,0 +1,130 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * The unit for an interval recurrence.
+ */
+export type ScheduleIntervalUnit = 'minutes' | 'hours' | 'days' | 'weeks';
+/**
+ * The emitted, lossless recurrence value. There are only ever TWO value
+ * variants — `cron` and `interval` — even though the UI offers a third
+ * "presets" authoring mode. Presets are sugar that lower to one of these two
+ * (e.g. "every 15 minutes" → `interval`; "daily at 09:00" → `cron`); there is
+ * no `mode: 'preset'` in the value a consumer receives.
+ */
+export type ScheduleValue = {
+    /** Discriminator: a 5-field cron recurrence. */
+    mode: 'cron';
+    /** The 5-field cron expression, space-separated (minute hour day-of-month month day-of-week). */
+    expression: string;
+} | {
+    /** Discriminator: a fixed-interval recurrence. */
+    mode: 'interval';
+    /** How many `unit`s between fires. A positive integer. */
+    every: number;
+    /** The interval unit. */
+    unit: ScheduleIntervalUnit;
+};
+/**
+ * The authoring mode surfaced in the UI's SegmentedControl. Distinct from
+ * {@link ScheduleValue}'s `mode` discriminator: `presets` is an authoring
+ * convenience that emits a `cron` or `interval` value.
+ */
+export type ScheduleAuthoringMode = 'presets' | 'cron' | 'interval';
+/**
+ * A single computed upcoming fire, as returned by the injected
+ * {@link ScheduleBuilderProps.computeNextFires} callback. The component never
+ * computes or formats times itself (it ships no date/cron dependency): the
+ * consumer returns already-formatted display strings.
+ */
+export type ScheduleFire = {
+    /** Stable identity for the keyed preview list. */
+    id: string;
+    /** Human-readable label for this fire, e.g. "Mon Jun 1, 09:00". */
+    label: string;
+};
+/**
+ * Props for the ScheduleBuilder component.
+ *
+ * ScheduleBuilder is a presentational recurrence-definition control. It owns
+ * no scheduling execution, persistence, or date math. It is date-library-free:
+ * the "next N fires" preview is produced by the injected `computeNextFires`
+ * callback, and degrades gracefully (the preview is hidden) when the callback
+ * is absent. Scope is recurrence only — overlap policy, jitter, and backfill
+ * belong to the consumer's surrounding form.
+ */
+export type ScheduleBuilderProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children' | 'onchange'> & {
+    /**
+     * The current recurrence value (controlled). Pass the value returned from
+     * `onchange` back in to commit an edit. When omitted, the component starts
+     * from a sensible default (`interval`, every 15 minutes).
+     */
+    value?: ScheduleValue | undefined;
+    /**
+     * Called whenever the user edits the recurrence. Receives the next lossless
+     * {@link ScheduleValue}. The consumer owns persistence and validation.
+     */
+    onchange?: ((value: ScheduleValue) => void) | undefined;
+    /**
+     * Injected next-fires computation. The component passes the current value and
+     * the requested count and renders whatever fires the consumer returns. When
+     * omitted, the preview list is hidden (the component ships no date logic).
+     */
+    computeNextFires?: ((value: ScheduleValue, count: number) => ScheduleFire[]) | undefined;
+    /**
+     * How many upcoming fires to request from `computeNextFires`. Defaults to 5.
+     */
+    previewCount?: number | undefined;
+    /**
+     * Timezone label rendered in the always-visible timezone display slot, e.g.
+     * "America/New_York" or "UTC". Purely presentational — the component does not
+     * interpret it. When omitted, provide the `timezone` snippet instead; if
+     * neither is supplied the slot shows a "Not set" placeholder (the slot itself
+     * is always rendered).
+     */
+    timezoneLabel?: string | undefined;
+    /**
+     * Custom content for the timezone display slot. Takes precedence over
+     * `timezoneLabel` when both are supplied.
+     */
+    timezone?: Snippet | undefined;
+    /** Accessible label for the whole control. Defaults to "Schedule". */
+    label?: string | undefined;
+    /** Additional CSS classes applied to the root element. */
+    class?: string | undefined;
+};
+/**
+ * Schema-facing mirror of {@link ScheduleValue}.
+ * @schemaObject
+ */
+export type ScheduleValueSchema = {
+    mode: 'cron';
+    expression: string;
+} | {
+    mode: 'interval';
+    every: number;
+    unit: ScheduleIntervalUnit;
+};
+/**
+ * Cinder-specific schema surface for ScheduleBuilder.
+ *
+ * The `onchange`, `computeNextFires`, and `timezone` props are documented but
+ * unsupported by JSON Schema because functions and snippets cannot be modeled.
+ */
+export type ScheduleBuilderSchemaProps = {
+    /**
+     * The current recurrence value (controlled). When omitted, the component
+     * starts from a sensible default (`interval`, every 15 minutes).
+     * @schemaObject
+     */
+    value?: ScheduleValueSchema | undefined;
+    /**
+     * How many upcoming fires to request from `computeNextFires`. Defaults to 5.
+     */
+    previewCount?: number | undefined;
+    /** Timezone label rendered in the always-visible timezone display slot. */
+    timezoneLabel?: string | undefined;
+    /** Accessible label for the whole control. Defaults to "Schedule". */
+    label?: string | undefined;
+    /** Additional CSS classes applied to the root element. */
+    class?: string | undefined;
+};

package/dist/components/schedule-builder/schedule-builder.utilities.d.ts

@@ -0,0 +1,78 @@
+import type { ScheduleIntervalUnit, ScheduleValue } from './schedule-builder.types.ts';
+/** The interval units offered in the interval mode selector, in order. */
+export declare const INTERVAL_UNITS: readonly ScheduleIntervalUnit[];
+/** Weekday chips for the weekly preset. `value` matches cron day-of-week (0 = Sunday). */
+export declare const WEEKDAYS: readonly {
+    value: number;
+    short: string;
+    long: string;
+}[];
+/** The five cron fields, in order, with their valid numeric ranges and hints. */
+export declare const CRON_FIELDS: readonly {
+    name: string;
+    min: number;
+    max: number;
+    hint: string;
+}[];
+/** The default value used when the consumer passes none. */
+export declare function defaultScheduleValue(): ScheduleValue;
+/**
+ * Validate a single cron field value against its field range. Accepts a
+ * wildcard, a step, a range, a comma list, or a plain number. Returns an error
+ * message when invalid, or `undefined` when the field is acceptable.
+ */
+export declare function validateCronField(rawValue: string, fieldIndex: number): string | undefined;
+/** Whether all five cron fields are individually valid. */
+export declare function cronFieldsValid(fields: string[]): boolean;
+/** Join five cron fields into a normalized single-space expression. */
+export declare function joinCron(fields: string[]): string;
+/** Split a cron expression into exactly five fields, padding with `*` if short. */
+export declare function splitCron(expression: string): [string, string, string, string, string];
+/** Clamp/parse a `HH:MM` time string into `{ hour, minute }`, defaulting to 00:00. */
+export declare function parseTime(time: string): {
+    hour: number;
+    minute: number;
+};
+/** "every N minutes/hours" → an interval value. */
+export declare function lowerEveryN(every: number, unit: ScheduleIntervalUnit): ScheduleValue;
+/** "daily at HH:MM" → a cron value. */
+export declare function lowerDailyAt(time: string): ScheduleValue;
+/** "weekly on [days] at HH:MM" → a cron value. Empty days falls back to every day. */
+export declare function lowerWeeklyAt(days: number[], time: string): ScheduleValue;
+/** "monthly on day N at HH:MM" → a cron value. */
+export declare function lowerMonthlyOnDay(day: number, time: string): ScheduleValue;
+/**
+ * Convert any value into cron fields, so switching into cron mode always has
+ * something sensible to show. Only `minutes` and `hours` intervals whose
+ * `every` evenly divides their field's cycle (60 for minutes, 24 for hours)
+ * are losslessly representable as a cron step wildcard — see
+ * `isEvenDivisorStep`. A non-dividing minute/hour interval (e.g. every 45
+ * minutes or every 5 hours), and `days`/`weeks` intervals (a step wildcard on
+ * the day-of-month field resets at the start of every month rather than
+ * repeating every N days, and cron has no field for "every N weeks" at all),
+ * would silently change the schedule's actual cadence the moment a user
+ * merely LOOKED at the Cron tab if lowered to a step wildcard. Seed an honest
+ * neutral default (daily at midnight) instead for all of those — see
+ * `valueToInterval` below, which mirrors this by only recovering a step that
+ * actually divides evenly.
+ */
+export declare function valueToCronFields(value: ScheduleValue): string[];
+/**
+ * Recover an interval `{ every, unit }` from a value when representable, so
+ * switching into interval mode is lossless for simple step patterns. Only a
+ * `minutes` or `hours` step that evenly divides its field's cycle (60 or 24
+ * — see `isEvenDivisorStep`) is recovered: a non-dividing minute/hour step
+ * (e.g. a 45-minute step wildcard) is not a true fixed-gap interval, and a
+ * day-of-month step
+ * wildcard is deliberately NOT read back as `{ unit: 'days' }` at all —
+ * cron's day-of-month step resets every month, so it is not equivalent to
+ * "every N days" and `valueToCronFields` never produces one for an interval
+ * value. Returns `undefined` when the cron expression is not a pure,
+ * evenly-dividing minute/hour interval.
+ */
+export declare function valueToInterval(value: ScheduleValue): {
+    every: number;
+    unit: ScheduleIntervalUnit;
+} | undefined;
+/** A concise, human-readable description of a recurrence value. */
+export declare function describeValue(value: ScheduleValue): string;

package/dist/components/schedule-builder/schedule-builder.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/schedule-builder/schedule-builder.variables.js

@@ -0,0 +1,61 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/schedule-builder/schedule-builder.variables.ts
+var variables = [];
+var schedule_builder_variables_default = variables;
+export {
+  schedule_builder_variables_default as default
+};
+
+//# debugId=638BB268C8E04A7364756E2164756E21

package/dist/components/tag-input/index.js

@@ -57,7 +57,7 @@ import"@lostgradient/cinder/tag-input/styles";
 // src/components/tag-input/tag-input.svelte
 import"svelte/internal/disclose-version";
 import * as $2 from "svelte/internal/client";
-import { tick, untrack } from "svelte";
+import { flushSync, tick, untrack } from "svelte";
 
 // ../../node_modules/esm-env/true.js
 var true_default = true;
@@ -267,6 +267,7 @@ var rest_excludes = new Set([
   "max",
   "validate",
   "allowDuplicates",
+  "commitOnSubmit",
   "disabled",
   "readonly",
   "name",
@@ -290,7 +291,7 @@ var root_4 = $2.from_html(`<div><div class="cinder-tag-input__control"><ul class
 function Tag_input($$anchor, $$props) {
   const generatedId = $2.props_id();
   $2.push($$props, true);
-  let delimiter = $2.prop($$props, "delimiter", 3, ","), allowDuplicates = $2.prop($$props, "allowDuplicates", 3, false), readonly = $2.prop($$props, "readonly", 3, false), rest = $2.rest_props($$props, rest_excludes);
+  let delimiter = $2.prop($$props, "delimiter", 3, ","), allowDuplicates = $2.prop($$props, "allowDuplicates", 3, false), commitOnSubmit = $2.prop($$props, "commitOnSubmit", 3, false), readonly = $2.prop($$props, "readonly", 3, false), rest = $2.rest_props($$props, rest_excludes);
   const initialDefaultTags = untrack(() => [...$$props.defaultValue ?? []]);
   const context = getFormFieldContext();
   let rootElement = $2.state(null);
@@ -345,6 +346,19 @@ function Tag_input($$anchor, $$props) {
     const form = $2.get(inputElement).closest("form");
     if (!form)
       return;
+    const onSubmit = (event2) => {
+      if (!commitOnSubmit() || $2.get(field).disabled || $2.get(resolvedReadonly))
+        return;
+      if (!$2.get(draftValue).trim())
+        return;
+      let committed = false;
+      flushSync(() => {
+        committed = commitDraft();
+      });
+      if (!committed) {
+        event2.preventDefault();
+      }
+    };
     const onReset = () => {
       $2.set(draftValue, "");
       $2.set(inlineError, null);
@@ -353,8 +367,12 @@ function Tag_input($$anchor, $$props) {
         $2.set(uncontrolledTags, [...initialDefaultTags], true);
       }
     };
+    form.addEventListener("submit", onSubmit, true);
     form.addEventListener("reset", onReset);
-    return () => form.removeEventListener("reset", onReset);
+    return () => {
+      form.removeEventListener("submit", onSubmit, true);
+      form.removeEventListener("reset", onReset);
+    };
   });
   function getChipElements() {
     return Array.from($2.get(rootElement)?.querySelectorAll(".cinder-tag-input__remove") ?? []);
@@ -622,4 +640,4 @@ export {
   Tag_input as TagInput
 };
 
-//# debugId=12AA77072E10848564756E2164756E21
+//# debugId=5AB42CD56739898464756E2164756E21

package/dist/components/tag-input/tag-input.schema.js

@@ -82,6 +82,10 @@ var schema = {
       type: "boolean",
       description: "Allow the same trimmed tag value to appear more than once."
     },
+    commitOnSubmit: {
+      type: "boolean",
+      description: "Commit a non-empty pending draft before the parent form submits."
+    },
     autocapitalize: {
       enum: ["off", "on", "characters", "none", "sentences", "words", null],
       description: "Autocapitalization hint forwarded to the visible text input."
@@ -219,4 +223,4 @@ export {
   tag_input_schema_default as default
 };
 
-//# debugId=D2D352F30D877CF864756E2164756E21
+//# debugId=9E1D0F308A91268B64756E2164756E21

package/dist/components/tag-input/tag-input.types.d.ts

@@ -15,6 +15,8 @@ export type TagInputProps = SupportedInputAttributes & {
     validate?: (tag: string) => boolean | string;
     /** Allow the same trimmed tag value to appear more than once. */
     allowDuplicates?: boolean;
+    /** Commit a non-empty pending draft before the parent form submits. */
+    commitOnSubmit?: boolean;
     /** Disable the input and chip removal affordances. */
     disabled?: boolean;
     /** Render the pending-tag input as read-only and make committed tags non-removable. */
@@ -39,6 +41,8 @@ export interface TagInputSchemaProps {
     delimiter?: string | RegExp;
     /** Allow the same trimmed tag value to appear more than once. */
     allowDuplicates?: boolean;
+    /** Commit a non-empty pending draft before the parent form submits. */
+    commitOnSubmit?: boolean;
     /** Autocomplete hint forwarded to the visible text input. */
     autocomplete?: HTMLInputAttributes['autocomplete'];
     /** Autocapitalization hint forwarded to the visible text input. */