@eui/eds 22.0.0-alpha.22 → 22.0.0-alpha.24

package/docs/changelog.html

@@ -106,6 +106,68 @@
 
 
 
+<h2>22.0.0-alpha.23 (2026-09-25)</h2>
+<h5>Chores</h5>
+<ul>
+<li><strong>other:</strong><ul>
+<li>updated components registry for all showcases - EUI-12528 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12528">EUI-12528</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/202e3c22e4fc58b090174e79b80b91095e5eddfc">202e3c22</a>)</li>
+<li>adapt central components registry  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/9437129d563bd95b641bbc3aede2d9bbc80ded6d">9437129d</a>)</li>
+</ul>
+</li>
+</ul>
+<hr>
+<hr>
+<h2>22.0.0-alpha.22 (2026-09-25)</h2>
+<h5>Chores</h5>
+<ul>
+<li><strong>ecl-pagination:</strong><ul>
+<li>added tests + hostbindings moved + signals EUI-12923 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12923">EUI-12923</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/ddee1402b0a7aaf5d67f22744e24f8bfc2307b3a">ddee1402</a>)</li>
+</ul>
+</li>
+<li><strong>cli:</strong><ul>
+<li>add React skeletons and eui-cli option - updated docs - EUI-12528 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12528">EUI-12528</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/e3fdb24c54afba3673c9a9df01d183c34f3416ab">e3fdb24c</a>)</li>
+</ul>
+</li>
+<li><strong>other:</strong><ul>
+<li>updated .gitignore - EUI-12528 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12528">EUI-12528</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/4be36b7c75d510949d8e65fda1e464543cf3801e">4be36b7c</a>)</li>
+<li>cleanup generated files  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/808cf865fe6883c0aeadf87aea947119434cff46">808cf865</a>)</li>
+</ul>
+</li>
+<li><strong>eds:</strong><ul>
+<li>adapted react showcases view code extraction - EUI-12528 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12528">EUI-12528</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/5ae030580f2fbca080be2e06f5e3afdb1dfb8536">5ae03058</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-page-summary:</strong><ul>
+<li>added test and remove deprecated selector EUI-12922 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12922">EUI-12922</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/511175cb53c806ec4cdb149379e279e61c98f723">511175cb</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-page-information:</strong><ul>
+<li>added test EUI-12921 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12921">EUI-12921</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/9c3c08297fd74dee3e7b2dd12fb4a70f6aa92786">9c3c0829</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-page-header:</strong><ul>
+<li>added tests and migrated host bindings EUI-12920 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12920">EUI-12920</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/f612f3fd0762b396e1f92b7fc76756116d969c48">f612f3fd</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-notification:</strong><ul>
+<li>added tests EUI-12916 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12916">EUI-12916</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/b11d086cdf6750b7871fdfff90f9bdf1e63f5dd2">b11d086c</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-news-ticker:</strong><ul>
+<li>added tests + some fixes EUI-12915 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12915">EUI-12915</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/90e8295ec8727392728a166590f3048b42836e75">90e8295e</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-navigation-list:</strong><ul>
+<li>added test + some fixes EUI-12914 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12914">EUI-12914</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/59ff0ef0fa46bc7fec45f6698c18fadff3b8f6ea">59ff0ef0</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-multiselect:</strong><ul>
+<li>added tests + some small fixes EUI-12910 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12910">EUI-12910</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/48741baea6857b51e93649b1778cbb6d1c452429">48741bae</a>)</li>
+</ul>
+</li>
+</ul>
+<hr>
+<hr>
 <h2>22.0.0-alpha.21 (2026-09-24)</h2>
 <h5>Chores</h5>
 <ul>

package/docs/components/EdsButton.html

@@ -141,12 +141,13 @@
     </p>
     <p class="comment">
         <p>EDS Button — a directive-style button component applied on native <code>&lt;button&gt;</code> elements.</p>
