@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/collection/components/alert/snackbar/snackbar.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { ListenToBreakpoints, dsBreakpoints, stopEventBubbling, sanitizeSvg, raf, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../../utils/index";
+import { ListenToBreakpoints, dsBreakpoints, stopEventBubbling, sanitizeSvg, raf, Logger, hasValue, OneOf, Type, } from "../../../utils/index";
 import { SNACKBAR_COLORS, } from "./snackbar.interfaces";
 import { BUTTON_TARGETS } from "../../button/button.interfaces";
 /**
@@ -83,30 +83,27 @@ export class Snackbar {
          * ------------------------------------------------------
          */
         this.generateSvgContent = () => {
-            if (this.svg !== undefined && this.svg.length > 0) {
-                this.svgContent = sanitizeSvg(this.svg);
+            if (hasValue(this.svg) && this.svg.length > 0) {
+                return sanitizeSvg(this.svg);
             }
+            return undefined;
         };
         this.generateIconName = () => {
-            if (this.icon !== undefined && this.icon.length > 0) {
-                this.iconName = this.icon;
+            if (hasValue(this.icon) && this.icon.length > 0) {
+                return this.icon;
             }
             else {
                 switch (this.color) {
                     case 'info':
-                        this.iconName = 'information';
-                        break;
+                        return 'information';
                     case 'success':
-                        this.iconName = 'check';
-                        break;
+                        return 'check';
                     case 'warning':
-                        this.iconName = 'alert';
-                        break;
+                        return 'alert';
                     case 'danger':
-                        this.iconName = 'alert';
-                        break;
+                        return 'alert';
                     default:
-                        this.iconName = 'bell';
+                        return 'bell';
                 }
             }
         };
@@ -114,21 +111,10 @@ export class Snackbar {
     createLogger(log) {
         this.log = log;
     }
-    iconChanged() {
-        this.generateIconName();
-    }
-    svgChanged() {
-        this.generateSvgContent();
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.generateIconName();
-        this.generateSvgContent();
-    }
     componentDidLoad() {
         raf(() => {
             this.didLoad = true;
@@ -158,22 +144,24 @@ export class Snackbar {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '7a2a073241429ca810303c4e5b38b8fa743abbe6', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
+        const iconName = this.generateIconName();
+        const svgContent = this.generateSvgContent();
+        return (h(Host, { key: '66c571295c3931b071bb104e339febfac87db6df', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
                 [`is-ready`]: this.didLoad,
                 [`is-visible`]: this.visible,
                 [`is-closable`]: this.closable,
                 [`is-mobile-open`]: this.isMobile && this.mobileOpenState,
                 [`is-mobile-closed`]: this.isMobile && !this.mobileOpenState,
-                [`is-${this.color}`]: this.color !== undefined,
-            } }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: '976d03fba1eefd18755599c2d78e9c352a7b5956', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: this.iconName, onClick: () => (this.mobileOpenState = true) })), this.iconName && !this.svgContent && (h("ds-icon", { key: 'e51745c2391c63868d656720b3b038f32359b162', part: "icon", id: "icon", name: this.iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
+                [`is-${this.color}`]: hasValue(this.color),
+            } }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: '9f9cedbf2fed42189e302a0aebc9852a2771136e', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (h("ds-icon", { key: 'a4c826d95d2041345bf4cee0540cb172f5336c79', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
                 ? 'triangle'
                 : this.color === 'danger' || this.color === 'success' || this.color === 'info'
                     ? 'circle'
-                    : undefined })), this.svgContent && h("ds-icon", { key: 'd2ccf9ea722f1623c18d4bc45707f8e825c8b4c7', id: "icon", part: "icon", svg: this.svgContent, size: 'xl' }), h("span", { key: '010a6008747f9de90c9c9b5ca64ff3ce73b8aa7e', part: "content", id: "content" }, this.heading && h("h2", { key: '530e714313e9bde8bf25eb0a294ef22f57887ed8', part: "heading" }, this.heading), h("span", { key: '6d30252391b5b988f6084fe821384b98f9be2d7f', part: "message" }, this.message, h("slot", { key: '2e4762c4c3801ca4297a8f0a51d48d4fcbcac543' }))), h("ds-button-group", { key: '1a765e24fcbb54c99aa635248a9c6a46492917dd', part: "action", id: "action" }, h("slot", { key: 'feb9e40fd5da910fafa46a8bf4aa8b5e2849808c', name: "action" }), this.action && (h("ds-button", { key: '57bfc5b640d75df3cf304523365abf6398644317', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                    : undefined })), svgContent && h("ds-icon", { key: 'cdb9be5a9499d7ffad58c8c2e5a9096963b67f69', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), h("span", { key: '52810e3cb684318ce4fd8ec8be8529f63a8e8e8b', part: "content", id: "content" }, this.heading && h("h2", { key: '8ae2906a4ffabbc970c9c995c5d9efb0cc94fbc8', part: "heading" }, this.heading), h("span", { key: 'affd6a8d4ce4c19274a8c760f00f0a051bbae56e', part: "message" }, this.message, h("slot", { key: '75fd4ab26f8f6f8d1d89d2c1e0428b53bb3d75c5' }))), h("ds-button-group", { key: '0c644ee957e3a615e2c7fa030d537bea002e72ca', part: "action", id: "action" }, h("slot", { key: '840fb7d2be9fcf41ffa5b4eeff53d4a1b26d209a', name: "action" }), this.action && (h("ds-button", { key: '18d900d559bd085b5732ec37484622ee9da199ff', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (h("ds-close", { key: 'cead09e8bcb5798f346a048dd9b82c675e359413', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
+            } }, this.action)), this.closable && (h("ds-close", { key: 'd8c8c528cff2edbfac7a23488271c2071d5a84df', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
             } })))));
@@ -364,7 +352,7 @@ export class Snackbar {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonTarget",
-                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "resolved": "\"\" | \"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {
                         "ButtonTarget": {
                             "location": "import",
@@ -500,9 +488,7 @@ export class Snackbar {
         return {
             "isMobile": {},
             "mobileOpenState": {},
-            "didLoad": {},
-            "svgContent": {},
-            "iconName": {}
+            "didLoad": {}
         };
     }
     static get events() {
@@ -592,15 +578,6 @@ export class Snackbar {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "icon",
-                "methodName": "iconChanged"
-            }, {
-                "propName": "svg",
-                "methodName": "svgChanged"
-            }];
-    }
 }
 __decorate([
     Logger('snackbar'),
@@ -609,43 +586,43 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Snackbar.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...SNACKBAR_COLORS),
+    OneOf(SNACKBAR_COLORS),
     __metadata("design:type", String)
 ], Snackbar.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Snackbar.prototype, "closable", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "heading", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "message", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "icon", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "svg", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "action", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "actionIcon", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_TARGETS),
+    OneOf(BUTTON_TARGETS),
     __metadata("design:type", String)
 ], Snackbar.prototype, "actionTarget", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "actionHref", void 0);
 __decorate([

package/dist/collection/components/alert/toast/toast.host.css

@@ -1 +1 @@
-:host{--_toast-position: var(--toast-position, var(--mod-toast-position, static));--_toast-top: var(--toast-top, var(--mod-toast-top));--_toast-right: var(--toast-right, var(--mod-toast-right));--_toast-bottom: var(--toast-bottom, var(--mod-toast-bottom));--_toast-left: var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m: var(--toast-m, var(--mod-toast-m, 0));--_toast-my: var(--toast-my, var(--mod-toast-my));--_toast-mx: var(--toast-mx, var(--mod-toast-mx));--_toast-ml: var(--toast-ml, var(--mod-toast-ml));--_toast-mr: var(--toast-mr, var(--mod-toast-mr));--_toast-mt: var(--toast-mt, var(--mod-toast-mt));--_toast-mb: var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow: var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius: var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg: var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-default-color-bg-base)));--_toast-color: var(--toast-color, var(--mod-toast-color, var(--ds-toast-default-color-text-base)));--_toast-icon-color: var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-default-color-icon-base)));--_toast-progress-duration: var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg: var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-default-color-progress-bar-base)));--_toast-progress-bg: var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-default-color-progress-bg-base)));--_toast-heading-font-family: var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-text-family-heading)));--_toast-heading-font-weight: var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-text-weight-bold)));--_toast-heading-font-size: var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-text-size-base-device)));--_toast-heading-line-height: var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-text-line-height-heading)));--_toast-content-font-family: var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-text-family-body)));--_toast-content-font-weight: var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size: var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-text-size-sm-device)));--_toast-content-line-height: var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-text-line-height-body)));--_toast-gap: var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p: var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity: var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform: var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition: var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity: var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform: var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);transform:var(--_toast-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);align-items:center;width:100%}:host ds-icon:not([name]){--icon-color: null;--icon-size: var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt: 0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color: var(--ds-toast-info-color-text-base);--mod-toast-border-color: var(--ds-toast-info-color-border-base);--mod-toast-bg: var(--ds-toast-info-color-bg-base);--mod-toast-icon-color: var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-info-color-progress-bg-base)}:host(.is-success){--mod-toast-color: var(--ds-toast-success-color-text-base);--mod-toast-border-color: var(--ds-toast-success-color-border-base);--mod-toast-bg: var(--ds-toast-success-color-bg-base);--mod-toast-icon-color: var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-success-color-progress-bg-base)}:host(.is-warning){--mod-toast-color: var(--ds-toast-warning-color-text-base);--mod-toast-border-color: var(--ds-toast-warning-color-border-base);--mod-toast-bg: var(--ds-toast-warning-color-bg-base);--mod-toast-icon-color: var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-warning-color-progress-bg-base)}:host(.is-danger){--mod-toast-color: var(--ds-toast-danger-color-text-base);--mod-toast-border-color: var(--ds-toast-danger-color-border-base);--mod-toast-bg: var(--ds-toast-danger-color-bg-base);--mod-toast-icon-color: var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-danger-color-progress-bg-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}
+:host{--_toast-position: var(--toast-position, var(--mod-toast-position, static));--_toast-top: var(--toast-top, var(--mod-toast-top));--_toast-right: var(--toast-right, var(--mod-toast-right));--_toast-bottom: var(--toast-bottom, var(--mod-toast-bottom));--_toast-left: var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m: var(--toast-m, var(--mod-toast-m, 0));--_toast-my: var(--toast-my, var(--mod-toast-my));--_toast-mx: var(--toast-mx, var(--mod-toast-mx));--_toast-ml: var(--toast-ml, var(--mod-toast-ml));--_toast-mr: var(--toast-mr, var(--mod-toast-mr));--_toast-mt: var(--toast-mt, var(--mod-toast-mt));--_toast-mb: var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow: var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius: var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg: var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-default-color-bg-base)));--_toast-color: var(--toast-color, var(--mod-toast-color, var(--ds-toast-default-color-text-base)));--_toast-icon-color: var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-default-color-icon-base)));--_toast-progress-duration: var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg: var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-default-color-progress-bar-base)));--_toast-progress-bg: var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-default-color-progress-bg-base)));--_toast-heading-font-family: var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight: var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size: var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height: var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family: var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight: var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size: var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height: var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap: var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p: var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity: var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform: var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition: var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity: var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform: var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);transform:var(--_toast-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);align-items:center;width:100%}:host ds-icon:not([name]){--icon-color: null;--icon-size: var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt: 0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color: var(--ds-toast-info-color-text-base);--mod-toast-border-color: var(--ds-toast-info-color-border-base);--mod-toast-bg: var(--ds-toast-info-color-bg-base);--mod-toast-icon-color: var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-info-color-progress-bg-base)}:host(.is-success){--mod-toast-color: var(--ds-toast-success-color-text-base);--mod-toast-border-color: var(--ds-toast-success-color-border-base);--mod-toast-bg: var(--ds-toast-success-color-bg-base);--mod-toast-icon-color: var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-success-color-progress-bg-base)}:host(.is-warning){--mod-toast-color: var(--ds-toast-warning-color-text-base);--mod-toast-border-color: var(--ds-toast-warning-color-border-base);--mod-toast-bg: var(--ds-toast-warning-color-bg-base);--mod-toast-icon-color: var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-warning-color-progress-bg-base)}:host(.is-danger){--mod-toast-color: var(--ds-toast-danger-color-text-base);--mod-toast-border-color: var(--ds-toast-danger-color-border-base);--mod-toast-bg: var(--ds-toast-danger-color-bg-base);--mod-toast-icon-color: var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-danger-color-progress-bg-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}

