move flex styles to template to fix some minor style overrides

libs/components/src/link/link.component.html

@@ -1,9 +1,11 @@
-@if (startIcon()) {
-  <i [class]="['bwi', startIcon()]" aria-hidden="true"></i>
-}
-<span>
-  <ng-content></ng-content>
+<span class="tw-flex tw-gap-2 tw-items-center">
+  @if (startIcon()) {
+    <i [class]="['bwi', startIcon()]" aria-hidden="true"></i>
+  }
+  <span>
+    <ng-content></ng-content>
+  </span>
+  @if (endIcon()) {
+    <i [class]="['bwi', endIcon()]" aria-hidden="true"></i>
+  }
 </span>
-@if (endIcon()) {
-  <i [class]="['bwi', endIcon()]" aria-hidden="true"></i>
-}

libs/components/src/link/link.component.ts

@@ -51,9 +51,6 @@ const commonStyles = [
   "tw-border-0",
   "tw-border-none",
   "tw-rounded",
-  "tw-inline-flex",
-  "tw-items-center",
-  "tw-gap-2",
   "tw-transition",
   "tw-no-underline",
   "tw-cursor-pointer",
@@ -137,7 +134,9 @@ export class LinkComponent {
 
   readonly classList = computed(() => {
     const verticalInset = this.isButton ? "0.25rem" : "0.125rem";
-    return [`before:-tw-inset-y-[${verticalInset}]`]
+    const displayStyle = this.isButton ? "inline-block" : "inline-flex";
+
+    return [`before:-tw-inset-y-[${verticalInset}]`, `tw-${displayStyle}`]
       .concat(commonStyles)
       .concat(linkStyles[this.linkType()] ?? []);
   });

libs/components/src/link/link.stories.ts

@@ -261,7 +261,7 @@ export const WithIcons: Story = {
         <a bitLink [linkType]="linkType" href="#" endIcon="bwi-external-link">External link</a>
       </div>
       <div class="tw-block tw-p-2">
-        <a bitLink [linkType]="linkType" href="#" startIcon="bwi-arrow-left" endIcon="bwi-arrow-right">Both icons</a>
+        <a bitLink [linkType]="linkType" href="#" startIcon="bwi-angle-left" endIcon="bwi-angle-right">Both icons</a>
       </div>
       <div class="tw-block tw-p-2">
         <button type="button" bitLink [linkType]="linkType" startIcon="bwi-plus-circle">Add item</button>