hashicorp · suresh-hashicorp · Apr 6, 2026 · Apr 16, 2026 · Apr 16, 2026 · Apr 18, 2026
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Removed block-slot addon dependency
+```
@@ -4,15 +4,15 @@
 }}
 
 <AppView>
-  <BlockSlot @name="header">
+  <:header>
     <h1>
       Error {{@error.status}}
     </h1>
-  </BlockSlot>
-  <BlockSlot @name="content">
+  </:header>
+  <:content>
     <ErrorState
       @error={{@error}}
       @login={{if (eq @error.status "403") @login}}
     />
-  </BlockSlot>
+  </:content>
 </AppView>
@@ -23,22 +23,22 @@ breadcrumbs and back again.
 
   <AppView>
 
-    <BlockSlot @name="header">
+    <:header>
       <h1>
         Main title <em>{{format-number "100000"}} total {{pluralize 100000 "thing" without-count=true}} in this page</em>
       </h1>
-    </BlockSlot>
-    <BlockSlot @name="content">
+    </:header>
+    <:content>
 
       <EmptyState>
-        <BlockSlot @name="body">
+        <:body>
           <p>
             Nothing to see here
           </p>
-        </BlockSlot>
+        </:content>
       </EmptyState>
 
-    </BlockSlot>
+    </:body>
   </AppView>
 
   <figcaption>Basic list-like view</figcaption>
@@ -48,36 +48,36 @@ breadcrumbs and back again.
 <figure>
 
   <AppView>
-    <BlockSlot @name="breadcrumbs">
+    <:breadcrumbs>
       <ol>
         <li><a href="">Hansel</a></li>
         <li><a href="">Gretel</a></li>
       </ol>
-    </BlockSlot>
+    </:breadcrumbs>
 
-    <BlockSlot @name="header">
+    <:header>
       <h1>
         Scary witch's gingerbread house <em>(run away quick!)</em>
       </h1>
-    </BlockSlot>
+    </:header>
 
-    <BlockSlot @name="actions">
+    <:actions>
       <Action
         {{on "click" (noop)}}
       >
         Run away!
       </Action>
-    </BlockSlot>
+    </:actions>
 
-    <BlockSlot @name="content">
+    <:content>
       <EmptyState>
-        <BlockSlot @name="body">
+        <:body>
           <p>
             Double, double toil and trouble
           </p>
-        </BlockSlot>
+        </:content>
       </EmptyState>
-    </BlockSlot>
+    </:body>
   </AppView>
 
   <figcaption>Basic detail-like view</figcaption>

@@ -11,36 +11,34 @@
   <header>
       <div>
           <div>
-              <div class="app-view-breadcrumbs" data-test-breadcrumbs>
-                  <YieldSlot @name="breadcrumbs">
-                    {{document-attrs class="with-breadcrumbs"}}
-                    {{yield}}
-                  </YieldSlot>
-              </div>
+              <nav class="app-view-breadcrumbs" aria-label="Breadcrumb" data-test-breadcrumbs>
+                {{#if (if (not-eq @showBreadcrumb undefined) @showBreadcrumb (has-block 'breadcrumbs'))}}
+                  {{document-attrs class="with-breadcrumbs"}}
+                  {{yield to='breadcrumbs'}}
+                {{/if}}
+              </nav>
               <div class="title">
                 <div class="title-left-container">
-                  <YieldSlot @name="header">
-                      {{yield}}
-                  </YieldSlot>
+                  {{yield to='header'}}
                 </div>
                 <div class="actions">
-                  <YieldSlot @name="actions">
-                    <PortalTarget @name="app-view-actions" />
-                    {{yield}}
-                  </YieldSlot>
+                  <PortalTarget @name="app-view-actions" />
+                  {{#if (has-block 'actions')}}
+                    {{yield to='actions'}}
+                  {{/if}}
                 </div>
               </div>
-              <YieldSlot @name="nav">
-                {{yield}}
-              </YieldSlot>
+              {{#if (has-block 'nav')}}
+                {{yield to='nav'}}
+              {{/if}}
           </div>
       </div>
-      <YieldSlot @name="toolbar">
+      {{#if (has-block 'toolbar')}}
         <input type="checkbox" id="toolbar-toggle" />
-        {{yield}}
-      </YieldSlot>
+        {{yield to='toolbar'}}
+      {{/if}}
   </header>
   <div>
-    <YieldSlot @name="content">{{yield}}</YieldSlot>
+    {{yield to='content'}}
   </div>
 </div>
@@ -3,8 +3,8 @@
 * SPDX-License-Identifier: BUSL-1.1
  */
 
 import Component from '@ember/component';
-import SlotsMixin from 'block-slots';
-export default Component.extend(SlotsMixin, {
+
+export default Component.extend({
   tagName: '',
 });
@@ -10,9 +10,9 @@
 >
 {{yield}}
 {{#if (not @disabled)}}
-  <YieldSlot @name="create">{{yield}}</YieldSlot>
+  {{yield to="create"}}
   <label class="type-text">
-    <span><YieldSlot @name="label">{{yield}}</YieldSlot></span>
+    <span>{{yield to="label"}}</span>
     {{!-- {{#if isOpen}} --}}
       <DataSource
         @src={{uri '/${partition}/${nspace}/${dc}/${type}'
@@ -50,7 +50,7 @@
   </label>
 {{/if}}
 {{#if (gt @items.length 0)}}
-  <YieldSlot @name="set" @params={{block-params (action "remove")}}>{{yield}}</YieldSlot>
+  {{yield (action "remove") to="set"}}
 {{else}}
 
 {{/if}}

@@ -3,7 +3,7 @@
 * SPDX-License-Identifier: BUSL-1.1
 */

 import Component from '@ember/component';
 import { get, set, computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
@@ -11,9 +11,7 @@
 
 import { task } from 'ember-concurrency';
 
-import Slotted from 'block-slots';
-
-export default Component.extend(Slotted, {
+export default Component.extend({
   onchange: function () {},
   tagName: '',
 
@@ -30,8 +28,11 @@
   init: function () {
     this._super(...arguments);
     this._listeners = this.dom.listeners();
-    set(this, 'form', this.formContainer.form(this.type));
-    this.form.clear({ Datacenter: this.dc, Namespace: this.nspace });
+    const form = this.formContainer.form(this.type);
+    setTimeout(() => {
+      form.clear({ Datacenter: this.dc, Namespace: this.nspace });
+    }, 0);
+    set(this, 'form', form);
   },
   willDestroyElement: function () {
     this._super(...arguments);

@@ -3,33 +3,42 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-{{yield}}
 <InformedAction
   class="confirmation-alert warning"
   ...attributes
 >
   <:header>
-    <YieldSlot @name="header">{{yield}}</YieldSlot>
+    {{#if (has-block "header")}}
+      {{yield to="header"}}
+    {{else}}
+      {{yield}}
+    {{/if}}
   </:header>
   <:body>
-    <YieldSlot @name="body">{{yield}}</YieldSlot>
+    {{#if (has-block "body")}}
+      {{yield to="body"}}
+    {{else}}
+      {{yield}}
+    {{/if}}
   </:body>
   <:actions as |Actions|>
     <Actions.Action class="dangerous">
-      <YieldSlot @name="confirm" @params={{
-          block-params (component 'action'
+      {{#if (has-block "confirm")}}
+        {{yield 
+          (component 'action'
             onclick=(action @onclick)
             tabindex="-1"
           )
+          to="confirm"
         }}
-      >
+      {{else}}
         {{yield}}
-      </YieldSlot>
+      {{/if}}
     </Actions.Action>
     <Actions.Action>
       <Action @for={{@name}}>
         Cancel
       </Action>
     </Actions.Action>
   </:actions>
-</InformedAction>
+</InformedAction>
@@ -4,15 +4,19 @@
 }}
 
 <div class={{concat "with-confirmation" (if this.confirming " confirming" "")}} ...attributes>
-{{yield}}
-<YieldSlot @name="action" @params={{block-params (action "confirm") (action "cancel")}}>
-{{#if (or this.permanent (not this.confirming))}}
+  {{#if (has-block)}}
     {{yield}}
-{{/if}}
-</YieldSlot>
-<YieldSlot @name="dialog" @params={{block-params (action "execute") (action "cancel") @message this.actionName}}>
-{{#if this.confirming }}
-    {{yield}}
-{{/if}}
-</YieldSlot>
-</div>
+  {{/if}}
+
+  {{#if (has-block "action")}}
+    {{#if (or this.permanent (not this.confirming))}}
+      {{yield (action "confirm") (action "cancel") to="action"}}
+    {{/if}}
+  {{/if}}
+
+  {{#if (has-block "dialog")}}
+    {{#if this.confirming}}
+      {{yield (action "execute") (action "cancel") @message this.actionName to="dialog"}}
+    {{/if}}
+  {{/if}}
+</div>
@@ -7,9 +7,7 @@ import Component from '@ember/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
-import Slotted from 'block-slots';
-
-export default class ConfirmationDialogComponent extends Component.extend(Slotted) {
+export default class ConfirmationDialogComponent extends Component {
   tagName = '';
   message = 'Are you sure?';
   @tracked confirming = false;

@@ -4,22 +4,22 @@
 }}
 
 <AppView>
-  <BlockSlot @name="header">
+  <:header>
     <h1>
       Tokens
     </h1>
-  </BlockSlot>
-  <BlockSlot @name="content">
+  </:header>
+  <:content>
     <EmptyState data-test-acls-disabled>
-      <BlockSlot @name="header">
+      <:header>
         <h2>Welcome to ACLs</h2>
-      </BlockSlot>
-      <BlockSlot @name="body">
+      </:header>
+      <:body>
         <p>
           ACLs are not enabled in this Consul cluster. We strongly encourage the use of ACLs in production environments for the best security practices.
         </p>
-      </BlockSlot>
-      <BlockSlot @name="actions">
+      </:body>
+      <:actions>
         <li>
           <Hds::Link::Standalone
             @text='Read the documentation'
@@ -38,8 +38,8 @@
             @size='small'
           />
         </li>
-      </BlockSlot>
+      </:actions>
     </EmptyState>
-  </BlockSlot>
+  </:content>
 </AppView>
 
@@ -6,9 +6,8 @@
 <ListCollection
   class="consul-auth-method-list"
   @items={{@items}}
-  as |item|
 >
-  <BlockSlot @name="header">
+  <:header as |item|>
   {{#if (not-eq item.DisplayName '')}}
     <a data-test-auth-method href={{href-to "dc.acls.auth-methods.show" item.Name}}>
       {{item.DisplayName}}
@@ -18,8 +17,8 @@
       {{item.Name}}
     </a>
   {{/if}}
-  </BlockSlot>
-  <BlockSlot @name="details">
+  </:header>
+  <:details as |item|>
     <Consul::AuthMethod::Type @item={{item}} />
   {{#if (not-eq item.DisplayName '')}}
     <span data-test-display-name>{{item.Name}}</span>
@@ -35,5 +34,5 @@
       <dd>{{item.MaxTokenTTL}}</dd>
     </dl>
   {{/if}}
-  </BlockSlot>
+  </:details>
 </ListCollection>