@searchcraft/javascript-sdk 0.3.0 → 0.4.0

package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.module.css

@@ -1,15 +1,119 @@
-.container {
-  border-bottom: 1px solid #D9D9D9;
+:root {
+  /** Appearance & Layout */
+  --sc-spinner-size: 20px;
+  --sc-input-border-radius: 8px;
+  --sc-input-search-icon-size: 20px;
+  --sc-input-clear-icon-size: 20px;
+  --sc-input-padding-left: 44px;
+  --sc-input-padding-right: 44px;
+  --sc-image-border-radius: 8px;
+}
+
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
+}
+
+:root {
+  /** Typography */
+  --sc-font-family: sans-serif;
+  --sc-heading-1-font-size: 32px;
+  --sc-heading-1-line-height: 36px;
+  --sc-heading-1-font-weight: 700;
+  --sc-heading-2-font-size: 29px;
+  --sc-heading-2-line-height: 32px;
+  --sc-heading-2-font-weight: 700;
+  --sc-heading-3-font-size: 26px;
+  --sc-heading-3-line-height: 28px;
+  --sc-heading-3-font-weight: 700;
+  --sc-heading-4-font-size: 23px;
+  --sc-heading-4-line-height: 24px;
+  --sc-heading-4-font-weight: 700;
+  --sc-heading-5-font-size: 20px;
+  --sc-heading-5-line-height: 24px;
+  --sc-heading-5-font-weight: 700;
+  --sc-heading-6-font-size: 10px;
+  --sc-heading-6-line-height: 12px;
+  --sc-heading-6-font-weight: 700;
+  --sc-body-bold-font-size: 16px;
+  --sc-body-bold-line-height: 20px;
+  --sc-body-bold-font-weight: 700;
+  --sc-body-font-size: 16px;
+  --sc-body-line-height: 20px;
+  --sc-body-font-weight:400;
+  --sc-body-small-bold-font-size: 12px;
+  --sc-body-small-bold-line-height: 16px;
+  --sc-body-small-bold-font-weight: 700;
+  --sc-body-small-font-size: 12px;
+  --sc-body-small-line-height: 16px;
+  --sc-body-small-font-weight: 400;
+}
+
+.searchcraft-results-info-container {
+  border-bottom: 1px solid var(--sc-surface-disabled);
   display: flex;
   justify-content: flex-start;
-  width: 100%;
 }
 
