@aurodesignsystem-dev/auro-tail 0.0.0-pr13.0 → 0.0.0-pr20.0

package/README.md

@@ -111,6 +111,16 @@ You can do this by importing only the component class and using the `register(na
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
 <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+```js
+// Import the class only
+import { AuroTail } from '@aurodesignsystem/auro-tail/class';
+
+// Register with a custom name if desired
+AuroTail.register('custom-tail');
+```
+
+This will create a new custom element `<custom-tail>` that behaves exactly like `<auro-tail>`, allowing both to coexist on the same page without interfering with each other.
 <!-- AURO-GENERATED-CONTENT:END -->
 <div class="exampleWrapper exampleWrapper--flex">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->

package/custom-elements.json

@@ -28,7 +28,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "The `auro-tail-group` element displays multiple `auro-tail` elements in a grouped layout.",
           "name": "AuroTailGroup",
           "members": [
             {
@@ -156,7 +156,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "The `auro-tail` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.",
           "name": "AuroTail",
           "members": [
             {
@@ -306,7 +306,7 @@
                 {
                   "name": "name",
                   "default": "\"auro-tail\"",
-                  "description": "The name of element that you want to register to.",
+                  "description": "The name of the element that you want to register.",
                   "optional": true,
                   "type": {
                     "text": "string"

package/demo/api.md

@@ -1,7 +1,9 @@
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
-<!-- The below content is automatically added from ../docs/api.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
+<!-- The below content is automatically added from ./../docs/api.md -->
 
-# auro-tail
+# auro-tail
+
+The `auro-tail` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.
 
 ### Properties & Attributes
 
@@ -15,11 +17,13 @@
 
 ### Methods
 
-| Name     | Parameters                                                          | Return | Description                                       |
-| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
-| register | `name` (string) - The name of element that you want to register to. |        | This will register this element with the browser. |
+| Name     | Parameters                                                           | Return | Description                                       |
+| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
+| register | `name` (string) - The name of the element that you want to register. |        | This will register this element with the browser. |
+
+# auro-tail-group
 
-# auro-tail-group
+The `auro-tail-group` element displays multiple `auro-tail` elements in a grouped layout.
 
 ### Properties & Attributes
 
@@ -35,32 +39,32 @@
 | register | `name` (string) - The name of element that you want to register to. |        | This will register this element with the browser. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Examples
-
 ## Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ../apiExamples/basic.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-tail tail="AS"></auro-tail>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
 <auro-tail tail="AS"></auro-tail>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Badge
+## Auro-Tail Property & Attribute Examples
+
+### Badge
 
 Display predefined badges such as OneWorld Alliance using the `badge` attribute.
 
-### Supported sizes:
+#### Supported sizes:
 - `md`, `lg`, `xl`, `2xl`
 
 > `badge` prop is not displayed when in an `<auro-tail-group>`.
@@ -144,7 +148,7 @@ Make tails clickable by adding an `href` attribute. This displays a clickable li
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Size
+### Size
 
 Control the size of `<auro-tail>` with the `size` attribute.
 
@@ -186,7 +190,7 @@ Certain properties are not available for all `<auto-tail>` sizes. See the table
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Tail
+### Tail
 
 Set the `tail` attribute to insert a tail graphic from the `<auro-icon>` repository with the corresponding icon code.
 
@@ -215,11 +219,11 @@ The `tail` attribute is required.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Variant
+### Variant
 
 Set the `variant` attribute to change the visual style of the tail.
 
-### Available variants:
+#### Available variants:
 - `outline` - Adds an outline around the tail graphic
   - Outlines apply only to partner (OA) tails
     - AAG tails (`AS` & `HA`) never feature outlines
@@ -248,9 +252,9 @@ Set the `variant` attribute to change the visual style of the tail.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## CSS Customization
+## Common Usage Patterns & Functional Examples
 
-## Borders
+### Borders
 
 Optional border ring around `<auro-tail>`.
 
@@ -261,7 +265,7 @@ Use CSS custom properties to style borders:
 - `--ds-auro-tail-border-color`
   - Set the border color (any valid CSS color value)
 
-### Styling individual tails:
+#### Styling individual tails:
 
 Set CSS custom properties directly on the `<auro-tail>` element:
 
@@ -292,8 +296,7 @@ Set CSS custom properties directly on the `<auro-tail>` element:
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## auro-tail-group
-Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group layout with specific behavioral constraints and visual treatments.
+## Auro-Tail-Group Property & Attribute Examples
 
 ### Supported sizes:
 - `xs`, `sm`, `md`, `lg`
@@ -471,12 +474,12 @@ Border styling availability varies by layout type (see sections below).
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Theme Support
+## Restyle Component with CSS Variables
 
-The component may be restyled using the following code sample and changing the values of the following token(s).
+The component may be restyled by changing the values of the following token(s).
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
-<!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
 
 ```scss
 /* Public API Tokens - Consumer Customizable */

package/demo/auro-tail-group.min.js

@@ -427,8 +427,8 @@ var styleCss = i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1r
  */
 
 /**
+ * The `auro-tail` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.
  * @customElement auro-tail
- * The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.
  */
 class AuroTail extends i$1 {
   /**
@@ -446,15 +446,14 @@ class AuroTail extends i$1 {
   static get properties() {
     return {
       /**
-       * Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`).
-       * @default 'AS'
+       * Sets the badge type to display (e.g., `oneworld`).
        */
-      tail: { type: String },
+      badge: { type: String },
 
       /**
-       * Sets the badge type to display (e.g., `oneworld`).
+       * Sets the href for the tail.
        */
-      badge: { type: String },
+      href: { type: String, attribute: 'href' },
 
       /**
        * Sets the size of the tail.
@@ -464,21 +463,22 @@ class AuroTail extends i$1 {
       size: { type: String, reflect: true },
 
       /**
-       * Sets the visual variant of the tail.
-       * @type {'outline'}
+       * Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`).
+       * @default 'AS'
        */
-      variant: { type: String, reflect: true },
+      tail: { type: String },
 
       /**
-       * Sets the href for the tail.
+       * Sets the visual variant of the tail.
+       * @type {'outline'}
        */
-      href: { type: String, attribute: 'href' }
+      variant: { type: String, reflect: true }
     };
   }
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-tail"] - The name of element that you want to register to.
+   * @param {string} [name="auro-tail"] - The name of the element that you want to register.
    *
    * @example
    * AuroTail.register("custom-tail") // this will register this element to <custom-tail/>
@@ -706,8 +706,8 @@ var groupStyleCss = i$3`:host{--ds-auro-tail-border-color: var(--ds-auro-tail-bo
  */
 
 /**
+ * The `auro-tail-group` element displays multiple `auro-tail` elements in a grouped layout.
  * @customElement auro-tail-group
- * The `<auro-tail-group>` element displays multiple `<auro-tail>` elements in a grouped layout.
  */
 class AuroTailGroup extends i$1 {
   /**

package/demo/index.md

@@ -1,18 +1,18 @@
 <!--
-The index.md file is a compiled document. No edits should be made directly to this file.
-README.md is created by running `npm run build:docs`.
-This file is generated based on a template fetched from `./docs/partials/index.md`
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
-# Auro Tail
-
+# Tail
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.
-<!-- AURO-GENERATED-CONTENT:END --> 
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Use Cases
 
- ## Use cases
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
 `<auro-tail>` can be used to:
@@ -32,7 +32,11 @@ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline
 - **Clickable Links**: Make tails clickable with `<auro-hyperlink>`
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Examples
+## Example(s)
+
+### Overview of Tails
+
+This example shows a variety of `auro-tail` usages.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/overview.html) -->
@@ -69,47 +73,4 @@ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline
 <auro-tail tail="PR" size="xl" variant="outline"></auro-tail>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Recommended Use and Version Control
-
-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, AuroTailGroup }  from '@aurodesignsystem/auro-tail/class';
-
-AuroTail.register();
-AuroTailGroup.register();
-
-AuroTail.register("custom-tail");
-AuroTailGroup.register("custom-tail-group");
-```
-
-This will create a new custom element that you can use in your HTML that will function identically to the `<auro-tail>` element.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/custom.html -->
-  <custom-tail tail="AS" size="2xl"></custom-tail>
-  <custom-tail-group size="lg">
-    <custom-tail tail="HA"></custom-tail>
-    <custom-tail tail="AA"></custom-tail>
-  </custom-tail-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
-
-```html
-<custom-tail tail="AS" size="2xl"></custom-tail>
-<custom-tail-group size="lg">
-  <custom-tail tail="HA"></custom-tail>
-  <custom-tail tail="AA"></custom-tail>
-</custom-tail-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

package/dist/{auro-tail-group-BoJt8IFn.js → auro-tail-group-BIAM9x8r.js}

@@ -159,7 +159,7 @@ import{unsafeStatic as e,literal as t,html as a}from"lit/static-html.js";import{
 </defs>
 </svg>
 `,alt:"OneWorld Alliance"}},ze=["md","lg","xl","2xl"],ke=["md","lg","xl","2xl"],Ae=["xs","sm","md","lg"],Se="Tail livery",Be="Tail livery, {badgeAlt} member";function Ce(e){return!0===e.constructor?.isAuroTail}function He(e){return!0===e.constructor?.isAuroTailGroup}var De=r`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--ds-auro-tail-border-color: var(--ds-auro-tail-border-color-default);--ds-auro-tail-border-width: var(--ds-auro-tail-border-w-default)}:host{display:inline-block;width:var(--ds-auro-tail-container-w);height:var(--ds-auro-tail-container-w);min-width:var(--ds-auro-tail-container-w);min-height:var(--ds-auro-tail-container-w);--ds-auro-tail-container-w: var(--ds-auro-tail-container-w-lg);--ds-auro-tail-container-gradient: var(--ds-auro-tail-gradient-oa);--ds-auro-tail-tail-w: var(--ds-auro-tail-tail-w-lg);--ds-auro-tail-tail-offset-y: var(--ds-auro-tail-tail-offset-y-lg);--ds-auro-tail-href-label-gap: var(--ds-auro-tail-href-label-gap-lg);--ds-auro-tail-badge-w: var(--ds-auro-tail-badge-w-lg);--ds-auro-tail-border-color-default: rgba(88, 94, 103, 1);--ds-auro-tail-border-color-white: #ffffff;--ds-auro-tail-border-w-default: 0;--ds-auro-tail-border-display: none;--ds-auro-tail-border-padding: 0;--ds-auro-tail-border-radius-full: 999px;--ds-auro-tail-tail-outline-color: var(--ds-auro-tail-border-color-default);--ds-auro-tail-tail-outline-w: 1px;--ds-auro-tail-tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));--ds-auro-tail-z-index-border: 1;--ds-auro-tail-z-index-badge: 2;--ds-auro-tail-z-index-group-back: 1;--ds-auro-tail-z-index-group-front: 2;--ds-auro-tail-badge-offset-x: 0;--ds-auro-tail-badge-offset-y: 0;--ds-auro-tail-container-w-xs: 24px;--ds-auro-tail-tail-w-xs: 19px;--ds-auro-tail-tail-offset-y-xs: 3px;--ds-auro-tail-container-w-sm: 32px;--ds-auro-tail-tail-w-sm: 26px;--ds-auro-tail-tail-offset-y-sm: 4px;--ds-auro-tail-container-w-md: 48px;--ds-auro-tail-tail-w-md: 39px;--ds-auro-tail-tail-offset-y-md: 6px;--ds-auro-tail-href-label-gap-md: 2px;--ds-auro-tail-badge-w-md: 11px;--ds-auro-tail-badge-offset-x-md: 2px;--ds-auro-tail-badge-offset-y-md: -7px;--ds-auro-tail-container-w-lg: 60px;--ds-auro-tail-tail-w-lg: 48px;--ds-auro-tail-tail-offset-y-lg: 7px;--ds-auro-tail-href-label-gap-lg: 4px;--ds-auro-tail-badge-w-lg: 14px;--ds-auro-tail-badge-offset-x-lg: 2px;--ds-auro-tail-badge-offset-y-lg: -4px;--ds-auro-tail-container-w-xl: 96px;--ds-auro-tail-tail-w-xl: 77px;--ds-auro-tail-tail-offset-y-xl: 13px;--ds-auro-tail-href-label-gap-xl: 6px;--ds-auro-tail-badge-w-xl: 22px;--ds-auro-tail-container-w-2xl: 134px;--ds-auro-tail-tail-w-2xl: 107px;--ds-auro-tail-tail-offset-y-2xl: 17px;--ds-auro-tail-href-label-gap-2xl: 8px;--ds-auro-tail-badge-w-2xl: 31px;--ds-auro-tail-group-diag-w-xs: 42px;--ds-auro-tail-group-horiz-border-w-xs: 3px;--ds-auro-tail-group-horiz-overlap-xs: -2px;--ds-auro-tail-group-diag-w-sm: 56px;--ds-auro-tail-group-horiz-border-w-sm: 3px;--ds-auro-tail-group-horiz-overlap-sm: -2px;--ds-auro-tail-group-diag-w-md: 84px;--ds-auro-tail-group-horiz-border-w-md: 4px;--ds-auro-tail-group-horiz-overlap-md: -6px;--ds-auro-tail-group-diag-w-lg: 105px;--ds-auro-tail-group-horiz-border-w-lg: 4px;--ds-auro-tail-group-horiz-overlap-lg: -10px;--ds-auro-tail-gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);--ds-auro-tail-gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);--ds-auro-tail-gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%)}:host([size=xs]){--ds-auro-tail-container-w: var(--ds-auro-tail-container-w-xs);--ds-auro-tail-tail-w: var(--ds-auro-tail-tail-w-xs);--ds-auro-tail-tail-offset-y: var(--ds-auro-tail-tail-offset-y-xs)}:host([size=sm]){--ds-auro-tail-container-w: var(--ds-auro-tail-container-w-sm);--ds-auro-tail-tail-w: var(--ds-auro-tail-tail-w-sm);--ds-auro-tail-tail-offset-y: var(--ds-auro-tail-tail-offset-y-sm)}:host([size=md]){--ds-auro-tail-container-w: var(--ds-auro-tail-container-w-md);--ds-auro-tail-tail-w: var(--ds-auro-tail-tail-w-md);--ds-auro-tail-tail-offset-y: var(--ds-auro-tail-tail-offset-y-md);--ds-auro-tail-badge-w: var(--ds-auro-tail-badge-w-md);--ds-auro-tail-badge-offset-x: var(--ds-auro-tail-badge-offset-x-md, 0);--ds-auro-tail-badge-offset-y: var(--ds-auro-tail-badge-offset-y-md, 0);--ds-auro-tail-href-label-gap: var(--ds-auro-tail-href-label-gap-md)}:host([size=lg]){--ds-auro-tail-container-w: var(--ds-auro-tail-container-w-lg);--ds-auro-tail-tail-w: var(--ds-auro-tail-tail-w-lg);--ds-auro-tail-tail-offset-y: var(--ds-auro-tail-tail-offset-y-lg);--ds-auro-tail-badge-w: var(--ds-auro-tail-badge-w-lg);--ds-auro-tail-badge-offset-x: var(--ds-auro-tail-badge-offset-x-lg, 0);--ds-auro-tail-badge-offset-y: var(--ds-auro-tail-badge-offset-y-lg, 0);--ds-auro-tail-href-label-gap: var(--ds-auro-tail-href-label-gap-lg)}:host([size=xl]){--ds-auro-tail-container-w: var(--ds-auro-tail-container-w-xl);--ds-auro-tail-tail-w: var(--ds-auro-tail-tail-w-xl);--ds-auro-tail-tail-offset-y: var(--ds-auro-tail-tail-offset-y-xl);--ds-auro-tail-badge-w: var(--ds-auro-tail-badge-w-xl);--ds-auro-tail-badge-offset-x: var(--ds-auro-tail-badge-offset-x-xl, 0);--ds-auro-tail-badge-offset-y: var(--ds-auro-tail-badge-offset-y-xl, 0);--ds-auro-tail-href-label-gap: var(--ds-auro-tail-href-label-gap-xl)}:host([size="2xl"]){--ds-auro-tail-container-w: var(--ds-auro-tail-container-w-2xl);--ds-auro-tail-tail-w: var(--ds-auro-tail-tail-w-2xl);--ds-auro-tail-tail-offset-y: var(--ds-auro-tail-tail-offset-y-2xl);--ds-auro-tail-badge-w: var(--ds-auro-tail-badge-w-2xl);--ds-auro-tail-badge-offset-x: var(--ds-auro-tail-badge-offset-x-2xl, 0);--ds-auro-tail-badge-offset-y: var(--ds-auro-tail-badge-offset-y-2xl, 0);--ds-auro-tail-href-label-gap: var(--ds-auro-tail-href-label-gap-2xl)}:host([tail=as i]){--ds-auro-tail-container-gradient: var(--ds-auro-tail-gradient-as)}:host([tail=ha i]){--ds-auro-tail-container-gradient: var(--ds-auro-tail-gradient-ha)}:host([tail=oa i]){--ds-auro-tail-container-gradient: var(--ds-auro-tail-gradient-oa)}.tail{display:flex;flex-direction:column;align-items:center;vertical-align:middle;min-width:var(--ds-auro-tail-container-w);min-height:var(--ds-auro-tail-container-w)}.tail>.tail-hyperlink{display:flex;flex-direction:column;align-items:center;text-decoration:none;min-width:var(--ds-auro-tail-container-w);min-height:var(--ds-auro-tail-container-w)}.tail>.tail-hyperlink .label{display:block;margin-top:var(--ds-auro-tail-href-label-gap);text-align:center;min-width:var(--ds-auro-tail-container-w);white-space:nowrap;overflow:visible;text-overflow:clip}.border{position:relative;width:var(--ds-auro-tail-container-w);height:var(--ds-auro-tail-container-w);border-radius:var(--ds-auro-tail-border-radius-full);display:grid;place-items:center;margin:0 auto;box-sizing:content-box;border:var(--ds-auro-tail-border-width, 0) solid var(--ds-auro-tail-border-color, var(--ds-auro-tail-border-color-default))}:host{width:calc(var(--ds-auro-tail-container-w) + 2 * var(--ds-auro-tail-border-width, 0px));height:calc(var(--ds-auro-tail-container-w) + 2 * var(--ds-auro-tail-border-width, 0px));min-width:calc(var(--ds-auro-tail-container-w) + 2 * var(--ds-auro-tail-border-width, 0px));min-height:calc(var(--ds-auro-tail-container-w) + 2 * var(--ds-auro-tail-border-width, 0px))}.container{position:relative;width:100%;height:100%;border-radius:var(--ds-auro-tail-border-radius-full);background:var(--ds-auro-tail-container-gradient);display:grid;place-items:center;overflow:hidden}.container [auro-icon]{--ds-auro-icon-size: var(--ds-auro-tail-tail-w);position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + var(--ds-auro-tail-tail-offset-y))) scale(1.26);transform-origin:center;pointer-events:none}.badge{position:absolute;right:0;bottom:0;transform:translate(var(--ds-auro-tail-badge-offset-x),var(--ds-auro-tail-badge-offset-y));width:var(--ds-auro-tail-badge-w);height:var(--ds-auro-tail-badge-w);object-fit:contain;border-radius:var(--ds-auro-tail-border-radius-full);z-index:var(--ds-auro-tail-z-index-badge)}:host([data-carrier-type=aag]) [auro-icon]{filter:var(--ds-auro-tail-tail-drop-shadow)}:host([data-carrier-type=oa][variant=outline]) [auro-icon]{margin-left:calc(-1 * var(--ds-auro-tail-tail-outline-w) * 2);margin-top:calc(var(--ds-auro-tail-tail-outline-w) * 2);filter:drop-shadow(var(--ds-auro-tail-tail-outline-w) 0 0 var(--ds-auro-tail-tail-outline-color)) drop-shadow(calc(-1 * var(--ds-auro-tail-tail-outline-w)) 0 0 var(--ds-auro-tail-tail-outline-color)) drop-shadow(0 var(--ds-auro-tail-tail-outline-w) 0 var(--ds-auro-tail-tail-outline-color)) drop-shadow(0 calc(-1 * var(--ds-auro-tail-tail-outline-w)) 0 var(--ds-auro-tail-tail-outline-color))}:host([href]){width:max-content;height:max-content;min-height:max-content;vertical-align:bottom}
-`;class Le extends o{static isAuroTail=!0;static get styles(){return[De]}static get properties(){return{tail:{type:String},badge:{type:String},size:{type:String,reflect:!0},variant:{type:String,reflect:!0},href:{type:String,attribute:"href"}}}static register(e="auro-tail"){u.prototype.registerComponent(e,Le)}#e(){this.tail="AS",this.size="lg"}constructor(){super(),this.#e(),this._carrierType="oa";const e=new h;this.iconTag=e.generateTag("auro-icon","9.1.1",ye),this.hyperlinkTag=e.generateTag("auro-hyperlink","7.1.0",ue),this.runtimeUtils=new u}get carrierType(){const e={aag:["as","ha"],oa:["oa"]},t=this.tail.toLowerCase();for(const[a,r]of Object.entries(e))if(r.includes(t))return a;return"oa"}_findParentGroup(){let e=this.parentElement;for(;e;){if(He(e))return e;e=e.parentElement}return null}get isInGroup(){return!!this._findParentGroup()}get isInHorizontalGroup(){const e=this._findParentGroup();return!!e&&"horizontal"===e.getAttribute("layout")}get isInDiagonalGroup(){const e=this._findParentGroup();return!!e&&"diagonal"===e.getAttribute("layout")}get badgeConfig(){return this.badge&&!this.isInGroup&&ke.includes(this.size)?we[this.badge]:void 0}get shouldShowLink(){return!!this.href&&!this.isInGroup&&ze.includes(this.size)}get labelTypeClass(){return{md:"body-xs",lg:"body-sm",xl:"body-default","2xl":"body-lg"}[this.size]||"body-sm"}connectedCallback(){super.connectedCallback()}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-tail")}updated(e){e.has("tail")&&(this._carrierType=this.carrierType,this.dataset.carrierType=this.carrierType),super.updated(e)}render(){const e=this.badgeConfig,t=e?function(e,t={}){return e.replace(/\{(\w+)\}/g,(e,a)=>a in t?t[a]:e)}(Be,{badgeAlt:e.alt}):Se,r=a`
+`;class Le extends o{static isAuroTail=!0;static get styles(){return[De]}static get properties(){return{badge:{type:String},href:{type:String,attribute:"href"},size:{type:String,reflect:!0},tail:{type:String},variant:{type:String,reflect:!0}}}static register(e="auro-tail"){u.prototype.registerComponent(e,Le)}#e(){this.tail="AS",this.size="lg"}constructor(){super(),this.#e(),this._carrierType="oa";const e=new h;this.iconTag=e.generateTag("auro-icon","9.1.1",ye),this.hyperlinkTag=e.generateTag("auro-hyperlink","7.1.0",ue),this.runtimeUtils=new u}get carrierType(){const e={aag:["as","ha"],oa:["oa"]},t=this.tail.toLowerCase();for(const[a,r]of Object.entries(e))if(r.includes(t))return a;return"oa"}_findParentGroup(){let e=this.parentElement;for(;e;){if(He(e))return e;e=e.parentElement}return null}get isInGroup(){return!!this._findParentGroup()}get isInHorizontalGroup(){const e=this._findParentGroup();return!!e&&"horizontal"===e.getAttribute("layout")}get isInDiagonalGroup(){const e=this._findParentGroup();return!!e&&"diagonal"===e.getAttribute("layout")}get badgeConfig(){return this.badge&&!this.isInGroup&&ke.includes(this.size)?we[this.badge]:void 0}get shouldShowLink(){return!!this.href&&!this.isInGroup&&ze.includes(this.size)}get labelTypeClass(){return{md:"body-xs",lg:"body-sm",xl:"body-default","2xl":"body-lg"}[this.size]||"body-sm"}connectedCallback(){super.connectedCallback()}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-tail")}updated(e){e.has("tail")&&(this._carrierType=this.carrierType,this.dataset.carrierType=this.carrierType),super.updated(e)}render(){const e=this.badgeConfig,t=e?function(e,t={}){return e.replace(/\{(\w+)\}/g,(e,a)=>a in t?t[a]:e)}(Be,{badgeAlt:e.alt}):Se,r=a`
       <div class="border">
         <div class="container" part="container" role="img" aria-label=${t}>
           <${this.iconTag} category="logos" name="tail-${this.tail.toUpperCase()}"></${this.iconTag}>

package/dist/index.d.ts

@@ -110,7 +110,7 @@ export type AuroTailProps = {
 
 
   /**
-     * 
+     * The `auro-tail-group` element displays multiple `auro-tail` elements in a grouped layout.
  * 
  * ## Attributes & Properties
  * 
@@ -129,7 +129,7 @@ export type AuroTailProps = {
 
 
   /**
-     * 
+     * The `auro-tail` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.
  * 
  * ## Attributes & Properties
  * 

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroTail,a as AuroTailGroup}from"./auro-tail-group-BoJt8IFn.js";import"lit/static-html.js";import"lit";import"lit/directives/if-defined.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";
+export{A as AuroTail,a as AuroTailGroup}from"./auro-tail-group-BIAM9x8r.js";import"lit/static-html.js";import"lit";import"lit/directives/if-defined.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as i,a as t}from"./auro-tail-group-BoJt8IFn.js";import"lit/static-html.js";import"lit";import"lit/directives/if-defined.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";i.register(),t.register();
+import{A as i,a as t}from"./auro-tail-group-BIAM9x8r.js";import"lit/static-html.js";import"lit";import"lit/directives/if-defined.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";i.register(),t.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-tail",
-  "version": "0.0.0-pr13.0",
+  "version": "0.0.0-pr20.0",
   "description": "auro-tail HTML custom element",
   "repository": {
     "type": "git",
@@ -21,10 +21,10 @@
     "node": ">=20"
   },
   "dependencies": {
-    "lit": "^3.3.1"
+    "lit": "^3.3.2"
   },
   "devDependencies": {
-    "@aurodesignsystem/auro-cli": "^3.4.1",
+    "@aurodesignsystem/auro-cli": "^3.5.0",
     "@aurodesignsystem/auro-config": "^1.3.1",
     "@aurodesignsystem/auro-hyperlink": "^8.0.0",
     "@aurodesignsystem/auro-icon": "^9.1.1",