chore(release): 5.3.1 [skip ci]

## [5.3.1](v5.3.0...v5.3.1) (2024-12-20)

### Performance Improvements

* update node to version 22 ([363c769](363c769))

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+## [5.3.1](https://github.com/AlaskaAirlines/auro-avatar/compare/v5.3.0...v5.3.1) (2024-12-20)
+
+
+### Performance Improvements
+
+* update node to version 22 ([363c769](https://github.com/AlaskaAirlines/auro-avatar/commit/363c769735ad3b5dc00e7c8e51c1dddcf89fa9a4))
+
 # [5.3.0](https://github.com/AlaskaAirlines/auro-avatar/compare/v5.2.0...v5.3.0) (2024-11-15)
 
 

README.md

@@ -96,7 +96,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-avatar@5.3.0/dist/auro-avatar__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-avatar@5.3.1/dist/auro-avatar__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

demo/api.md

@@ -0,0 +1,193 @@
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
+<!-- The below content is automatically added from ./../docs/api.md -->
+
+# auro-avatar
+
+Custom element for the purpose of displaying an avatar image.
+
+## Properties
+
+| Property      | Attribute     | Type      | Default | Description                                      |
+|---------------|---------------|-----------|---------|--------------------------------------------------|
+| [alt](#alt)         | `alt`         | `String`  | ""      | provide string for element alt text              |
+| [ariaVisible](#ariaVisible) | `ariaVisible` | `Boolean` | null    | true value reveals content to screen reader      |
+| [code](#code)        | `code`        | `String`  |         | provide airport code for requested airport image |
+| [img](#img)         | `img`         | `String`  |         | provide location or URL for image to be used     |
+| [tail](#tail)        | `tail`        | `String`  |         | provide tail logo for requested airline          |
+| [type](#type)        | `type`        | `String`  |         | modifiers for size of avatar (sm \| md)          |
+<!-- 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-avatar></auro-avatar>
+  <!-- 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 -->
+
+```html
+<auro-avatar></auro-avatar>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Component size options
+
+The auro-avatar component supports a `sm`, `md` and `lg` avatar types that determines the size of the image asset delivered. The assumed default is `lg`.</br>
+<small>Note: The previous `sm` and `md` boolean attributes are deprecated.</small>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/size.html -->
+  <auro-avatar code="boi"></auro-avatar>
+  <auro-avatar type="md" code="anc"></auro-avatar>
+  <auro-avatar type="sm" code="mke"></auro-avatar>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/size.html -->
+
+```html
+<auro-avatar code="boi"></auro-avatar>
+<auro-avatar type="md" code="anc"></auro-avatar>
+<auro-avatar type="sm" code="mke"></auro-avatar>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Custom images
+
+The auro-avatar supports placement of custom images using the `img` attribute.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customImage.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/customImage.html -->
+  <auro-avatar img="https://picsum.photos/200?random=0"></auro-avatar>
+  <auro-avatar img="https://picsum.photos/200?random=1" type="md"></auro-avatar>
+  <auro-avatar img="https://picsum.photos/200?random=2" type="sm"></auro-avatar>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customImage.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/customImage.html -->
+
+```html
+<auro-avatar img="https://picsum.photos/200?random=0"></auro-avatar>
+<auro-avatar img="https://picsum.photos/200?random=1" type="md"></auro-avatar>
+<auro-avatar img="https://picsum.photos/200?random=2" type="sm"></auro-avatar>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Tail icon options
+
+The tail options allow for a default and a `md` avatar type option. The `tail` property accepts the two letter code per the airline. See the [Github repo](https://github.com/AlaskaAirlines/Icons/tree/master/src/icons/logos) for a list of currently available logos.</br>
+<small>Note: The previous `md` boolean attributes are deprecated.</small>
+For the airline title, simply add content to the `display` slot. See the example code for the HTML API.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/tail.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/tail.html -->
+  <auro-avatar tail="AS">
+    <span slot="display">Alaska Airlines</span>
+  </auro-avatar>
+  <auro-avatar tail="AA">
+    <span slot="display">American Airlines</span>
+  </auro-avatar>
+  <auro-avatar type="md" tail="QF">
+    <span slot="display">Quantas</span>
+  </auro-avatar>
+  <auro-avatar type="md" tail="JL">
+    <span slot="display">Japan Airlines</span>
+  </auro-avatar>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/tail.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/tail.html -->
+
+```html
+<auro-avatar tail="AS">
+  <span slot="display">Alaska Airlines</span>
+</auro-avatar>
+<auro-avatar tail="AA">
+  <span slot="display">American Airlines</span>
+</auro-avatar>
+<auro-avatar type="md" tail="QF">
+  <span slot="display">Quantas</span>
+</auro-avatar>
+<auro-avatar type="md" tail="JL">
+  <span slot="display">Japan Airlines</span>
+</auro-avatar>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Accessibility options
+
+The auro-avatar component is hidden from screen readers by default. The placement of altText using the `alt` attribute in conjunction with the `ariaVisible` attribute will make the avatar visible to screen readers.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accessibility.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/accessibility.html -->
+  <auro-avatar code="pdx" ariaVisible alt="iconic image of Portland, OR"></auro-avatar>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accessibility.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/accessibility.html -->
+
+```html
+<auro-avatar code="pdx" ariaVisible alt="iconic image of Portland, OR"></auro-avatar>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Fallback Images
+
+The auro-avatar component will use a fallback image if a `code` value results in an avatar image that fails to load.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fallback.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/fallback.html -->
+  <auro-avatar code="INVALID"></auro-avatar>
+  <!-- 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
+<auro-avatar code="INVALID"></auro-avatar>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/tokens.scss -->
+
+```scss
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-avatar-tail-container-gradient-color-one: var(--ds-color-utility-blue-default, #{$ds-color-utility-blue-default});
+  --ds-auro-avatar-tail-container-gradient-color-two: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

demo/index.md

@@ -0,0 +1,71 @@
+<!--
+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`
+-->
+
+# Avatar
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
+<!-- The below content is automatically added from ./../docs/partials/description.md -->
+The `<auro-avatar>` is an [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of displaying iconic imagery for representation.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Use cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
+The auro-avatar element should be used in situations where users may:
+* be provided with imagery to represent an airline's tail, cities, airports, or user profiles
+* need a visual representation
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Example(s)
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-avatar></auro-avatar>
+  <!-- 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 -->
+
+```html
+<auro-avatar></auro-avatar>
+```
+<!-- 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-avatar` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroAvatar.register(name)` method and pass in a unique name.
+
+```js
+import { AuroAvatar } from '../src/auro-avatar.js';
+
+AuroAvatar.register('custom-avatar');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-avatar>` element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/custom.html -->
+  <custom-avatar></custom-avatar>
+  <!-- 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-avatar></custom-avatar>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-avatar",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "auro-avatar HTML custom element",
   "repository": {
     "type": "git",