Add csspart to auro-icon

.github/settings.yml

@@ -77,17 +77,13 @@ branches:
 # Labels: define labels for Issues and Pull Requests
 labels:
   - name: auro-hyperlink
-    color: 'fa23e4'
     description:
     process: Key filter for this repo
   - name: duplicate
-    color: '156fad'
     description: This Issue or Pull Request already exists
   - name: not-reviewed
-    color: '222222'
     description: Issue has not been reviewed by Auro team members
   - name: good first issue
-    color: '6bb7fb'
     description: Good for newcomers
     aliases:
     - beginner-friendly
@@ -98,83 +94,65 @@ labels:
     - starter-issue
     - starter
   - name: help wanted
-    color: '6bb7fb'
     description: Extra attention is needed, this user requires assistance to complete
       the work
   - name: released
-    color: 'A9A9A9'
     description: Completed work has been released
   - name: 'Status: Work In Progress'
     description: Issue or Pull Request work is in Progress
-    color: 'c0e585'
   - name: 'Status: Review Needed'
-    color: 'c0e585'
     description: Work is completed, user is requesting feedback
   - name: 'Status: Complete'
-    color: 'c0e585'
     description: Owner has completed work and considers it ready to be merged
   - name: 'Status: Blocked'
-    color: 'df0b37'
     description: Progress on the issue is Blocked, immediate attention is required
     aliases:
     - blocked
   - name: 'Abandoned'
-    color: '156fad'
     description: The author of this issue or Pull Request is not responding
     aliases:
     - wontfix
     - invalid
   - name: 'Type: Bug'
-    color: df0b37
     description: Bug or Bug fixes
     aliases:
     - bug
   - name: 'Type: Feature'
-    color: 'ffd200'
     description: New Feature
     aliases:
     - enhancement
   - name: 'Type: Design'
-    color: 'ffd200'
     description: New or related Design work
     aliases:
     - enhancement
   - name: 'Type: Content'
-    color: 'ffd200'
     description: Adding or editing content
     aliases:
     - enhancement
   - name: 'Type: Refactoring'
-    color: 'ffd200'
     description: A code change that neither fixes a bug nor adds a feature
     aliases:
     - refactor
   - name: 'Type: Documentation'
-    color: 'ffd200'
     description: Documentation only changes
     aliases:
     - documents
     - document
   - name: 'Type: CI'
-    color: 'ffd200'
     description: Changes to CI configuration files and scripts
     aliases:
     - ci
   - name: 'Type: Perf'
-    color: 'ffd200'
     description: Performance update to existing code
   - name: 'Question'
-    color: 'b83302'
     description: Further information is requested
     aliases:
     - question
   - name: 'Type: Dependencies'
-    color: 'ffd200'
     description: Pull requests that update a dependency file
     aliases:
     - dependencies
   - name: 'Type: UI Update'
-    color: 'ffd200'
     description: Changes to the user interface
     aliases:
     - dependencies

demo/api.md

@@ -26,9 +26,10 @@
 
 ## CSS Shadow Parts
 
-| Part   | Description                                      |
-|--------|--------------------------------------------------|
-| [link](#link) | Allows styling to be applied to the `a` element. |
+| Part         | Description                                      |
+|--------------|--------------------------------------------------|
+| [link](#link)       | Allows styling to be applied to the `a` element. |
+| [targetIcon](#targetIcon) | Allows styling to be applied to the icon that appears next to the hyperlink. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples

docs/api.md

@@ -23,6 +23,7 @@
 
 ## CSS Shadow Parts
 
-| Part   | Description                                      |
-|--------|--------------------------------------------------|
-| `link` | Allows styling to be applied to the `a` element. |
+| Part         | Description                                      |
+|--------------|--------------------------------------------------|
+| `link`       | Allows styling to be applied to the `a` element. |
+| `targetIcon` | Allows styling to be applied to the icon that appears next to the hyperlink. |

src/auro-hyperlink.js

@@ -37,6 +37,7 @@ import tokensCss from "./tokens-css.js";
  * @attr {String} target - Defines where to open the linked document.
  * @attr {String} type - Defines the type of hyperlink; accepts `nav` or `cta`.
  * @csspart link - Allows styling to be applied to the `a` element.
+ * @csspart targetIcon - Allows styling to be applied to the icon that appears next to the hyperlink.
  */
 
 // build the component class

src/component-base.mjs

@@ -192,9 +192,7 @@ export default class ComponentBase extends LitElement {
 
     svg.setAttribute('slot', 'svg');
 
-    const iconHtml = html`<${this.iconTag} customColor customSize customSvg>${svg}</${this.iconTag}>`;
-
-    return iconHtml;
+    return html`<${this.iconTag} customColor customSize customSvg part="targetIcon">${svg}</${this.iconTag}>`;
   }
 
   /**