@justeattakeaway/pie-spinner 1.2.4 → 1.3.0

package/custom-elements.json

@@ -79,20 +79,17 @@
               "type": {
                 "text": "SpinnerProps['aria']"
               },
-              "privacy": "public",
-              "attribute": "aria"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "size",
-              "privacy": "public",
-              "attribute": "size"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "variant",
-              "privacy": "public",
-              "attribute": "variant"
+              "privacy": "public"
             },
             {
               "kind": "method",
@@ -100,23 +97,6 @@
               "privacy": "private"
             }
           ],
-          "attributes": [
-            {
-              "name": "aria",
-              "type": {
-                "text": "SpinnerProps['aria']"
-              },
-              "fieldName": "aria"
-            },
-            {
-              "name": "size",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "fieldName": "variant"
-            }
-          ],
           "superclass": {
             "name": "PieElement",
             "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-import type { CSSResult } from 'lit';
+import { CSSResult } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import type { TemplateResult } from 'lit-html';
+import { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
     label?: string;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { LitElement as m, unsafeCSS as u, html as b, nothing as y } from "lit";
-import { property as d } from "lit/decorators.js";
+import { property as v } from "lit/decorators.js";
 import { classMap as z } from "lit/directives/class-map.js";
 import { validPropertyValues as h, safeCustomElement as g } from "@justeattakeaway/pie-webc-core";
 const a = class a extends m {
@@ -7,21 +7,21 @@ const a = class a extends m {
     this.getAttribute("v") || this.setAttribute("v", a.v);
   }
 };
-a.v = "1.2.4";
-let v = a;
-const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", w = ["xsmall", "small", "medium", "large", "xlarge"], S = ["brand", "secondary", "inverse"], o = {
+a.v = "1.3.0";
+let d = a;
+const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-solid-h);--spinner-base-color-s: var(--dt-color-content-brand-solid-s);--spinner-base-color-l: var(--dt-color-content-brand-solid-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-solid-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-solid-h);--spinner-base-color-s: var(--dt-color-content-inverse-solid-s);--spinner-base-color-l: var(--dt-color-content-inverse-solid-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", w = ["xsmall", "small", "medium", "large", "xlarge"], S = ["brand", "secondary", "inverse"], t = {
   size: "medium",
   variant: "brand"
 };
-var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (r, n, i, t) => {
-  for (var e = t > 1 ? void 0 : t ? P(n, i) : n, p = r.length - 1, c; p >= 0; p--)
-    (c = r[p]) && (e = (t ? c(n, i, e) : c(e)) || e);
-  return t && e && O(n, i, e), e;
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (r, n, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? P(n, i) : n, p = r.length - 1, c; p >= 0; p--)
+    (c = r[p]) && (e = (o ? c(n, i, e) : c(e)) || e);
+  return o && e && O(n, i, e), e;
 };
 const f = "pie-spinner";
-let s = class extends v {
+let s = class extends d {
   constructor() {
-    super(...arguments), this.size = o.size, this.variant = o.variant;
+    super(...arguments), this.size = t.size, this.variant = t.variant;
   }
   render() {
     const { variant: r, size: n } = this, i = {
@@ -48,22 +48,22 @@ let s = class extends v {
 };
 s.styles = u(x);
 l([
-  d({ type: Object })
+  v({ type: Object })
 ], s.prototype, "aria", 2);
 l([
-  d({ type: String }),
-  h(f, w, o.size)
+  v({ type: String }),
+  h(f, w, t.size)
 ], s.prototype, "size", 2);
 l([
-  d({ type: String }),
-  h(f, S, o.variant)
+  v({ type: String }),
+  h(f, S, t.variant)
 ], s.prototype, "variant", 2);
 s = l([
   g("pie-spinner")
 ], s);
 export {
   s as PieSpinner,
-  o as defaultProps,
+  t as defaultProps,
   w as sizes,
   S as variants
 };

package/dist/react.d.ts

@@ -1,8 +1,8 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-import type { CSSResult } from 'lit';
+import { CSSResult } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import * as React_2 from 'react';
-import type { TemplateResult } from 'lit-html';
+import { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
     label?: string;
@@ -12,7 +12,7 @@ export declare type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omi
 
 export declare const defaultProps: DefaultProps;
 
-export declare const PieSpinner: React_2.ForwardRefExoticComponent<SpinnerProps & React_2.RefAttributes<PieSpinner_2> & ReactBaseType>;
+export declare const PieSpinner: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<SpinnerProps> & React_2.RefAttributes<PieSpinner_2> & ReactBaseType>;
 
 /**
  * @tagname pie-spinner

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,14 +39,14 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.20.1",
-    "@justeattakeaway/pie-css": "0.16.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.5.1",
+    "@justeattakeaway/pie-components-config": "0.21.0",
+    "@justeattakeaway/pie-css": "0.22.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "1.0.0"
+    "@justeattakeaway/pie-webc-core": "2.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/spinner.scss

@@ -39,7 +39,7 @@
     will-change: transform;
     animation: rotate360 1.15s linear infinite;
 
-    @include spinner-base-colors('--dt-color-content-brand');
+    @include spinner-base-colors('--dt-color-content-brand-solid');
 
     &.c-spinner--medium,
     &.c-spinner--brand {
@@ -47,11 +47,11 @@
     }
 
     &.c-spinner--secondary {
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
+        @include spinner-base-colors('--dt-color-content-interactive-secondary-solid');
     }
 
     &.c-spinner--inverse {
-        @include spinner-base-colors('--dt-color-content-inverse');
+        @include spinner-base-colors('--dt-color-content-inverse-solid');
     }
 
     &.c-spinner--xsmall {