@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/experimental/json-viewer/index.d.ts

@@ -1,2 +1,4 @@
-export { default, JsonViewer } from '../../json-viewer/index.ts';
+import JsonViewer from '../../json-viewer/index.ts';
+export default JsonViewer;
 export type { JsonViewerProps } from '../../json-viewer/index.ts';
+export { JsonViewer };

package/dist/components/experimental/json-viewer/index.js

@@ -21,6 +21,398 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
+// src/components/json-viewer/index.ts
+import"@lostgradient/cinder/json-viewer/styles";
+
+// src/components/json-viewer/json-viewer.svelte
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+
+// src/components/json-viewer/_json-viewer-node.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { untrack } from "svelte";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/json-viewer/_json-viewer-node.svelte
+var root_3 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_4 = $.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_6 = $.from_html(`<li role="none"><!></li>`);
+var root_5 = $.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_2 = $.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
+var root_8 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_7 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
+var root_10 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_9 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
+function _json_viewer_node($$anchor, $$props) {
+  $.push($$props, true);
+  let root = $.prop($$props, "root", 3, false);
+  const isObject = $.derived(() => $$props.value !== null && typeof $$props.value === "object");
+  const isArray = $.derived(() => Array.isArray($$props.value));
+  const tooDeep = $.derived(() => $$props.depth >= $$props.maxDepth);
+  let collapsed = $.state($.proxy(untrack(() => $$props.depth >= $$props.initialDepth)));
+  const entries = $.derived(() => {
+    if (!$.get(isObject) || $.get(tooDeep))
+      return [];
+    if ($.get(isArray)) {
+      return $$props.value.map((item, i) => [i, item]);
+    }
+    return Object.entries($$props.value);
+  });
+  const itemCount = $.derived(() => $.get(entries).length);
+  const collectionLabel = $.derived(() => `${$.get(isArray) ? "array" : "object"}, ${$.get(itemCount)} ${$.get(itemCount) === 1 ? "item" : "items"}`);
+  const toggleLabel = $.derived(() => $$props.keyName === undefined ? $.get(collectionLabel) : `${$$props.keyName}: ${$.get(collectionLabel)}`);
+  function valueClass(v) {
+    if (v === null)
+      return "null";
+    if (typeof v === "string")
+      return "string";
+    if (typeof v === "number")
+      return "number";
+    if (typeof v === "boolean")
+      return "boolean";
+    return "unknown";
+  }
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var span = root_2();
+      var button = $.child(span);
+      var node_1 = $.child(button);
+      {
+        var consequent = ($$anchor3) => {
+          var span_1 = root_3();
+          var text2 = $.child(span_1);
+          $.reset(span_1);
+          $.template_effect(() => $.set_text(text2, `${$$props.keyName ?? ""}:`));
+          $.append($$anchor3, span_1);
+        };
+        $.if(node_1, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent);
+        });
+      }
+      var span_2 = $.sibling(node_1, 2);
+      var span_3 = $.sibling(span_2, 2);
+      var text_1 = $.child(span_3, true);
+      $.reset(span_3);
+      var node_2 = $.sibling(span_3, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_1 = root_4();
+          var span_4 = $.first_child(fragment_1);
+          var text_2 = $.child(span_4);
+          $.reset(span_4);
+          var span_5 = $.sibling(span_4, 2);
+          var text_3 = $.child(span_5, true);
+          $.reset(span_5);
+          $.template_effect(() => {
+            $.set_text(text_2, `${$.get(itemCount) ?? ""} ${$.get(itemCount) === 1 ? "item" : "items"}`);
+            $.set_text(text_3, $.get(isArray) ? "]" : "}");
+          });
+          $.append($$anchor3, fragment_1);
+        };
+        $.if(node_2, ($$render) => {
+          if ($.get(collapsed))
+            $$render(consequent_1);
+        });
+      }
+      $.reset(button);
+      var node_3 = $.sibling(button, 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var fragment_2 = root_5();
+          var ul = $.first_child(fragment_2);
+          $.each(ul, 23, () => $.get(entries), ([k, v]) => k, ($$anchor4, $$item, index) => {
+            var $$array = $.derived(() => $.to_array($.get($$item), 2));
+            let k = () => $.get($$array)[0];
+            let v = () => $.get($$array)[1];
+            var li = root_6();
+            var node_4 = $.child(li);
+            {
+              let $0 = $.derived(() => $$props.depth + 1);
+              let $1 = $.derived(() => $.get(index) + 1);
+              _json_viewer_node(node_4, {
+                get value() {
+                  return v();
+                },
+                get keyName() {
+                  return k();
+                },
+                get depth() {
+                  return $.get($0);
+                },
+                get initialDepth() {
+                  return $$props.initialDepth;
+                },
+                get maxDepth() {
+                  return $$props.maxDepth;
+                },
+                get position() {
+                  return $.get($1);
+                },
+                get setSize() {
+                  return $.get(entries).length;
+                }
+              });
+            }
+            $.reset(li);
+            $.append($$anchor4, li);
+          });
+          $.reset(ul);
+          var span_6 = $.sibling(ul, 2);
+          var text_4 = $.child(span_6, true);
+          $.reset(span_6);
+          $.template_effect(() => $.set_text(text_4, $.get(isArray) ? "]" : "}"));
+          $.append($$anchor3, fragment_2);
+        };
+        $.if(node_3, ($$render) => {
+          if (!$.get(collapsed))
+            $$render(consequent_2);
+        });
+      }
+      $.reset(span);
+      $.template_effect(($0) => {
+        $.set_class(span, 1, $0);
+        $.set_attribute(span, "aria-expanded", !$.get(collapsed));
+        $.set_attribute(span, "aria-label", $.get(toggleLabel));
+        $.set_attribute(span, "aria-level", $$props.depth + 1);
+        $.set_attribute(span, "aria-posinset", $$props.position);
+        $.set_attribute(span, "aria-setsize", $$props.setSize);
+        $.set_attribute(span, "tabindex", root() ? 0 : -1);
+        $.set_attribute(button, "aria-label", $.get(toggleLabel));
+        $.set_attribute(span_2, "data-cinder-collapsed", $.get(collapsed) || undefined);
+        $.set_text(text_1, $.get(isArray) ? "[" : "{");
+      }, [() => $.clsx(classNames("cinder-json-viewer__node"))]);
+      $.delegated("click", button, () => $.set(collapsed, !$.get(collapsed)));
+      $.append($$anchor2, span);
+    };
+    var consequent_5 = ($$anchor2) => {
+      var span_7 = root_7();
+      var node_5 = $.child(span_7);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var span_8 = root_8();
+          var text_5 = $.child(span_8);
+          $.reset(span_8);
+          $.template_effect(() => $.set_text(text_5, `${$$props.keyName ?? ""}:`));
+          $.append($$anchor3, span_8);
+        };
+        $.if(node_5, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent_4);
+        });
+      }
+      $.next(2);
+      $.reset(span_7);
+      $.template_effect(() => {
+        $.set_attribute(span_7, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_7, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_7, "aria-posinset", $$props.position);
+        $.set_attribute(span_7, "aria-setsize", $$props.setSize);
+      });
+      $.append($$anchor2, span_7);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var span_9 = root_9();
+      var node_6 = $.child(span_9);
+      {
+        var consequent_6 = ($$anchor3) => {
+          var span_10 = root_10();
+          var text_6 = $.child(span_10);
+          $.reset(span_10);
+          $.template_effect(() => $.set_text(text_6, `${$$props.keyName ?? ""}:`));
+          $.append($$anchor3, span_10);
+        };
+        $.if(node_6, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent_6);
+        });
+      }
+      var span_11 = $.sibling(node_6, 2);
+      var node_7 = $.child(span_11);
+      {
+        var consequent_7 = ($$anchor3) => {
+          var text_7 = $.text();
+          $.template_effect(() => $.set_text(text_7, `"${$$props.value ?? ""}"`));
+          $.append($$anchor3, text_7);
+        };
+        var alternate = ($$anchor3) => {
+          var text_8 = $.text();
+          $.template_effect(($0) => $.set_text(text_8, $0), [() => String($$props.value)]);
+          $.append($$anchor3, text_8);
+        };
+        $.if(node_7, ($$render) => {
+          if (typeof $$props.value === "string")
+            $$render(consequent_7);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $.reset(span_11);
+      $.reset(span_9);
+      $.template_effect(($0) => {
+        $.set_attribute(span_9, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_9, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_9, "aria-posinset", $$props.position);
+        $.set_attribute(span_9, "aria-setsize", $$props.setSize);
+        $.set_attribute(span_11, "data-cinder-type", $0);
+      }, [() => valueClass($$props.value)]);
+      $.append($$anchor2, span_9);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isObject) && !$.get(tooDeep))
+        $$render(consequent_3);
+      else if ($.get(isObject) && $.get(tooDeep))
+        $$render(consequent_5, 1);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+$.delegate(["click"]);
+
+// src/components/json-viewer/json-viewer.svelte
+var root_1 = $2.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p>This value can't be serialized as JSON (it may contain a circular reference or a BigInt).</p> <p>Pass a plain JSON-serializable value, or use the consumer's download or copy action.</p></div>`);
+var root_22 = $2.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p> </p> <p>Use the consumer's download or copy action to inspect the raw JSON.</p></div>`);
+var root_32 = $2.from_html(`<div role="tree" aria-label="JSON tree" tabindex="-1"><!></div>`);
+var root = $2.from_html(`<div><!></div>`);
+function Json_viewer($$anchor, $$props) {
+  $2.push($$props, true);
+  let initialDepth = $2.prop($$props, "initialDepth", 3, 1), maxDepth = $2.prop($$props, "maxDepth", 3, 50), maxBytes = $2.prop($$props, "maxBytes", 3, 1048576);
+  const serialized = $2.derived(() => {
+    try {
+      const json = JSON.stringify($$props.value);
+      if (typeof json !== "string")
+        return { ok: false };
+      return { ok: true, size: new Blob([json]).size };
+    } catch {
+      return { ok: false };
+    }
+  });
+  const unserializable = $2.derived(() => !$2.get(serialized).ok);
+  const tooLarge = $2.derived(() => $2.get(serialized).ok && $2.get(serialized).size > maxBytes());
+  function handleTreeKeydown(event) {
+    const tree = event.currentTarget;
+    const items = Array.from(tree.querySelectorAll('[role="treeitem"]'));
+    const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+    const current = eventTarget?.closest('[role="treeitem"]') ?? null;
+    const targetIsToggle = eventTarget?.closest(".cinder-json-viewer__toggle") !== null;
+    const currentIndex = current ? items.indexOf(current) : -1;
+    function focusItem(index) {
+      const item = items[index];
+      item?.focus();
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusItem(Math.min(currentIndex + 1, items.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusItem(Math.max(currentIndex - 1, 0));
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusItem(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusItem(items.length - 1);
+    } else if (event.key === "ArrowRight" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else if (current.getAttribute("aria-expanded") === "true") {
+        const firstChild = current.querySelector('.cinder-json-viewer__children [role="treeitem"]');
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+    } else if (event.key === "ArrowLeft" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else {
+        const parent = current.parentElement?.closest('[role="treeitem"]');
+        if (parent) {
+          event.preventDefault();
+          parent.focus();
+        }
+      }
+    } else if ((event.key === "Enter" || event.key === " " || event.key === "Spacebar") && current && !targetIsToggle) {
+      event.preventDefault();
+      const toggle = current.querySelector(".cinder-json-viewer__toggle");
+      toggle?.click();
+    }
+  }
+  var div = root();
+  var node = $2.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root_1();
+      $2.append($$anchor2, div_1);
+    };
+    var consequent_1 = ($$anchor2) => {
+      var div_2 = root_22();
+      var p = $2.child(div_2);
+      var text2 = $2.child(p);
+      $2.reset(p);
+      $2.next(2);
+      $2.reset(div_2);
+      $2.template_effect(($0, $1) => $2.set_text(text2, `Payload too large to render (~${$0 ?? ""} KB; cap
+        is ${$1 ?? ""} KB).`), [
+        () => Math.round(($2.get(serialized).ok ? $2.get(serialized).size : 0) / 1024),
+        () => Math.round(maxBytes() / 1024)
+      ]);
+      $2.append($$anchor2, div_2);
+    };
+    var alternate = ($$anchor2) => {
+      var div_3 = root_32();
+      var node_1 = $2.child(div_3);
+      _json_viewer_node(node_1, {
+        get value() {
+          return $$props.value;
+        },
+        depth: 0,
+        get initialDepth() {
+          return initialDepth();
+        },
+        get maxDepth() {
+          return maxDepth();
+        },
+        position: 1,
+        setSize: 1,
+        root: true
+      });
+      $2.reset(div_3);
+      $2.delegated("keydown", div_3, handleTreeKeydown);
+      $2.append($$anchor2, div_3);
+    };
+    $2.if(node, ($$render) => {
+      if ($2.get(unserializable))
+        $$render(consequent);
+      else if ($2.get(tooLarge))
+        $$render(consequent_1, 1);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $2.reset(div);
+  $2.template_effect(($0) => $2.set_class(div, 1, $0), [
+    () => $2.clsx(classNames("cinder-json-viewer", $$props.class))
+  ]);
+  $2.append($$anchor, div);
+  $2.pop();
+}
+$2.delegate(["keydown"]);
+
+// src/components/json-viewer/index.ts
+var json_viewer_default = Json_viewer;
 // ../../node_modules/esm-env/true.js
 var true_default = true;
 // src/utilities/dev-warn.ts
@@ -32,9 +424,10 @@ function devWarn(message, ...args) {
 
 // src/components/experimental/json-viewer/index.ts
 devWarn("[cinder] '@lostgradient/cinder/experimental/json-viewer' is deprecated and will be removed in the next major. " + "Import from '@lostgradient/cinder/json-viewer' instead.");
+var json_viewer_default2 = json_viewer_default;
 export {
-  default2 as default,
-  JsonViewer
+  json_viewer_default2 as default,
+  json_viewer_default as JsonViewer
 };
 
-//# debugId=244BAC05B1CCC92A64756E2164756E21
+//# debugId=F15E70AA4C728F4564756E2164756E21

package/dist/components/experimental/message/index.d.ts

@@ -1,2 +1,4 @@
-export { default, Message } from '../../message/index.ts';
+import Message from '../../message/index.ts';
+export default Message;
 export type { MessageProps, MessageRole } from '../../message/index.ts';
+export { Message };

package/dist/components/experimental/message/index.js

@@ -21,6 +21,83 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
+// src/components/message/index.ts
+import"@lostgradient/cinder/message/styles";
+
+// src/components/message/message.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/message/message.svelte
+var defaultNames = { user: "You", assistant: "Assistant", system: "System" };
+var root_1 = $.from_html(`<time class="cinder-message__time"> </time>`);
+var root_2 = $.from_html(`<div class="cinder-message__body"><!></div>`);
+var root = $.from_html(`<article><header class="cinder-message__header"><span class="cinder-message__name"> </span> <!></header> <!></article>`);
+function Message($$anchor, $$props) {
+  $.push($$props, true);
+  let rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "role",
+    "datetime",
+    "timestamp",
+    "name",
+    "class",
+    "children"
+  ]);
+  const visibleName = $.derived(() => $$props.name ?? defaultNames[$$props.role]);
+  var article = root();
+  $.attribute_effect(article, ($0) => ({ ...rest, "data-cinder-role": $$props.role, class: $0 }), [() => classNames("cinder-message", $$props.class)]);
+  var header = $.child(article);
+  var span = $.child(header);
+  var text = $.child(span, true);
+  $.reset(span);
+  var node = $.sibling(span, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var time = root_1();
+      var text_1 = $.child(time, true);
+      $.reset(time);
+      $.template_effect(() => {
+        $.set_attribute(time, "datetime", $$props.datetime);
+        $.set_text(text_1, $$props.timestamp ?? $$props.datetime);
+      });
+      $.append($$anchor2, time);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.datetime)
+        $$render(consequent);
+    });
+  }
+  $.reset(header);
+  var node_1 = $.sibling(header, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div = root_2();
+      var node_2 = $.child(div);
+      $.snippet(node_2, () => $$props.children);
+      $.reset(div);
+      $.append($$anchor2, div);
+    };
+    $.if(node_1, ($$render) => {
+      if ($$props.children)
+        $$render(consequent_1);
+    });
+  }
+  $.reset(article);
+  $.template_effect(() => $.set_text(text, $.get(visibleName)));
+  $.append($$anchor, article);
+  $.pop();
+}
+
+// src/components/message/index.ts
+var message_default = Message;
 // ../../node_modules/esm-env/true.js
 var true_default = true;
 // src/utilities/dev-warn.ts
