@maggioli-design-system/mds-badge - npm Package Compare versions

Comparing version 2.0.0 to 2.0.2

dist/cjs/loader.cjs.js

@@ -8,3 +8,3 @@ 'use strict';
 /*
- Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
  */
@@ -18,3 +18,3 @@ const patchEsm = () => {
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-badge.cjs",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1]}]]]], options);
+  return index.bootstrapLazy([["mds-badge.cjs",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1],"typographyVariant":[1,"typography-variant"]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/cjs/mds-badge.cjs.entry.js

@@ -26,3 +26,3 @@ 'use strict';
   render() {
-    return (index.h(index.Host, null, index.h("mds-text", { typography: this.typography }, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("mds-text", { typography: this.typography, variant: this.typographyVariant }, index.h("slot", null))));
   }
@@ -29,0 +29,0 @@ };

dist/cjs/mds-badge.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 /*
- Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
  */
@@ -19,3 +19,3 @@ const patchBrowser = () => {
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-badge.cjs",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1]}]]]], options);
+  return index.bootstrapLazy([["mds-badge.cjs",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1],"typographyVariant":[1,"typography-variant"]}]]]], options);
 });

dist/collection/collection-manifest.json

@@ -7,3 +7,3 @@ {
     "name": "@stencil/core",
-    "version": "2.16.1",
+    "version": "2.17.0",
     "typescriptVersion": "4.5.4"
@@ -10,0 +10,0 @@ },

dist/collection/components/mds-badge/mds-badge.js

@@ -19,3 +19,3 @@ import { Component, Host, h, Prop } from '@stencil/core';
     return (h(Host, null,
-      h("mds-text", { typography: this.typography },
+      h("mds-text", { typography: this.typography, variant: this.typographyVariant },
         h("slot", null))));
@@ -82,8 +82,12 @@ }
       "complexType": {
-        "original": "TypographySecondaryType",
+        "original": "TypographyInfoType | TypographyReadType",
         "resolved": "\"caption\" | \"detail\" | \"label\" | \"option\" | \"paragraph\" | \"tip\"",
         "references": {
-          "TypographySecondaryType": {
+          "TypographyInfoType": {
             "location": "import",
             "path": "../../types/typography"
+          },
+          "TypographyReadType": {
+            "location": "import",
+            "path": "../../types/typography"
           }
@@ -101,4 +105,26 @@ }
       "defaultValue": "'option'"
+    },
+    "typographyVariant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TypographyVariants",
+        "resolved": "\"info\" | \"mono\" | \"read\" | \"title\"",
+        "references": {
+          "TypographyVariants": {
+            "location": "import",
+            "path": "../../types/typography"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the variant for `typography`"
+      },
+      "attribute": "typography-variant",
+      "reflect": false
     }
   }; }
 }

dist/collection/components/mds-badge/test/mds-badge.stories.js

 import { h } from '@stencil/core';
-import { typographySecondaryDictionary } from '@dictionary/typography';
+import { typographyInfoDictionary, typographyVariationsDictionary } from '@dictionary/typography';
 import { themeFullVariantDictionary, toneSimpleVariantDictionary } from '@dictionary/variant';
@@ -17,4 +17,9 @@ export default {
       description: 'Specifies the font typography of the element',
-      options: typographySecondaryDictionary,
+      options: typographyInfoDictionary,
     },
