@aurodesignsystem-dev/auro-popover 0.0.0-pr117.1 → 0.0.0-pr119.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +62 -73
  2. package/demo/api.html +5 -5
  3. package/demo/api.md +132 -130
  4. package/demo/auro-popover.min.js +66 -16
  5. package/demo/index.html +2 -2
  6. package/demo/index.md +22 -79
  7. package/dist/auro-popover-C5AsGW1T.js +13 -0
  8. package/dist/index.d.ts +193 -17
  9. package/dist/index.js +1 -1
  10. package/dist/registered.js +1 -1
  11. package/package.json +15 -8
  12. package/dist/auro-popover-BY15_2h-.js +0 -13
package/README.md CHANGED
@@ -21,26 +21,28 @@ The following sections are editable by making changes to the following files:
21
21
 
22
22
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
23
  <!-- The below content is automatically added from ./docs/partials/description.md -->
24
- The Auro Design System fully supports `top` and `bottom` placed popovers. The following examples illustrate common popover uses followed up by code examples.
25
-
26
- See for more information as how to install and full API for the `<auro-popover>` element.
24
+ The `<auro-popover>` element attaches to another element and displays on hover. It uses the [Popper.js](https://popper.js.org/) library to position itself relative to the trigger element and supports placement options such as `top` and `bottom`.
27
25
  <!-- AURO-GENERATED-CONTENT:END -->
28
26
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
29
27
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
30
28
  <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
31
29
  <!-- AURO-GENERATED-CONTENT:END -->
32
30
 
33
- ## UI development browser support
31
+ ## Use Cases
34
32
 
35
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
36
- For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
33
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
34
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
35
+ The `auro-popover` element should be used in situations where users may:
37
36
 
37
+ * interact with an element to get clarification on content offering
38
+ * provide definition to iconic imagery
39
+ * when helper text is required
38
40
  <!-- AURO-GENERATED-CONTENT:END -->
39
41
 
40
42
  ## Install
41
43
 
42
44
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
43
- [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-popover/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-popover/actions/workflows/testPublish.yml)
45
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-popover/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-popover/actions/workflows/release.yml)
44
46
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-popover?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-popover)
45
47
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-popover?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
46
48
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -51,17 +53,10 @@ $ npm i @aurodesignsystem/auro-popover
51
53
 
52
54
  <!-- AURO-GENERATED-CONTENT:END -->
53
55
 
54
- ### Design Token CSS Custom Property dependency
55
-
56
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
57
- The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
58
-
59
- <!-- AURO-GENERATED-CONTENT:END -->
60
-
61
- ### Define dependency in project component
56
+ ### Define Dependency in Project
62
57
 
63
58
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
64
- Defining the component dependency within each component that is using the `<auro-popover>` component.
59
+ Defining the dependency within each project that is using the `<auro-popover>` component.
65
60
 
66
61
  <!-- AURO-GENERATED-CONTENT:END -->
67
62
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -71,25 +66,8 @@ import "@aurodesignsystem/auro-popover";
71
66
  ```
72
67
 
73
68
  <!-- AURO-GENERATED-CONTENT:END -->
74
- **Reference component in HTML**
75
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
76
- <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
77
69
 
78
- ```html
79
- <!-- The slot=trigger attribute is bound directly to the auro-button element -->
80
- <auro-popover>
81
- Top popover content!
82
- <auro-button slot="trigger">Popover Test</auro-button>
83
- </auro-popover>
84
- <!-- Using the placement=bottom attribute -->
85
- <auro-popover placement="bottom">
86
- Popover content!
87
- <auro-button secondary slot="trigger">Popover Test</auro-button>
88
- </auro-popover>
89
- ```
90
- <!-- AURO-GENERATED-CONTENT:END -->
91
-
92
- ## Use CDN
70
+ ### Use CDN
93
71
 
94
72
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
95
73
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -100,63 +78,74 @@ In cases where the project is not able to process JS assets, there are pre-proce
100
78
 
101
79
  <!-- AURO-GENERATED-CONTENT:END -->
102
80
 
103
- ## auro-popover use cases
104
-
105
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
106
- <!-- The below content is automatically added from ./docs/partials/useCases.md -->
107
- The `auro-popover` element should be used in situations where users may:
108
-
109
- * interact with an element to get clarification on content offering
110
- * provide definition to iconic imagery
111
- * when helper text is required
112
- <!-- AURO-GENERATED-CONTENT:END -->
113
-
114
- ## API Code Examples
115
-
116
- ### Default auro-popover
81
+ ## Basic Example
117
82
 
118
83
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
119
84
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
120
85
 
121
86
  ```html