@@ -32,9 +109,10 @@ function devWarn(message, ...args) {
 
 // src/components/experimental/message/index.ts
 devWarn("[cinder] '@lostgradient/cinder/experimental/message' is deprecated and will be removed in the next major. " + "Import from '@lostgradient/cinder/message' instead.");
+var message_default2 = message_default;
 export {
-  default2 as default,
-  Message
+  message_default2 as default,
+  message_default as Message
 };
 
-//# debugId=24D856FF18F1605C64756E2164756E21
+//# debugId=15ACD31F4F9593E264756E2164756E21

package/dist/components/faceted-filter-bar/faceted-filter-bar.css

@@ -29,9 +29,18 @@
     position: relative;
     display: inline-flex;
     align-items: center;
+    gap: var(--cinder-space-1);
     flex-shrink: 0;
   }
 
+  .cinder-faceted-filter-bar__facet-label {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    line-height: var(--cinder-leading-tight);
+    white-space: nowrap;
+  }
+
   /* Native select styled to match cinder input frame */
   .cinder-faceted-filter-bar__select {
     appearance: none;

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

@@ -27,6 +27,7 @@ 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";
@@ -827,7 +828,7 @@ function Button($$anchor, $$props) {
 
 // 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 cinder-sr-only"> </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_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>`);
@@ -852,18 +853,25 @@ function Faceted_filter_bar($$anchor, $$props) {
     "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}: ${filter.value}`);
+    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) {
@@ -872,8 +880,16 @@ function Faceted_filter_bar($$anchor, $$props) {
     }
     $$props.onsearchchange?.(value);
   }
-  function handleFilterRemove(key) {
+  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)) {
@@ -997,9 +1013,10 @@ function Faceted_filter_bar($$anchor, $$props) {
       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(filter).value}`);
-          let $1 = $8.derived(() => `Remove filter: ${$8.get(filter).label}: ${$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() {
@@ -1023,6 +1040,7 @@ function Faceted_filter_bar($$anchor, $$props) {
         get disabled() {
           return disabled();
         },
+        "aria-label": "Clear all filters",
         onclick: handleClearAll,
         children: ($$anchor3, $$slotProps) => {
           $8.next();
@@ -1047,6 +1065,7 @@ function Faceted_filter_bar($$anchor, $$props) {
     priority: "polite"
   });
   $8.reset(div);
+  $8.bind_this(div, ($$value) => $8.set(rootElement, $$value), () => $8.get(rootElement));
   $8.append($$anchor, div);
   $8.pop();
 }
@@ -1059,4 +1078,4 @@ export {
   Faceted_filter_bar as FacetedFilterBar
 };
 
-//# debugId=2E5AE928E1147D5864756E2164756E21
+//# debugId=9104596E018E9DB364756E2164756E21

package/dist/components/file-upload/file-upload.css

@@ -18,9 +18,9 @@
     background: var(--cinder-file-upload-background);
     padding: var(--cinder-space-4);
     transition:
-      border-color 150ms ease,
-      background-color 150ms ease,
-      box-shadow 150ms ease;
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   .cinder-file-upload__dropzone[data-drag-active] {
@@ -35,7 +35,7 @@
   }
 
   .cinder-file-upload__dropzone:focus-within {
-    outline: 2px solid transparent;
+    outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
@@ -169,7 +169,7 @@
     block-size: 100%;
     background: var(--cinder-file-upload-progress-fill);
     inline-size: calc(clamp(0, var(--cinder-file-upload-progress, 0), 100) * 1%);
-    transition: inline-size 150ms ease;
+    transition: inline-size var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   .cinder-file-upload__error {