+    'typography-variant': {
+      description: 'Specifies the variant for `typography`',
+      options: typographyVariationsDictionary,
+      control: { type: 'select' },
+    },
     variant: {
@@ -21,0 +26,0 @@ type: { name: 'string' },

dist/collection/dictionary/typography.js

@@ -18,2 +18,8 @@ const typographyDictionary = [
 ];
+const typographyVariationsDictionary = [
+  'title',
+  'info',
+  'read',
+  'mono',
+];
 const typographyMonoDictionary = [
@@ -23,3 +29,3 @@ 'code',
 ];
-const typographyPrimaryDictionary = [
+const typographyTitleDictionary = [
   'action',
@@ -33,3 +39,3 @@ 'h1',
 ];
-const typographySecondaryDictionary = [
+const typographyInfoDictionary = [
   'caption',
@@ -42,2 +48,7 @@ 'detail',
 ];
+const typographyReadDictionary = [
+  'caption',
+  'detail',
+  'paragraph',
+];
 const typographySmallerDictionary = [
@@ -52,2 +63,2 @@ 'option',
 ];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };

dist/components/index.d.ts

 /* MdsBadge custom elements */
+export { MdsBadge as MdsBadge } from '../types/components/mds-badge/mds-badge';
 
-import type { Components, JSX } from "../types/components";
-
 /**
@@ -23,5 +22,2 @@ * Used to manually set the base path where assets can be found.
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export type { Components, JSX };
-
 export * from '../types/components';

dist/components/index.js

 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { MdsBadge, defineCustomElement as defineCustomElementMdsBadge } from './mds-badge.js';

dist/components/mds-badge.js

@@ -24,3 +24,3 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
   render() {
-    return (h(Host, null, h("mds-text", { typography: this.typography }, h("slot", null))));
+    return (h(Host, null, h("mds-text", { typography: this.typography, variant: this.typographyVariant }, h("slot", null))));
   }
@@ -31,3 +31,4 @@ static get style() { return mdsBadgeCss; }
     "tone": [513],
-    "typography": [1]
+    "typography": [1],
+    "typographyVariant": [1, "typography-variant"]
   }]);
@@ -34,0 +35,0 @@ function defineCustomElement$1() {

dist/esm-es5/loader.js

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-f9027781.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["mds-badge",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1]}]]]],t)}))};export{defineCustomElements};
+import{p as promiseResolve,b as bootstrapLazy}from"./index-f9027781.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["mds-badge",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1],typographyVariant:[1,"typography-variant"]}]]]],t)}))};export{defineCustomElements};

dist/esm-es5/mds-badge.entry.js

@@ -1,1 +0,1 @@
-import{r as registerInstance,h,H as Host}from"./index-f9027781.js";var mdsBadgeCss="@tailwind utilities; :host{--background:rgb(var(--label-sky-09));--radius:0.25rem;--color:rgb(var(--label-sky-03));display:-ms-inline-flexbox;display:inline-flex;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;-ms-flex-align:center;align-items:center;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--background);border-radius:var(--radius);color:var(--color)}@tailwind utilities; :host([variant=amaranth]),:host([variant=amaranth][tone=strong]){--background:rgb(var(--label-amaranth-05));--color:rgb(var(--label-amaranth-10))}:host([variant=amaranth][tone=weak]){--background:rgb(var(--label-amaranth-08));--color:rgb(var(--label-amaranth-02))}:host([variant=amaranth][tone=quiet]){--background:rgb(var(--label-amaranth-09));--color:rgb(var(--label-amaranth-04))}@tailwind utilities; :host([variant=aqua]),:host([variant=aqua][tone=strong]){--background:rgb(var(--label-aqua-05));--color:rgb(var(--label-aqua-10))}:host([variant=aqua][tone=weak]){--background:rgb(var(--label-aqua-08));--color:rgb(var(--label-aqua-02))}:host([variant=aqua][tone=quiet]){--background:rgb(var(--label-aqua-09));--color:rgb(var(--label-aqua-04))}@tailwind utilities; :host([variant=blue]),:host([variant=blue][tone=strong]){--background:rgb(var(--label-blue-05));--color:rgb(var(--label-blue-10))}:host([variant=blue][tone=weak]){--background:rgb(var(--label-blue-08));--color:rgb(var(--label-blue-02))}:host([variant=blue][tone=quiet]){--background:rgb(var(--label-blue-09));--color:rgb(var(--label-blue-04))}@tailwind utilities; :host([variant=dark]),:host([variant=dark][tone=strong]){--background:rgb(var(--tone-neutral-02));--color:rgb(var(--tone-neutral-09))}:host([variant=dark][tone=weak]){--background:rgb(var(--tone-neutral-08));--color:rgb(var(--tone-neutral-02))}:host([variant=dark][tone=quiet]){--background:rgb(var(--tone-neutral-09));--color:rgb(var(--tone-neutral-05))}@tailwind utilities; :host([variant=error]),:host([variant=error][tone=strong]){--background:rgb(var(--status-error-05));--color:rgb(var(--status-error-10))}:host([variant=error][tone=weak]){--background:rgb(var(--status-error-08));--color:rgb(var(--status-error-02))}:host([variant=error][tone=quiet]){--background:rgb(var(--status-error-09));--color:rgb(var(--status-error-04))}@tailwind utilities; :host([variant=green]),:host([variant=green][tone=strong]){--background:rgb(var(--label-green-05));--color:rgb(var(--label-green-10))}:host([variant=green][tone=weak]){--background:rgb(var(--label-green-08));--color:rgb(var(--label-green-02))}:host([variant=green][tone=quiet]){--background:rgb(var(--label-green-09));--color:rgb(var(--label-green-04))}@tailwind utilities; :host([variant=info]),:host([variant=info][tone=strong]){--background:rgb(var(--status-info-05));--color:rgb(var(--status-info-10))}:host([variant=info][tone=weak]){--background:rgb(var(--status-info-08));--color:rgb(var(--status-info-02))}:host([variant=info][tone=quiet]){--background:rgb(var(--status-info-09));--color:rgb(var(--status-info-04))}@tailwind utilities; :host([variant=light]),:host([variant=light][tone=strong]){--background:rgb(var(--tone-neutral-10));--color:rgb(var(--tone-neutral-03))}:host([variant=light][tone=weak]){--background:rgb(var(--tone-neutral-10));--color:rgb(var(--tone-neutral-03))}:host([variant=light][tone=quiet]){--background:rgb(var(--tone-neutral-09));--color:rgb(var(--tone-neutral-02))}@tailwind utilities; :host([variant=lime]),:host([variant=lime][tone=strong]){--background:rgb(var(--label-lime-05));--color:rgb(var(--label-lime-10))}:host([variant=lime][tone=weak]){--background:rgb(var(--label-lime-08));--color:rgb(var(--label-lime-02))}:host([variant=lime][tone=quiet]){--background:rgb(var(--label-lime-09));--color:rgb(var(--label-lime-04))}@tailwind utilities; :host([variant=orange]),:host([variant=orange][tone=strong]){--background:rgb(var(--label-orange-05));--color:rgb(var(--label-orange-10))}:host([variant=orange][tone=weak]){--background:rgb(var(--label-orange-08));--color:rgb(var(--label-orange-02))}:host([variant=orange][tone=quiet]){--background:rgb(var(--label-orange-09));--color:rgb(var(--label-orange-04))}@tailwind utilities; :host([variant=orchid]),:host([variant=orchid][tone=strong]){--background:rgb(var(--label-orchid-05));--color:rgb(var(--label-orchid-10))}:host([variant=orchid][tone=weak]){--background:rgb(var(--label-orchid-08));--color:rgb(var(--label-orchid-02))}:host([variant=orchid][tone=quiet]){--background:rgb(var(--label-orchid-09));--color:rgb(var(--label-orchid-04))}@tailwind utilities; :host([variant=sky]),:host([variant=sky][tone=strong]){--background:rgb(var(--label-sky-05));--color:rgb(var(--label-sky-10))}:host([variant=sky][tone=weak]){--background:rgb(var(--label-sky-08));--color:rgb(var(--label-sky-02))}:host([variant=sky][tone=quiet]){--background:rgb(var(--label-sky-09));--color:rgb(var(--label-sky-04))}@tailwind utilities; :host([variant=success]),:host([variant=success][tone=strong]){--background:rgb(var(--status-success-05));--color:rgb(var(--status-success-10))}:host([variant=success][tone=weak]){--background:rgb(var(--status-success-08));--color:rgb(var(--status-success-02))}:host([variant=success][tone=quiet]){--background:rgb(var(--status-success-09));--color:rgb(var(--status-success-04))}@tailwind utilities; :host([variant=violet]),:host([variant=violet][tone=strong]){--background:rgb(var(--label-violet-05));--color:rgb(var(--label-violet-10))}:host([variant=violet][tone=weak]){--background:rgb(var(--label-violet-08));--color:rgb(var(--label-violet-02))}:host([variant=violet][tone=quiet]){--background:rgb(var(--label-violet-09));--color:rgb(var(--label-violet-04))}@tailwind utilities; :host([variant=warning]),:host([variant=warning][tone=strong]){--background:rgb(var(--status-warning-05));--color:rgb(var(--status-warning-10))}:host([variant=warning][tone=weak]){--background:rgb(var(--status-warning-08));--color:rgb(var(--status-warning-02))}:host([variant=warning][tone=quiet]){--background:rgb(var(--status-warning-09));--color:rgb(var(--status-warning-04))}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([variant=yellow]),:host([variant=yellow][tone=strong]){--background:rgb(var(--label-yellow-05));--color:rgb(var(--label-yellow-10))}:host([variant=yellow][tone=weak]){--background:rgb(var(--label-yellow-08));--color:rgb(var(--label-yellow-02))}:host([variant=yellow][tone=quiet]){--background:rgb(var(--label-yellow-09));--color:rgb(var(--label-yellow-04))}";var MdsBadge=function(){function r(r){registerInstance(this,r);this.variant="green";this.tone="weak";this.typography="option"}r.prototype.render=function(){return h(Host,null,h("mds-text",{typography:this.typography},h("slot",null)))};return r}();MdsBadge.style=mdsBadgeCss;export{MdsBadge as mds_badge};
+import{r as registerInstance,h,H as Host}from"./index-f9027781.js";var mdsBadgeCss="@tailwind utilities; :host{--background:rgb(var(--label-sky-09));--radius:0.25rem;--color:rgb(var(--label-sky-03));display:-ms-inline-flexbox;display:inline-flex;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;-ms-flex-align:center;align-items:center;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--background);border-radius:var(--radius);color:var(--color)}@tailwind utilities; :host([variant=amaranth]),:host([variant=amaranth][tone=strong]){--background:rgb(var(--label-amaranth-05));--color:rgb(var(--label-amaranth-10))}:host([variant=amaranth][tone=weak]){--background:rgb(var(--label-amaranth-08));--color:rgb(var(--label-amaranth-02))}:host([variant=amaranth][tone=quiet]){--background:rgb(var(--label-amaranth-09));--color:rgb(var(--label-amaranth-04))}@tailwind utilities; :host([variant=aqua]),:host([variant=aqua][tone=strong]){--background:rgb(var(--label-aqua-05));--color:rgb(var(--label-aqua-10))}:host([variant=aqua][tone=weak]){--background:rgb(var(--label-aqua-08));--color:rgb(var(--label-aqua-02))}:host([variant=aqua][tone=quiet]){--background:rgb(var(--label-aqua-09));--color:rgb(var(--label-aqua-04))}@tailwind utilities; :host([variant=blue]),:host([variant=blue][tone=strong]){--background:rgb(var(--label-blue-05));--color:rgb(var(--label-blue-10))}:host([variant=blue][tone=weak]){--background:rgb(var(--label-blue-08));--color:rgb(var(--label-blue-02))}:host([variant=blue][tone=quiet]){--background:rgb(var(--label-blue-09));--color:rgb(var(--label-blue-04))}@tailwind utilities; :host([variant=dark]),:host([variant=dark][tone=strong]){--background:rgb(var(--tone-neutral-02));--color:rgb(var(--tone-neutral-09))}:host([variant=dark][tone=weak]){--background:rgb(var(--tone-neutral-08));--color:rgb(var(--tone-neutral-02))}:host([variant=dark][tone=quiet]){--background:rgb(var(--tone-neutral-09));--color:rgb(var(--tone-neutral-05))}@tailwind utilities; :host([variant=error]),:host([variant=error][tone=strong]){--background:rgb(var(--status-error-05));--color:rgb(var(--status-error-10))}:host([variant=error][tone=weak]){--background:rgb(var(--status-error-08));--color:rgb(var(--status-error-02))}:host([variant=error][tone=quiet]){--background:rgb(var(--status-error-09));--color:rgb(var(--status-error-04))}@tailwind utilities; :host([variant=green]),:host([variant=green][tone=strong]){--background:rgb(var(--label-green-05));--color:rgb(var(--label-green-10))}:host([variant=green][tone=weak]){--background:rgb(var(--label-green-08));--color:rgb(var(--label-green-02))}:host([variant=green][tone=quiet]){--background:rgb(var(--label-green-09));--color:rgb(var(--label-green-04))}@tailwind utilities; :host([variant=info]),:host([variant=info][tone=strong]){--background:rgb(var(--status-info-05));--color:rgb(var(--status-info-10))}:host([variant=info][tone=weak]){--background:rgb(var(--status-info-08));--color:rgb(var(--status-info-02))}:host([variant=info][tone=quiet]){--background:rgb(var(--status-info-09));--color:rgb(var(--status-info-04))}@tailwind utilities; :host([variant=light]),:host([variant=light][tone=strong]){--background:rgb(var(--tone-neutral-10));--color:rgb(var(--tone-neutral-03))}:host([variant=light][tone=weak]){--background:rgb(var(--tone-neutral-10));--color:rgb(var(--tone-neutral-03))}:host([variant=light][tone=quiet]){--background:rgb(var(--tone-neutral-09));--color:rgb(var(--tone-neutral-02))}@tailwind utilities; :host([variant=lime]),:host([variant=lime][tone=strong]){--background:rgb(var(--label-lime-05));--color:rgb(var(--label-lime-10))}:host([variant=lime][tone=weak]){--background:rgb(var(--label-lime-08));--color:rgb(var(--label-lime-02))}:host([variant=lime][tone=quiet]){--background:rgb(var(--label-lime-09));--color:rgb(var(--label-lime-04))}@tailwind utilities; :host([variant=orange]),:host([variant=orange][tone=strong]){--background:rgb(var(--label-orange-05));--color:rgb(var(--label-orange-10))}:host([variant=orange][tone=weak]){--background:rgb(var(--label-orange-08));--color:rgb(var(--label-orange-02))}:host([variant=orange][tone=quiet]){--background:rgb(var(--label-orange-09));--color:rgb(var(--label-orange-04))}@tailwind utilities; :host([variant=orchid]),:host([variant=orchid][tone=strong]){--background:rgb(var(--label-orchid-05));--color:rgb(var(--label-orchid-10))}:host([variant=orchid][tone=weak]){--background:rgb(var(--label-orchid-08));--color:rgb(var(--label-orchid-02))}:host([variant=orchid][tone=quiet]){--background:rgb(var(--label-orchid-09));--color:rgb(var(--label-orchid-04))}@tailwind utilities; :host([variant=sky]),:host([variant=sky][tone=strong]){--background:rgb(var(--label-sky-05));--color:rgb(var(--label-sky-10))}:host([variant=sky][tone=weak]){--background:rgb(var(--label-sky-08));--color:rgb(var(--label-sky-02))}:host([variant=sky][tone=quiet]){--background:rgb(var(--label-sky-09));--color:rgb(var(--label-sky-04))}@tailwind utilities; :host([variant=success]),:host([variant=success][tone=strong]){--background:rgb(var(--status-success-05));--color:rgb(var(--status-success-10))}:host([variant=success][tone=weak]){--background:rgb(var(--status-success-08));--color:rgb(var(--status-success-02))}:host([variant=success][tone=quiet]){--background:rgb(var(--status-success-09));--color:rgb(var(--status-success-04))}@tailwind utilities; :host([variant=violet]),:host([variant=violet][tone=strong]){--background:rgb(var(--label-violet-05));--color:rgb(var(--label-violet-10))}:host([variant=violet][tone=weak]){--background:rgb(var(--label-violet-08));--color:rgb(var(--label-violet-02))}:host([variant=violet][tone=quiet]){--background:rgb(var(--label-violet-09));--color:rgb(var(--label-violet-04))}@tailwind utilities; :host([variant=warning]),:host([variant=warning][tone=strong]){--background:rgb(var(--status-warning-05));--color:rgb(var(--status-warning-10))}:host([variant=warning][tone=weak]){--background:rgb(var(--status-warning-08));--color:rgb(var(--status-warning-02))}:host([variant=warning][tone=quiet]){--background:rgb(var(--status-warning-09));--color:rgb(var(--status-warning-04))}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([variant=yellow]),:host([variant=yellow][tone=strong]){--background:rgb(var(--label-yellow-05));--color:rgb(var(--label-yellow-10))}:host([variant=yellow][tone=weak]){--background:rgb(var(--label-yellow-08));--color:rgb(var(--label-yellow-02))}:host([variant=yellow][tone=quiet]){--background:rgb(var(--label-yellow-09));--color:rgb(var(--label-yellow-04))}";var MdsBadge=function(){function r(r){registerInstance(this,r);this.variant="green";this.tone="weak";this.typography="option"}r.prototype.render=function(){return h(Host,null,h("mds-text",{typography:this.typography,variant:this.typographyVariant},h("slot",null)))};return r}();MdsBadge.style=mdsBadgeCss;export{MdsBadge as mds_badge};

dist/esm-es5/mds-badge.js

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-f9027781.js";var patchBrowser=function(){var r=import.meta.url;var e={};if(r!==""){e.resourcesUrl=new URL(".",r).href}return promiseResolve(e)};patchBrowser().then((function(r){return bootstrapLazy([["mds-badge",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1]}]]]],r)}));
+import{p as promiseResolve,b as bootstrapLazy}from"./index-f9027781.js";var patchBrowser=function(){var r=import.meta.url;var a={};if(r!==""){a.resourcesUrl=new URL(".",r).href}return promiseResolve(a)};patchBrowser().then((function(r){return bootstrapLazy([["mds-badge",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1],typographyVariant:[1,"typography-variant"]}]]]],r)}));

dist/esm/loader.js

 import { p as promiseResolve, b as bootstrapLazy } from './index-f9027781.js';
 
 /*
- Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
  */
@@ -13,3 +13,3 @@ const patchEsm = () => {
   return patchEsm().then(() => {
-  return bootstrapLazy([["mds-badge",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1]}]]]], options);
+  return bootstrapLazy([["mds-badge",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1],"typographyVariant":[1,"typography-variant"]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/esm/mds-badge.entry.js

@@ -22,3 +22,3 @@ import { r as registerInstance, h, H as Host } from './index-f9027781.js';
   render() {
-    return (h(Host, null, h("mds-text", { typography: this.typography }, h("slot", null))));
+    return (h(Host, null, h("mds-text", { typography: this.typography, variant: this.typographyVariant }, h("slot", null))));
   }
@@ -25,0 +25,0 @@ };

dist/esm/mds-badge.js

 import { p as promiseResolve, b as bootstrapLazy } from './index-f9027781.js';
 
 /*
- Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
  */
@@ -16,3 +16,3 @@ const patchBrowser = () => {
 patchBrowser().then(options => {
-  return bootstrapLazy([["mds-badge",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1]}]]]], options);
+  return bootstrapLazy([["mds-badge",[[1,"mds-badge",{"variant":[513],"tone":[513],"typography":[1],"typographyVariant":[1,"typography-variant"]}]]]], options);
 });