-.resultsInfo {
-  color: #292929;
+.searchcraft-results-info-content {
+  color: var(--sc-content-primary);
+  font-family: var(--sc-font-family);
   font-size: 18px;
   font-weight: 600;
   line-height: 20px;
-  margin: 0;
-  margin-bottom: 8px;
+  margin: 0px 0 8px;
+}
+@media (max-width: 900px) {
+  .searchcraft-results-info-content {
+    margin: 0;
+    margin-bottom: 8px;
+  }
 }

package/dist/collection/components/searchcraft-slider/searchcraft-slider.js

@@ -1,70 +1,59 @@
-import { h } from "@stencil/core";
-import { useSearchcraftStore } from "../../provider/store";
+import { h, } from "@stencil/core";
+import { getMillis } from "../../utils/utils";
+import classNames from "classnames";
 export class SearchcraftSlider {
     constructor() {
-        this.searchStore = useSearchcraftStore.getState();
-        this.updateYears = async () => {
-            this.searchStore.setYearsRange([this.startYear, this.endYear]);
-            try {
-                if (typeof this.query === 'string' && this.query.trim() !== '') {
-                    await this.searchStore.search();
-                }
-                else {
-                    console.warn('Query is missing or empty, skipping search request.');
-                }
-            }
-            catch (error) {
-                console.error('Search failed:', error);
-            }
+        this.updateValues = async () => {
+            this.rangeChanged.emit({
+                startValue: this.startValue,
+                endValue: this.endValue,
+            });
         };
-        this.handleStartYearChange = (event) => {
+        this.handlestartValueChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.startYear = Math.min(value, this.endYear);
-            this.updateYears();
+            if (value <= this.endValue) {
+                this.startValue = value;
+                this.updateValues();
+            }
         };
-        this.handleEndYearChange = (event) => {
+        this.handleendValueChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.endYear = Math.max(value, this.startYear);
-            this.updateYears();
+            if (value >= this.startValue) {
+                this.endValue = value;
+                this.updateValues();
+            }
         };
-        this.maxYear = new Date().getFullYear();
-        this.minYear = 2014;
-        this.endYear = this.maxYear;
+        this.max = 100;
+        this.min = 0;
+        this.granularity = getMillis('month');
+        this.dataType = 'number';
+        this.endValue = this.max;
+        this.startValue = this.min;
         this.hasSearched = false;
         this.query = '';
         this.resultsCount = 0;
-        this.startYear = this.minYear;
     }
     componentDidLoad() {
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            var _a, _b, _c;
-            if (state.query.length > 0) {
-                this.hasSearched = true;
-                this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
-            }
-            this.query = state.query;
-        });
-    }
-    disconnectedCallback() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
+        this.startValue = this.min;
+        this.endValue = this.max;
     }
     render() {
-        if (!this.query || this.resultsCount === 0) {
-            return null;
-        }
-        const rangeMin = this.minYear;
-        const rangeMax = this.maxYear;
-        const startPercent = ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;
-        const endPercent = ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;
-        return (h("div", { class: 'sliderContainer' }, h("div", { class: 'rangeContainer' }, h("div", { class: 'activeRange', style: {
+        const rangeMin = this.min;
+        const rangeMax = this.max;
+        const startPercent = ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;
+        const endPercent = ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;
+        const startLabel = this.dataType === 'number'
+            ? this.startValue
+            : new Date(this.startValue).getFullYear();
+        const endLabel = this.dataType === 'number'
+            ? this.endValue
+            : new Date(this.endValue).getFullYear();
+        return (h("div", { key: '5b85ed684719fc53cb2c6d4d6b9b25dda95238c4', class: classNames('sliderContainer', 'searchcraft-slider-container') }, h("div", { key: '4222101284dc36c5fc70f033fbdd5080e4c25f41', class: classNames('rangeContainer', 'searchcraft-slider-range-container') }, h("div", { key: '8610d8fbdd7c920e93969d588d75e4b1266d24a9', class: classNames('activeRange', 'searchcraft-slider-active-range'), style: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: 'yearLabels' }, h("span", { class: 'yearLabel' }, this.startYear), h("span", { class: 'yearLabel' }, this.endYear))));
+            } }), h("input", { key: 'aafc7ecf347131e8f86bce144d046ca33d3ce7a9', class: classNames('rangeSlider', 'searchcraft-slider-range-slider-start-thumb'), max: this.max, min: this.min, onInput: this.handlestartValueChange, step: this.granularity, type: 'range', value: this.startValue }), h("input", { key: '8247c65541d1fe70ac078d4f3ddf9111919750e7', class: classNames('rangeSlider', 'searchcraft-slider-range-slider-end-thumb'), max: this.max, min: this.min, onInput: this.handleendValueChange, step: this.granularity, type: 'range', value: this.endValue })), h("div", { key: '43f708034b96d7683dea2c60c95b1689bce47ad5', class: classNames('yearLabels', 'searchcraft-slider-year-label-container') }, h("span", { key: '39c5a9f41c9ddc87f81cb7fc488fdc61afd82ae6', class: classNames('yearLabel', 'searchcraft-slider-start-year-label') }, startLabel), h("span", { key: '536fb604734b109318f3b4da38743c00581f369a', class: classNames('yearLabel', 'searchcraft-slider-end-year-label') }, endLabel))));
     }
     static get is() { return "searchcraft-slider"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-slider.module.scss"]
@@ -77,7 +66,7 @@ export class SearchcraftSlider {
     }
     static get properties() {
         return {
-            "maxYear": {
+            "max": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -91,11 +80,11 @@ export class SearchcraftSlider {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-year",
+                "attribute": "max",
                 "reflect": false,
-                "defaultValue": "new Date().getFullYear()"
+                "defaultValue": "100"
             },
-            "minYear": {
+            "min": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -109,20 +98,74 @@ export class SearchcraftSlider {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "min-year",
+                "attribute": "min",
                 "reflect": false,
-                "defaultValue": "2014"
+                "defaultValue": "0"
+            },
+            "granularity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "granularity",
+                "reflect": false,
+                "defaultValue": "getMillis('month')"
+            },
+            "dataType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'number' | 'date'",
+                    "resolved": "\"date\" | \"number\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-type",
+                "reflect": false,
+                "defaultValue": "'number'"
             }
         };
     }
     static get states() {
         return {
-            "endYear": {},
+            "endValue": {},
+            "startValue": {},
             "hasSearched": {},
             "query": {},
-            "resultsCount": {},
-            "startYear": {}
+            "resultsCount": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "rangeChanged",
+                "name": "rangeChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ startValue: number; endValue: number }",
+                    "resolved": "{ startValue: number; endValue: number; }",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=searchcraft-slider.js.map

package/dist/collection/components/searchcraft-slider/searchcraft-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-slider.js","sourceRoot":"","sources":["../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Prop } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSlider {\n  @Prop() maxYear = new Date().getFullYear();\n  @Prop() minYear = 2014;\n\n  @State() endYear = this.maxYear;\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() resultsCount = 0;\n  @State() startYear = this.minYear;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  unsubscribe: () => void;\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n        this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n      }\n      this.query = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  private updateYears = async () => {\n    this.searchStore.setYearsRange([this.startYear, this.endYear]);\n\n    try {\n      if (typeof this.query === 'string' && this.query.trim() !== '') {\n        await this.searchStore.search();\n      } else {\n        console.warn('Query is missing or empty, skipping search request.');\n      }\n    } catch (error) {\n      console.error('Search failed:', error);\n    }\n  };\n\n  private handleStartYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    this.startYear = Math.min(value, this.endYear);\n    this.updateYears();\n  };\n\n  private handleEndYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    this.endYear = Math.max(value, this.startYear);\n    this.updateYears();\n  };\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    const rangeMin = this.minYear;\n    const rangeMax = this.maxYear;\n    const startPercent =\n      ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n    const endPercent =\n      ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n    return (\n      <div class='sliderContainer'>\n        <div class='rangeContainer'>\n          <div\n            class='activeRange'\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class='rangeSlider'\n            max={this.maxYear}\n            min={this.minYear}\n            onInput={this.handleStartYearChange}\n            step='1'\n            type='range'\n            value={this.startYear}\n          />\n          <input\n            class='rangeSlider'\n            max={this.maxYear}\n            min={this.minYear}\n            onInput={this.handleEndYearChange}\n            step='1'\n            type='range'\n            value={this.endYear}\n          />\n        </div>\n        <div class='yearLabels'>\n          <span class='yearLabel'>{this.startYear}</span>\n          <span class='yearLabel'>{this.endYear}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-slider.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  State,\n  Prop,\n} from '@stencil/core';\nimport { getMillis } from '@utils/utils';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: false,\n})\nexport class SearchcraftSlider {\n  @Prop() max = 100;\n  @Prop() min = 0;\n  @Prop() granularity: number = getMillis('month');\n  @Prop() dataType: 'number' | 'date' = 'number';\n\n  @State() endValue = this.max;\n  @State() startValue = this.min;\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() resultsCount = 0;\n\n  @Event() rangeChanged: EventEmitter<{ startValue: number; endValue: number }>;\n\n  componentDidLoad() {\n    this.startValue = this.min;\n    this.endValue = this.max;\n  }\n\n  private updateValues = async () => {\n    this.rangeChanged.emit({\n      startValue: this.startValue,\n      endValue: this.endValue,\n    });\n  };\n\n  private handlestartValueChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value <= this.endValue) {\n      this.startValue = value;\n      this.updateValues();\n    }\n  };\n\n  private handleendValueChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value >= this.startValue) {\n      this.endValue = value;\n      this.updateValues();\n    }\n  };\n\n  render() {\n    const rangeMin = this.min;\n    const rangeMax = this.max;\n    const startPercent =\n      ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n    const endPercent =\n      ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n    const startLabel =\n      this.dataType === 'number'\n        ? this.startValue\n        : new Date(this.startValue).getFullYear();\n\n    const endLabel =\n      this.dataType === 'number'\n        ? this.endValue\n        : new Date(this.endValue).getFullYear();\n\n    return (\n      <div\n        class={classNames('sliderContainer', 'searchcraft-slider-container')}\n      >\n        <div\n          class={classNames(\n            'rangeContainer',\n            'searchcraft-slider-range-container',\n          )}\n        >\n          <div\n            class={classNames('activeRange', 'searchcraft-slider-active-range')}\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-start-thumb',\n            )}\n            max={this.max}\n            min={this.min}\n            onInput={this.handlestartValueChange}\n            step={this.granularity}\n            type='range'\n            value={this.startValue}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-end-thumb',\n            )}\n            max={this.max}\n            min={this.min}\n            onInput={this.handleendValueChange}\n            step={this.granularity}\n            type='range'\n            value={this.endValue}\n          />\n        </div>\n        <div\n          class={classNames(\n            'yearLabels',\n            'searchcraft-slider-year-label-container',\n          )}\n        >\n          <span\n            class={classNames(\n              'yearLabel',\n              'searchcraft-slider-start-year-label',\n            )}\n          >\n            {startLabel}\n          </span>\n          <span\n            class={classNames('yearLabel', 'searchcraft-slider-end-year-label')}\n          >\n            {endLabel}\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-slider/searchcraft-slider.module.css

