perf: alaskaairux ref updates

AlaskaAirlines · Jan 31, 2024 · 24f27b6 · 24f27b6
1 parent 39521db
commit 24f27b6
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -113,7 +113,7 @@ We recommend you load these bundles using [differential serving](https://philipw
 
 ```html
 <!-- **NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-combobox@latest/dist/auro-combobox__bundled.js" type="module"></script>
 ```

diff --git a/demo/api.html b/demo/api.html
@@ -22,7 +22,7 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
     <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" />
   </head>
@@ -42,9 +42,9 @@
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script type="module" src="../index.js"></script>
     <script src="./api.min.js"></script>
     <script>

diff --git a/demo/api.md b/demo/api.md
@@ -64,7 +64,7 @@
       </auro-combobox>
       <!-- AURO-GENERATED-CONTENT:END -->
     </div>
-<auro-accordion lowProfile justifyRight>
+<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 -->
@@ -106,7 +106,7 @@ The menu in this example was populated from data from a country/city API. To kee
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/dynamicMenu.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/dynamicMenu.html -->
@@ -212,7 +212,7 @@ If set, disables the combobox.
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/disabled.html -->
@@ -254,7 +254,7 @@ If set, combobox will not do suggestion filtering of the menuoptions. This optio
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/noFilter.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/noFilter.html -->
@@ -296,7 +296,7 @@ Sets a persistent error state (e.g. an error state returned from the server).
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->
@@ -339,7 +339,7 @@ Intended for use with the `required` attribute. If set, disables auto-validation
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/noValidate.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/noValidate.html -->
@@ -382,7 +382,7 @@ Populates the `required` attribute on the input. Used for client-side validation
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/required.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/required.html -->
@@ -436,7 +436,7 @@ Note: using a value that does not match a menu option will reset the combobox va
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/value.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/value.html -->
@@ -503,7 +503,7 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/typeMonthDayYear.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/typeMonthDayYear.html -->
@@ -548,7 +548,7 @@ The focus method will apply focus state to the combobox input field.
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/focus.js) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/focus.js -->
@@ -609,7 +609,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/helpText.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/helpText.html -->

diff --git a/demo/index.html b/demo/index.html
@@ -23,11 +23,11 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
     />
     <!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@alaskaairux/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@alaskaairux/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <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" />
   </head>
   <body class="auro-markdown">
     <main></main>
@@ -45,9 +45,9 @@
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script type="module" src="../index.js"></script>
     <script src="./index.min.js"></script>
     <script>

diff --git a/demo/index.md b/demo/index.md
@@ -1,9 +1,14 @@
-# combobox
-
-`<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
-
-## auro-combobox use cases
+# combobox
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
+<!-- The below content is automatically added from ./description.md -->
+`<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
+<!-- AURO-GENERATED-CONTENT:END -->
 
+## auro-combobox use cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
+<!-- The below content is automatically added from ./useCases.md -->
 The `<auro-combobox>` element should be used in situations where users may:
 
 * Search
@@ -12,11 +17,14 @@ The `<auro-combobox>` element should be used in situations where users may:
 * Filter
   * Options: user chooses filters for their search by using combobox
 * Select
-  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
+  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
+<!-- AURO-GENERATED-CONTENT:END -->
 
 ## Example(s)
 
-<div class="exampleWrapper">
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
   <auro-combobox>
     <span slot="label">Name</span>
     <auro-menu>
@@ -27,10 +35,13 @@ The `<auro-combobox>` element should be used in situations where users may:
       <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
-  </auro-combobox>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<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-combobox>
@@ -45,12 +56,14 @@ The `<auro-combobox>` element should be used in situations where users may:
   </auro-menu>
 </auro-combobox>
 ```
-
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Airports example
 
-<div class="exampleWrapper">
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/airports.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/airports.html -->
   <auro-combobox>
     <span slot="label">Name</span>
     <auro-menu>
@@ -181,10 +194,13 @@ The `<auro-combobox>` element should be used in situations where users may:
       <auro-menuoption value="iah" id="airport-iah" suggest="iah texas houston">george bush intercontinental</auro-menuoption>
       <auro-menuoption static nomatch>Unknown airport... </auro-menuoption>
     </auro-menu>
-  </auro-combobox>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/airports.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/airports.html -->
 
 ```html
 <auro-combobox>
@@ -319,12 +335,14 @@ The `<auro-combobox>` element should be used in situations where users may:
   </auro-menu>
 </auro-combobox>
 ```
-
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Example with checkmark for selected option
 
-<div class="exampleWrapper">
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/withCheckmark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/withCheckmark.html -->
   <auro-combobox checkmark>
       <span slot="label">Name</span>
       <auro-menu>
@@ -335,10 +353,13 @@ The `<auro-combobox>` element should be used in situations where users may:
           <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
           <auro-menuoption static nomatch>No matching option</auro-menuoption>
       </auro-menu>
-  </auro-combobox>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/withCheckmark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/withCheckmark.html -->
 
 ```html
 <auro-combobox checkmark>
@@ -353,7 +374,7 @@ The `<auro-combobox>` element should be used in situations where users may:
     </auro-menu>
 </auro-combobox>
 ```
-
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Using the type attribute
@@ -362,7 +383,9 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
 
 `type="credit-card"` is not currently supported.
 
-<div class="exampleWrapper">
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/typeMonthDayYear.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/typeMonthDayYear.html -->
   <auro-combobox type="month-day-year" triggerIcon>
     <span slot="label">Date</span>
     <auro-menu>
@@ -373,10 +396,13 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
         05/16/2022
       </auro-menuoption>
     </auro-menu>
-  </auro-combobox>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/typeMonthDayYear.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/typeMonthDayYear.html -->
 
 ```html
 <auro-combobox type="month-day-year" triggerIcon>
@@ -391,23 +417,28 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
   </auro-menu>
 </auro-combobox>
 ```
-
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Persistent menuoption with a custom event
 
-<div class="exampleWrapper">
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/persistent.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/persistent.html -->
   <auro-combobox id="persistent">
     <span slot="label">Address</span>
     <auro-menu id="customEvent">
       <auro-menuoption value="555 Address Way Seattle, WA 99999">555 Address Way Seattle, WA 99999</auro-menuoption>
       <auro-menuoption value="333 Some Street Seattle, WA 99999">333 Some Street Seattle, WA 99999</auro-menuoption>
       <auro-menuoption event="addNewAddress" persistent>Add new address</auro-menuoption>
     </auro-menu>
-  </auro-combobox>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/persistent.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/persistent.html -->
 
 ```html
 <auro-combobox id="persistent">
@@ -419,7 +450,7 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
   </auro-menu>
 </auro-combobox>
 ```
-
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Additional Use Case Examples
@@ -428,7 +459,9 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
 
 This example illustrates using a JavaScript function attached to an auro-button component click event to swap the values of two `auro-combobox` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.
 
-<div class="exampleWrapper">
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/swapValue.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/swapValue.html -->
   <div id="swapExample">
     <auro-combobox id="swapExampleLeft">
       <span slot="label">Name</span>
@@ -477,10 +510,13 @@ This example illustrates using a JavaScript function attached to an auro-button
     #swapExampleBtn {
       margin: 0 5px;
     }
-  </style>
+  </style>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/swapValue.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/swapValue.html -->
 
 ```html
 <div id="swapExample">
@@ -533,5 +569,5 @@ This example illustrates using a JavaScript function attached to an auro-button
   }
 </style>
 ```
-
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>