-<p>Supports multiple visual types (primary, secondary, tertiary), color variants
-(primary, neutral, highlight, critical), and sizes (s, m, l) via host directives.</p>
+<p>Supports multiple visual types (primary, secondary, tertiary), semantic color variants
+(primary, neutral, highlight, critical), and sizes (s, m, l) via string inputs reflected
+as host attributes.</p>
 <p>Usage:</p>
-<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button edsButton edsSizeM edsPrimary&gt;Label&lt;/button&gt;
-&lt;button edsButton edsButtonSecondary edsNeutral edsSizeS&gt;Cancel&lt;/button&gt;
-&lt;button edsButton edsButtonTertiary edsCritical [edsDisabled]=&quot;isLoading&quot;&gt;Delete&lt;/button&gt;</code></pre></div>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button edsButton size=&quot;m&quot; color=&quot;primary&quot;&gt;Label&lt;/button&gt;
+&lt;button edsButton type=&quot;secondary&quot; color=&quot;neutral&quot; size=&quot;s&quot;&gt;Cancel&lt;/button&gt;
+&lt;button edsButton type=&quot;tertiary&quot; color=&quot;critical&quot; [disabled]=&quot;isLoading&quot;&gt;Delete&lt;/button&gt;</code></pre></div>
     </p>
 
 
@@ -168,17 +169,6 @@
             </tr>
 
 
-                <tr>
-                    <td class="col-md-3">HostDirectives</td>
-                    <td class="col-md-9">
-                                    <code><a href="../directives/EdsSizeDirective.html" target="_self" >EdsSizeDirective</a></code>
-<br/>
-                                    <div><i>&nbsp;Inputs</i> : edsSizeS&nbsp;edsSizeM&nbsp;edsSizeL&nbsp;edsSizeVariant&nbsp;</div>
-                                    <code><a href="../directives/EdsColorDirective.html" target="_self" >EdsColorDirective</a></code>
-<br/>
-                                    <div><i>&nbsp;Inputs</i> : edsPrimary&nbsp;edsNeutral&nbsp;edsHighlight&nbsp;edsCritical&nbsp;edsColorVariant&nbsp;</div>
-                    </td>
-                </tr>
 
 
 
@@ -227,49 +217,10 @@
     </table>
 </section>
 
-        <section data-compodoc="block-relationships">
-            <h3>Relationships</h3>
-
-            <div class="row pt-3">
-                <div class="col-sm-6">
-                    <h4>Used by</h4>
-                        <p class="comment"><i>No results matching.</i></p>
-                </div>
-
-                <div class="col-sm-6">
-                    <h4>Depends on</h4>
-                        <ul class="list-unstyled relationships-list">
-                                <li>
-                                            <code><a href="../directives/EdsSizeDirective.html" target="_self" >EdsSizeDirective</a></code>
-                                </li>
-                                <li>
-                                            <code><a href="../directives/EdsColorDirective.html" target="_self" >EdsColorDirective</a></code>
-                                </li>
-                        </ul>
-                </div>
-            </div>
-        </section>
 </div>
 
     <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">
@@ -281,43 +232,40 @@
                     <td class="col-md-9">
                         <ul class="index-list">
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#e2eAttr" >e2eAttr</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsAvatarButton" >edsAvatarButton</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#avatarButton" >avatarButton</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsBlockButton" >edsBlockButton</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#block" >block</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsButtonPrimary" >edsButtonPrimary</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#color" >color</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsButtonRounded" >edsButtonRounded</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#disabled" >disabled</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsButtonSecondary" >edsButtonSecondary</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#e2eAttr" >e2eAttr</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsButtonTertiary" >edsButtonTertiary</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#iconButton" >iconButton</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsDisabled" >edsDisabled</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#id" >id</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsIconButton" >edsIconButton</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#isChecked" >isChecked</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsLineWrap" >edsLineWrap</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#lineWrap" >lineWrap</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#edsTypeVariant" >edsTypeVariant</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#rounded" >rounded</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#id" >id</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#size" >size</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#isChecked" >isChecked</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#variant" >variant</a>
                             </li>
                         </ul>
                     </td>
