npm - @baloise/ds-core - Versions diffs - 20.0.0-next.4 → 20.0.0-next.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1040) hide show

package/dist/esm/ds-icon_2.entry.js CHANGED Viewed

@@ -1,15 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, x as defaultConfig, E as h, F as Host, G as getElement, D as raf, r as rOnLoad } from './index-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
+import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement, D as raf, L as rOnLoad } from './index-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-Duhf3ymL.js';
-import { d as require_baseGetTag, c as requireIsObjectLike, a as require_Symbol, b as requireIsArray } from './isObjectLike-BAYao9w7.js';
-import { s as sanitizeSvg } from './svg-BaIoYrFa.js';
+import { c as require_baseGetTag, b as requireIsObjectLike, a as require_Symbol } from './isObjectLike-BnBXjF_n.js';
+import { r as requireIsArray } from './isArray-B8PCdo6e.js';
+import { h as hasValue } from './has-value-Dmsj8ZQw.js';
+import { f as fetchSvg, s as sanitizeSvg } from './svg-B8KVoKrH.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { s as setupValidation, V as ValidateType, a as ValidateOneOf } from './validate.decorator-82RSSk25.js';
-import { L as ListenToConfig } from './config.decorator-BQNIja4k.js';
-import './config.utils-COlKFRlV.js';
+import { T as Type } from './type-7qEQcw90.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import './create-validator-decorator-fUav5byo.js';
+import './config.utils-CR4Xudpz.js';
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -944,6 +948,7 @@ const ICON_SIZES = [
     'lg',
     'xl',
     '2xl',
+    '3xl',
     '',
     'xsmall',
     'x-small',
@@ -954,11 +959,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) {
         registerInstance(this, hostRef);
+        this._fetchedSrc = '';
         this.icons = defaultConfig.icons;
         this.svgContent = '';
         /**
@@ -973,6 +979,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.
          */
@@ -1013,40 +1023,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 fetchSvg(this.src);
+                return;
+            }
             if (this.svg) {
-                this.svgContent = sanitizeSvg(this.svg);
+                const sanitized = sanitizeSvg(this.svg);
+                if (sanitized !== this.svgContent) {
+                    this.svgContent = sanitized;
+                }
             }
         };
     }
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFE CYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
-        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 = normalizeDeprecatedTShirtSize(this.size) || '';
     }
