From cf226441c04ea65f617144dd1ae03d7d78e14c4e Mon Sep 17 00:00:00 2001
From: Daniela Carvalho <8230126@estg.ipp.pt>
Date: Fri, 29 May 2026 10:58:00 +0100
Subject: [PATCH 1/2] feat: enhance dropdown icon triggers with ghost and
 outline styles

---
 .../hestia-ui/src/lib/menu/menu.component.ts  | 20 +++++++++++++---
 .../hestia-ui/src/lib/menu/menu.stories.ts    | 24 +++++++++++++++++--
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/projects/hestia-ui/src/lib/menu/menu.component.ts b/projects/hestia-ui/src/lib/menu/menu.component.ts
index 5336ef1..5924df6 100644
--- a/projects/hestia-ui/src/lib/menu/menu.component.ts
+++ b/projects/hestia-ui/src/lib/menu/menu.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   Directive,
   TemplateRef,
-  booleanAttribute,
   contentChildren,
   input,
   model,
@@ -46,7 +45,8 @@ export class HMenuItemTemplateDirective<T = string> {
         [menu]="menuRef"
         type="button"
         class="h-dropdown-trigger"
-        [class.h-dropdown-trigger--icon]="iconTrigger()"
+        [class.h-dropdown-trigger--icon]="iconTrigger() === 'ghost'"
+        [class.h-dropdown-trigger--icon-outline]="iconTrigger() === 'outline'"
       >
         <ng-content select="[hTrigger]" />
       </button>
@@ -130,6 +130,20 @@ export class HMenuItemTemplateDirective<T = string> {
         background: var(--h-muted);
       }
 
+      .h-dropdown-trigger--icon-outline {
+        padding: 0;
+        width: 36px;
+        height: 36px;
+        justify-content: center;
+        border: 1px solid var(--h-border);
+        background: var(--h-card);
+        color: var(--h-foreground);
+        border-radius: 10px;
+      }
+      .h-dropdown-trigger--icon-outline:hover {
+        background: var(--h-muted);
+      }
+
       .h-dropdown-panel {
         position: absolute;
         top: calc(100% + 6px);
@@ -198,6 +212,6 @@ export class HMenuItemTemplateDirective<T = string> {
 })
 export class HDropdownComponent<T = string> {
   readonly items = input<HMenuItemData<T>[]>([]);
-  readonly iconTrigger = input(false, { transform: booleanAttribute });
+  readonly iconTrigger = input<'ghost' | 'outline' | false>(false);
   readonly itemSelected = output<T>();
 }
diff --git a/projects/hestia-ui/src/lib/menu/menu.stories.ts b/projects/hestia-ui/src/lib/menu/menu.stories.ts
index c85606d..daa32b0 100644
--- a/projects/hestia-ui/src/lib/menu/menu.stories.ts
+++ b/projects/hestia-ui/src/lib/menu/menu.stories.ts
@@ -56,7 +56,7 @@ export const WithIcons: Story = {
   }),
 };
 
-export const IconTrigger: Story = {
+export const IconTriggerGhost: Story = {
   render: () => ({
     props: {
       items: [
@@ -68,7 +68,27 @@ export const IconTrigger: Story = {
     },
     template: `
       <div style="height:200px;padding:16px;">
-        <h-dropdown [items]="items" [iconTrigger]="true">
+        <h-dropdown [items]="items" iconTrigger="ghost">
+          <span hTrigger>⋯</span>
+        </h-dropdown>
+      </div>
+    `,
+    moduleMetadata: { imports: [HDropdownComponent] },
+  }),
+};
+
+export const IconTriggerOutline: Story = {
+  render: () => ({
+    props: {
+      items: [
+        { value: 'template1', label: 'Acabamento Básico' },
+        { value: 'template2', label: 'Instruções de Etiqueta' },
+        { value: 'template3', label: 'Lavagem Stone Wash' },
+      ],
+    },
+    template: `
+      <div style="height:200px;padding:16px;">
+        <h-dropdown [items]="items" iconTrigger="outline">
           <span hTrigger>⋯</span>
         </h-dropdown>
       </div>

From 37798b1a14b7f72de66a6a345a07e93c3769a147 Mon Sep 17 00:00:00 2001
From: Daniela Carvalho <8230126@estg.ipp.pt>
Date: Fri, 29 May 2026 11:11:09 +0100
Subject: [PATCH 2/2] feat: enhance iconTrigger input with transformation for
 improved value handling

---
 projects/hestia-ui/src/lib/menu/menu.component.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/hestia-ui/src/lib/menu/menu.component.ts b/projects/hestia-ui/src/lib/menu/menu.component.ts
index 5924df6..1d4f001 100644
--- a/projects/hestia-ui/src/lib/menu/menu.component.ts
+++ b/projects/hestia-ui/src/lib/menu/menu.component.ts
@@ -212,6 +212,9 @@ export class HMenuItemTemplateDirective<T = string> {
 })
 export class HDropdownComponent<T = string> {
   readonly items = input<HMenuItemData<T>[]>([]);
-  readonly iconTrigger = input<'ghost' | 'outline' | false>(false);
+  readonly iconTrigger = input<'ghost' | 'outline' | false, 'ghost' | 'outline' | boolean | string>(
+    false,
+    { transform: (v) => (v === true || v === '' ? 'ghost' : (v || false) as 'ghost' | 'outline' | false) }
+  );
   readonly itemSelected = output<T>();
 }