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

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.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.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);

package/dist/collection/components/button/button-group/button-group.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, ValidateOneOf, ValidateType, setupValidation } from "../../../utils/index";
+import { Logger, OneOf, Required, Type } from "../../../utils/index";
 import { BUTTON_GROUP_ALIGNMENTS, BUTTON_GROUP_DIRECTIONS, } from "../button.interfaces";
 /**
  * Button group groups multiple buttons together with layout control for alignment and direction.
@@ -38,19 +38,12 @@ export class ButtonGroup {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ─────────────────────────────────────────────────────
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     /**
      * RENDER
      * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: '11109463f62a27a338a6e33d8e18bbdd0d696fe7' }, h("div", { key: 'e5031617931b98e819dc84c5d45c42af092389f8', id: "group", part: "group", class: {
+        return (h(Host, { key: 'f78e5114bbffced3e94ac2c6c2079a6e5ca56a56' }, h("div", { key: 'c5db2feee2df26cd1ab648b909bd18c95e7b2f0f', id: "group", part: "group", class: {
                 'as-col': this.direction === 'column',
                 'as-row': this.direction === 'row',
                 'is-reverse': this.reverse,
@@ -58,7 +51,7 @@ export class ButtonGroup {
                 'is-left': this.align === 'left',
                 'is-center': this.align === 'center',
                 'is-right': this.align === 'right',
-            } }, h("slot", { key: '81ff03c84219c3f11e85d58e4cb63e29bceca85b' }))));
+            } }, h("slot", { key: '9cc6073a79f570a432f5005ecc1ef50652d59912' }))));
     }
     static get is() { return "ds-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -179,18 +172,19 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], ButtonGroup.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...BUTTON_GROUP_ALIGNMENTS),
+    OneOf(BUTTON_GROUP_ALIGNMENTS),
     __metadata("design:type", String)
 ], ButtonGroup.prototype, "align", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_GROUP_DIRECTIONS),
+    Required(),
+    OneOf(BUTTON_GROUP_DIRECTIONS),
     __metadata("design:type", String)
 ], ButtonGroup.prototype, "direction", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], ButtonGroup.prototype, "reverse", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], ButtonGroup.prototype, "wide", void 0);