@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/time-field/index.js

@@ -0,0 +1,291 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/time-field/time-field.svelte
+import * as $ from "svelte/internal/server";
+import { untrack } from "svelte";
+
+// src/_internal/field-control.ts
+function describeId(fieldId, hasDescription) {
+  return hasDescription ? `${fieldId}-description` : undefined;
+}
+function errorId(fieldId, hasError) {
+  return hasError ? `${fieldId}-error` : undefined;
+}
+function composeDescribedBy(...ids) {
+  const filtered = ids.flatMap((id) => typeof id === "string" ? id.trim().split(/\s+/).filter(Boolean) : []);
+  const unique = Array.from(new Set(filtered));
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+function ariaInvalid(hasError) {
+  return hasError ? "true" : undefined;
+}
+function resolveFieldControl(input) {
+  const resolvedId = input.id ?? input.context?.controlId ?? input.generatedId;
+  const defaultDescriptionId = describeId(resolvedId, input.hasDescription ?? false);
+  const defaultErrorId = errorId(resolvedId, input.hasError ?? false);
+  const ownDescriptionId = defaultDescriptionId && defaultDescriptionId === input.context?.descriptionId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-description` : defaultDescriptionId;
+  const ownErrorId = defaultErrorId && defaultErrorId === input.context?.errorId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-error` : defaultErrorId;
+  const descriptionId = ownDescriptionId ?? input.context?.descriptionId;
+  const resolvedErrorId = ownErrorId ?? input.context?.errorId;
+  const explicitInvalid = ariaInvalid(input.hasError ?? false);
+  const consumerInvalid = input.consumerInvalid === true ? "true" : input.consumerInvalid === false ? undefined : input.consumerInvalid ?? undefined;
+  return {
+    id: resolvedId,
+    ownDescriptionId,
+    ownErrorId,
+    descriptionId,
+    errorId: resolvedErrorId,
+    describedBy: composeDescribedBy(descriptionId, ...input.additionalDescribedBy ?? [], resolvedErrorId, input.context?.describedBy, input.consumerDescribedBy),
+    ariaInvalid: explicitInvalid ?? input.context?.invalid ?? consumerInvalid,
+    required: input.required ?? input.context?.required ?? false,
+    disabled: input.disabled ?? input.context?.disabled ?? false
+  };
+}
+
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
+// src/_internal/time-parts.ts
+var TIME_PATTERN = /^(?<hours>\d{2}):(?<minutes>\d{2})(?::(?<seconds>\d{2}))?$/;
+function parseTimeString(value) {
+  const trimmedValue = value.trim();
+  if (trimmedValue.length === 0)
+    return null;
+  const match = TIME_PATTERN.exec(trimmedValue);
+  if (!match?.groups)
+    return null;
+  const hours = Number(match.groups["hours"]);
+  const minutes = Number(match.groups["minutes"]);
+  const seconds = Number(match.groups["seconds"] ?? "0");
+  if (!Number.isInteger(hours) || hours < 0 || hours > 23)
+    return null;
+  if (!Number.isInteger(minutes) || minutes < 0 || minutes > 59)
+    return null;
+  if (!Number.isInteger(seconds) || seconds < 0 || seconds > 59)
+    return null;
+  return { hours, minutes, seconds };
+}
+function serializeTimeParts(parts, includeSeconds) {
+  const hours = String(parts.hours).padStart(2, "0");
+  const minutes = String(parts.minutes).padStart(2, "0");
+  const seconds = String(parts.seconds).padStart(2, "0");
+  return includeSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;
+}
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/time-field/time-field.svelte
+function Time_field($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $.props_id($$renderer2);
+    let {
+      id,
+      value = undefined,
+      defaultValue = "",
+      granularity = "minute",
+      timezones,
+      timezone = undefined,
+      timezoneName,
+      label,
+      description,
+      error,
+      disabled = false,
+      readonly = false,
+      required = false,
+      name,
+      class: className,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": consumerDescribedBy,
+      "aria-invalid": consumerAriaInvalid,
+      onchange,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const formField = getFormFieldContext();
+    const includeSeconds = $.derived(() => granularity === "second");
+    const inputStep = $.derived(() => includeSeconds() ? 1 : 60);
+    let inputMirrorValue = undefined;
+    let inputMirrorSourceValue = undefined;
+    const submittedValue = $.derived(() => canonicalTimeValue(inputMirrorValue ?? value));
+    let resetTimezoneBaseline = undefined;
+    let skipTimezoneBaselineUpdate = false;
+    untrack(() => {
+      if (value === undefined)
+        value = canonicalTimeValue(defaultValue);
+      if (timezone === undefined && timezones && timezones.length > 0)
+        timezone = timezones[0];
+      resetTimezoneBaseline = timezone;
+    });
+    const field = $.derived(() => resolveFieldControl({
+      id: formField?.controlId ?? id,
+      generatedId,
+      context: formField,
+      localIdNamespace: "time-field",
+      hasDescription: !!description,
+      hasError: !!error,
+      consumerDescribedBy,
+      consumerInvalid: consumerAriaInvalid,
+      required: required ? true : undefined,
+      disabled: disabled ? true : undefined
+    }));
+    const inputId = $.derived(() => field().id);
+    const labelId = $.derived(() => label ? `${inputId()}-label` : formField?.labelId);
+    const timezoneLabelId = $.derived(() => `${inputId()}-timezone-label`);
+    const descriptionId = $.derived(() => field().ownDescriptionId);
+    const errorId2 = $.derived(() => field().ownErrorId);
+    const describedBy = $.derived(() => field().describedBy);
+    const invalid = $.derived(() => field().ariaInvalid);
+    const resolvedDisabled = $.derived(() => field().disabled);
+    const resolvedRequired = $.derived(() => field().required);
+    const inputAriaLabel = $.derived(() => label || formField?.labelId ? undefined : normalizeAriaText(ariaLabel));
+    const inputAriaLabelledBy = $.derived(() => label ? undefined : normalizeAriaText(ariaLabelledBy) ?? formField?.labelId);
+    const timezoneAriaLabelledBy = $.derived(() => labelId() ? `${labelId()} ${timezoneLabelId()}` : inputAriaLabelledBy() ? `${inputAriaLabelledBy()} ${timezoneLabelId()}` : undefined);
+    const timezoneAriaLabel = $.derived(() => timezoneAriaLabelledBy() ? undefined : inputAriaLabel() ? `${inputAriaLabel()} timezone` : "Timezone");
+    const resolvedTimezoneName = $.derived(() => timezone !== undefined ? timezoneName ?? (name ? `${name}-timezone` : undefined) : undefined);
+    function emit(nextValue, nextTimezone = timezone) {
+      onchange?.({ value: nextValue, timezone: nextTimezone });
+    }
+    function normalizeAriaText(text) {
+      return typeof text === "string" && text.trim().length > 0 ? text : undefined;
+    }
+    function resetTimezoneFor(options) {
+      if (!options || options.length === 0)
+        return resetTimezoneBaseline;
+      return resetTimezoneBaseline && options.includes(resetTimezoneBaseline) ? resetTimezoneBaseline : options[0];
+    }
+    function canonicalTimeValue(nextValue) {
+      if (!nextValue)
+        return "";
+      const parsed = parseTimeString(nextValue);
+      return parsed ? serializeTimeParts(parsed, includeSeconds()) : "";
+    }
+    function handleInputChange(event) {
+      if (resolvedDisabled() || readonly)
+        return;
+      const target = event.currentTarget;
+      const nextValue = canonicalTimeValue(target.value);
+      inputMirrorValue = undefined;
+      inputMirrorSourceValue = undefined;
+      value = nextValue;
+      emit(nextValue);
+    }
+    function handleInput(event) {
+      if (resolvedDisabled() || readonly)
+        return;
+      inputMirrorSourceValue = value;
+      inputMirrorValue = event.currentTarget.value;
+    }
+    function handleTimezoneChange(event) {
+      if (resolvedDisabled() || readonly)
+        return;
+      const target = event.currentTarget;
+      skipTimezoneBaselineUpdate = true;
+      timezone = target.value;
+      const nextValue = canonicalTimeValue(value);
+      inputMirrorValue = undefined;
+      inputMirrorSourceValue = undefined;
+      value = nextValue;
+      emit(nextValue, timezone);
+    }
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-time-field", className))
+    })}>`);
+    if (label) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<label${$.attr("id", labelId())} class="cinder-time-field__label"${$.attr("for", inputId())}>${$.escape(label)}</label>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-time-field__controls"><input${$.attr("id", inputId())} class="cinder-time-field__input" type="time"${$.attr("step", inputStep())}${$.attr("value", inputMirrorValue ?? value ?? "")}${$.attr("disabled", resolvedDisabled(), true)}${$.attr("readonly", readonly, true)}${$.attr("required", resolvedRequired(), true)}${$.attr("aria-label", inputAriaLabel())}${$.attr("aria-labelledby", inputAriaLabelledBy())}${$.attr("aria-describedby", describedBy())}${$.attr("aria-invalid", invalid())}/> `);
+    if (name) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<input type="hidden"${$.attr("name", name)}${$.attr("value", submittedValue())}${$.attr("disabled", resolvedDisabled(), true)}/>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (timezones && timezones.length > 0) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span${$.attr("id", timezoneLabelId())} class="cinder-sr-only">timezone</span> `);
+      $$renderer2.select({
+        class: "cinder-time-field__timezone",
+        "aria-label": timezoneAriaLabel(),
+        "aria-labelledby": timezoneAriaLabelledBy(),
+        "aria-describedby": describedBy(),
+        value: timezone,
+        disabled: resolvedDisabled() || readonly,
+        onchange: handleTimezoneChange
+      }, ($$renderer3) => {
+        $$renderer3.push(`<!--[-->`);
+        const each_array = $.ensure_array_like(timezones);
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let option = each_array[$$index];
+          $$renderer3.option({ value: option }, ($$renderer4) => {
+            $$renderer4.push(`${$.escape(option)}`);
+          });
+        }
+        $$renderer3.push(`<!--]-->`);
+      });
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (resolvedTimezoneName()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<input type="hidden"${$.attr("name", resolvedTimezoneName())}${$.attr("value", timezone)}${$.attr("disabled", resolvedDisabled(), true)}/>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-time-field__description">${$.escape(description)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (error) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", errorId2())} class="cinder-time-field__error" aria-live="polite">${$.escape(error)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+    $.bind_props($$props, { value, timezone });
+  });
+}
+
+// src/components/time-field/index.ts
+var time_field_default = Time_field;
+export {
+  time_field_default as default,
+  Time_field as TimeField
+};
+
+//# debugId=1EA2F59E3317F3BF64756E2164756E21

package/dist/server/components/time-field/time-field.schema.js

@@ -0,0 +1,88 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/time-field/time-field.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    id: {
+      type: "string"
+    },
+    value: {
+      type: "string"
+    },
+    defaultValue: {
+      type: "string"
+    },
+    granularity: {
+      enum: ["minute", "second"]
+    },
+    timezones: {
+      type: "array",
+      items: {
+        type: "string"
+      }
+    },
+    timezone: {
+      type: "string"
+    },
+    timezoneName: {
+      type: "string"
+    },
+    label: {
+      type: "string"
+    },
+    description: {
+      type: "string"
+    },
+    error: {
+      type: "string"
+    },
+    disabled: {
+      type: "boolean"
+    },
+    readonly: {
+      type: "boolean"
+    },
+    required: {
+      type: "boolean"
+    },
+    name: {
+      type: "string"
+    },
+    class: {
+      type: "string"
+    },
+    "aria-label": {
+      type: "string"
+    },
+    "aria-labelledby": {
+      type: "string"
+    },
+    "aria-describedby": {
+      type: "string"
+    },
+    "aria-invalid": {
+      enum: [false, true, "true", "false"]
+    }
+  },
+  additionalProperties: false,
+  required: ["id"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onchange",
+        reason: "function-or-snippet",
+        description: "Called when the user commits a time or timezone change."
+      }
+    ]
+  }
+};
+var time_field_schema_default = schema;
+export {
+  time_field_schema_default as default
+};
+
+//# debugId=0ADCFC1DCB0436B564756E2164756E21

package/dist/server/components/time-field/time-field.variables.js

@@ -0,0 +1,12 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/time-field/time-field.variables.ts
+var variables = [];
+var time_field_variables_default = variables;
+export {
+  time_field_variables_default as default
+};
+
+//# debugId=A00D58285004C9CD64756E2164756E21

package/dist/server/components/toggle/index.js

@@ -5,39 +5,72 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 // src/components/toggle/toggle.svelte
 import * as $ from "svelte/internal/server";
 
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/toggle/toggle.svelte
 function Toggle($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
       id,
       checked = false,
+      onValueChange,
       label,
-      disabled = false,
+      disabled,
       hideLabel = false,
       name,
       value = "on",
       form,
       class: customClassName
     } = $$props;
+    const context = getFormFieldContext();
+    const resolvedDisabled = $.derived(() => disabled ?? context?.disabled ?? false);
     const labelId = $.derived(() => `${id}-label`);
     function toggle() {
-      if (!disabled) {
-        checked = !checked;
+      if (!resolvedDisabled()) {
+        commitValue(!checked, onValueChange, (next) => {
+          checked = next;
+        });
       }
     }
-    $$renderer2.push(`<span class="cinder-toggle-field"><button${$.attr("id", id)} type="button" role="switch"${$.attr("aria-checked", checked)}${$.attr("aria-labelledby", labelId())}${$.attr("disabled", disabled, true)}${$.attr_class($.clsx(classNames("cinder-toggle", customClassName)))}${$.attr("data-cinder-checked", checked ? "" : undefined)}><span aria-hidden="true" class="cinder-toggle__thumb"></span></button> `);
+    $$renderer2.push(`<span class="cinder-toggle-field"><button${$.attr("id", id)} type="button" role="switch"${$.attr("aria-checked", checked)}${$.attr("aria-labelledby", labelId())}${$.attr("disabled", resolvedDisabled(), true)}${$.attr_class($.clsx(classNames("cinder-toggle", customClassName)))}${$.attr("data-cinder-checked", checked ? "" : undefined)}><span aria-hidden="true" class="cinder-toggle__thumb"></span></button> `);
     if (name) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<input type="checkbox" hidden=""${$.attr("name", name)}${$.attr("value", value)}${$.attr("form", form)}${$.attr("disabled", disabled, true)}${$.attr("checked", checked, true)}/>`);
