From 36b6daa53bd8f1b485362a0c14884445a936b754 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Mon, 24 Jun 2024 14:06:58 +0100
Subject: [PATCH 1/7] added codemod for removing the `gap` value in the
 `{{style}}` modifier and replaced with `@gap` argument

---
 showcase/codemods/.gitignore                  |  2 +
 showcase/codemods/README.md                   |  8 +++
 showcase/codemods/bin/cli.js                  | 13 ++++
 .../transforms/layout-component-gap/index.js  | 71 +++++++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 showcase/codemods/.gitignore
 create mode 100644 showcase/codemods/README.md
 create mode 100755 showcase/codemods/bin/cli.js
 create mode 100644 showcase/codemods/transforms/layout-component-gap/index.js

diff --git a/showcase/codemods/.gitignore b/showcase/codemods/.gitignore
new file mode 100644
index 0000000000..568cda7371
--- /dev/null
+++ b/showcase/codemods/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/.eslintcache
\ No newline at end of file
diff --git a/showcase/codemods/README.md b/showcase/codemods/README.md
new file mode 100644
index 0000000000..1686bd0a37
--- /dev/null
+++ b/showcase/codemods/README.md
@@ -0,0 +1,8 @@
+# codemods
+
+To run this codemod:
+
+```bash
+cd showcase/
+node ./codemods/bin/cli.js layout-component-gap app/templates/**/*.hbs
+```
diff --git a/showcase/codemods/bin/cli.js b/showcase/codemods/bin/cli.js
new file mode 100755
index 0000000000..2fc8b09137
--- /dev/null
+++ b/showcase/codemods/bin/cli.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+'use strict';
+
+require('codemod-cli').runTransform(
+  __dirname,
+  process.argv[2] /* transform name */,
+  process.argv.slice(3) /* paths or globs */
+);
diff --git a/showcase/codemods/transforms/layout-component-gap/index.js b/showcase/codemods/transforms/layout-component-gap/index.js
new file mode 100644
index 0000000000..699cb267bb
--- /dev/null
+++ b/showcase/codemods/transforms/layout-component-gap/index.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+module.exports = function ({ source /*, path*/ }, { parse, visit }) {
+  const ast = parse(source);
+
+  return visit(ast, (env) => {
+    let { builders: b } = env.syntax;
+
+    return {
+      ElementNode(node) {
+        if (node.tag === 'Shw::Grid' || node.tag === 'Shw::Flex') {
+          // look up for `@gap` (it means it's already been processed)
+          const gapAttr = node.attributes.find((a) => a.name === '@gap');
+
+          if (!gapAttr) {
+            // look up for `{{style}}`
+            const styleModifier = node.modifiers.find(
+              (m) => m.path.original === 'style'
+            );
+
+            if (styleModifier) {
+              // look up for `{{style gap}}`
+              const styleModifierGapEntry = styleModifier.hash.pairs.find(
+                (p) => p.key === 'gap'
+              );
+
+              if (styleModifierGapEntry) {
+                // add the `@gap` argument
+                node.attributes.push(
+                  b.attr('@gap', styleModifierGapEntry.value)
+                );
+
+                // remove the `gap` value from the `{{style}}` modifier
+                const outputStyleModifierPairs =
+                  styleModifier.hash.pairs.filter((p) => p.key !== 'gap');
+
+                // re-assign the filtered pairs to the `{{style}}` modifier
+                styleModifier.hash.pairs = outputStyleModifierPairs;
+
+                // remove entirely the `{{style}}` modifier if it doesn't have pairs left
+                const outputModifiers = node.modifiers.filter(
+                  (m) => m?.hash?.pairs?.length > 0
+                );
+
+                // re-assign the filtered modifiers to the element
+                node.modifiers = outputModifiers;
+
+                return [
+                  b.element(
+                    { name: node.tag, selfClosing: false },
+                    {
+                      attrs: node.attributes,
+                      children: node.children,
+                      modifiers: node.modifiers,
+                      blockParams: node.blockParams,
+                    }
+                  ),
+                ];
+              }
+            }
+          }
+        }
+      },
+    };
+  });
+};
+
+module.exports.type = 'hbs';

From 63d9f71776d8e04815f57fe16aba9d3395398511 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Mon, 24 Jun 2024 14:13:59 +0100
Subject: [PATCH 2/7] removed extra parenthesis in declarations/computations

(otherwise the `codemods/bin/cli.js` runner would complain)
---
 .../app/templates/components/app-footer.hbs   |  6 ++---
 .../app/templates/components/code-block.hbs   |  4 ++--
 .../components/form/super-select.hbs          | 24 +++++++++----------
 .../app/templates/components/rich-tooltip.hbs |  4 ++--
 showcase/app/templates/components/table.hbs   | 22 ++++++++---------
 .../templates/utilities/popover-primitive.hbs | 12 +++++-----
 6 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/showcase/app/templates/components/app-footer.hbs b/showcase/app/templates/components/app-footer.hbs
