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

package/dist/cjs/ds-icon_2.cjs.entry.js

@@ -3,15 +3,18 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
 var _commonjsHelpers = require('./_commonjsHelpers-DVhpm0hL.js');
 var isObjectLike = require('./isObjectLike-h-ta_ikf.js');
-var svg = require('./svg-D7Mwbcvp.js');
+var hasValue = require('./has-value-DK0oRqXI.js');
+var svg = require('./svg-D9RbiR8R.js');
 var tShirt = require('./t-shirt-AyhbnEdJ.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
-var config_decorator = require('./config.decorator-Qmrq4ZYj.js');
-require('./config.utils-Cv4cx_Xa.js');
+var type = require('./type-hmc4CJcO.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./config.utils-MhZvq4Qm.js');
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -946,6 +949,7 @@ const ICON_SIZES = [
     'lg',
     'xl',
     '2xl',
+    '3xl',
     '',
     'xsmall',
     'x-small',
@@ -956,11 +960,12 @@ const ICON_SIZES = [
     'xx-large',
 ];
 
-const iconHostCss = () => `:host{--_icon-position:var(--icon-position, var(--mod-icon-position, static));--_icon-top:var(--icon-top, var(--mod-icon-top));--_icon-right:var(--icon-right, var(--mod-icon-right));--_icon-bottom:var(--icon-bottom, var(--mod-icon-bottom));--_icon-left:var(--icon-left, var(--mod-icon-left));position:var(--_icon-position);top:var(--_icon-top);right:var(--_icon-right);bottom:var(--_icon-bottom);left:var(--_icon-left);--_icon-m:var(--icon-m, var(--mod-icon-m, 0));--_icon-my:var(--icon-my, var(--mod-icon-my));--_icon-mx:var(--icon-mx, var(--mod-icon-mx));--_icon-ml:var(--icon-ml, var(--mod-icon-ml));--_icon-mr:var(--icon-mr, var(--mod-icon-mr));--_icon-mt:var(--icon-mt, var(--mod-icon-mt));--_icon-mb:var(--icon-mb, var(--mod-icon-mb));margin:var(--_icon-m);margin-inline:var(--_icon-mx);margin-block:var(--_icon-my);margin-left:var(--_icon-ml);margin-right:var(--_icon-mr);margin-top:var(--_icon-mt);margin-bottom:var(--_icon-mb);--_icon-size:var(--icon-size, var(--mod-icon-size, var(--ds-icon-size-base)));--_icon-inner-size:var(--icon-inner-size, var(--mod-icon-inner-size, var(--ds-icon-size-base)));--_icon-inner-mt:var(--icon-inner-mt, var(--mod-icon-inner-mt, 0));--_icon-color:var(--icon-color, var(--mod-icon-color, var(--ds-icon-color-primary)));--_icon-shape:var(--icon-shape, var(--mod-icon-shape, var(--ds-icon-color-primary)));--_icon-tile-size:var(--icon-tile-size, var(--mod-icon-tile-size, var(--ds-icon-tile-size-base-mobile)));--_icon-tile-size-tablet:var(--icon-tile-size-tablet, var(--mod-icon-tile-size-tablet, var(--ds-icon-tile-size-base-tablet)));--_icon-tile-color-background:var(--icon-tile-color-background, var(--mod-icon-tile-color-background, var(--ds-icon-tile-color-purple)));--_icon-tile-radius:var(--icon-tile-radius, var(--mod-icon-tile-radius, var(--ds-icon-tile-radius)))}: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;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;vertical-align:middle;pointer-events:visible;width:var(--_icon-size);height:var(--_icon-size);max-height:var(--_icon-size)}:host #inner{display:block;position:static;z-index:1;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;padding:.063rem;margin-top:var(--_icon-inner-mt);width:var(--_icon-inner-size);height:var(--_icon-inner-size);max-height:var(--_icon-inner-size)}:host #inner>svg{vertical-align:top}:host(.is-filled) svg svg,:host(.is-filled) svg g,:host(.is-filled) svg path,:host(.is-filled) svg circle{fill:var(--_icon-color)}:host(:not(.is-filled)) svg path[fill="#E9FBF7"]{fill:var(--icon-brand-color, #E9FBF7)}:host(:not(.is-filled)) svg path[fill="#e9fbf7"]{fill:var(--icon-brand-color, #e9fbf7)}:host(:not(.is-filled)) svg path[fill="#CBF2EC"]{fill:var(--icon-brand-color, #CBF2EC)}:host(:not(.is-filled)) svg path[fill="#cbf2ec"]{fill:var(--icon-brand-color, #cbf2ec)}:host(:not(.is-filled)) svg path[fill="#94E3D4"]{fill:var(--icon-brand-color, #94E3D4)}:host(:not(.is-filled)) svg path[fill="#94e3d4"]{fill:var(--icon-brand-color, #94e3d4)}:host(:not(.is-filled)) svg path[fill="#21D9AC"]{fill:var(--icon-brand-color, #21D9AC)}:host(:not(.is-filled)) svg path[fill="#21d9ac"]{fill:var(--icon-brand-color, #21d9ac)}:host(:not(.is-filled)) svg path[fill="#00B28F"]{fill:var(--icon-brand-color, #00B28F)}:host(:not(.is-filled)) svg path[fill="#00b28f"]{fill:var(--icon-brand-color, #00b28f)}:host(:not(.is-filled)) svg path[fill="#1B5951"]{fill:var(--icon-brand-color, #1B5951)}:host(:not(.is-filled)) svg path[fill="#1b5951"]{fill:var(--icon-brand-color, #1b5951)}:host(:not(.is-filled)) svg path[fill="#FFF9E8"]{fill:var(--icon-brand-color, #FFF9E8)}:host(:not(.is-filled)) svg path[fill="#fff9e8"]{fill:var(--icon-brand-color, #fff9e8)}:host(:not(.is-filled)) svg path[fill="#FFECBC"]{fill:var(--icon-brand-color, #FFECBC)}:host(:not(.is-filled)) svg path[fill="#ffecbc"]{fill:var(--icon-brand-color, #ffecbc)}:host(:not(.is-filled)) svg path[fill="#FAE052"]{fill:var(--icon-brand-color, #FAE052)}:host(:not(.is-filled)) svg path[fill="#fae052"]{fill:var(--icon-brand-color, #fae052)}:host(:not(.is-filled)) svg path[fill="#FFBE19"]{fill:var(--icon-brand-color, #FFBE19)}:host(:not(.is-filled)) svg path[fill="#ffbe19"]{fill:var(--icon-brand-color, #ffbe19)}:host(:not(.is-filled)) svg path[fill="#FA9319"]{fill:var(--icon-brand-color, #FA9319)}:host(:not(.is-filled)) svg path[fill="#fa9319"]{fill:var(--icon-brand-color, #fa9319)}:host(:not(.is-filled)) svg path[fill="#B24A00"]{fill:var(--icon-brand-color, #B24A00)}:host(:not(.is-filled)) svg path[fill="#b24a00"]{fill:var(--icon-brand-color, #b24a00)}:host(:not(.is-filled)) svg path[fill="#FFEEF1"]{fill:var(--icon-brand-color, #FFEEF1)}:host(:not(.is-filled)) svg path[fill="#ffeef1"]{fill:var(--icon-brand-color, #ffeef1)}:host(:not(.is-filled)) svg path[fill="#FFD7D7"]{fill:var(--icon-brand-color, #FFD7D7)}:host(:not(.is-filled)) svg path[fill="#ffd7d7"]{fill:var(--icon-brand-color, #ffd7d7)}:host(:not(.is-filled)) svg path[fill="#FFACA6"]{fill:var(--icon-brand-color, #FFACA6)}:host(:not(.is-filled)) svg path[fill="#ffaca6"]{fill:var(--icon-brand-color, #ffaca6)}:host(:not(.is-filled)) svg path[fill="#FF596F"]{fill:var(--icon-brand-color, #FF596F)}:host(:not(.is-filled)) svg path[fill="#ff596f"]{fill:var(--icon-brand-color, #ff596f)}:host(:not(.is-filled)) svg path[fill="#D9304C"]{fill:var(--icon-brand-color, #D9304C)}:host(:not(.is-filled)) svg path[fill="#d9304c"]{fill:var(--icon-brand-color, #d9304c)}:host(:not(.is-filled)) svg path[fill="#99172D"]{fill:var(--icon-brand-color, #99172D)}:host(:not(.is-filled)) svg path[fill="#99172d"]{fill:var(--icon-brand-color, #99172d)}:host(:not(.is-filled)) svg path[fill="#F9F3FF"]{fill:var(--icon-brand-color, #F9F3FF)}:host(:not(.is-filled)) svg path[fill="#f9f3ff"]{fill:var(--icon-brand-color, #f9f3ff)}:host(:not(.is-filled)) svg path[fill="#E1D9FF"]{fill:var(--icon-brand-color, #E1D9FF)}:host(:not(.is-filled)) svg path[fill="#e1d9ff"]{fill:var(--icon-brand-color, #e1d9ff)}:host(:not(.is-filled)) svg path[fill="#B8B2FF"]{fill:var(--icon-brand-color, #B8B2FF)}:host(:not(.is-filled)) svg path[fill="#b8b2ff"]{fill:var(--icon-brand-color, #b8b2ff)}:host(:not(.is-filled)) svg path[fill="#BE82FA"]{fill:var(--icon-brand-color, #BE82FA)}:host(:not(.is-filled)) svg path[fill="#be82fa"]{fill:var(--icon-brand-color, #be82fa)}:host(:not(.is-filled)) svg path[fill="#9F52CC"]{fill:var(--icon-brand-color, #9F52CC)}:host(:not(.is-filled)) svg path[fill="#9f52cc"]{fill:var(--icon-brand-color, #9f52cc)}:host(:not(.is-filled)) svg path[fill="#6C2273"]{fill:var(--icon-brand-color, #6C2273)}:host(:not(.is-filled)) svg path[fill="#6c2273"]{fill:var(--icon-brand-color, #6c2273)}:host(:not(.is-filled)) svg path[fill="#000D6E"]{fill:var(--icon-brand-color, #000D6E)}:host(:not(.is-filled)) svg path[fill="#000d6e"]{fill:var(--icon-brand-color, #000d6e)}:host(.is-inline){display:-ms-inline-flexbox;display:inline-flex;line-height:1}:host(.has-shadow) svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}:host(.turn-plus) #inner{-webkit-transform:rotate(225deg);transform:rotate(225deg)}:host(.turn-nav-go-down) #inner,:host(.turn-caret-down) #inner,:host(.turn-caret-up) #inner{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.is-tile){background:var(--_icon-tile-color-background);border-radius:var(--_icon-tile-radius);height:var(--_icon-tile-size);--mod-icon-size:var(--_icon-tile-size);--mod-icon-inner-size:var(--_icon-tile-size)}@media screen and (min-width: 769px){:host(.is-tile){height:var(--_icon-tile-size-tablet);--mod-icon-size:var(--_icon-tile-size-tablet);--mod-icon-inner-size:var(--_icon-tile-size-tablet)}}:host(.is-xs:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-xs);--mod-icon-inner-size:var(--ds-icon-size-xs)}:host(.is-sm:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-sm);--mod-icon-inner-size:var(--ds-icon-size-sm)}:host(.is-md:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-md);--mod-icon-inner-size:var(--ds-icon-size-md)}:host(.is-lg:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-lg);--mod-icon-inner-size:var(--ds-icon-size-lg)}:host(.is-xl:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-xl);--mod-icon-inner-size:var(--ds-icon-size-xl)}:host(.is-2xl:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-2xl);--mod-icon-inner-size:var(--ds-icon-size-2xl)}:host(.is-tile.is-lg){--mod-icon-tile-size:var(--ds-icon-tile-size-lg-mobile);--mod-icon-tile-size-tablet:var(--ds-icon-tile-size-lg-tablet)}:host(.is-tile.is-xl){--mod-icon-tile-size:var(--ds-icon-tile-size-xl-mobile);--mod-icon-tile-size-tablet:var(--ds-icon-tile-size-xl-tablet)}:host(.is-inverted){--mod-icon-color:var(--ds-icon-color-white)}:host(.is-disabled){--mod-icon-color:var(--ds-icon-color-disabled)}:host(.is-primary){--mod-icon-color:var(--ds-icon-color-primary);--mod-icon-shape:var(--ds-global-color-primary-5)}:host(.is-primary-light){--mod-icon-color:var(--ds-icon-color-primary-light);--mod-icon-shape:var(--ds-global-color-primary-light-5)}:host(.is-info){--mod-icon-color:var(--ds-icon-color-info);--mod-icon-shape:var(--ds-global-color-info-5)}:host(.is-success){--mod-icon-color:var(--ds-icon-color-success);--mod-icon-shape:var(--ds-global-color-success-5)}:host(.is-danger){--mod-icon-color:var(--ds-icon-color-danger);--mod-icon-shape:var(--ds-global-color-danger-5)}:host(.is-warning){--mod-icon-color:var(--ds-icon-color-warning);--mod-icon-shape:var(--ds-global-color-warning-5)}:host(.is-white){--mod-icon-color:var(--ds-icon-color-white);--mod-icon-shape:var(--ds-global-color-white-5)}:host(.is-grey){--mod-icon-color:var(--ds-icon-color-grey);--mod-icon-shape:var(--ds-global-color-grey-5)}:host(.is-tile-green){--mod-icon-tile-color-background:var(--ds-icon-tile-color-green)}:host(.is-tile-red){--mod-icon-tile-color-background:var(--ds-icon-tile-color-red)}:host(.is-tile-yellow){--mod-icon-tile-color-background:var(--ds-icon-tile-color-yellow)}:host(.has-shape-circle),:host(.has-shape-triangle){--mod-icon-color:white}:host(.has-shape-triangle){--mod-icon-inner-mt:2px}:host(.has-shape-circle),:host(.has-shape-triangle){--mod-icon-size:var(--ds-icon-size-base);--mod-icon-inner-size:calc(var(--ds-icon-size-base) * 0.6)}:host(.has-shape-circle.is-md),:host(.has-shape-triangle.is-md){--mod-icon-size:var(--ds-icon-size-md);--mod-icon-inner-size:calc(var(--ds-icon-size-md) * 0.6)}:host(.has-shape-circle.is-lg),:host(.has-shape-triangle.is-lg){--mod-icon-size:var(--ds-icon-size-lg);--mod-icon-inner-size:calc(var(--ds-icon-size-lg) * 0.6)}:host(.has-shape-circle.is-xl),:host(.has-shape-triangle.is-xl){--mod-icon-size:var(--ds-icon-size-xl);--mod-icon-inner-size:calc(var(--ds-icon-size-xl) * 0.6)}:host(.has-shape-circle.is-2xl),:host(.has-shape-triangle.is-2xl){--mod-icon-size:var(--ds-icon-size-2xl);--mod-icon-inner-size:calc(var(--ds-icon-size-2xl) * 0.6)}:host(.has-shape-circle)::before{content:"";-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.8995 4.10051C21.9416 2.14257 19.447 0.809205 16.7313 0.269012C14.0155 -0.271181 11.2006 0.00606573 8.64244 1.06569C6.08426 2.12532 3.89777 3.91973 2.35943 6.22202C0.821087 8.52431 -3.3718e-07 11.2311 0 14C1.6859e-07 16.769 0.821085 19.4757 2.35943 21.778C3.89777 24.0803 6.08426 25.8747 8.64244 26.9343C11.2006 27.994 14.0155 28.2712 16.7313 27.731C19.447 27.1908 21.9416 25.8575 23.8995 23.8995C26.525 21.274 28 17.7131 28 14C28 10.287 26.525 6.72602 23.8995 4.10051Z" fill="black"/></svg>');mask-image:url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.8995 4.10051C21.9416 2.14257 19.447 0.809205 16.7313 0.269012C14.0155 -0.271181 11.2006 0.00606573 8.64244 1.06569C6.08426 2.12532 3.89777 3.91973 2.35943 6.22202C0.821087 8.52431 -3.3718e-07 11.2311 0 14C1.6859e-07 16.769 0.821085 19.4757 2.35943 21.778C3.89777 24.0803 6.08426 25.8747 8.64244 26.9343C11.2006 27.994 14.0155 28.2712 16.7313 27.731C19.447 27.1908 21.9416 25.8575 23.8995 23.8995C26.525 21.274 28 17.7131 28 14C28 10.287 26.525 6.72602 23.8995 4.10051Z" fill="black"/></svg>');-webkit-mask-size:cover;mask-size:cover;background:var(--_icon-shape);position:absolute;width:calc(100% - 6px);height:calc(100% - 6px);margin:2px}:host(.has-shape-triangle)::before{content:"";-webkit-mask-image:url("data:image/svg+xml;charset=UTF-8,  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>    <path fill='black' d='M7 .006a1.5 1.5 0 0 0-1.335.816l-.002.004-5.5 10.999a1.503 1.503 0 0 0 .606 1.983 1.5 1.5 0 0 0 .73.192h11.003a1.5 1.5 0 0 0 1.335-2.174l-5.5-11-.002-.004A1.5 1.5 0 0 0 7 .006'/>  </svg>");mask-image:url("data:image/svg+xml;charset=UTF-8,  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>    <path fill='black' d='M7 .006a1.5 1.5 0 0 0-1.335.816l-.002.004-5.5 10.999a1.503 1.503 0 0 0 .606 1.983 1.5 1.5 0 0 0 .73.192h11.003a1.5 1.5 0 0 0 1.335-2.174l-5.5-11-.002-.004A1.5 1.5 0 0 0 7 .006'/>  </svg>");-webkit-mask-size:cover;mask-size:cover;background:var(--_icon-shape);position:absolute;width:calc(100% - 6px);height:calc(100% - 6px);margin:2px}`;
+const iconHostCss = () => `:host{--_icon-position:var(--icon-position, var(--mod-icon-position, static));--_icon-top:var(--icon-top, var(--mod-icon-top));--_icon-right:var(--icon-right, var(--mod-icon-right));--_icon-bottom:var(--icon-bottom, var(--mod-icon-bottom));--_icon-left:var(--icon-left, var(--mod-icon-left));position:var(--_icon-position);top:var(--_icon-top);right:var(--_icon-right);bottom:var(--_icon-bottom);left:var(--_icon-left);--_icon-m:var(--icon-m, var(--mod-icon-m, 0));--_icon-my:var(--icon-my, var(--mod-icon-my));--_icon-mx:var(--icon-mx, var(--mod-icon-mx));--_icon-ml:var(--icon-ml, var(--mod-icon-ml));--_icon-mr:var(--icon-mr, var(--mod-icon-mr));--_icon-mt:var(--icon-mt, var(--mod-icon-mt));--_icon-mb:var(--icon-mb, var(--mod-icon-mb));margin:var(--_icon-m);margin-inline:var(--_icon-mx);margin-block:var(--_icon-my);margin-left:var(--_icon-ml);margin-right:var(--_icon-mr);margin-top:var(--_icon-mt);margin-bottom:var(--_icon-mb);--_icon-size:var(--icon-size, var(--mod-icon-size, var(--ds-icon-size-base)));--_icon-inner-size:var(--icon-inner-size, var(--mod-icon-inner-size, var(--ds-icon-size-base)));--_icon-inner-mt:var(--icon-inner-mt, var(--mod-icon-inner-mt, 0));--_icon-color:var(--icon-color, var(--mod-icon-color, var(--ds-icon-color-primary)));--_icon-shape:var(--icon-shape, var(--mod-icon-shape, var(--ds-icon-color-primary)));--_icon-tile-size:var(--icon-tile-size, var(--mod-icon-tile-size, var(--ds-icon-tile-size-base-mobile)));--_icon-tile-size-tablet:var(--icon-tile-size-tablet, var(--mod-icon-tile-size-tablet, var(--ds-icon-tile-size-base-tablet)));--_icon-tile-color-background:var(--icon-tile-color-background, var(--mod-icon-tile-color-background, var(--ds-icon-tile-color-purple)));--_icon-tile-radius:var(--icon-tile-radius, var(--mod-icon-tile-radius, var(--ds-icon-tile-radius)))}: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;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;vertical-align:middle;pointer-events:visible;width:var(--_icon-size);height:var(--_icon-size);max-height:var(--_icon-size)}:host #inner{display:block;position:static;z-index:1;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;margin-top:var(--_icon-inner-mt);width:var(--_icon-inner-size);height:var(--_icon-inner-size);max-height:var(--_icon-inner-size)}:host #inner>svg{vertical-align:top}:host(.is-filled) svg svg,:host(.is-filled) svg g,:host(.is-filled) svg path,:host(.is-filled) svg circle{fill:var(--_icon-color)}:host(:not(.is-filled)) svg path[fill="#E9FBF7"]{fill:var(--icon-brand-color, #E9FBF7)}:host(:not(.is-filled)) svg path[fill="#e9fbf7"]{fill:var(--icon-brand-color, #e9fbf7)}:host(:not(.is-filled)) svg path[fill="#CBF2EC"]{fill:var(--icon-brand-color, #CBF2EC)}:host(:not(.is-filled)) svg path[fill="#cbf2ec"]{fill:var(--icon-brand-color, #cbf2ec)}:host(:not(.is-filled)) svg path[fill="#94E3D4"]{fill:var(--icon-brand-color, #94E3D4)}:host(:not(.is-filled)) svg path[fill="#94e3d4"]{fill:var(--icon-brand-color, #94e3d4)}:host(:not(.is-filled)) svg path[fill="#21D9AC"]{fill:var(--icon-brand-color, #21D9AC)}:host(:not(.is-filled)) svg path[fill="#21d9ac"]{fill:var(--icon-brand-color, #21d9ac)}:host(:not(.is-filled)) svg path[fill="#00B28F"]{fill:var(--icon-brand-color, #00B28F)}:host(:not(.is-filled)) svg path[fill="#00b28f"]{fill:var(--icon-brand-color, #00b28f)}:host(:not(.is-filled)) svg path[fill="#1B5951"]{fill:var(--icon-brand-color, #1B5951)}:host(:not(.is-filled)) svg path[fill="#1b5951"]{fill:var(--icon-brand-color, #1b5951)}:host(:not(.is-filled)) svg path[fill="#FFF9E8"]{fill:var(--icon-brand-color, #FFF9E8)}:host(:not(.is-filled)) svg path[fill="#fff9e8"]{fill:var(--icon-brand-color, #fff9e8)}:host(:not(.is-filled)) svg path[fill="#FFECBC"]{fill:var(--icon-brand-color, #FFECBC)}:host(:not(.is-filled)) svg path[fill="#ffecbc"]{fill:var(--icon-brand-color, #ffecbc)}:host(:not(.is-filled)) svg path[fill="#FAE052"]{fill:var(--icon-brand-color, #FAE052)}:host(:not(.is-filled)) svg path[fill="#fae052"]{fill:var(--icon-brand-color, #fae052)}:host(:not(.is-filled)) svg path[fill="#FFBE19"]{fill:var(--icon-brand-color, #FFBE19)}:host(:not(.is-filled)) svg path[fill="#ffbe19"]{fill:var(--icon-brand-color, #ffbe19)}:host(:not(.is-filled)) svg path[fill="#FA9319"]{fill:var(--icon-brand-color, #FA9319)}:host(:not(.is-filled)) svg path[fill="#fa9319"]{fill:var(--icon-brand-color, #fa9319)}:host(:not(.is-filled)) svg path[fill="#B24A00"]{fill:var(--icon-brand-color, #B24A00)}:host(:not(.is-filled)) svg path[fill="#b24a00"]{fill:var(--icon-brand-color, #b24a00)}:host(:not(.is-filled)) svg path[fill="#FFEEF1"]{fill:var(--icon-brand-color, #FFEEF1)}:host(:not(.is-filled)) svg path[fill="#ffeef1"]{fill:var(--icon-brand-color, #ffeef1)}:host(:not(.is-filled)) svg path[fill="#FFD7D7"]{fill:var(--icon-brand-color, #FFD7D7)}:host(:not(.is-filled)) svg path[fill="#ffd7d7"]{fill:var(--icon-brand-color, #ffd7d7)}:host(:not(.is-filled)) svg path[fill="#FFACA6"]{fill:var(--icon-brand-color, #FFACA6)}:host(:not(.is-filled)) svg path[fill="#ffaca6"]{fill:var(--icon-brand-color, #ffaca6)}:host(:not(.is-filled)) svg path[fill="#FF596F"]{fill:var(--icon-brand-color, #FF596F)}:host(:not(.is-filled)) svg path[fill="#ff596f"]{fill:var(--icon-brand-color, #ff596f)}:host(:not(.is-filled)) svg path[fill="#D9304C"]{fill:var(--icon-brand-color, #D9304C)}:host(:not(.is-filled)) svg path[fill="#d9304c"]{fill:var(--icon-brand-color, #d9304c)}:host(:not(.is-filled)) svg path[fill="#99172D"]{fill:var(--icon-brand-color, #99172D)}:host(:not(.is-filled)) svg path[fill="#99172d"]{fill:var(--icon-brand-color, #99172d)}:host(:not(.is-filled)) svg path[fill="#F9F3FF"]{fill:var(--icon-brand-color, #F9F3FF)}:host(:not(.is-filled)) svg path[fill="#f9f3ff"]{fill:var(--icon-brand-color, #f9f3ff)}:host(:not(.is-filled)) svg path[fill="#E1D9FF"]{fill:var(--icon-brand-color, #E1D9FF)}:host(:not(.is-filled)) svg path[fill="#e1d9ff"]{fill:var(--icon-brand-color, #e1d9ff)}:host(:not(.is-filled)) svg path[fill="#B8B2FF"]{fill:var(--icon-brand-color, #B8B2FF)}:host(:not(.is-filled)) svg path[fill="#b8b2ff"]{fill:var(--icon-brand-color, #b8b2ff)}:host(:not(.is-filled)) svg path[fill="#BE82FA"]{fill:var(--icon-brand-color, #BE82FA)}:host(:not(.is-filled)) svg path[fill="#be82fa"]{fill:var(--icon-brand-color, #be82fa)}:host(:not(.is-filled)) svg path[fill="#9F52CC"]{fill:var(--icon-brand-color, #9F52CC)}:host(:not(.is-filled)) svg path[fill="#9f52cc"]{fill:var(--icon-brand-color, #9f52cc)}:host(:not(.is-filled)) svg path[fill="#6C2273"]{fill:var(--icon-brand-color, #6C2273)}:host(:not(.is-filled)) svg path[fill="#6c2273"]{fill:var(--icon-brand-color, #6c2273)}:host(:not(.is-filled)) svg path[fill="#000D6E"]{fill:var(--icon-brand-color, #000D6E)}:host(:not(.is-filled)) svg path[fill="#000d6e"]{fill:var(--icon-brand-color, #000d6e)}:host(.is-inline){display:-ms-inline-flexbox;display:inline-flex;line-height:1}:host(.has-shadow) svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}:host(.turn-plus) #inner{-webkit-transform:rotate(225deg);transform:rotate(225deg)}:host(.turn-nav-go-down) #inner,:host(.turn-caret-down) #inner,:host(.turn-caret-up) #inner{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.is-tile){background:var(--_icon-tile-color-background);border-radius:var(--_icon-tile-radius);height:var(--_icon-tile-size);--mod-icon-size:var(--_icon-tile-size);--mod-icon-inner-size:var(--_icon-tile-size)}@media screen and (min-width: 769px){:host(.is-tile){height:var(--_icon-tile-size-tablet);--mod-icon-size:var(--_icon-tile-size-tablet);--mod-icon-inner-size:var(--_icon-tile-size-tablet)}}:host(.is-xs:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-xs);--mod-icon-inner-size:var(--ds-icon-size-xs)}:host(.is-sm:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-sm);--mod-icon-inner-size:var(--ds-icon-size-sm)}:host(.is-md:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-md);--mod-icon-inner-size:var(--ds-icon-size-md)}:host(.is-lg:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-lg);--mod-icon-inner-size:var(--ds-icon-size-lg)}:host(.is-xl:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-xl);--mod-icon-inner-size:var(--ds-icon-size-xl)}:host(.is-2xl:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-2xl);--mod-icon-inner-size:var(--ds-icon-size-2xl)}:host(.is-3xl:not(.is-tile,.has-shape-circle,.has-shape-triangle)){--mod-icon-size:var(--ds-icon-size-3xl);--mod-icon-inner-size:var(--ds-icon-size-3xl)}:host(.is-tile.is-lg){--mod-icon-tile-size:var(--ds-icon-tile-size-lg-mobile);--mod-icon-tile-size-tablet:var(--ds-icon-tile-size-lg-tablet)}:host(.is-tile.is-xl){--mod-icon-tile-size:var(--ds-icon-tile-size-xl-mobile);--mod-icon-tile-size-tablet:var(--ds-icon-tile-size-xl-tablet)}:host(.is-inverted){--mod-icon-color:var(--ds-icon-color-white)}:host(.is-disabled){--mod-icon-color:var(--ds-icon-color-disabled)}:host(.is-primary){--mod-icon-color:var(--ds-icon-color-primary);--mod-icon-shape:var(--ds-global-color-primary-5)}:host(.is-primary-light){--mod-icon-color:var(--ds-icon-color-primary-light);--mod-icon-shape:var(--ds-global-color-primary-light-5)}:host(.is-info){--mod-icon-color:var(--ds-icon-color-info);--mod-icon-shape:var(--ds-global-color-info-5)}:host(.is-success){--mod-icon-color:var(--ds-icon-color-success);--mod-icon-shape:var(--ds-global-color-success-5)}:host(.is-danger){--mod-icon-color:var(--ds-icon-color-danger);--mod-icon-shape:var(--ds-global-color-danger-5)}:host(.is-warning){--mod-icon-color:var(--ds-icon-color-warning);--mod-icon-shape:var(--ds-global-color-warning-5)}:host(.is-white){--mod-icon-color:var(--ds-icon-color-white);--mod-icon-shape:var(--ds-global-color-white-5)}:host(.is-grey){--mod-icon-color:var(--ds-icon-color-grey);--mod-icon-shape:var(--ds-global-color-grey-5)}:host(.is-tile-green){--mod-icon-tile-color-background:var(--ds-icon-tile-color-green)}:host(.is-tile-red){--mod-icon-tile-color-background:var(--ds-icon-tile-color-red)}:host(.is-tile-yellow){--mod-icon-tile-color-background:var(--ds-icon-tile-color-yellow)}:host(.has-shape-circle),:host(.has-shape-triangle){--mod-icon-color:white}:host(.has-shape-triangle){--mod-icon-inner-mt:2px}:host(.has-shape-circle),:host(.has-shape-triangle){--mod-icon-size:var(--ds-icon-size-base);--mod-icon-inner-size:calc(var(--ds-icon-size-base) * 0.6)}:host(.has-shape-circle.is-md),:host(.has-shape-triangle.is-md){--mod-icon-size:var(--ds-icon-size-md);--mod-icon-inner-size:calc(var(--ds-icon-size-md) * 0.6)}:host(.has-shape-circle.is-lg),:host(.has-shape-triangle.is-lg){--mod-icon-size:var(--ds-icon-size-lg);--mod-icon-inner-size:calc(var(--ds-icon-size-lg) * 0.6)}:host(.has-shape-circle.is-xl),:host(.has-shape-triangle.is-xl){--mod-icon-size:var(--ds-icon-size-xl);--mod-icon-inner-size:calc(var(--ds-icon-size-xl) * 0.6)}:host(.has-shape-circle.is-2xl),:host(.has-shape-triangle.is-2xl){--mod-icon-size:var(--ds-icon-size-2xl);--mod-icon-inner-size:calc(var(--ds-icon-size-2xl) * 0.6)}:host(.has-shape-circle)::before{content:"";-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.8995 4.10051C21.9416 2.14257 19.447 0.809205 16.7313 0.269012C14.0155 -0.271181 11.2006 0.00606573 8.64244 1.06569C6.08426 2.12532 3.89777 3.91973 2.35943 6.22202C0.821087 8.52431 -3.3718e-07 11.2311 0 14C1.6859e-07 16.769 0.821085 19.4757 2.35943 21.778C3.89777 24.0803 6.08426 25.8747 8.64244 26.9343C11.2006 27.994 14.0155 28.2712 16.7313 27.731C19.447 27.1908 21.9416 25.8575 23.8995 23.8995C26.525 21.274 28 17.7131 28 14C28 10.287 26.525 6.72602 23.8995 4.10051Z" fill="black"/></svg>');mask-image:url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.8995 4.10051C21.9416 2.14257 19.447 0.809205 16.7313 0.269012C14.0155 -0.271181 11.2006 0.00606573 8.64244 1.06569C6.08426 2.12532 3.89777 3.91973 2.35943 6.22202C0.821087 8.52431 -3.3718e-07 11.2311 0 14C1.6859e-07 16.769 0.821085 19.4757 2.35943 21.778C3.89777 24.0803 6.08426 25.8747 8.64244 26.9343C11.2006 27.994 14.0155 28.2712 16.7313 27.731C19.447 27.1908 21.9416 25.8575 23.8995 23.8995C26.525 21.274 28 17.7131 28 14C28 10.287 26.525 6.72602 23.8995 4.10051Z" fill="black"/></svg>');-webkit-mask-size:cover;mask-size:cover;background:var(--_icon-shape);position:absolute;width:calc(100% - 6px);height:calc(100% - 6px);margin:2px}:host(.has-shape-triangle)::before{content:"";-webkit-mask-image:url("data:image/svg+xml;charset=UTF-8,  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>    <path fill='black' d='M7 .006a1.5 1.5 0 0 0-1.335.816l-.002.004-5.5 10.999a1.503 1.503 0 0 0 .606 1.983 1.5 1.5 0 0 0 .73.192h11.003a1.5 1.5 0 0 0 1.335-2.174l-5.5-11-.002-.004A1.5 1.5 0 0 0 7 .006'/>  </svg>");mask-image:url("data:image/svg+xml;charset=UTF-8,  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>    <path fill='black' d='M7 .006a1.5 1.5 0 0 0-1.335.816l-.002.004-5.5 10.999a1.503 1.503 0 0 0 .606 1.983 1.5 1.5 0 0 0 .73.192h11.003a1.5 1.5 0 0 0 1.335-2.174l-5.5-11-.002-.004A1.5 1.5 0 0 0 7 .006'/>  </svg>");-webkit-mask-size:cover;mask-size:cover;background:var(--_icon-shape);position:absolute;width:calc(100% - 6px);height:calc(100% - 6px);margin:2px}`;
 
 const Icon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this._fetchedSrc = '';
         this.icons = index.defaultConfig.icons;
         this.svgContent = '';
         /**
@@ -975,6 +980,10 @@ const Icon = class {
          * Svg content.
          */
         this.svg = '';
+        /**
+         * URL of an SVG file to fetch and display.
+         */
+        this.src = '';
         /**
          * If `true` the icon is displayed in a circle with a background color.
          */
@@ -1015,40 +1024,47 @@ const Icon = class {
          * PRIVATE METHODS
          * ------------------------------------------------------
          */
-        this.generateSvgContent = (iconName) => {
+        this.generateSvgContent = async (iconName) => {
             const hasIcons = Object.keys(this.icons).length > 0;
             if (hasIcons && iconName && iconName.length > 0) {
                 const icon = this.icons[`Icon${upperFirst(camelCase(iconName))}`];
                 if (icon) {
-                    this.svgContent = icon;
+                    if (icon !== this.svgContent) {
+                        this.svgContent = icon;
+                    }
                     return;
                 }
                 else {
                     console.error(`Icon "${iconName}" not found in design system configuration.`, '\n\nCheck out the documentation on how to import icons during initialization.', '\nhttps://design.baloise.dev/?path=/docs/components-data-display-icon--documentation&globals=framework:angular#import-during-initialization');
                 }
             }
+            if (this.src && this.src !== this._fetchedSrc) {
+                this._fetchedSrc = this.src;
+                this.svgContent = await svg.fetchSvg(this.src);
+                return;
+            }
             if (this.svg) {
-                this.svgContent = svg.sanitizeSvg(this.svg);
+                const sanitized = svg.sanitizeSvg(this.svg);
+                if (sanitized !== this.svgContent) {
+                    this.svgContent = sanitized;
+                }
             }
         };
     }
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = tShirt.normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFE CYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
-        validate_decorator.setupValidation(this);
+        // generateSvgContent is async; for src-based icons the first render shows nothing
+        // while the fetch is in flight. The @State update triggers a follow-up render.
         this.generateSvgContent(this.name);
-        this.size = tShirt.normalizeDeprecatedTShirtSize(this.size) || '';
     }
-    componentWillRender() {
-        this.generateSvgContent(this.name);
+    async componentWillRender() {
+        await this.generateSvgContent(this.name);
     }
     /**
      * LISTENERS
@@ -1059,16 +1075,16 @@ const Icon = class {
      */
     async configChanged(state) {
         this.icons = state.icons;
-        this.generateSvgContent(this.name);
+        await this.generateSvgContent(this.name);
     }
     parseColor() {
-        if (!!this.disabled) {
+        if (this.disabled) {
             return 'grey';
         }
-        if (!!this.invalid) {
+        if (this.invalid) {
             return 'danger';
         }
-        if ((this.color === 'auto' || this.color === '' || this.color === undefined || this.color === null) && !this.svg) {
+        if (!hasValue.hasValue(this.color) && !this.svg && !this.src) {
             return 'primary';
         }
         return this.color;
@@ -1079,10 +1095,11 @@ const Icon = class {
      */
     render() {
         const color = this.parseColor();
-        return (index.h(index.Host, { key: '864c8460072f69eb5f0a8c244b2a464315a60523', "aria-hidden": "true", class: {
-                'is-filled': !this.svg,
-                [`is-${color}`]: !!color,
-                [`is-${this.size}`]: this.size !== undefined,
+        const size = tShirt.normalizeDeprecatedTShirtSize(this.size) || '';
+        return (index.h(index.Host, { key: 'ef88ac381462c6bdb94a26ea1a34ae305d835bc0', "aria-hidden": "true", class: {
+                'is-filled': !this.svg && !this.src,
+                [`is-${color}`]: hasValue.hasValue(color),
+                [`is-${size}`]: hasValue.hasValue(this.size),
                 [`turn-${this.name}`]: this.turn,
                 'is-inverted': this.inverted,
                 'is-inline': this.inline,
@@ -1091,15 +1108,10 @@ const Icon = class {
                 'has-shadow': this.shadow,
                 'is-disabled': this.disabled,
                 'is-invalid': this.invalid,
-                [`has-shape-${this.shape}`]: !!this.shape,
-            } }, index.h("div", { key: 'cf951ef5fb93f75fe4a4ac556fe5299562afc9a2', id: "inner", part: "inner", innerHTML: this.svgContent })));
+                [`has-shape-${this.shape}`]: hasValue.hasValue(this.shape),
+            } }, index.h("div", { key: '48d72dc12d2c48d394538a8a41c990d29d21b927', id: "inner", part: "inner", innerHTML: this.svgContent })));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "size": [{
-                "sizeChanged": 0
-            }]
-    }; }
 };
 tslib_es6.__decorate([
     tslib_es6.Logger('icon'),
@@ -1108,55 +1120,59 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Icon.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Icon.prototype, "name", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Icon.prototype, "svg", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...ICON_SIZES),
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], Icon.prototype, "src", void 0);
+tslib_es6.__decorate([
+    oneOf.OneOf(ICON_SIZES),
     tslib_es6.__metadata("design:type", Object)
 ], Icon.prototype, "size", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...ICON_COLORS),
+    oneOf.OneOf(ICON_COLORS),
     tslib_es6.__metadata("design:type", Object)
 ], Icon.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...ICON_SHAPES),
+    oneOf.OneOf(ICON_SHAPES),
     tslib_es6.__metadata("design:type", String)
 ], Icon.prototype, "shape", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Icon.prototype, "tile", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...ICON_TILE_COLORS),
+    oneOf.OneOf(ICON_TILE_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Icon.prototype, "tileColor", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Icon.prototype, "inline", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Icon.prototype, "inverted", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Icon.prototype, "turn", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Icon.prototype, "shadow", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Icon.prototype, "disabled", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Icon.prototype, "invalid", void 0);
 tslib_es6.__decorate([
@@ -1320,11 +1336,6 @@ const Spinner = class {
             }
         }
     }
-    smallChanged(newValue, oldValue) {
-        if (newValue !== oldValue && newValue === true) {
-            this.size = 'sm';
-        }
-    }
     variationChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
             if (this.variation === 'circle') {
@@ -1339,10 +1350,6 @@ const Spinner = class {
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        validate_decorator.setupValidation(this);
-        this.smallChanged(this.small, false);
-    }
     componentDidLoad() {
         if (this.variation === 'logo') {
             this.animate();
@@ -1391,23 +1398,24 @@ const Spinner = class {
      */
     render() {
         const ariaLabel = this.label || i18nDsSpinner[this.language].loading;
-        return (index.h(index.Host, { key: '51cc071f89287840391cc33d5405bb1bfca4523f', role: "progressbar", "aria-label": ariaLabel, class: {
+        let size = this.size;
+        if (this.small === true) {
+            size = 'sm';
+        }
+        return (index.h(index.Host, { key: '86264d495d7ae16626bdf476d81c16dd87e0e12a', role: "progressbar", "aria-label": ariaLabel, class: {
                 'is-animated': this.animated,
                 'is-circle': this.variation === 'circle',
-                'is-sm': this.size === 'sm',
+                'is-sm': size === 'sm',
                 'is-white': this.color === 'white',
-                'is-label-right': !!this.label && this.labelPosition === 'right',
-                'is-label-bottom': !!this.label && this.labelPosition === 'bottom',
-            } }, index.h("div", { key: 'd0ecd97e9a41bd7e5d3b33bc0fd9333acc645632' }, index.h("div", { key: '58e0b422a077c3f159236ec70605c2289bef0192', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), this.label && index.h("span", { key: '15f04744d573e087dd5126d6449bd8781cd48231', part: "label" }, this.label)));
+                'is-label-right': hasValue.hasValue(this.label) && this.labelPosition === 'right',
+                'is-label-bottom': hasValue.hasValue(this.label) && this.labelPosition === 'bottom',
+            } }, index.h("div", { key: '2ef9e800128c98ce79f83b49e4c43cbc21f749e9' }, index.h("div", { key: 'c9086777b5ac64cb59d2df42aa198a6e193aec80', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue.hasValue(this.label) && index.h("span", { key: 'e8c5d1b0c1bb6cfab6e4fe0caae96684fa0af889', part: "label" }, this.label)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "deactivated": [{
                 "deactivatedChanged": 0
             }],
-        "small": [{
-                "smallChanged": 0
-            }],
         "variation": [{
                 "variationChanged": 0
             }]
@@ -1420,35 +1428,35 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Spinner.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SPINNER_COLORS),
+    oneOf.OneOf(SPINNER_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Spinner.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Spinner.prototype, "deactivated", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Spinner.prototype, "inverted", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SPINNER_SIZES),
+    oneOf.OneOf(SPINNER_SIZES),
     tslib_es6.__metadata("design:type", String)
 ], Spinner.prototype, "size", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Spinner.prototype, "small", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Spinner.prototype, "label", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SPINNER_LABEL_POSITIONS),
+    oneOf.OneOf(SPINNER_LABEL_POSITIONS),
     tslib_es6.__metadata("design:type", String)
 ], Spinner.prototype, "labelPosition", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SPINNER_VARIATIONS),
+    oneOf.OneOf(SPINNER_VARIATIONS),
     tslib_es6.__metadata("design:type", String)
 ], Spinner.prototype, "variation", void 0);
 tslib_es6.__decorate([