@justeattakeaway/pie-card 0.21.2 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/custom-elements.json +10 -22
  2. package/dist/index.d.ts +8 -8
  3. package/dist/index.js +53 -53
  4. package/dist/react.d.ts +8 -8
  5. package/package.json +2 -2
  6. package/src/card.scss +1 -1
  7. package/src/defs.ts +1 -1
  8. package/src/index.ts +9 -9
package/custom-elements.json CHANGED
@@ -88,18 +88,12 @@
88
88
  {
89
89
  "kind": "field",
90
90
  "name": "tag",
91
- "type": {
92
- "text": "CardProps['tag']"
93
- },
94
91
  "privacy": "public",
95
92
  "attribute": "tag"
96
93
  },
97
94
  {
98
95
  "kind": "field",
99
96
  "name": "variant",
100
- "type": {
101
- "text": "CardProps['variant']"
102
- },
103
97
  "privacy": "public",
104
98
  "attribute": "variant"
105
99
  },
@@ -107,7 +101,7 @@
107
101
  "kind": "field",
108
102
  "name": "href",
109
103
  "type": {
110
- "text": "string | undefined"
104
+ "text": "CardProps['href']"
111
105
  },
112
106
  "privacy": "public",
113
107
  "attribute": "href",
@@ -117,7 +111,7 @@
117
111
  "kind": "field",
118
112
  "name": "target",
119
113
  "type": {
120
- "text": "string | undefined"
114
+ "text": "CardProps['target']"
121
115
  },
122
116
  "privacy": "public",
123
117
  "attribute": "target",
@@ -127,7 +121,7 @@
127
121
  "kind": "field",
128
122
  "name": "rel",
129
123
  "type": {
130
- "text": "string | undefined"
124
+ "text": "CardProps['rel']"
131
125
  },
132
126
  "privacy": "public",
133
127
  "attribute": "rel",
@@ -143,7 +137,7 @@
143
137
  "kind": "field",
144
138
  "name": "aria",
145
139
  "type": {
146
- "text": "CardProps['aria'] | undefined"
140
+ "text": "CardProps['aria']"
147
141
  },
148
142
  "privacy": "public",
149
143
  "attribute": "aria"
@@ -158,7 +152,7 @@
158
152
  "kind": "field",
159
153
  "name": "padding",
160
154
  "type": {
161
- "text": "CardProps['padding'] | undefined"
155
+ "text": "CardProps['padding']"
162
156
  },
163
157
  "privacy": "public",
164
158
  "attribute": "padding"