index 711f6ef0c2..373f031d75 100644
--- a/showcase/app/templates/components/app-footer.hbs
+++ b/showcase/app/templates/components/app-footer.hbs
@@ -142,7 +142,7 @@
       {{#let (array "desktop" "tablet" "mobile-large" "mobile-small") as |layouts|}}
         {{#each layouts as |layout|}}
           <SF.Item @label={{layout}}>
-            <div class={{(concat (concat "shw-component-app-footer-" layout) "-view")}}>
+            <div class={{concat "shw-component-app-footer-" layout "-view"}}>
               <Hds::AppFooter as |AF|>
                 <AF.ExtraBefore>
                   <Shw::Placeholder
@@ -210,7 +210,7 @@
         <Shw::Flex {{style gap="2rem" justifyContent="space-between"}} as |SF|>
           {{#each @model.LINK_STATES as |state|}}
             <SF.Item @label={{state}}>
-              <ul class={{(concat "hds-app-footer__list hds-app-footer--theme-" theme)}}>
+              <ul class={{concat "hds-app-footer__list hds-app-footer--theme-" theme}}>
                 <Hds::AppFooter::Link @href="#" mock-state-value={{state}}>Link</Hds::AppFooter::Link>
               </ul>
             </SF.Item>
@@ -232,7 +232,7 @@
         <Shw::Flex {{style gap="2rem" justifyContent="space-between"}} as |SF|>
           {{#each-in @model.STATUS_LINK_STATUSES as |status|}}
             <SF.Item @label={{status}}>
-              <ul class={{(concat "hds-app-footer__list hds-app-footer--theme-" theme)}}>
+              <ul class={{concat "hds-app-footer__list hds-app-footer--theme-" theme}}>
                 <Hds::AppFooter::StatusLink @status={{status}} />
               </ul>
             </SF.Item>
diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
index febe47b7e1..f52e88c2ae 100644
--- a/showcase/app/templates/components/code-block.hbs
+++ b/showcase/app/templates/components/code-block.hbs
@@ -509,7 +509,7 @@ end'
 
   <Shw::Grid @columns={{6}} as |SG|>
     {{#each @model.STATES as |state|}}
-      <SG.Item @label={{(capitalize state)}} class="shw-component-code-block-copy-button">
+      <SG.Item @label={{capitalize state}} class="shw-component-code-block-copy-button">
         <Hds::CodeBlock::CopyButton
           mock-state-value={{state}}
           @textToCopy="copy me"
@@ -519,7 +519,7 @@ end'
     {{/each}}
     {{#let (array "success" "error") as |statuses|}}
       {{#each statuses as |status|}}
-        <SG.Item @label={{(capitalize status)}} class="shw-component-code-block-copy-button">
+        <SG.Item @label={{capitalize status}} class="shw-component-code-block-copy-button">
           <Hds::CodeBlock::CopyButton
             @status={{status}}
             mock-copy-status={{status}}
diff --git a/showcase/app/templates/components/form/super-select.hbs b/showcase/app/templates/components/form/super-select.hbs
index 318206ba27..aad16b5160 100644
--- a/showcase/app/templates/components/form/super-select.hbs
+++ b/showcase/app/templates/components/form/super-select.hbs
@@ -1026,7 +1026,7 @@
 
   <Shw::Flex as |SF|>
     {{#each @model.STATES as |state|}}
-      <SF.Item @label={{(capitalize state)}}>
+      <SF.Item @label={{capitalize state}}>
         <div class="hds-form-super-select">
           <div class="ember-basic-dropdown">
             <div class="ember-power-select-trigger" mock-state-value={{state}}>
@@ -1049,7 +1049,7 @@
 
   <Shw::Flex as |SF|>
     {{#each @model.STATES as |state|}}
-      <SF.Item @label={{(capitalize state)}}>
+      <SF.Item @label={{capitalize state}}>
         <div class="hds-form-super-select">
           <div class="ember-basic-dropdown">
             <Shw::Outliner>
@@ -1208,21 +1208,21 @@
   {{#let (array "single" "multiple") as |variants|}}
     {{#each variants as |variant|}}
       <Shw::Flex as |SG|>
-        <SG.Item @label="{{(capitalize variant)}} / Flat">
+        <SG.Item @label="{{capitalize variant}} / Flat">
           <div class="hds-form-super-select hds-form-super-select-{{variant}}">
             <div class="ember-basic-dropdown">
               <div class="ember-basic-dropdown-content" {{style position="static"}}>
                 <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
                   <Hds::Form::SuperSelect::OptionGroup
-                    @group={{(hash groupName="Title for first group (with no content)")}}
+                    @group={{hash groupName="Title for first group (with no content)"}}
                   />
                   <Hds::Form::SuperSelect::OptionGroup
-                    @group={{(hash groupName="Title for second group (with generic content)")}}
+                    @group={{hash groupName="Title for second group (with generic content)"}}
                   >
                     <Shw::Placeholder @text="Second group - Generic content" @height="40px" />
                   </Hds::Form::SuperSelect::OptionGroup>
                   <Hds::Form::SuperSelect::OptionGroup
-                    @group={{(hash groupName="Title for third group (with options)")}}
+                    @group={{hash groupName="Title for third group (with options)"}}
                   >
                     {{! template-lint-disable require-context-role }}
                     <li class="ember-power-select-option" role="option" mock-state-value="hover">
@@ -1237,17 +1237,17 @@
             </div>
           </div>
         </SG.Item>
-        <SG.Item @label="{{(capitalize variant)}} / Nested">
+        <SG.Item @label="{{capitalize variant}} / Nested">
           <div class="hds-form-super-select hds-form-super-select-{{variant}}">
             <div class="ember-basic-dropdown">
               <div class="ember-basic-dropdown-content" {{style position="static"}}>
                 <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
-                  <Hds::Form::SuperSelect::OptionGroup @group={{(hash groupName="Title for first level")}}>
+                  <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for first level"}}>
                     {{! template-lint-disable require-context-role }}
                     <li class="ember-power-select-option" role="option" mock-state-value="hover">
                       Level 1 - Option 1A
                     </li>
-                    <Hds::Form::SuperSelect::OptionGroup @group={{(hash groupName="Title for second level")}}>
+                    <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for second level"}}>
                       {{! template-lint-disable require-context-role }}
                       <li class="ember-power-select-option" role="option" mock-state-value="hover">
                         Level 2 - Option 2A
@@ -1255,7 +1255,7 @@
                       <li class="ember-power-select-option" role="option">
                         Level 2 - Option 2B
                       </li>
-                      <Hds::Form::SuperSelect::OptionGroup @group={{(hash groupName="Title for third level")}}>
+                      <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for third level"}}>
                         {{! template-lint-disable require-context-role }}
                         <li class="ember-power-select-option" role="option" mock-state-value="hover">
                           Level 3 - Option 3A
@@ -1266,7 +1266,7 @@
                       </Hds::Form::SuperSelect::OptionGroup>
                     </Hds::Form::SuperSelect::OptionGroup>
                     <Hds::Form::SuperSelect::OptionGroup
-                      @group={{(hash groupName="Title for second level (with generic content)")}}
+                      @group={{hash groupName="Title for second level (with generic content)"}}
                     >
                       <Shw::Placeholder @text="Second group - Generic content" @height="40px" />
                     </Hds::Form::SuperSelect::OptionGroup>
@@ -1387,7 +1387,7 @@
         <div class="ember-basic-dropdown">
           <div class="ember-basic-dropdown-content ember-power-select-dropdown" {{style position="static"}}>
             <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
-              <Hds::Form::SuperSelect::OptionGroup @group={{(hash groupName="Lorem ipsum dolor")}}>
+              <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Lorem ipsum dolor"}}>
                 {{! template-lint-disable require-context-role }}
                 <li class="ember-power-select-option" role="option" aria-selected="true">
                   Option 1
diff --git a/showcase/app/templates/components/rich-tooltip.hbs b/showcase/app/templates/components/rich-tooltip.hbs
index 536edd24f0..9056437990 100644
--- a/showcase/app/templates/components/rich-tooltip.hbs
+++ b/showcase/app/templates/components/rich-tooltip.hbs
@@ -179,7 +179,7 @@
     <SF.Item @label="Offset: { mainAxis: 30, crossAxis: 0 }">
       <Hds::RichTooltip @isOpen={{true}} @enableClickEvents={{true}} as |RT|>
         <RT.Toggle @text="Lorem ipsum" @icon="info" @size="medium" />
-        <RT.Bubble @offset={{(hash mainAxis=30 crossAxis=0)}} @enableCollisionDetection={{false}}>
+        <RT.Bubble @offset={{hash mainAxis=30 crossAxis=0}} @enableCollisionDetection={{false}}>
           <Shw::Placeholder @text="generic content" @height="30" />
         </RT.Bubble>
       </Hds::RichTooltip>
@@ -187,7 +187,7 @@
     <SF.Item @label="Offset: { mainAxis: 12, crossAxis: 80 }">
       <Hds::RichTooltip @isOpen={{true}} @enableClickEvents={{true}} as |RT|>
         <RT.Toggle @text="Lorem ipsum" @icon="info" @size="medium" />
-        <RT.Bubble @offset={{(hash mainAxis=12 crossAxis=80)}} @enableCollisionDetection={{false}}>
+        <RT.Bubble @offset={{hash mainAxis=12 crossAxis=80}} @enableCollisionDetection={{false}}>
           <Shw::Placeholder @text="generic content" @height="30" />
         </RT.Bubble>
       </Hds::RichTooltip>
diff --git a/showcase/app/templates/components/table.hbs b/showcase/app/templates/components/table.hbs
index c26c45e7ef..ec27e7e3ab 100644
--- a/showcase/app/templates/components/table.hbs
+++ b/showcase/app/templates/components/table.hbs
@@ -559,7 +559,7 @@
       </Hds::Table>
       {{#if this.multiSelectToggleDebug__demo1}}
         {{#each this.multiSelectModelData__demo1 as |row|}}
-          <pre>row{{row.id}} = {{(if row.isSelected "✅")}}</pre>
+          <pre>row{{row.id}} = {{if row.isSelected "✅"}}</pre>
         {{/each}}
       {{/if}}
     </SF.Item>
@@ -605,10 +605,10 @@
         </:body>
       </Hds::Table>
       {{#if this.multiSelectToggleDebug__demo1}}
-        <pre>row1 = {{(if (get this.multiSelectNoModelState__demo1 "row1") "✅")}}</pre>
-        <pre>row2 = {{(if (get this.multiSelectNoModelState__demo1 "row2") "✅")}}</pre>
-        <pre>row3 = {{(if (get this.multiSelectNoModelState__demo1 "row3") "✅")}}</pre>
-        <pre>row4 = {{(if (get this.multiSelectNoModelState__demo1 "row4") "✅")}}</pre>
+        <pre>row1 = {{if (get this.multiSelectNoModelState__demo1 "row1") "✅"}}</pre>
+        <pre>row2 = {{if (get this.multiSelectNoModelState__demo1 "row2") "✅"}}</pre>
+        <pre>row3 = {{if (get this.multiSelectNoModelState__demo1 "row3") "✅"}}</pre>
+        <pre>row4 = {{if (get this.multiSelectNoModelState__demo1 "row4") "✅"}}</pre>
       {{/if}}
     </SF.Item>
   </Shw::Flex>
@@ -670,7 +670,7 @@
     />
     {{#if this.multiSelectToggleDebug__demo2}}
       {{#each this.multiSelectModelData__demo2 as |row|}}
-        <pre>row{{row.id}} = {{(if row.isSelected "✅")}}</pre>
+        <pre>row{{row.id}} = {{if row.isSelected "✅"}}</pre>
       {{/each}}
     {{/if}}
   </div>
@@ -739,7 +739,7 @@
     />
     {{#if this.multiSelectToggleDebug__demo3}}
       {{#each this.multiSelectModelData__demo3 as |row|}}
-        <pre>row{{row.id}} = {{(if row.isSelected "✅")}}</pre>
+        <pre>row{{row.id}} = {{if row.isSelected "✅"}}</pre>
       {{/each}}
     {{/if}}
   </div>
@@ -795,7 +795,7 @@
             {{#let (array false true) as |booleans|}}
               {{#each booleans as |bool|}}
                 <SG.Item>
-                  <Hds::Table @isSelectable={{bool}} @density={{(if (not (eq density "default")) density)}}>
+                  <Hds::Table @isSelectable={{bool}} @density={{if (not (eq density "default")) density}}>
                     <:head as |H|>
                       <H.Tr>
                         <H.Th>Lorem</H.Th>
@@ -1423,7 +1423,7 @@
   <Shw::Flex @direction="row" {{style gap="2rem"}} as |SF|>
     {{#let (array false true) as |booleans|}}
       {{#each booleans as |bool|}}
-        <SF.Item @label={{(if bool "Selected" "Deselected")}}>
+        <SF.Item @label={{if bool "Selected" "Deselected"}}>
           <Hds::Table>
             <:head as |H|>
               <H.Tr>
@@ -1756,7 +1756,7 @@
 
   <Shw::Grid @label="Interactive states" @columns={{4}} as |SG|>
     {{#each @model.STATES as |state|}}
-      <SG.Item @label={{(capitalize state)}}>
+      <SG.Item @label={{capitalize state}}>
         <Hds::Table::ThButtonTooltip @tooltip="Here is more information" mock-state-value={{state}} />
       </SG.Item>
     {{/each}}
@@ -1768,7 +1768,7 @@
 
   <Shw::Grid @label="Interactive states + Sorting order" @columns={{4}} as |SG|>
     {{#each @model.STATES as |state|}}
-      <SG.Item @label={{(capitalize state)}}>
+      <SG.Item @label={{capitalize state}}>
         <Shw::Flex @direction="row" as |SF|>
           <SF.Item>
             <Hds::Table::ThButtonSort mock-state-value={{state}} />
diff --git a/showcase/app/templates/utilities/popover-primitive.hbs b/showcase/app/templates/utilities/popover-primitive.hbs
index 66c6cc66c9..f8e75d4ad6 100644
--- a/showcase/app/templates/utilities/popover-primitive.hbs
+++ b/showcase/app/templates/utilities/popover-primitive.hbs
@@ -140,7 +140,7 @@
           as |offsetOptionsVariants|
         }}
           {{#each offsetOptionsVariants as |offsetOptionsVariant count|}}
-            <SF.Item @label={{(if (eq popoverHasArrow false) (get offsetOptionsVariant "label"))}}>
+            <SF.Item @label={{if (eq popoverHasArrow false) (get offsetOptionsVariant "label")}}>
               <Hds::PopoverPrimitive @isOpen={{true}} as |PP|>
                 <div class="shw-utilities-popover-primitive-fake-container" {{PP.setupPrimitiveContainer}}>
                   <button
@@ -178,7 +178,7 @@
   <Shw::Grid @columns={{4}} {{style gap="2rem" margin-bottom="8rem"}} as |SF|>
     {{#let (array (hash label="not set") (hash label="32" arrowPadding=32)) as |arrowPaddingVariants|}}
       {{#each arrowPaddingVariants as |arrowPaddingVariant count|}}
-        <SF.Item @label={{(get arrowPaddingVariant "label")}}>
+        <SF.Item @label={{get arrowPaddingVariant "label"}}>
           <Hds::PopoverPrimitive @isOpen={{true}} as |PP|>
             <div class="shw-utilities-popover-primitive-fake-container" {{PP.setupPrimitiveContainer}}>
               <button
@@ -298,8 +298,8 @@
       {{#each interactionVariants as |interaction|}}
         <SG.Item @label={{if (eq interaction "soft") 'Hover/Focus ("Soft")' "Click"}}>
           <Hds::PopoverPrimitive
-            @enableSoftEvents={{(eq interaction "soft")}}
-            @enableClickEvents={{(eq interaction "click")}}
+            @enableSoftEvents={{eq interaction "soft"}}
+            @enableClickEvents={{eq interaction "click"}}
             @enableCollisionDetection={{true}}
             as |PP|
           >
@@ -355,8 +355,8 @@
           {{#each interactionVariants as |interaction|}}
             <SG.Item @label={{concat interaction " / isOpen={{" isOpen "}}"}}>
               <Hds::PopoverPrimitive
-                @enableSoftEvents={{(eq interaction "soft")}}
-                @enableClickEvents={{(eq interaction "click")}}
+                @enableSoftEvents={{eq interaction "soft"}}
+                @enableClickEvents={{eq interaction "click"}}
                 @enableCollisionDetection={{true}}
                 @isOpen={{isOpen}}
                 as |PP|

From b909933c1dbfff98de5b0d78b2e8069ec149311f Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Mon, 24 Jun 2024 14:58:09 +0100
Subject: [PATCH 3/7] run the codemod on the showcase template pages

---
 .../app/templates/components/accordion.hbs    | 28 ++++++++-----------
 .../app/templates/components/app-footer.hbs   | 12 ++++----
 showcase/app/templates/components/card.hbs    |  2 +-
 .../app/templates/components/code-block.hbs   | 22 +++++++--------
 .../app/templates/components/copy/button.hbs  | 14 +++++-----
 .../app/templates/components/dropdown.hbs     |  2 +-
 .../components/form/base-elements.hbs         |  2 +-
 .../templates/components/form/checkbox.hbs    |  4 +--
 .../templates/components/form/file-input.hbs  |  6 ++--
 .../app/templates/components/form/radio.hbs   |  4 +--
 .../app/templates/components/form/select.hbs  |  4 +--
 .../app/templates/components/form/toggle.hbs  |  4 +--
 .../app/templates/components/link/inline.hbs  |  6 +---
 .../app/templates/components/page-header.hbs  |  2 +-
 showcase/app/templates/components/reveal.hbs  | 10 +++----
 .../app/templates/components/rich-tooltip.hbs | 22 +++++++--------
 showcase/app/templates/components/table.hbs   | 10 +++----
 showcase/app/templates/components/text.hbs    |  6 ++--
 showcase/app/templates/components/tooltip.hbs | 12 ++++----
 showcase/app/templates/layouts/app-frame.hbs  |  4 +--
 .../templates/utilities/popover-primitive.hbs | 14 +++++-----
 21 files changed, 91 insertions(+), 99 deletions(-)

diff --git a/showcase/app/templates/components/accordion.hbs b/showcase/app/templates/components/accordion.hbs
index d7ca22a674..a2b0f3f11d 100644
--- a/showcase/app/templates/components/accordion.hbs
+++ b/showcase/app/templates/components/accordion.hbs
@@ -12,7 +12,7 @@
 
   <Shw::Text::H3>Basic</Shw::Text::H3>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="One item">
       <Hds::Accordion as |A|>
         <A.Item>
@@ -56,7 +56,7 @@
 
   <Shw::Text::H4>With nested Accordions</Shw::Text::H4>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item {{style flex="1"}}>
       <Hds::Accordion as |A|>
         <A.Item @isOpen={{true}}>
@@ -102,7 +102,7 @@
 
   <Shw::Text::H4>With different Accordion variants nested</Shw::Text::H4>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="Nested Accordion with containsInteractive=true nested in containsInteractive=false">
       <Hds::Accordion as |A|>
         <A.Item @isOpen={{true}}>
@@ -142,7 +142,7 @@
 
   <Shw::Text::H4>With generic content</Shw::Text::H4>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="With generic content in toggle">
       <Hds::Accordion as |A|>
         <A.Item>
@@ -160,7 +160,7 @@
 
   <Shw::Text::H4>With rich content</Shw::Text::H4>
 
-  <Shw::Flex {{style gap="2rem" marginBottom="2rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" {{style marginBottom="2rem"}} as |SF|>
     <SF.Item @label="With rich content in toggle (HTML header tag)">
       <Hds::Accordion as |A|>
         <A.Item>
@@ -175,7 +175,7 @@
     </SF.Item>
   </Shw::Flex>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="With interactive content in toggle and in toggled content">
       <Hds::Accordion as |A|>
         <A.Item @containsInteractive={{true}} @isOpen={{true}}>
@@ -246,7 +246,7 @@
 
   <Shw::Text::H3>Edge cases</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" as |SF|>
     <SF.Item @label="With long content in toggle which wraps">
       <Hds::Accordion as |A|>
         <A.Item>
@@ -270,11 +270,11 @@
   <Shw::Text::H3>Accordion::Item</Shw::Text::H3>
 
   {{#let (array false true) as |booleans|}}
-    <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+    <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
       {{#each booleans as |bool|}}
         <SG.Item>
           <Shw::Text::H4>containsInteractive={{bool}}</Shw::Text::H4>
-          <Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
+          <Shw::Flex @direction="column" @gap="2rem" as |SF|>
             {{#each @model.STATES as |state|}}
               <SF.Item @label={{state}} {{style flex="1"}}>
                 <Hds::Accordion::Item
@@ -321,7 +321,7 @@
 
   <Shw::Text::Body><strong>isOpen</strong></Shw::Text::Body>
 
-  <Shw::Flex {{style gap="2rem" marginBottom="2rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" {{style marginBottom="2rem"}} as |SF|>
     <SF.Item @label="Default, isOpen=false">
       <Hds::Accordion::Item>
         <:toggle>Item one</:toggle>
@@ -345,7 +345,7 @@
 
   <Shw::Text::Body><strong>containsInteractive</strong></Shw::Text::Body>
 
-  <Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" as |SF|>
     <SF.Item @label="containsInteractive=false (See “States”)">
       <Hds::Accordion as |A|>
         <A.Item>
@@ -375,11 +375,7 @@
 
   {{#let (array false true) as |booleans|}}
     {{#each booleans as |bool|}}
-      <Shw::Flex
-        {{style gap="2rem" justifyContent="space-between"}}
-        @label="parentContainsInteractive={{bool}}"
-        as |SF|
-      >
+      <Shw::Flex @label="parentContainsInteractive={{bool}}" @gap="2rem" {{style justifyContent="space-between"}} as |SF|>
         {{#each @model.STATES as |state|}}
           <SF.Item @label={{state}}>
             <div class="shw-component-accordion-standalone-button">
diff --git a/showcase/app/templates/components/app-footer.hbs b/showcase/app/templates/components/app-footer.hbs
index 373f031d75..f19b108412 100644
--- a/showcase/app/templates/components/app-footer.hbs
+++ b/showcase/app/templates/components/app-footer.hbs
@@ -207,7 +207,7 @@
       {{#each themes as |theme|}}
         <Shw::Text::Body><strong>{{theme}} theme</strong></Shw::Text::Body>
 
-        <Shw::Flex {{style gap="2rem" justifyContent="space-between"}} as |SF|>
+        <Shw::Flex @gap="2rem" {{style justifyContent="space-between"}} as |SF|>
           {{#each @model.LINK_STATES as |state|}}
             <SF.Item @label={{state}}>
               <ul class={{concat "hds-app-footer__list hds-app-footer--theme-" theme}}>
@@ -229,7 +229,7 @@
       {{#each themes as |theme|}}
         <Shw::Text::Body><strong>{{theme}} theme</strong></Shw::Text::Body>
 
-        <Shw::Flex {{style gap="2rem" justifyContent="space-between"}} as |SF|>
+        <Shw::Flex @gap="2rem" {{style justifyContent="space-between"}} as |SF|>
           {{#each-in @model.STATUS_LINK_STATUSES as |status|}}
             <SF.Item @label={{status}}>
               <ul class={{concat "hds-app-footer__list hds-app-footer--theme-" theme}}>
@@ -245,7 +245,7 @@
 
     <Shw::Text::Body><strong>Custom values combined with a standard status</strong></Shw::Text::Body>
 
-    <Shw::Flex {{style gap="2rem"}} as |SF|>
+    <Shw::Flex @gap="2rem" as |SF|>
       <SF.Item @label="with custom text">
         <ul class="hds-app-footer__list hds-app-footer--theme-light">
           <Hds::AppFooter::StatusLink @status="operational" @text="Operativo" />
@@ -266,7 +266,7 @@
     </Shw::Flex>
 
     <Shw::Text::Body><strong>Custom values with no status</strong></Shw::Text::Body>
-    <Shw::Flex {{style gap="2rem"}} as |SF|>
+    <Shw::Flex @gap="2rem" as |SF|>
       <SF.Item @label="with custom icon and text">
         <ul class="hds-app-footer__list hds-app-footer--theme-light">
           <Hds::AppFooter::StatusLink @statusIcon="hexagon-fill" @text="Lorem ipsum" />
@@ -289,7 +289,7 @@
 
     <Shw::Text::H3>AppFooter::LegalLinks</Shw::Text::H3>
 
-    <Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
+    <Shw::Flex @direction="column" @gap="2rem" as |SF|>
       <SF.Item @label="with default url for “Terms” link">
         <ul class="hds-app-footer__list hds-app-footer--theme-light">
           <Hds::AppFooter::LegalLinks />
@@ -301,7 +301,7 @@
 
     <Shw::Text::H3>AppFooter::Copyright</Shw::Text::H3>
 
-    <Shw::Flex {{style gap="2rem"}} as |SF|>
+    <Shw::Flex @gap="2rem" as |SF|>
       <SF.Item @label="with default (current) year">
         <Hds::AppFooter::Copyright />
       </SF.Item>
diff --git a/showcase/app/templates/components/card.hbs b/showcase/app/templates/components/card.hbs
index e1542bfeb8..64a04f2f05 100644
--- a/showcase/app/templates/components/card.hbs
+++ b/showcase/app/templates/components/card.hbs
@@ -72,7 +72,7 @@
 
   <Shw::Text::H2>Overflow</Shw::Text::H2>
   <div class="shw-component-card-wrapper">
-    <Shw::Grid @columns={{2}} {{style width="fit-content" gap="2rem"}} as |SG|>
+    <Shw::Grid @columns={{2}} @gap="2rem" {{style width="fit-content"}} as |SG|>
       <SG.Item>
         <Hds::Card::Container @level="mid" @hasBorder={{true}}>
           <div class="shw-component-card-overflow__wrapper-relative">
diff --git a/showcase/app/templates/components/code-block.hbs b/showcase/app/templates/components/code-block.hbs
index f52e88c2ae..e1f02c26ce 100644
--- a/showcase/app/templates/components/code-block.hbs
+++ b/showcase/app/templates/components/code-block.hbs
@@ -10,7 +10,7 @@
 <section data-test-percy>
   <Shw::Text::H2>Content</Shw::Text::H2>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="one line">
       <Hds::CodeBlock @language="javascript" @value="console.log('I am JavaScript code');" />
     </SG.Item>
@@ -25,7 +25,7 @@ console.log(`I am ${codeLang} code`);"
 
   <Shw::Text::Body>New lines handling</Shw::Text::Body>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @forceMinWidth={{true}} as |SGI|>
       <SGI.Label>new lines in Handlebars</SGI.Label>
       <Hds::CodeBlock
@@ -56,7 +56,7 @@ console.log(`I am ${codeLang} code`);"
 
   <Shw::Text::H3>Title and description</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="title">
       <Hds::CodeBlock @value="console.log('I am JavaScript code');" @language="javascript" as |CB|>
         <CB.Title>Title</CB.Title>
@@ -118,7 +118,7 @@ console.log(`I am ${codeLang} code`);"
 
   <Shw::Text::H3>Standalone</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="isStandalone=false">
       <Hds::CodeBlock
         @isStandalone={{false}}
@@ -144,7 +144,7 @@ console.log(`I am ${codeLang} code`);"
 
   <Shw::Text::H3>Line wrapping</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="hasLineWrapping=false (default)" @forceMinWidth={{true}}>
       <Hds::CodeBlock
         @language="javascript"
@@ -171,7 +171,7 @@ console.log(codeLand);"
 
   <Shw::Text::H3>Line numbers</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="hasLineNumbers=false">
       <Hds::CodeBlock
         @language="javascript"
@@ -198,7 +198,7 @@ console.log(`I am ${codeLang} code`);"
 
   <Shw::Text::H3>Height limit</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="maxHeight='105px'" @forceMinWidth={{true}}>
       {{! template-lint-disable no-whitespace-for-layout }}
       <Hds::CodeBlock
@@ -264,7 +264,7 @@ function assertObjectsEqual (actual, expected, testName) {
 
   <Shw::Text::H3>Copy button</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="hasCopyButton=true" @forceMinWidth={{true}}>
       <Hds::CodeBlock @language="shell-session" @hasCopyButton={{true}} @value="$ brew tap hashicorp/tap" />
     </SG.Item>
@@ -307,7 +307,7 @@ function assertObjectsEqual (actual, expected, testName) {
 
   <Shw::Text::H3>Highlight lines</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="Highlight lines 2 & 4" @forceMinWidth={{true}}>
       <Hds::CodeBlock
         @language="javascript"
@@ -351,7 +351,7 @@ loadInitializers(App, config.modulePrefix);"
 
   <Shw::Text::H3>Language</Shw::Text::H3>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="no language (default)" @forceMinWidth={{true}}>
       <Hds::CodeBlock
         @value="ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAklOUpkDHrfHY17SbrmTIpNLTGK9Tjom/BWDSU
@@ -535,7 +535,7 @@ end'
 
   <Shw::Text::H2>Demo</Shw::Text::H2>
 
-  <Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" as |SF|>
     <SF.Item>
       <Shw::Label>Within Tabs</Shw::Label>
       <Hds::Tabs {{style width="400px"}} as |T|>
diff --git a/showcase/app/templates/components/copy/button.hbs b/showcase/app/templates/components/copy/button.hbs
index 3834e64377..519dea16b6 100644
--- a/showcase/app/templates/components/copy/button.hbs
+++ b/showcase/app/templates/components/copy/button.hbs
@@ -148,7 +148,7 @@
 
   <Shw::Text::H4>Target types</Shw::Text::H4>
 
-  <Shw::Flex {{style gap="2rem"}} @columns={{3}} as |SF|>
+  <Shw::Flex @columns={{3}} @gap="2rem" as |SF|>
     <SF.Item>
       <Shw::Label>Target as a CSS selector (`string`)</Shw::Label>
       <div class="shw-component-copy-button-flex-container">
@@ -175,7 +175,7 @@
 
   <Shw::Text::H4>HDS components</Shw::Text::H4>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{3}} as |SG|>
+  <Shw::Grid @columns={{3}} @gap="2rem" as |SG|>
     <SG.Item class="shw-component-copy-button-input-component">
       <Shw::Label>Input component</Shw::Label>
       <Hds::Form::TextInput::Field @value="036140285924" @name="test-input" @id="test-input" as |F|>
@@ -286,7 +286,7 @@ that should be copied"
     </SG.Item>
   </Shw::Grid>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{3}} as |SG|>
+  <Shw::Grid @columns={{3}} @gap="2rem" as |SG|>
     <SG.Item>
       <Shw::Label>Within a Dropdown</Shw::Label>
       <Hds::Dropdown @listPosition="bottom-left" as |dd|>
@@ -414,7 +414,7 @@ that should be copied"
 
   <Shw::Text::H4>HTML blocks</Shw::Text::H4>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item>
       <Shw::Label>Structured content</Shw::Label>
       <Hds::Copy::Button @text="Copy the content below" @targetToCopy="#test-structured-content" />
@@ -446,7 +446,7 @@ that should be copied"
     </SG.Item>
   </Shw::Grid>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item>
       <Shw::Label>Code block</Shw::Label>
       <Hds::Copy::Button @text="Copy the code block" @targetToCopy="#test-code-block" />
@@ -465,7 +465,7 @@ that should be copied"
 
   <Shw::Text::H4>HTML input elements</Shw::Text::H4>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item>
       <Shw::Label>Text input</Shw::Label>
       <div class="shw-component-copy-button-flex-container">
@@ -571,7 +571,7 @@ that should be copied"
       </div>
     </SF.Item>
   </Shw::Flex>
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item>
       <Shw::Label>Textarea</Shw::Label>
       <div class="shw-component-copy-button-flex-container">
diff --git a/showcase/app/templates/components/dropdown.hbs b/showcase/app/templates/components/dropdown.hbs
index b8c8f817c7..ab398f94ba 100644
--- a/showcase/app/templates/components/dropdown.hbs
+++ b/showcase/app/templates/components/dropdown.hbs
@@ -1415,7 +1415,7 @@
 <section>
   <Shw::Text::H2>Demo</Shw::Text::H2>
 
-  <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="With fixed width">
       <div class="shw-component-dropdown-fixed-height-container">
         <Hds::Dropdown @listPosition="bottom-left" @width="200px" as |dd|>
diff --git a/showcase/app/templates/components/form/base-elements.hbs b/showcase/app/templates/components/form/base-elements.hbs
index 8aed3f1b06..7e5b68030b 100644
--- a/showcase/app/templates/components/form/base-elements.hbs
+++ b/showcase/app/templates/components/form/base-elements.hbs
@@ -703,7 +703,7 @@
   <div class="{{if this.showHighlight 'shw-component-form-base-elements-layout-highlight'}}">
 
     <Shw::Text::H3>Layout</Shw::Text::H3>
-    <Shw::Flex {{style gap="48px"}} as |SF|>
+    <Shw::Flex @gap="48px" as |SF|>
       {{#let (array "vertical" "horizontal") as |layouts|}}
         {{#each layouts as |layout|}}
           <SF.Item @label={{capitalize layout}}>
diff --git a/showcase/app/templates/components/form/checkbox.hbs b/showcase/app/templates/components/form/checkbox.hbs
index f02ccc74f8..aca26fe541 100644
--- a/showcase/app/templates/components/form/checkbox.hbs
+++ b/showcase/app/templates/components/form/checkbox.hbs
@@ -13,7 +13,7 @@
 
   <Shw::Text::H3>Interaction status</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Unchecked">
       <Hds::Form::Checkbox::Base aria-label="Unchecked checkbox" />
     </SF.Item>
@@ -27,7 +27,7 @@
 
   <Shw::Text::H3>States (Base / Disabled)</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     {{#each @model.STATES as |state|}}
       <SF.Item @label={{capitalize state}}>
         <Shw::Grid @columns={{3}} mock-state-value={{state}} mock-state-selector="input" as |SG|>
diff --git a/showcase/app/templates/components/form/file-input.hbs b/showcase/app/templates/components/form/file-input.hbs
index 13c525d70b..dfb8b2650b 100644
--- a/showcase/app/templates/components/form/file-input.hbs
+++ b/showcase/app/templates/components/form/file-input.hbs
@@ -16,7 +16,7 @@
   <Shw::Text::H2>“Base” control</Shw::Text::H2>
 
   <div class="{{if this.showHighlight 'shw-component-form-file-input-layout-highlight'}}">
-    <Shw::Flex {{style gap="2rem"}} as |SF|>
+    <Shw::Flex @gap="2rem" as |SF|>
       <SF.Item>
         <Hds::Form::FileInput::Base />
       </SF.Item>
@@ -24,7 +24,7 @@
 
     <Shw::Text::H2>States</Shw::Text::H2>
 
-    <Shw::Flex {{style gap="2rem"}} as |SF|>
+    <Shw::Flex @gap="2rem" as |SF|>
       {{#each @model.STATES as |state|}}
         <SF.Item @label={{state}}>
           <Hds::Form::FileInput::Base mock-state-value={{state}} />
@@ -44,7 +44,7 @@
   <div class="{{if this.showHighlight 'shw-component-form-file-input-layout-highlight'}}">
     <Shw::Text::H3>Content</Shw::Text::H3>
 
-    <Shw::Grid @columns="3" {{style gap="2rem"}} as |SG|>
+    <Shw::Grid @columns="3" @gap="2rem" as |SG|>
       <SG.Item @label="Only label">
         <Hds::Form::FileInput::Field @value="Lorem ipsum dolor" as |F|>
           <F.Label>This is the label text</F.Label>
diff --git a/showcase/app/templates/components/form/radio.hbs b/showcase/app/templates/components/form/radio.hbs
index 4286d53fd9..c0f9e2f28b 100644
--- a/showcase/app/templates/components/form/radio.hbs
+++ b/showcase/app/templates/components/form/radio.hbs
@@ -13,7 +13,7 @@
 
   <Shw::Text::H3>Interaction status</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Unchecked">
       <Hds::Form::Radio::Base aria-label="Unchecked radio" />
     </SF.Item>
@@ -24,7 +24,7 @@
 
   <Shw::Text::H3>States (Base / Disabled)</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     {{#each @model.STATES as |state|}}
       <SF.Item @label={{capitalize state}}>
         <Shw::Grid @columns={{2}} mock-state-value={{state}} mock-state-selector="input" as |SG|>
diff --git a/showcase/app/templates/components/form/select.hbs b/showcase/app/templates/components/form/select.hbs
index cf70f42376..bab530c60a 100644
--- a/showcase/app/templates/components/form/select.hbs
+++ b/showcase/app/templates/components/form/select.hbs
@@ -13,7 +13,7 @@
 
   <Shw::Text::H3>Interaction status</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Default">
       <Hds::Form::Select::Base aria-label="default select" as |C|>
         <C.Options>
@@ -26,7 +26,7 @@
 
   <Shw::Text::H3>States</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     {{#let (array "base" "invalid" "disabled") as |variants|}}
       {{#each @model.STATES as |state|}}
         <SF.Item>
diff --git a/showcase/app/templates/components/form/toggle.hbs b/showcase/app/templates/components/form/toggle.hbs
index 1b5143e733..519b3e4963 100644
--- a/showcase/app/templates/components/form/toggle.hbs
+++ b/showcase/app/templates/components/form/toggle.hbs
@@ -13,7 +13,7 @@
 
   <Shw::Text::H3>Interaction status</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Unchecked">
       <Hds::Form::Toggle::Base aria-label="Unchecked toggle" />
     </SF.Item>
@@ -24,7 +24,7 @@
 
   <Shw::Text::H3>States (Base / Disabled)</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     {{#each @model.STATES as |state|}}
       <SF.Item @label={{capitalize state}}>
         <Shw::Grid @columns={{2}} mock-state-value={{state}} mock-state-selector="input" as |SG|>
diff --git a/showcase/app/templates/components/link/inline.hbs b/showcase/app/templates/components/link/inline.hbs
index bc68d2f9e3..6ca867bb67 100644
--- a/showcase/app/templates/components/link/inline.hbs
+++ b/showcase/app/templates/components/link/inline.hbs
@@ -38,11 +38,7 @@
 
   <Shw::Text::H2>Content</Shw::Text::H2>
 
-  <Shw::Grid
-    @columns={{3}}
-    {{style width="fit-content" grid-template-columns="repeat(3, auto)" gap="1rem 2rem"}}
-    as |SG|
-  >
+  <Shw::Grid @columns={{3}} @gap="1rem 2rem" {{style width="fit-content" grid-template-columns="repeat(3, auto)"}} as |SG|>
     <SG.Item @label="Only text">
       <div class="hds-typography-body-300">
         <Hds::Link::Inline @color="primary" @href="#">Lorem ipsum dolor</Hds::Link::Inline>
diff --git a/showcase/app/templates/components/page-header.hbs b/showcase/app/templates/components/page-header.hbs
index dc972832b0..6ef9088bb9 100644
--- a/showcase/app/templates/components/page-header.hbs
+++ b/showcase/app/templates/components/page-header.hbs
@@ -302,7 +302,7 @@ SPDX-License-Identifier: MPL-2.0
     which stack the content in a single column.
   </Shw::Text::Body>
 
-  <Shw::Flex {{style gap="2.5rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2.5rem" as |SF|>
     {{#let (array "399px" "767px" "100%") as |widths|}}
       {{#each widths as |width|}}
         <SF.Item @label="Container width = {{width}}">
diff --git a/showcase/app/templates/components/reveal.hbs b/showcase/app/templates/components/reveal.hbs
index fb6a2fec50..a583fa1ff3 100644
--- a/showcase/app/templates/components/reveal.hbs
+++ b/showcase/app/templates/components/reveal.hbs
@@ -12,7 +12,7 @@
 
   <Shw::Text::H3>On its own</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="1.5rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="1.5rem" as |SF|>
     <SF.Item @label="With plain text content">
       <Hds::Reveal @text="Developer instructions">
         Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to
@@ -68,7 +68,7 @@
 
   <Shw::Text::H3>Used next to other content</Shw::Text::H3>
 
-  <Shw::Flex @direction="column" {{style gap="1rem"}} as |SF|>
+  <Shw::Flex @direction="column" @gap="1rem" as |SF|>
     <SF.Item @label="Used beneath a form input">
       <Hds::Form::TextInput::Field as |F|>
         <F.Label>Private subnet 1</F.Label>
@@ -108,7 +108,7 @@
   <Shw::Text::H2>States</Shw::Text::H2>
   <Shw::Text::Body>(<strong>Note:</strong> buttons below are inactive)</Shw::Text::Body>
 
-  <Shw::Flex {{style gap="5rem"}} as |SF|>
+  <Shw::Flex @gap="5rem" as |SF|>
     {{#each @model.STATES as |state|}}
       <SF.Item @label={{state}}>
         <Hds::Reveal::Toggle::Button @text="More options" mock-state-value={{state}} />
@@ -122,7 +122,7 @@
 
   <Shw::Text::H3>textWhenOpen</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="5rem"}} as |SF|>
+  <Shw::Flex @gap="5rem" as |SF|>
     <SF.Item @label="Only using required @text">
       <Hds::Reveal @text="Same text label for open and closed">
         <Shw::Placeholder @text="generic content" @height="40" @width="200" />
@@ -138,7 +138,7 @@
 
   <Shw::Text::H3>isOpen</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="5rem"}} as |SF|>
+  <Shw::Flex @gap="5rem" as |SF|>
     <SF.Item @label="Default, isOpen=false">
       <Hds::Reveal @text="More options">
         <Shw::Placeholder @text="generic content" @height="40" @width="200" />
diff --git a/showcase/app/templates/components/rich-tooltip.hbs b/showcase/app/templates/components/rich-tooltip.hbs
index 9056437990..e4ae1589d1 100644
--- a/showcase/app/templates/components/rich-tooltip.hbs
+++ b/showcase/app/templates/components/rich-tooltip.hbs
@@ -122,7 +122,7 @@
 
   <Shw::Text::H2>Interactions</Shw::Text::H2>
 
-  <Shw::Flex {{style gap="8rem"}} as |SF|>
+  <Shw::Flex @gap="8rem" as |SF|>
     <SF.Item as |SFI|>
       <SFI.Label>"Soft" (hover/focus)</SFI.Label>
       <Hds::RichTooltip as |RT|>
@@ -167,7 +167,7 @@
 
   <Shw::Text::H3>Offset</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="5rem" margin-bottom="10rem"}} as |SF|>
+  <Shw::Flex @gap="5rem" {{style margin-bottom="10rem"}} as |SF|>
     <SF.Item @label="Offset: 12 (default)">
       <Hds::RichTooltip @isOpen={{true}} @enableClickEvents={{true}} as |RT|>
         <RT.Toggle @text="Lorem ipsum" @icon="info" @size="medium" />
@@ -288,7 +288,7 @@
 
   <Shw::Text::Body>Scroll within the boxes to see the collision detection in action</Shw::Text::Body>
 
-  <Shw::Grid @columns={{4}} {{style gap="2rem" margin-bottom="6rem"}} as |SF|>
+  <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="6rem"}} as |SF|>
     {{#let (array false true) as |detections|}}
       {{#each detections as |detection|}}
         <SF.Item @forceMinWidth={{true}} @label={{concat "enableCollisionDetection=" detection}}>
@@ -332,7 +332,7 @@
 
   <Shw::Text::Body>HDS classes</Shw::Text::Body>
 
-  <Shw::Grid @columns={{3}} {{style gap="2rem" margin-bottom="6rem"}} as |SG|>
+  <Shw::Grid @columns={{3}} @gap="2rem" {{style margin-bottom="6rem"}} as |SG|>
     <SG.Item @label="Applied to the parent (text+icon with size)">
       <div
         class="hds-typography-display-400 hds-foreground-warning-on-surface hds-surface-warning"
@@ -376,7 +376,7 @@
     </SG.Item>
   </Shw::Grid>
 
-  <Shw::Grid @columns={{3}} {{style gap="2rem" margin-bottom="6rem"}} as |SG|>
+  <Shw::Grid @columns={{3}} @gap="2rem" {{style margin-bottom="6rem"}} as |SG|>
     <SG.Item @label="Applied to the parent (generic)">
       <div
         class="hds-typography-display-400 hds-foreground-warning-on-surface hds-surface-warning"
@@ -419,7 +419,7 @@
 
   <Shw::Text::Body>Using a custom class</Shw::Text::Body>
 
-  <Shw::Grid @columns={{3}} {{style gap="2rem" margin-bottom="6rem"}} as |SG|>
+  <Shw::Grid @columns={{3}} @gap="2rem" {{style margin-bottom="6rem"}} as |SG|>
     <SG.Item @label="Applied to the parent (text+icon with size)">
       <div class="shw-component-rich-tooltip-font-style" {{style width="fit-content"}}>
         Lorem
@@ -463,7 +463,7 @@
 
   <Shw::Text::Body>Style interference</Shw::Text::Body>
 
-  <Shw::Flex {{style gap="2rem" margin-bottom="9rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" {{style margin-bottom="9rem"}} as |SF|>
     <SF.Item @label="Parent has `white-space: nowrap`">
       <div {{style whiteSpace="nowrap"}}>
         <Hds::RichTooltip @isOpen={{true}} as |RT|>
@@ -776,7 +776,7 @@
 
   <Shw::Divider @level={{2}} />
 
-  <Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" as |SF|>
     <SF.Item @label="Within an Alert">
       <Hds::Alert @type="inline" @color="warning" {{style width="600px"}} as |A|>
         <A.Title>Altering admin permissions</A.Title>
@@ -980,7 +980,7 @@
 
   <Shw::Divider @level={{2}} />
 
-  <Shw::Grid @columns={{2}} {{style width="fit-content" gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" {{style width="fit-content"}} as |SG|>
     <SG.Item @label="Button + InfoText">
       <div class="shw-component-rich-tooltip-demo-action-plus-info">
         <Hds::Button @text="Lorem ipsum" @icon="wand" {{on "click" this.onClickButton}} />
@@ -1049,7 +1049,7 @@
 
   <Shw::Text::H4>Content</Shw::Text::H4>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Only text">
       <Hds::RichTooltip::Toggle @text="Lorem ipsum dolor" />
     </SF.Item>
@@ -1107,7 +1107,7 @@
 
   <Shw::Text::H3>Bubble</Shw::Text::H3>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Arrow" class="shw-component-rich-tooltip-arrow-standalone">
       <Shw::Outliner {{style width="fit-content"}}>
         <div class="hds-rich-tooltip">
diff --git a/showcase/app/templates/components/table.hbs b/showcase/app/templates/components/table.hbs
index ec27e7e3ab..1cd62a31d7 100644
--- a/showcase/app/templates/components/table.hbs
+++ b/showcase/app/templates/components/table.hbs
@@ -533,7 +533,7 @@
     </div>
   </div>
 
-  <Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" as |SF|>
     <SF.Item @label="With data model">
       <Hds::Table
         @isSelectable={{true}}
@@ -787,11 +787,11 @@
 
   <Shw::Text::H4 @tag="h3">Density</Shw::Text::H4>
 
-  <Shw::Flex @direction="column" {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @direction="column" @gap="2rem" as |SF|>
     {{#let (array "default" "short" "tall") as |densities|}}
       {{#each densities as |density|}}
         <SF.Item @label={{capitalize density}}>
-          <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+          <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
             {{#let (array false true) as |booleans|}}
               {{#each booleans as |bool|}}
                 <SG.Item>
@@ -839,7 +839,7 @@
 
   <Shw::Text::H4 @tag="h3">Striping</Shw::Text::H4>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     {{#let (array false true) as |booleans|}}
       {{#each booleans as |bool|}}
         <SG.Item>
@@ -1420,7 +1420,7 @@
 
   <Shw::Text::H3>ThSelectable</Shw::Text::H3>
 
-  <Shw::Flex @direction="row" {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @direction="row" @gap="2rem" as |SF|>
     {{#let (array false true) as |booleans|}}
       {{#each booleans as |bool|}}
         <SF.Item @label={{if bool "Selected" "Deselected"}}>
diff --git a/showcase/app/templates/components/text.hbs b/showcase/app/templates/components/text.hbs
index 07bd60fbfa..a8f25143d2 100644
--- a/showcase/app/templates/components/text.hbs
+++ b/showcase/app/templates/components/text.hbs
@@ -84,7 +84,7 @@
   <Shw::Text::H2>Color</Shw::Text::H2>
 
   <Shw::Text::H4 @tag="h3">Color inheritance</Shw::Text::H4>
-  <Shw::Flex @direction="row" {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @direction="row" @gap="2rem" as |SF|>
     <SF.Item @label="parent with no specific color">
       <div>
         <Hds::Text::Body @size="300" @tag="p">Lorem ipsum dolor</Hds::Text::Body>
@@ -98,7 +98,7 @@
   </Shw::Flex>
 
   <Shw::Text::H4 @tag="h3">Pre-defined colors</Shw::Text::H4>
-  <Shw::Flex @direction="row" {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @direction="row" @gap="2rem" as |SF|>
     {{#each this.model.AVAILABLE_COLORS as |color|}}
       <SF.Item @label={{color}}>
         <div class="shw-component-text-sample-color--{{color}}">
@@ -111,7 +111,7 @@
   </Shw::Flex>
 
   <Shw::Text::H4 @tag="h3">Custom colors</Shw::Text::H4>
-  <Shw::Flex @direction="row" {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @direction="row" @gap="2rem" as |SF|>
     <SF.Item @label="text with #e91e63 color">
       <Hds::Text::Body @size="300" @tag="p" @color="#e91e63">Lorem ipsum dolor</Hds::Text::Body>
     </SF.Item>
diff --git a/showcase/app/templates/components/tooltip.hbs b/showcase/app/templates/components/tooltip.hbs
index 9b7edaf94c..c46cf9f2b5 100644
--- a/showcase/app/templates/components/tooltip.hbs
+++ b/showcase/app/templates/components/tooltip.hbs
@@ -127,7 +127,7 @@
 
   <Shw::Text::Body>HDS classes</Shw::Text::Body>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Applied to parent">
       <div class="hds-typography-display-400 hds-foreground-warning-on-surface hds-surface-warning">
         <Hds::TooltipButton @text="Here is more info" @isInline={{false}} aria-label="Information">
@@ -154,7 +154,7 @@
 
   <Shw::Text::Body>Using a custom class</Shw::Text::Body>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Applied to parent">
       <div class="shw-component-tooltip-font-style">
         <Hds::TooltipButton @text="Here is more info" @isInline={{false}} aria-label="Information">
@@ -178,7 +178,7 @@
 
   <Shw::Text::Body>Style interference</Shw::Text::Body>
 
-  <Shw::Flex {{style gap="2rem"}} as |SF|>
+  <Shw::Flex @gap="2rem" as |SF|>
     <SF.Item @label="Parent has `white-space: nowrap`">
       <div {{style whiteSpace="nowrap"}}>
         <Hds::TooltipButton
@@ -253,7 +253,7 @@
 
   <Shw::Text::H4>With icon as opener content</Shw::Text::H4>
 
-  <Shw::Flex {{style gap="5rem"}} as |SF|>
+  <Shw::Flex @gap="5rem" as |SF|>
     {{#each @model.STATES as |state|}}
       <SF.Item @label={{state}}>
         {{#if (or (eq state "hover") (eq state "focus"))}}
@@ -274,7 +274,7 @@
 
   <Shw::Text::H4>With text as opener content</Shw::Text::H4>
 
-  <Shw::Flex {{style gap="5rem"}} as |SF|>
+  <Shw::Flex @gap="5rem" as |SF|>
     {{#each @model.STATES as |state|}}
       <SF.Item @label={{state}}>
         {{#if (or (eq state "hover") (eq state "focus"))}}
@@ -307,7 +307,7 @@
 
   <Shw::Text::H4>Offset</Shw::Text::H4>
 
-  <Shw::Flex {{style gap="5rem" margin-top="4rem"}} as |SF|>
+  <Shw::Flex @gap="5rem" {{style margin-top="4rem"}} as |SF|>
     <SF.Item>
       <Hds::TooltipButton
         @text="More info"
diff --git a/showcase/app/templates/layouts/app-frame.hbs b/showcase/app/templates/layouts/app-frame.hbs
index ee50292c0e..84b90aca00 100644
--- a/showcase/app/templates/layouts/app-frame.hbs
+++ b/showcase/app/templates/layouts/app-frame.hbs
@@ -11,7 +11,7 @@
 
   <Shw::Text::H2>Containers</Shw::Text::H2>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="With header/sidebar/main/footer">
       <div class="shw-layout-app-frame-wrapper">
         <Hds::AppFrame as |Frame|>
@@ -128,7 +128,7 @@
     {{if this.show3DVisualization "Hide" "Show"}}
   </button>
 
-  <Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item>
       <div
         class="shw-layout-app-frame-wrapper shw-layout-app-frame-wrapper--with-3d
diff --git a/showcase/app/templates/utilities/popover-primitive.hbs b/showcase/app/templates/utilities/popover-primitive.hbs
index f8e75d4ad6..405bf60aa1 100644
--- a/showcase/app/templates/utilities/popover-primitive.hbs
+++ b/showcase/app/templates/utilities/popover-primitive.hbs
@@ -11,7 +11,7 @@
 
   <Shw::Text::H2>Base elements</Shw::Text::H2>
 
-  <Shw::Grid @columns={{4}} {{style gap="2rem" margin-bottom="6rem"}} as |SG|>
+  <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="6rem"}} as |SG|>
     <SG.Item @label="Base">
       <Hds::PopoverPrimitive @isOpen={{true}} as |PP|>
         <div class="shw-utilities-popover-primitive-fake-container" {{PP.setupPrimitiveContainer}}>
@@ -129,7 +129,7 @@
   {{#let (array false true) as |booleans|}}
     {{#each booleans as |popoverHasArrow|}}
 
-      <Shw::Grid @columns={{4}} {{style gap="2rem" margin-bottom="8rem"}} as |SF|>
+      <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="8rem"}} as |SF|>
         {{#let
           (array
             (hash label="not set" offset=0)
@@ -175,7 +175,7 @@
 
   <Shw::Text::H4>arrowPadding</Shw::Text::H4>
 
-  <Shw::Grid @columns={{4}} {{style gap="2rem" margin-bottom="8rem"}} as |SF|>
+  <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="8rem"}} as |SF|>
     {{#let (array (hash label="not set") (hash label="32" arrowPadding=32)) as |arrowPaddingVariants|}}
       {{#each arrowPaddingVariants as |arrowPaddingVariant count|}}
         <SF.Item @label={{get arrowPaddingVariant "label"}}>
@@ -212,7 +212,7 @@
 
   <Shw::Text::H3>Strategy</Shw::Text::H3>
 
-  <Shw::Grid @columns={{4}} {{style gap="2rem" margin-bottom="8rem"}} as |SF|>
+  <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="8rem"}} as |SF|>
     {{#let (array "absolute" "fixed") as |strategies|}}
       {{#each strategies as |strategy|}}
         <SF.Item @label={{strategy}}>
@@ -247,7 +247,7 @@
 
   <Shw::Text::Body>Scroll within the boxes to see the collision detection in action</Shw::Text::Body>
 
-  <Shw::Grid @columns={{4}} {{style gap="2rem" margin-bottom="6rem"}} as |SF|>
+  <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="6rem"}} as |SF|>
     {{#let (array false true null null "flip" "shift" "auto" null) as |detections|}}
       {{#each detections as |detection|}}
         {{#if (eq detection null)}}
@@ -293,7 +293,7 @@
 
   <Shw::Text::H2>Interaction</Shw::Text::H2>
 
-  <Shw::Grid @columns={{4}} {{style gap="2rem" align-items="center"}} as |SG|>
+  <Shw::Grid @columns={{4}} @gap="2rem" {{style align-items="center"}} as |SG|>
     {{#let (array "soft" "click") as |interactionVariants|}}
       {{#each interactionVariants as |interaction|}}
         <SG.Item @label={{if (eq interaction "soft") 'Hover/Focus ("Soft")' "Click"}}>
@@ -350,7 +350,7 @@
 
   {{#let (array false true) as |booleans|}}
     {{#each booleans as |isOpen|}}
-      <Shw::Grid @columns={{3}} {{style gap="2rem" margin-bottom="4rem"}} as |SG|>
+      <Shw::Grid @columns={{3}} @gap="2rem" {{style margin-bottom="4rem"}} as |SG|>
         {{#let (array "none" "soft" "click") as |interactionVariants|}}
           {{#each interactionVariants as |interaction|}}
             <SG.Item @label={{concat interaction " / isOpen={{" isOpen "}}"}}>

From 65e94d30cd4dfdd870b82e244ba433601f807247 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Mon, 24 Jun 2024 14:58:36 +0100
Subject: [PATCH 4/7] converted `@gap` value from `px` to `rem`

---
 showcase/app/templates/components/form/base-elements.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/showcase/app/templates/components/form/base-elements.hbs b/showcase/app/templates/components/form/base-elements.hbs
index 7e5b68030b..b8c3c87d8b 100644
--- a/showcase/app/templates/components/form/base-elements.hbs
+++ b/showcase/app/templates/components/form/base-elements.hbs
@@ -703,7 +703,7 @@
   <div class="{{if this.showHighlight 'shw-component-form-base-elements-layout-highlight'}}">
 
     <Shw::Text::H3>Layout</Shw::Text::H3>
-    <Shw::Flex @gap="48px" as |SF|>
+    <Shw::Flex @gap="3rem" as |SF|>
       {{#let (array "vertical" "horizontal") as |layouts|}}
         {{#each layouts as |layout|}}
           <SF.Item @label={{capitalize layout}}>

From 1bec001819e7975bcfcf3d25d34581b74ca015f8 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Mon, 24 Jun 2024 15:18:56 +0100
Subject: [PATCH 5/7] updated `Shw:Flex` and `Shw::Grid` components to support
 `@gap` argument

---
 showcase/app/components/shw/flex/index.hbs |  2 +-
 showcase/app/components/shw/flex/index.js  | 10 ++++++++++
 showcase/app/components/shw/grid/index.hbs |  2 +-
 showcase/app/components/shw/grid/index.js  | 10 ++++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/showcase/app/components/shw/flex/index.hbs b/showcase/app/components/shw/flex/index.hbs
index a14352a96f..288e32cfee 100644
--- a/showcase/app/components/shw/flex/index.hbs
+++ b/showcase/app/components/shw/flex/index.hbs
@@ -8,7 +8,7 @@
     <Shw::Label>{{@label}}</Shw::Label>
   {{/if}}
   {{yield (hash Label=(component "shw/label"))}}
-  <div class="shw-flex__items" ...attributes>
+  <div class="shw-flex__items" style={{this.itemsStyle}} ...attributes>
     {{yield (hash Item=(component "shw/flex/item"))}}
   </div>
 </div>
\ No newline at end of file
diff --git a/showcase/app/components/shw/flex/index.js b/showcase/app/components/shw/flex/index.js
index cb7c42fb3e..c7251d6dbf 100644
--- a/showcase/app/components/shw/flex/index.js
+++ b/showcase/app/components/shw/flex/index.js
@@ -4,10 +4,20 @@
  */
 
 import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
 
 export default class FlexIndexComponent extends Component {
   direction = this.args.direction ?? 'row';
 
+  get itemsStyle() {
+    let styles = [];
+    if (this.args.gap) {
+      styles.push(`gap: ${this.args.gap}`);
+    }
+
+    return styles.length > 0 ? htmlSafe(styles.join('; ')) : undefined;
+  }
+
   get classNames() {
     let classes = ['shw-flex'];
 
diff --git a/showcase/app/components/shw/grid/index.hbs b/showcase/app/components/shw/grid/index.hbs
index 68f2cf1745..d2ea866532 100644
--- a/showcase/app/components/shw/grid/index.hbs
+++ b/showcase/app/components/shw/grid/index.hbs
@@ -8,7 +8,7 @@
     <Shw::Label>{{@label}}</Shw::Label>
   {{/if}}
   {{yield (hash Label=(component "shw/label"))}}
-  <div class="shw-grid__items" ...attributes>
+  <div class="shw-grid__items" style={{this.itemsStyle}} ...attributes>
     {{yield (hash Item=(component "shw/grid/item"))}}
   </div>
 </div>
\ No newline at end of file
diff --git a/showcase/app/components/shw/grid/index.js b/showcase/app/components/shw/grid/index.js
index f0584f7a63..b25f21343b 100644
--- a/showcase/app/components/shw/grid/index.js
+++ b/showcase/app/components/shw/grid/index.js
@@ -4,6 +4,7 @@
  */
 
 import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
 import { assert } from '@ember/debug';
 
 export default class GridIndexComponent extends Component {
@@ -15,6 +16,15 @@ export default class GridIndexComponent extends Component {
     return columns;
   }
 
+  get itemsStyle() {
+    let styles = [];
+    if (this.args.gap) {
+      styles.push(`gap: ${this.args.gap}`);
+    }
+
+    return styles.length > 0 ? htmlSafe(styles.join('; ')) : undefined;
+  }
+
   get classNames() {
     let classes = ['shw-grid'];
 

From 7a6f179b8a20278641126f9a05d00c2bb5c0b271 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Mon, 24 Jun 2024 15:20:00 +0100
Subject: [PATCH 6/7] removed codemod (not needed anymore)

---
 showcase/codemods/.gitignore                  |  2 -
 showcase/codemods/README.md                   |  8 ---
 showcase/codemods/bin/cli.js                  | 13 ----
 .../transforms/layout-component-gap/index.js  | 71 -------------------
 4 files changed, 94 deletions(-)
 delete mode 100644 showcase/codemods/.gitignore
 delete mode 100644 showcase/codemods/README.md
 delete mode 100755 showcase/codemods/bin/cli.js
 delete mode 100644 showcase/codemods/transforms/layout-component-gap/index.js

diff --git a/showcase/codemods/.gitignore b/showcase/codemods/.gitignore
deleted file mode 100644
index 568cda7371..0000000000
--- a/showcase/codemods/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/node_modules
-/.eslintcache
\ No newline at end of file
diff --git a/showcase/codemods/README.md b/showcase/codemods/README.md
deleted file mode 100644
index 1686bd0a37..0000000000
--- a/showcase/codemods/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# codemods
-
-To run this codemod:
-
-```bash
-cd showcase/
-node ./codemods/bin/cli.js layout-component-gap app/templates/**/*.hbs
-```
diff --git a/showcase/codemods/bin/cli.js b/showcase/codemods/bin/cli.js
deleted file mode 100755
index 2fc8b09137..0000000000
--- a/showcase/codemods/bin/cli.js
+++ /dev/null
@@ -1,13 +0,0 @@
-#!/usr/bin/env node
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-'use strict';
-
-require('codemod-cli').runTransform(
-  __dirname,
-  process.argv[2] /* transform name */,
-  process.argv.slice(3) /* paths or globs */
-);
diff --git a/showcase/codemods/transforms/layout-component-gap/index.js b/showcase/codemods/transforms/layout-component-gap/index.js
deleted file mode 100644
index 699cb267bb..0000000000
--- a/showcase/codemods/transforms/layout-component-gap/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-module.exports = function ({ source /*, path*/ }, { parse, visit }) {
-  const ast = parse(source);
-
-  return visit(ast, (env) => {
-    let { builders: b } = env.syntax;
-
-    return {
-      ElementNode(node) {
-        if (node.tag === 'Shw::Grid' || node.tag === 'Shw::Flex') {
-          // look up for `@gap` (it means it's already been processed)
-          const gapAttr = node.attributes.find((a) => a.name === '@gap');
-
-          if (!gapAttr) {
-            // look up for `{{style}}`
-            const styleModifier = node.modifiers.find(
-              (m) => m.path.original === 'style'
-            );
-
-            if (styleModifier) {
-              // look up for `{{style gap}}`
-              const styleModifierGapEntry = styleModifier.hash.pairs.find(
-                (p) => p.key === 'gap'
-              );
-
-              if (styleModifierGapEntry) {
-                // add the `@gap` argument
-                node.attributes.push(
-                  b.attr('@gap', styleModifierGapEntry.value)
-                );
-
-                // remove the `gap` value from the `{{style}}` modifier
-                const outputStyleModifierPairs =
-                  styleModifier.hash.pairs.filter((p) => p.key !== 'gap');
-
-                // re-assign the filtered pairs to the `{{style}}` modifier
-                styleModifier.hash.pairs = outputStyleModifierPairs;
-
-                // remove entirely the `{{style}}` modifier if it doesn't have pairs left
-                const outputModifiers = node.modifiers.filter(
-                  (m) => m?.hash?.pairs?.length > 0
-                );
-
-                // re-assign the filtered modifiers to the element
-                node.modifiers = outputModifiers;
-
-                return [
-                  b.element(
-                    { name: node.tag, selfClosing: false },
-                    {
-                      attrs: node.attributes,
-                      children: node.children,
-                      modifiers: node.modifiers,
-                      blockParams: node.blockParams,
-                    }
-                  ),
-                ];
-              }
-            }
-          }
-        }
-      },
-    };
-  });
-};
-
-module.exports.type = 'hbs';

From 7a2f505f90d149b84e9bd08657bd2cbe6c49a616 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Mon, 24 Jun 2024 16:39:01 +0100
Subject: [PATCH 7/7] fixed linting

---
 showcase/app/templates/components/accordion.hbs         | 7 ++++++-
 showcase/app/templates/components/form/super-select.hbs | 4 +---
 showcase/app/templates/components/link/inline.hbs       | 7 ++++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/showcase/app/templates/components/accordion.hbs b/showcase/app/templates/components/accordion.hbs
index a2b0f3f11d..4f6d42e36c 100644
--- a/showcase/app/templates/components/accordion.hbs
+++ b/showcase/app/templates/components/accordion.hbs
@@ -375,7 +375,12 @@
 
   {{#let (array false true) as |booleans|}}
     {{#each booleans as |bool|}}
-      <Shw::Flex @label="parentContainsInteractive={{bool}}" @gap="2rem" {{style justifyContent="space-between"}} as |SF|>
+      <Shw::Flex
+        @label="parentContainsInteractive={{bool}}"
+        @gap="2rem"
+        {{style justifyContent="space-between"}}
+        as |SF|
+      >
         {{#each @model.STATES as |state|}}
           <SF.Item @label={{state}}>
             <div class="shw-component-accordion-standalone-button">
diff --git a/showcase/app/templates/components/form/super-select.hbs b/showcase/app/templates/components/form/super-select.hbs
index aad16b5160..543db2d23c 100644
--- a/showcase/app/templates/components/form/super-select.hbs
+++ b/showcase/app/templates/components/form/super-select.hbs
@@ -1221,9 +1221,7 @@
                   >
                     <Shw::Placeholder @text="Second group - Generic content" @height="40px" />
                   </Hds::Form::SuperSelect::OptionGroup>
-                  <Hds::Form::SuperSelect::OptionGroup
-                    @group={{hash groupName="Title for third group (with options)"}}
-                  >
+                  <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for third group (with options)"}}>
                     {{! template-lint-disable require-context-role }}
                     <li class="ember-power-select-option" role="option" mock-state-value="hover">
                       Option 1
diff --git a/showcase/app/templates/components/link/inline.hbs b/showcase/app/templates/components/link/inline.hbs
index 6ca867bb67..e7fe008a5b 100644
--- a/showcase/app/templates/components/link/inline.hbs
+++ b/showcase/app/templates/components/link/inline.hbs
@@ -38,7 +38,12 @@
 
   <Shw::Text::H2>Content</Shw::Text::H2>
 
-  <Shw::Grid @columns={{3}} @gap="1rem 2rem" {{style width="fit-content" grid-template-columns="repeat(3, auto)"}} as |SG|>
+  <Shw::Grid
+    @columns={{3}}
+    @gap="1rem 2rem"
+    {{style width="fit-content" grid-template-columns="repeat(3, auto)"}}
+    as |SG|
+  >
     <SG.Item @label="Only text">
       <div class="hds-typography-body-300">
         <Hds::Link::Inline @color="primary" @href="#">Lorem ipsum dolor</Hds::Link::Inline>