@@ -337,36 +285,8 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="e2eAttr"></a>
-                        <b>e2eAttr</b>
-                    </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>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;eds-button&#x27;</code>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <div class="io-description"><p>Data attribute for e2e testing
-eds-button</p>
-</div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="edsAvatarButton"></a>
-                        <b>edsAvatarButton</b>
+                        <a name="avatarButton"></a>
+                        <b>avatarButton</b>
                     </td>
                 </tr>
                 <tr>
@@ -382,7 +302,8 @@ eds-button</p>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>When true, style the button when used in avatar trigger (for dropdown trigger f.e. see actionable avatar).
+                        <div class="io-description"><p>When true, styles the button when used in an avatar trigger
+(e.g. dropdown trigger, see actionable avatar).
 false</p>
 </div>
                     </td>
@@ -393,8 +314,8 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsBlockButton"></a>
-                        <b>edsBlockButton</b>
+                        <a name="block"></a>
+                        <b>block</b>
                     </td>
                 </tr>
                 <tr>
@@ -421,24 +342,25 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsButtonPrimary"></a>
-                        <b>edsButtonPrimary</b>
+                        <a name="color"></a>
+                        <b>color</b>
                     </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/boolean" target="_blank" >boolean</a></code>
+                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#EdsButtonColor" target="_self" >EdsButtonColor</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
+                        <i>Default value : </i><code>&#x27;primary&#x27;</code>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Boolean shorthand: primary type (default).</p>
+                        <div class="io-description"><p>Semantic color of the button.
+&#39;primary&#39;</p>
 </div>
                     </td>
                 </tr>
@@ -448,8 +370,8 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsButtonRounded"></a>
-                        <b>edsButtonRounded</b>
+                        <a name="disabled"></a>
+                        <b>disabled</b>
                     </td>
                 </tr>
                 <tr>
@@ -465,7 +387,9 @@ false</p>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Boolean shorthand: fully rounded border-radius.</p>
+                        <div class="io-description"><p>Controls the disabled state of the button.
+When true, adds the disabled attribute and prevents interaction.
+false</p>
 </div>
                     </td>
                 </tr>
@@ -475,24 +399,25 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsButtonSecondary"></a>
-                        <b>edsButtonSecondary</b>
+                        <a name="e2eAttr"></a>
+                        <b>e2eAttr</b>
                     </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/boolean" target="_blank" >boolean</a></code>
+                        <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>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
+                        <i>Default value : </i><code>&#x27;eds-button&#x27;</code>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Boolean shorthand: secondary type.</p>
+                        <div class="io-description"><p>Data attribute for e2e testing
+eds-button</p>
 </div>
                     </td>
                 </tr>
@@ -502,8 +427,8 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsButtonTertiary"></a>
-                        <b>edsButtonTertiary</b>
+                        <a name="iconButton"></a>
+                        <b>iconButton</b>
                     </td>
                 </tr>
                 <tr>
@@ -519,7 +444,8 @@ false</p>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Boolean shorthand: tertiary type.</p>
+                        <div class="io-description"><p>When true, styles the button for icon-only content.
+false</p>
 </div>
                     </td>
                 </tr>
@@ -529,26 +455,24 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsDisabled"></a>
-                        <b>edsDisabled</b>
+                        <a name="id"></a>
+                        <b>id</b>
                     </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/boolean" target="_blank" >boolean</a></code>
+                        <i>Type : </i>    <code>string | undefined</code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
+                        <i>Default value : </i><code>undefined</code>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Controls the disabled state of the button.
-When true, adds the disabled attribute and prevents interaction.
-false</p>
+                        <div class="io-description"><p>ID attribute for the button element</p>
 </div>
                     </td>
                 </tr>
@@ -558,8 +482,8 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsIconButton"></a>
-                        <b>edsIconButton</b>
+                        <a name="isChecked"></a>
+                        <b>isChecked</b>
                     </td>
                 </tr>
                 <tr>