@@ -254,36 +248,30 @@
254
248
  "attributes": [
255
249
  {
256
250
  "name": "tag",
257
- "type": {
258
- "text": "CardProps['tag']"
259
- },
260
251
  "fieldName": "tag"
261
252
  },
262
253
  {
263
254
  "name": "variant",
264
- "type": {
265
- "text": "CardProps['variant']"
266
- },
267
255
  "fieldName": "variant"
268
256
  },
269
257
  {
270
258
  "name": "href",
271
259
  "type": {
272
- "text": "string | undefined"
260
+ "text": "CardProps['href']"
273
261
  },
274
262
  "fieldName": "href"
275
263
  },
276
264
  {
277
265
  "name": "target",
278
266
  "type": {
279
- "text": "string | undefined"
267
+ "text": "CardProps['target']"
280
268
  },
281
269
  "fieldName": "target"
282
270
  },
283
271
  {
284
272
  "name": "rel",
285
273
  "type": {
286
- "text": "string | undefined"
274
+ "text": "CardProps['rel']"
287
275
  },
288
276
  "fieldName": "rel"
289
277
  },
@@ -294,7 +282,7 @@
294
282
  {
295
283
  "name": "aria",
296
284
  "type": {
297
- "text": "CardProps['aria'] | undefined"
285
+ "text": "CardProps['aria']"
298
286
  },
299
287
  "fieldName": "aria"
300
288
  },
@@ -305,7 +293,7 @@
305
293
  {
306
294
  "name": "padding",
307
295
  "type": {
308
- "text": "CardProps['padding'] | undefined"
296
+ "text": "CardProps['padding']"
309
297
  },
310
298
  "fieldName": "padding"
311
299
  }
package/dist/index.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { LitElement } from 'lit';
4
4
  import type { PropertyValues } from 'lit';
5
5
  import type { TemplateResult } from 'lit';
6
6
 
7
- export declare type AriaProps = {
7
+ declare type AriaProps = {
8
8
  label?: string;
9
9
  };
10
10
 
@@ -61,15 +61,15 @@ export declare const paddingValues: string[];
61
61
  * @tagname pie-card
62
62
  */
63
63
  export declare class PieCard extends LitElement implements CardProps {
64
- tag: CardProps['tag'];
65
- variant: CardProps['variant'];
66
- href?: string;
67
- target?: string;
68
- rel?: string;
64
+ tag: "a" | "button";
65
+ variant: "default" | "outline" | "inverse" | "outline-inverse";
66
+ href: CardProps['href'];
67
+ target: CardProps['target'];
68
+ rel: CardProps['rel'];
69
69
  disabled: boolean;
70
- aria?: CardProps['aria'];
70
+ aria: CardProps['aria'];
71
71
  isDraggable: boolean;
72
- padding?: CardProps['padding'];
72
+ padding: CardProps['padding'];
73
73
  private assignedElements?;
74
74
  private onClickHandler;
75
75
  /**
package/dist/index.js CHANGED
@@ -1,20 +1,20 @@
1
- import { LitElement as S, html as u, nothing as g, unsafeCSS as $ } from "lit";
2
- import { classMap as f } from "lit/directives/class-map.js";
1
+ import { LitElement as S, html as b, nothing as g, unsafeCSS as $ } from "lit";
2
+ import { classMap as h } from "lit/directives/class-map.js";
3
3
  import { ifDefined as m } from "lit/directives/if-defined.js";
4
4
  import { property as d, queryAssignedElements as C } from "lit/decorators.js";
5
- import { validPropertyValues as b, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
6
- const k = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--default:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--outline:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}", E = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], y = ["a", "b", "c", "d", "e", "f", "g"], D = y.flatMap((v) => [v, ...y.map((r) => `${v},${r}`)]), s = {
5
+ import { validPropertyValues as u, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
6
+ const k = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--default:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--outline:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-inverse-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}", E = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], y = ["a", "b", "c", "d", "e", "f", "g"], D = y.flatMap((v) => [v, ...y.map((r) => `${v},${r}`)]), s = {
7
7
  disabled: !1,
8
8
  variant: "default",
9
9
  isDraggable: !1,
10
10
  tag: "button"
11
11
  };
12
- var I = Object.defineProperty, c = (v, r, a, o) => {
13
- for (var e = void 0, i = v.length - 1, l; i >= 0; i--)
14
- (l = v[i]) && (e = l(r, a, e) || e);
15
- return e && I(r, a, e), e;
12
+ var I = Object.defineProperty, c = (v, r, e, t) => {
13
+ for (var a = void 0, i = v.length - 1, l; i >= 0; i--)
14
+ (l = v[i]) && (a = l(r, e, a) || a);
15
+ return a && I(r, e, a), a;
16
16
  };
17
- const p = "pie-card", h = class h extends S {
17
+ const p = "pie-card", f = class f extends S {
18
18
  constructor() {
19
19
  super(...arguments), this.tag = s.tag, this.variant = s.variant, this.disabled = s.disabled, this.isDraggable = s.isDraggable;
20
20
  }
@@ -27,24 +27,24 @@ const p = "pie-card", h = class h extends S {
27
27
  * @private
28
28
  */
29
29
  renderAnchor(r) {
30
- const a = this.generatePaddingCSS(), {
31
- href: o,
32
- rel: e,
30
+ const e = this.generatePaddingCSS(), {
31
+ href: t,
32
+ rel: a,
33
33
  target: i,
34
34
  disabled: l,
35
35
  aria: n
36
36
  } = this;
37
- return u`
37
+ return b`
38
38
  <a
39
- class="${f(r)}"
39
+ class="${h(r)}"
40
40
  data-test-id="pie-card"
41
- href=${m(o && !l ? o : void 0)}
41
+ href=${m(t && !l ? t : void 0)}
42
42
  target=${i || g}
43
- rel=${e || g}
43
+ rel=${a || g}
44
44
  role="link"
45
45
  aria-label=${(n == null ? void 0 : n.label) || g}
46
46
  aria-disabled=${l ? "true" : "false"}
47
- style=${m(a)}>
47
+ style=${m(e)}>
48
48
  <slot @slotchange=${this.handleSlotChange}></slot>
49
49
  </a>`;
50
50
  }
@@ -60,11 +60,11 @@ const p = "pie-card", h = class h extends S {
60
60
  */
61
61
  generatePaddingCSS() {
62
62
  const { padding: r } = this;
63
- let a = "";
63
+ let e = "";
64
64
  if (!r)
65
65
  return "";
66
- const o = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
67
- return o.length > 0 && o.length <= 2 && (a += `var(--dt-spacing-${o[0]})`, o.length > 1 && (a += ` var(--dt-spacing-${o[1]})`)), a ? `padding: ${a}` : "";
66
+ const t = r.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
67
+ return t.length > 0 && t.length <= 2 && (e += `var(--dt-spacing-${t[0]})`, t.length > 1 && (e += ` var(--dt-spacing-${t[1]})`)), e ? `padding: ${e}` : "";
68
68
  }
69
69
  /**
70
70
  * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
@@ -80,9 +80,9 @@ const p = "pie-card", h = class h extends S {
80
80
  * @private
81
81
  */
82
82
  updateImagesOpacity() {
83
- this.assignedElements && this.assignedElements.forEach((a) => {
84
- const o = a.querySelectorAll("img");
85
- this.applyOpacityToImages(o);
83
+ this.assignedElements && this.assignedElements.forEach((e) => {
84
+ const t = e.querySelectorAll("img");
85
+ this.applyOpacityToImages(t);
86
86
  });
87
87
  const r = this.querySelectorAll("img");
88
88
  this.applyOpacityToImages(r);
@@ -94,8 +94,8 @@ const p = "pie-card", h = class h extends S {
94
94
  * @private
95
95
  */
96
96
  applyOpacityToImages(r) {
97
- r.forEach((a) => {
98
- a.style.opacity = this.disabled ? "0.5" : "";
97
+ r.forEach((e) => {
98
+ e.style.opacity = this.disabled ? "0.5" : "";
99
99
  });
100
100
  }
101
101
  /**
@@ -109,24 +109,24 @@ const p = "pie-card", h = class h extends S {
109
109
  render() {
110
110
  const {
111
111
  variant: r,
112
- disabled: a,
113
- tag: o,
114
- aria: e,
112
+ disabled: e,
113
+ tag: t,
114
+ aria: a,
115
115
  isDraggable: i
116
116
  } = this, l = this.generatePaddingCSS(), n = {
117
117
  "c-card": !0,
118
118
  [`c-card--${r}`]: !0,
119
119
  "c-card--draggable": i,
120
- "c-card--disabled": a
120
+ "c-card--disabled": e
121
121
  };
122
- return o === "a" ? this.renderAnchor(n) : u`
122
+ return t === "a" ? this.renderAnchor(n) : b`
123
123
  <div
124
- class="${f(n)}"
124
+ class="${h(n)}"
125
125
  data-test-id="pie-card"
126
126
  role="button"
127
- tabindex=${a ? "-1" : "0"}
128
- aria-label=${(e == null ? void 0 : e.label) || g}
129
- aria-disabled=${a ? "true" : "false"}
127
+ tabindex=${e ? "-1" : "0"}
128
+ aria-label=${(a == null ? void 0 : a.label) || g}
129
+ aria-disabled=${e ? "true" : "false"}
130
130
  style=${l || ""}
131
131
  @click=${this.onClickHandler}>
132
132
  <slot @slotchange=${this.handleSlotChange}></slot>
@@ -134,44 +134,44 @@ const p = "pie-card", h = class h extends S {
134
134
  </div>`;
135
135
  }
136
136
  };
137
- h.styles = $(k);
138
- let t = h;
137
+ f.styles = $(k);
138
+ let o = f;
139
139
  c([
140
- d(),
141
- b(p, O, s.tag)
142
- ], t.prototype, "tag");
140
+ d({ type: String }),
141
+ u(p, O, s.tag)
142
+ ], o.prototype, "tag");
143
143
  c([
144
- d(),
145
- b(p, E, s.variant)
146
- ], t.prototype, "variant");
144
+ d({ type: String }),
145
+ u(p, E, s.variant)
146
+ ], o.prototype, "variant");
147
147
  c([
148
148
  d({ type: String, reflect: !0 })
149
- ], t.prototype, "href");
149
+ ], o.prototype, "href");
150
150
  c([
151
151
  d({ type: String, reflect: !0 })
152
- ], t.prototype, "target");
152
+ ], o.prototype, "target");
153
153
  c([
154
154
  d({ type: String, reflect: !0 })
155
- ], t.prototype, "rel");
155
+ ], o.prototype, "rel");
156
156
  c([
157
157
  d({ type: Boolean })
158
- ], t.prototype, "disabled");
158
+ ], o.prototype, "disabled");
159
159
  c([
160
160
  d({ type: Object })
161
- ], t.prototype, "aria");
161
+ ], o.prototype, "aria");
162
162
  c([
163
163
  d({ type: Boolean })
164
- ], t.prototype, "isDraggable");
164
+ ], o.prototype, "isDraggable");
165
165
  c([
166
166
  d({ type: String }),
167
- b(p, D, void 0)
168
- ], t.prototype, "padding");
167
+ u(p, D, void 0)
168
+ ], o.prototype, "padding");
169
169
  c([
170
170
  C({ flatten: !0 })
171
- ], t.prototype, "assignedElements");
172
- x(p, t);
171
+ ], o.prototype, "assignedElements");
172
+ x(p, o);
173
173
  export {
174
- t as PieCard,
174
+ o as PieCard,
175
175
  s as defaultProps,
176
176
  D as paddingValues,
177
177
  O as tags,
package/dist/react.d.ts CHANGED
@@ -5,7 +5,7 @@ import type { PropertyValues } from 'lit';
5
5
  import * as React_2 from 'react';
6
6
  import type { TemplateResult } from 'lit';
7
7
 
8
- export declare type AriaProps = {
8
+ declare type AriaProps = {
9
9
  label?: string;
10
10
  };
11
11
 
@@ -64,15 +64,15 @@ export declare const PieCard: React_2.ForwardRefExoticComponent<CardProps & Reac
64
64
  * @tagname pie-card
65
65
  */
66
66
  declare class PieCard_2 extends LitElement implements CardProps {
67
- tag: CardProps['tag'];
68
- variant: CardProps['variant'];
69
- href?: string;
70
- target?: string;
71
- rel?: string;
67
+ tag: "a" | "button";
68
+ variant: "default" | "outline" | "inverse" | "outline-inverse";
69
+ href: CardProps['href'];
70
+ target: CardProps['target'];
71
+ rel: CardProps['rel'];
72
72
  disabled: boolean;
73
- aria?: CardProps['aria'];
73
+ aria: CardProps['aria'];
74
74
  isDraggable: boolean;
75
- padding?: CardProps['padding'];
75
+ padding: CardProps['padding'];
76
76
  private assignedElements?;
77
77
  private onClickHandler;
78
78
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-card",
3
- "version": "0.21.2",
3
+ "version": "0.22.0",
4
4
  "description": "PIE Design System Card built using Web Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -37,7 +37,7 @@
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.13.1",
40
+ "@justeattakeaway/pie-css": "0.14.0",
41
41
  "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
42
  "cem-plugin-module-file-extensions": "0.0.5"
43
43
  },
package/src/card.scss CHANGED
@@ -69,7 +69,7 @@
69
69
  --card-bg-color: var(--dt-color-container-inverse);
70
70
  --card-color: var(--dt-color-content-inverse);
71
71
 
72
- box-shadow: var(--dt-elevation-dark-card);
72
+ box-shadow: var(--dt-elevation-inverse-card);
73
73
 
74
74
  @include card-interactive-states('--dt-color-container-inverse', 'inverse');
75
75
  }
package/src/defs.ts CHANGED
@@ -8,7 +8,7 @@ export const paddingValues = spacingTokens.flatMap((first) => [first, ...spacing
8
8
 
9
9
  type PaddingValue = typeof spacingTokens[number];
10
10
 
11
- export type AriaProps = {
11
+ type AriaProps = {
12
12
  label?: string;
13
13
  };
14
14
 
package/src/index.ts CHANGED
@@ -23,35 +23,35 @@ const componentSelector = 'pie-card';
23
23
  * @tagname pie-card
24
24
  */
25
25
  export class PieCard extends LitElement implements CardProps {
26
- @property()
26
+ @property({ type: String })
27
27
  @validPropertyValues(componentSelector, tags, defaultProps.tag)
28
- public tag: CardProps['tag'] = defaultProps.tag;
28
+ public tag = defaultProps.tag;
29
29
 
30
- @property()
30
+ @property({ type: String })
31
31
  @validPropertyValues(componentSelector, variants, defaultProps.variant)
32
- public variant: CardProps['variant'] = defaultProps.variant;
32
+ public variant = defaultProps.variant;
33
33
 
34
34
  @property({ type: String, reflect: true })
35
- public href?: string;
35
+ public href: CardProps['href'];
36
36
 
37
37
  @property({ type: String, reflect: true })
38
- public target?: string;
38
+ public target: CardProps['target'];
39
39
 
40
40
  @property({ type: String, reflect: true })
41
- public rel?: string;
41
+ public rel: CardProps['rel'];
42
42
 
43
43
  @property({ type: Boolean })
44
44
  public disabled = defaultProps.disabled;
45
45
 
46
46
  @property({ type: Object })
47
- public aria?: CardProps['aria'];
47
+ public aria: CardProps['aria'];
48
48
 
49
49
  @property({ type: Boolean })
50
50
  public isDraggable = defaultProps.isDraggable;
51
51
 
52
52
  @property({ type: String })
53
53
  @validPropertyValues(componentSelector, paddingValues, undefined)
54
- public padding?: CardProps['padding'];
54
+ public padding: CardProps['padding'];
55
55
 
56
56
  @queryAssignedElements({ flatten: true })
57
57
  private assignedElements?: HTMLElement[];