@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/collection/components/select/test/select.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.ct.js","sourceRoot":"","sources":["../../../../src/components/select/test/select.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n        <ix-select>\n          <ix-select-item value=\"11\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"22\" label=\"Item 2\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await expect(element).toHaveClass(/hydrated/);\n\n  await page.locator('.chevron-down-container').click();\n\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();\n  await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();\n});\n\ntest('editable mode', async ({ mount, page }) => {\n  await mount(`\n        <ix-select editable>\n          <ix-select-item value=\"11\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"22\" label=\"Item 2\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await expect(element).toHaveClass(/hydrated/);\n\n  await page.locator('.chevron-down-container').click();\n  await page.getByTestId('input').fill('Not existing');\n\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).not.toBeVisible();\n  await expect(page.getByRole('button', { name: 'Item 2' })).not.toBeVisible();\n\n  const add = page.getByRole('button', { name: /Not existing/ });\n  await expect(add).toBeVisible();\n\n  await add.click();\n  await page.locator('.chevron-down-container').click();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();\n  await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();\n\n  const addedItem = page.getByRole('button', { name: /Not existing/ });\n\n  await expect(addedItem.locator('i')).toBeVisible();\n});\n\ntest('single selection', async ({ mount, page }) => {\n  await mount(`\n        <ix-select>\n          <ix-select-item value=\"11\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"22\" label=\"Item 2\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await element.evaluate(\n    (select: HTMLIxSelectElement) => (select.selectedIndices = ['22'])\n  );\n\n  await page.locator('.chevron-down-container').click();\n\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();\n  await expect(\n    page.getByRole('button', { name: 'Item 2' }).locator('i')\n  ).toBeVisible();\n});\n\ntest('multiple selection', async ({ mount, page }) => {\n  await mount(`\n        <ix-select mode=\"multiple\">\n          <ix-select-item value=\"1\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"2\" label=\"Item 2\">Test</ix-select-item>\n          <ix-select-item value=\"3\" label=\"Item 3\">Test</ix-select-item>\n          <ix-select-item value=\"4\" label=\"Item 4\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await element.evaluate(\n    (select: HTMLIxSelectElement) => (select.selectedIndices = [])\n  );\n\n  await page.locator('.chevron-down-container').click();\n\n  const dropdown = element.locator('ix-dropdown');\n  const chips = element.locator('.chips');\n\n  await expect(dropdown).toBeVisible();\n\n  const item1 = page.getByRole('button', { name: 'Item 1' });\n  const item3 = page.getByRole('button', { name: 'Item 3' });\n  await item1.click();\n  await item3.click();\n\n  await expect(item1.locator('i')).toBeVisible();\n  await expect(item3.locator('i')).toBeVisible();\n\n  const chip1 = chips.getByTitle('Item 1');\n  const chip3 = chips.getByTitle('Item 3');\n\n  await expect(chip1).toBeVisible();\n  await expect(chip3).toBeVisible();\n});\n\ntest('filter', async ({ mount, page }) => {\n  await mount(`\n        <ix-select mode=\"multiple\">\n          <ix-select-item value=\"1\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"2\" label=\"Item 2\">Test</ix-select-item>\n          <ix-select-item value=\"abc\" label=\"abc\">Test</ix-select-item>\n          <ix-select-item value=\"4\" label=\"Item 4\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await element.evaluate(\n    (select: HTMLIxSelectElement) => (select.selectedIndices = [])\n  );\n\n  await page.locator('.chevron-down-container').click();\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await element.locator('input').fill('abc');\n\n  const item1 = page.getByRole('button', { name: 'Item 1' });\n  const item2 = page.getByRole('button', { name: 'Item 2' });\n  const item4 = page.getByRole('button', { name: 'Item 4' });\n  const item_abc = page.getByRole('button', { name: 'abc' });\n\n  await expect(item1).not.toBeVisible();\n  await expect(item2).not.toBeVisible();\n  await expect(item4).not.toBeVisible();\n  await expect(item_abc).toBeVisible();\n});\n"]}
+{"version":3,"file":"select.ct.js","sourceRoot":"","sources":["../../../../src/components/select/test/select.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n        <ix-select>\n          <ix-select-item value=\"11\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"22\" label=\"Item 2\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await expect(element).toHaveClass(/hydrated/);\n\n  await page.locator('[data-select-dropdown]').click();\n\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();\n  await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();\n});\n\ntest('editable mode', async ({ mount, page }) => {\n  await mount(`\n        <ix-select editable>\n          <ix-select-item value=\"11\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"22\" label=\"Item 2\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await expect(element).toHaveClass(/hydrated/);\n\n  await page.locator('[data-select-dropdown]').click();\n  await page.getByTestId('input').fill('Not existing');\n\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).not.toBeVisible();\n  await expect(page.getByRole('button', { name: 'Item 2' })).not.toBeVisible();\n\n  const add = page.getByRole('button', { name: /Not existing/ });\n  await expect(add).toBeVisible();\n\n  await add.click();\n  await expect(page.getByTestId('input')).toHaveValue(/Not existing/);\n  await page.locator('[data-select-dropdown]').click();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();\n  await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();\n\n  const addedItem = page\n    .getByRole('listitem')\n    .filter({ hasText: 'Not existing' });\n\n  await expect(addedItem).toBeVisible();\n});\n\ntest('single selection', async ({ mount, page }) => {\n  await mount(`\n        <ix-select>\n          <ix-select-item value=\"11\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"22\" label=\"Item 2\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await element.evaluate(\n    (select: HTMLIxSelectElement) => (select.value = '22')\n  );\n\n  await page.locator('[data-select-dropdown]').click();\n\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();\n  await expect(\n    page.getByRole('button', { name: 'Item 2' }).locator('ix-icon')\n  ).toBeVisible();\n});\n\ntest('multiple selection', async ({ mount, page }) => {\n  await mount(`\n        <ix-select mode=\"multiple\">\n          <ix-select-item value=\"1\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"2\" label=\"Item 2\">Test</ix-select-item>\n          <ix-select-item value=\"3\" label=\"Item 3\">Test</ix-select-item>\n          <ix-select-item value=\"4\" label=\"Item 4\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await element.evaluate((select: HTMLIxSelectElement) => (select.value = []));\n  await page.locator('[data-select-dropdown]').click();\n\n  const dropdown = element.locator('ix-dropdown');\n  const chips = element.locator('.chips');\n\n  await expect(dropdown).toBeVisible();\n\n  const item1 = element.locator('ix-select-item').nth(0);\n  const item3 = element.locator('ix-select-item').nth(2);\n  await item1.click();\n  await page.locator('[data-select-dropdown]').click();\n  await item3.click();\n  await page.locator('[data-select-dropdown]').click();\n\n  await expect(item1.locator('ix-icon')).toBeVisible();\n  await expect(item3.locator('ix-icon')).toBeVisible();\n\n  const chip1 = chips.getByTitle('Item 1');\n  const chip3 = chips.getByTitle('Item 3');\n\n  await expect(chip1).toBeVisible();\n  await expect(chip3).toBeVisible();\n});\n\ntest('filter', async ({ mount, page }) => {\n  await mount(`\n        <ix-select mode=\"multiple\">\n          <ix-select-item value=\"1\" label=\"Item 1\">Test</ix-select-item>\n          <ix-select-item value=\"2\" label=\"Item 2\">Test</ix-select-item>\n          <ix-select-item value=\"abc\" label=\"abc\">Test</ix-select-item>\n          <ix-select-item value=\"4\" label=\"Item 4\">Test</ix-select-item>\n        </ix-select>\n    `);\n  const element = page.locator('ix-select');\n  await element.evaluate((select: HTMLIxSelectElement) => (select.value = []));\n\n  await page.locator('[data-select-dropdown]').click();\n  const dropdown = element.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await element.locator('input').fill('abc');\n\n  const item1 = page.getByRole('button', { name: 'Item 1' });\n  const item2 = page.getByRole('button', { name: 'Item 2' });\n  const item4 = page.getByRole('button', { name: 'Item 4' });\n  const item_abc = page.getByRole('button', { name: 'abc' });\n\n  await expect(item1).not.toBeVisible();\n  await expect(item2).not.toBeVisible();\n  await expect(item4).not.toBeVisible();\n  await expect(item_abc).toBeVisible();\n});\n"]}

