diff --git a/src/spinner/index.ts b/src/spinner/index.ts
index 178d1a98..35f6b88c 100644
--- a/src/spinner/index.ts
+++ b/src/spinner/index.ts
@@ -1,35 +1,42 @@
-import { customElement } from "lit/decorators.js";
-import { Spinner } from "./spinner";
-import styles from "./spinner.style";
+import { customElement } from 'lit/decorators.js';
+import { Spinner } from './spinner';
+import styles from './spinner.style';
-/**
-* ### Example
-*
-*
-* ##### Simple
-*
-* ```html
-*
-* ```
-*
-* ##### Variant
-*
-* ```html
-*
-* ```
-*
-* @summary Display spinner.
-*
-* @prop {string} [variant='primary'] - Specifies the spinner color. Acceptable values are [primary , inverse] .
-*/
+/**
+ * ### Example
+ *
+ *
+ * ##### Simple
+ *
+ * ```html
+ *
+ * ```
+ *
+ * ##### Variant
+ *
+ * ```html
+ *
+ * ```
+ *
+ * @summary Display spinner.
+ *
+ * @prop {`'primary'` \| `'inverse'`} [`variant`=`'primary'`] - Specifies the spinner color. Acceptable values are `primary` and `inverse`.
+ *
+ * @csspart `svg` - The svg tag that represents spinner component.
+ *
+ * @cssprop [`--tap-spinner-color-primary`=`--tap-sys-color-surface-black`]
+ * @cssprop [`--tap-spinner-color-inverse`=`--tap-sys-color-surface-white`]
+ * @cssprop [`--tap-spinner-size`=`--tap-sys-spacing-8`]
+ * @cssprop [`--tap-spinner-padding`=`--tap-sys-spacing-2`]
+ */
-@customElement("tap-spinner")
+@customElement('tap-spinner')
export class TapSpinner extends Spinner {
static readonly styles = [styles];
}
declare global {
interface HTMLElementTagNameMap {
- "tap-spinner": TapSpinner;
+ 'tap-spinner': TapSpinner;
}
}
diff --git a/src/spinner/spinner.style.ts b/src/spinner/spinner.style.ts
index ddf036a8..9b54dd24 100644
--- a/src/spinner/spinner.style.ts
+++ b/src/spinner/spinner.style.ts
@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
export default css`
:host {
@@ -6,27 +6,31 @@ export default css`
}
.spinner {
- width: 20px;
- height: 20px;
- padding: 2px;
+ width: var(--tap-spinner-size, var(--tap-sys-spacing-8));
+ height: var(--tap-spinner-size, var(--tap-sys-spacing-8));
+ padding: var(--tap-spinner-padding, var(--tap-sys-spacing-2));
stroke-linecap: round;
}
.rotating {
transform-origin: 300px 300px;
- animation : rotate 1s linear infinite;
+ animation: rotate 1s linear infinite;
}
.primary {
- color: var(--tap-sys-color-surface-black);
+ color: var(--tap-spinner-color-primary, var(--tap-sys-color-surface-black));
}
.inverse {
- color: var(--tap-sys-color-surface-white);
+ color: var(--tap-spinner-color-inverse, var(--tap-sys-color-surface-white));
}
@keyframes rotate {
- from {transform: rotate(105deg);}
- to {transform: rotate(465deg);}
+ from {
+ transform: rotate(105deg);
+ }
+ to {
+ transform: rotate(465deg);
+ }
}
`;
diff --git a/src/spinner/spinner.ts b/src/spinner/spinner.ts
index da116f40..71caa247 100644
--- a/src/spinner/spinner.ts
+++ b/src/spinner/spinner.ts
@@ -1,38 +1,68 @@
-import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
export class Spinner extends LitElement {
- @property() variant:
- | "primary"
- | "inverse" = "primary";
+ @property() variant: 'primary' | 'inverse' = 'primary';
- render() {
- return html`
-
- `;
- }
-}
\ No newline at end of file
+ render() {
+ return html`
+
+ `;
+ }
+}