package/dist/collection/components/alert/toast/toast.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { stopEventBubbling, raf, sanitizeSvg, Logger, ValidateOneOf, ValidateType, ValidateRequiredAndType, setupValidation, } from "../../../utils/index";
+import { stopEventBubbling, raf, sanitizeSvg, Logger, hasValue, OneOf, Required, Type } from "../../../utils/index";
 import { ListenToConfig } from "../../../global/index";
 import { TOAST_COLORS, TOAST_TARGETS, } from "./toast.interfaces";
 /**
@@ -80,30 +80,27 @@ export class Toast {
          * ------------------------------------------------------
          */
         this.generateSvgContent = () => {
-            if (this.svg !== undefined && this.svg.length > 0) {
-                this.svgContent = sanitizeSvg(this.svg);
+            if (hasValue(this.svg)) {
+                return sanitizeSvg(this.svg);
             }
+            return undefined;
         };
         this.generateIconName = () => {
-            if (this.icon !== undefined && this.icon.length > 0) {
-                this.iconName = this.icon;
+            if (hasValue(this.icon)) {
+                return this.icon;
             }
             else {
                 switch (this.color) {
                     case 'info':
-                        this.iconName = 'information';
-                        break;
+                        return 'information';
                     case 'success':
-                        this.iconName = 'check';
-                        break;
+                        return 'check';
                     case 'warning':
-                        this.iconName = 'alert';
-                        break;
+                        return 'alert';
                     case 'danger':
-                        this.iconName = 'alert';
-                        break;
+                        return 'alert';
                     default:
-                        this.iconName = 'bell';
+                        return 'bell';
                 }
             }
         };
@@ -111,21 +108,10 @@ export class Toast {
     createLogger(log) {
         this.log = log;
     }
-    iconChanged() {
-        this.generateIconName();
-    }
-    svgChanged() {
-        this.generateSvgContent();
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.generateIconName();
-        this.generateSvgContent();
-    }
     componentDidLoad() {
         raf(() => {
             this.didLoad = true;
@@ -154,6 +140,8 @@ export class Toast {
      * ------------------------------------------------------
      */
     render() {
+        const iconName = this.generateIconName();
+        const svgContent = this.generateSvgContent();
         const hasDuration = this.duration !== undefined && this.duration !== 'infinite' && this.duration > 0;
         const hasProgressBar = this.visible && this.didLoad && hasDuration;
         const durationVariable = hasDuration
@@ -161,13 +149,13 @@ export class Toast {
                 '--toast-progress-duration': `${this.duration}ms`,
             }
             : {};
-        return (h(Host, { key: '42b20febf8b87b5c7b1fa83a60b8b874a76f3812', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
+        return (h(Host, { key: 'f38cb2cdb7460f866c5c9f7d14a6b2565cba63f9', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
                 [`is-ready`]: this.didLoad,
                 [`is-paused`]: this.didPause,
                 [`is-visible`]: this.visible,
                 [`has-progress-bar`]: hasProgressBar && this.animated,
                 [`is-closable`]: this.closable,
-                [`is-action`]: this.action !== undefined,
+                [`is-action`]: hasValue(this.action),
                 [`is-${this.color}`]: this.color !== undefined,
             }, style: durationVariable, onMouseEnter: () => {
                 this.didPause = true;
@@ -175,7 +163,7 @@ export class Toast {
             }, onMouseLeave: () => {
                 this.didPause = false;
                 this.dsDidResume.emit();
-            } }, !this.svgContent && (h("ds-icon", { key: 'f658e9777ee272f244acb654ff5d8e0df616fbb9', id: "icon", part: "icon", name: this.iconName || this.color === 'warning'
+            } }, !hasValue(svgContent) && (h("ds-icon", { key: 'a3533c4ad23fcfeeb13628cce8292c877010d31d', id: "icon", part: "icon", name: iconName || this.color === 'warning'
                 ? 'alert'
                 : this.color === 'danger'
                     ? 'alert'
@@ -187,11 +175,11 @@ export class Toast {
                 ? 'triangle'
                 : this.color === 'danger' || this.color === 'success' || this.color === 'info'
                     ? 'circle'
-                    : undefined })), this.svgContent && h("ds-icon", { key: 'd8e9cce343cb3fe70cd6fafa4910477a2ce64255', id: "icon", part: "icon", svg: this.svgContent }), h("span", { key: '342b90fc44ba264fd9a0ca4d3bdaba2957fa710a', part: "content", id: "content" }, this.heading && h("h2", { key: 'e28d833393858378b03b06c9849bbdb618e9ad54', part: "heading" }, this.heading), h("span", { key: '1e68ac398df27183efa45b9698222ea039799c4a', part: "message" }, this.message, h("slot", { key: '4a9a6c06780863b49f431a2c63dc01ca6ddfb540' }))), this.action && (h("ds-button", { key: 'eb1fbc8586a2c86d4e954a95cf387e6db2eda5a9', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                    : undefined })), hasValue(svgContent) && h("ds-icon", { key: '206dbb5cd3673773eb5a9327679676ad9a0d15f9', id: "icon", part: "icon", svg: svgContent }), h("span", { key: 'f7f7fb5c0071f6cb35a005e9a843cfc527d96e3f', part: "content", id: "content" }, this.heading && h("h2", { key: '073902110e1777b279e829e05bcc040e24b8251e', part: "heading" }, this.heading), h("span", { key: '677a6c7b3bb849376cd47b8449e8cab982c396b6', part: "message" }, this.message, h("slot", { key: '722ebc769eb27196aef924c2028a5b0c04590d25' }))), hasValue(this.action) && (h("ds-button", { key: '814a491f7657a3ad56021a3607651244afafc2af', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (h("ds-close", { key: '429e2b06d53b4bd7b38f91b0ae0f0fbd10599cb3', part: "close", onClick: ev => {
+            } }, this.action)), this.closable && (h("ds-close", { key: 'e1c6e38442650af9321ba62e43a94fc2e10cbb6f', part: "close", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
             } }))));
@@ -380,7 +368,7 @@ export class Toast {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonTarget",
-                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "resolved": "\"\" | \"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {
                         "ButtonTarget": {
                             "location": "import",
@@ -546,9 +534,7 @@ export class Toast {
         return {
             "animated": {},
             "didLoad": {},
-            "didPause": {},
-            "svgContent": {},
-            "iconName": {}
+            "didPause": {}
         };
     }
     static get events() {
@@ -704,15 +690,6 @@ export class Toast {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "icon",
-                "methodName": "iconChanged"
-            }, {
-                "propName": "svg",
-                "methodName": "svgChanged"
-            }];
-    }
 }
 __decorate([
     Logger('toast'),
@@ -721,43 +698,45 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Toast.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...TOAST_COLORS),
+    OneOf(TOAST_COLORS),
     __metadata("design:type", String)
 ], Toast.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toast.prototype, "closable", void 0);
 __decorate([
-    ValidateRequiredAndType('string'),
+    Required(),
+    Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "heading", void 0);
 __decorate([
-    ValidateRequiredAndType('string'),
+    Required(),
+    Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "message", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "icon", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "svg", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "action", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "actionIcon", void 0);
 __decorate([
-    ValidateOneOf(...TOAST_TARGETS),
+    OneOf(TOAST_TARGETS),
     __metadata("design:type", String)
 ], Toast.prototype, "actionTarget", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "actionHref", void 0);
 __decorate([

package/dist/collection/components/app/app.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { dsBrowser, dsDevice, debounce, rIC, rOnLoad, Logger } from "../../utils/index";
+import { dsBrowser, dsDevice, debounce, rIC, rOnLoad, Logger, Type } from "../../utils/index";
 import { updateDsAnimated, updateDsLogger } from "../../global/index";
 import { startFocusVisible } from "./app.focus.util";
 /**
@@ -73,11 +73,11 @@ export class App {
         }
     }
     render() {
-        return (h(Host, { key: '1083246d9dd0defa01d08b3553ec4f065c3256fd', class: {
+        return (h(Host, { key: '1eaae424ed6f20db8d0d6a0c7c485f4d620d20bf', class: {
                 'ds-app': true,
                 'ds-app--safari': dsBrowser.isSafari,
                 'ds-app--touch': dsDevice.hasTouchScreen,
-            } }, h("slot", { key: '5c7ae61877d5a03d610e312bb1e2f9c4aa01699d' })));
+            } }, h("slot", { key: 'c80d99b79ee378c003a130f35beb688f746edb69' })));
     }
     static get is() { return "ds-app"; }
     static get originalStyleUrls() {
@@ -215,3 +215,11 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], App.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], App.prototype, "animated", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], App.prototype, "ready", void 0);

package/dist/collection/components/badge/badge.host.css

@@ -1 +1 @@
-:host{--_badge-position: var(--badge-position, var(--mod-badge-position, static));--_badge-top: var(--badge-top, var(--mod-badge-top));--_badge-right: var(--badge-right, var(--mod-badge-right));--_badge-bottom: var(--badge-bottom, var(--mod-badge-bottom));--_badge-left: var(--badge-left, var(--mod-badge-left));position:var(--_badge-position);top:var(--_badge-top);right:var(--_badge-right);bottom:var(--_badge-bottom);left:var(--_badge-left);--_badge-m: var(--badge-m, var(--mod-badge-m, 0));--_badge-my: var(--badge-my, var(--mod-badge-my));--_badge-mx: var(--badge-mx, var(--mod-badge-mx));--_badge-ml: var(--badge-ml, var(--mod-badge-ml));--_badge-mr: var(--badge-mr, var(--mod-badge-mr));--_badge-mt: var(--badge-mt, var(--mod-badge-mt));--_badge-mb: var(--badge-mb, var(--mod-badge-mb));margin:var(--_badge-m);margin-inline:var(--_badge-mx);margin-block:var(--_badge-my);margin-left:var(--_badge-ml);margin-right:var(--_badge-mr);margin-top:var(--_badge-mt);margin-bottom:var(--_badge-mb);--_badge-font-family: var(--badge-font-family, var(--mod-badge-font-family, var(--ds-badge-text-family)));--_badge-font-weight: var(--badge-font-weight, var(--mod-badge-font-weight, var(--ds-badge-text-weight)));--_badge-min-width: var(--badge-min-width, var(--mod-badge-min-width, var(--ds-badge-size-base)));--_badge-height: var(--badge-height, var(--mod-badge-height, var(--ds-badge-size-base)));--_badge-radius: var(--badge-radius, var(--mod-badge-radius, calc(var(--ds-badge-size-base) / 2)));--_badge-color-background: var(--badge-color-background, var(--mod-badge-color-background, var(--ds-badge-color-base-background)));--_badge-color-text: var(--badge-color-text, var(--mod-badge-color-text, var(--ds-badge-color-base-text)));--_badge-pulse-color: var(--badge-pulse-color, var(--mod-badge-pulse-color, var(--ds-badge-color-base-background)));--_badge-font-size: var(--badge-font-size, var(--mod-badge-font-size, 85%));--_badge-icon-size: var(--badge-icon-size, var(--mod-badge-icon-size, 0.875rem));--_badge-icon-color: var(--badge-icon-color, var(--mod-badge-icon-color, var(--ds-badge-color-base-text)));--_badge-gap: var(--badge-gap, var(--mod-badge-gap, 4px));--_badge-padding-inline: var(--badge-padding-inline, var(--mod-badge-padding-inline, 4px));--_badge-padding-block: var(--badge-padding-block, var(--mod-badge-padding-block, 4px))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-flex;vertical-align:text-top;justify-content:center;align-items:center;hyphens:auto;font-size:var(--_badge-font-size);white-space:nowrap;line-height:1;z-index:1;cursor:inherit;min-width:var(--_badge-min-width);height:var(--_badge-height);border-radius:var(--_badge-radius);background:var(--_badge-color-background);color:var(--_badge-color-text);font-family:var(--_badge-font-family);font-weight:var(--_badge-font-weight);gap:var(--_badge-gap);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block)}:host>ds-icon{--icon-size: var(--_badge-icon-size);--icon-color: var(--_badge-icon-color)}:host(.is-red){--mod-badge-color-text: var(--ds-badge-color-red-text);--mod-badge-color-background: var(--ds-badge-color-red-background);--mod-badge-pulse-color: var(--ds-badge-color-red-background);--mod-badge-icon-color: var(--ds-badge-color-red-text)}:host(.is-green){--mod-badge-color-text: var(--ds-badge-color-green-text);--mod-badge-color-background: var(--ds-badge-color-green-background);--mod-badge-pulse-color: var(--ds-badge-color-green-background);--mod-badge-icon-color: var(--ds-badge-color-green-text)}:host(.is-yellow){--mod-badge-color-text: var(--ds-badge-color-yellow-text);--mod-badge-color-background: var(--ds-badge-color-yellow-background);--mod-badge-pulse-color: var(--ds-badge-color-yellow-background);--mod-badge-icon-color: var(--ds-badge-color-yellow-text)}:host(.is-purple){--mod-badge-color-text: var(--ds-badge-color-purple-text);--mod-badge-color-background: var(--ds-badge-color-purple-background);--mod-badge-pulse-color: var(--ds-badge-color-purple-background);--mod-badge-icon-color: var(--ds-badge-color-purple-text)}:host(.is-grey){--mod-badge-color-text: var(--ds-badge-color-grey-text);--mod-badge-color-background: var(--ds-badge-color-grey-background);--mod-badge-pulse-color: var(--ds-badge-color-grey-background);--mod-badge-icon-color: var(--ds-badge-color-grey-text)}:host(.is-success){--mod-badge-color-text: var(--ds-badge-color-success-text);--mod-badge-color-background: var(--ds-badge-color-success-background);--mod-badge-pulse-color: var(--ds-badge-color-success-background);--mod-badge-icon-color: var(--ds-badge-color-success-text)}:host(.is-warning){--mod-badge-color-text: var(--ds-badge-color-warning-text);--mod-badge-color-background: var(--ds-badge-color-warning-background);--mod-badge-pulse-color: var(--ds-badge-color-warning-background);--mod-badge-icon-color: var(--ds-badge-color-warning-text)}:host(.is-danger){--mod-badge-color-text: var(--ds-badge-color-danger-text);--mod-badge-color-background: var(--ds-badge-color-danger-background);--mod-badge-pulse-color: var(--ds-badge-color-danger-background);--mod-badge-icon-color: var(--ds-badge-color-danger-text)}:host(.is-sm){--mod-badge-radius: calc(var(--ds-badge-size-sm) / 2);--mod-badge-height: var(--ds-badge-size-sm);--mod-badge-min-width: var(--ds-badge-size-sm);--mod-badge-padding-inline: 0;--mod-badge-padding-block: 0;--mod-badge-font-size: 0;max-width:var(--ds-badge-size-sm);padding:0;overflow:hidden}:host(.is-sm)>*{display:none}:host(.is-lg){--mod-badge-min-width: var(--ds-badge-size-lg);--mod-badge-height: var(--ds-badge-size-lg);--mod-badge-radius: calc(var(--ds-badge-size-lg) / 2);--mod-badge-font-size: 1rem;--mod-badge-icon-size: 1.125rem}:host(.is-pulse){animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_badge-pulse-color)}70%{box-shadow:0 0 0 .5rem rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
+:host{--_badge-position: var(--badge-position, var(--mod-badge-position, static));--_badge-top: var(--badge-top, var(--mod-badge-top));--_badge-right: var(--badge-right, var(--mod-badge-right));--_badge-bottom: var(--badge-bottom, var(--mod-badge-bottom));--_badge-left: var(--badge-left, var(--mod-badge-left));position:var(--_badge-position);top:var(--_badge-top);right:var(--_badge-right);bottom:var(--_badge-bottom);left:var(--_badge-left);--_badge-m: var(--badge-m, var(--mod-badge-m, 0));--_badge-my: var(--badge-my, var(--mod-badge-my));--_badge-mx: var(--badge-mx, var(--mod-badge-mx));--_badge-ml: var(--badge-ml, var(--mod-badge-ml));--_badge-mr: var(--badge-mr, var(--mod-badge-mr));--_badge-mt: var(--badge-mt, var(--mod-badge-mt));--_badge-mb: var(--badge-mb, var(--mod-badge-mb));margin:var(--_badge-m);margin-inline:var(--_badge-mx);margin-block:var(--_badge-my);margin-left:var(--_badge-ml);margin-right:var(--_badge-mr);margin-top:var(--_badge-mt);margin-bottom:var(--_badge-mb);--_badge-font-family: var(--badge-font-family, var(--mod-badge-font-family, var(--ds-badge-text-family)));--_badge-font-weight: var(--badge-font-weight, var(--mod-badge-font-weight, var(--ds-badge-text-weight)));--_badge-min-width: var(--badge-min-width, var(--mod-badge-min-width, var(--ds-badge-size-base)));--_badge-height: var(--badge-height, var(--mod-badge-height, var(--ds-badge-size-base)));--_badge-radius: var(--badge-radius, var(--mod-badge-radius, calc(var(--ds-badge-size-base) / 2)));--_badge-color-background: var(--badge-color-background, var(--mod-badge-color-background, var(--ds-badge-color-base-background)));--_badge-color-text: var(--badge-color-text, var(--mod-badge-color-text, var(--ds-badge-color-base-text)));--_badge-pulse-color: var(--badge-pulse-color, var(--mod-badge-pulse-color, var(--ds-badge-color-base-background)));--_badge-font-size: var(--badge-font-size, var(--mod-badge-font-size, 85%));--_badge-icon-size: var(--badge-icon-size, var(--mod-badge-icon-size, 0.75rem));--_badge-icon-color: var(--badge-icon-color, var(--mod-badge-icon-color, var(--ds-badge-color-base-text)));--_badge-gap: var(--badge-gap, var(--mod-badge-gap, 4px));--_badge-padding-inline: var(--badge-padding-inline, var(--mod-badge-padding-inline, 4px));--_badge-padding-block: var(--badge-padding-block, var(--mod-badge-padding-block, 4px))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-flex;vertical-align:text-top;justify-content:center;align-items:center;hyphens:auto;font-size:var(--_badge-font-size);white-space:nowrap;line-height:1;z-index:1;cursor:inherit;min-width:var(--_badge-min-width);height:var(--_badge-height);border-radius:var(--_badge-radius);background:var(--_badge-color-background);color:var(--_badge-color-text);font-family:var(--_badge-font-family);font-weight:var(--_badge-font-weight);gap:var(--_badge-gap);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block)}:host ds-icon{--icon-size: var(--_badge-icon-size);--icon-inner-size: var(--_badge-icon-size);--icon-color: var(--_badge-icon-color)}:host(.is-red){--mod-badge-color-text: var(--ds-badge-color-red-text);--mod-badge-color-background: var(--ds-badge-color-red-background);--mod-badge-pulse-color: var(--ds-badge-color-red-background);--mod-badge-icon-color: var(--ds-badge-color-red-text);--icon-color: var(--ds-badge-color-red-text)}:host(.is-green){--mod-badge-color-text: var(--ds-badge-color-green-text);--mod-badge-color-background: var(--ds-badge-color-green-background);--mod-badge-pulse-color: var(--ds-badge-color-green-background);--mod-badge-icon-color: var(--ds-badge-color-green-text);--icon-color: var(--ds-badge-color-green-text)}:host(.is-yellow){--mod-badge-color-text: var(--ds-badge-color-yellow-text);--mod-badge-color-background: var(--ds-badge-color-yellow-background);--mod-badge-pulse-color: var(--ds-badge-color-yellow-background);--mod-badge-icon-color: var(--ds-badge-color-yellow-text);--icon-color: var(--ds-badge-color-yellow-text)}:host(.is-purple){--mod-badge-color-text: var(--ds-badge-color-purple-text);--mod-badge-color-background: var(--ds-badge-color-purple-background);--mod-badge-pulse-color: var(--ds-badge-color-purple-background);--mod-badge-icon-color: var(--ds-badge-color-purple-text);--icon-color: var(--ds-badge-color-purple-text)}:host(.is-grey){--mod-badge-color-text: var(--ds-badge-color-grey-text);--mod-badge-color-background: var(--ds-badge-color-grey-background);--mod-badge-pulse-color: var(--ds-badge-color-grey-background);--mod-badge-icon-color: var(--ds-badge-color-grey-text);--icon-color: var(--ds-badge-color-grey-text)}:host(.is-success){--mod-badge-color-text: var(--ds-badge-color-success-text);--mod-badge-color-background: var(--ds-badge-color-success-background);--mod-badge-pulse-color: var(--ds-badge-color-success-background);--mod-badge-icon-color: var(--ds-badge-color-success-text);--icon-color: var(--ds-badge-color-success-text)}:host(.is-warning){--mod-badge-color-text: var(--ds-badge-color-warning-text);--mod-badge-color-background: var(--ds-badge-color-warning-background);--mod-badge-pulse-color: var(--ds-badge-color-warning-background);--mod-badge-icon-color: var(--ds-badge-color-warning-text);--icon-color: var(--ds-badge-color-warning-text)}:host(.is-danger){--mod-badge-color-text: var(--ds-badge-color-danger-text);--mod-badge-color-background: var(--ds-badge-color-danger-background);--mod-badge-pulse-color: var(--ds-badge-color-danger-background);--mod-badge-icon-color: var(--ds-badge-color-danger-text);--icon-color: var(--ds-badge-color-danger-text)}:host(.is-sm){--mod-badge-radius: calc(var(--ds-badge-size-sm) / 2);--mod-badge-height: var(--ds-badge-size-sm);--mod-badge-min-width: var(--ds-badge-size-sm);--mod-badge-padding-inline: 0;--mod-badge-padding-block: 0;--mod-badge-font-size: 0;max-width:var(--ds-badge-size-sm);padding:0;overflow:hidden}:host(.is-sm)>*{display:none}:host(.is-lg){--mod-badge-min-width: var(--ds-badge-size-lg);--mod-badge-height: var(--ds-badge-size-lg);--mod-badge-radius: calc(var(--ds-badge-size-lg) / 2);--mod-badge-font-size: 1rem;--mod-badge-icon-size: 1.125rem}:host(.is-pulse){animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_badge-pulse-color)}70%{box-shadow:0 0 0 .5rem rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

package/dist/collection/components/badge/badge.interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-export const BADGE_SIZES = ['small', 'large', ''];
+export const BADGE_SIZES = ['sm', 'lg', 'small', 'large', ''];
 export const BADGE_COLORS = ['grey', 'danger', 'warning', 'success', 'red', 'yellow', 'green', 'purple', ''];
 export const BADGE_POSITIONS = ['card', 'button', 'tabs', ''];

package/dist/collection/components/badge/badge.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { Logger, normalizeDeprecatedTShirtSize, hasValue, OneOf, Type } from "../../utils/index";
 import { BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS, } from "./badge.interfaces";
 /**
  * Badge displays a small indicator or counter on a child component to highlight notifications, counts, or status information.
@@ -14,6 +14,9 @@ import { BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS, } from "./badge.interfaces"
  */
 export class Badge {
     constructor() {
+        // ========================================================================
+        // PUBLIC PROPERTY API
+        // ========================================================================
         /**
          * Name of the icon to show. If an icon is present, text should be hidden.
          */
@@ -38,19 +41,25 @@ export class Badge {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size) || '';
-    }
+    // ========================================================================
+    // LIFECYCLE
+    // ========================================================================
+    // ========================================================================
+    // PROPERTY VALIDATION
+    // ========================================================================
+    // ========================================================================
+    // PRIVATE METHODS
+    // ========================================================================
+    // ========================================================================
+    // RENDER
+    // ========================================================================
     render() {
-        return (h(Host, { key: '7b279ecf8768e13957aa164eeed67af8c12155b5', class: {
-                [`is-${this.color}`]: !!this.color,
-                [`is-${this.size}`]: !!this.size,
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        return (h(Host, { key: '96172084445525ad98729b13be73fd5608f20c3f', class: {
+                [`is-${this.color}`]: hasValue(this.color),
+                [`is-${size}`]: hasValue(this.size),
                 'is-pulse': this.pulse,
-            } }, h("span", { key: 'b530be3918a020b04b96926744788390507e3407', id: "badge", part: "badge" }, h("slot", { key: '8e4cbeab0f9d2a2672e1758fe1d85a15b11c3493' }), this.size !== 'small' && !!this.icon ? h("ds-icon", { part: "icon", name: this.icon }) : '')));
+            } }, h("span", { key: '23c0d0ddfd7be982b9d3538e5a6fba39993b3a99', id: "badge", part: "badge" }, h("slot", { key: 'c477848d6d4cb7079c12dfc667e3d63c15041ef9' }), size !== 'sm' && hasValue(this.icon) ? h("ds-icon", { part: "icon", name: this.icon }) : '')));
     }
     static get is() { return "ds-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -88,10 +97,10 @@ export class Badge {
             },
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "BadgeSize",
-                    "resolved": "\"\" | \"large\" | \"small\"",
+                    "resolved": "\"\" | \"large\" | \"lg\" | \"sm\" | \"small\"",
                     "references": {
                         "BadgeSize": {
                             "location": "import",
@@ -190,12 +199,6 @@ export class Badge {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "size",
-                "methodName": "sizeChanged"
-            }];
-    }
 }
 __decorate([
     Logger('badge'),
@@ -204,22 +207,22 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Badge.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Badge.prototype, "icon", void 0);
 __decorate([
-    ValidateOneOf(...BADGE_SIZES),
+    OneOf(BADGE_SIZES),
     __metadata("design:type", String)
 ], Badge.prototype, "size", void 0);
 __decorate([
-    ValidateOneOf(...BADGE_COLORS),
+    OneOf(BADGE_COLORS),
     __metadata("design:type", String)
 ], Badge.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...BADGE_POSITIONS),
+    OneOf(BADGE_POSITIONS),
     __metadata("design:type", String)
 ], Badge.prototype, "position", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Badge.prototype, "pulse", void 0);