@@ -1,20 +1,124 @@
+:root {
+  /** Appearance & Layout */
+  --sc-spinner-size: 20px;
+  --sc-input-border-radius: 8px;
+  --sc-input-search-icon-size: 20px;
+  --sc-input-clear-icon-size: 20px;
+  --sc-input-padding-left: 44px;
+  --sc-input-padding-right: 44px;
+  --sc-image-border-radius: 8px;
+}
+
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
+}
+
+:root {
+  /** Typography */
+  --sc-font-family: sans-serif;
+  --sc-heading-1-font-size: 32px;
+  --sc-heading-1-line-height: 36px;
+  --sc-heading-1-font-weight: 700;
+  --sc-heading-2-font-size: 29px;
+  --sc-heading-2-line-height: 32px;
+  --sc-heading-2-font-weight: 700;
+  --sc-heading-3-font-size: 26px;
+  --sc-heading-3-line-height: 28px;
+  --sc-heading-3-font-weight: 700;
+  --sc-heading-4-font-size: 23px;
+  --sc-heading-4-line-height: 24px;
+  --sc-heading-4-font-weight: 700;
+  --sc-heading-5-font-size: 20px;
+  --sc-heading-5-line-height: 24px;
+  --sc-heading-5-font-weight: 700;
+  --sc-heading-6-font-size: 10px;
+  --sc-heading-6-line-height: 12px;
+  --sc-heading-6-font-weight: 700;
+  --sc-body-bold-font-size: 16px;
+  --sc-body-bold-line-height: 20px;
+  --sc-body-bold-font-weight: 700;
+  --sc-body-font-size: 16px;
+  --sc-body-line-height: 20px;
+  --sc-body-font-weight:400;
+  --sc-body-small-bold-font-size: 12px;
+  --sc-body-small-bold-line-height: 16px;
+  --sc-body-small-bold-font-weight: 700;
+  --sc-body-small-font-size: 12px;
+  --sc-body-small-line-height: 16px;
+  --sc-body-small-font-weight: 400;
+}
+
 .sliderContainer {
+  align-items: center;
   display: flex;
   flex-direction: column;
   gap: 10px;
-  font-family: Arial, sans-serif;
-  align-items: center;
   width: 100%;
 }
 
 .rangeContainer {
+  align-items: center;
+  background-color: var(--sc-surface-disabled);
+  border-radius: 999px;
   display: flex;
   position: relative;
+  height: 4px;
   width: 100%;
-  align-items: center;
+}
+.rangeContainer::-webkit-slider-runnable-track {
+  pointer-events: none;
 }
 .rangeContainer .activeRange {
-  background: #007DB3;
+  background-color: var(--sc-surface-brand-primary);
   border-radius: 2px;
   height: 4px;
   position: absolute;
@@ -22,44 +126,53 @@
   transform: translateY(-50%);
   z-index: 0;
 }
