@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.210

package/dist/collection/components/atoms/button/button.component.css

@@ -5,21 +5,22 @@ p-button > button,
 p-button > a {
   outline: 0;
   border: 0;
-  @apply h-10 rounded-large;
+  @apply h-10 rounded-large w-auto;
   @apply font-semibold leading-4;
   @apply flex items-center justify-center;
   @apply cursor-pointer;
+  will-change: filter;
 }
 p-button > button > p-loader,
 p-button > a > p-loader {
   @apply ml-2;
 }
-p-button > button.icon-position-end > p-icon,
-p-button > a.icon-position-end > p-icon {
+p-button > button.icon-position-end > p-icon:not(.chevron),
+p-button > a.icon-position-end > p-icon:not(.chevron) {
   @apply ml-2;
 }
-p-button > button.icon-position-start > p-icon,
-p-button > a.icon-position-start > p-icon {
+p-button > button.icon-position-start > p-icon:not(.chevron),
+p-button > a.icon-position-start > p-icon:not(.chevron) {
   @apply mr-2;
 }
 p-button > button.variant-primary, p-button > button.variant-secondary,
@@ -27,45 +28,81 @@ p-button > a.variant-primary,
 p-button > a.variant-secondary {
   @apply px-4;
 }
+p-button > button.variant-primary:hover:not([disabled]), p-button > button.variant-secondary:hover:not([disabled]),
+p-button > a.variant-primary:hover:not([disabled]),
+p-button > a.variant-secondary:hover:not([disabled]) {
+  @apply filter drop-shadow-4;
+}
 p-button > button.variant-primary,
 p-button > a.variant-primary {
   @apply bg-indigo text-white;
 }
-p-button > button.variant-primary:hover,
-p-button > a.variant-primary:hover {
-  @apply bg-indigo/95;
-}
-p-button > button.variant-primary:active,
-p-button > a.variant-primary:active {
+p-button > button.variant-primary:active:not([disabled]), p-button > button.variant-primary.active:not([disabled]),
+p-button > a.variant-primary:active:not([disabled]),
+p-button > a.variant-primary.active:not([disabled]) {
   @apply bg-indigo-dark;
 }
 p-button > button.variant-secondary,
 p-button > a.variant-secondary {
-  @apply border border-mystic-dark !important;
+  @apply border border-solid border-mystic-dark !important;
   @apply bg-white text-storm;
-  @apply filter drop-shadow-4;
 }
-p-button > button.variant-secondary:hover,
-p-button > a.variant-secondary:hover {
+p-button > button.variant-secondary:active:not([disabled]), p-button > button.variant-secondary.active:not([disabled]),
+p-button > a.variant-secondary:active:not([disabled]),
+p-button > a.variant-secondary.active:not([disabled]) {
   @apply bg-mystic;
 }
-p-button > button.variant-secondary:active,
-p-button > a.variant-secondary:active {
-  @apply bg-storm-light/5 border-storm-light/20;
-}
 p-button > button.variant-text,
 p-button > a.variant-text {
   @apply text-indigo;
 }
-p-button > button.variant-text:hover,
-p-button > a.variant-text:hover {
+p-button > button.variant-text:hover:not([disabled]),
+p-button > a.variant-text:hover:not([disabled]) {
   @apply text-indigo-dark;
 }
 p-button > button.size-small,
 p-button > a.size-small {
   @apply h-8 text-sm;
 }
+p-button > button.width-full,
+p-button > a.width-full {
+  @apply w-full;
+}
 p-button > button[disabled],
 p-button > a[disabled] {
-  @apply opacity-50;
-}
+  @apply opacity-40;
+}
+p-button > button.has-chevron.chevron-position-start,
+p-button > a.has-chevron.chevron-position-start {
+  @apply pl-2;
+}
+p-button > button.has-chevron.chevron-position-start > p-icon.chevron,
+p-button > a.has-chevron.chevron-position-start > p-icon.chevron {
+  @apply mr-2;
+}
+p-button > button.has-chevron.chevron-position-end,
+p-button > a.has-chevron.chevron-position-end {
+  @apply pr-2;
+}
+p-button > button.has-chevron.chevron-position-end > p-icon.chevron,
+p-button > a.has-chevron.chevron-position-end > p-icon.chevron {
+  @apply ml-2;
+}
+p-button > button.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child,
+p-button > a.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child {
+  @apply text-indigo;
+}
+p-button > button.has-icon-only,
+p-button > a.has-icon-only {
+  @apply px-2;
+}
+p-button > button.has-icon-only > p-icon:first-child,
+p-button > a.has-icon-only > p-icon:first-child {
+  @apply mx-0;
+}
+p-button > button.should-inherit-text,
+p-button > a.should-inherit-text {
+  color: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+} .static{position:static!important}.w-full{width:100%!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important;line-height:1!important}.text-6xl{font-size:3.75rem!important;line-height:1!important}*{box-sizing:border-box}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}*{box-sizing:border-box}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-80{width:20rem!important}.tablet\:w-\[33\.5rem\]{width:33.5rem!important}.tablet\:w-\[38rem\]{width:38rem!important}.tablet\:w-\[47\.5rem\]{width:47.5rem!important}.tablet\:w-\[57\.5rem\]{width:57.5rem!important}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.m-0{margin:0!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-col{flex-direction:column!important}.rounded{border-radius:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-1\/12{width:8.333333%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}*{box-sizing:border-box}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.hidden{display:none!important}*{box-sizing:border-box}*{box-sizing:border-box}

package/dist/collection/components/atoms/button/button.component.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Listen, Prop } from '@stencil/core';
+import { Component, Element, Event, h, Host, Listen, Prop, } from '@stencil/core';
 export class Button {
   constructor() {
     /**
@@ -9,18 +9,38 @@ export class Button {
      * The size of the button
      */
     this.size = 'medium';
+    /**
+     * The width of the button
+     */
+    this.width = 'auto';
     /**
      * Wether to show a loader or not
      */
     this.loading = false;
+    /**
+     * Wether to show a chevron or not
+     */
+    this.chevron = false;
+    /**
+     * Chevron position
+     */
+    this.chevronPosition = 'end';
     /**
      * Wether the button is disabled
      */
     this.disabled = false;
+    /**
+     * Wether the button is icon only
+     */
+    this.iconOnly = false;
     /**
      * Icon position
      */
     this.iconPosition = 'end';
+    /**
+     * Wether the button should inherit text styles
+     */
+    this.inheritText = false;
   }
   render() {
     let loaderColor = 'white';
@@ -33,12 +53,18 @@ export class Button {
         break;
     }
     const VariableTag = this.variant === 'text' ? 'a' : 'button';
-    return (h(Host, { class: "p-button" },
-      h(VariableTag, { class: `variant-${this.variant} size-${this.size} icon-position-${this.iconPosition}`, disabled: this.disabled, href: this.href, target: this.target },
-        this.icon && this.iconPosition === 'start' && this._getIcon(),
+    return (h(Host, { class: `p-button ${this.width === 'full' && 'w-full'}` },
+      h(VariableTag, { class: `variant-${this.variant} size-${this.size} ${this.width === 'full' && 'w-full'} icon-position-${this.iconPosition} ${this.chevron && 'has-chevron'} chevron-position-${this.chevronPosition} ${this.iconOnly && 'has-icon-only'} ${this.inheritText && 'should-inherit-text'} ${this._el.classList.value}`, disabled: this.disabled, href: this.href, target: this.target },
+        this.chevron && this.chevronPosition === 'start' && (h("p-icon", { class: "chevron", variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })),
+        this.icon &&
+          this.iconPosition === 'start' &&
+          this._getIcon(),
         h("slot", null),
-        this.icon && this.iconPosition === 'end' && this._getIcon(),
-        this.loading && h("p-loader", { color: loaderColor }))));
+        this.icon &&
+          this.iconPosition === 'end' &&
+          this._getIcon(),
+        this.loading && h("p-loader", { color: loaderColor }),
+        this.chevron && this.chevronPosition === 'end' && (h("p-icon", { class: "chevron", variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })))));
   }
   handleClick(ev) {
     if (this.loading || this.disabled) {
@@ -50,7 +76,7 @@ export class Button {
     if (!this.icon) {
       return;
     }
-    return h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate });
+    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
   }
   static get is() { return "p-button"; }
   static get originalStyleUrls() { return {
@@ -130,6 +156,24 @@ export class Button {
       "reflect": false,
       "defaultValue": "'medium'"
     },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'auto' | 'full'",
+        "resolved": "\"auto\" | \"full\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The width of the button"
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
     "loading": {
       "type": "boolean",
       "mutable": false,
@@ -148,6 +192,42 @@ export class Button {
       "reflect": false,
       "defaultValue": "false"
     },
+    "chevron": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | 'up' | 'down'",
+        "resolved": "\"down\" | \"up\" | boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show a chevron or not"
+      },
+      "attribute": "chevron",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "chevronPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'end'",
+        "resolved": "\"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Chevron position"
+      },
+      "attribute": "chevron-position",
+      "reflect": false,
+      "defaultValue": "'end'"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -171,7 +251,7 @@ export class Button {
       "mutable": false,
       "complexType": {
         "original": "IconVariant",
-        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"grid\" | \"headset\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"camera\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
         "references": {
           "IconVariant": {
             "location": "import",
@@ -188,6 +268,24 @@ export class Button {
       "attribute": "icon",
       "reflect": false
     },
+    "iconOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the button is icon only"
+      },
+      "attribute": "icon-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "iconPosition": {
       "type": "string",
       "mutable": false,
@@ -232,9 +330,14 @@ export class Button {
       "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+        "original": "RotateOptions",
+        "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+        "references": {
+          "RotateOptions": {
+            "location": "import",
+            "path": "../../../types/tailwind"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -244,6 +347,24 @@ export class Button {
       },
       "attribute": "icon-rotate",
       "reflect": false
+    },
+    "inheritText": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the button should inherit text styles"
+      },
+      "attribute": "inherit-text",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -266,6 +387,7 @@ export class Button {
         }
       }
     }]; }
+  static get elementRef() { return "_el"; }
   static get listeners() { return [{
       "name": "click",
       "method": "handleClick",

package/dist/collection/components/atoms/card-body/card-body.component.css

@@ -0,0 +1,9 @@
+p-card-body {
+  @apply px-4 py-6;
+  @apply text-sm text-storm-vague;
+}
+p-card-body[inherit-text] {
+  color: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/card-body/card-body.component.js

@@ -0,0 +1,40 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class CardBody {
+  constructor() {
+    /**
+     * Wether the button should inherit text styles
+     */
+    this.inheritText = false;
+  }
+  render() {
+    return (h(Host, { class: "p-card-body" },
+      h("slot", null)));
+  }
+  static get is() { return "p-card-body"; }
+  static get originalStyleUrls() { return {
+    "$": ["card-body.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["card-body.component.css"]
+  }; }
+  static get properties() { return {
+    "inheritText": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the button should inherit text styles"
+      },
+      "attribute": "inherit-text",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/card-container/card-container.component.css

@@ -0,0 +1,17 @@
+:host {
+  @apply flex flex-col w-full;
+  @apply bg-white rounded-large;
+  @apply filter drop-shadow-4 !important;
+}
+
+:host([hoverable]) {
+  @apply cursor-pointer;
+}
+
+:host([hoverable]:hover) {
+  @apply drop-shadow-5 !important;
+}
+
+:host([shadow=false]) {
+  @apply drop-shadow-transparent !important;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/card-container/card-container.component.js

@@ -0,0 +1,63 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class CardContainer {
+  constructor() {
+    /**
+     * Wether the card should be hoverable
+     */
+    this.hoverable = false;
+    /**
+     * Wether the card should have shadow
+     */
+    this.shadow = true;
+  }
+  render() {
+    return (h(Host, { class: "p-card-container" },
+      h("slot", null)));
+  }
+  static get is() { return "p-card-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["card-container.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["card-container.component.css"]
+  }; }
+  static get properties() { return {
+    "hoverable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the card should be hoverable"
+      },
+      "attribute": "hoverable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "shadow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the card should have shadow"
+      },
+      "attribute": "shadow",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+}

package/dist/collection/components/atoms/card-header/card-header.component.css

@@ -0,0 +1,17 @@
+p-card-header {
+  @apply mx-4 h-14;
+  @apply flex gap-3 items-center;
+  @apply text-storm-medium;
+  @apply border-b border-b-mystic-medium !important;
+}
+p-card-header .title {
+  @apply flex items-center text-storm;
+  @apply font-semibold;
+}
+p-card-header .title > p-icon {
+  @apply ml-2 text-mystic-dark;
+}
+
+p-card-container.has-hover:hover p-card-header .title > p-icon {
+  @apply text-indigo;
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important;line-height:1!important}.text-6xl{font-size:3.75rem!important;line-height:1!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/card-header/card-header.component.js

@@ -0,0 +1,61 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class CardHeader {
+  constructor() {
+    /**
+     * Enable the title arrow
+     */
+    this.arrow = false;
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: "p-card-header" },
+      h("slot", { name: "prefix" }),
+      (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this.arrow) && (h("div", { class: "title" }, (_b = this.header) !== null && _b !== void 0 ? _b : '',
+        this.arrow && h("p-icon", { variant: "arrow" }))),
+      h("slot", { name: "suffix" })));
+  }
+  static get is() { return "p-card-header"; }
+  static get originalStyleUrls() { return {
+    "$": ["card-header.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["card-header.component.css"]
+  }; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Content of the card header"
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "arrow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable the title arrow"
+      },
+      "attribute": "arrow",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/counter/counter.component.css

@@ -2,4 +2,29 @@
   @apply h-4 px-2 bg-indigo rounded-xlarge;
   @apply text-xs leading-3 text-white font-bold uppercase;
   @apply flex justify-center items-center;
-}
+}
+
+:host(.variant-positive),
+:host(.variant-unbiased),
+:host(.variant-negative) {
+  @apply rounded px-1 min-w-[1rem];
+}
+
+:host(.variant-positive) {
+  @apply bg-positive-light text-positive-dark;
+}
+
+:host(.variant-unbiased) {
+  @apply bg-unbiased-light text-unbiased-dark;
+}
+
+:host(.variant-negative) {
+  @apply bg-negative-light text-negative-dark;
+}
+
+:host(.size-mini) {
+  @apply w-2 h-2 rounded-round p-0 min-w-0;
+}
+:host(.size-mini) slot {
+  display: none;
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}