@siemens/ix 1.6.3 → 2.0.0-beta.0

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

@@ -0,0 +1,115 @@
+/*
+ * 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.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+        <ix-select>
+          <ix-select-item value="11" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="22" label="Item 2">Test</ix-select-item>
+        </ix-select>
+    `);
+  const element = page.locator('ix-select');
+  await expect(element).toHaveClass(/hydrated/);
+  await page.locator('.chevron-down-container').click();
+  const dropdown = element.locator('ix-dropdown');
+  await expect(dropdown).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();
+});
+test('editable mode', async ({ mount, page }) => {
+  await mount(`
+        <ix-select editable>
+          <ix-select-item value="11" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="22" label="Item 2">Test</ix-select-item>
+        </ix-select>
+    `);
+  const element = page.locator('ix-select');
+  await expect(element).toHaveClass(/hydrated/);
+  await page.locator('.chevron-down-container').click();
+  await page.getByTestId('input').fill('Not existing');
+  const dropdown = element.locator('ix-dropdown');
+  await expect(dropdown).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 1' })).not.toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 2' })).not.toBeVisible();
+  const add = page.getByRole('button', { name: /Not existing/ });
+  await expect(add).toBeVisible();
+  await add.click();
+  await page.locator('.chevron-down-container').click();
+  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();
+  const addedItem = page.getByRole('button', { name: /Not existing/ });
+  await expect(addedItem.locator('i')).toBeVisible();
+});
+test('single selection', async ({ mount, page }) => {
+  await mount(`
+        <ix-select>
+          <ix-select-item value="11" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="22" label="Item 2">Test</ix-select-item>
+        </ix-select>
+    `);
+  const element = page.locator('ix-select');
+  await element.evaluate((select) => (select.selectedIndices = ['22']));
+  await page.locator('.chevron-down-container').click();
+  const dropdown = element.locator('ix-dropdown');
+  await expect(dropdown).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 2' }).locator('i')).toBeVisible();
+});
+test('multiple selection', async ({ mount, page }) => {
+  await mount(`
+        <ix-select mode="multiple">
+          <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+          <ix-select-item value="3" label="Item 3">Test</ix-select-item>
+          <ix-select-item value="4" label="Item 4">Test</ix-select-item>
+        </ix-select>
+    `);
+  const element = page.locator('ix-select');
+  await element.evaluate((select) => (select.selectedIndices = []));
+  await page.locator('.chevron-down-container').click();
+  const dropdown = element.locator('ix-dropdown');
+  const chips = element.locator('.chips');
+  await expect(dropdown).toBeVisible();
+  const item1 = page.getByRole('button', { name: 'Item 1' });
+  const item3 = page.getByRole('button', { name: 'Item 3' });
+  await item1.click();
+  await item3.click();
+  await expect(item1.locator('i')).toBeVisible();
+  await expect(item3.locator('i')).toBeVisible();
+  const chip1 = chips.getByTitle('Item 1');
+  const chip3 = chips.getByTitle('Item 3');
+  await expect(chip1).toBeVisible();
+  await expect(chip3).toBeVisible();
+});
+test('filter', async ({ mount, page }) => {
+  await mount(`
+        <ix-select mode="multiple">
+          <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+          <ix-select-item value="abc" label="abc">Test</ix-select-item>
+          <ix-select-item value="4" label="Item 4">Test</ix-select-item>
+        </ix-select>
+    `);
+  const element = page.locator('ix-select');
+  await element.evaluate((select) => (select.selectedIndices = []));
+  await page.locator('.chevron-down-container').click();
+  const dropdown = element.locator('ix-dropdown');
+  await expect(dropdown).toBeVisible();
+  await element.locator('input').fill('abc');
+  const item1 = page.getByRole('button', { name: 'Item 1' });
+  const item2 = page.getByRole('button', { name: 'Item 2' });
+  const item4 = page.getByRole('button', { name: 'Item 4' });
+  const item_abc = page.getByRole('button', { name: 'abc' });
+  await expect(item1).not.toBeVisible();
+  await expect(item2).not.toBeVisible();
+  await expect(item4).not.toBeVisible();
+  await expect(item_abc).toBeVisible();
+});
+//# sourceMappingURL=select.ct.js.map

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

@@ -0,0 +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"]}

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

@@ -8,4 +8,16 @@
  */
 :host {
   display: block;
+  position: relative;
+}
+:host > ix-dropdown-item {
+  width: 100%;
+}
+:host .select-item-checked {
+  background-color: var(--theme-select-list-item--background--selected);
+  --ix-dropdown-item-checked-color: var(--theme-color-std-text);
+}
+
+:host(.d-none) {
+  display: none;
 }

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