+.rangeContainer .activeRange::-webkit-slider-runnable-track {
+  pointer-events: none;
+}
+.rangeContainer .activeRange::-moz-range-track {
+  pointer-events: none;
+}
 .rangeContainer .rangeSlider {
-  width: 100%;
-  height: 4px;
+  appearance: none;
   background: transparent;
   border-radius: 2px;
+  height: 4px;
+  margin: 0;
   outline: none;
-  -webkit-appearance: none;
-  appearance: none;
+  pointer-events: none;
   position: absolute;
-  margin: 0;
+  width: 100%;
+  -webkit-appearance: none;
 }
 .rangeContainer .rangeSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 20px;
-  height: 20px;
-  background-color: #FFF;
+  background-color: var(--sc-surface-neutral-light);
   border-radius: 50%;
-  border: 2px solid #e6e6e6;
+  border: 2px solid var(--sc-border-neutral);
   cursor: pointer;
+  height: 20px;
+  pointer-events: all;
+  width: 20px;
+  -webkit-appearance: none;
 }
 .rangeContainer .rangeSlider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  background-color: #FFF;
+  background-color: var(--sc-surface-neutral-light);
   border-radius: 50%;
-  border: 2px solid #e6e6e6;
+  border: 2px solid var(--sc-border-neutral);
   cursor: pointer;
