@lostgradient/cinder 0.8.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/tab/index.js

@@ -114,7 +114,10 @@ function Tab($$anchor, $$props) {
   let disabled = $.prop($$props, "disabled", 3, false);
   const tabs = getTabsContext();
   const tabId = $.derived(() => $$props.id ?? `${tabs.baseId}-tab-${$$props.value}`);
-  const panelId = $.derived(() => `${tabs.baseId}-panel-${$$props.value}`);
+  const panelId = $.derived(() => {
+    const controlsId = $$props.controls?.trim();
+    return controlsId ? controlsId : `${tabs.baseId}-panel-${$$props.value}`;
+  });
   const isActive = $.derived(() => tabs.isActive($$props.value));
   const isFocusable = $.derived(() => tabs.isFocusable($$props.value));
   let buttonElement = $.state(undefined);
@@ -194,4 +197,4 @@ export {
   Tab
 };
 
-//# debugId=DBA8AA18E9131ED964756E2164756E21
+//# debugId=4B2CDEBAC98F406464756E2164756E21

package/dist/components/tab/tab.schema.js

@@ -58,15 +58,19 @@ var schema = {
   properties: {
     value: {
       type: "string",
-      description: "Identifier — matches the value of the corresponding TabPanel."
+      description: "Stable identifier used for tab selection; matches TabPanel in the default pattern."
     },
     id: {
       type: "string",
       description: "Optional explicit id override; auto-generated otherwise for ARIA wiring."
     },
+    controls: {
+      type: "string",
+      description: "Optional non-empty `aria-controls` target for caller-owned panels. Empty or\nwhitespace-only strings are treated as omitted. By default, Cinder points\nat the matching TabPanel id (`${baseId}-panel-${value}`)."
+    },
     disabled: {
       type: "boolean",
-      description: "Disables this single tab. The panel content is hidden but its DOM stays."
+      description: "Disables this single tab and removes it from keyboard activation."
     },
     class: {
       type: "string",
@@ -96,4 +100,4 @@ export {
   tab_schema_default as default
 };
 
-//# debugId=70EF8B46C259F16164756E2164756E21
+//# debugId=6054ACE83602A98064756E2164756E21

package/dist/components/tab/tab.svelte.d.ts

@@ -2,11 +2,12 @@
  * @cinder
  * @category navigation
  * @status stable
- * @purpose Single selectable tab trigger inside a tabs composite that registers with the parent context and controls a matching tab-panel.
+ * @purpose Single selectable tab trigger inside a tabs composite that registers with the parent context and controls a matching tab-panel or caller-owned panel id.
  * @tag navigation
  * @tag tabs
  * @useWhen Declaring one tab heading inside a tabs ancestor with a stable value identifier.
  * @useWhen Pairing one-to-one with a tab-panel that shares the same value to wire aria-controls.
+ * @useWhen Pointing multiple tab triggers at a caller-owned panel with the controls prop.
  * @avoidWhen Used outside a tabs ancestor — the component throws at construction.
  * @avoidWhen Rendering a generic action button — use button instead.
  * @related tabs, tab-list, tab-panel

package/dist/components/tab/tab.types.d.ts

@@ -1,10 +1,16 @@
 import type { Snippet } from 'svelte';
 export type TabProps = {
-    /** Identifier — matches the value of the corresponding TabPanel. */
+    /** Stable identifier used for tab selection; matches TabPanel in the default pattern. */
     value: string;
     /** Optional explicit id override; auto-generated otherwise for ARIA wiring. */
     id?: string;
-    /** Disables this single tab. The panel content is hidden but its DOM stays. */
+    /**
+     * Optional non-empty `aria-controls` target for caller-owned panels. Empty or
+     * whitespace-only strings are treated as omitted. By default, Cinder points
+     * at the matching TabPanel id (`${baseId}-panel-${value}`).
+     */
+    controls?: string;
+    /** Disables this single tab and removes it from keyboard activation. */
     disabled?: boolean;
     /** Additional class names merged with `.cinder-tab`. */
     class?: string;

package/dist/components/tabs/index.js

@@ -173,7 +173,10 @@ function Tab($$anchor, $$props) {
   let disabled = $3.prop($$props, "disabled", 3, false);
   const tabs = getTabsContext();
   const tabId = $3.derived(() => $$props.id ?? `${tabs.baseId}-tab-${$$props.value}`);
-  const panelId = $3.derived(() => `${tabs.baseId}-panel-${$$props.value}`);
+  const panelId = $3.derived(() => {
+    const controlsId = $$props.controls?.trim();
+    return controlsId ? controlsId : `${tabs.baseId}-panel-${$$props.value}`;
+  });
   const isActive = $3.derived(() => tabs.isActive($$props.value));
   const isFocusable = $3.derived(() => tabs.isFocusable($$props.value));
   let buttonElement = $3.state(undefined);
@@ -521,4 +524,4 @@ export {
   Tab
 };
 
-//# debugId=CAE059CC8EC3D9DC64756E2164756E21
+//# debugId=03ABA1ADD3F1F54D64756E2164756E21