122
- <!-- The slot=trigger attribute is bound directly to the auro-button element -->
123
87
  <auro-popover>
124
88
  Top popover content!
125
89
  <auro-button slot="trigger">Popover Test</auro-button>
126
90
  </auro-popover>
127
- <!-- Using the placement=bottom attribute -->
128
- <auro-popover placement="bottom">
129
- Popover content!
130
- <auro-button secondary slot="trigger">Popover Test</auro-button>
131
- </auro-popover>
132
91
  ```
133
92
  <!-- AURO-GENERATED-CONTENT:END -->
134
93
 
135
- ## Development
94
+ ## Custom Component Registration for Version Management
136
95
 
137
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
138
- In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
96
+ There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
97
+ The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
139
98
 
140
- Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
99
+ When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
141
100
 
142
- <!-- AURO-GENERATED-CONTENT:END -->
143
-
144
- ### Start development environment
101
+ However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
145
102
 
146
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
147
- Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
103
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
148
104
 
149
- ```shell
150
- $ npm run dev
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
106
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
107
+
108
+ ```js
109
+ // Import the class only
110
+ import { AuroPopover } from '@aurodesignsystem/auro-popover/class';
111
+
112
+ // Register with a custom name if desired
113
+ AuroPopover.register('custom-popover');
151
114
  ```
152
115
 
153
- Open [localhost:8000](http://localhost:8000/)
154
-
116
+ This will create a new custom element `<custom-popover>` that behaves exactly like `<auro-popover>`, allowing both to coexist on the same page without interfering with each other.
155
117
  <!-- AURO-GENERATED-CONTENT:END -->
118
+ <div class="exampleWrapper exampleWrapper--flex">
119
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
120
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
121
+ <!-- The slot=trigger attribute is bound directly to the auro-button element -->
122
+ <custom-popover>
123
+ Top popover content!
124
+ <auro-button slot="trigger">Popover Test</auro-button>
125
+ </custom-popover>
126
+ <!-- Using the placement=bottom attribute -->
127
+ <custom-popover placement="bottom">
128
+ Popover content!
129
+ <auro-button slot="trigger">Popover Test</auro-button>
130
+ </custom-popover>
131
+ <!-- AURO-GENERATED-CONTENT:END -->
132
+ </div>
133
+ <auro-accordion alignRight>
134
+ <span slot="trigger">See code</span>
135
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
136
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
156
137
 
157
- ### Testing
158
-
159
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
160
- Automated tests are required for every Auro component. See `.\test\auro-popover.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
161
-
162
- <!-- AURO-GENERATED-CONTENT:END -->
138
+ ```html
139
+ <!-- The slot=trigger attribute is bound directly to the auro-button element -->
140
+ <custom-popover>
141
+ Top popover content!
142
+ <auro-button slot="trigger">Popover Test</auro-button>
143
+ </custom-popover>
144
+ <!-- Using the placement=bottom attribute -->
145
+ <custom-popover placement="bottom">
146
+ Popover content!
147
+ <auro-button slot="trigger">Popover Test</auro-button>
148
+ </custom-popover>
149
+ ```
150
+ <!-- AURO-GENERATED-CONTENT:END -->
151
+ </auro-accordion>
package/demo/api.html CHANGED
@@ -50,11 +50,11 @@
50
50
  </script>
51
51
 
52
52
  <!-- If additional elements are needed for the demo, add them here. -->
53
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
54
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
55
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
56
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
57
-
53
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/+esm" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
57
+
58
58
  <script type="module" data-demo-script="true">
59
59
  import { initExamples } from "./api.min.js"
60
60
  initExamples();
package/demo/api.md CHANGED
@@ -1,175 +1,90 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
- <!-- The below content is automatically added from ../docs/api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
4
  # auro-popover
5
5
 
6
- Popover attaches to an element and displays on hover/blur.
6
+ The `auro-popover` element attaches to another element and displays on hover.
7
7
 
8
- ## Attributes
8
+ ### Properties & Attributes
9
9
 
10
- | Attribute | Type | Description |
11
- |---------------|-----------|--------------------------------------------------|
12
- | [addSpace](#addSpace) | `boolean` | If true, will add additional top and bottom space around the appearance of the popover in relation to the trigger |
13
- | [removeSpace](#removeSpace) | `boolean` | If true, will remove top and bottom space around the appearance of the popover in relation to the trigger |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ----------- | ----------- | --------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
12
+ | addSpace | addSpace | | boolean | | Adds additional top and bottom space around the appearance of the popover in relation to the trigger. |
13
+ | boundary | boundary | | string \| object | | The element to use as the boundary for the popover. Can be a query selector or an HTML element. |
14
+ | disabled | disabled | | boolean | | Disables the popover from showing on hover and focus. |
15
+ | for | for | | string | | Directly associates 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. |
16
+ | placement | placement | | `top` \| `bottom` | `top` | Position for popover in relation to the element. |
17
+ | removeSpace | removeSpace | | boolean | | Removes top and bottom space around the appearance of the popover in relation to the trigger. |
14
18
 
15
- ## Properties
19
+ ### Methods
16
20
 
17
- | Property | Attribute | Type | Default | Description |
18
- |-------------|-------------|--------------------|---------|--------------------------------------------------|
19
- | [boundary](#boundary) | `boundary` | `String \| Object` | | The element to use as the boundary for the popover. Can be a query selector or an HTML element. |
20
- | [disabled](#disabled) | `disabled` | `boolean` | | If true, will disable the popover from showing on hover and focus |
21
- | [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. |
22
- | [placement](#placement) | `placement` | `String` | "top" | Expects top/bottom - position for popover in relation to the element |
21
+ | Name | Parameters | Return | Description |
22
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
23
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
23
24
 
24
- ## Slots
25
+ ### Slots
25
26
 
26
- | Name | Description |
27
- |-----------|--------------------------------------------------|
28
- | | Default unnamed slot for the use of popover content |
29
- | [trigger](#trigger) | The element in this slot triggers hiding and showing the popover. |
27
+ | Name | Description |
28
+ | --------- | ----------------------------------------------------------------- |
29
+ | (default) | Default unnamed slot for the use of popover content |
30
+ | trigger | The element in this slot triggers hiding and showing the popover. |
30
31
  <!-- AURO-GENERATED-CONTENT:END -->
31
32
 
32
- ## API Examples
33
-
34
- ### Basic
33
+ ## Basic
35
34
 
36
35
  <div class="exampleWrapper">
37
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
38
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
39
- <!-- The slot=trigger attribute is bound directly to the auro-button element -->
36
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
37
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
40
38
  <auro-popover>
41
39
  Top popover content!
42
40
  <auro-button slot="trigger">Popover Test</auro-button>
43
- </auro-popover>
44
- <!-- Using the placement=bottom attribute -->
45
- <auro-popover placement="bottom">
46
- Popover content!
47
- <auro-button secondary slot="trigger">Popover Test</auro-button>
48
41
  </auro-popover>
49
42
  <!-- AURO-GENERATED-CONTENT:END -->
50
43
  </div>
51
44
  <auro-accordion alignRight>
52
45
  <span slot="trigger">See code</span>
53
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
54
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
46
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
47
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
55
48
 
56
49
  ```html
57
- <!-- The slot=trigger attribute is bound directly to the auro-button element -->
58
50
  <auro-popover>
59
51
  Top popover content!
60
52
  <auro-button slot="trigger">Popover Test</auro-button>
61
53
  </auro-popover>
62
- <!-- Using the placement=bottom attribute -->
63
- <auro-popover placement="bottom">
64
- Popover content!
65
- <auro-button secondary slot="trigger">Popover Test</auro-button>
66
- </auro-popover>
67
54
  ```
68
55
  <!-- AURO-GENERATED-CONTENT:END -->
69
56
  </auro-accordion>
70
57
 
71
- ### Attribute Examples
58
+ ## Property & Attribute Examples
72
59
 
73
- #### Disabled
74
-
75
- When the `disabled` attribute is present, the popover will not appear on hover or focus.
76
-
77
- <div class="exampleWrapper">
78
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
79
- <!-- The below content is automatically added from ../apiExamples/disabled.html -->
80
- <auro-popover disabled>
81
- Top popover content!
82
- <auro-button slot="trigger">Popover Test</auro-button>
83
- </auro-popover>
84
- <!-- AURO-GENERATED-CONTENT:END -->
85
- </div>
86
- <auro-accordion alignRight>
87
- <span slot="trigger">See code</span>
88
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/disabled.html) -->
89
- <!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
90
-
91
- ```html
92
- <auro-popover disabled>
93
- Top popover content!
94
- <auro-button slot="trigger">Popover Test</auro-button>
95
- </auro-popover>
96
- ```
97
- <!-- AURO-GENERATED-CONTENT:END -->
98
- </auro-accordion>
99
-
100
- #### Add space around popover
60
+ ### Add Space Around Popover
101
61
 
102
62
  Use the `addSpace` attribute to add more space between the popover and it's trigger.
103
63
 
104
64
  <div class="exampleWrapper">
105
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/addSpace.html) -->
106
- <!-- The below content is automatically added from ../apiExamples/addSpace.html -->
65
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/add-space.html) -->
66
+ <!-- The below content is automatically added from ../apiExamples/add-space.html -->
107
67
  <auro-popover addSpace>
108
68
  Notice this popover is a little<br>further away from the trigger.
109
69
  <auro-button slot="trigger">Popover w/additional space above</auro-button>
110
- </auro-popover>
111
- <auro-popover placement="bottom" addSpace>
112
- Notice this popover is a little<br>further away from the trigger.
113
- <auro-button secondary slot="trigger">Popover w/additional space below</auro-button>
114
70
  </auro-popover>
115
71
  <!-- AURO-GENERATED-CONTENT:END -->
116
72
  </div>
117
73
  <auro-accordion alignRight>
118
74
  <span slot="trigger">See code</span>
119
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/addSpace.html) -->
120
- <!-- The below code snippet is automatically added from ../apiExamples/addSpace.html -->
75
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/add-space.html) -->
76
+ <!-- The below code snippet is automatically added from ../apiExamples/add-space.html -->
121
77
 
122
78
  ```html
123
79
  <auro-popover addSpace>
124
80
  Notice this popover is a little<br>further away from the trigger.
125
81
  <auro-button slot="trigger">Popover w/additional space above</auro-button>
126
82
  </auro-popover>
127
- <auro-popover placement="bottom" addSpace>
128
- Notice this popover is a little<br>further away from the trigger.
129
- <auro-button secondary slot="trigger">Popover w/additional space below</auro-button>
130
- </auro-popover>
131
83
  ```
132
84
  <!-- AURO-GENERATED-CONTENT:END -->
133
85
  </auro-accordion>
134
86
 
135
- #### Remove space around popover
136
-
137
- Use the `removeSpace` attribute to lessen the space between the popover and it's trigger.
138
-
139
- <div class="exampleWrapper">
140
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/removeSpace.html) -->
141
- <!-- The below content is automatically added from ../apiExamples/removeSpace.html -->
142
- <auro-popover removeSpace>
143
- Notice this popover is a little<br>closer to the trigger.
144
- <auro-button slot="trigger">Popover w/less space above</auro-button>
145
- </auro-popover>
146
- <auro-popover placement="bottom" removeSpace>
147
- Notice this popover is a little<br>closer to the trigger.
148
- <auro-button secondary slot="trigger">Popover w/less space below</auro-button>
149
- </auro-popover>
150
- <!-- AURO-GENERATED-CONTENT:END -->
151
- </div>
152
- <auro-accordion alignRight>
153
- <span slot="trigger">See code</span>
154
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/removeSpace.html) -->
155
- <!-- The below code snippet is automatically added from ../apiExamples/removeSpace.html -->
156
-
157
- ```html
158
- <auro-popover removeSpace>
159
- Notice this popover is a little<br>closer to the trigger.
160
- <auro-button slot="trigger">Popover w/less space above</auro-button>
161
- </auro-popover>
162
- <auro-popover placement="bottom" removeSpace>
163
- Notice this popover is a little<br>closer to the trigger.
164
- <auro-button secondary slot="trigger">Popover w/less space below</auro-button>
165
- </auro-popover>
166
- ```
167
- <!-- AURO-GENERATED-CONTENT:END -->
168
- </auro-accordion>
169
-
170
- ### Property Examples
171
-
172
- #### Set overflow boundary for popover
87
+ ### Boundary
173
88
 
174
89
  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.
175
90
 
@@ -228,6 +143,97 @@ export function boundaryExample() {
228
143
  <!-- AURO-GENERATED-CONTENT:END -->
229
144
  </auro-accordion>
230
145
 
146
+ ### Disabled
147
+
148
+ When the `disabled` attribute is present, the popover will not appear on hover or focus.
149
+
150
+ <div class="exampleWrapper">
151
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
152
+ <!-- The below content is automatically added from ../apiExamples/disabled.html -->
153
+ <auro-popover disabled>
154
+ Top popover content!
155
+ <auro-button disabled slot="trigger">Popover Test</auro-button>
156
+ </auro-popover>
157
+ <!-- AURO-GENERATED-CONTENT:END -->
158
+ </div>
159
+ <auro-accordion alignRight>
160
+ <span slot="trigger">See code</span>
161
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/disabled.html) -->
162
+ <!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
163
+
164
+ ```html
165
+ <auro-popover disabled>
166
+ Top popover content!
167
+ <auro-button disabled slot="trigger">Popover Test</auro-button>
168
+ </auro-popover>
169
+ ```
170
+ <!-- AURO-GENERATED-CONTENT:END -->
171
+ </auro-accordion>
172
+
173
+ ### Placement
174
+
175
+ Use the `placement` attribute to set the position of the popover in relation to the trigger element. Options are `top` and `bottom`.
176
+
177
+ <div class="exampleWrapper">
178
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placement.html) -->
179
+ <!-- The below content is automatically added from ../apiExamples/placement.html -->
180
+ <auro-popover placement="bottom">
181
+ Bottom popover content!
182
+ <auro-button slot="trigger">Popover Test</auro-button>
183
+ </auro-popover>
184
+ <!-- AURO-GENERATED-CONTENT:END -->
185
+ </div>
186
+ <auro-accordion alignRight>
187
+ <span slot="trigger">See code</span>
188
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/placement.html) -->
189
+ <!-- The below code snippet is automatically added from ../apiExamples/placement.html -->
190
+
191
+ ```html
192
+ <auro-popover placement="bottom">
193
+ Bottom popover content!
194
+ <auro-button slot="trigger">Popover Test</auro-button>
195
+ </auro-popover>
196
+ ```
197
+ <!-- AURO-GENERATED-CONTENT:END -->
198
+ </auro-accordion>
199
+
200
+ ### Remove Space Around Popover
201
+
202
+ Use the `removeSpace` attribute to lessen the space between the popover and it's trigger.
203
+
204
+ <div class="exampleWrapper">
205
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/remove-space.html) -->
206
+ <!-- The below content is automatically added from ../apiExamples/remove-space.html -->
207
+ <auro-popover removeSpace>
208
+ Notice this popover is a little<br>closer to the trigger.
209
+ <auro-button slot="trigger">Popover w/less space above</auro-button>
210
+ </auro-popover>
211
+ <auro-popover placement="bottom" removeSpace>
212
+ Notice this popover is a little<br>closer to the trigger.
213
+ <auro-button slot="trigger">Popover w/less space below</auro-button>
214
+ </auro-popover>
215
+ <!-- AURO-GENERATED-CONTENT:END -->
216
+ </div>
217
+ <auro-accordion alignRight>
218
+ <span slot="trigger">See code</span>
219
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/remove-space.html) -->
220
+ <!-- The below code snippet is automatically added from ../apiExamples/remove-space.html -->
221
+
222
+ ```html
223
+ <auro-popover removeSpace>
224
+ Notice this popover is a little<br>closer to the trigger.
225
+ <auro-button slot="trigger">Popover w/less space above</auro-button>
226
+ </auro-popover>
227
+ <auro-popover placement="bottom" removeSpace>
228
+ Notice this popover is a little<br>closer to the trigger.
229
+ <auro-button slot="trigger">Popover w/less space below</auro-button>
230
+ </auro-popover>
231
+ ```
232
+ <!-- AURO-GENERATED-CONTENT:END -->
233
+ </auro-accordion>
234
+
235
+ ## Common Usage Patterns & Functional Examples
236
+
231
237
  ### Guidelines
232
238
 
233
239
  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.
@@ -238,8 +244,8 @@ The use of a hyperlink for to trigger an event in the UI is semantically incorre
238
244
 
239
245
  <auro-alert type="error" noIcon>
240
246
  <div class="exampleWrapper">
241
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/notRecommended.html) -->
242
- <!-- The below content is automatically added from ../apiExamples/notRecommended.html -->
247
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/not-recommended.html) -->
248
+ <!-- The below content is automatically added from ../apiExamples/not-recommended.html -->
243
249
  <auro-popover>
244
250
  This works, but not recommended
245
251
  <auro-hyperlink href="#" relative nav slot="trigger">hyperlink popover trigger</auro-hyperlink>
@@ -249,8 +255,8 @@ The use of a hyperlink for to trigger an event in the UI is semantically incorre
249
255
  </auro-alert>
250
256
  <auro-accordion alignRight>
251
257
  <span slot="trigger">See code</span>
252
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/notRecommended.html) -->
253
- <!-- The below code snippet is automatically added from ../apiExamples/notRecommended.html -->
258
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/not-recommended.html) -->
259
+ <!-- The below code snippet is automatically added from ../apiExamples/not-recommended.html -->
254
260
 
255
261
  ```html
256
262
  <auro-popover>
@@ -287,16 +293,12 @@ In the event that a hyperlink UI is desired, it is recommended to use the `role=
287
293
  <!-- AURO-GENERATED-CONTENT:END -->
288
294
  </auro-accordion>
289
295
 
290
- ### Developer Notes
291
-
292
- 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.
293
-
294
- ### Theme Support
296
+ ## Restyle Component with CSS Variables
295
297
 
296
- The component may be restyled using the following code sample and changing the values of the following token(s).
298
+ The component may be restyled by changing the values of the following token(s).
297
299
 
298
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
299
- <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
300
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
301
+ <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
300
302
 
301
303
  ```scss
302
304
  @use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;