+  height: 20px;
+  pointer-events: all;
+  width: 20px;
 }
 
 .yearLabels {
+  color: var(--sc-content-primary);
   display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: 10px;
+  font-family: "Source Sans Pro", sans-serif;
   font-size: 15px;
   font-weight: 600;
-  font-family: "Source Sans Pro", sans-serif;
-  color: #666;
+  justify-content: space-between;
+  margin-top: 10px;
+  width: 100%;
 }
 
 .yearLabel {

package/dist/collection/components/searchcraft-spinner-dark/searchcraft-spinner-dark.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SearchcraftSpinnerDark {
     render() {
-        return (h("div", { key: 'be34b9a3ecec05fdc169145a5db5a4f37bbd404b', class: 'spinnerContainer' }, h("div", { key: 'b59ffd2fe8dd3ac990003bff3085cb571c08730e', class: 'spinnerDark' })));
+        return (h("div", { key: '8422a3414f343dbcd8f7c90ffc8ad440a52d22d9', class: 'spinnerContainer' }, h("div", { key: '06ae9efe8771068a9fec6769c0a614a98ceb8031', class: 'spinnerDark' })));
     }
     static get is() { return "searchcraft-spinner-dark"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchcraft-spinner-dark/searchcraft-spinner-dark.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-spinner-dark.js","sourceRoot":"","sources":["../../../src/components/searchcraft-spinner-dark/searchcraft-spinner-dark.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,sBAAsB;IACjC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,4DAAK,KAAK,EAAC,aAAa,GAAG,CACvB,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-spinner-dark',\n  styleUrl: 'searchcraft-spinner-dark.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSpinnerDark {\n  render() {\n    return (\n      <div class='spinnerContainer'>\n        <div class='spinnerDark' />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-spinner-dark.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-spinner-dark/searchcraft-spinner-dark.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,sBAAsB;IACjC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,4DAAK,KAAK,EAAC,aAAa,GAAG,CACvB,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-spinner-dark',\n  styleUrl: 'searchcraft-spinner-dark.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSpinnerDark {\n  render() {\n    return (\n      <div class='spinnerContainer'>\n        <div class='spinnerDark' />\n      </div>\n    );\n  }\n}\n"]}