@justeattakeaway/pie-tag 0.22.20 → 0.22.22

package/custom-elements.json

@@ -16,7 +16,7 @@
           "kind": "variable",
           "name": "variants",
           "type": {
-            "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]"
+            "text": "[\n    'neutral',\n    'neutral-alternative',\n    'ghost',\n    'outline',\n    'translucent',\n    'information',\n    'success',\n    'error',\n    'warning',\n    'brand-02',\n    'brand-03',\n    'brand-04',\n    'brand-05',\n    'brand-06',\n    'brand-08'\n]"
           },
           "default": "[ 'neutral', 'neutral-alternative', 'ghost', 'outline', 'translucent', 'information', 'success', 'error', 'warning', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06', 'brand-08' ]"
         },

package/dist/index.js

@@ -7,7 +7,7 @@ const s = class s extends u {
     this.getAttribute("v") || this.setAttribute("v", s.v);
   }
 };
-s.v = "0.22.20";
+s.v = "0.22.22";
 let v = s;
 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 = [
   "neutral",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tag",
   "description": "PIE Design System Tag built using Web Components",
-  "version": "0.22.20",
+  "version": "0.22.22",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -28,32 +28,29 @@
   },
   "scripts": {
     "build": "run -T vite build",
-    "build:react-wrapper": "npx build-react-wrapper",
+    "build:react-wrapper": "run -T build-react-wrapper",
     "create:manifest": "run -T cem analyze --litelement",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "yarn lint:scripts --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers": "run -T playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
-    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TAG} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TAG} percy exec --allowed-hostname cloudfront.net -- run -T playwright test -c ./playwright-lit-visual.config.ts",
     "test:visual:ci": "yarn test:visual"
   },
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.21.2",
-    "@justeattakeaway/pie-css": "1.1.1",
-    "@justeattakeaway/pie-icons-webc": "1.23.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.1",
-    "@justeattakeaway/pie-wrapper-react": "0.14.4"
+    "@justeattakeaway/pie-components-config": "0.21.3",
+    "@justeattakeaway/pie-css": "1.2.0",
+    "@justeattakeaway/pie-icons-webc": "1.25.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.5",
+    "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "14.0.1"
-  },
-  "volta": {
-    "extends": "../../../package.json"
+    "@justeattakeaway/pie-webc-core": "15.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [