@aurodesignsystem-dev/auro-tail 0.0.0-pr6.0 → 0.0.0-pr6.10

package/custom-elements.json

@@ -263,6 +263,30 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "_getBorderWidthValue",
+              "parameters": [
+                {
+                  "name": "resolvedBorderWidth",
+                  "description": "Normalized border width from props",
+                  "type": {
+                    "text": "string|undefined"
+                  }
+                }
+              ],
+              "description": "Determines the border width value to set as a CSS custom property.\nReturns null if border-width should not be set.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string|null"
+                }
+              },
+              "inheritedFrom": {
+                "name": "AuroTail",
+                "module": "src/auro-tail.js"
+              }
+            },
             {
               "kind": "method",
               "name": "_handleLinkClick",
@@ -398,6 +422,15 @@
                 "module": "src/auro-tail.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "hyperlinkTag",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "AuroTail",
+                "module": "src/auro-tail.js"
+              }
+            },
             {
               "kind": "field",
               "name": "iconTag",
@@ -407,6 +440,21 @@
                 "module": "src/auro-tail.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "isInDiagonalGroup",
+              "description": "Checks if this tail is in a diagonal group layout.",
+              "readonly": true,
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "AuroTail",
+                "module": "src/auro-tail.js"
+              }
+            },
             {
               "kind": "field",
               "name": "isInGroup",
@@ -746,6 +794,26 @@
           "description": "The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications.",
           "name": "AuroTail",
           "members": [
+            {
+              "kind": "method",
+              "name": "_getBorderWidthValue",
+              "parameters": [
+                {
+                  "name": "resolvedBorderWidth",
+                  "description": "Normalized border width from props",
+                  "type": {
+                    "text": "string|undefined"
+                  }
+                }
+              ],
+              "description": "Determines the border width value to set as a CSS custom property.\nReturns null if border-width should not be set.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string|null"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_handleLinkClick",
@@ -845,11 +913,27 @@
               "default": "undefined",
               "attribute": "href"
             },
+            {
+              "kind": "field",
+              "name": "hyperlinkTag",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "iconTag",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "isInDiagonalGroup",
+              "description": "Checks if this tail is in a diagonal group layout.",
+              "readonly": true,
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "isInGroup",
@@ -1186,6 +1270,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/hyperlinkVersion.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "7.1.0",
+            "module": "src/hyperlinkVersion.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/iconVersion.js",

package/demo/api.html

@@ -30,9 +30,6 @@
     <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-    
-    <!-- Custom demo styles -->
-    <link rel="stylesheet" type="text/css" href="./demo-styles.css" />
 </head>
   <body class="auro-markdown">
     <main></main>

package/demo/api.md

@@ -35,6 +35,7 @@ The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphi
 | borderWidth         | border-width | string \| undefined                           | undefined | Sets the border width around the tail.                                              |
 | hasBorder           |              |                                               |           | Checks if tail has border properties defined.                                       |
 | href                | href         | string \| undefined                           | undefined | Sets the href for the tail.                                                         |
+| isInDiagonalGroup   |              |                                               |           | Checks if this tail is in a diagonal group layout.                                  |
 | isInGroup           |              |                                               |           | Checks if this tail is inside an auro-tail-group element.                           |
 | isInHorizontalGroup |              |                                               |           | Checks if this tail is in a horizontal group layout.                                |
 | labelTypeClass      |              |                                               |           | Gets the appropriate CSS type class based on tail size.                             |
@@ -575,6 +576,11 @@ $badge-width: (
   '2xl': 31px
 );
 
+$badge-offset: (
+  'md': (x: 2px, y: -7px),
+  'lg': (x: 2px, y: -4px)
+);
+
 $group-diagonal-width: (
   'xs': 42px,
   'sm': 56px,
@@ -592,10 +598,12 @@ $group-horizontal: (
 
 /* Token Definitions */
 :host {
+  display: inline-block;
   /* Host dimensions to match container */
   width: var(--avatar-width);
   height: var(--avatar-width);
-  min-width: var(--avatar-width);
+  min-width: var(--avatar-width);
+  min-height: var(--avatar-width);
 
   /* Default Values */
   --avatar-width: var(--avatar-width-lg);
@@ -633,9 +641,9 @@ $group-horizontal: (
   --z-index-group-back: 1;
   --z-index-group-front: 2;
 
-  /* Badge transform defaults */
-  --badge-translate-x: 0;
-  --badge-translate-y: 0;
+  /* Badge offset defaults */
+  --badge-offset-x: 0;
+  --badge-offset-y: 0;
 
   /* Generate Tail size-based tokens */
   @each $property, $map in (
@@ -660,6 +668,12 @@ $group-horizontal: (
     --group-horizontal-border-width-#{$size}: #{map.get(map.get($group-horizontal, $size), border-width)};
     --group-horizontal-overlap-#{$size}: #{map.get(map.get($group-horizontal, $size), overlap)};
   }
+
+  /* Generate Badge Offset tokens */
+  @each $size, $offsets in $badge-offset {
+    --badge-offset-x-#{$size}: #{map.get($offsets, x)};
+    --badge-offset-y-#{$size}: #{map.get($offsets, y)};
+  }
 }
 
 /* Apply tokens to tail sizes */
@@ -671,21 +685,12 @@ $group-horizontal: (
 
     @if list.index($tail-sizes-with-badge, $size) {
       --badge-width: var(--badge-width-#{$size});
-    }
-
+      --badge-offset-x: var(--badge-offset-x-#{$size}, 0);
+      --badge-offset-y: var(--badge-offset-y-#{$size}, 0);
+    }
+
     @if list.index($tail-sizes-with-href, $size) {
       --href-label-gap: var(--href-label-gap-#{$size});
-    }
-
-    /* Badge transform overrides */
-    @if $size == 'md' {
-      --badge-translate-x: 2px;
-      --badge-translate-y: -7px;
-    }
-
-    @if $size == 'lg' {
-      --badge-translate-x: 2px;
-      --badge-translate-y: -4px;
     }
   }
 }