dist/mds-badge/mds-badge.esm.js

@@ -1,1 +0,1 @@
-import{p,b as r}from"./p-ff128c64.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),p(t)})().then((p=>r([["p-f9606cff",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1]}]]]],p)));
+import{p as a,b as p}from"./p-ff128c64.js";(()=>{const p=import.meta.url,r={};return""!==p&&(r.resourcesUrl=new URL(".",p).href),a(r)})().then((a=>p([["p-6e087d8c",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1],typographyVariant:[1,"typography-variant"]}]]]],a)));

dist/stats.json

 {
-  "timestamp": "2022-06-22T09:10:33",
+  "timestamp": "2022-06-27T08:48:38",
   "compiler": {
@@ -77,6 +77,6 @@ "name": "node",
           "./dist/mds-badge/p-50ea2036.system.js",
-          "./dist/mds-badge/p-56769c85.system.js",
-          "./dist/mds-badge/p-a2942b8b.system.entry.js",
+          "./dist/mds-badge/p-6e087d8c.entry.js",
           "./dist/mds-badge/p-cb89dbaf.system.js",
-          "./dist/mds-badge/p-f9606cff.entry.js",
+          "./dist/mds-badge/p-cdc85d85.system.js",
+          "./dist/mds-badge/p-e2fa9435.system.entry.js",
           "./dist/mds-badge/p-ff128c64.js",
@@ -87,6 +87,6 @@ "./www/build/index.esm.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-56769c85.system.js",
-          "./www/build/p-a2942b8b.system.entry.js",
+          "./www/build/p-6e087d8c.entry.js",
           "./www/build/p-cb89dbaf.system.js",
-          "./www/build/p-f9606cff.entry.js",
+          "./www/build/p-cdc85d85.system.js",
+          "./www/build/p-e2fa9435.system.entry.js",
           "./www/build/p-ff128c64.js"
@@ -125,8 +125,8 @@ ]
         ],