@@ -36,7 +36,9 @@ export class SelectItem {
     }));
   }
   render() {
-    return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+    return (h(Host, null, h("ix-dropdown-item", { class: {
+        'select-item-checked': this.selected,
+      }, 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"; }

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,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          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  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"]}

package/dist/collection/components/spinner/spinner.css

@@ -14,42 +14,447 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host {
-  display: flex;
+:host(.xx-small) {
+  display: block;
   position: relative;
-  height: 2rem;
-  width: 2rem;
-  justify-content: center;
-  align-items: center;
+  width: 0.75rem;
+  height: 0.75rem;
+  min-width: 0.75rem;
+  min-height: 0.75rem;
+  max-width: 0.75rem;
+  max-height: 0.75rem;
+  border-radius: 100%;
+  position: relative;
+  animation: rotate 2s linear infinite;
 }
-:host *,
-:host *::after,
-:host *::before {
+:host(.xx-small) *,
+:host(.xx-small) *::after,
+:host(.xx-small) *::before {
   box-sizing: border-box;
 }
-:host svg {
-  height: 2rem;
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes clipMask {
+  0% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  12.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  25% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  37.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  50% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  62.5% {
+    -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  75% {
+    -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+  }
+  87.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+  }
+  100% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+}
+
+:host(.xx-small)::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 1px solid var(--ix-button-color, var(--theme-color-soft-text));
+  animation: clipMask 3s linear infinite;
+}
+
+:host(:not(.hide-track)):host(.xx-small)::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 1px solid var(--theme-color-ghost--hover);
+}
+
+:host(.primary)::after {
+  border-color: var(--theme-color-dynamic);
+}
+
+:host(.primary)::before {
+  border-color: var(--theme-color-ghost--hover);
+}
+
+:host(.x-small) {
+  display: block;
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  max-width: 1.25rem;
+  max-height: 1.25rem;
+  border-radius: 100%;
+  position: relative;
+  animation: rotate 2s linear infinite;
+}
+:host(.x-small) *,
+:host(.x-small) *::after,
+:host(.x-small) *::before {
+  box-sizing: border-box;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes clipMask {
+  0% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  12.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  25% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  37.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  50% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  62.5% {
+    -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  75% {
+    -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+  }
+  87.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+  }
+  100% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+}
+
+:host(.x-small)::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 2px solid var(--ix-button-color, var(--theme-color-soft-text));
+  animation: clipMask 3s linear infinite;
+}
+
+:host(:not(.hide-track)):host(.x-small)::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 2px solid var(--theme-color-ghost--hover);
+}
+
+:host(.primary)::after {
+  border-color: var(--theme-color-dynamic);
+}
+
+:host(.primary)::before {
+  border-color: var(--theme-color-ghost--hover);
+}
+
+:host(.small) {
+  display: block;
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  border-radius: 100%;
+  position: relative;
+  animation: rotate 2s linear infinite;
+}
+:host(.small) *,
+:host(.small) *::after,
+:host(.small) *::before {
+  box-sizing: border-box;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes clipMask {
+  0% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  12.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  25% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  37.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  50% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  62.5% {
+    -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  75% {
+    -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+  }
+  87.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+  }
+  100% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+}
+
+:host(.small)::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 2px solid var(--ix-button-color, var(--theme-color-soft-text));
+  animation: clipMask 3s linear infinite;
+}
+
+:host(:not(.hide-track)):host(.small)::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 2px solid var(--theme-color-ghost--hover);
+}
+
+:host(.primary)::after {
+  border-color: var(--theme-color-dynamic);
+}
+
+:host(.primary)::before {
+  border-color: var(--theme-color-ghost--hover);
+}
+
+:host(.medium) {
+  display: block;
+  position: relative;
   width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+  max-width: 2rem;
+  max-height: 2rem;
+  border-radius: 100%;
+  position: relative;
+  animation: rotate 2s linear infinite;
+}
+:host(.medium) *,
+:host(.medium) *::after,
+:host(.medium) *::before {
+  box-sizing: border-box;
 }
-:host #fill {
-  fill: var(--theme-color-weak-text);
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
 }
-:host #stroke {
-  stroke: var(--theme-color-weak-text);
+@keyframes clipMask {
+  0% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  12.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  25% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  37.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  50% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  62.5% {
+    -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  75% {
+    -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+  }
+  87.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+  }
+  100% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
 }
 
-:host(.primary) #fill {
-  fill: var(--theme-color-primary);
+:host(.medium)::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 2px solid var(--ix-button-color, var(--theme-color-soft-text));
+  animation: clipMask 3s linear infinite;
 }
-:host(.primary) #stroke {
-  stroke: var(--theme-color-primary);
+
+:host(:not(.hide-track)):host(.medium)::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 2px solid var(--theme-color-ghost--hover);
+}
+
+:host(.primary)::after {
+  border-color: var(--theme-color-dynamic);
+}
+
+:host(.primary)::before {
+  border-color: var(--theme-color-ghost--hover);
 }
 
 :host(.large) {
-  height: 6rem;
+  display: block;
+  position: relative;
   width: 6rem;
+  height: 6rem;
+  min-width: 6rem;
+  min-height: 6rem;
+  max-width: 6rem;
+  max-height: 6rem;
+  border-radius: 100%;
+  position: relative;
+  animation: rotate 2s linear infinite;
 }
-:host(.large) svg {
-  height: 5.75rem;
-  width: 6rem;
+:host(.large) *,
+:host(.large) *::after,
+:host(.large) *::before {
+  box-sizing: border-box;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes clipMask {
+  0% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  12.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  25% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  37.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  50% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  62.5% {
+    -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+  75% {
+    -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
+  }
+  87.5% {
+    -webkit-clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+            clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
+  }
+  100% {
+    -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+            clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+}
+
+:host(.large)::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 4px solid var(--ix-button-color, var(--theme-color-soft-text));
+  animation: clipMask 3s linear infinite;
+}
+
+:host(:not(.hide-track)):host(.large)::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 8.33%;
+  border-radius: 100%;
+  border: 4px solid var(--theme-color-ghost--hover);
+}
+
+:host(.primary)::after {
+  border-color: var(--theme-color-dynamic);
+}
+
+:host(.primary)::before {
+  border-color: var(--theme-color-ghost--hover);
 }