@justeattakeaway/pie-tag 0.22.18 → 0.22.20

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 (4) hide show
  1. package/custom-elements.json +41 -9
  2. package/dist/index.js +1 -1
  3. package/package.json +6 -8
  4. package/src/react.ts +0 -0
package/custom-elements.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "type": {
19
19
  "text": "[\r\n 'neutral',\r\n 'neutral-alternative',\r\n 'ghost',\r\n 'outline',\r\n 'translucent',\r\n 'information',\r\n 'success',\r\n 'error',\r\n 'warning',\r\n 'brand-02',\r\n 'brand-03',\r\n 'brand-04',\r\n 'brand-05',\r\n 'brand-06',\r\n 'brand-08'\r\n]"
20
20
  },
21
- "default": "[\r\n 'neutral',\r\n 'neutral-alternative',\r\n 'ghost',\r\n 'outline',\r\n 'translucent',\r\n 'information',\r\n 'success',\r\n 'error',\r\n 'warning',\r\n 'brand-02',\r\n 'brand-03',\r\n 'brand-04',\r\n 'brand-05',\r\n 'brand-06',\r\n 'brand-08'\r\n]"
21
+ "default": "[ 'neutral', 'neutral-alternative', 'ghost', 'outline', 'translucent', 'information', 'success', 'error', 'warning', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06', 'brand-08' ]"
22
22
  },
23
23
  {
24
24
  "kind": "variable",
@@ -34,7 +34,7 @@
34
34
  "type": {
35
35
  "text": "DefaultProps"
36
36
  },
37
- "default": "{\r\n variant: 'neutral',\r\n isStrong: false,\r\n isDimmed: false,\r\n size: 'large',\r\n isIconOnly: false,\r\n hasLeadingIcon: false,\r\n}"
37
+ "default": "{ variant: 'neutral', isStrong: false, isDimmed: false, size: 'large', isIconOnly: false, hasLeadingIcon: false, }"
38
38
  }
39
39
  ],
40
40
  "exports": [
@@ -96,32 +96,64 @@
96
96
  {
97
97
  "kind": "field",
98
98
  "name": "variant",
99
- "privacy": "public"
99
+ "privacy": "public",
100
+ "attribute": "variant"
100
101
  },
101
102
  {
102
103
  "kind": "field",
103
104
  "name": "size",
104
- "privacy": "public"
105
+ "privacy": "public",
106
+ "attribute": "size"
105
107
  },
106
108
  {
107
109
  "kind": "field",
108
110
  "name": "isStrong",
109
- "privacy": "public"
111
+ "privacy": "public",
112
+ "attribute": "isStrong"
110
113
  },
111
114
  {
112
115
  "kind": "field",
113
116
  "name": "isDimmed",
114
- "privacy": "public"
117
+ "privacy": "public",
118
+ "attribute": "isDimmed"
115
119
  },
116
120
  {
117
121
  "kind": "field",
118
122
  "name": "isIconOnly",
119
- "privacy": "public"
123
+ "privacy": "public",
124
+ "attribute": "isIconOnly"
120
125
  },
121
126
  {
122
127
  "kind": "field",
123
128
  "name": "hasLeadingIcon",
124
- "privacy": "public"
129
+ "privacy": "public",
130
+ "attribute": "hasLeadingIcon"
131
+ }
132
+ ],
133
+ "attributes": [
134
+ {
135
+ "name": "variant",
136
+ "fieldName": "variant"
137
+ },
138
+ {
139
+ "name": "size",
140
+ "fieldName": "size"
141
+ },
142
+ {
143
+ "name": "isStrong",
144
+ "fieldName": "isStrong"
145
+ },
146
+ {
147
+ "name": "isDimmed",
148
+ "fieldName": "isDimmed"
149
+ },
150
+ {
151
+ "name": "isIconOnly",
152
+ "fieldName": "isIconOnly"
153
+ },
154
+ {
155
+ "name": "hasLeadingIcon",
156
+ "fieldName": "hasLeadingIcon"
125
157
  }
126
158
  ],
127
159
  "superclass": {
@@ -138,7 +170,7 @@
138
170
  "name": "*",
139
171
  "declaration": {
140
172
  "name": "*",
141
- "package": "./defs"
173
+ "module": "src/defs"
142
174
  }
143
175
  },