-        "bundleId": "p-f9606cff",
-        "fileName": "p-f9606cff.entry.js",
+        "bundleId": "p-6e087d8c",
+        "fileName": "p-6e087d8c.entry.js",
         "imports": [
           "p-ff128c64.js"
         ],
-        "originalByteSize": 8197
+        "originalByteSize": 8230
       }
@@ -145,3 +145,3 @@ ],
         ],
-        "originalByteSize": 8201
+        "originalByteSize": 8234
       }
@@ -160,3 +160,3 @@ ],
         ],
-        "originalByteSize": 8201
+        "originalByteSize": 8234
       }
@@ -170,8 +170,8 @@ ],
         ],
-        "bundleId": "p-a2942b8b.system",
-        "fileName": "p-a2942b8b.system.entry.js",
+        "bundleId": "p-e2fa9435.system",
+        "fileName": "p-e2fa9435.system.entry.js",
         "imports": [
           "p-cb89dbaf.system.js"
         ],
-        "originalByteSize": 8533
+        "originalByteSize": 8566
       }
@@ -190,3 +190,3 @@ ],
         ],
-        "originalByteSize": 8277
+        "originalByteSize": 8310
       }
@@ -283,8 +283,12 @@ ]
           "complexType": {
-            "original": "TypographySecondaryType",
+            "original": "TypographyInfoType | TypographyReadType",
             "resolved": "\"caption\" | \"detail\" | \"label\" | \"option\" | \"paragraph\" | \"tip\"",
             "references": {
-              "TypographySecondaryType": {
+              "TypographyInfoType": {
                 "location": "import",
                 "path": "../../types/typography"
+              },
+              "TypographyReadType": {
+                "location": "import",
+                "path": "../../types/typography"
               }
@@ -298,2 +302,26 @@ }
           "internal": false
+        },
+        {
+          "name": "typographyVariant",
+          "type": "string",
+          "attribute": "typography-variant",
+          "reflect": false,
+          "mutable": false,
+          "required": false,
+          "optional": true,
+          "complexType": {
+            "original": "TypographyVariants",
+            "resolved": "\"info\" | \"mono\" | \"read\" | \"title\"",
+            "references": {
+              "TypographyVariants": {
+                "location": "import",
+                "path": "../../types/typography"
+              }
+            }
+          },
+          "docs": {
+            "tags": [],
+            "text": "Specifies the variant for `typography`"
+          },
+          "internal": false
         }
@@ -377,8 +405,12 @@ ],
               "complexType": {
-                "original": "TypographySecondaryType",
+                "original": "TypographyInfoType | TypographyReadType",
                 "resolved": "\"caption\" | \"detail\" | \"label\" | \"option\" | \"paragraph\" | \"tip\"",
                 "references": {
-                  "TypographySecondaryType": {
+                  "TypographyInfoType": {
                     "location": "import",
                     "path": "../../types/typography"
+                  },
+                  "TypographyReadType": {
+                    "location": "import",
+                    "path": "../../types/typography"
                   }
@@ -392,2 +424,26 @@ }
               "internal": false
+            },
+            {
+              "name": "typographyVariant",
+              "type": "string",
+              "attribute": "typography-variant",
+              "reflect": false,
+              "mutable": false,
+              "required": false,
+              "optional": true,
+              "complexType": {
+                "original": "TypographyVariants",
+                "resolved": "\"info\" | \"mono\" | \"read\" | \"title\"",
+                "references": {
+                  "TypographyVariants": {
+                    "location": "import",
+                    "path": "../../types/typography"
+                  }
+                }
+              },
+              "docs": {
+                "tags": [],
+                "text": "Specifies the variant for `typography`"
+              },
+              "internal": false
             }
@@ -491,3 +547,4 @@ ],
           "htmlAttrNames": [
-            "typography"
+            "typography",
+            "variant"
           ],