package/dist/collection/components/select-item/select-item.js

@@ -41,7 +41,7 @@ export class SelectItem {
       }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
   }
   static get is() { return "ix-select-item"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["select-item.scss"]

package/dist/collection/components/select-item/select-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../src/components/select-item/select-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAOxD,MAAM,OAAO,UAAU;;;;oBAgBF,KAAK;iBAKR,KAAK;;EAOrB;;;KAGG;EAEH,KAAK,CAAC,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;EACH,CAAC;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,wBACE,KAAK,EAAE;UACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  scoped: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../src/components/select-item/select-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAOxD,MAAM,OAAO,UAAU;;;;oBAgBF,KAAK;iBAKR,KAAK;;EAOrB;;;KAGG;EAEH,KAAK,CAAC,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;EACH,CAAC;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,wBACE,KAAK,EAAE;UACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/slider/slider.css

@@ -0,0 +1,265 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: flex;
+  flex-direction: column;
+  min-height: 2rem;
+  --thumb-size: 1rem;
+  --value: 0;
+  --trace-start: 0;
+  --trace-end: 0;
+  --trace-reference: 0;
+  --trace-reference-color: var(--theme-color-8);
+  --trace-color: var(--theme-color-dynamic);
+  --tick-color: var(--theme-color-7);
+  --tick-color--active: var(--theme-color-dynamic);
+  --track-color: var(--theme-color-component-4);
+  /* style datalist */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host input[type=range] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  height: 1rem;
+  margin: 0;
+}
+:host input[type=range].trace::before {
+  content: "";
+  position: absolute;
+  display: block;
+  z-index: -1;
+  width: calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));
+  left: calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));
+  height: 4px;
+  background-color: var(--trace-color);
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host input[type=range].trace::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 2px;
+  height: 16px;
+  background-color: var(--trace-reference-color);
+  top: 50%;
+  transform: translateY(-50%);
+  left: calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference));
+}
+:host input[type=range]::-webkit-slider-runnable-track {
+  background: transparent;
+  height: 0.25rem;
+}
+:host input[type=range]::-moz-range-track {
+  background: transparent;
+  height: 0.25rem;
+}
+:host input[type=range i]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -6px;
+}
+:host input[type=range i]::-moz-range-thumb {
+  border: none;
+  border-radius: 0;
+}
+:host input[type=range]::-webkit-slider-thumb {
+  border-radius: 100px;
+  background-color: var(--theme-color-dynamic);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  -webkit-transition: all var(--theme-default-time) ease-in-out;
+  transition: all var(--theme-default-time) ease-in-out;
+  z-index: 10;
+}
+:host input[type=range]::-moz-range-thumb {
+  border-radius: 100px;
+  background-color: var(--theme-color-dynamic);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  -moz-transition: all var(--theme-default-time) ease-in-out;
+  transition: all var(--theme-default-time) ease-in-out;
+  z-index: 10;
+}
+:host input[type=range]:hover::-webkit-slider-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:hover::-moz-range-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:active::-webkit-slider-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:active::-moz-range-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:focus {
+  outline: none;
+}
+:host input[type=range]:focus-visible::-webkit-slider-thumb {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: 0.125rem;
+}
+:host input[type=range]:focus-visible::-moz-range-thumb {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: 0.125rem;
+}
+:host .ticks {
+  display: flex;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host .ticks .tick {
+  display: block;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--tick-color);
+  border-radius: 100px;
+  top: 50%;
+  transform: translateY(-50%);
+  left: calc(var(--tick-value) * 100% - 4px);
+}
+:host .ticks .tick.tick-active {
+  background-color: var(--tick-color--active);
+}
+:host .slider {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 1.5rem;
+}
+:host .track {
+  position: absolute;
+  background-color: var(--track-color);
+  height: 4px;
+  width: calc(100% - 1rem);
+  margin-left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0px;
+}
+:host .thumb {
+  display: block;
+  position: absolute;
+  background-color: transparent;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 100px;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host .hide-tooltip {
+  display: none;
+}
+:host .label {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 0.5rem;
+  min-height: 0px;
+}
+:host .label-start {
+  margin-left: 0.5rem;
+}
+:host .label-end {
+  margin-right: 0.5rem;
+}
+:host .label-error {
+  margin-left: 0.5rem;
+}
+
+:host(.error) {
+  --trace-color: var(--theme-color-alarm-40);
+  --tick-color--active: var(--theme-color-alarm);
+}
+:host(.error) input[type=range]::-webkit-slider-thumb {
+  background-color: var(--theme-color-alarm);
+}
+:host(.error) input[type=range]::-moz-range-thumb {
+  background-color: var(--theme-color-alarm);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  --track-color: var(--theme-color-component-3);
+  --trace-color: var(--theme-color-3);
+  --tick-color: var(--theme-color-7);
+  --tick-color--active: var(--theme-color-7);
+}
+:host(.disabled) input[type=range]::-webkit-slider-thumb {
+  background-color: var(--theme-color-7);
+}
+:host(.disabled) input[type=range]::-moz-range-thumb {
+  background-color: var(--theme-color-7);
+}