@@ -575,7 +499,8 @@ false</p>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>When true, styles the button for icon-only content.
+                        <div class="io-description"><p>When true, marks the button as initially checked/selected within an eds-button-group.
+The button-group reads this value during initialization to determine the initial selection state.
 false</p>
 </div>
                     </td>
@@ -586,8 +511,8 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsLineWrap"></a>
-                        <b>edsLineWrap</b>
+                        <a name="lineWrap"></a>
+                        <b>lineWrap</b>
                     </td>
                 </tr>
                 <tr>
@@ -614,24 +539,25 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="edsTypeVariant"></a>
-                        <b>edsTypeVariant</b>
+                        <a name="rounded"></a>
+                        <b>rounded</b>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#EdsButtonType" target="_self" >EdsButtonType</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;primary&#x27;</code>
+                        <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>String-based type variant for dynamic binding.</p>
+                        <div class="io-description"><p>When true, applies a fully rounded border-radius.
+false</p>
 </div>
                     </td>
                 </tr>
@@ -641,24 +567,25 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="id"></a>
-                        <b>id</b>
+                        <a name="size"></a>
+                        <b>size</b>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>string | undefined</code>
+                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#EdsButtonSize" target="_self" >EdsButtonSize</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>undefined</code>
+                        <i>Default value : </i><code>&#x27;m&#x27;</code>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>ID attribute for the button element</p>
+                        <div class="io-description"><p>Size of the button.
+&#39;m&#39;</p>
 </div>
                     </td>
                 </tr>
@@ -668,26 +595,28 @@ false</p>
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="isChecked"></a>
-                        <b>isChecked</b>
+                        <a name="variant"></a>
+                        <b>variant</b>
                     </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/boolean" target="_blank" >boolean</a></code>
+                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#EdsButtonType" target="_self" >EdsButtonType</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
+                        <i>Default value : </i><code>&#x27;primary&#x27;</code>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>When true, marks the button as initially checked/selected within an eds-button-group.
-The button-group reads this value during initialization to determine the initial selection state.
-false</p>
+                        <div class="io-description"><p>Visual type of the button. <code>primary</code> = solid surface; <code>secondary</code> = bordered;
+<code>tertiary</code> = text/ghost. Named <code>variant</code> (not <code>type</code>) on the Angular side to avoid
+clashing with the native <code>&lt;button type&gt;</code> attribute; reflected as <code>[attr.type-variant]</code>
+(the React projection exposes this axis as its <code>type</code> prop).
+&#39;primary&#39;</p>
 </div>
                     </td>
                 </tr>
@@ -699,61 +628,6 @@ false</p>
 
 
 
-    <section data-compodoc="block-properties">
-    
-    <h3 id="inputs">
-        Properties
-    </h3>
-    <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">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>computed(() &#x3D;&gt; {
-        const sizeClass &#x3D; this.sizeDirective.getCssClass(&#x27;eds-button&#x27;);
-        const colorClass &#x3D; this.colorDirective.getCssClass(&#x27;eds-button&#x27;);
-
-        return [
-            &#x27;eds-button&#x27;,
-            sizeClass || &#x27;eds-button--size-m&#x27;,
-            colorClass || &#x27;eds-button--primary&#x27;,
-            &#x60;eds-button--type-${this.resolvedType()}&#x60;,
-            this.edsButtonRounded() ? &#x27;eds-button--rounded&#x27; : &#x27;&#x27;,
-            this.edsBlockButton() ? &#x27;eds-button--block&#x27; : &#x27;&#x27;,
-            this.edsIconButton() ? &#x27;eds-button--icon-only&#x27; : &#x27;&#x27;,
-            this.edsAvatarButton() ? &#x27;eds-button--avatar&#x27; : &#x27;&#x27;,
-            this.edsLineWrap() ? &#x27;eds-button--line-wrap&#x27; : &#x27;&#x27;,
-        ]
-            .join(&#x27; &#x27;)
-            .trim();
-    })</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Computes and returns the CSS classes for the button based on its current state.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-</section>
 
 </div>