@searchcraft/javascript-sdk 0.3.1 → 0.4.1

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

@@ -1,24 +1,118 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** 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;
 }
 
-.resultsInfoContainer {
-  border-bottom: 1px solid #D9D9D9;
+: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%;
 }
 
-.resultsInfoContent {
-  color: #292929;
-  font-family: var(--font-stack);
+.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: 24px 0 8px;
+  margin: 0px 0 8px;
 }
 @media (max-width: 900px) {
-  .resultsInfoContent {
+  .searchcraft-results-info-content {
     margin: 0;
     margin-bottom: 8px;
   }

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

@@ -1,76 +1,67 @@
 import { h, } from "@stencil/core";
+import { getMillis } from "../../utils/utils";
 import classNames from "classnames";
-import { useSearchcraftStore } from "../../provider/store";
 export class SearchcraftSlider {
     constructor() {
-        this.searchStore = useSearchcraftStore.getState();
-        this.updateYears = async () => {
-            this.searchStore.setYearsRange([this.startYear, this.endYear]);
+        this.emitUpdate = async () => {
             this.rangeChanged.emit({
-                startYear: this.startYear,
-                endYear: this.endYear,
+                startValue: this.startValue,
+                endValue: this.endValue,
             });
-            try {
-                if (typeof this.query === 'string' && this.query.trim() !== '') {
-                    await this.searchStore.search();
-                }
-                else {
-                    console.warn('Query is missing or empty, skipping search request.');
-                }
+        };
+        this.handleStartValueChange = (event) => {
+            const inputElement = event.target;
+            const value = Number.parseInt(inputElement.value, 10);
+            this.lastFocusedHandle = 'min';
+            if (value <= this.endValue) {
+                this.startValue = value;
+                this.emitUpdate();
             }
-            catch (error) {
-                console.error('Search failed:', error);
+            else {
+                this.startValue = this.endValue;
+                inputElement.value = `${this.endValue}`;
             }
         };
-        this.handleStartYearChange = (event) => {
-            const value = Number.parseInt(event.target.value, 10);
-            if (value <= this.endYear) {
-                this.startYear = value;
-                this.updateYears();
+        this.handleEndValueChange = (event) => {
+            const inputElement = event.target;
+            const value = Number.parseInt(inputElement.value, 10);
+            this.lastFocusedHandle = 'max';
+            if (value >= this.startValue) {
+                this.endValue = value;
+                this.emitUpdate();
             }
-        };
-        this.handleEndYearChange = (event) => {
-            const value = Number.parseInt(event.target.value, 10);
-            if (value >= this.startYear) {
-                this.endYear = value;
-                this.updateYears();
+            else {
+                this.endValue = this.startValue;
+                inputElement.value = `${this.startValue}`;
             }
         };
-        this.maxYear = new Date().getFullYear();
-        this.minYear = 2014;
-        this.endYear = this.maxYear;
-        this.hasSearched = false;
-        this.query = '';
-        this.resultsCount = 0;
-        this.startYear = this.minYear;
+        this.max = 100;
+        this.min = 0;
+        this.granularity = getMillis('month');
+        this.dataType = 'number';
+        this.endValue = this.max;
+        this.startValue = this.min;
+        this.lastFocusedHandle = 'max';
     }
     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: classNames('sliderContainer', 'searchcraft-slider-container') }, h("div", { class: classNames('rangeContainer', 'searchcraft-slider-range-container') }, h("div", { class: classNames('activeRange', 'searchcraft-slider-active-range'), 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: 'f05bc14a425c9e302cd0aad174af7e80a553258e', class: 'searchcraft-slider-container' }, h("div", { key: 'e52983353639e1c5b695772d55148daa25b48845', class: 'searchcraft-slider-range-container' }, h("div", { key: '9f7d5601f056a75bfd8f5ef9053a21a4931c8b1c', class: 'searchcraft-slider-active-range', style: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), h("input", { class: classNames('rangeSlider', 'searchcraft-slider-range-slider-start-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: classNames('rangeSlider', 'searchcraft-slider-range-slider-end-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: classNames('yearLabels', 'searchcraft-slider-year-label-container') }, h("span", { class: classNames('yearLabel', 'searchcraft-slider-start-year-label') }, this.startYear), h("span", { class: classNames('yearLabel', 'searchcraft-slider-end-year-label') }, this.endYear))));
+            } }), h("input", { key: 'c7816c75212e3573ec35171557b79c9de1da60f9', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-min-handle'), max: this.max, min: this.min, onInput: this.handleStartValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }, type: 'range', value: this.startValue }), h("input", { key: '0fe6e721448b99899f6875d05789399f862cb82e', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-max-handle'), max: this.max, min: this.min, onInput: this.handleEndValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }, type: 'range', value: this.endValue })), h("div", { key: 'fdf17ab7c1322824bbd94de96b223d3e2ceddfc8', class: 'searchcraft-slider-label-container' }, h("span", { key: 'e7ddfd13f5d258a995bb824e9b26a492e5ca4f32', class: 'searchcraft-slider-label' }, startLabel), h("span", { key: '67d6f9ea4e8fa7f651c9e9cafb624996df1676ea', class: 'searchcraft-slider-label' }, endLabel))));
     }
     static get is() { return "searchcraft-slider"; }
     static get originalStyleUrls() {
@@ -85,7 +76,7 @@ export class SearchcraftSlider {
     }
     static get properties() {
         return {
-            "maxYear": {
+            "max": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -99,11 +90,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": {
@@ -117,19 +108,53 @@ export class SearchcraftSlider {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "min-year",
+                "attribute": "min",
+                "reflect": false,
+                "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": "2014"
+                "defaultValue": "'number'"
             }
         };
     }
     static get states() {
         return {
-            "endYear": {},
-            "hasSearched": {},
-            "query": {},
-            "resultsCount": {},
-            "startYear": {}
+            "endValue": {},
+            "startValue": {},
+            "lastFocusedHandle": {}
         };
     }
     static get events() {
@@ -144,8 +169,8 @@ export class SearchcraftSlider {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ startYear: number; endYear: number }",
-                    "resolved": "{ startYear: number; endYear: number; }",
+                    "original": "{ startValue: number; endValue: number }",
+                    "resolved": "{ startValue: number; endValue: number; }",
                     "references": {}
                 }
             }];

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 {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  State,\n  Prop,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: false,\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  @Event() rangeChanged: EventEmitter<{ startYear: number; endYear: number }>;\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    this.rangeChanged.emit({\n      startYear: this.startYear,\n      endYear: this.endYear,\n    });\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    if (value <= this.endYear) {\n      this.startYear = value;\n      this.updateYears();\n    }\n  };\n\n  private handleEndYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value >= this.startYear) {\n      this.endYear = value;\n      this.updateYears();\n    }\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\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.maxYear}\n            min={this.minYear}\n            onInput={this.handleStartYearChange}\n            step='1'\n            type='range'\n            value={this.startYear}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-end-thumb',\n            )}\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\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            {this.startYear}\n          </span>\n          <span\n            class={classNames('yearLabel', 'searchcraft-slider-end-year-label')}\n          >\n            {this.endYear}\n          </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() lastFocusedHandle: 'min' | 'max' = 'max';\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 emitUpdate = async () => {\n    this.rangeChanged.emit({\n      startValue: this.startValue,\n      endValue: this.endValue,\n    });\n  };\n\n  private handleStartValueChange = (event: InputEvent) => {\n    const inputElement = event.target as HTMLInputElement;\n    const value = Number.parseInt(inputElement.value, 10);\n    this.lastFocusedHandle = 'min';\n    if (value <= this.endValue) {\n      this.startValue = value;\n      this.emitUpdate();\n    } else {\n      this.startValue = this.endValue;\n      inputElement.value = `${this.endValue}`;\n    }\n  };\n\n  private handleEndValueChange = (event: InputEvent) => {\n    const inputElement = event.target as HTMLInputElement;\n    const value = Number.parseInt(inputElement.value, 10);\n    this.lastFocusedHandle = 'max';\n    if (value >= this.startValue) {\n      this.endValue = value;\n      this.emitUpdate();\n    } else {\n      this.endValue = this.startValue;\n      inputElement.value = `${this.startValue}`;\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 class='searchcraft-slider-container'>\n        <div class='searchcraft-slider-range-container'>\n          <div\n            class='searchcraft-slider-active-range'\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class={classNames(\n              'searchcraft-slider-input',\n              'searchcraft-slider-input-min-handle',\n            )}\n            max={this.max}\n            min={this.min}\n            onInput={this.handleStartValueChange.bind(this)}\n            step={this.granularity}\n            style={{ zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }}\n            type='range'\n            value={this.startValue}\n          />\n          <input\n            class={classNames(\n              'searchcraft-slider-input',\n              'searchcraft-slider-input-max-handle',\n            )}\n            max={this.max}\n            min={this.min}\n            onInput={this.handleEndValueChange.bind(this)}\n            step={this.granularity}\n            style={{ zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }}\n            type='range'\n            value={this.endValue}\n          />\n        </div>\n        <div class='searchcraft-slider-label-container'>\n          <span class='searchcraft-slider-label'>{startLabel}</span>\n          <span class='searchcraft-slider-label'>{endLabel}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,4 +1,103 @@
-.sliderContainer {
+: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-slider-container {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -6,20 +105,20 @@
   width: 100%;
 }
 
-.rangeContainer {
+.searchcraft-slider-range-container {
   align-items: center;
-  background-color: #D9D9D9;
+  background-color: var(--sc-surface-disabled);
   border-radius: 999px;
   display: flex;
   position: relative;
   height: 4px;
   width: 100%;
 }
-.rangeContainer::-webkit-slider-runnable-track {
+.searchcraft-slider-range-container::-webkit-slider-runnable-track {
   pointer-events: none;
 }
-.rangeContainer .activeRange {
-  background-color: #000000;
+.searchcraft-slider-range-container .searchcraft-slider-active-range {
+  background-color: var(--sc-surface-brand-primary);
   border-radius: 2px;
   height: 4px;
   position: absolute;
@@ -27,13 +126,13 @@
   transform: translateY(-50%);
   z-index: 0;
 }
-.rangeContainer .activeRange::-webkit-slider-runnable-track {
+.searchcraft-slider-range-container .searchcraft-slider-active-range::-webkit-slider-runnable-track {
   pointer-events: none;
 }
-.rangeContainer .activeRange::-moz-range-track {
+.searchcraft-slider-range-container .searchcraft-slider-active-range::-moz-range-track {
   pointer-events: none;
 }
-.rangeContainer .rangeSlider {
+.searchcraft-slider-range-container .searchcraft-slider-input {
   appearance: none;
   background: transparent;
   border-radius: 2px;
@@ -45,28 +144,28 @@
   width: 100%;
   -webkit-appearance: none;
 }
-.rangeContainer .rangeSlider::-webkit-slider-thumb {
-  background-color: #FFFFFF;
+.searchcraft-slider-range-container .searchcraft-slider-input::-webkit-slider-thumb {
+  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 {
-  background-color: #FFFFFF;
+.searchcraft-slider-range-container .searchcraft-slider-input::-moz-range-thumb {
+  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: #292929;
+.searchcraft-slider-label-container {
+  color: var(--sc-content-primary);
   display: flex;
   font-family: "Source Sans Pro", sans-serif;
   font-size: 15px;
@@ -76,7 +175,7 @@
   width: 100%;
 }
 
-.yearLabel {
+.searchcraft-slider-label {
   min-width: 30px;
   text-align: center;
 }

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"; }