diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2686e79..6347eb5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,31 @@
# Semantic Release Automated Changelog
+# [4.0.0](https://github.com/AlaskaAirlines/auro-popover/compare/v3.2.3...v4.0.0) (2024-09-30)
+
+
+### Bug Fixes
+
+* **popover:** update styles to reconfigure trigger and box-shadow ([6228987](https://github.com/AlaskaAirlines/auro-popover/commit/6228987f20f68c0dfdfef5a007d1a7cc554f307a))
+* resolve minor color theming issues ([f547a63](https://github.com/AlaskaAirlines/auro-popover/commit/f547a63130d2ebd932b6dbc84dd3304bfa49bca0))
+
+
+### Features
+
+* refactor color token structure with tier 3 tokens [#63](https://github.com/AlaskaAirlines/auro-popover/issues/63) ([e9906cf](https://github.com/AlaskaAirlines/auro-popover/commit/e9906cf4fc5495f19534fc74930d08de2c4f613f))
+
+
+### Performance Improvements
+
+* refactor custom component registration config ([083e22c](https://github.com/AlaskaAirlines/auro-popover/commit/083e22c8737c212ba7f19010fdd94b4883afb768))
+* replace hardcoded size values with design tokens ([ae404c3](https://github.com/AlaskaAirlines/auro-popover/commit/ae404c350f5c85bec262f90e8c1676b8f4f3815f))
+* update dependencies ([8c81954](https://github.com/AlaskaAirlines/auro-popover/commit/8c81954daa7e8ae55f7cee310e3d3edf8e27bc1e))
+* update deps and add name as attribute when custom registered ([100e6cc](https://github.com/AlaskaAirlines/auro-popover/commit/100e6cc6c1ea84d71174fe54e63dab1138576d90))
+
+
+### BREAKING CHANGES
+
+* trigger major release for color theme support #63
+
## [3.2.3](https://github.com/AlaskaAirlines/auro-popover/compare/v3.2.2...v3.2.3) (2024-03-20)
diff --git a/README.md b/README.md
index 2475130..1e62a43 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
```html
-
+
```
diff --git a/demo/api.md b/demo/api.md
index ea0ad8c..e33f6fd 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -1,35 +1,36 @@
-
+
+
# auro-popover
-Popover attaches to an element and displays on hover/blur.
-
+Popover attaches to an element and displays on hover/blur.
+
## Attributes
| Attribute | Type | Description |
-|---------------|-----------|--------------------------------------------------|
-| `addSpace` | `boolean` | If true, will add additional top and bottom space around the appearance of the popover in relation to the trigger |
-| `removeSpace` | `boolean` | If true, will remove top and bottom space around the appearance of the popover in relation to the trigger |
+|---------------|-----------|--------------------------------------------------|
+| [addSpace](#addSpace) | `boolean` | If true, will add additional top and bottom space around the appearance of the popover in relation to the trigger |
+| [removeSpace](#removeSpace) | `boolean` | If true, will remove top and bottom space around the appearance of the popover in relation to the trigger |
## Properties
| Property | Attribute | Type | Default | Description |
-|-------------|-------------|--------------------|---------|--------------------------------------------------|
-| `boundary` | `boundary` | `String \| Object` | | The element to use as the boundary for the popover. Can be a query selector or an HTML element. |
-| `disabled` | `disabled` | `boolean` | | If true, will disable the popover from showing on hover and focus |
-| `for` | `for` | `String` | | Directly associate the popover with a trigger element with the given ID. In most cases, this should not be necessary and set slot="trigger" on the element instead. |
-| `placement` | `placement` | `String` | "top" | Expects top/bottom - position for popover in relation to the element |
+|-------------|-------------|--------------------|---------|--------------------------------------------------|
+| [boundary](#boundary) | `boundary` | `String \| Object` | | The element to use as the boundary for the popover. Can be a query selector or an HTML element. |
+| [disabled](#disabled) | `disabled` | `boolean` | | If true, will disable the popover from showing on hover and focus |
+| [for](#for) | `for` | `String` | | Directly associate the popover with a trigger element with the given ID. In most cases, this should not be necessary and set slot="trigger" on the element instead. |
+| [placement](#placement) | `placement` | `String` | "top" | Expects top/bottom - position for popover in relation to the element |
## Slots
| Name | Description |
|-----------|--------------------------------------------------|
-| | Default unnamed slot for the use of popover content |
-| `trigger` | The element in this slot triggers hiding and showing the popover. |
-
-
-## API Examples
-
+| | Default unnamed slot for the use of popover content |
+| [trigger](#trigger) | The element in this slot triggers hiding and showing the popover. |
+
+
+## API Examples
+
### Basic
@@ -39,40 +40,36 @@ Popover attaches to an element and displays on hover/blur.
Top popover content!
Popover Test
-
-
+
Popover content!
Popover Test
-
-
+
- See code
-
+ See code
-
+
+
```html
Top popover content!
Popover Test
-
-
+
Popover content!
Popover Test
-
-```
-
-
-
-
-### Attribute Examples
-
+
+```
+
+
+
+### Attribute Examples
+
#### Disabled
When the `disabled` attribute is present, the popover will not appear on hover or focus.
@@ -87,20 +84,19 @@ When the `disabled` attribute is present, the popover will not appear on hover o
- See code
-
+ See code
-
+
+
```html
Top popover content!
Popover Test
-
-```
-
-
-
-
+
+```
+
+
+
#### Add space around popover
Use the `addSpace` attribute to add more space between the popover and it's trigger.
@@ -111,8 +107,7 @@ Use the `addSpace` attribute to add more space between the popover and it's trig
Notice this popover is a little further away from the trigger.
Popover w/additional space above
-
-
+
Notice this popover is a little further away from the trigger.
Popover w/additional space below
@@ -120,25 +115,23 @@ Use the `addSpace` attribute to add more space between the popover and it's trig
- See code
-
+ See code
-
+
+
```html
Notice this popover is a little further away from the trigger.
Popover w/additional space above
-
-
+
Notice this popover is a little further away from the trigger.
Popover w/additional space below
-
-```
-
-
-
-
+
+```
+
+
+
#### Remove space around popover
Use the `removeSpace` attribute to lessen the space between the popover and it's trigger.
@@ -149,8 +142,7 @@ Use the `removeSpace` attribute to lessen the space between the popover and it's
Notice this popover is a little closer to the trigger.
Popover w/less space above
-
-
+
Notice this popover is a little closer to the trigger.
Popover w/less space below
@@ -158,27 +150,25 @@ Use the `removeSpace` attribute to lessen the space between the popover and it's
- See code
-
+ See code
-
+
+
```html
Notice this popover is a little closer to the trigger.
Popover w/less space above
-
-
+
Notice this popover is a little closer to the trigger.
Popover w/less space below
-
-```
-
-
-
-
-### Property Examples
-
+
+```
+
+
+
+### Property Examples
+
#### Set overflow boundary for popover
Use the `boundary` property to set the overflow boundary for the `auro-popover`, shifting the x-axis of the `auro-popover`. This example demonstrates an `auro-popover` in a container without a `boundary` set vs an `auro-popover` in a container with a `boundary` set. The value passed to the `boundary` attribute can be a valid selector string or HTML Element.
@@ -192,8 +182,7 @@ Use the `boundary` property to set the overflow boundary for the `auro-popover`,
Popover content!
Popover Test
-
-
+
Example with boundary set
@@ -204,10 +193,10 @@ Use the `boundary` property to set the overflow boundary for the `auro-popover`,
- See code
-
+ See code
-
+
+
```html
Example with no boundary set
@@ -215,21 +204,19 @@ Use the `boundary` property to set the overflow boundary for the `auro-popover`,
Popover content!
Popover Test
-
-
+
Example with boundary set
Popover content!
Popover Test
-
-```
-
-
-
+
+```
+
-
+
+
```js
export function boundaryExample() {
const boundaryExample = document.querySelector('.boundaryExample');
@@ -238,10 +225,9 @@ export function boundaryExample() {
boundaryExample.boundary = popoverBoundary;
}
```
-
-
-
-
+
+
+
### Guidelines
The auro-popover element is meant to be used when the interaction and it's content is passive. A popover is not to be used for cases where the user must adjust their focus and acknowledge the presented content. For these cases, please see the [auro-dialog](https://auro.alaskaair.com/components/auro/dialog) element.
@@ -260,23 +246,20 @@ The use of a hyperlink for to trigger an event in the UI is semantically incorre
-
-
+
- See code
-
+ See code
-
+
+
```html
This works, but not recommended
hyperlink popover trigger
-
-```
-
-
-
-
+
+```
+
+
In the event that a hyperlink UI is desired, it is recommended to use the `role="button"` semantic reassignment to the hyperlink element.
@@ -289,33 +272,32 @@ In the event that a hyperlink UI is desired, it is recommended to use the `role=
-
-
+
- See code
-
+ See code
-
+
+
```html
Role button is recommended
hyperlink, role button
-
-```
-
-
-
-
+
+```
+
+
+
### Developer Notes
-The default trigger for a popover is a `hover` event. Mobile devices do not support `hover` events directly, so the `hover` event is replaced with a `touchstart` event to produce the popover. This is to ensure reliability of the action versus a dependency on a secondary interruption of the `hover` event on mobile devices.
-
+The default trigger for a popover is a `hover` event. Mobile devices do not support `hover` events directly, so the `hover` event is replaced with a `touchstart` event to produce the popover. This is to ensure reliability of the action versus a dependency on a secondary interruption of the `hover` event on mobile devices.
+
### Theme Support
The component may be restyled using the following code sample and changing the values of the following token(s).
-
+
+
```scss
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
diff --git a/package.json b/package.json
index e025b2c..c76a963 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"================================================================================"
],
"name": "@aurodesignsystem/auro-popover",
- "version": "4.0.0-beta.1",
+ "version": "4.0.0",
"description": "auro-popover HTML custom element",
"repository": {
"type": "git",