@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/components/faceted-filter-bar/index.js

@@ -0,0 +1,1081 @@
+var __defProp = Object.defineProperty;
+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/faceted-filter-bar/index.ts
+import"@lostgradient/cinder/faceted-filter-bar/styles";
+
+// src/components/faceted-filter-bar/faceted-filter-bar.svelte
+import"svelte/internal/disclose-version";
+import * as $8 from "svelte/internal/client";
+import { tick } from "svelte";
+
+// src/components/_visually-hidden-live-region.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/_visually-hidden-live-region.svelte
+var root = $.from_html(`<div aria-atomic="true"> </div>`);
+function _visually_hidden_live_region($$anchor, $$props) {
+  $.push($$props, true);
+  let message = $.prop($$props, "message", 3, ""), announcementSequence = $.prop($$props, "announcementSequence", 3, 0), priority = $.prop($$props, "priority", 3, "polite");
+  let rendered = $.state("");
+  let setTimeoutId = null;
+  let version = 0;
+  let isDestroyed = false;
+  $.user_effect(() => {
+    return () => {
+      isDestroyed = true;
+      if (setTimeoutId) {
+        clearTimeout(setTimeoutId);
+        setTimeoutId = null;
+      }
+    };
+  });
+  $.user_effect(() => {
+    const next = message();
+    announcementSequence();
+    const current = ++version;
+    if (setTimeoutId) {
+      clearTimeout(setTimeoutId);
+      setTimeoutId = null;
+    }
+    $.set(rendered, "");
+    if (next === "")
+      return;
+    setTimeoutId = setTimeout(() => {
+      if (isDestroyed || version !== current)
+        return;
+      $.set(rendered, next, true);
+      setTimeoutId = null;
+    }, 0);
+  });
+  var div = root();
+  var text = $.child(div, true);
+  $.reset(div);
+  $.template_effect(($0) => {
+    $.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
+    $.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
+    $.set_class(div, 1, $0);
+    $.set_text(text, $.get(rendered));
+  }, [() => $.clsx(classNames("cinder-sr-only", $$props.class))]);
+  $.append($$anchor, div);
+  $.pop();
+}
+
+// src/components/search-field/search-field.svelte
+import"svelte/internal/disclose-version";
+import * as $5 from "svelte/internal/client";
+import { untrack as untrack2 } from "svelte";
+
+// ../../node_modules/lucide-svelte/dist/icons/search.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $3 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $2 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var defaultAttributes_default = defaultAttributes;
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+var root2 = $2.from_svg(`<svg><!><!></svg>`);
+function Icon($$anchor, $$props) {
+  const $$sanitized_props = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $2.legacy_rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "iconNode"
+  ]);
+  $2.push($$props, false);
+  let name = $2.prop($$props, "name", 8, undefined);
+  let color = $2.prop($$props, "color", 8, "currentColor");
+  let size = $2.prop($$props, "size", 8, 24);
+  let strokeWidth = $2.prop($$props, "strokeWidth", 8, 2);
+  let absoluteStrokeWidth = $2.prop($$props, "absoluteStrokeWidth", 8, false);
+  let iconNode = $2.prop($$props, "iconNode", 24, () => []);
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && array.indexOf(className) === index2;
+  }).join(" ");
+  $2.init();
+  var svg = root2();
+  $2.attribute_effect(svg, ($0, $1) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size(),
+    height: size(),
+    stroke: color(),
+    "stroke-width": $0,
+    class: $1
+  }), [
+    () => ($2.deep_read_state(absoluteStrokeWidth()), $2.deep_read_state(strokeWidth()), $2.deep_read_state(size()), $2.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size()) : strokeWidth())),
+    () => ($2.deep_read_state(name()), $2.deep_read_state($$sanitized_props), $2.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
+  ]);
+  var node = $2.child(svg);
+  $2.each(node, 1, iconNode, $2.index, ($$anchor2, $$item) => {
+    var $$array = $2.derived(() => $2.to_array($2.get($$item), 2));
+    let tag = () => $2.get($$array)[0];
+    let attrs = () => $2.get($$array)[1];
+    var fragment = $2.comment();
+    var node_1 = $2.first_child(fragment);
+    $2.element(node_1, tag, true, ($$element, $$anchor3) => {
+      $2.attribute_effect($$element, () => ({ ...attrs() }));
+    });
+    $2.append($$anchor2, fragment);
+  });
+  var node_2 = $2.sibling(node);
+  $2.slot(node_2, $$props, "default", {}, null);
+  $2.reset(svg);
+  $2.append($$anchor, svg);
+  $2.pop();
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/search.svelte
+function Search($$anchor, $$props) {
+  const $$sanitized_props = $3.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["circle", { cx: "11", cy: "11", r: "8" }],
+    ["path", { d: "m21 21-4.3-4.3" }]
+  ];
+  Icon($$anchor, $3.spread_props({ name: "search" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $3.comment();
+      var node = $3.first_child(fragment_1);
+      $3.slot(node, $$props, "default", {}, null);
+      $3.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/x.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $4 from "svelte/internal/client";
+function X($$anchor, $$props) {
+  const $$sanitized_props = $4.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["path", { d: "M18 6 6 18" }],
+    ["path", { d: "m6 6 12 12" }]
+  ];
+  Icon($$anchor, $4.spread_props({ name: "x" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $4.comment();
+      var node = $4.first_child(fragment_1);
+      $4.slot(node, $$props, "default", {}, null);
+      $4.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// 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/components/search-field/search-field.svelte
+var root_1 = $5.from_html(`<kbd class="cinder-search-field__shortcut" aria-hidden="true"> </kbd>`);
+var root3 = $5.from_html(`<div><span class="cinder-search-field__leading" aria-hidden="true"><!></span> <input/> <button type="button" class="cinder-search-field__clear" aria-label="Clear search"><!></button> <!></div>`);
+function Search_field($$anchor, $$props) {
+  $5.push($$props, true);
+  let rest = $5.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "id",
+    "value",
+    "defaultValue",
+    "placeholder",
+    "shortcut",
+    "disabled",
+    "readonly",
+    "name",
+    "class",
+    "oninput",
+    "onsearch",
+    "onclear",
+    "onkeydown"
+  ]);
+  const context = getFormFieldContext();
+  const resolvedId = $5.derived(() => $$props.id ?? context?.controlId);
+  let inputElement = $5.state(null);
+  let uncontrolledValue = $5.state($5.proxy(untrack2(() => $$props.defaultValue) ?? ""));
+  const isControlled = $5.derived(() => $$props.value !== undefined);
+  const currentValue = $5.derived(() => $5.get(isControlled) ? $$props.value ?? "" : $5.get(uncontrolledValue));
+  const hasValue = $5.derived(() => $5.get(currentValue).length > 0);
+  const describedBy = $5.derived(() => composeDescribedBy(context?.descriptionId, context?.errorId, rest["aria-describedby"]));
+  const consumerAriaInvalid = $5.derived(() => rest["aria-invalid"]);
+  const resolvedAriaInvalid = $5.derived(() => context?.invalid ?? $5.get(consumerAriaInvalid) ?? ariaInvalid(false));
+  const isInvalid = $5.derived(() => $5.get(resolvedAriaInvalid) === "true" || $5.get(resolvedAriaInvalid) === true);
+  const resolvedRequired = $5.derived(() => $$props.required ?? context?.required ?? false);
+  const resolvedDisabled = $5.derived(() => $$props.disabled ?? context?.disabled ?? false);
+  const clearInert = $5.derived(() => $5.get(resolvedDisabled) || $$props.readonly === true);
+  $5.user_effect(() => {
+    if (context && $$props.id && context.controlId !== $$props.id) {
+      devWarn(`[cinder/SearchField] id mismatch: SearchField id="${$$props.id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both.`);
+    }
+  });
+  function handleInput(event) {
+    const target = event.currentTarget;
+    const next = target.value;
+    if (!$5.get(isControlled))
+      $5.set(uncontrolledValue, next, true);
+    $$props.oninput?.(next);
+  }
+  function handleKeyDown(event) {
+    $$props.onkeydown?.(event);
+  }
+  const searchEventListener = (element2) => {
+    const handler = () => $$props.onsearch?.(element2.value);
+    element2.addEventListener("search", handler);
+    return () => element2.removeEventListener("search", handler);
+  };
+  function handleClear() {
+    if ($5.get(clearInert))
+      return;
+    if (!$5.get(isControlled) && $5.get(inputElement)) {
+      $5.set(uncontrolledValue, "");
+      $5.get(inputElement).value = "";
+    }
+    $5.get(inputElement)?.focus();
+    $$props.oninput?.("");
+    $$props.onclear?.();
+  }
+  var div = root3();
+  var span = $5.child(div);
+  var node = $5.child(span);
+  Search(node, { class: "cinder-search-field__icon", "aria-hidden": "true" });
+  $5.reset(span);
+  var input = $5.sibling(span, 2);
+  $5.attribute_effect(input, () => ({
+    ...rest,
+    id: $5.get(resolvedId),
+    name: $$props.name,
+    type: "search",
+    class: "cinder-search-field__input",
+    value: $5.get(currentValue),
+    placeholder: $$props.placeholder,
+    readonly: $$props.readonly,
+    disabled: $5.get(resolvedDisabled),
+    required: $5.get(resolvedRequired),
+    "aria-invalid": $5.get(resolvedAriaInvalid),
+    "aria-describedby": $5.get(describedBy),
+    oninput: handleInput,
+    onkeydown: handleKeyDown
+  }), undefined, undefined, undefined, undefined, true);
+  $5.bind_this(input, ($$value) => $5.set(inputElement, $$value), () => $5.get(inputElement));
+  $5.attach(input, () => searchEventListener);
+  var button = $5.sibling(input, 2);
+  var node_1 = $5.child(button);
+  X(node_1, { class: "cinder-search-field__icon", "aria-hidden": "true" });
+  $5.reset(button);
+  var node_2 = $5.sibling(button, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var kbd = root_1();
+      var text = $5.child(kbd, true);
+      $5.reset(kbd);
+      $5.template_effect(() => $5.set_text(text, $$props.shortcut));
+      $5.append($$anchor2, kbd);
+    };
+    $5.if(node_2, ($$render) => {
+      if ($$props.shortcut)
+        $$render(consequent);
+    });
+  }
+  $5.reset(div);
+  $5.template_effect(($0) => {
+    $5.set_class(div, 1, $0);
+    $5.set_attribute(div, "data-disabled", $5.get(resolvedDisabled) ? "" : undefined);
+    $5.set_attribute(div, "data-invalid", $5.get(isInvalid) ? "" : undefined);
+    $5.set_attribute(button, "tabindex", $5.get(hasValue) && !$5.get(clearInert) ? 0 : -1);
+    $5.set_attribute(button, "hidden", !$5.get(hasValue));
+    button.disabled = $5.get(clearInert);
+  }, [
+    () => $5.clsx(classNames("cinder-search-field", $$props.class))
+  ]);
+  $5.delegated("click", button, handleClear);
+  $5.append($$anchor, div);
+  $5.pop();
+}
+$5.delegate(["click"]);
+
+// src/components/chip/chip.svelte
+import"svelte/internal/disclose-version";
+import * as $6 from "svelte/internal/client";
+var root_2 = $6.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
+var root_12 = $6.from_html(`<button><!> <span class="cinder-chip__label"> </span></button>`);
+var root_4 = $6.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
+var root_3 = $6.from_html(`<span><!> <span class="cinder-chip__label"> </span> <button type="button" class="cinder-chip__remove"><span aria-hidden="true">×</span></button></span>`);
+var root_6 = $6.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
+var root_5 = $6.from_html(`<span><!> <span class="cinder-chip__label"> </span></span>`);
+function Chip($$anchor, $$props) {
+  $6.push($$props, true);
+  let props = $6.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  const mode = $6.derived(() => $$props.mode ?? "display");
+  const label = $6.derived(() => $$props.label);
+  const variant = $6.derived(() => $$props.variant ?? "neutral");
+  const size = $6.derived(() => $$props.size ?? "md");
+  const density = $6.derived(() => $$props.density);
+  const customClassName = $6.derived(() => $$props.class);
+  const leadingIcon = $6.derived(() => $$props.leadingIcon);
+  const pressed = $6.derived(() => $6.get(mode) === "toggle" ? $$props.pressed : false);
+  const onpressedchange = $6.derived(() => $6.get(mode) === "toggle" ? $$props.onpressedchange : undefined);
+  const disabled = $6.derived(() => $6.get(mode) !== "display" ? $$props.disabled : undefined);
+  const consumerOnClick = $6.derived(() => $6.get(mode) === "toggle" ? $$props.onclick : undefined);
+  const ariaLabelRaw = $6.derived(() => $6.get(mode) === "toggle" ? props["aria-label"] : undefined);
+  const ariaLabel = $6.derived(() => typeof $6.get(ariaLabelRaw) === "string" && $6.get(ariaLabelRaw).trim().length > 0 ? $6.get(ariaLabelRaw) : undefined);
+  const onremove = $6.derived(() => $6.get(mode) === "removable" ? $$props.onremove : undefined);
+  const removeAriaLabel = $6.derived(() => {
+    if ($6.get(mode) !== "removable")
+      return;
+    const raw = $$props.removeAriaLabel;
+    return typeof raw === "string" && raw.trim().length > 0 ? raw : undefined;
+  });
+  const BESPOKE_KEYS = new Set([
+    "mode",
+    "label",
+    "variant",
+    "size",
+    "density",
+    "leadingIcon",
+    "class",
+    "pressed",
+    "onpressedchange",
+    "disabled",
+    "onremove",
+    "removeAriaLabel"
+  ]);
+  const rest = $6.derived(() => {
+    const result = {};
+    for (const [key, value] of Object.entries(props)) {
+      if (!BESPOKE_KEYS.has(key)) {
+        result[key] = value;
+      }
+    }
+    return result;
+  });
+  const removableAriaLabel = $6.derived(() => {
+    const forwarded = $6.get(rest)["aria-label"];
+    return typeof forwarded === "string" && forwarded.trim().length > 0 ? forwarded : $6.get(label);
+  });
+  var fragment = $6.comment();
+  var node = $6.first_child(fragment);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var button = root_12();
+      var event_handler = (event) => {
+        if ($6.get(disabled))
+          return;
+        $6.get(consumerOnClick)?.(event);
+        if (!event.defaultPrevented) {
+          $6.get(onpressedchange)?.(!$6.get(pressed));
+        }
+      };
+      $6.attribute_effect(button, ($0) => ({
+        ...$6.get(rest),
+        type: "button",
+        "data-cinder-mode": "toggle",
+        "data-cinder-variant": $6.get(variant),
+        "data-cinder-size": $6.get(size),
+        "data-cinder-density": $6.get(density) === "toolbar" ? "toolbar" : undefined,
+        class: $0,
+        "aria-pressed": $6.get(pressed),
+        "aria-label": $6.get(ariaLabel),
+        disabled: $6.get(disabled),
+        onclick: event_handler
+      }), [() => classNames("cinder-chip", $6.get(customClassName))]);
+      var node_1 = $6.child(button);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_2();
+          var node_2 = $6.child(span);
+          $6.snippet(node_2, () => $6.get(leadingIcon));
+          $6.reset(span);
+          $6.append($$anchor3, span);
+        };
+        $6.if(node_1, ($$render) => {
+          if ($6.get(leadingIcon))
+            $$render(consequent);
+        });
+      }
+      var span_1 = $6.sibling(node_1, 2);
+      var text = $6.child(span_1, true);
+      $6.reset(span_1);
+      $6.reset(button);
+      $6.template_effect(() => $6.set_text(text, $6.get(label)));
+      $6.append($$anchor2, button);
+    };
+    var consequent_3 = ($$anchor2) => {
+      var span_2 = root_3();
+      $6.attribute_effect(span_2, ($0) => ({
+        ...$6.get(rest),
+        role: "group",
+        "aria-label": $6.get(removableAriaLabel),
+        "data-cinder-mode": "removable",
+        "data-cinder-variant": $6.get(variant),
+        "data-cinder-size": $6.get(size),
+        "data-cinder-density": $6.get(density) === "toolbar" ? "toolbar" : undefined,
+        "data-cinder-disabled": $6.get(disabled) || undefined,
+        "aria-disabled": $6.get(disabled) || undefined,
+        class: $0
+      }), [() => classNames("cinder-chip", $6.get(customClassName))]);
+      var node_3 = $6.child(span_2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var span_3 = root_4();
+          var node_4 = $6.child(span_3);
+          $6.snippet(node_4, () => $6.get(leadingIcon));
+          $6.reset(span_3);
+          $6.append($$anchor3, span_3);
+        };
+        $6.if(node_3, ($$render) => {
+          if ($6.get(leadingIcon))
+            $$render(consequent_2);
+        });
+      }
+      var span_4 = $6.sibling(node_3, 2);
+      var text_1 = $6.child(span_4, true);
+      $6.reset(span_4);
+      var button_1 = $6.sibling(span_4, 2);
+      $6.reset(span_2);
+      $6.template_effect(() => {
+        $6.set_text(text_1, $6.get(label));
+        $6.set_attribute(button_1, "aria-label", $6.get(removeAriaLabel) ?? `Remove ${$6.get(label)}`);
+        button_1.disabled = $6.get(disabled);
+      });
+      $6.delegated("click", button_1, () => {
+        if (!$6.get(disabled))
+          $6.get(onremove)?.();
+      });
+      $6.append($$anchor2, span_2);
+    };
+    var alternate = ($$anchor2) => {
+      var span_5 = root_5();
+      $6.attribute_effect(span_5, ($0) => ({
+        ...$6.get(rest),
+        "data-cinder-mode": "display",
+        "data-cinder-variant": $6.get(variant),
+        "data-cinder-size": $6.get(size),
+        "data-cinder-density": $6.get(density) === "toolbar" ? "toolbar" : undefined,
+        class: $0
+      }), [() => classNames("cinder-chip", $6.get(customClassName))]);
+      var node_5 = $6.child(span_5);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var span_6 = root_6();
+          var node_6 = $6.child(span_6);
+          $6.snippet(node_6, () => $6.get(leadingIcon));
+          $6.reset(span_6);
+          $6.append($$anchor3, span_6);
+        };
+        $6.if(node_5, ($$render) => {
+          if ($6.get(leadingIcon))
+            $$render(consequent_4);
+        });
+      }
+      var span_7 = $6.sibling(node_5, 2);
+      var text_2 = $6.child(span_7, true);
+      $6.reset(span_7);
+      $6.reset(span_5);
+      $6.template_effect(() => $6.set_text(text_2, $6.get(label)));
+      $6.append($$anchor2, span_5);
+    };
+    $6.if(node, ($$render) => {
+      if ($6.get(mode) === "toggle")
+        $$render(consequent_1);
+      else if ($6.get(mode) === "removable")
+        $$render(consequent_3, 1);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $6.append($$anchor, fragment);
+  $6.pop();
+}
+$6.delegate(["click"]);
+
+// src/components/button/button.svelte
+import"svelte/internal/disclose-version";
+import * as $7 from "svelte/internal/client";
+var root_22 = $7.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_42 = $7.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_52 = $7.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_32 = $7.from_html(`<!> <!>`, 1);
+var root_8 = $7.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_13 = $7.from_html(`<!> <!> <!>`, 1);
+var root_9 = $7.from_html(`<a><!></a>`);
+var root_10 = $7.from_html(`<button><!></button>`);
+function Button($$anchor, $$props) {
+  $7.push($$props, true);
+  const buttonContent = ($$anchor2) => {
+    var fragment = root_13();
+    var node = $7.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        var span = root_22();
+        var node_1 = $7.child(span);
+        $7.snippet(node_1, () => $$props.leadingIcon);
+        $7.reset(span);
+        $7.append($$anchor3, span);
+      };
+      $7.if(node, ($$render) => {
+        if ($$props.leadingIcon)
+          $$render(consequent);
+      });
+    }
+    var node_2 = $7.sibling(node, 2);
+    {
+      var consequent_3 = ($$anchor3) => {
+        var fragment_1 = root_32();
+        var node_3 = $7.first_child(fragment_1);
+        {
+          var consequent_1 = ($$anchor4) => {
+            var span_1 = root_42();
+            var text2 = $7.child(span_1, true);
+            $7.reset(span_1);
+            $7.template_effect(() => $7.set_text(text2, $$props.label));
+            $7.append($$anchor4, span_1);
+          };
+          $7.if(node_3, ($$render) => {
+            if (!$7.get(resolvedAriaLabel) && !$7.get(resolvedAriaLabelledBy) && $$props.label)
+              $$render(consequent_1);
+          });
+        }
+        var node_4 = $7.sibling(node_3, 2);
+        {
+          var consequent_2 = ($$anchor4) => {
+            var span_2 = root_52();
+            var node_5 = $7.child(span_2);
+            $7.snippet(node_5, () => $$props.children);
+            $7.reset(span_2);
+            $7.append($$anchor4, span_2);
+          };
+          $7.if(node_4, ($$render) => {
+            if ($$props.children)
+              $$render(consequent_2);
+          });
+        }
+        $7.append($$anchor3, fragment_1);
+      };
+      var consequent_4 = ($$anchor3) => {
+        var fragment_2 = $7.comment();
+        var node_6 = $7.first_child(fragment_2);
+        $7.snippet(node_6, () => $$props.children);
+        $7.append($$anchor3, fragment_2);
+      };
+      var alternate = ($$anchor3) => {
+        var text_1 = $7.text();
+        $7.template_effect(() => $7.set_text(text_1, $$props.label));
+        $7.append($$anchor3, text_1);
+      };
+      $7.if(node_2, ($$render) => {
+        if (iconOnly())
+          $$render(consequent_3);
+        else if ($$props.children)
+          $$render(consequent_4, 1);
+        else
+          $$render(alternate, -1);
+      });
+    }
+    var node_7 = $7.sibling(node_2, 2);
+    {
+      var consequent_5 = ($$anchor3) => {
+        var span_3 = root_8();
+        var node_8 = $7.child(span_3);
+        $7.snippet(node_8, () => $$props.trailingIcon);
+        $7.reset(span_3);
+        $7.append($$anchor3, span_3);
+      };
+      $7.if(node_7, ($$render) => {
+        if ($$props.trailingIcon)
+          $$render(consequent_5);
+      });
+    }
+    $7.append($$anchor2, fragment);
+  };
+  const variant = $7.prop($$props, "variant", 3, "secondary"), size = $7.prop($$props, "size", 3, "md"), fullWidth = $7.prop($$props, "fullWidth", 3, false), loading = $7.prop($$props, "loading", 3, false), iconOnly = $7.prop($$props, "iconOnly", 3, false), rest = $7.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "variant",
+    "size",
+    "fullWidth",
+    "loading",
+    "iconOnly",
+    "leadingIcon",
+    "trailingIcon",
+    "children",
+    "label",
+    "class",
+    "href",
+    "onclick",
+    "aria-disabled",
+    "aria-busy",
+    "aria-label",
+    "aria-labelledby",
+    "aria-expanded",
+    "aria-controls",
+    "aria-haspopup"
+  ]);
+  const mergedClassName = $7.derived(() => classNames("cinder-button", $$props.class));
+  const dataAttributes = $7.derived(() => ({
+    "data-cinder-variant": variant(),
+    "data-cinder-size": size(),
+    "data-cinder-full-width": fullWidth() ? "" : undefined,
+    "data-cinder-loading": loading() ? "" : undefined,
+    "data-cinder-icon-only": iconOnly() ? "" : undefined
+  }));
+  const resolvedAriaDisabled = $7.derived(() => loading() ? "true" : $$props["aria-disabled"]);
+  const resolvedAriaBusy = $7.derived(() => loading() ? "true" : $$props["aria-busy"]);
+  const resolvedAriaLabel = $7.derived(() => typeof $$props["aria-label"] === "string" && $$props["aria-label"].trim().length > 0 ? $$props["aria-label"] : undefined);
+  const resolvedAriaLabelledBy = $7.derived(() => typeof $$props["aria-labelledby"] === "string" && $$props["aria-labelledby"].trim().length > 0 ? $$props["aria-labelledby"] : undefined);
+  const anchorAttributes = rest;
+  const buttonAttributes = rest;
+  const anchorTabIndex = $7.derived(() => $$props.tabindex);
+  const buttonType = $7.derived(() => $$props.type);
+  const buttonDisabled = $7.derived(() => $$props.disabled ?? false);
+  function handleClick(event) {
+    if (loading()) {
+      event.preventDefault();
+      return;
+    }
+    if (typeof $$props.onclick === "function") {
+      $$props.onclick(event);
+    }
+  }
+  $7.user_effect(() => {
+    const hasLabel = typeof $$props.label === "string" && $$props.label.trim().length > 0;
+    const hasChildren = Boolean($$props.children);
+    const hasAriaLabel = $7.get(resolvedAriaLabel) !== undefined;
+    const hasAriaLabelledBy = $7.get(resolvedAriaLabelledBy) !== undefined;
+    if (!hasLabel && !hasChildren && !hasAriaLabel && !hasAriaLabelledBy) {
+      devWarn("[cinder/Button] rendered without an accessible name — pass a non-empty `label`, `children`, `aria-label`, or `aria-labelledby`.");
+    }
+    if (iconOnly() && !hasAriaLabel && !hasAriaLabelledBy && !hasLabel) {
+      devWarn("[cinder/Button] iconOnly=true requires aria-label, aria-labelledby, or a non-empty label.");
+    }
+    if (iconOnly() && !$$props.leadingIcon && !$$props.trailingIcon && !$$props.children) {
+      devWarn("[cinder/Button] iconOnly=true requires a visible icon — pass leadingIcon, trailingIcon, or children.");
+    }
+  });
+  var fragment_4 = $7.comment();
+  var node_9 = $7.first_child(fragment_4);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var a = root_9();
+      $7.attribute_effect(a, () => ({
+        ...anchorAttributes,
+        href: loading() ? undefined : $$props.href,
+        tabindex: loading() ? -1 : $7.get(anchorTabIndex),
+        class: $7.get(mergedClassName),
+        ...$7.get(dataAttributes),
+        "aria-disabled": $7.get(resolvedAriaDisabled),
+        "aria-busy": $7.get(resolvedAriaBusy),
+        "aria-label": $7.get(resolvedAriaLabel),
+        "aria-labelledby": $7.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
+        onclick: handleClick
+      }));
+      var node_10 = $7.child(a);
+      buttonContent(node_10);
+      $7.reset(a);
+      $7.append($$anchor2, a);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var button = root_10();
+      $7.attribute_effect(button, () => ({
+        ...buttonAttributes,
+        type: $7.get(buttonType) ?? "button",
+        class: $7.get(mergedClassName),
+        ...$7.get(dataAttributes),
+        disabled: $7.get(buttonDisabled) || loading(),
+        "aria-disabled": $7.get(resolvedAriaDisabled),
+        "aria-busy": $7.get(resolvedAriaBusy),
+        "aria-label": $7.get(resolvedAriaLabel),
+        "aria-labelledby": $7.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
+        onclick: handleClick
+      }));
+      var node_11 = $7.child(button);
+      buttonContent(node_11);
+      $7.reset(button);
+      $7.append($$anchor2, button);
+    };
+    $7.if(node_9, ($$render) => {
+      if ($$props.href !== undefined)
+        $$render(consequent_6);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $7.append($$anchor, fragment_4);
+  $7.pop();
+}
+
+// src/components/faceted-filter-bar/faceted-filter-bar.svelte
+var root_33 = $8.from_html(`<option> </option>`);
+var root_23 = $8.from_html(`<div class="cinder-faceted-filter-bar__facet"><label class="cinder-faceted-filter-bar__facet-label"> </label> <select class="cinder-faceted-filter-bar__select"><option> </option><!></select> <span class="cinder-faceted-filter-bar__select-chevron" aria-hidden="true"></span></div>`);
+var root_43 = $8.from_html(`<div class="cinder-faceted-filter-bar__facet"><!></div>`);
+var root_53 = $8.from_html(`<div class="cinder-faceted-filter-bar__chips" aria-label="Active filter controls"><!> <!></div>`);
+var root4 = $8.from_html(`<div><div class="cinder-faceted-filter-bar__controls"><!> <!></div> <!> <!></div>`);
+function Faceted_filter_bar($$anchor, $$props) {
+  const generatedId = $8.props_id();
+  $8.push($$props, true);
+  let ariaLabel = $8.prop($$props, "aria-label", 3, "Filters"), searchPlaceholder = $8.prop($$props, "searchPlaceholder", 3, "Search…"), searchAriaLabel = $8.prop($$props, "searchAriaLabel", 3, "Search"), facets = $8.prop($$props, "facets", 19, () => []), appliedFilters = $8.prop($$props, "appliedFilters", 19, () => []), disabled = $8.prop($$props, "disabled", 3, false), rest = $8.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "aria-label",
+    "searchQuery",
+    "searchPlaceholder",
+    "searchAriaLabel",
+    "facets",
+    "appliedFilters",
+    "disabled",
+    "class",
+    "onsearchchange",
+    "onfacetchange",
+    "onfilterremove",
+    "onclearall"
+  ]);
+  const searchId = $8.derived(() => `${generatedId}-search`);
+  let rootElement = $8.state(undefined);
+  let internalSearchQuery = $8.state("");
+  const isSearchControlled = $8.derived(() => $$props.searchQuery !== undefined);
+  const currentSearchQuery = $8.derived(() => $8.get(isSearchControlled) ? $$props.searchQuery ?? "" : $8.get(internalSearchQuery));
+  function resolveFacetValue(key) {
+    return appliedFilters().find((filter) => filter.key === key)?.value ?? "";
+  }
+  function resolveFilterDisplayValue(key, value) {
+    const facet = facets().find((candidate) => candidate.key === key);
+    if (facet?.type !== "select")
+      return value;
+    return facet.options.find((option) => option.value === value)?.label ?? value;
+  }
+  const hasAppliedFilters = $8.derived(() => appliedFilters().length > 0 || $8.get(currentSearchQuery).length > 0);
+  const totalActiveCount = $8.derived(() => appliedFilters().length);
+  const summaryMessage = $8.derived(() => {
+    if ($8.get(totalActiveCount) === 0)
+      return "";
+    const parts = appliedFilters().map((filter) => `${filter.label}: ${resolveFilterDisplayValue(filter.key, filter.value)}`);
+    return `${$8.get(totalActiveCount)} active filter${$8.get(totalActiveCount) === 1 ? "" : "s"}: ${parts.join(", ")}`;
+  });
+  function handleSearchInput(value) {
+    if (!$8.get(isSearchControlled)) {
+      $8.set(internalSearchQuery, value, true);
+    }
+    $$props.onsearchchange?.(value);
+  }
+  async function handleFilterRemove(key) {
+    const filterIndex = appliedFilters().findIndex((filter) => filter.key === key);
+    const facetFallbackKey = appliedFilters()[filterIndex]?.key;
+    $$props.onfilterremove?.(key);
+    await tick();
+    const removeButtons = Array.from($8.get(rootElement)?.querySelectorAll(".cinder-chip__remove") ?? []);
+    const nextRemoveButton = removeButtons[Math.min(filterIndex, removeButtons.length - 1)];
+    const facetSelect = facetFallbackKey ? document.getElementById(`${generatedId}-facet-${facetFallbackKey}`) : null;
+    const searchInput = document.getElementById($8.get(searchId));
+    (nextRemoveButton ?? facetSelect ?? searchInput)?.focus();
+  }
+  function handleClearAll() {
+    if (!$8.get(isSearchControlled)) {
+      $8.set(internalSearchQuery, "");
+    }
+    $$props.onclearall?.();
+  }
+  function getFacetCurrentValue(key) {
+    return resolveFacetValue(key);
+  }
+  var div = root4();
+  $8.attribute_effect(div, ($0) => ({
+    ...rest,
+    class: $0,
+    role: "search",
+    "aria-label": ariaLabel(),
+    "data-disabled": disabled() ? "" : undefined
+  }), [() => classNames("cinder-faceted-filter-bar", $$props.class)]);
+  var div_1 = $8.child(div);
+  var node = $8.child(div_1);
+  Search_field(node, {
+    get id() {
+      return $8.get(searchId);
+    },
+    class: "cinder-faceted-filter-bar__search",
+    get value() {
+      return $8.get(currentSearchQuery);
+    },
+    get placeholder() {
+      return searchPlaceholder();
+    },
+    get "aria-label"() {
+      return searchAriaLabel();
+    },
+    get disabled() {
+      return disabled();
+    },
+    oninput: handleSearchInput
+  });
+  var node_1 = $8.sibling(node, 2);
+  $8.each(node_1, 17, facets, (facet) => facet.key, ($$anchor2, facet) => {
+    var fragment = $8.comment();
+    var node_2 = $8.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        const selectFacet = $8.derived(() => $8.get(facet));
+        var div_2 = root_23();
+        var label = $8.child(div_2);
+        var text3 = $8.child(label, true);
+        $8.reset(label);
+        var select = $8.sibling(label, 2);
+        var option_1 = $8.child(select);
+        var text_1 = $8.child(option_1, true);
+        $8.reset(option_1);
+        option_1.value = option_1.__value = "";
+        var node_3 = $8.sibling(option_1);
+        $8.each(node_3, 17, () => $8.get(selectFacet).options, (option) => option.value, ($$anchor4, option) => {
+          var option_2 = root_33();
+          var text_2 = $8.child(option_2, true);
+          $8.reset(option_2);
+          var option_2_value = {};
+          $8.template_effect(() => {
+            option_2.disabled = $8.get(option).disabled;
+            $8.set_text(text_2, $8.get(option).label);
+            if (option_2_value !== (option_2_value = $8.get(option).value)) {
+              option_2.value = (option_2.__value = $8.get(option).value) ?? "";
+            }
+          });
+          $8.append($$anchor4, option_2);
+        });
+        $8.reset(select);
+        var select_value;
+        $8.init_select(select);
+        $8.next(2);
+        $8.reset(div_2);
+        $8.template_effect(($0) => {
+          $8.set_attribute(label, "for", `${generatedId}-facet-${$8.get(selectFacet).key}`);
+          $8.set_text(text3, $8.get(selectFacet).label);
+          $8.set_attribute(select, "id", `${generatedId}-facet-${$8.get(selectFacet).key}`);
+          select.disabled = disabled() || $8.get(selectFacet).disabled;
+          $8.set_attribute(select, "aria-label", $8.get(selectFacet).label);
+          $8.set_text(text_1, $8.get(selectFacet).placeholder ?? $8.get(selectFacet).label);
+          if (select_value !== (select_value = $0)) {
+            select.value = (select.__value = $0) ?? "", $8.select_option(select, $0);
+          }
+        }, [() => resolveFacetValue($8.get(selectFacet).key)]);
+        $8.delegated("change", select, (event) => {
+          const target = event.currentTarget;
+          $$props.onfacetchange?.($8.get(selectFacet).key, target.value);
+        });
+        $8.append($$anchor3, div_2);
+      };
+      var consequent_1 = ($$anchor3) => {
+        var div_3 = root_43();
+        var node_4 = $8.child(div_3);
+        {
+          let $0 = $8.derived(() => ({
+            value: getFacetCurrentValue($8.get(facet).key),
+            onchange: (value) => {
+              $$props.onfacetchange?.($8.get(facet).key, value);
+            }
+          }));
+          $8.snippet(node_4, () => $8.get(facet).control, () => $8.get($0));
+        }
+        $8.reset(div_3);
+        $8.append($$anchor3, div_3);
+      };
+      $8.if(node_2, ($$render) => {
+        if ($8.get(facet).type === "select")
+          $$render(consequent);
+        else if ($8.get(facet).type === "custom")
+          $$render(consequent_1, 1);
+      });
+    }
+    $8.append($$anchor2, fragment);
+  });
+  $8.reset(div_1);
+  var node_5 = $8.sibling(div_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var div_4 = root_53();
+      var node_6 = $8.child(div_4);
+      $8.each(node_6, 17, appliedFilters, (filter) => filter.key, ($$anchor3, filter) => {
+        const displayValue = $8.derived(() => resolveFilterDisplayValue($8.get(filter).key, $8.get(filter).value));
+        {
+          let $0 = $8.derived(() => `${$8.get(filter).label}: ${$8.get(displayValue)}`);
+          let $1 = $8.derived(() => `Remove filter: ${$8.get(filter).label}: ${$8.get(displayValue)}`);
+          Chip($$anchor3, {
+            mode: "removable",
+            get label() {
+              return $8.get($0);
+            },
+            get removeAriaLabel() {
+              return $8.get($1);
+            },
+            get disabled() {
+              return disabled();
+            },
+            onremove: () => handleFilterRemove($8.get(filter).key)
+          });
+        }
+      });
+      var node_7 = $8.sibling(node_6, 2);
+      Button(node_7, {
+        variant: "ghost",
+        size: "sm",
+        class: "cinder-faceted-filter-bar__clear-all",
+        get disabled() {
+          return disabled();
+        },
+        "aria-label": "Clear all filters",
+        onclick: handleClearAll,
+        children: ($$anchor3, $$slotProps) => {
+          $8.next();
+          var text_3 = $8.text("Clear all");
+          $8.append($$anchor3, text_3);
+        },
+        $$slots: { default: true }
+      });
+      $8.reset(div_4);
+      $8.append($$anchor2, div_4);
+    };
+    $8.if(node_5, ($$render) => {
+      if ($8.get(hasAppliedFilters))
+        $$render(consequent_2);
+    });
+  }
+  var node_8 = $8.sibling(node_5, 2);
+  _visually_hidden_live_region(node_8, {
+    get message() {
+      return $8.get(summaryMessage);
+    },
+    priority: "polite"
+  });
+  $8.reset(div);
+  $8.bind_this(div, ($$value) => $8.set(rootElement, $$value), () => $8.get(rootElement));
+  $8.append($$anchor, div);
+  $8.pop();
+}
+$8.delegate(["change"]);
+
+// src/components/faceted-filter-bar/index.ts
+var faceted_filter_bar_default = Faceted_filter_bar;
+export {
+  faceted_filter_bar_default as default,
+  Faceted_filter_bar as FacetedFilterBar
+};
+
+//# debugId=9104596E018E9DB364756E2164756E21