@eui/eds 23.0.0-alpha.6 → 23.0.0-alpha.7

package/docs/components/EdsIconButton.html

@@ -150,12 +150,12 @@
                 <tr>
                     <td class="col-md-3">HostDirectives</td>
                     <td class="col-md-9">
-                                    <code><a href="../directives/EuiBaseSizeVariantsDirective.html" target="_self" >EuiBaseSizeVariantsDirective</a></code>
+                                    <code><a href="../directives/EdsBaseSizeVariantsDirective.html" target="_self" >EdsBaseSizeVariantsDirective</a></code>
 <br/>
-                                    <div><i>&nbsp;Inputs</i> : euiSize2XS&nbsp;euiSizeXS&nbsp;euiSizeS&nbsp;euiSizeM&nbsp;euiSizeL&nbsp;euiSizeVariant&nbsp;</div>
-                                    <code><a href="../directives/EuiBaseColorVariantsDirective.html" target="_self" >EuiBaseColorVariantsDirective</a></code>
+                                    <div><i>&nbsp;Inputs</i> : edsSize2XS&nbsp;edsSizeXS&nbsp;edsSizeS&nbsp;edsSizeM&nbsp;edsSizeL&nbsp;edsSizeVariant&nbsp;</div>
+                                    <code><a href="../directives/EdsBaseColorVariantsDirective.html" target="_self" >EdsBaseColorVariantsDirective</a></code>
 <br/>
-                                    <div><i>&nbsp;Inputs</i> : euiNeutral&nbsp;euiSuccess&nbsp;euiInfo&nbsp;euiWarning&nbsp;euiCritical&nbsp;euiDisabled&nbsp;euiColorVariant&nbsp;</div>
+                                    <div><i>&nbsp;Inputs</i> : edsBrand&nbsp;edsNeutral&nbsp;edsSuccess&nbsp;edsInfo&nbsp;edsWarning&nbsp;edsCritical&nbsp;edsDisabled&nbsp;edsColorVariant&nbsp;</div>
                     </td>
                 </tr>
 
@@ -225,10 +225,10 @@
                                             <code><a href="../miscellaneous/variables.html#EDS_ICON" target="_self" >EDS_ICON</a></code>
                                 </li>
                                 <li>
-                                            <code><a href="../directives/EuiBaseSizeVariantsDirective.html" target="_self" >EuiBaseSizeVariantsDirective</a></code>
+                                            <code><a href="../directives/EdsBaseSizeVariantsDirective.html" target="_self" >EdsBaseSizeVariantsDirective</a></code>
                                 </li>
                                 <li>
-                                            <code><a href="../directives/EuiBaseColorVariantsDirective.html" target="_self" >EuiBaseColorVariantsDirective</a></code>
+                                            <code><a href="../directives/EdsBaseColorVariantsDirective.html" target="_self" >EdsBaseColorVariantsDirective</a></code>
                                 </li>
                         </ul>
                 </div>
@@ -238,6 +238,23 @@
 
     <div class="tab-pane fade " id="api">    <section data-compodoc="block-index">
     <h3 id="index">Index</h3>
+        <table class="table table-sm table-bordered index-table">
+            <tbody>
+                <tr>
+                    <td class="col-md-3">
+                        <h6><b>Properties</b></h6>
+                    </td>
+                    <td class="col-md-9">
+                        <ul class="index-list">
+                            <li>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
+                                <a href="#hostClasses" >hostClasses</a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
 
         <table class="table table-sm table-bordered index-table">
             <tbody>
@@ -269,10 +286,10 @@
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#ariaLabel" >ariaLabel</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#euiDisabled" >euiDisabled</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsDisabled" >edsDisabled</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#euiRounded" >euiRounded</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsRounded" >edsRounded</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#icon" >icon</a>
@@ -300,41 +317,8 @@
             </tbody>
         </table>
 
-        <table class="table table-sm table-bordered index-table">
-            <tbody>
-                <tr>
-                    <td class="col-md-3">
-                        <h6><b>HostBindings</b></h6>
-                    </td>
-                    <td class="col-md-9">
-                        <ul class="index-list">
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">HB</span><a href="#class" >class</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
 
 
-        <table class="table table-sm table-bordered index-table">
-            <tbody>
-                <tr>
-                    <td class="col-md-3">
-                        <h6><b>Accessors</b></h6>
-                    </td>
-                    <td class="col-md-9">
-                        <ul class="index-list">
-                            <li>
-                                <span class="reference-badge reference-badge--accessor" aria-hidden="true">A</span>
-                                <a href="#cssClasses" >cssClasses</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
 </section>
 
 
@@ -356,13 +340,13 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;eUI Icon button&#x27;</code>
+                        <i>Default value : </i><code>&#x27;EDS Icon button&#x27;</code>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
                         <div class="io-description"><p>Accessible label for screen readers describing the button&#39;s purpose.
-&#39;eUI Icon button&#39;</p>
+&#39;EDS Icon button&#39;</p>
 </div>
                     </td>
                 </tr>
@@ -372,8 +356,8 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="euiDisabled"></a>
-                        <b>euiDisabled</b>
+                        <a name="edsDisabled"></a>
+                        <b>edsDisabled</b>
                     </td>
                 </tr>
                 <tr>
@@ -393,8 +377,8 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="euiRounded"></a>
-                        <b>euiRounded</b>
+                        <a name="edsRounded"></a>
+                        <b>edsRounded</b>
                     </td>
                 </tr>
                 <tr>
@@ -430,6 +414,11 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;&#x27;</code>
+                    </td>
+                </tr>
                 <tr>
                     <td class="col-md-4">
                         <div class="io-description"><p>The name of the icon to display from the eUI icon library.</p>
@@ -452,7 +441,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://angular.dev/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
+                        <i>Type : </i>        <code><a href="https://angular.dev/api/router/Event" target="_blank" >Event</a></code>
 
                     </td>
                 </tr>
@@ -466,29 +455,6 @@
         </table>
 </section>
 
