@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Semantic Release Automated Changelog
 
+# [3.0.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.2.1...v3.0.0) (2025-04-29)
+
+
+### Bug Fixes
+
+* address focus border issue in input components ([a3dd710](https://github.com/AlaskaAirlines/auro-formkit/commit/a3dd7104e23a969b6526308079f8e2300627e19a))
+* address incorrect names for combobox tags ([5047d45](https://github.com/AlaskaAirlines/auro-formkit/commit/5047d452f568229e099fa2799054ff01ef7cac5f))
+* make input height correct size ([623ab34](https://github.com/AlaskaAirlines/auro-formkit/commit/623ab346f6a9433f4c5bed0ee514f52721a23559))
+* update improper fallback reference ([5258046](https://github.com/AlaskaAirlines/auro-formkit/commit/525804665ce1e89a5211c245480ff6cfa02662cd))
+
+
+### Features
+
+* add on dark support for checkbox ([b452aa1](https://github.com/AlaskaAirlines/auro-formkit/commit/b452aa1aaa8dcbaf3fdbbadf86222a48164c4826))
+* add on dark support for combobox ([b097007](https://github.com/AlaskaAirlines/auro-formkit/commit/b097007a09a751c834e58063a332f053665aa478))
+* add on dark support for counter ([f6217bb](https://github.com/AlaskaAirlines/auro-formkit/commit/f6217bbc7527e15aa9ddeb94fd10bc4c03949053))
+* add on dark support for datepicker ([bd7ff92](https://github.com/AlaskaAirlines/auro-formkit/commit/bd7ff920400157de5477799134d1bd084f3eb7aa))
+* add on dark support for dropdown ([8cb4012](https://github.com/AlaskaAirlines/auro-formkit/commit/8cb40121b4ec02d23e368960f52a5fe5cf4b123e))
+* add on dark support for helptext component ([ab35af7](https://github.com/AlaskaAirlines/auro-formkit/commit/ab35af7f7f04586c056d30cb99184d04ca19504d))
+* add on dark support for input ([7470eb2](https://github.com/AlaskaAirlines/auro-formkit/commit/7470eb2209e0ad3e95548f47f959a60ea107b2e8))
+* add on dark support for radio ([3eaf0bb](https://github.com/AlaskaAirlines/auro-formkit/commit/3eaf0bbf5e9ed46c985ae9d79184104787a871f1))
+* add on dark support for select ([8348500](https://github.com/AlaskaAirlines/auro-formkit/commit/83485000ad0e0645244a74442335744c2541ff69))
+
+
+### Performance Improvements
+
+* update bibtemplate to use new design tokens ([8daa331](https://github.com/AlaskaAirlines/auro-formkit/commit/8daa331c089f61c2cee02b3df3016fe0e221e63b))
+* update color tokenimports for form ([0fe05d9](https://github.com/AlaskaAirlines/auro-formkit/commit/0fe05d93da5daad8f11a75eb786fc3f70ad00ec8))
+* update color tokens for alert icon ([ecb14c8](https://github.com/AlaskaAirlines/auro-formkit/commit/ecb14c8138483bafb1b7f3c086ba319a16ea9e99))
+* update color tokens for helptext component ([d55b747](https://github.com/AlaskaAirlines/auro-formkit/commit/d55b747a7af5e9a9dcc54d1eedf0fed6ab835447))
+* update color tokens for theme support in combobox [#432](https://github.com/AlaskaAirlines/auro-formkit/issues/432) ([cecf6fa](https://github.com/AlaskaAirlines/auro-formkit/commit/cecf6fa14a71a10a952b3386b834f52cf2f95990))
+* update color tokens for theme support in counter [#433](https://github.com/AlaskaAirlines/auro-formkit/issues/433) ([f261afd](https://github.com/AlaskaAirlines/auro-formkit/commit/f261afd43ecd88e8693b28d53830cdd6f06f5875))
+* update color tokens for theme support in datepicker [#434](https://github.com/AlaskaAirlines/auro-formkit/issues/434) ([e44b3d8](https://github.com/AlaskaAirlines/auro-formkit/commit/e44b3d83b7496de8614d11ac0d1c0e1068cd5ac2))
+* update color tokens for theme support in dropdown [#435](https://github.com/AlaskaAirlines/auro-formkit/issues/435) ([f8c76c2](https://github.com/AlaskaAirlines/auro-formkit/commit/f8c76c244d33c26bad1a9bb256eeca434d10b27d))
+* update color tokens for theme support in select [#439](https://github.com/AlaskaAirlines/auro-formkit/issues/439) ([fdda13b](https://github.com/AlaskaAirlines/auro-formkit/commit/fdda13b5efdb91f9b5f2346a74b6b2c36e74fd5b))
+* update color tokens in checkbox for theme support [#431](https://github.com/AlaskaAirlines/auro-formkit/issues/431) ([48b9d59](https://github.com/AlaskaAirlines/auro-formkit/commit/48b9d5933bdc4e6aea94350b8e4b129d1bf313f1))
+* update color tokens in input for theme support [#436](https://github.com/AlaskaAirlines/auro-formkit/issues/436) ([3dcde5e](https://github.com/AlaskaAirlines/auro-formkit/commit/3dcde5eae8b4ce479dba6a8b1310a987a60fca99))
+* update color tokens in menu for theme support [#437](https://github.com/AlaskaAirlines/auro-formkit/issues/437) ([94f441a](https://github.com/AlaskaAirlines/auro-formkit/commit/94f441a01e9e7eddac382b5ab27d48f1a778f18e))
+* update color tokens in radio for theme support [#438](https://github.com/AlaskaAirlines/auro-formkit/issues/438) ([d32c3fc](https://github.com/AlaskaAirlines/auro-formkit/commit/d32c3fc9f49574d3dd1a03a452f7b2bb3f2bd13f))
+* update counter to use theming token structure ([fabba60](https://github.com/AlaskaAirlines/auro-formkit/commit/fabba60cebf900af6ec2ea82756b6c78dfd3ca57))
+* update dependencies ([8f48297](https://github.com/AlaskaAirlines/auro-formkit/commit/8f482976c7b224a19f34f028972c2e670dfc863b))
+* update remaining references to old design tokens ([85eb8ef](https://github.com/AlaskaAirlines/auro-formkit/commit/85eb8efbbe6f285e88957aac306806ef993429e7))
+* update to v5.10.0 of design tokens ([2b691ca](https://github.com/AlaskaAirlines/auro-formkit/commit/2b691caf9a9b336899fdb288bbca522a59984688))
+
+
+### BREAKING CHANGES
+
+* All theme tokens now are inherited from dropdown.
+
 ## [2.2.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.2.0...v2.2.1) (2025-04-22)
 
 

package/components/bibtemplate/dist/iconVersion.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "7.0.1";
+declare const _default: "8.0.1";
 export default _default;

package/components/bibtemplate/dist/index.js

@@ -5,9 +5,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
-var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-color-container-primary-default, #ffffff)}`;
+var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -16,7 +16,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -185,7 +185,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
+var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -193,7 +193,6 @@ var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
  * @slot - Hidden from visibility, used for a11y if icon description is needed
  */
 
@@ -208,6 +207,10 @@ class BaseIcon extends AuroElement {
   static get properties() {
     return {
       ...super.properties,
+
+      /**
+       * Set value for on-dark version of auro-icon.
+       */
       onDark: {
         type: Boolean,
         reflect: true
@@ -266,81 +269,11 @@ class BaseIcon extends AuroElement {
   }
 }
 
-var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, #676767);--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
-
-var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
-
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
-
-let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
-
-  /* eslint-disable jsdoc/require-param */
-
-  /**
-   * This will register a new custom element with the browser.
-   * @param {String} name - The name of the custom element.
-   * @param {Object} componentClass - The class to register as a custom element.
-   * @returns {void}
-   */
-  registerComponent(name, componentClass) {
-    if (!customElements.get(name)) {
-      customElements.define(name, class extends componentClass {});
-    }
-  }
-
-  /**
-   * Finds and returns the closest HTML Element based on a selector.
-   * @returns {void}
-   */
-  closestElement(
-    selector, // selector like in .closest()
-    base = this, // extra functionality to skip a parent
-    __Closest = (el, found = el && el.closest(selector)) =>
-      !el || el === document || el === window
-        ? null // standard .closest() returns null for non-found selectors also
-        : found
-          ? found // found a selector INside this element
-          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
-  ) {
-    return __Closest(base);
-  }
-  /* eslint-enable jsdoc/require-param */
-
-  /**
-   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
-   * @param {Object} elem - The element to check.
-   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
-   * @returns {void}
-   */
-  handleComponentTagRename(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    if (elemTag !== tag) {
-      elem.setAttribute(tag, true);
-    }
-  }
-
-  /**
-   * Validates if an element is a specific Auro component.
-   * @param {Object} elem - The element to validate.
-   * @param {String} tagName - The name of the Auro component to check against.
-   * @returns {Boolean} - Returns true if the element is the specified Auro component.
-   */
-  elementMatch(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
+var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
 
-    return elemTag === tag || elem.hasAttribute(tag);
-  }
-};
+var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=fareOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-emerald, #139142)}:host(:not([onDark])[variant=fareOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=fareOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -348,6 +281,7 @@ class AuroIcon extends BaseIcon {
   constructor() {
     super();
 
+    this.variant = undefined;
     this.privateDefaults();
   }
 
@@ -357,20 +291,6 @@ class AuroIcon extends BaseIcon {
    * @returns {void}
    */
   privateDefaults() {
-    this.accent = false;
-    this.customColor = false;
-    this.customSvg = false;
-    this.disabled = false;
-    this.emphasis = false;
-    this.error = false;
-    this.info = false;
-    this.label = false;
-    this.primary = false;
-    this.secondary = false;
-    this.subtle = false;
-    this.success = false;
-    this.tertiary = false;
-    this.warning = false;
     this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
@@ -380,14 +300,6 @@ class AuroIcon extends BaseIcon {
     return {
       ...super.properties,
 
-      /**
-       * Sets the icon to use the accent style.
-       */
-      accent: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Set aria-hidden value. Default is `true`. Option is `false`.
        */
@@ -418,38 +330,6 @@ class AuroIcon extends BaseIcon {
         type: Boolean
       },
 
-      /**
-       * Sets the icon to use the disabled style.
-       */
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the emphasis style.
-       */
-      emphasis: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the error style.
-       */
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the info style.
-       */
-      info: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Exposes content in slot as icon label.
        */
@@ -467,50 +347,10 @@ class AuroIcon extends BaseIcon {
       },
 
       /**
-       * DEPRECATED: Sets the icon to use the baseline primary icon style.
-       */
-      primary: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the secondary style.
-       */
-      secondary: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the subtle style.
-       */
-      subtle: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the success style.
-       */
-      success: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the tertiary style.
+       * The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `fareOneWorldEmerald`, `fareOneWorldSapphire`, `fareOneWorldRuby`.
        */
-      tertiary: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the warning style.
-       */
-      warning: {
-        type: Boolean,
+      variant: {
+        type: String,
         reflect: true
       }
     };
@@ -600,7 +440,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '7.0.1';
+var iconVersion = '8.0.1';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -825,7 +665,7 @@ class AuroBibtemplate extends LitElement {
   constructor() {
     super();
 
-    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -864,7 +704,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**