+      $$renderer2.push(`<input type="checkbox" hidden=""${$.attr("name", name)}${$.attr("value", value)}${$.attr("form", form)}${$.attr("disabled", resolvedDisabled(), true)}${$.attr("checked", checked, true)}/>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <span${$.attr("id", labelId())} class="cinder-toggle-field__label" role="presentation"${$.attr("data-hidden", hideLabel || undefined)}${$.attr("data-disabled", disabled || undefined)}>${$.escape(label)}</span></span>`);
+    $$renderer2.push(`<!--]--> <span${$.attr("id", labelId())} class="cinder-toggle-field__label" role="presentation"${$.attr("data-hidden", hideLabel || undefined)}${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)}</span></span>`);
     $.bind_props($$props, { checked });
   });
 }
@@ -49,4 +82,4 @@ export {
   Toggle
 };
 
-//# debugId=046F345B6763EA7564756E2164756E21
+//# debugId=A367D8E9999EF78564756E2164756E21

package/dist/server/components/toggle/toggle.schema.js

@@ -45,11 +45,20 @@ var schema = {
     }
   },
   additionalProperties: false,
-  required: ["id", "label"]
+  required: ["id", "label"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onValueChange",
+        reason: "function-or-snippet",
+        description: "Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it."
+      }
+    ]
+  }
 };
 var toggle_schema_default = schema;
 export {
   toggle_schema_default as default
 };
 
-//# debugId=6CB2CF9BA0BACCB964756E2164756E21
+//# debugId=7B1D8C847EE5B72F64756E2164756E21

package/dist/server/components/transfer-list/index.css

@@ -44,6 +44,14 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-transfer-list__list:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(-1 * var(--cinder-ring-width));
+      box-shadow: none;
+    }
+  }
+
   .cinder-transfer-list__option {
     padding: var(--cinder-space-2) var(--cinder-space-3);
     border-radius: var(--cinder-radius-sm);
@@ -103,6 +111,14 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-transfer-list__control:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   @container cinder-transfer-list (width <= 42rem) {
     .cinder-transfer-list__layout {
       grid-template-columns: minmax(0, 1fr);