docs: updates

Author: chrisfalaska

docs/api.md

@@ -11,7 +11,7 @@ The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphi
 | `borderColor`         | `border-color` |           | `String`                              | "undefined" | Sets the border color around the tail.           |
 | `borderWidth`         | `border-width` |           | `String`                              | "undefined" | Sets the border width around the tail.           |
 | `hasBorder`           |                | readonly  | `boolean`                             |             | Checks if tail has border properties defined.    |
-| `href`                | `href`         |           | `String`                              | "undefined" | When provided, makes the tail clickable as a hyperlink. |
+| `href`                | `href`         |           | `String`                              | "undefined" | When provided, makes the tail clickable using auro-hyperlink. |
 | `isInGroup`           |                | readonly  | `boolean`                             |             | Checks if this tail is inside an auro-tail-group element. |
 | `isInHorizontalGroup` |                | readonly  | `boolean`                             |             | Checks if this tail is in a horizontal group layout. |
 | `labelTypeClass`      |                | readonly  | `string`                              |             | Gets the appropriate CSS type class based on tail size. |
@@ -34,16 +34,8 @@ The auro-tail-group element displays multiple auro-tail elements in a grouped la
 
 ## Properties
 
-| Property      | Attribute      | Type     | Default      | Description                                      |
-|---------------|----------------|----------|--------------|--------------------------------------------------|
-| `borderColor` | `border-color` | `String` | "undefined"  | Sets the border color for all child tails in the group. Does not apply to diagonal layout. |
-| `layout`      | `layout`       | `String` | "horizontal" | Sets the layout direction for the group ('horizontal' or 'vertical'). Default is 'horizontal'. |
-| `size`        | `size`         | `String` | "lg"         | Sets the size for all child tails in the group ('xs', 'sm', 'md', 'lg'). Default is 'lg'. xl and 2xl sizes are not supported in groups. |
-
-## Methods
-
-| Method             | Type                                  | Description                                      |
-|--------------------|---------------------------------------|--------------------------------------------------|
-| `createRenderRoot` | `(): HTMLElement \| DocumentFragment` | Prevent shadow DOM creation for unsupported sizes |
-| `handleSlotChange` | `(): void`                            | Handle slot changes to update tails              |
-| `updateChildTails` | `(): void`                            | Manages child tails - removes excess tails and updates sizes |
+| Property      | Attribute      | Type                       | Default      | Description                                      |
+|---------------|----------------|----------------------------|--------------|--------------------------------------------------|
+| `borderColor` | `border-color` | `String`                   | "undefined"  | Sets the border color for all child tails in the group. Does not apply to diagonal layout. |
+| `layout`      | `layout`       | `'horizontal'\|'diagonal'` | "horizontal" | Sets the layout direction for the group.         |
+| `size`        | `size`         | `'xs'\|'sm'\|'md'\|'lg'`   | "lg"         | Sets the size for all child tails in the group.  |

docs/partials/index.md

@@ -34,7 +34,7 @@ This file is generated based on a template fetched from `./docs/partials/index.m
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-tail` custom element is defined automatically.
 
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroTail.register(name)` method and pass in a unique name.
-         
+           
 ```js
 import { AuroTail } from '@aurodesignsystem/auro-tail/class';
 

src/auro-tail-group.js

@@ -6,8 +6,8 @@ import groupStyleCss from './styles/auro-tail-group.scss';
 /**
  * The auro-tail-group element displays multiple auro-tail elements in a grouped layout. When tails are placed within a group, labels/links and badge logos are not displayed, and only two tails can be paired together.
  *
- * @attr {String} layout - Sets the layout direction for the group ('horizontal' or 'vertical'). Default is 'horizontal'.
- * @attr {String} size - Sets the size for all child tails in the group ('xs', 'sm', 'md', 'lg'). Default is 'lg'. xl and 2xl sizes are not supported in groups.
+ * @attr {'horizontal'|'diagonal'} layout - Sets the layout direction for the group.
+ * @attr {'xs'|'sm'|'md'|'lg'} size - Sets the size for all child tails in the group.
  * @attr {String} border-color - Sets the border color for all child tails in the group. Does not apply to diagonal layout.
  */
 export class AuroTailGroup extends LitElement {
@@ -33,7 +33,9 @@ export class AuroTailGroup extends LitElement {
 
   constructor() {
     super();
+    /** @type {'horizontal'|'diagonal'} */
     this.layout = 'horizontal';
+    /** @type {'xs'|'sm'|'md'|'lg'} */
     this.size = 'lg';
     /** @type {string|undefined} */
     this.borderColor = undefined;
@@ -46,7 +48,9 @@ export class AuroTailGroup extends LitElement {
 
   /**
    * Prevent shadow DOM creation for unsupported sizes
+   * @private
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   createRenderRoot() {
     if (!GROUPS_SIZES.includes(this.size)) {
       return this;
@@ -76,6 +80,7 @@ export class AuroTailGroup extends LitElement {
 
   /**
    * Manages child tails - removes excess tails and updates sizes
+   * @private
    */
   updateChildTails() {
     // Small delay to ensure slotted content is available
@@ -109,6 +114,7 @@ export class AuroTailGroup extends LitElement {
 
   /**
    * Handle slot changes to update tails
+   * @private
    */
   handleSlotChange() {
     this.updateChildTails();

src/auro-tail.js

@@ -31,7 +31,7 @@ import styleCss from './styles/auro-tail.scss';
  * @attr {Boolean} outline - Renders the tail with an outline style.
  * @attr {String} border-width - Sets the border width around the tail.
  * @attr {String} border-color - Sets the border color around the tail.
- * @attr {String} href - When provided, makes the tail clickable as a hyperlink.
+ * @attr {String} href - When provided, makes the tail clickable using auro-hyperlink.
  *
  * @fires {CustomEvent<{ href: string }>} href-click - Fired when the auro-hyperlink is clicked.
  */