144
176
  {
package/dist/index.js CHANGED
@@ -7,7 +7,7 @@ const s = class s extends u {
7
7
  this.getAttribute("v") || this.setAttribute("v", s.v);
8
8
  }
9
9
  };
10
- s.v = "0.22.18";
10
+ s.v = "0.22.20";
11
11
  let v = s;
12
12
  const w = '*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}.c-tag{--tag-bg-color: var(--dt-color-container-strong);--tag-icon-bg-color: var(--dt-color-container-inverse);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default);--tag-transparent-bg-color: transparent;--tag-border-width: 1px;--tag-border-color: var(--tag-bg-color);border:var(--tag-border-width) solid var(--tag-border-color);border-radius:var(--tag-border-radius);width:100%;font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);color:var(--tag-color);display:flex;align-items:center;justify-content:center;background-color:var(--tag-bg-color);padding-inline-start:var(--tag-padding-inline-start);padding-inline-end:var(--tag-padding-inline-end);padding-block-start:var(--tag-padding-block-start);padding-block-end:var(--tag-padding-block-end)}.c-tag slot[name=icon]{color:var(--tag-icon-color)}.c-tag slot[name=icon]::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}.c-tag slot:not([name=icon]){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag.c-tag--large{--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-border-radius: var(--dt-radius-rounded-e);--icon-size-override: 16px;--tag-padding-block-start: calc(var(--dt-spacing-a-small) - var(--tag-border-width));--tag-padding-block-end: calc(var(--dt-spacing-a-small) - var(--tag-border-width));--tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a)}.c-tag.c-tag--small{--tag-font-family: var(--dt-font-caption-family);--tag-font-weight: var(--dt-font-caption-weight);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px);--tag-border-radius: var(--dt-radius-rounded-c);--icon-size-override: 12px;--tag-padding-block-start: 0;--tag-padding-block-end: 0;--tag-padding-inline-start: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a-small)}.c-tag.c-tag--icon-only.c-tag--large,.c-tag.c-tag--icon-only.c-tag--small{--tag-padding-block-start: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-padding-block-end: calc(var(--dt-spacing-a) - var(--tag-border-width))}.c-tag.c-tag--icon-only.c-tag--small{--tag-border-radius: var(--dt-radius-rounded-e);--icon-size-override: 16px;--tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a)}.c-tag.c-tag--has-icon:not(.c-tag--icon-only){--tag-padding-inline-start: 0;--tag-padding-block-start: 0;--tag-padding-block-end: 0;gap:var(--tag-gap)}.c-tag.c-tag--has-icon:not(.c-tag--icon-only).c-tag--large{--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-icon-container-size: 22px}.c-tag.c-tag--has-icon:not(.c-tag--icon-only).c-tag--small{--tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-icon-container-size: 16px}.c-tag.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]{background-color:var(--tag-icon-bg-color);display:grid;place-items:center;border-radius:inherit;height:var(--tag-icon-container-size);aspect-ratio:1/1}.c-tag.is-dimmed{opacity:.5}.c-tag.c-tag--neutral.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-container-inverse);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-container-inverse);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral-alternative{--tag-bg-color: var(--dt-color-container-default);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral-alternative.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-default);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--information{--tag-bg-color: var(--dt-color-support-info-02);--tag-icon-bg-color: var(--dt-color-support-info);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-info-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-info);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--information.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-info);--tag-icon-bg-color: var(--dt-color-support-info-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success{--tag-bg-color: var(--dt-color-support-positive-02);--tag-icon-bg-color: var(--dt-color-support-positive);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-positive-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-positive);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-positive);--tag-icon-bg-color: var(--dt-color-support-positive-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--error{--tag-bg-color: var(--dt-color-support-error-02);--tag-icon-bg-color: var(--dt-color-support-error);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-error-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-error);--tag-icon-color: var(--dt-color-content-light)}.c-tag.c-tag--error.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-error);--tag-icon-bg-color: var(--dt-color-support-error-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--warning{--tag-bg-color: var(--dt-color-support-warning-02);--tag-icon-bg-color: var(--dt-color-support-warning);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--warning.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-warning-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--warning.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-warning);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--warning.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-warning);--tag-icon-bg-color: var(--dt-color-support-warning-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-02{--tag-bg-color: var(--dt-color-support-brand-02);--tag-icon-bg-color: var(--dt-color-support-brand-01);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-02.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03{--tag-bg-color: var(--dt-color-support-brand-03-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-03);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-03-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-03);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-03.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-03);--tag-icon-bg-color: var(--dt-color-support-brand-03-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04{--tag-bg-color: var(--dt-color-support-brand-04-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-04);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-04.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-04-subtle);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-04);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-04);--tag-icon-bg-color: var(--dt-color-support-brand-04-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05{--tag-bg-color: var(--dt-color-support-brand-05-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-05);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-05-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-05);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-05);--tag-icon-bg-color: var(--dt-color-support-brand-05-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-06{--tag-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-06);--tag-icon-color: var(--dt-color-content-light);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-06.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-06.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-06);--tag-icon-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-06.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-06);--tag-icon-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-08{--tag-bg-color: var(--dt-color-support-brand-08-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-08);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-08.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-08-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-08.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-08);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-08.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-08);--tag-icon-bg-color: var(--dt-color-support-brand-08-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--ghost{--tag-bg-color: var(--dt-color-transparent);--tag-icon-bg-color: var(--dt-color-transparent);--tag-icon-color: var(--dt-color-content-default-solid);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--ghost.c-tag--icon-only{--tag-bg-color: var(--dt-color-transparent);--tag-icon-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--translucent{--tag-bg-color: var(--dt-color-container-prominent);--tag-icon-bg-color: var(--dt-color-container-neutral);--tag-icon-color: var(--dt-color-content-default-solid);--tag-color: var(--dt-color-content-default-solid);--tag-border-color: var(--dt-color-border-neutral);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.c-tag.c-tag--translucent.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-prominent);--tag-icon-color: var(--dt-color-content-default-solid);--tag-border-color: var(--dt-color-border-neutral)}.c-tag.c-tag--outline{--tag-bg-color: var(--dt-color-transparent);--tag-border-color: var(--dt-color-border-strong);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--outline.c-tag--icon-only{--tag-icon-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--outline.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]{position:relative}.c-tag.c-tag--outline.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]:before{content:"";position:absolute;left:-.25px;height:var(--tag-icon-container-size);aspect-ratio:1;z-index:-1;border-radius:inherit;box-shadow:inset 5px 0 0 0 var(--tag-icon-bg-color)}', k = [
13
13
  "neutral",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-tag",
3
3
  "description": "PIE Design System Tag built using Web Components",
4
- "version": "0.22.18",
4
+ "version": "0.22.20",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -29,7 +29,7 @@
29
29
  "scripts": {
30
30
  "build": "run -T vite build",
31
31
  "build:react-wrapper": "npx build-react-wrapper",
32
- "create:manifest": "yarn cem analyze --litelement",
32
+ "create:manifest": "run -T cem analyze --litelement",
33
33
  "lint:scripts": "run -T eslint .",
34
34
  "lint:scripts:fix": "yarn lint:scripts --fix",
35
35
  "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
@@ -43,13 +43,11 @@
43
43
  "author": "Just Eat Takeaway.com - Design System Team",
44
44
  "license": "Apache-2.0",
45
45
  "devDependencies": {
46
- "@custom-elements-manifest/analyzer": "0.9.0",
47
- "@justeattakeaway/pie-components-config": "0.21.0",
46
+ "@justeattakeaway/pie-components-config": "0.21.2",
48
47
  "@justeattakeaway/pie-css": "1.1.1",
49
- "@justeattakeaway/pie-icons-webc": "1.22.0",
50
- "@justeattakeaway/pie-monorepo-utils": "0.9.0",
51
- "@justeattakeaway/pie-wrapper-react": "0.14.4",
52
- "cem-plugin-module-file-extensions": "0.0.5"
48
+ "@justeattakeaway/pie-icons-webc": "1.23.0",
49
+ "@justeattakeaway/pie-monorepo-utils": "0.9.1",
50
+ "@justeattakeaway/pie-wrapper-react": "0.14.4"
53
51
  },
54
52
  "dependencies": {
55
53
  "@justeattakeaway/pie-webc-core": "14.0.1"
package/src/react.ts CHANGED
File without changes