@@ -494,0 +551,0 @@ "htmlTagNames": [

dist/types/components.d.ts

@@ -9,3 +9,3 @@ /* eslint-disable */
 import { ThemeFullVariantType, ToneSimpleVariantType } from "./types/variant";
-import { TypographySecondaryType } from "./types/typography";
+import { TypographyInfoType, TypographyReadType, TypographyVariants } from "./types/typography";
 export namespace Components {
@@ -20,4 +20,8 @@ interface MdsBadge {
          */
-        "typography": TypographySecondaryType;
+        "typography": TypographyInfoType | TypographyReadType;
         /**
+          * Specifies the variant for `typography`
+         */
+        "typographyVariant"?: TypographyVariants;
+        /**
           * Sets the theme variant colors
@@ -48,4 +52,8 @@ */
          */
-        "typography"?: TypographySecondaryType;
+        "typography"?: TypographyInfoType | TypographyReadType;
         /**
+          * Specifies the variant for `typography`
+         */
+        "typographyVariant"?: TypographyVariants;
+        /**
           * Sets the theme variant colors
@@ -52,0 +60,0 @@ */

dist/types/components/mds-badge/mds-badge.d.ts

@@ -1,2 +0,2 @@
-import { TypographySecondaryType } from '../../types/typography';
+import { TypographyInfoType, TypographyReadType, TypographyVariants } from '../../types/typography';
 import { ThemeFullVariantType, ToneSimpleVariantType } from '../../types/variant';
@@ -15,4 +15,8 @@ export declare class MdsBadge {
    */
-  readonly typography: TypographySecondaryType;
+  readonly typography: TypographyInfoType | TypographyReadType;
+  /**
+   * Specifies the variant for `typography`
+   */
+  readonly typographyVariant?: TypographyVariants;
   render(): any;
 }

dist/types/components/mds-badge/test/mds-badge.stories.d.ts

@@ -24,2 +24,9 @@ declare const _default: {
     };
+    'typography-variant': {
+      description: string;
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
     variant: {
@@ -26,0 +33,0 @@ type: {

dist/types/dictionary/typography.d.ts

 declare const typographyDictionary: string[];
+declare const typographyVariationsDictionary: string[];
 declare const typographyMonoDictionary: string[];
-declare const typographyPrimaryDictionary: string[];
-declare const typographySecondaryDictionary: string[];
+declare const typographyTitleDictionary: string[];
+declare const typographyInfoDictionary: string[];
+declare const typographyReadDictionary: string[];
 declare const typographySmallerDictionary: string[];
 declare const typographyTooltipDictionary: string[];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };

dist/types/types/typography.d.ts

 export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
-export declare type TypographyPrimaryType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export declare type TypographySecondaryType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyVariants = 'title' | 'info' | 'read' | 'mono';
+export declare type TypographyTitleType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type TypographyInfoType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyReadType = 'caption' | 'detail' | 'paragraph';
 export declare type TypographySmallerType = 'tip' | 'option';
 export declare type TypographyMonoType = 'code' | 'hack';
 export declare type TypographyTooltipType = 'caption' | 'detail' | 'tip';

package.json

 {
   "name": "@maggioli-design-system/mds-badge",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "mds-badge is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
@@ -26,5 +26,5 @@ "main": "dist/index.cjs.js",
   "dependencies": {
-    "@maggioli-design-system/mds-text": "^2.0.0",
-    "@maggioli-design-system/styles": "^7.0.0",
-    "@stencil/core": "^2.16.1"
+    "@maggioli-design-system/mds-text": "^2.0.2",
+    "@maggioli-design-system/styles": "^8.0.0",
+    "@stencil/core": "^2.17.0"
   },
@@ -47,4 +47,9 @@ "license": "MIT",
       "role": "UX UI Designer"
+    },
+    {
+      "name": "Daniele Tardia",
+      "email": "[e-mail]",
+      "role": "Senior Developer"
     }
   ]
 }

readme.md

@@ -10,7 +10,8 @@ # mds-badge
 
-| Property     | Attribute    | Description                             | Type                                                                                                                                                                               | Default    |
-| ------------ | ------------ | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `tone`       | `tone`       | Sets the tone of the color variant      | `"quiet" \| "strong" \| "weak"`                                                                                                                                                    | `'weak'`   |
-| `typography` | `typography` | Specifies the typography of the element | `"caption" \| "detail" \| "label" \| "option" \| "paragraph" \| "tip"`                                                                                                             | `'option'` |
-| `variant`    | `variant`    | Sets the theme variant colors           | `"amaranth" \| "aqua" \| "blue" \| "dark" \| "error" \| "green" \| "info" \| "light" \| "lime" \| "orange" \| "orchid" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow"` | `'green'`  |
+| Property            | Attribute            | Description                             | Type                                                                                                                                                                               | Default     |
+| ------------------- | -------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `tone`              | `tone`               | Sets the tone of the color variant      | `"quiet" \| "strong" \| "weak"`                                                                                                                                                    | `'weak'`    |
+| `typography`        | `typography`         | Specifies the typography of the element | `"caption" \| "detail" \| "label" \| "option" \| "paragraph" \| "tip"`                                                                                                             | `'option'`  |
+| `typographyVariant` | `typography-variant` | Specifies the variant for `typography`  | `"info" \| "mono" \| "read" \| "title"`                                                                                                                                            | `undefined` |
+| `variant`           | `variant`            | Sets the theme variant colors           | `"amaranth" \| "aqua" \| "blue" \| "dark" \| "error" \| "green" \| "info" \| "light" \| "lime" \| "orange" \| "orchid" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow"` | `'green'`   |
 
@@ -17,0 +18,0 @@

src/components.d.ts

@@ -9,3 +9,3 @@ /* eslint-disable */
 import { ThemeFullVariantType, ToneSimpleVariantType } from "./types/variant";
-import { TypographySecondaryType } from "./types/typography";
+import { TypographyInfoType, TypographyReadType, TypographyVariants } from "./types/typography";
 export namespace Components {
@@ -20,4 +20,8 @@ interface MdsBadge {
          */
-        "typography": TypographySecondaryType;
+        "typography": TypographyInfoType | TypographyReadType;
         /**
+          * Specifies the variant for `typography`
+         */
+        "typographyVariant"?: TypographyVariants;
+        /**
           * Sets the theme variant colors
@@ -48,4 +52,8 @@ */
          */
-        "typography"?: TypographySecondaryType;
+        "typography"?: TypographyInfoType | TypographyReadType;
         /**
+          * Specifies the variant for `typography`
+         */
+        "typographyVariant"?: TypographyVariants;
+        /**
           * Sets the theme variant colors
@@ -52,0 +60,0 @@ */

src/components/mds-badge/readme.md

@@ -10,7 +10,8 @@ # mds-badge
 
-| Property     | Attribute    | Description                             | Type                                                                                                                                                                               | Default    |
-| ------------ | ------------ | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `tone`       | `tone`       | Sets the tone of the color variant      | `"quiet" \| "strong" \| "weak"`                                                                                                                                                    | `'weak'`   |
-| `typography` | `typography` | Specifies the typography of the element | `"caption" \| "detail" \| "label" \| "option" \| "paragraph" \| "tip"`                                                                                                             | `'option'` |
-| `variant`    | `variant`    | Sets the theme variant colors           | `"amaranth" \| "aqua" \| "blue" \| "dark" \| "error" \| "green" \| "info" \| "light" \| "lime" \| "orange" \| "orchid" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow"` | `'green'`  |
+| Property            | Attribute            | Description                             | Type                                                                                                                                                                               | Default     |
+| ------------------- | -------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `tone`              | `tone`               | Sets the tone of the color variant      | `"quiet" \| "strong" \| "weak"`                                                                                                                                                    | `'weak'`    |
+| `typography`        | `typography`         | Specifies the typography of the element | `"caption" \| "detail" \| "label" \| "option" \| "paragraph" \| "tip"`                                                                                                             | `'option'`  |
+| `typographyVariant` | `typography-variant` | Specifies the variant for `typography`  | `"info" \| "mono" \| "read" \| "title"`                                                                                                                                            | `undefined` |
+| `variant`           | `variant`            | Sets the theme variant colors           | `"amaranth" \| "aqua" \| "blue" \| "dark" \| "error" \| "green" \| "info" \| "light" \| "lime" \| "orange" \| "orchid" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow"` | `'green'`   |
 
@@ -17,0 +18,0 @@

src/dictionary/typography.ts

@@ -19,2 +19,9 @@ const typographyDictionary = [
 
+const typographyVariationsDictionary = [
+  'title',
+  'info',
+  'read',
+  'mono',
+]
+
 const typographyMonoDictionary = [
@@ -25,3 +32,3 @@ 'code',
 
-const typographyPrimaryDictionary = [
+const typographyTitleDictionary = [
   'action',
@@ -36,3 +43,3 @@ 'h1',
 
-const typographySecondaryDictionary = [
+const typographyInfoDictionary = [
   'caption',
@@ -46,2 +53,8 @@ 'detail',
 
+const typographyReadDictionary = [
+  'caption',
+  'detail',
+  'paragraph',
+]
+
 const typographySmallerDictionary = [
@@ -60,7 +73,9 @@ 'option',
   typographyDictionary,
+  typographyVariationsDictionary,
   typographyMonoDictionary,
-  typographyPrimaryDictionary,
-  typographySecondaryDictionary,
+  typographyTitleDictionary,
+  typographyInfoDictionary,
+  typographyReadDictionary,
   typographySmallerDictionary,
   typographyTooltipDictionary,
 }

src/types/typography.ts

@@ -18,3 +18,9 @@ export type TypographyType =
 
-export type TypographyPrimaryType =
+export type TypographyVariants =
+  | 'title'
+  | 'info'
+  | 'read'
+  | 'mono'
+
+export type TypographyTitleType =
   | 'action'
@@ -28,3 +34,3 @@ | 'h1'
 
-export type TypographySecondaryType =
+export type TypographyInfoType =
   | 'caption'
@@ -37,2 +43,7 @@ | 'detail'
 
+export type TypographyReadType =
+  | 'caption'
+  | 'detail'
+  | 'paragraph'
+
 export type TypographySmallerType =
@@ -39,0 +50,0 @@ | 'tip'

www/build/mds-badge.esm.js

@@ -1,1 +0,1 @@
-import{p,b as r}from"./p-ff128c64.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),p(t)})().then((p=>r([["p-f9606cff",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1]}]]]],p)));
+import{p as a,b as p}from"./p-ff128c64.js";(()=>{const p=import.meta.url,r={};return""!==p&&(r.resourcesUrl=new URL(".",p).href),a(r)})().then((a=>p([["p-6e087d8c",[[1,"mds-badge",{variant:[513],tone:[513],typography:[1],typographyVariant:[1,"typography-variant"]}]]]],a)));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

722167

increased by0.94%

Number of downloads

689

increased by96.86%

Lines of code

8583

increased by1.92%

Number of lines in readme file

50

increased by2.04%

Number of medium supply chain risk alerts

4

decreased by-20%

Dependency changes

• - Removed@maggioli-design-system/design-tokens@7.0.0(transitive)

• - Removed@maggioli-design-system/styles@7.0.0(transitive)

• Updated@maggioli-design-system/mds-text@^2.0.2

• Updated@maggioli-design-system/styles@^8.0.0

• Updated@stencil/core@^2.17.0