-    componentWillRender() {
-        this.generateSvgContent(this.name);
+    async componentWillRender() {
+        await this.generateSvgContent(this.name);
     }
     /**
      * LISTENERS
@@ -1057,16 +1074,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(this.color) && !this.svg && !this.src) {
             return 'primary';
         }
         return this.color;
@@ -1077,10 +1094,11 @@ const Icon = class {
      */
     render() {
         const color = this.parseColor();
-        return (h(Host, { key: '864c8460072f69eb5f0a8c244b2a464315a60523', "aria-hidden": "true", class: {
-                'is-filled': !this.svg,
-                [`is-${color}`]: !!color,
-                [`is-${this.size}`]: this.size !== undefined,
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        return (h(Host, { key: 'ef88ac381462c6bdb94a26ea1a34ae305d835bc0', "aria-hidden": "true", class: {
+                'is-filled': !this.svg && !this.src,
+                [`is-${color}`]: hasValue(color),
+                [`is-${size}`]: hasValue(this.size),
                 [`turn-${this.name}`]: this.turn,
                 'is-inverted': this.inverted,
                 'is-inline': this.inline,
@@ -1089,15 +1107,10 @@ const Icon = class {
                 'has-shadow': this.shadow,
                 'is-disabled': this.disabled,
                 'is-invalid': this.invalid,
-                [`has-shape-${this.shape}`]: !!this.shape,
-            } }, h("div", { key: 'cf951ef5fb93f75fe4a4ac556fe5299562afc9a2', id: "inner", part: "inner", innerHTML: this.svgContent })));
+                [`has-shape-${this.shape}`]: hasValue(this.shape),
+            } }, h("div", { key: '48d72dc12d2c48d394538a8a41c990d29d21b927', id: "inner", part: "inner", innerHTML: this.svgContent })));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "size": [{
-                "sizeChanged": 0
-            }]
-    }; }
 };
 __decorate([
     Logger('icon'),
@@ -1106,55 +1119,59 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Icon.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Icon.prototype, "name", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Icon.prototype, "svg", void 0);
 __decorate([
-    ValidateOneOf(...ICON_SIZES),
+    Type('string'),
+    __metadata("design:type", String)
+], Icon.prototype, "src", void 0);
+__decorate([
+    OneOf(ICON_SIZES),
     __metadata("design:type", Object)
 ], Icon.prototype, "size", void 0);
 __decorate([
-    ValidateOneOf(...ICON_COLORS),
+    OneOf(ICON_COLORS),
     __metadata("design:type", Object)
 ], Icon.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...ICON_SHAPES),
+    OneOf(ICON_SHAPES),
     __metadata("design:type", String)
 ], Icon.prototype, "shape", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Icon.prototype, "tile", void 0);
 __decorate([
-    ValidateOneOf(...ICON_TILE_COLORS),
+    OneOf(ICON_TILE_COLORS),
     __metadata("design:type", String)
 ], Icon.prototype, "tileColor", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Icon.prototype, "inline", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Icon.prototype, "inverted", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Icon.prototype, "turn", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Icon.prototype, "shadow", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Icon.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Icon.prototype, "invalid", void 0);
 __decorate([
@@ -1318,11 +1335,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') {
@@ -1337,10 +1349,6 @@ const Spinner = class {
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.smallChanged(this.small, false);
-    }
     componentDidLoad() {
         if (this.variation === 'logo') {
             this.animate();
@@ -1389,23 +1397,24 @@ const Spinner = class {
      */
     render() {
         const ariaLabel = this.label || i18nDsSpinner[this.language].loading;
-        return (h(Host, { key: '51cc071f89287840391cc33d5405bb1bfca4523f', role: "progressbar", "aria-label": ariaLabel, class: {
+        let size = this.size;
+        if (this.small === true) {
+            size = 'sm';
+        }
+        return (h(Host, { key: '90ffeeb92884b2408cc07d2a3d254ae640bfba9f', 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',
-            } }, h("div", { key: 'd0ecd97e9a41bd7e5d3b33bc0fd9333acc645632' }, h("div", { key: '58e0b422a077c3f159236ec70605c2289bef0192', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), this.label && h("span", { key: '15f04744d573e087dd5126d6449bd8781cd48231', part: "label" }, this.label)));
+                'is-label-right': hasValue(this.label) && this.labelPosition === 'right',
+                'is-label-bottom': hasValue(this.label) && this.labelPosition === 'bottom',
+            } }, h("div", { key: '35831f8f32b083aef384956258f386ebb4de288c' }, h("div", { key: 'fad87eada8cabe36f7cfadc69767bb6251621226', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: 'f2f8a4f600fd5f1f53d54d7dec71578348520f2a', part: "label" }, this.label)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "deactivated": [{
                 "deactivatedChanged": 0
             }],
-        "small": [{
-                "smallChanged": 0
-            }],
         "variation": [{
                 "variationChanged": 0
             }]
@@ -1418,35 +1427,35 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Spinner.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...SPINNER_COLORS),
+    OneOf(SPINNER_COLORS),
     __metadata("design:type", String)
 ], Spinner.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Spinner.prototype, "deactivated", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Spinner.prototype, "inverted", void 0);
 __decorate([
-    ValidateOneOf(...SPINNER_SIZES),
+    OneOf(SPINNER_SIZES),
     __metadata("design:type", String)
 ], Spinner.prototype, "size", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Spinner.prototype, "small", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Spinner.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...SPINNER_LABEL_POSITIONS),
+    OneOf(SPINNER_LABEL_POSITIONS),
     __metadata("design:type", String)
 ], Spinner.prototype, "labelPosition", void 0);
 __decorate([
-    ValidateOneOf(...SPINNER_VARIATIONS),
+    OneOf(SPINNER_VARIATIONS),
     __metadata("design:type", String)
 ], Spinner.prototype, "variation", void 0);
 __decorate([