@depict-ai/ui 4.10.12 → 4.10.13

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.12";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.13";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2612,7 +2612,16 @@ function $67b173f9db427028$export$ca21a16d65b3dd8({
       var _c$ = $9HbP8$memo(() => !!get_show_extras());
       return () => _c$() ? i18n_.view_less_() : i18n_.view_more_();
     })());
-    $9HbP8$effect(() => _el$.classList.toggle("expanded", !!get_show_extras()));
+    $9HbP8$effect(_p$ => {
+      var _v$ = get_show_extras(),
+        _v$2 = !!get_show_extras();
+      _v$ !== _p$.e && $9HbP8$setAttribute(_el$, "aria-expanded", _p$.e = _v$);
+      _v$2 !== _p$.t && _el$.classList.toggle("expanded", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
@@ -2931,7 +2940,7 @@ function $eb8d9bf3b5700c26$export$430444115f70a734({
     return _el$;
   })();
 }
-var $a6b08770e164eced$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=range><div class=input-group><div class=field><input type=number></div><div class=separator>-</div><div class=field><input type=number></div></div><!$><!/><div class=value-text><span class=min><!$><!/><!$><!/><!$><!/></span><span class=max><!$><!/><!$><!/><!$><!/>`),
+var $a6b08770e164eced$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=range><div class=input-group><div class=field><input type=number></div><div class=separator aria-hidden=true>-</div><div class=field><input type=number></div></div><!$><!/><div class=value-text><span class=min><!$><!/><!$><!/><!$><!/></span><span class=max><!$><!/><!$><!/><!$><!/>`),
   $a6b08770e164eced$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=slider><div class=progress>`),
   $a6b08770e164eced$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=range-group><input type=range step=any><input type=range step=any>`);
 function $a6b08770e164eced$export$e0d834a0ad870cda({
@@ -3065,7 +3074,8 @@ function $a6b08770e164eced$var$RangeSelector({
       min_: min_,
       current_range_: current_range_,
       i18n_: i18n_,
-      should_be_disabled_: should_be_disabled_
+      should_be_disabled_: should_be_disabled_,
+      priceFormatting_: price_formatting_
     }), _el$24, _co$7);
     $9HbP8$insert(_el$9, pre_price, _el$11, _co$);
     $9HbP8$insert(_el$9, $9HbP8$createComponent((0, $8c0f86cb3e266eeb$export$a71e92cfbb498adc), {
@@ -3129,7 +3139,8 @@ function $a6b08770e164eced$var$ExponentialSlider({
   min_: min_,
   i18n_: i18n_,
   max_: max_,
-  should_be_disabled_: should_be_disabled_
+  should_be_disabled_: should_be_disabled_,
+  priceFormatting_: priceFormatting_
 }) {
   // inspired by https://observablehq.com/@mbostock/nonlinear-slider
   const transform_linear_to_nonlinear = ([smaller, larger]) => [Math.sqrt(smaller), Math.sqrt(larger)];
@@ -3163,7 +3174,8 @@ function $a6b08770e164eced$var$ExponentialSlider({
     max_: modified_max,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   });
 }
 function $a6b08770e164eced$var$LinearSlider({
@@ -3172,12 +3184,17 @@ function $a6b08770e164eced$var$LinearSlider({
   current_range_: current_range_,
   offset_value_calculator_: offset_value_calculator_,
   i18n_: i18n_,
-  should_be_disabled_: should_be_disabled_
+  should_be_disabled_: should_be_disabled_,
+  priceFormatting_: priceFormatting_
 }) {
   let range_input_1;
   let range_input_2;
   let clickable_slider;
   const [get_current_range, set_current_range] = current_range_;
+  const formatRealPrice = value => {
+    const priceFormatting = priceFormatting_();
+    return priceFormatting.pre_ + $9HbP8$standard_price_format(value, priceFormatting.places_after_comma_, priceFormatting.decimal_places_delimiter_, priceFormatting.thousands_delimiter_) + priceFormatting.post_;
+  };
   const progress_styling = $9HbP8$createMemo(() => {
     const min = min_();
     const span = max_() - min;
@@ -3234,20 +3251,24 @@ function $a6b08770e164eced$var$LinearSlider({
     $9HbP8$effect(_p$ => {
       var _v$10 = should_be_disabled_(),
         _v$11 = i18n_.range_filter_low_point_aria_label_(),
-        _v$12 = min_(),
-        _v$13 = max_(),
-        _v$14 = should_be_disabled_(),
-        _v$15 = i18n_.range_filter_high_point_aria_label_(),
-        _v$16 = min_(),
-        _v$17 = max_();
+        _v$12 = formatRealPrice(get_current_range()[0]),
+        _v$13 = min_(),
+        _v$14 = max_(),
+        _v$15 = should_be_disabled_(),
+        _v$16 = i18n_.range_filter_high_point_aria_label_(),
+        _v$17 = formatRealPrice(get_current_range()[1]),
+        _v$18 = min_(),
+        _v$19 = max_();
       _v$10 !== _p$.e && $9HbP8$setProperty(_el$28, "disabled", _p$.e = _v$10);
       _v$11 !== _p$.t && $9HbP8$setAttribute(_el$28, "aria-label", _p$.t = _v$11);
-      _v$12 !== _p$.a && $9HbP8$setAttribute(_el$28, "min", _p$.a = _v$12);
-      _v$13 !== _p$.o && $9HbP8$setAttribute(_el$28, "max", _p$.o = _v$13);
-      _v$14 !== _p$.i && $9HbP8$setProperty(_el$29, "disabled", _p$.i = _v$14);
-      _v$15 !== _p$.n && $9HbP8$setAttribute(_el$29, "aria-label", _p$.n = _v$15);
-      _v$16 !== _p$.s && $9HbP8$setAttribute(_el$29, "min", _p$.s = _v$16);
-      _v$17 !== _p$.h && $9HbP8$setAttribute(_el$29, "max", _p$.h = _v$17);
+      _v$12 !== _p$.a && $9HbP8$setAttribute(_el$28, "aria-valuetext", _p$.a = _v$12);
+      _v$13 !== _p$.o && $9HbP8$setAttribute(_el$28, "min", _p$.o = _v$13);
+      _v$14 !== _p$.i && $9HbP8$setAttribute(_el$28, "max", _p$.i = _v$14);
+      _v$15 !== _p$.n && $9HbP8$setProperty(_el$29, "disabled", _p$.n = _v$15);
+      _v$16 !== _p$.s && $9HbP8$setAttribute(_el$29, "aria-label", _p$.s = _v$16);
+      _v$17 !== _p$.h && $9HbP8$setAttribute(_el$29, "aria-valuetext", _p$.h = _v$17);
+      _v$18 !== _p$.r && $9HbP8$setAttribute(_el$29, "min", _p$.r = _v$18);
+      _v$19 !== _p$.d && $9HbP8$setAttribute(_el$29, "max", _p$.d = _v$19);
       return _p$;
     }, {
       e: undefined,
@@ -3257,7 +3278,9 @@ function $a6b08770e164eced$var$LinearSlider({
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined
+      h: undefined,
+      r: undefined,
+      d: undefined
     });
     $9HbP8$effect(() => $9HbP8$setProperty(_el$28, "value", $9HbP8$createMemo(() => {
       min_();
@@ -4139,6 +4162,13 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
                 _el$7 = _el$6.nextSibling,
                 [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
               $9HbP8$spread(_el$2, $9HbP8$mergeProps1(attributes, {
+                "type": "button",
+                get ["aria-pressed"]() {
+                  return is_selected();
+                },
+                get ["aria-label"]() {
+                  return $9HbP8$memo(() => value().count_ != undefined)() ? `${label()}, ${value().count_}` : label();
+                },
                 get disabled() {
                   return $9HbP8$memo(() => !!count_zero())() && !is_selected();
                 },
@@ -4342,7 +4372,14 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
       return !!data?.some(item => $91aa8ee9f431800d$export$325f75597868c4f0(item) === value);
     });
     const value = $9HbP8$createMemo(() => checkbox().value_);
-    const label_text = $9HbP8$createMemo(() => checkbox().name_ || value() + "");
+    const label_text = $9HbP8$createMemo(() => {
+      const name = checkbox().name_;
+      if (name) return name;
+      const value_string = value() + "";
+      if (backendFilterV2()) return value_string;
+      // Legacy values are "Name;#hex" - split is used to get the name so that screen readers don't announce the hex code
+      return value_string.split(";")[0] || value_string;
+    });
     const count = $9HbP8$createMemo(() => checkbox().count_);
     const colorNameDatasetValue = $9HbP8$createMemo(() => {
       if (backendFilterV2()) return label_text();
@@ -4814,7 +4851,7 @@ $9HbP8$delegateEvents(["input", "click"]);
 var $fab07f52c9861732$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible>`),
   $fab07f52c9861732$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button class=clear-group><!$><!/><span>`),
   $fab07f52c9861732$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=view-more-clear><!$><!/><!$><!/>`),
-  $fab07f52c9861732$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible-body><div class=filter-part><!$><!/><!$><!/></div><!$><!/>`),
+  $fab07f52c9861732$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible-body><fieldset class=filter-part><!$><!/><!$><!/></fieldset><!$><!/>`),
   $fab07f52c9861732$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<details class=filter-collapsible>`),
   $fab07f52c9861732$var$_tmpl$6 = /*#__PURE__*/$9HbP8$template(`<summary class=filter-group-summary><div class=summary><span></span><div class=selected-w-sign><!$><!/><!$><!/>`),
   $fab07f52c9861732$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class=ungrouped>`),
@@ -4904,6 +4941,7 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
             const a_filter_is_selected = $9HbP8$createMemo(() => selected_filters_in_group().size);
             const [get_details_width, set_get_details_width] = $9HbP8$createSignal();
             const details_element_width_ = $9HbP8$createMemo(() => get_details_width?.()?.());
+            const title_id = $9HbP8$make_random_classname();
             return $9HbP8$createComponent((0, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
@@ -4924,6 +4962,7 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
                     [_el$25, _co$7] = $9HbP8$getNextMarker(_el$24.nextSibling),
                     _el$26 = _el$25.nextSibling,
                     [_el$27, _co$8] = $9HbP8$getNextMarker(_el$26.nextSibling);
+                  $9HbP8$setAttribute(_el$22, "id", title_id);
                   $9HbP8$insert(_el$22, section_);
                   $9HbP8$insert(_el$23, $9HbP8$createComponent((0, $9HbP8$Show), {
                     get when() {
@@ -4958,6 +4997,7 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
                   [_el$7, _co$2] = $9HbP8$getNextMarker(_el$6.nextSibling),
                   _el$17 = _el$3.nextSibling,
                   [_el$18, _co$6] = $9HbP8$getNextMarker(_el$17.nextSibling);
+                $9HbP8$setAttribute(_el$3, "aria-labelledby", title_id);
                 $9HbP8$insert(_el$3, $9HbP8$createComponent(SearchThisFilterGroup_, {}), _el$5, _co$);
                 $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Index), {
                   get each() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.12",
+  "version": "4.10.13",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.4",
-    "@depict-ai/types": "^5.6.2",
-    "@depict-ai/utilishared": "^2.6.2",
+    "@depict-ai/plp-styling": "^4.6.5",
+    "@depict-ai/types": "^5.6.3",
+    "@depict-ai/utilishared": "^2.6.3",
     "solid-js": "^1.9.10"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.12";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.13";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2311,13 +2311,13 @@ function $a904ccf883f60231$export$f21ab0717a89c77f(props) {
     height: "12"
   }), () => $3hooq$solidjsweb.ssr($a904ccf883f60231$var$_tmpl$), true);
 }
-var $b0477e4d832f090e$var$_tmpl$ = ["<button", ' type="button" class="', '"><!--$-->', "<!--/--><span>", "</span></button>"];
+var $b0477e4d832f090e$var$_tmpl$ = ["<button", ' type="button" class="', '"', "><!--$-->", "<!--/--><span>", "</span></button>"];
 function $b0477e4d832f090e$export$ca21a16d65b3dd8(_ref) {
   let {
     show_extras_: [get_show_extras, set_show_extras],
     i18n_: i18n_
   } = _ref;
-  return $3hooq$solidjsweb.ssr($b0477e4d832f090e$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "expand-filter ".concat(get_show_extras() ? "expanded" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a904ccf883f60231$export$f21ab0717a89c77f), {})), get_show_extras() ? $3hooq$solidjsweb.escape(i18n_.view_less_()) : $3hooq$solidjsweb.escape(i18n_.view_more_()));
+  return $3hooq$solidjsweb.ssr($b0477e4d832f090e$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "expand-filter ".concat(get_show_extras() ? "expanded" : ""), $3hooq$solidjsweb.ssrAttribute("aria-expanded", $3hooq$solidjsweb.escape(get_show_extras(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a904ccf883f60231$export$f21ab0717a89c77f), {})), get_show_extras() ? $3hooq$solidjsweb.escape(i18n_.view_less_()) : $3hooq$solidjsweb.escape(i18n_.view_more_()));
 }
 var $23c3f390dee33ff8$var$_tmpl$ = ["<span", ' class="highlighted-part">', "</span>"],
   $23c3f390dee33ff8$var$_tmpl$2 = ["<span", ' class="', '"', ">", "</span>"];
@@ -2566,7 +2566,7 @@ function $d9239dad9a9d899b$export$430444115f70a734(_ref) {
     }
   })));
 }
-var $0257c760a99bfacb$var$_tmpl$ = ["<div", ' class="', '"><div class="input-group"><div class="field"><input', ' type="number"', '></div><div class="separator">-</div><div class="field"><input', ' type="number"', "></div></div><!--$-->", '<!--/--><div class="value-text"><span class="min"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", '<!--/--></span><span class="max"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div></div>"],
+var $0257c760a99bfacb$var$_tmpl$ = ["<div", ' class="', '"><div class="input-group"><div class="field"><input', ' type="number"', '></div><div class="separator" aria-hidden="true">-</div><div class="field"><input', ' type="number"', "></div></div><!--$-->", '<!--/--><div class="value-text"><span class="min"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", '<!--/--></span><span class="max"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div></div>"],
   $0257c760a99bfacb$var$_tmpl$2 = ["<div", ' class="slider"><div class="progress" style="', '"></div></div>'],
   $0257c760a99bfacb$var$_tmpl$3 = ["<div", ' class="range-group"><input', ' type="range"', ' step="any"><input', ' type="range"', ' step="any"></div>'];
 function $0257c760a99bfacb$export$e0d834a0ad870cda(_ref) {
@@ -2665,7 +2665,8 @@ function $0257c760a99bfacb$var$RangeSelector(_ref3) {
     min_: min_,
     current_range_: current_range_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: price_formatting_
   })), $3hooq$solidjsweb.escape(pre_price()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
     get price_() {
       return min_();
@@ -2688,7 +2689,8 @@ function $0257c760a99bfacb$var$ExponentialSlider(_ref4) {
     min_: min_,
     i18n_: i18n_,
     max_: max_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   } = _ref4;
   // inspired by https://observablehq.com/@mbostock/nonlinear-slider
   const transform_linear_to_nonlinear = _ref5 => {
@@ -2725,7 +2727,8 @@ function $0257c760a99bfacb$var$ExponentialSlider(_ref4) {
     max_: modified_max,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   });
 }
 function $0257c760a99bfacb$var$LinearSlider(_ref6) {
@@ -2735,12 +2738,17 @@ function $0257c760a99bfacb$var$LinearSlider(_ref6) {
     current_range_: current_range_,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   } = _ref6;
   let range_input_1;
   let range_input_2;
   let clickable_slider;
   const [get_current_range, set_current_range] = current_range_;
+  const formatRealPrice = value => {
+    const priceFormatting = priceFormatting_();
+    return priceFormatting.pre_ + $3hooq$depictaiutilishared.standard_price_format(value, priceFormatting.places_after_comma_, priceFormatting.decimal_places_delimiter_, priceFormatting.thousands_delimiter_) + priceFormatting.post_;
+  };
   const progress_styling = $3hooq$solidjs.createMemo(() => {
     const min = min_();
     const span = max_() - min;
@@ -2759,13 +2767,13 @@ function $0257c760a99bfacb$var$LinearSlider(_ref6) {
       el.value = get_current_range()[index];
     });
   };
-  return [$3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle(progress_styling())), $3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_low_point_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape($3hooq$solidjs.createMemo(() => {
+  return [$3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle(progress_styling())), $3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_low_point_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("aria-valuetext", $3hooq$solidjsweb.escape(formatRealPrice(get_current_range()[0]), true), false) + $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape($3hooq$solidjs.createMemo(() => {
     min_();
     max_();
     return get_current_range()[0];
   }, undefined, {
     equals: false
-  })(), true), false), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_high_point_aria_label_(), true), false), $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false))];
+  })(), true), false), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_high_point_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("aria-valuetext", $3hooq$solidjsweb.escape(formatRealPrice(get_current_range()[1]), true), false), $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false))];
 }
 function $0257c760a99bfacb$var$set_range_with_sanitation(min_, max_, current_range_signal, index, target_el) {
   let get_offset_value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : (value, how_many) => value + how_many;
@@ -3633,6 +3641,13 @@ const $cd0e5524f9476f9b$export$414f6a19d38e655c = _ref => {
             const label = $3hooq$solidjs.createMemo(() => value().name_ || value().value_ + "");
             const count_zero = $3hooq$solidjs.createMemo(() => value().count_ === 0);
             return $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.mergeProps(attributes, {
+              type: "button",
+              get ["aria-pressed"]() {
+                return is_selected();
+              },
+              get ["aria-label"]() {
+                return value().count_ != undefined ? "".concat(label(), ", ").concat(value().count_) : label();
+              },
               get disabled() {
                 return count_zero() && !is_selected();
               },
@@ -3811,7 +3826,14 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
       return !!(data !== null && data !== void 0 && data.some(item => $e2d74bb03cc5252e$export$325f75597868c4f0(item) === value));
     });
     const value = $3hooq$solidjs.createMemo(() => checkbox().value_);
-    const label_text = $3hooq$solidjs.createMemo(() => checkbox().name_ || value() + "");
+    const label_text = $3hooq$solidjs.createMemo(() => {
+      const name = checkbox().name_;
+      if (name) return name;
+      const value_string = value() + "";
+      if (backendFilterV2()) return value_string;
+      // Legacy values are "Name;#hex" - split is used to get the name so that screen readers don't announce the hex code
+      return value_string.split(";")[0] || value_string;
+    });
     const count = $3hooq$solidjs.createMemo(() => checkbox().count_);
     const colorNameDatasetValue = $3hooq$solidjs.createMemo(() => {
       var _split2;
@@ -4239,9 +4261,9 @@ function $8e7ac26c00243687$var$find_str_arr_in_str_arr_arr(operation, haystack,
 var $164d474fea221d77$var$_tmpl$ = ["<div", ' class="filter-collapsible">', "</div>"],
   $164d474fea221d77$var$_tmpl$2 = ["<button", ' class="clear-group"><!--$-->', "<!--/--><span>", "</span></button>"],
   $164d474fea221d77$var$_tmpl$3 = ["<div", ' class="view-more-clear"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $164d474fea221d77$var$_tmpl$4 = ["<div", ' class="filter-collapsible-body"><div class="filter-part"><!--$-->', "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $164d474fea221d77$var$_tmpl$4 = ["<div", ' class="filter-collapsible-body"><fieldset class="filter-part"', "><!--$-->", "<!--/--><!--$-->", "<!--/--></fieldset><!--$-->", "<!--/--></div>"],
   $164d474fea221d77$var$_tmpl$5 = ["<details", ' class="filter-collapsible"', "></details>"],
-  $164d474fea221d77$var$_tmpl$6 = ["<summary", ' class="filter-group-summary"><div class="summary"><span>', '</span><div class="selected-w-sign"><!--$-->', "<!--/--><!--$-->", "<!--/--></div></div></summary>"],
+  $164d474fea221d77$var$_tmpl$6 = ["<summary", ' class="filter-group-summary"><div class="summary"><span', ">", '</span><div class="selected-w-sign"><!--$-->', "<!--/--><!--$-->", "<!--/--></div></div></summary>"],
   $164d474fea221d77$var$_tmpl$7 = ["<div", ' class="ungrouped">', "</div>"],
   $164d474fea221d77$var$_tmpl$8 = ["<button", ' class="clear-all-filters major">', "</button>"];
 function $164d474fea221d77$export$3f1a388cc0d8fed7(props) {
@@ -4338,13 +4360,14 @@ function $164d474fea221d77$var$ActualFilterBody(props) {
               var _get_details_width;
               return get_details_width === null || get_details_width === void 0 ? void 0 : (_get_details_width = get_details_width()) === null || _get_details_width === void 0 ? void 0 : _get_details_width();
             });
+            const title_id = $3hooq$depictaiutilishared.make_random_classname();
             return $3hooq$solidjsweb.createComponent((0, $4cfe8400ed3f92c4$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
                 return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$5, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("data-group-title", $3hooq$solidjsweb.escape(section_, true), false));
               },
               get summary_() {
-                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(section_), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("id", $3hooq$solidjsweb.escape(title_id, true), false), $3hooq$solidjsweb.escape(section_), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
                   get when() {
                     return a_filter_is_selected();
                   },
@@ -4366,7 +4389,7 @@ function $164d474fea221d77$var$ActualFilterBody(props) {
                 })));
               },
               get children() {
-                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$4, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(SearchThisFilterGroup_, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
+                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$4, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-labelledby", $3hooq$solidjsweb.escape(title_id, true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(SearchThisFilterGroup_, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
                   get each() {
                     return searched_filter_array_();
                   },

package/server/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.12";
+export const version = "4.10.13";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.12";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.13";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -2206,13 +2206,13 @@ function $ff3225aef892a467$export$f21ab0717a89c77f(props) {
     height: "12"
   }), () => $b8hua$ssr($ff3225aef892a467$var$_tmpl$), true);
 }
-var $3e850b2f2cca761f$var$_tmpl$ = ["<button", ' type="button" class="', '"><!--$-->', "<!--/--><span>", "</span></button>"];
+var $3e850b2f2cca761f$var$_tmpl$ = ["<button", ' type="button" class="', '"', "><!--$-->", "<!--/--><span>", "</span></button>"];
 function $3e850b2f2cca761f$export$ca21a16d65b3dd8(_ref) {
   let {
     show_extras_: [get_show_extras, set_show_extras],
     i18n_: i18n_
   } = _ref;
-  return $b8hua$ssr($3e850b2f2cca761f$var$_tmpl$, $b8hua$ssrHydrationKey(), "expand-filter ".concat(get_show_extras() ? "expanded" : ""), $b8hua$escape($b8hua$createComponent((0, $ff3225aef892a467$export$f21ab0717a89c77f), {})), get_show_extras() ? $b8hua$escape(i18n_.view_less_()) : $b8hua$escape(i18n_.view_more_()));
+  return $b8hua$ssr($3e850b2f2cca761f$var$_tmpl$, $b8hua$ssrHydrationKey(), "expand-filter ".concat(get_show_extras() ? "expanded" : ""), $b8hua$ssrAttribute("aria-expanded", $b8hua$escape(get_show_extras(), true), false), $b8hua$escape($b8hua$createComponent((0, $ff3225aef892a467$export$f21ab0717a89c77f), {})), get_show_extras() ? $b8hua$escape(i18n_.view_less_()) : $b8hua$escape(i18n_.view_more_()));
 }
 var $02b6641aa50ce528$var$_tmpl$ = ["<span", ' class="highlighted-part">', "</span>"],
   $02b6641aa50ce528$var$_tmpl$2 = ["<span", ' class="', '"', ">", "</span>"];
@@ -2461,7 +2461,7 @@ function $b54fc842e721c9eb$export$430444115f70a734(_ref) {
     }
   })));
 }
-var $1e7465a8ffa97f6c$var$_tmpl$ = ["<div", ' class="', '"><div class="input-group"><div class="field"><input', ' type="number"', '></div><div class="separator">-</div><div class="field"><input', ' type="number"', "></div></div><!--$-->", '<!--/--><div class="value-text"><span class="min"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", '<!--/--></span><span class="max"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div></div>"],
+var $1e7465a8ffa97f6c$var$_tmpl$ = ["<div", ' class="', '"><div class="input-group"><div class="field"><input', ' type="number"', '></div><div class="separator" aria-hidden="true">-</div><div class="field"><input', ' type="number"', "></div></div><!--$-->", '<!--/--><div class="value-text"><span class="min"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", '<!--/--></span><span class="max"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div></div>"],
   $1e7465a8ffa97f6c$var$_tmpl$2 = ["<div", ' class="slider"><div class="progress" style="', '"></div></div>'],
   $1e7465a8ffa97f6c$var$_tmpl$3 = ["<div", ' class="range-group"><input', ' type="range"', ' step="any"><input', ' type="range"', ' step="any"></div>'];
 function $1e7465a8ffa97f6c$export$e0d834a0ad870cda(_ref) {
@@ -2560,7 +2560,8 @@ function $1e7465a8ffa97f6c$var$RangeSelector(_ref3) {
     min_: min_,
     current_range_: current_range_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: price_formatting_
   })), $b8hua$escape(pre_price()), $b8hua$escape($b8hua$createComponent((0, $60ec7a29849d81db$export$a71e92cfbb498adc), {
     get price_() {
       return min_();
@@ -2583,7 +2584,8 @@ function $1e7465a8ffa97f6c$var$ExponentialSlider(_ref4) {
     min_: min_,
     i18n_: i18n_,
     max_: max_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   } = _ref4;
   // inspired by https://observablehq.com/@mbostock/nonlinear-slider
   const transform_linear_to_nonlinear = _ref5 => {
@@ -2620,7 +2622,8 @@ function $1e7465a8ffa97f6c$var$ExponentialSlider(_ref4) {
     max_: modified_max,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   });
 }
 function $1e7465a8ffa97f6c$var$LinearSlider(_ref6) {
@@ -2630,12 +2633,17 @@ function $1e7465a8ffa97f6c$var$LinearSlider(_ref6) {
     current_range_: current_range_,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   } = _ref6;
   let range_input_1;
   let range_input_2;
   let clickable_slider;
   const [get_current_range, set_current_range] = current_range_;
+  const formatRealPrice = value => {
+    const priceFormatting = priceFormatting_();
+    return priceFormatting.pre_ + $b8hua$standard_price_format(value, priceFormatting.places_after_comma_, priceFormatting.decimal_places_delimiter_, priceFormatting.thousands_delimiter_) + priceFormatting.post_;
+  };
   const progress_styling = $b8hua$createMemo(() => {
     const min = min_();
     const span = max_() - min;
@@ -2654,13 +2662,13 @@ function $1e7465a8ffa97f6c$var$LinearSlider(_ref6) {
       el.value = get_current_range()[index];
     });
   };
-  return [$b8hua$ssr($1e7465a8ffa97f6c$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle(progress_styling())), $b8hua$ssr($1e7465a8ffa97f6c$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("disabled", should_be_disabled_(), true), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.range_filter_low_point_aria_label_(), true), false) + $b8hua$ssrAttribute("min", $b8hua$escape(min_(), true), false) + $b8hua$ssrAttribute("max", $b8hua$escape(max_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape($b8hua$createMemo(() => {
+  return [$b8hua$ssr($1e7465a8ffa97f6c$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle(progress_styling())), $b8hua$ssr($1e7465a8ffa97f6c$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("disabled", should_be_disabled_(), true), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.range_filter_low_point_aria_label_(), true), false) + $b8hua$ssrAttribute("aria-valuetext", $b8hua$escape(formatRealPrice(get_current_range()[0]), true), false) + $b8hua$ssrAttribute("min", $b8hua$escape(min_(), true), false) + $b8hua$ssrAttribute("max", $b8hua$escape(max_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape($b8hua$createMemo(() => {
     min_();
     max_();
     return get_current_range()[0];
   }, undefined, {
     equals: false
-  })(), true), false), $b8hua$ssrAttribute("disabled", should_be_disabled_(), true) + $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.range_filter_high_point_aria_label_(), true), false), $b8hua$ssrAttribute("min", $b8hua$escape(min_(), true), false) + $b8hua$ssrAttribute("max", $b8hua$escape(max_(), true), false))];
+  })(), true), false), $b8hua$ssrAttribute("disabled", should_be_disabled_(), true) + $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.range_filter_high_point_aria_label_(), true), false) + $b8hua$ssrAttribute("aria-valuetext", $b8hua$escape(formatRealPrice(get_current_range()[1]), true), false), $b8hua$ssrAttribute("min", $b8hua$escape(min_(), true), false) + $b8hua$ssrAttribute("max", $b8hua$escape(max_(), true), false))];
 }
 function $1e7465a8ffa97f6c$var$set_range_with_sanitation(min_, max_, current_range_signal, index, target_el) {
   let get_offset_value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : (value, how_many) => value + how_many;
@@ -3528,6 +3536,13 @@ const $830ea8efda59884e$export$414f6a19d38e655c = _ref => {
             const label = $b8hua$createMemo(() => value().name_ || value().value_ + "");
             const count_zero = $b8hua$createMemo(() => value().count_ === 0);
             return $b8hua$ssrElement("button", $b8hua$mergeProps1(attributes, {
+              type: "button",
+              get ["aria-pressed"]() {
+                return is_selected();
+              },
+              get ["aria-label"]() {
+                return value().count_ != undefined ? "".concat(label(), ", ").concat(value().count_) : label();
+              },
               get disabled() {
                 return count_zero() && !is_selected();
               },
@@ -3706,7 +3721,14 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
       return !!(data !== null && data !== void 0 && data.some(item => $af5d8e0b7d97a7f6$export$325f75597868c4f0(item) === value));
     });
     const value = $b8hua$createMemo(() => checkbox().value_);
-    const label_text = $b8hua$createMemo(() => checkbox().name_ || value() + "");
+    const label_text = $b8hua$createMemo(() => {
+      const name = checkbox().name_;
+      if (name) return name;
+      const value_string = value() + "";
+      if (backendFilterV2()) return value_string;
+      // Legacy values are "Name;#hex" - split is used to get the name so that screen readers don't announce the hex code
+      return value_string.split(";")[0] || value_string;
+    });
     const count = $b8hua$createMemo(() => checkbox().count_);
     const colorNameDatasetValue = $b8hua$createMemo(() => {
       var _split2;
@@ -4134,9 +4156,9 @@ function $e354b2f9ce33cb75$var$find_str_arr_in_str_arr_arr(operation, haystack,
 var $f6b0500577e1b210$var$_tmpl$ = ["<div", ' class="filter-collapsible">', "</div>"],
   $f6b0500577e1b210$var$_tmpl$2 = ["<button", ' class="clear-group"><!--$-->', "<!--/--><span>", "</span></button>"],
   $f6b0500577e1b210$var$_tmpl$3 = ["<div", ' class="view-more-clear"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $f6b0500577e1b210$var$_tmpl$4 = ["<div", ' class="filter-collapsible-body"><div class="filter-part"><!--$-->', "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $f6b0500577e1b210$var$_tmpl$4 = ["<div", ' class="filter-collapsible-body"><fieldset class="filter-part"', "><!--$-->", "<!--/--><!--$-->", "<!--/--></fieldset><!--$-->", "<!--/--></div>"],
   $f6b0500577e1b210$var$_tmpl$5 = ["<details", ' class="filter-collapsible"', "></details>"],
-  $f6b0500577e1b210$var$_tmpl$6 = ["<summary", ' class="filter-group-summary"><div class="summary"><span>', '</span><div class="selected-w-sign"><!--$-->', "<!--/--><!--$-->", "<!--/--></div></div></summary>"],
+  $f6b0500577e1b210$var$_tmpl$6 = ["<summary", ' class="filter-group-summary"><div class="summary"><span', ">", '</span><div class="selected-w-sign"><!--$-->', "<!--/--><!--$-->", "<!--/--></div></div></summary>"],
   $f6b0500577e1b210$var$_tmpl$7 = ["<div", ' class="ungrouped">', "</div>"],
   $f6b0500577e1b210$var$_tmpl$8 = ["<button", ' class="clear-all-filters major">', "</button>"];
 function $f6b0500577e1b210$export$3f1a388cc0d8fed7(props) {
@@ -4233,13 +4255,14 @@ function $f6b0500577e1b210$var$ActualFilterBody(props) {
               var _get_details_width;
               return get_details_width === null || get_details_width === void 0 ? void 0 : (_get_details_width = get_details_width()) === null || _get_details_width === void 0 ? void 0 : _get_details_width();
             });
+            const title_id = $b8hua$make_random_classname();
             return $b8hua$createComponent((0, $ad371564683947ab$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
                 return $b8hua$ssr($f6b0500577e1b210$var$_tmpl$5, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("data-group-title", $b8hua$escape(section_, true), false));
               },
               get summary_() {
-                return $b8hua$ssr($f6b0500577e1b210$var$_tmpl$6, $b8hua$ssrHydrationKey(), $b8hua$escape(section_), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+                return $b8hua$ssr($f6b0500577e1b210$var$_tmpl$6, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("id", $b8hua$escape(title_id, true), false), $b8hua$escape(section_), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
                   get when() {
                     return a_filter_is_selected();
                   },
@@ -4261,7 +4284,7 @@ function $f6b0500577e1b210$var$ActualFilterBody(props) {
                 })));
               },
               get children() {
-                return $b8hua$ssr($f6b0500577e1b210$var$_tmpl$4, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent(SearchThisFilterGroup_, {})), $b8hua$escape($b8hua$createComponent((0, $b8hua$Index), {
+                return $b8hua$ssr($f6b0500577e1b210$var$_tmpl$4, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-labelledby", $b8hua$escape(title_id, true), false), $b8hua$escape($b8hua$createComponent(SearchThisFilterGroup_, {})), $b8hua$escape($b8hua$createComponent((0, $b8hua$Index), {
                   get each() {
                     return searched_filter_array_();
                   },