@ui-organized/svelte 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,24 @@
+export interface CheckboxProps {
+    /** Whether the checkbox is currently checked. Bindable: `bind:checked`. */
+    checked?: boolean;
+    /** Initial checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
+    /** Callback fired when checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Label text rendered beside the checkbox. */
+    label?: string;
+    /** Whether the checkbox is in an indeterminate state. */
+    indeterminate?: boolean;
+    /** Whether the checkbox should ignore user interaction. */
+    disabled?: boolean;
+    /** Whether the checkbox is required for form submission. */
+    required?: boolean;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** ID for the input element. */
+    id?: string;
+    class?: string;
+    /** Accessible name when the checkbox is rendered without a visible `label`. */
+    "aria-label"?: string;
+}
+//# sourceMappingURL=Checkbox.types.d.ts.map

package/dist/components/Checkbox/Checkbox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/Checkbox/Checkbox.types.js

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

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export type { CheckboxProps } from "./Checkbox.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.svelte";

package/dist/components/Chip/Chip.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { chipStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import ChipSegment from "./ChipSegment.svelte";
+  import { provideChipDisabled } from "./chipContext.js";
+  import type { ChipProps } from "./Chip.types.js";
+  import "@ui-organized/core/components/Chip/Chip.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  /** The dismiss icon, at the size `Tag`'s icons render. */
+  const ICON_SIZE = 16;
+
+  let {
+    label,
+    operator,
+    value,
+    children,
+    selected = false,
+    incomplete = false,
+    disabled = false,
+    onremove,
+    removeLabel,
+    class: className,
+    ...rest
+  }: ChipProps = $props();
+
+  provideChipDisabled(() => disabled);
+</script>
+
+<!-- Segmented (Figma 2462:2636). Every segment and the dismiss control are
+     SIBLINGS in a plain group: a button inside a button is invalid HTML and an
+     axe `nested-interactive` violation. -->
+<span
+  role="group"
+  class={clsx(
+    chipStyles(),
+    selected && "chip--selected",
+    incomplete && "chip--incomplete",
+    disabled && "chip--disabled",
+    className,
+  )}
+  {...rest}
+>
+  {#if label}<ChipSegment part="label">{label}</ChipSegment>{/if}
+  {#if operator}<ChipSegment part="operator">{operator}</ChipSegment>{/if}
+  {#if value}<ChipSegment part="value">{value}</ChipSegment>{/if}
+  {@render children?.()}
+
+  {#if onremove}
+    <button
+      type="button"
+      class="chip__remove"
+      aria-label={removeLabel}
+      {disabled}
+      onclick={onremove}
+    >
+      <Icon name={glyph("close")} size={ICON_SIZE} />
+    </button>
+  {/if}
+</span>

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

@@ -0,0 +1,6 @@
+import type { ChipProps } from "./Chip.types.js";
+import "@ui-organized/core/components/Chip/Chip.css";
+declare const Chip: import("svelte").Component<ChipProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;
+//# sourceMappingURL=Chip.svelte.d.ts.map

package/dist/components/Chip/Chip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chip/Chip.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,6CAA6C,CAAC;AAuDrD,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,35 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ChipSegmentPart } from "@ui-organized/core";
+export interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Shorthand for a static label segment — what the chip is *about*. Never truncated.
+     *  The shorthand segments never open anything; compose `ChipSegment`s for that. */
+    label?: string;
+    /** Shorthand for a static operator segment: "is any of", "is before". Always spelled. */
+    operator?: string;
+    /** Shorthand for a static value segment. The only part that truncates. */
+    value?: string;
+    /** `ChipSegment`s, rendered after any shorthand segments. */
+    children?: Snippet;
+    /** One of its menus is open, or it is toggled on. Fills the chip with brand. */
+    selected?: boolean;
+    /** The chip exists but does not yet stand for anything. */
+    incomplete?: boolean;
+    /** Disables every segment and the dismiss control. */
+    disabled?: boolean;
+    /** Renders a dismiss button as the last segment — a **sibling**, never nested. */
+    onremove?: (event: MouseEvent) => void;
+    /**
+     * The dismiss button's accessible name. It is icon-only, so this carries the
+     * whole meaning. Required whenever `onremove` is set.
+     */
+    removeLabel?: string;
+    /** Class for the chip's wrapper. */
+    class?: string;
+}
+export interface ChipSegmentProps extends HTMLButtonAttributes {
+    /** Which part of the chip's sentence this is. Defaults to `value`. */
+    part?: ChipSegmentPart;
+    children?: Snippet;
+}
+//# sourceMappingURL=Chip.types.d.ts.map

package/dist/components/Chip/Chip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chip/Chip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAClF;uFACmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D,sEAAsE;IACtE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Chip/Chip.types.js

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

package/dist/components/Chip/ChipSegment.svelte

@@ -0,0 +1,34 @@
+<!--
+  One part of a chip's sentence. A `<button>` once it has something to do, a
+  `<span>` until then: a segment that opens nothing must not be a button, or
+  every static token in a list puts empty stops in the tab order. `disabled`
+  counts — a real disabled control is what exempts the dimmed text from axe's
+  contrast rule.
+
+  Every other prop lands on the button, so an Ark trigger's `asChild` props
+  project onto exactly the segment that opens it.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { chipSegmentStyles } from "@ui-organized/core";
+  import { readChipDisabled } from "./chipContext.js";
+  import type { ChipSegmentProps } from "./Chip.types.js";
+
+  let {
+    part,
+    class: className,
+    disabled: ownDisabled,
+    children,
+    ...rest
+  }: ChipSegmentProps = $props();
+
+  const chipDisabled = readChipDisabled();
+  const disabled = $derived(chipDisabled() || ownDisabled === true);
+  const classes = $derived(clsx(chipSegmentStyles({ part }), className));
+</script>
+
+{#if rest.onclick === undefined && !disabled}
+  <span class={classes}>{@render children?.()}</span>
+{:else}
+  <button type="button" class={classes} {disabled} {...rest}>{@render children?.()}</button>
+{/if}

package/dist/components/Chip/ChipSegment.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ChipSegmentProps } from "./Chip.types.js";
+declare const ChipSegment: import("svelte").Component<ChipSegmentProps, {}, "">;
+type ChipSegment = ReturnType<typeof ChipSegment>;
+export default ChipSegment;
+//# sourceMappingURL=ChipSegment.svelte.d.ts.map

package/dist/components/Chip/ChipSegment.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSegment.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chip/ChipSegment.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AA8BxD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/Chip/chipContext.d.ts

@@ -0,0 +1,5 @@
+/** The chip's `disabled`, reaching segments a consumer composed themselves. */
+export declare function provideChipDisabled(read: () => boolean): void;
+/** Call during component init; the returned reader is safe inside `$derived`. */
+export declare function readChipDisabled(): () => boolean;
+//# sourceMappingURL=chipContext.d.ts.map

package/dist/components/Chip/chipContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipContext.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chip/chipContext.ts"],"names":[],"mappings":"AAIA,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,OAAO,GAAG,IAAI,CAE7D;AAED,iFAAiF;AACjF,wBAAgB,gBAAgB,IAAI,MAAM,OAAO,CAGhD"}

package/dist/components/Chip/chipContext.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("chip");
+/** The chip's `disabled`, reaching segments a consumer composed themselves. */
+export function provideChipDisabled(read) {
+    setContext(KEY, read);
+}
+/** Call during component init; the returned reader is safe inside `$derived`. */
+export function readChipDisabled() {
+    const read = getContext(KEY);
+    return () => read?.() ?? false;
+}

package/dist/components/Chip/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Chip } from "./Chip.svelte";
+export { default as ChipSegment } from "./ChipSegment.svelte";
+export type { ChipProps, ChipSegmentProps } from "./Chip.types.js";
+export type { ChipSegmentPart } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Chip/index.js

@@ -0,0 +1,2 @@
+export { default as Chip } from "./Chip.svelte";
+export { default as ChipSegment } from "./ChipSegment.svelte";

package/dist/components/Clipboard/Clipboard.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { Clipboard as ArkClipboard } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, clipboardStyles } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import Icon from "../Icon/Icon.svelte";
+  import type { ClipboardProps } from "./Clipboard.types.js";
+  import "@ui-organized/core/components/Clipboard/Clipboard.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    value,
+    label,
+    helperText,
+    variant = "input",
+    size = "md",
+    copyLabel = "Copy",
+    copiedLabel = "Copied",
+    timeout,
+    onStatusChange,
+    class: className,
+  }: ClipboardProps = $props();
+
+  const iconSize = $derived(CONTROL_ICON_SIZE[size]);
+</script>
+
+<ArkClipboard.Root
+  class={clsx(clipboardStyles({ size, variant }), className)}
+  {value}
+  {timeout}
+  onStatusChange={onStatusChange && ((details) => onStatusChange(details.copied))}
+>
+  {#if label}
+    <ArkClipboard.Label class="field__label">{label}</ArkClipboard.Label>
+  {/if}
+  <ArkClipboard.Control class="clipboard__control">
+    {#if variant === "input"}
+      <ArkClipboard.Input class="clipboard__input" />
+    {/if}
+    <!--
+      The trigger *is* the library Button: Ark hands its props to whatever the
+      asChild snippet renders, so the copy control inherits every interactive
+      token instead of restating them.
+    -->
+    <ArkClipboard.Trigger>
+      {#snippet asChild(props)}
+        <!--
+          `class` is pulled out and handed over separately: Ark types the
+          projected props in Svelte's own shapes, where it is a `ClassValue` that
+          may be null, while the Button takes a string. Passing it through clsx
+          merges it the way Ark's React `asChild` does, rather than dropping a
+          class the Trigger might one day carry.
+        -->
+        {@const { class: arkClass, ...triggerProps } = props()}
+        <Button intent="secondary" {size} class={clsx(arkClass)} {...triggerProps}>
+          {#snippet children()}
+            <!--
+              The trigger swaps both its icon and its label on copy. Indicator
+              renders its `copied` snippet in the copied state and its own
+              children otherwise, so the swap costs no local state. The icon goes
+              through an Indicator rather than the Button's `icon` prop because
+              only the Indicator knows the state.
+            -->
+            <ArkClipboard.Indicator class="clipboard__indicator">
+              {#snippet copied()}<Icon name={glyph("check")} size={iconSize} />{/snippet}
+              <Icon name={glyph("copy")} size={iconSize} />
+            </ArkClipboard.Indicator>
+            <ArkClipboard.Indicator>
+              {#snippet copied()}{copiedLabel}{/snippet}
+              {copyLabel}
+            </ArkClipboard.Indicator>
+          {/snippet}
+        </Button>
+      {/snippet}
+    </ArkClipboard.Trigger>
+  </ArkClipboard.Control>
+  {#if helperText}
+    <span class="field__description">{helperText}</span>
+  {/if}
+</ArkClipboard.Root>

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

@@ -0,0 +1,6 @@
+import type { ClipboardProps } from "./Clipboard.types.js";
+import "@ui-organized/core/components/Clipboard/Clipboard.css";
+declare const Clipboard: import("svelte").Component<ClipboardProps, {}, "">;
+type Clipboard = ReturnType<typeof Clipboard>;
+export default Clipboard;
+//# sourceMappingURL=Clipboard.svelte.d.ts.map

package/dist/components/Clipboard/Clipboard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Clipboard/Clipboard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,uDAAuD,CAAC;AAiE/D,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,29 @@
+import type { ControlSize } from "@ui-organized/core";
+export interface ClipboardProps {
+    /** The text copied to the clipboard. */
+    value: string;
+    /** Accessible label text rendered above the control. */
+    label?: string;
+    /** Helper text rendered below the control. */
+    helperText?: string;
+    /**
+     * Layout. `input` shows the value in a read-only field with a copy button
+     * attached; `button` is the button alone. Defaults to 'input'.
+     */
+    variant?: "input" | "button";
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Text on the trigger before copying. Defaults to 'Copy'. */
+    copyLabel?: string;
+    /** Text on the trigger just after copying. Defaults to 'Copied'. */
+    copiedLabel?: string;
+    /**
+     * Milliseconds the copied state stays visible before reverting.
+     * Defaults to 3000.
+     */
+    timeout?: number;
+    /** Called when the copied state changes. */
+    onStatusChange?: (copied: boolean) => void;
+    class?: string;
+}
+//# sourceMappingURL=Clipboard.types.d.ts.map

package/dist/components/Clipboard/Clipboard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Clipboard/Clipboard.types.js

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

package/dist/components/Clipboard/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Clipboard } from "./Clipboard.svelte";
+export type { ClipboardProps } from "./Clipboard.types.js";
+export type { ClipboardVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Clipboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Clipboard/index.js

@@ -0,0 +1 @@
+export { default as Clipboard } from "./Clipboard.svelte";

package/dist/components/Collapsible/Collapsible.svelte

@@ -0,0 +1,37 @@
+<!-- Collapsible root — owns the open state of a single disclosure section. -->
+<script lang="ts">
+  import { Collapsible as ArkCollapsible } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { CollapsibleProps } from "./Collapsible.types.js";
+  import "@ui-organized/core/components/Collapsible/Collapsible.css";
+
+  let {
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: CollapsibleProps = $props();
+</script>
+
+<!--
+  `open` is bindable so `bind:open` works the way a Svelte consumer expects, and
+  `onOpenChange` is kept alongside it so the API still matches the React package.
+  Ark hands the callback a details object; it is unwrapped here so the facade's
+  signature is `(open: boolean)` in both libraries.
+-->
+<ArkCollapsible.Root
+  class={clsx("collapsible", className)}
+  bind:open
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  {disabled}
+  {...rest}
+>
+  {@render children?.()}
+</ArkCollapsible.Root>

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

@@ -0,0 +1,6 @@
+import type { CollapsibleProps } from "./Collapsible.types.js";
+import "@ui-organized/core/components/Collapsible/Collapsible.css";
+declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;
+//# sourceMappingURL=Collapsible.svelte.d.ts.map

package/dist/components/Collapsible/Collapsible.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Collapsible/Collapsible.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,2DAA2D,CAAC;AA8BnE,QAAA,MAAM,WAAW,0DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,44 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+/**
+ * Props handed to an `asChild` snippet, as a function to spread at the use site.
+ *
+ * Mirrors Ark's own `PropsFn`, which it does not re-export from its entry point.
+ * Declaring it structurally keeps the snippet signature assignable to Ark's
+ * while leaving this package's public types free of Ark internals. The two
+ * spellings differ only in the element being projected onto, and each has to
+ * match Ark's exactly — a snippet parameter is checked contravariantly, so a
+ * single widened type would not be assignable to either.
+ */
+export type CollapsibleTriggerPropsFn = (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>;
+export type CollapsibleContentPropsFn = (props?: HTMLAttributes<HTMLDivElement>) => HTMLAttributes<HTMLElement>;
+/**
+ * Root of a single disclosure section. Controlled via `bind:open` (or
+ * `open` + `onOpenChange`), or uncontrolled via `defaultOpen`.
+ */
+export interface CollapsibleProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class" | "dir">> {
+    /** Whether the panel is open. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Fired with the next open state whenever it changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disable the trigger and prevent toggling. */
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+export interface CollapsibleTriggerProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the trigger onto a custom element instead of rendering a button. */
+    asChild?: Snippet<[CollapsibleTriggerPropsFn]>;
+}
+export interface CollapsibleContentProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the panel onto a custom element instead of rendering a div. */
+    asChild?: Snippet<[CollapsibleContentPropsFn]>;
+}
+//# sourceMappingURL=Collapsible.types.d.ts.map

package/dist/components/Collapsible/Collapsible.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Collapsible/Collapsible.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;;;;;;;GASG;AACH,MAAM,MAAM,yBAAyB,GAAG,CACtC,KAAK,CAAC,EAAE,oBAAoB,KACzB,cAAc,CAAC,WAAW,CAAC,CAAC;AAEjC,MAAM,MAAM,yBAAyB,GAAG,CACtC,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,KACnC,cAAc,CAAC,WAAW,CAAC,CAAC;AAEjC;;;GAGG;AACH,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC;IAC7E,wDAAwD;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,uBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC;CAChD"}

package/dist/components/Collapsible/Collapsible.types.js

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

package/dist/components/Collapsible/CollapsibleContent.svelte

@@ -0,0 +1,33 @@
+<!--
+  The region revealed when open. Zag animates its height off `--height`, which it
+  writes inline on this element — see Collapsible.css for why that has to be a
+  keyframe animation rather than a transition.
+-->
+<script lang="ts">
+  import { Collapsible as ArkCollapsible } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { CollapsibleContentProps } from "./Collapsible.types.js";
+
+  let {
+    asChild: project,
+    class: className,
+    children,
+    ...rest
+  }: CollapsibleContentProps = $props();
+
+  const panelClass = $derived(clsx("collapsible__panel", className));
+</script>
+
+{#if project}
+  <ArkCollapsible.Content class={panelClass} {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkCollapsible.Content>
+{:else}
+  <!--
+    The panel itself is the animating box, so it has to keep `overflow: hidden`
+    and no padding of its own; the inner element is what carries the spacing.
+  -->
+  <ArkCollapsible.Content class={panelClass} {...rest}>
+    <div class="collapsible__content">{@render children?.()}</div>
+  </ArkCollapsible.Content>
+{/if}

package/dist/components/Collapsible/CollapsibleContent.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CollapsibleContentProps } from "./Collapsible.types.js";
+declare const CollapsibleContent: import("svelte").Component<CollapsibleContentProps, {}, "">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;
+//# sourceMappingURL=CollapsibleContent.svelte.d.ts.map

package/dist/components/Collapsible/CollapsibleContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Collapsible/CollapsibleContent.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AA+BtE,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/Collapsible/CollapsibleTrigger.svelte

@@ -0,0 +1,27 @@
+<!-- Button that toggles the panel. Pass `asChild` to project a custom element. -->
+<script lang="ts">
+  import { Collapsible as ArkCollapsible } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { CollapsibleTriggerProps } from "./Collapsible.types.js";
+
+  let {
+    asChild: project,
+    class: className,
+    children,
+    ...rest
+  }: CollapsibleTriggerProps = $props();
+
+  const triggerClass = $derived(
+    clsx("collapsible__trigger", "text-emphasis-body-large", className),
+  );
+</script>
+
+{#if project}
+  <ArkCollapsible.Trigger class={triggerClass} {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkCollapsible.Trigger>
+{:else}
+  <ArkCollapsible.Trigger class={triggerClass} {...rest}>
+    {@render children?.()}
+  </ArkCollapsible.Trigger>
+{/if}

package/dist/components/Collapsible/CollapsibleTrigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CollapsibleTriggerProps } from "./Collapsible.types.js";
+declare const CollapsibleTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;
+//# sourceMappingURL=CollapsibleTrigger.svelte.d.ts.map

package/dist/components/Collapsible/CollapsibleTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Collapsible/CollapsibleTrigger.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAgCtE,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/Collapsible/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Collapsible } from "./Collapsible.svelte";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.svelte";
+export { default as CollapsibleContent } from "./CollapsibleContent.svelte";
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleTriggerPropsFn, CollapsibleContentPropsFn, } from "./Collapsible.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,YAAY,EACV,gBAAgB,EAAE,uBAAuB,EAAE,uBAAuB,EAClE,yBAAyB,EAAE,yBAAyB,GACrD,MAAM,wBAAwB,CAAC"}

package/dist/components/Collapsible/index.js

@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.svelte";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.svelte";
+export { default as CollapsibleContent } from "./CollapsibleContent.svelte";