@aurodesignsystem-dev/auro-tail 0.0.0-pr23.0 → 0.0.0-pr27.0

package/custom-elements.json

@@ -356,7 +356,6 @@
                 "text": "string"
               },
               "description": "Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`).",
-              "default": "'AS'",
               "attribute": "tail"
             },
             {
@@ -403,7 +402,6 @@
                 "text": "string"
               },
               "description": "Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`).",
-              "default": "'AS'",
               "fieldName": "tail"
             },
             {

package/demo/api.md

@@ -12,7 +12,7 @@ The `auro-tail` custom element displays Alaska, Hawaiian, and partner airline ta
 | badge      | badge      |           | string                                        |         | Sets the badge type to display (e.g., `oneworld`).                                        |
 | href       | href       |           | string                                        |         | Sets the href for the tail.                                                               |
 | size       | size       |           | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` | `lg`    | Sets the size of the tail.                                                                |
-| tail       | tail       |           | string                                        | `AS`    | Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`). |
+| tail       | tail       |           | string                                        |         | Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`). |
 | variant    | variant    |           | `outline`                                     |         | Sets the visual variant of the tail.                                                      |
 
 ### Methods
@@ -219,6 +219,36 @@ The `tail` attribute is required.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Fallback
+
+When the `tail` attribute is omitted or an unrecognized tail code is provided, `<auro-tail>` gracefully falls back to a default tail livery graphic rather than showing a broken icon.
+
+- **No `tail` attribute** — the underlying `<auro-icon>` receives no `name` and renders the default tail livery.
+- **Invalid tail code** (e.g., `tail="INVALID"`) — the icon cannot resolve the requested graphic and falls back to the default tail livery via the `tailFallback` behavior built into `<auro-icon>`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fallback.html) -->
+  <!-- The below content is automatically added from ../apiExamples/fallback.html -->
+  <!-- No tail attribute: the icon has no name and tailFallback renders the default tail livery -->
+  <auro-tail></auro-tail>
+  <!-- Invalid tail code: the icon cannot find "tail-INVALID" and tailFallback renders the default tail livery -->
+  <auro-tail tail="INVALID"></auro-tail>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fallback.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/fallback.html -->
+
+```html
+<!-- No tail attribute: the icon has no name and tailFallback renders the default tail livery -->
+<auro-tail></auro-tail>
+<!-- Invalid tail code: the icon cannot find "tail-INVALID" and tailFallback renders the default tail livery -->
+<auro-tail tail="INVALID"></auro-tail>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Variant
 
 Set the `variant` attribute to change the visual style of the tail.