From 35b3b431aeb6f67f5746a961c744cfd647d12f58 Mon Sep 17 00:00:00 2001
From: nickonometry <nick.andrews@tylertech.com>
Date: Thu, 22 Feb 2024 09:03:39 -0500
Subject: [PATCH] chore(stack): added comments to stack.ts for the
 documentation site

---
 src/lib/stack/stack.ts | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/lib/stack/stack.ts b/src/lib/stack/stack.ts
index a3486edc4..09d88ed67 100644
--- a/src/lib/stack/stack.ts
+++ b/src/lib/stack/stack.ts
@@ -24,6 +24,39 @@ declare global {
 
 /**
  * @tag forge-stack
+ * 
+ * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
+ * 
+ * @description
+ * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox. 
+ * It's simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be 
+ * arranged horizontally or vertically with a specific gap inbetween. Rather than having to inline a style or create a class for 
+ * these scenarios, you can reach for the stack. This keeps developers within the template and prevents jumping around from template 
+ * to CSS, and helps minimize the number of CSS classes being used.
+ * 
+ * @property {boolean} inline - Sets the direction of child items to be horizontal.
+ * @property {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
+ * @property {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
+ * @property {string} gap - Controls the amount of space between child elements within a stack.
+ * @property {StackAlignment} alignment - Controls the align-items property of the stack.
+ * @property {StackAlignment} justify - Controls the justify-content property of the stack.
+ * 
+ * @attribute {boolean} inline - Sets the direction of child items to be horizontal.
+ * @attribute {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
+ * @attribute {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
+ * @attribute {string} gap - Controls the amount of space between child elements within a stack.
+ * @attribute {StackAlignment} alignment - Controls the align-items property of the stack.
+ * @attribute {StackAlignment} justify - Controls the justify-content property of the stack.
+ * 
+ * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
+ * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.
+ * @cssproperty --forge-stack-gap - Controls the gap between each child element within a stack.
+ * @cssproperty --forge-stack-height - Controls the height of the root stack element.
+ * @cssproperty --forge-stack-stretch - Controls the flex shorthand property of a child element within the stack.
+ * 
+ * @csspart root - The root container element.
+ * 
+ * @slot - The default/unnamed slot for stack content.
  */
 @CustomElement({
   name: STACK_CONSTANTS.elementName