-    <section data-compodoc="block-properties">
-    <h3>HostBindings</h3>    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="class"></a>
-                    <span class="name">
-                        <span ><b>class</b></span>
-                        <a href="#class"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-
-                    </td>
-                </tr>
-
-
-        </tbody>
-    </table>
-</section>
 
 
     <section data-compodoc="block-methods">
@@ -559,29 +525,49 @@
     </table>
 </section>
 
-
-    <section data-compodoc="block-accessors">
-    <h3 id="accessors">
-        Accessors
+    <section data-compodoc="block-properties">
+    
+    <h3 id="inputs">
+        Properties
     </h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="hostClasses"></a>
+                    <span class="name">
+                        <span ><b>hostClasses</b></span>
+                        <a href="#hostClasses"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
                 <tr>
                     <td class="col-md-4">
-                        <a name="cssClasses"></a>
-                        <span class="name"><b>cssClasses</b><a href="#cssClasses"><span class="icon ion-ios-link"></span></a></span>
+                        <i>Type : </i>    <code>unknown</code>
+
                     </td>
                 </tr>
-
                 <tr>
                     <td class="col-md-4">
-                        <span class="accessor"><b>get</b><code>cssClasses()</code></span>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; {
+        return [
+            &#x27;eds-icon-button&#x27;,
+            this.sizeVariantsBase.getCssClasses(&#x27;eds-icon-button&#x27;),
+            this.colorVariantsBase.getCssClasses(&#x27;eds-icon-button&#x27;),
+            this.edsRounded() ? &#x27;eds-icon-button--rounded&#x27;: &#x27;&#x27;,
+            this.edsDisabled() ? &#x27;eds-icon-button--disabled&#x27;: &#x27;&#x27;,
+        ]
+            .join(&#x27; &#x27;)
+            .trim();
+    })</code>
                     </td>
                 </tr>
 
-            </tbody>
-        </table>
+
+        </tbody>
+    </table>
 </section>
+
 </div>
 
 
@@ -596,9 +582,9 @@
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><eds-icon [icon]="icon" [euiColorVariant]="colorVariantsBase.euiColorVariant" [euiSizeVariant]="sizeVariantsBase.euiSizeVariant">    <ng-content select="eui-badge"/></eds-icon></div>'
-    var COMPONENTS = [{'name': 'EdsAlert', 'selector': 'div[edsAlert], eds-alert'},{'name': 'EdsAlertTitle', 'selector': 'eds-alert-title'},{'name': 'EdsAvatar', 'selector': 'div[edsAvatar], span[edsAvatar], eds-avatar'},{'name': 'EdsAvatarBadge', 'selector': 'eds-avatar-badge'},{'name': 'EdsAvatarContent', 'selector': 'eds-avatar-content'},{'name': 'EdsAvatarContentLabel', 'selector': 'eds-avatar-content-label'},{'name': 'EdsAvatarContentSublabel', 'selector': 'eds-avatar-content-sublabel'},{'name': 'EdsAvatarIcon', 'selector': 'eds-avatar-icon'},{'name': 'EdsAvatarImage', 'selector': 'eds-avatar-image'},{'name': 'EdsAvatarList', 'selector': 'eds-avatar-list'},{'name': 'EdsAvatarText', 'selector': 'eds-avatar-text'},{'name': 'EdsBadge', 'selector': 'div[edsBadge], span[edsBadge], eds-badge'},{'name': 'EdsButton', 'selector': 'button[edsButton]'},{'name': 'EdsChip', 'selector': 'eds-chip, span[edsChip], li[edsChip]'},{'name': 'EdsIcon', 'selector': 'eds-icon, span[edsIcon]'},{'name': 'EdsIconButton', 'selector': 'button[edsIconButton]'},{'name': 'EdsIconImage', 'selector': 'eds-icon-image, span[edsIconImage]'},{'name': 'EdsIconState', 'selector': 'eds-icon-state'},{'name': 'EdsTab', 'selector': 'eds-tab'},{'name': 'EdsTabBody', 'selector': 'eds-tab-body'},{'name': 'EdsTabHeader', 'selector': 'eds-tab-header'},{'name': 'EdsTabHeaderLabel', 'selector': 'eds-tab-header-label'},{'name': 'EdsTabHeaderLeftContent', 'selector': 'eds-tab-header-left-content'},{'name': 'EdsTabHeaderRightContent', 'selector': 'eds-tab-header-right-content'},{'name': 'EdsTabHeaderSublabel', 'selector': 'eds-tab-header-sub-label'},{'name': 'EdsTabs', 'selector': 'eds-tabs'},{'name': 'EdsTabsRightContent', 'selector': 'eds-tabs-right-content'},{'name': 'EdsTag', 'selector': 'eds-tag, span[edsTag]'},{'name': 'EdsTooltipContainer', 'selector': 'eds-tooltip-container'}];
-    var DIRECTIVES = [{'name': 'EdsTooltip', 'selector': '[edsTooltip]'},{'name': 'EuiBaseColorVariantsDirective', 'selector': '[euiBaseColorVariants]'},{'name': 'EuiBaseSizeVariantsDirective', 'selector': '[euiBaseSizeVariants]'}];
+        var COMPONENT_TEMPLATE = '<div><eds-icon [icon]="icon()" [edsColorVariant]="colorVariantsBase.edsColorVariant" [edsSizeVariant]="sizeVariantsBase.edsSizeVariant">    <ng-content select="eds-badge"/></eds-icon></div>'
+    var COMPONENTS = [{'name': 'EdsAlert', 'selector': 'div[edsAlert], eds-alert'},{'name': 'EdsAlertTitle', 'selector': 'eds-alert-title'},{'name': 'EdsAvatar', 'selector': 'div[edsAvatar], span[edsAvatar], eds-avatar'},{'name': 'EdsAvatarBadge', 'selector': 'eds-avatar-badge'},{'name': 'EdsAvatarContent', 'selector': 'eds-avatar-content'},{'name': 'EdsAvatarContentLabel', 'selector': 'eds-avatar-content-label'},{'name': 'EdsAvatarContentSublabel', 'selector': 'eds-avatar-content-sublabel'},{'name': 'EdsAvatarIcon', 'selector': 'eds-avatar-icon'},{'name': 'EdsAvatarImage', 'selector': 'eds-avatar-image'},{'name': 'EdsAvatarList', 'selector': 'eds-avatar-list'},{'name': 'EdsAvatarText', 'selector': 'eds-avatar-text'},{'name': 'EdsBadge', 'selector': 'div[edsBadge], span[edsBadge], eds-badge'},{'name': 'EdsButton', 'selector': 'button[edsButton]'},{'name': 'EdsChip', 'selector': 'eds-chip, span[edsChip], li[edsChip]'},{'name': 'EdsIcon', 'selector': 'eds-icon, span[edsIcon]'},{'name': 'EdsIconButton', 'selector': 'button[edsIconButton]'},{'name': 'EdsIconImage', 'selector': 'eds-icon-image, span[edsIconImage]'},{'name': 'EdsIconState', 'selector': 'eds-icon-state'},{'name': 'EdsLanguageSelector', 'selector': 'eds-language-selector'},{'name': 'EdsMenu', 'selector': 'eds-menu'},{'name': 'EdsMenuItemComponent', 'selector': 'eds-menu-item'},{'name': 'EdsOverlay', 'selector': 'eds-overlay'},{'name': 'EdsOverlayContent', 'selector': 'eds-overlay-content'},{'name': 'EdsOverlayFooter', 'selector': 'eds-overlay-footer'},{'name': 'EdsOverlayHeader', 'selector': 'eds-overlay-header'},{'name': 'EdsOverlayHeaderActionItems', 'selector': 'eds-overlay-header-action-items'},{'name': 'EdsOverlayHeaderLabel', 'selector': 'eds-overlay-header-label'},{'name': 'EdsOverlayHeaderSublabel', 'selector': 'eds-overlay-header-sublabel'},{'name': 'EdsPage', 'selector': 'eds-page'},{'name': 'EdsPageContent', 'selector': 'eds-page-content'},{'name': 'EdsPageFooter', 'selector': 'eds-page-footer'},{'name': 'EdsPageHeader', 'selector': 'eds-page-header'},{'name': 'EdsPageHeaderActionItems', 'selector': 'eds-page-header-action-items'},{'name': 'EdsPageHeaderBody', 'selector': 'eds-page-header-body'},{'name': 'EdsPageHeaderLabel', 'selector': 'eds-page-header-label'},{'name': 'EdsPageHeaderSublabel', 'selector': 'eds-page-header-sublabel'},{'name': 'EdsShell', 'selector': 'eds-shell'},{'name': 'EdsShellContent', 'selector': 'eds-shell-content'},{'name': 'EdsShellFooter', 'selector': 'eds-shell-footer'},{'name': 'EdsShellHeader', 'selector': 'eds-shell-header'},{'name': 'EdsShellHeaderApp', 'selector': 'eds-shell-header-app'},{'name': 'EdsShellHeaderEnd', 'selector': 'eds-shell-header-end'},{'name': 'EdsShellHeaderEnvironment', 'selector': 'eds-shell-header-environment'},{'name': 'EdsShellHeaderLogo', 'selector': 'eds-shell-header-logo'},{'name': 'EdsShellHeaderStart', 'selector': 'eds-shell-header-start'},{'name': 'EdsShellMenuToggle', 'selector': 'eds-shell-menu-toggle'},{'name': 'EdsShellSidebar', 'selector': 'eds-shell-sidebar'},{'name': 'EdsShellSidebarBottomNav', 'selector': 'eds-shell-sidebar-bottom-nav'},{'name': 'EdsShellSidebarFooter', 'selector': 'eds-shell-sidebar-footer'},{'name': 'EdsShellSidebarHeader', 'selector': 'eds-shell-sidebar-header'},{'name': 'EdsShellSidebarNav', 'selector': 'eds-shell-sidebar-nav'},{'name': 'EdsShellToolbar', 'selector': 'eds-shell-toolbar'},{'name': 'EdsShellToolbarApp', 'selector': 'eds-shell-toolbar-app'},{'name': 'EdsShellToolbarEnd', 'selector': 'eds-shell-toolbar-end'},{'name': 'EdsShellToolbarEnvironment', 'selector': 'eds-shell-toolbar-environment'},{'name': 'EdsShellToolbarLogo', 'selector': 'eds-shell-toolbar-logo'},{'name': 'EdsShellToolbarStart', 'selector': 'eds-shell-toolbar-start'},{'name': 'EdsShellTopMessage', 'selector': 'eds-shell-top-message'},{'name': 'EdsTab', 'selector': 'eds-tab'},{'name': 'EdsTabBody', 'selector': 'eds-tab-body'},{'name': 'EdsTabHeader', 'selector': 'eds-tab-header'},{'name': 'EdsTabHeaderLabel', 'selector': 'eds-tab-header-label'},{'name': 'EdsTabHeaderLeftContent', 'selector': 'eds-tab-header-left-content'},{'name': 'EdsTabHeaderRightContent', 'selector': 'eds-tab-header-right-content'},{'name': 'EdsTabHeaderSublabel', 'selector': 'eds-tab-header-sub-label'},{'name': 'EdsTabs', 'selector': 'eds-tabs'},{'name': 'EdsTabsRightContent', 'selector': 'eds-tabs-right-content'},{'name': 'EdsTag', 'selector': 'eds-tag, span[edsTag]'},{'name': 'EdsTooltipContainer', 'selector': 'eds-tooltip-container'},{'name': 'EdsUserProfile', 'selector': 'eds-user-profile'},{'name': 'EdsUserProfileMenu', 'selector': 'eds-user-profile-menu'},{'name': 'EdsUserProfileMenuItem', 'selector': 'eds-user-profile-menu-item'}];
+    var DIRECTIVES = [{'name': 'EdsBaseColorVariantsDirective', 'selector': '[edsBaseColorVariants]'},{'name': 'EdsBaseSizeVariantsDirective', 'selector': '[edsBaseSizeVariants]'},{'name': 'EdsResizable', 'selector': '[edsResizable]'},{'name': 'EdsTooltip', 'selector': '[edsTooltip]'}];
     var ACTUAL_COMPONENT = {'name': 'EdsIconButton'};
 </script>
 <script src="../js/tree.js"></script>

package/docs/components/EdsIconImage.html

@@ -160,9 +160,9 @@
                 <tr>
                     <td class="col-md-3">HostDirectives</td>
                     <td class="col-md-9">
-                                    <code><a href="../directives/EuiBaseSizeVariantsDirective.html" target="_self" >EuiBaseSizeVariantsDirective</a></code>
+                                    <code><a href="../directives/EdsBaseSizeVariantsDirective.html" target="_self" >EdsBaseSizeVariantsDirective</a></code>
 <br/>
-                                    <div><i>&nbsp;Inputs</i> : euiSize2XS&nbsp;euiSizeXS&nbsp;euiSizeS&nbsp;euiSizeM&nbsp;euiSizeL&nbsp;euiSizeXL&nbsp;euiSize2XL&nbsp;euiSize3XL&nbsp;euiSize4XL&nbsp;euiSizeVariant&nbsp;</div>
+                                    <div><i>&nbsp;Inputs</i> : edsSize2XS&nbsp;edsSizeXS&nbsp;edsSizeS&nbsp;edsSizeM&nbsp;edsSizeL&nbsp;edsSizeXL&nbsp;edsSize2XL&nbsp;edsSize3XL&nbsp;edsSize4XL&nbsp;edsSizeVariant&nbsp;</div>
                     </td>
                 </tr>
 
@@ -218,7 +218,7 @@
                     <h4>Depends on</h4>
                         <ul class="list-unstyled relationships-list">
                                 <li>
-                                            <code><a href="../directives/EuiBaseSizeVariantsDirective.html" target="_self" >EuiBaseSizeVariantsDirective</a></code>
+                                            <code><a href="../directives/EdsBaseSizeVariantsDirective.html" target="_self" >EdsBaseSizeVariantsDirective</a></code>
                                 </li>
                                 <li>
                                             <code><a href="https://angular.dev/api/core/OnInit" target="_blank" >OnInit</a></code>
@@ -560,8 +560,8 @@ Useful for loading custom or external icons not in configured icon sets.</p>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><svg class="eds-icon-svg-image"        [attr.aria-hidden]="ariaHidden"        [attr.role]="\'img\'">    <image [attr.href]="iconUrl" [class]="\'eds-icon-svg-image\'"></image></svg></div>'
-    var COMPONENTS = [{'name': 'EdsAlert', 'selector': 'div[edsAlert], eds-alert'},{'name': 'EdsAlertTitle', 'selector': 'eds-alert-title'},{'name': 'EdsAvatar', 'selector': 'div[edsAvatar], span[edsAvatar], eds-avatar'},{'name': 'EdsAvatarBadge', 'selector': 'eds-avatar-badge'},{'name': 'EdsAvatarContent', 'selector': 'eds-avatar-content'},{'name': 'EdsAvatarContentLabel', 'selector': 'eds-avatar-content-label'},{'name': 'EdsAvatarContentSublabel', 'selector': 'eds-avatar-content-sublabel'},{'name': 'EdsAvatarIcon', 'selector': 'eds-avatar-icon'},{'name': 'EdsAvatarImage', 'selector': 'eds-avatar-image'},{'name': 'EdsAvatarList', 'selector': 'eds-avatar-list'},{'name': 'EdsAvatarText', 'selector': 'eds-avatar-text'},{'name': 'EdsBadge', 'selector': 'div[edsBadge], span[edsBadge], eds-badge'},{'name': 'EdsButton', 'selector': 'button[edsButton]'},{'name': 'EdsChip', 'selector': 'eds-chip, span[edsChip], li[edsChip]'},{'name': 'EdsIcon', 'selector': 'eds-icon, span[edsIcon]'},{'name': 'EdsIconButton', 'selector': 'button[edsIconButton]'},{'name': 'EdsIconImage', 'selector': 'eds-icon-image, span[edsIconImage]'},{'name': 'EdsIconState', 'selector': 'eds-icon-state'},{'name': 'EdsTab', 'selector': 'eds-tab'},{'name': 'EdsTabBody', 'selector': 'eds-tab-body'},{'name': 'EdsTabHeader', 'selector': 'eds-tab-header'},{'name': 'EdsTabHeaderLabel', 'selector': 'eds-tab-header-label'},{'name': 'EdsTabHeaderLeftContent', 'selector': 'eds-tab-header-left-content'},{'name': 'EdsTabHeaderRightContent', 'selector': 'eds-tab-header-right-content'},{'name': 'EdsTabHeaderSublabel', 'selector': 'eds-tab-header-sub-label'},{'name': 'EdsTabs', 'selector': 'eds-tabs'},{'name': 'EdsTabsRightContent', 'selector': 'eds-tabs-right-content'},{'name': 'EdsTag', 'selector': 'eds-tag, span[edsTag]'},{'name': 'EdsTooltipContainer', 'selector': 'eds-tooltip-container'}];
-    var DIRECTIVES = [{'name': 'EdsTooltip', 'selector': '[edsTooltip]'},{'name': 'EuiBaseColorVariantsDirective', 'selector': '[euiBaseColorVariants]'},{'name': 'EuiBaseSizeVariantsDirective', 'selector': '[euiBaseSizeVariants]'}];
+    var COMPONENTS = [{'name': 'EdsAlert', 'selector': 'div[edsAlert], eds-alert'},{'name': 'EdsAlertTitle', 'selector': 'eds-alert-title'},{'name': 'EdsAvatar', 'selector': 'div[edsAvatar], span[edsAvatar], eds-avatar'},{'name': 'EdsAvatarBadge', 'selector': 'eds-avatar-badge'},{'name': 'EdsAvatarContent', 'selector': 'eds-avatar-content'},{'name': 'EdsAvatarContentLabel', 'selector': 'eds-avatar-content-label'},{'name': 'EdsAvatarContentSublabel', 'selector': 'eds-avatar-content-sublabel'},{'name': 'EdsAvatarIcon', 'selector': 'eds-avatar-icon'},{'name': 'EdsAvatarImage', 'selector': 'eds-avatar-image'},{'name': 'EdsAvatarList', 'selector': 'eds-avatar-list'},{'name': 'EdsAvatarText', 'selector': 'eds-avatar-text'},{'name': 'EdsBadge', 'selector': 'div[edsBadge], span[edsBadge], eds-badge'},{'name': 'EdsButton', 'selector': 'button[edsButton]'},{'name': 'EdsChip', 'selector': 'eds-chip, span[edsChip], li[edsChip]'},{'name': 'EdsIcon', 'selector': 'eds-icon, span[edsIcon]'},{'name': 'EdsIconButton', 'selector': 'button[edsIconButton]'},{'name': 'EdsIconImage', 'selector': 'eds-icon-image, span[edsIconImage]'},{'name': 'EdsIconState', 'selector': 'eds-icon-state'},{'name': 'EdsLanguageSelector', 'selector': 'eds-language-selector'},{'name': 'EdsMenu', 'selector': 'eds-menu'},{'name': 'EdsMenuItemComponent', 'selector': 'eds-menu-item'},{'name': 'EdsOverlay', 'selector': 'eds-overlay'},{'name': 'EdsOverlayContent', 'selector': 'eds-overlay-content'},{'name': 'EdsOverlayFooter', 'selector': 'eds-overlay-footer'},{'name': 'EdsOverlayHeader', 'selector': 'eds-overlay-header'},{'name': 'EdsOverlayHeaderActionItems', 'selector': 'eds-overlay-header-action-items'},{'name': 'EdsOverlayHeaderLabel', 'selector': 'eds-overlay-header-label'},{'name': 'EdsOverlayHeaderSublabel', 'selector': 'eds-overlay-header-sublabel'},{'name': 'EdsPage', 'selector': 'eds-page'},{'name': 'EdsPageContent', 'selector': 'eds-page-content'},{'name': 'EdsPageFooter', 'selector': 'eds-page-footer'},{'name': 'EdsPageHeader', 'selector': 'eds-page-header'},{'name': 'EdsPageHeaderActionItems', 'selector': 'eds-page-header-action-items'},{'name': 'EdsPageHeaderBody', 'selector': 'eds-page-header-body'},{'name': 'EdsPageHeaderLabel', 'selector': 'eds-page-header-label'},{'name': 'EdsPageHeaderSublabel', 'selector': 'eds-page-header-sublabel'},{'name': 'EdsShell', 'selector': 'eds-shell'},{'name': 'EdsShellContent', 'selector': 'eds-shell-content'},{'name': 'EdsShellFooter', 'selector': 'eds-shell-footer'},{'name': 'EdsShellHeader', 'selector': 'eds-shell-header'},{'name': 'EdsShellHeaderApp', 'selector': 'eds-shell-header-app'},{'name': 'EdsShellHeaderEnd', 'selector': 'eds-shell-header-end'},{'name': 'EdsShellHeaderEnvironment', 'selector': 'eds-shell-header-environment'},{'name': 'EdsShellHeaderLogo', 'selector': 'eds-shell-header-logo'},{'name': 'EdsShellHeaderStart', 'selector': 'eds-shell-header-start'},{'name': 'EdsShellMenuToggle', 'selector': 'eds-shell-menu-toggle'},{'name': 'EdsShellSidebar', 'selector': 'eds-shell-sidebar'},{'name': 'EdsShellSidebarBottomNav', 'selector': 'eds-shell-sidebar-bottom-nav'},{'name': 'EdsShellSidebarFooter', 'selector': 'eds-shell-sidebar-footer'},{'name': 'EdsShellSidebarHeader', 'selector': 'eds-shell-sidebar-header'},{'name': 'EdsShellSidebarNav', 'selector': 'eds-shell-sidebar-nav'},{'name': 'EdsShellToolbar', 'selector': 'eds-shell-toolbar'},{'name': 'EdsShellToolbarApp', 'selector': 'eds-shell-toolbar-app'},{'name': 'EdsShellToolbarEnd', 'selector': 'eds-shell-toolbar-end'},{'name': 'EdsShellToolbarEnvironment', 'selector': 'eds-shell-toolbar-environment'},{'name': 'EdsShellToolbarLogo', 'selector': 'eds-shell-toolbar-logo'},{'name': 'EdsShellToolbarStart', 'selector': 'eds-shell-toolbar-start'},{'name': 'EdsShellTopMessage', 'selector': 'eds-shell-top-message'},{'name': 'EdsTab', 'selector': 'eds-tab'},{'name': 'EdsTabBody', 'selector': 'eds-tab-body'},{'name': 'EdsTabHeader', 'selector': 'eds-tab-header'},{'name': 'EdsTabHeaderLabel', 'selector': 'eds-tab-header-label'},{'name': 'EdsTabHeaderLeftContent', 'selector': 'eds-tab-header-left-content'},{'name': 'EdsTabHeaderRightContent', 'selector': 'eds-tab-header-right-content'},{'name': 'EdsTabHeaderSublabel', 'selector': 'eds-tab-header-sub-label'},{'name': 'EdsTabs', 'selector': 'eds-tabs'},{'name': 'EdsTabsRightContent', 'selector': 'eds-tabs-right-content'},{'name': 'EdsTag', 'selector': 'eds-tag, span[edsTag]'},{'name': 'EdsTooltipContainer', 'selector': 'eds-tooltip-container'},{'name': 'EdsUserProfile', 'selector': 'eds-user-profile'},{'name': 'EdsUserProfileMenu', 'selector': 'eds-user-profile-menu'},{'name': 'EdsUserProfileMenuItem', 'selector': 'eds-user-profile-menu-item'}];
+    var DIRECTIVES = [{'name': 'EdsBaseColorVariantsDirective', 'selector': '[edsBaseColorVariants]'},{'name': 'EdsBaseSizeVariantsDirective', 'selector': '[edsBaseSizeVariants]'},{'name': 'EdsResizable', 'selector': '[edsResizable]'},{'name': 'EdsTooltip', 'selector': '[edsTooltip]'}];
     var ACTUAL_COMPONENT = {'name': 'EdsIconImage'};
 </script>
 <script src="../js/tree.js"></script>

package/docs/components/EdsIconState.html

@@ -150,17 +150,21 @@
                 <tr>
                     <td class="col-md-3">HostDirectives</td>
                     <td class="col-md-9">
-                                    <code><a href="../directives/EuiBaseSizeVariantsDirective.html" target="_self" >EuiBaseSizeVariantsDirective</a></code>
+                                    <code><a href="../directives/EdsBaseSizeVariantsDirective.html" target="_self" >EdsBaseSizeVariantsDirective</a></code>
 <br/>
-                                    <div><i>&nbsp;Inputs</i> : euiSize2XS&nbsp;euiSizeXS&nbsp;euiSizeS&nbsp;euiSizeM&nbsp;euiSizeL&nbsp;euiSizeVariant&nbsp;</div>
-                                    <code><a href="../directives/EuiBaseColorVariantsDirective.html" target="_self" >EuiBaseColorVariantsDirective</a></code>
+                                    <div><i>&nbsp;Inputs</i> : edsSize2XS&nbsp;edsSizeXS&nbsp;edsSizeS&nbsp;edsSizeM&nbsp;edsSizeL&nbsp;edsSizeVariant&nbsp;</div>
+                                    <code><a href="../directives/EdsBaseColorVariantsDirective.html" target="_self" >EdsBaseColorVariantsDirective</a></code>
 <br/>
-                                    <div><i>&nbsp;Inputs</i> : euiNeutral&nbsp;euiSuccess&nbsp;euiInfo&nbsp;euiWarning&nbsp;euiCritical&nbsp;euiColorVariant&nbsp;</div>
+                                    <div><i>&nbsp;Inputs</i> : edsNeutral&nbsp;edsSuccess&nbsp;edsInfo&nbsp;edsWarning&nbsp;edsCritical&nbsp;edsColorVariant&nbsp;</div>
                     </td>
                 </tr>
 
 
 
+            <tr>
+                <td class="col-md-3">host</td>
+                <td class="col-md-9"><code>{<br>}</code></td>
+            </tr>
 
 
 
@@ -217,10 +221,10 @@
                                             <code><a href="../miscellaneous/variables.html#EDS_ICON" target="_self" >EDS_ICON</a></code>
                                 </li>
                                 <li>
-                                            <code><a href="../directives/EuiBaseSizeVariantsDirective.html" target="_self" >EuiBaseSizeVariantsDirective</a></code>
+                                            <code><a href="../directives/EdsBaseSizeVariantsDirective.html" target="_self" >EdsBaseSizeVariantsDirective</a></code>
                                 </li>
                                 <li>
-                                            <code><a href="../directives/EuiBaseColorVariantsDirective.html" target="_self" >EuiBaseColorVariantsDirective</a></code>
+                                            <code><a href="../directives/EdsBaseColorVariantsDirective.html" target="_self" >EdsBaseColorVariantsDirective</a></code>
                                 </li>
                         </ul>
                 </div>
@@ -230,18 +234,17 @@
 
     <div class="tab-pane fade " id="api">    <section data-compodoc="block-index">
     <h3 id="index">Index</h3>
-
-
         <table class="table table-sm table-bordered index-table">
             <tbody>
                 <tr>
                     <td class="col-md-3">
-                        <h6><b>Inputs</b></h6>
+                        <h6><b>Properties</b></h6>
                     </td>
                     <td class="col-md-9">
                         <ul class="index-list">
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#ariaLabel" >ariaLabel</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
+                                <a href="#hostClasses" >hostClasses</a>
                             </li>
                         </ul>
                     </td>
@@ -254,12 +257,12 @@
             <tbody>
                 <tr>
                     <td class="col-md-3">
-                        <h6><b>HostBindings</b></h6>
+                        <h6><b>Inputs</b></h6>
                     </td>
                     <td class="col-md-9">
                         <ul class="index-list">
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">HB</span><a href="#class" >class</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#ariaLabel" >ariaLabel</a>
                             </li>
                         </ul>
                     </td>
@@ -268,23 +271,8 @@
         </table>
 
 
-        <table class="table table-sm table-bordered index-table">
-            <tbody>
-                <tr>
-                    <td class="col-md-3">
-                        <h6><b>Accessors</b></h6>
-                    </td>
-                    <td class="col-md-9">
-                        <ul class="index-list">
-                            <li>
-                                <span class="reference-badge reference-badge--accessor" aria-hidden="true">A</span>
-                                <a href="#cssClasses" >cssClasses</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+
+
 </section>
 
 
@@ -304,6 +292,11 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;&#x27;</code>
+                    </td>
+                </tr>
                 <tr>
                     <td class="col-md-4">
                         <div class="io-description"><p>Accessible label for screen readers describing the icon&#39;s purpose or meaning.
@@ -316,55 +309,48 @@ Required for accessibility when the icon conveys semantic information.</p>
 </section>
 
 
+
+
+
     <section data-compodoc="block-properties">
-    <h3>HostBindings</h3>    <table class="table table-sm table-bordered">
+    
+    <h3 id="inputs">
+        Properties
+    </h3>
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="class"></a>
+                    <a name="hostClasses"></a>
                     <span class="name">
-                        <span ><b>class</b></span>
-                        <a href="#class"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>hostClasses</b></span>
+                        <a href="#hostClasses"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>    <code>unknown</code>
 
                     </td>
                 </tr>
-
-
-        </tbody>
-    </table>
-</section>
-
-
-
-
-    <section data-compodoc="block-accessors">
-    <h3 id="accessors">
-        Accessors
-    </h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="cssClasses"></a>
-                        <span class="name"><b>cssClasses</b><a href="#cssClasses"><span class="icon ion-ios-link"></span></a></span>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; {
+        return [
+            &#x27;eds-icon-state&#x27;,
+            this.sizeVariantsBase.getCssClasses(&#x27;eds-icon-state&#x27;),
+            this.colorVariantsBase.getCssClasses(&#x27;eds-icon-state&#x27;),
+        ].join(&#x27; &#x27;).trim();
+    })</code>
                     </td>
                 </tr>
 
-                <tr>
-                    <td class="col-md-4">
-                        <span class="accessor"><b>get</b><code>cssClasses()</code></span>
-                    </td>
-                </tr>
 
-            </tbody>
-        </table>
+        </tbody>
+    </table>
 </section>
+
 </div>
 
 
@@ -379,9 +365,9 @@ Required for accessibility when the icon conveys semantic information.</p>
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div>@if (colorVariantsBase.euiSuccess) {    <eds-icon icon="check-circle" aria-label="eUI success icon" euiSuccess [euiSizeVariant]="sizeVariantsBase.euiSizeVariant" />} @else if (colorVariantsBase.euiWarning) {    <eds-icon icon="warning" aria-label="eUI warning icon" euiWarning [euiSizeVariant]="sizeVariantsBase.euiSizeVariant" />} @else if (colorVariantsBase.euiCritical) {    <eds-icon icon="warning-circle" aria-label="eUI danger icon" euiCritical [euiSizeVariant]="sizeVariantsBase.euiSizeVariant" />} @else if (colorVariantsBase.euiInfo) {    <eds-icon icon="info" aria-label="eUI info icon" euiInfo [euiSizeVariant]="sizeVariantsBase.euiSizeVariant" />}</div>'
-    var COMPONENTS = [{'name': 'EdsAlert', 'selector': 'div[edsAlert], eds-alert'},{'name': 'EdsAlertTitle', 'selector': 'eds-alert-title'},{'name': 'EdsAvatar', 'selector': 'div[edsAvatar], span[edsAvatar], eds-avatar'},{'name': 'EdsAvatarBadge', 'selector': 'eds-avatar-badge'},{'name': 'EdsAvatarContent', 'selector': 'eds-avatar-content'},{'name': 'EdsAvatarContentLabel', 'selector': 'eds-avatar-content-label'},{'name': 'EdsAvatarContentSublabel', 'selector': 'eds-avatar-content-sublabel'},{'name': 'EdsAvatarIcon', 'selector': 'eds-avatar-icon'},{'name': 'EdsAvatarImage', 'selector': 'eds-avatar-image'},{'name': 'EdsAvatarList', 'selector': 'eds-avatar-list'},{'name': 'EdsAvatarText', 'selector': 'eds-avatar-text'},{'name': 'EdsBadge', 'selector': 'div[edsBadge], span[edsBadge], eds-badge'},{'name': 'EdsButton', 'selector': 'button[edsButton]'},{'name': 'EdsChip', 'selector': 'eds-chip, span[edsChip], li[edsChip]'},{'name': 'EdsIcon', 'selector': 'eds-icon, span[edsIcon]'},{'name': 'EdsIconButton', 'selector': 'button[edsIconButton]'},{'name': 'EdsIconImage', 'selector': 'eds-icon-image, span[edsIconImage]'},{'name': 'EdsIconState', 'selector': 'eds-icon-state'},{'name': 'EdsTab', 'selector': 'eds-tab'},{'name': 'EdsTabBody', 'selector': 'eds-tab-body'},{'name': 'EdsTabHeader', 'selector': 'eds-tab-header'},{'name': 'EdsTabHeaderLabel', 'selector': 'eds-tab-header-label'},{'name': 'EdsTabHeaderLeftContent', 'selector': 'eds-tab-header-left-content'},{'name': 'EdsTabHeaderRightContent', 'selector': 'eds-tab-header-right-content'},{'name': 'EdsTabHeaderSublabel', 'selector': 'eds-tab-header-sub-label'},{'name': 'EdsTabs', 'selector': 'eds-tabs'},{'name': 'EdsTabsRightContent', 'selector': 'eds-tabs-right-content'},{'name': 'EdsTag', 'selector': 'eds-tag, span[edsTag]'},{'name': 'EdsTooltipContainer', 'selector': 'eds-tooltip-container'}];
-    var DIRECTIVES = [{'name': 'EdsTooltip', 'selector': '[edsTooltip]'},{'name': 'EuiBaseColorVariantsDirective', 'selector': '[euiBaseColorVariants]'},{'name': 'EuiBaseSizeVariantsDirective', 'selector': '[euiBaseSizeVariants]'}];
+        var COMPONENT_TEMPLATE = '<div>@if (colorVariantsBase.edsSuccess) {    <eds-icon icon="check-circle" aria-label="EDS success icon" edsSuccess [edsSizeVariant]="sizeVariantsBase.edsSizeVariant" />} @else if (colorVariantsBase.edsWarning) {    <eds-icon icon="warning" aria-label="EDS warning icon" edsWarning [edsSizeVariant]="sizeVariantsBase.edsSizeVariant" />} @else if (colorVariantsBase.edsCritical) {    <eds-icon icon="warning-circle" aria-label="EDS danger icon" edsCritical [edsSizeVariant]="sizeVariantsBase.edsSizeVariant" />} @else if (colorVariantsBase.edsInfo) {    <eds-icon icon="info" aria-label="EDS info icon" edsInfo [edsSizeVariant]="sizeVariantsBase.edsSizeVariant" />}</div>'
+    var COMPONENTS = [{'name': 'EdsAlert', 'selector': 'div[edsAlert], eds-alert'},{'name': 'EdsAlertTitle', 'selector': 'eds-alert-title'},{'name': 'EdsAvatar', 'selector': 'div[edsAvatar], span[edsAvatar], eds-avatar'},{'name': 'EdsAvatarBadge', 'selector': 'eds-avatar-badge'},{'name': 'EdsAvatarContent', 'selector': 'eds-avatar-content'},{'name': 'EdsAvatarContentLabel', 'selector': 'eds-avatar-content-label'},{'name': 'EdsAvatarContentSublabel', 'selector': 'eds-avatar-content-sublabel'},{'name': 'EdsAvatarIcon', 'selector': 'eds-avatar-icon'},{'name': 'EdsAvatarImage', 'selector': 'eds-avatar-image'},{'name': 'EdsAvatarList', 'selector': 'eds-avatar-list'},{'name': 'EdsAvatarText', 'selector': 'eds-avatar-text'},{'name': 'EdsBadge', 'selector': 'div[edsBadge], span[edsBadge], eds-badge'},{'name': 'EdsButton', 'selector': 'button[edsButton]'},{'name': 'EdsChip', 'selector': 'eds-chip, span[edsChip], li[edsChip]'},{'name': 'EdsIcon', 'selector': 'eds-icon, span[edsIcon]'},{'name': 'EdsIconButton', 'selector': 'button[edsIconButton]'},{'name': 'EdsIconImage', 'selector': 'eds-icon-image, span[edsIconImage]'},{'name': 'EdsIconState', 'selector': 'eds-icon-state'},{'name': 'EdsLanguageSelector', 'selector': 'eds-language-selector'},{'name': 'EdsMenu', 'selector': 'eds-menu'},{'name': 'EdsMenuItemComponent', 'selector': 'eds-menu-item'},{'name': 'EdsOverlay', 'selector': 'eds-overlay'},{'name': 'EdsOverlayContent', 'selector': 'eds-overlay-content'},{'name': 'EdsOverlayFooter', 'selector': 'eds-overlay-footer'},{'name': 'EdsOverlayHeader', 'selector': 'eds-overlay-header'},{'name': 'EdsOverlayHeaderActionItems', 'selector': 'eds-overlay-header-action-items'},{'name': 'EdsOverlayHeaderLabel', 'selector': 'eds-overlay-header-label'},{'name': 'EdsOverlayHeaderSublabel', 'selector': 'eds-overlay-header-sublabel'},{'name': 'EdsPage', 'selector': 'eds-page'},{'name': 'EdsPageContent', 'selector': 'eds-page-content'},{'name': 'EdsPageFooter', 'selector': 'eds-page-footer'},{'name': 'EdsPageHeader', 'selector': 'eds-page-header'},{'name': 'EdsPageHeaderActionItems', 'selector': 'eds-page-header-action-items'},{'name': 'EdsPageHeaderBody', 'selector': 'eds-page-header-body'},{'name': 'EdsPageHeaderLabel', 'selector': 'eds-page-header-label'},{'name': 'EdsPageHeaderSublabel', 'selector': 'eds-page-header-sublabel'},{'name': 'EdsShell', 'selector': 'eds-shell'},{'name': 'EdsShellContent', 'selector': 'eds-shell-content'},{'name': 'EdsShellFooter', 'selector': 'eds-shell-footer'},{'name': 'EdsShellHeader', 'selector': 'eds-shell-header'},{'name': 'EdsShellHeaderApp', 'selector': 'eds-shell-header-app'},{'name': 'EdsShellHeaderEnd', 'selector': 'eds-shell-header-end'},{'name': 'EdsShellHeaderEnvironment', 'selector': 'eds-shell-header-environment'},{'name': 'EdsShellHeaderLogo', 'selector': 'eds-shell-header-logo'},{'name': 'EdsShellHeaderStart', 'selector': 'eds-shell-header-start'},{'name': 'EdsShellMenuToggle', 'selector': 'eds-shell-menu-toggle'},{'name': 'EdsShellSidebar', 'selector': 'eds-shell-sidebar'},{'name': 'EdsShellSidebarBottomNav', 'selector': 'eds-shell-sidebar-bottom-nav'},{'name': 'EdsShellSidebarFooter', 'selector': 'eds-shell-sidebar-footer'},{'name': 'EdsShellSidebarHeader', 'selector': 'eds-shell-sidebar-header'},{'name': 'EdsShellSidebarNav', 'selector': 'eds-shell-sidebar-nav'},{'name': 'EdsShellToolbar', 'selector': 'eds-shell-toolbar'},{'name': 'EdsShellToolbarApp', 'selector': 'eds-shell-toolbar-app'},{'name': 'EdsShellToolbarEnd', 'selector': 'eds-shell-toolbar-end'},{'name': 'EdsShellToolbarEnvironment', 'selector': 'eds-shell-toolbar-environment'},{'name': 'EdsShellToolbarLogo', 'selector': 'eds-shell-toolbar-logo'},{'name': 'EdsShellToolbarStart', 'selector': 'eds-shell-toolbar-start'},{'name': 'EdsShellTopMessage', 'selector': 'eds-shell-top-message'},{'name': 'EdsTab', 'selector': 'eds-tab'},{'name': 'EdsTabBody', 'selector': 'eds-tab-body'},{'name': 'EdsTabHeader', 'selector': 'eds-tab-header'},{'name': 'EdsTabHeaderLabel', 'selector': 'eds-tab-header-label'},{'name': 'EdsTabHeaderLeftContent', 'selector': 'eds-tab-header-left-content'},{'name': 'EdsTabHeaderRightContent', 'selector': 'eds-tab-header-right-content'},{'name': 'EdsTabHeaderSublabel', 'selector': 'eds-tab-header-sub-label'},{'name': 'EdsTabs', 'selector': 'eds-tabs'},{'name': 'EdsTabsRightContent', 'selector': 'eds-tabs-right-content'},{'name': 'EdsTag', 'selector': 'eds-tag, span[edsTag]'},{'name': 'EdsTooltipContainer', 'selector': 'eds-tooltip-container'},{'name': 'EdsUserProfile', 'selector': 'eds-user-profile'},{'name': 'EdsUserProfileMenu', 'selector': 'eds-user-profile-menu'},{'name': 'EdsUserProfileMenuItem', 'selector': 'eds-user-profile-menu-item'}];
+    var DIRECTIVES = [{'name': 'EdsBaseColorVariantsDirective', 'selector': '[edsBaseColorVariants]'},{'name': 'EdsBaseSizeVariantsDirective', 'selector': '[edsBaseSizeVariants]'},{'name': 'EdsResizable', 'selector': '[edsResizable]'},{'name': 'EdsTooltip', 'selector': '[edsTooltip]'}];
     var ACTUAL_COMPONENT = {'name': 'EdsIconState'};
 </script>
 <script src="../js/tree.js"></script>