@aurodesignsystem-dev/auro-pane 0.0.0-pr110.0 → 0.0.0-pr112.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 (10) hide show
  1. package/README.md +49 -59
  2. package/demo/api.md +111 -80
  3. package/demo/auro-pane.min.js +49 -13
  4. package/demo/index.md +23 -113
  5. package/dist/auro-pane-C311Werz.js +24 -0
  6. package/dist/index.d.ts +193 -31
  7. package/dist/index.js +1 -1
  8. package/dist/registered.js +1 -1
  9. package/package.json +15 -8
  10. package/dist/auro-pane-CSwVDNb5.js +0 -24
package/README.md CHANGED
@@ -28,17 +28,20 @@ The following sections are editable by making changes to the following files:
28
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. -->
29
29
  <!-- AURO-GENERATED-CONTENT:END -->
30
30
 
31
- ## UI development browser support
31
+ ## Use Cases
32
32
 
33
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
34
- 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-pane>` element should be used in situations where users may:
35
36
 
37
+ * Select a date to see available flight options
38
+ * See multiple dates with price and availability information
36
39
  <!-- AURO-GENERATED-CONTENT:END -->
37
40
 
38
41
  ## Install
39
42
 
40
43
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
41
- [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-pane/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-pane/actions/workflows/testPublish.yml)
44
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-pane/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-pane/actions/workflows/release.yml)
42
45
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-pane?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-pane)
43
46
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-pane?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
44
47
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -49,17 +52,10 @@ $ npm i @aurodesignsystem/auro-pane
49
52
 
50
53
  <!-- AURO-GENERATED-CONTENT:END -->
51
54
 
52
- ### Design Token CSS Custom Property dependency
53
-
54
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
55
- The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
56
-
57
- <!-- AURO-GENERATED-CONTENT:END -->
58
-
59
- ### Define dependency in project component
55
+ ### Define Dependency in Project
60
56
 
61
57
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
62
- Defining the component dependency within each component that is using the `<auro-pane>` component.
58
+ Defining the dependency within each project that is using the `<auro-pane>` component.
63
59
 
64
60
  <!-- AURO-GENERATED-CONTENT:END -->
65
61
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -68,19 +64,9 @@ Defining the component dependency within each component that is using the `<auro
68
64
  import "@aurodesignsystem/auro-pane";
69
65
  ```
70
66
 
71
- <!-- AURO-GENERATED-CONTENT:END -->
72
- **Reference component in HTML**
73
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
74
- <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
75
-
76
- ```html
77
- <auro-pane date="2020-09-20"></auro-pane>
78
- <auro-pane date="2020-09-21" selected></auro-pane>
79
- <auro-pane date="2020-09-22" disabled></auro-pane>
80
- ```
81
67
  <!-- AURO-GENERATED-CONTENT:END -->
82
68
 
83
- ## Use CDN
69
+ ### Use CDN
84
70
 
85
71
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
86
72
  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.
@@ -91,55 +77,59 @@ In cases where the project is not able to process JS assets, there are pre-proce
91
77
 
92
78
  <!-- AURO-GENERATED-CONTENT:END -->
93
79
 
94
- ## auro-pane use cases
95
-
96
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
97
- <!-- The below content is automatically added from ./docs/partials/useCases.md -->
98
- The `<auro-pane>` element should be used in situations where users may:
99
-
100
- * Select a date to see available flight options
101
- * See multiple dates with price and availability information
102
- <!-- AURO-GENERATED-CONTENT:END -->
103
-
104
- ## API Code Examples
105
-
106
- ### Default auro-pane
80
+ ## Basic Example
107
81
 
108
82
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
109
83
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
110
84
 
111
85
  ```html
112
- <auro-pane date="2020-09-20"></auro-pane>
113
- <auro-pane date="2020-09-21" selected></auro-pane>
114
- <auro-pane date="2020-09-22" disabled></auro-pane>
86
+ <auro-pane date="2025-09-20"></auro-pane>
87
+ <auro-pane date="2025-09-21" selected></auro-pane>
88
+ <auro-pane date="2025-09-22" disabled></auro-pane>
115
89
  ```
116
90
  <!-- AURO-GENERATED-CONTENT:END -->
117
91
 
118
- ## Development
92
+ ## Custom Component Registration for Version Management
119
93
 
120
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
121
- 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.
94
+ 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.
95
+ The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
122
96
 
123
- 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.
97
+ When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
124
98
 
125
- <!-- AURO-GENERATED-CONTENT:END -->
126
-
127
- ### Start development environment
99
+ 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.
128
100
 
129
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
130
- 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**.
101
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
131
102
 
132
- ```shell
133
- $ npm run dev
103
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
104
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
105
+
106
+ ```js
107
+ // Import the class only
108
+ import { AuroPane } from '@aurodesignsystem/auro-pane/class';
109
+
110
+ // Register with a custom name if desired
111
+ AuroPane.register('custom-pane');
134
112
  ```
135
113
 
136
- Open [localhost:8000](http://localhost:8000/)
137
-
114
+ This will create a new custom element `<custom-pane>` that behaves exactly like `<auro-pane>`, allowing both to coexist on the same page without interfering with each other.
138
115
  <!-- AURO-GENERATED-CONTENT:END -->
116
+ <div class="exampleWrapper exampleWrapper--flex">
117
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
118
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
119
+ <custom-pane date="2020-09-20"></custom-pane>
120
+ <custom-pane date="2020-09-21" selected></custom-pane>
121
+ <custom-pane date="2020-09-22" disabled></custom-pane>
122
+ <!-- AURO-GENERATED-CONTENT:END -->
123
+ </div>
124
+ <auro-accordion alignRight>
125
+ <span slot="trigger">See code</span>
126
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
127
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
139
128
 
140
- ### Testing
141
-
142
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
143
- Automated tests are required for every Auro component. See `.\test\auro-pane.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.
144
-
145
- <!-- AURO-GENERATED-CONTENT:END -->
129
+ ```html
130
+ <custom-pane date="2020-09-20"></custom-pane>
131
+ <custom-pane date="2020-09-21" selected></custom-pane>
132
+ <custom-pane date="2020-09-22" disabled></custom-pane>
133
+ ```
134
+ <!-- AURO-GENERATED-CONTENT:END -->
135
+ </auro-accordion>
package/demo/api.md CHANGED
@@ -1,91 +1,65 @@
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-pane
5
5
 
6
- The auro-pane component displays shoulder date information.
6
+ The `auro-pane` element displays shoulder date information.
7
7
 
8
- ## Properties
8
+ ### Properties & Attributes
9
9
 
10
- | Property | Attribute | Type | Default | Description |
11
- |--------------|---------------|-----------|---------|--------------------------------------------------|
12
- | [ariaHidden](#ariaHidden) | `aria-hidden` | `Boolean` | false | When true, sets aria-hidden="true" on the inner button. When false, no aria-hidden attribute is set. |
13
- | [date](#date) | `date` | `String` | | Sets date for parsing and display. Format should be yyyy-mm-dd. |
14
- | [disabled](#disabled) | `disabled` | `Boolean` | false | Disables the pane. |
15
- | [price](#price) | `price` | `String` | | Sets price for display. Displayed as is. |
16
- | [selected](#selected) | `selected` | `Boolean` | false | Sets pane state to selected. |
17
- | [sm](#sm) | `sm` | `Boolean` | | Locks the component to `sm` variant. This attribute is deprecated and will be removed in a future version. |
18
- | [tabIndex](#tabIndex) | `tabIndex` | `Number` | | Sets tabindex on the inner button. |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ---------- | ----------- | --------- | ------- | ------- | ----------------------------------------------------------------- |
12
+ | ariaHidden | aria-hidden | | boolean | | Sets aria-hidden="true" on the inner button. |
13
+ | date | date | | string | | Sets date for parsing and display. Format should be `yyyy-mm-dd`. |
14
+ | disabled | disabled | | boolean | | Disables the pane. |
15
+ | price | price | | string | | Sets price for display. Displayed as is. |
16
+ | selected | selected | | boolean | | Sets pane state to selected. |
17
+ | sm | sm | | boolean | | DEPRECATED - Locks the component to `sm` variant. |
18
+ | tabIndex | tabIndex | | number | | Sets tabindex on the inner button. |
19
19
 
20
- ## Methods
20
+ ### Methods
21
21
 
22
- | Method | Type | Description |
23
- |---------|------------|-----------------------------------------|
24
- | [focus](#focus) | `(): void` | Programmatically focuses the component. |
22
+ | Name | Parameters | Return | Description |
23
+ | -------- | -------------------------------------------------------------------- | --------------- | ------------------------------------------------- |
24
+ | focus | None | [object Object] | Programmatically focuses the component. |
25
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
25
26
  <!-- AURO-GENERATED-CONTENT:END -->
26
27
 
27
- ## API Examples
28
-
29
- ### Basic
28
+ ## Basic
30
29
 
31
30
  <div class="exampleWrapper">
32
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basicSingle.html) -->
33
- <!-- The below content is automatically added from ../apiExamples/basicSingle.html -->
34
- <auro-pane date="2020-09-20"></auro-pane>
31
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicSingle.html) -->
32
+ <!-- The below content is automatically added from ./../apiExamples/basicSingle.html -->
33
+ <auro-pane date="2025-09-20"></auro-pane>
35
34
  <!-- AURO-GENERATED-CONTENT:END -->
36
35
  </div>
37
36
  <auro-accordion alignRight>
38
37
  <span slot="trigger">See code</span>
39
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basicSingle.html) -->
40
- <!-- The below code snippet is automatically added from ../apiExamples/basicSingle.html -->
38
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicSingle.html) -->
39
+ <!-- The below code snippet is automatically added from ./../apiExamples/basicSingle.html -->
41
40
 
42
41
  ```html
43
- <auro-pane date="2020-09-20"></auro-pane>
42
+ <auro-pane date="2025-09-20"></auro-pane>
44
43
  ```
45
44
  <!-- AURO-GENERATED-CONTENT:END -->
46
45
  </auro-accordion>
47
46
 
48
- ### Attribute Examples
49
-
50
- <span style="background-color: #ffebee; color: #c62828; padding: 2px 4px; border-radius: 3px; font-size: 0.75em;">DEPRECATED</span> - This attribute is deprecated and will be removed in a future version.
47
+ ## Property & Attribute Examples
51
48
 
52
- #### <a name="sm"></a>`sm`
53
-
54
- Use the `sm` attribute to render a reduced size version of `auro-pane`.
55
-
56
- <div class="exampleWrapper">
57
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/smallSingle.html) -->
58
- <!-- The below content is automatically added from ../apiExamples/smallSingle.html -->
59
- <auro-pane date="2020-09-20" price="$500" sm></auro-pane>
60
- <!-- AURO-GENERATED-CONTENT:END -->
61
- </div>
62
- <auro-accordion alignRight>
63
- <span slot="trigger">See code</span>
64
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/smallSingle.html) -->
65
- <!-- The below code snippet is automatically added from ../apiExamples/smallSingle.html -->
66
-
67
- ```html
68
- <auro-pane date="2020-09-20" price="$500" sm></auro-pane>
69
- ```
70
- <!-- AURO-GENERATED-CONTENT:END -->
71
- </auro-accordion>
72
-
73
- ### Property Examples
74
-
75
- #### <a name="ariaHidden"></a>`ariaHidden`
49
+ ### Aria-Hidden
76
50
 
77
51
  Sets `aria-hidden` on the inner button.
78
52
 
79
53
  <div class="exampleWrapper">
80
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/ariaHidden.html) -->
81
- <!-- The below content is automatically added from ../apiExamples/ariaHidden.html -->
54
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/aria-hidden.html) -->
55
+ <!-- The below content is automatically added from ../apiExamples/aria-hidden.html -->
82
56
  <auro-pane aria-hidden></auro-pane>
83
57
  <!-- AURO-GENERATED-CONTENT:END -->
84
58
  </div>
85
59
  <auro-accordion alignRight>
86
60
  <span slot="trigger">See code</span>
87
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/ariaHidden.html) -->
88
- <!-- The below code snippet is automatically added from ../apiExamples/ariaHidden.html -->
61
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/aria-hidden.html) -->
62
+ <!-- The below code snippet is automatically added from ../apiExamples/aria-hidden.html -->
89
63
 
90
64
  ```html
91
65
  <auro-pane aria-hidden></auro-pane>
@@ -93,14 +67,14 @@ Sets `aria-hidden` on the inner button.
93
67
  <!-- AURO-GENERATED-CONTENT:END -->
94
68
  </auro-accordion>
95
69
 
96
- #### <a name="date"></a>`date`
70
+ ### Date
97
71
 
98
- Sets date for parsing and display. Format should be yyyy-mm-dd. If no date is provided, the current date will be rendered.
72
+ Sets date for parsing and display. Format should be `yyyy-mm-dd`. If no date is provided, the current date will be rendered.
99
73
 
100
74
  <div class="exampleWrapper">
101
75
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/date.html) -->
102
76
  <!-- The below content is automatically added from ../apiExamples/date.html -->
103
- <auro-pane date="2020-09-20"></auro-pane>
77
+ <auro-pane date="2025-09-20"></auro-pane>
104
78
  <auro-pane date="invalid date"></auro-pane>
105
79
  <auro-pane></auro-pane>
106
80
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -111,21 +85,21 @@ Sets date for parsing and display. Format should be yyyy-mm-dd. If no date is pr
111
85
  <!-- The below code snippet is automatically added from ../apiExamples/date.html -->
112
86
 
113
87
  ```html
114
- <auro-pane date="2020-09-20"></auro-pane>
88
+ <auro-pane date="2025-09-20"></auro-pane>
115
89
  <auro-pane date="invalid date"></auro-pane>
116
90
  <auro-pane></auro-pane>
117
91
  ```
118
92
  <!-- AURO-GENERATED-CONTENT:END -->
119
93
  </auro-accordion>
120
94
 
121
- #### <a name="disabled"></a>`disabled`
95
+ ### Disabled
122
96
 
123
97
  Disables the pane.
124
98
 
125
99
  <div class="exampleWrapper">
126
100
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
127
101
  <!-- The below content is automatically added from ../apiExamples/disabled.html -->
128
- <auro-pane date="2020-09-20" price="$500" disabled></auro-pane>
102
+ <auro-pane date="2025-09-20" price="$500" disabled></auro-pane>
129
103
  <!-- AURO-GENERATED-CONTENT:END -->
130
104
  </div>
131
105
  <auro-accordion alignRight>
@@ -134,12 +108,12 @@ Disables the pane.
134
108
  <!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
135
109
 
136
110
  ```html
137
- <auro-pane date="2020-09-20" price="$500" disabled></auro-pane>
111
+ <auro-pane date="2025-09-20" price="$500" disabled></auro-pane>
138
112
  ```
139
113
  <!-- AURO-GENERATED-CONTENT:END -->
140
114
  </auro-accordion>
141
115
 
142
- #### <a name="price"></a>`price`
116
+ ### Price
143
117
 
144
118
  Sets price for display. Displayed as is.
145
119
 
@@ -162,7 +136,7 @@ Sets price for display. Displayed as is.
162
136
  <!-- AURO-GENERATED-CONTENT:END -->
163
137
  </auro-accordion>
164
138
 
165
- #### <a name="selected"></a>`selected`
139
+ ### Selected
166
140
 
167
141
  Sets pane state to selected.
168
142
 
@@ -171,7 +145,7 @@ Sets pane state to selected.
171
145
  <!-- The below content is automatically added from ../apiExamples/selected.html -->
172
146
  <auro-pane selected></auro-pane>
173
147
  <!-- AURO-GENERATED-CONTENT:END -->
174
- </div>
148
+ </div>
175
149
  <auro-accordion alignRight>
176
150
  <span slot="trigger">See code</span>
177
151
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/selected.html) -->
@@ -183,7 +157,36 @@ Sets pane state to selected.
183
157
  <!-- AURO-GENERATED-CONTENT:END -->
184
158
  </auro-accordion>
185
159
 
186
- #### <a name="tabindex"></a>`tabindex`
160
+ ### Small
161
+
162
+ <span style="background-color: #ffebee; color: #c62828; padding: 2px 4px; border-radius: 3px; font-size: 0.75em;">DEPRECATED</span> - This attribute is deprecated and will be removed in a future version.
163
+
164
+ Use the `sm` attribute to render a reduced size version of `auro-pane`.
165
+
166
+ <div class="exampleWrapper">
167
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/small.html) -->
168
+ <!-- The below content is automatically added from ../apiExamples/small.html -->
169
+ <auro-pane date="2025-09-20" price="$500" sm></auro-pane>
170
+ <auro-pane date="2025-09-21" price="$501" selected="true" sm></auro-pane>
171
+ <auro-pane date="2025-09-22" price="$480" disabled="true" sm></auro-pane>
172
+ <auro-pane date="2025-09-23" price="$9,999,999" sm></auro-pane> <!-- isPriceLong -->
173
+ <!-- AURO-GENERATED-CONTENT:END -->
174
+ </div>
175
+ <auro-accordion alignRight>
176
+ <span slot="trigger">See code</span>
177
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/small.html) -->
178
+ <!-- The below code snippet is automatically added from ../apiExamples/small.html -->
179
+
180
+ ```html
181
+ <auro-pane date="2025-09-20" price="$500" sm></auro-pane>
182
+ <auro-pane date="2025-09-21" price="$501" selected="true" sm></auro-pane>
183
+ <auro-pane date="2025-09-22" price="$480" disabled="true" sm></auro-pane>
184
+ <auro-pane date="2025-09-23" price="$9,999,999" sm></auro-pane> <!-- isPriceLong -->
185
+ ```
186
+ <!-- AURO-GENERATED-CONTENT:END -->
187
+ </auro-accordion>
188
+
189
+ ### Tab Index
187
190
 
188
191
  Sets tabindex on the inner button.
189
192
 
@@ -192,7 +195,7 @@ Sets tabindex on the inner button.
192
195
  <!-- The below content is automatically added from ../apiExamples/tabindex.html -->
193
196
  <auro-pane tabindex="0"></auro-pane>
194
197
  <!-- AURO-GENERATED-CONTENT:END -->
195
- </div>
198
+ </div>
196
199
  <auro-accordion alignRight>
197
200
  <span slot="trigger">See code</span>
198
201
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/tabindex.html) -->
@@ -203,22 +206,21 @@ Sets tabindex on the inner button.
203
206
  ```
204
207
  <!-- AURO-GENERATED-CONTENT:END -->
205
208
  </auro-accordion>
206
- </auro-accordion>
207
209
 
208
- ### Method Examples
210
+ ## Method Examples
209
211
 
210
- #### <a name="focus"></a>`focus`
212
+ ### Focus
211
213
 
212
- Focuses the pane button.
214
+ Sets focus to the inner button.
213
215
 
214
216
  <div class="exampleWrapper">
215
217
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/focus.html) -->
216
218
  <!-- The below content is automatically added from ../apiExamples/focus.html -->
217
219
  <auro-button id="focusExampleBtn">Focus Pane</auro-button>
218
220
  <br />
219
- <auro-pane id="focusExample" date="2020-09-20"></auro-pane>
221
+ <auro-pane id="focusExample" date="2025-09-20"></auro-pane>
220
222
  <!-- AURO-GENERATED-CONTENT:END -->
221
- </div>
223
+ </div>
222
224
  <auro-accordion alignRight>
223
225
  <span slot="trigger">See code</span>
224
226
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/focus.html) -->
@@ -227,7 +229,7 @@ Focuses the pane button.
227
229
  ```html
228
230
  <auro-button id="focusExampleBtn">Focus Pane</auro-button>
229
231
  <br />
230
- <auro-pane id="focusExample" date="2020-09-20"></auro-pane>
232
+ <auro-pane id="focusExample" date="2025-09-20"></auro-pane>
231
233
  ```
232
234
  <!-- AURO-GENERATED-CONTENT:END -->
233
235
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/focus.js) -->
@@ -246,12 +248,41 @@ export function focusExample() {
246
248
  <!-- AURO-GENERATED-CONTENT:END -->
247
249
  </auro-accordion>
248
250
 
249
- ### Theme Support
251
+ ## Common Usage Patterns & Functional Examples
252
+
253
+ ### Date and Price
254
+
255
+ All states using both `date` and `price` attributes.
256
+
257
+ <div class="exampleWrapper">
258
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/date-and-price.html) -->
259
+ <!-- The below content is automatically added from ../apiExamples/date-and-price.html -->
260
+ <auro-pane date="2025-09-20" price="$500"></auro-pane>
261
+ <auro-pane date="2025-09-21" price="$501" selected="true"></auro-pane>
262
+ <auro-pane date="2025-09-22" price="$480" disabled="true"></auro-pane>
263
+ <auro-pane date="2025-09-23" price="$999,999"></auro-pane> <!-- isPriceLong -->
264
+ <!-- AURO-GENERATED-CONTENT:END -->
265
+ </div>
266
+ <auro-accordion alignRight>
267
+ <span slot="trigger">See code</span>
268
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/date-and-price.html) -->
269
+ <!-- The below code snippet is automatically added from ../apiExamples/date-and-price.html -->
270
+
271
+ ```html
272
+ <auro-pane date="2025-09-20" price="$500"></auro-pane>
273
+ <auro-pane date="2025-09-21" price="$501" selected="true"></auro-pane>
274
+ <auro-pane date="2025-09-22" price="$480" disabled="true"></auro-pane>
275
+ <auro-pane date="2025-09-23" price="$999,999"></auro-pane> <!-- isPriceLong -->
276
+ ```
277
+ <!-- AURO-GENERATED-CONTENT:END -->
278
+ </auro-accordion>
279
+
280
+ ## Restyle Component with CSS Variables
250
281
 
251
- The component may be restyled using the following code sample and changing the values of the following token(s).
282
+ The component may be restyled by changing the values of the following token(s).
252
283
 
253
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
254
- <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
284
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
285
+ <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
255
286
 
256
287
  ```scss
257
288
  @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
package/demo/auro-pane.min.js CHANGED
@@ -120,6 +120,19 @@ class AuroLibraryRuntimeUtils {
120
120
 
121
121
  return elemTag === tag || elem.hasAttribute(tag);
122
122
  }
123
+
124
+ /**
125
+ * Gets the text content of a named slot.
126
+ * @returns {String}
127
+ * @private
128
+ */
129
+ getSlotText(elem, name) {
130
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
131
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
132
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
133
+
134
+ return text || null;
135
+ }
123
136
  }
124
137
 
125
138
  /**
@@ -2953,27 +2966,23 @@ var styleCss = i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1r
2953
2966
  var tokensCss = i$3`:host{--ds-auro-pane-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-pane-boxshadow-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-pane-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-pane-day-of-week-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-pane-date-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-pane-price-text-color: var(--ds-advanced-color-shared-text-accent, #2875b5);--ds-auro-pane-price-empty-text-color: var(--ds-basic-color-texticon-muted, #676767)}
2954
2967
  `;
2955
2968
 
2956
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2969
+ // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2957
2970
  // See LICENSE in the project root for license information.
2958
2971
 
2959
2972
 
2960
2973
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
2961
2974
  /**
2962
- * The auro-pane component displays shoulder date information.
2963
- *
2964
- * @attr {Boolean} ariaHidden - When true, sets aria-hidden="true" on the inner button. When false, no aria-hidden attribute is set.
2965
- * @attr {String} date - Sets date for parsing and display. Format should be yyyy-mm-dd.
2966
- * @attr {Boolean} disabled - Disables the pane.
2967
- * @attr {String} price - Sets price for display. Displayed as is.
2968
- * @attr {Boolean} selected - Sets pane state to selected.
2969
- * @attr {Boolean} sm - Locks the component to `sm` variant. This attribute is deprecated and will be removed in a future version.
2970
- * @attr {Number} tabIndex - Sets tabindex on the inner button.
2975
+ * The `auro-pane` element displays shoulder date information.
2976
+ * @customElement auro-pane
2971
2977
  */
2972
-
2973
2978
  class AuroPane extends i$1 {
2974
2979
  constructor() {
2975
2980
  super();
2976
2981
 
2982
+ this._initializeDefaults();
2983
+ }
2984
+
2985
+ _initializeDefaults() {
2977
2986
  this.ariaHidden = false;
2978
2987
  this.disabled = false;
2979
2988
  this.selected = false;
@@ -2993,15 +3002,42 @@ class AuroPane extends i$1 {
2993
3002
 
2994
3003
  static get properties() {
2995
3004
  return {
3005
+ /**
3006
+ * Sets aria-hidden="true" on the inner button.
3007
+ */
2996
3008
  ariaHidden: {
2997
3009
  type: Boolean,
2998
3010
  attribute: "aria-hidden",
2999
3011
  },
3012
+
3013
+ /**
3014
+ * Sets date for parsing and display. Format should be `yyyy-mm-dd`.
3015
+ */
3000
3016
  date: { type: String },
3017
+
3018
+ /**
3019
+ * Disables the pane.
3020
+ */
3001
3021
  disabled: { type: Boolean, reflect: true },
3022
+
3023
+ /**
3024
+ * Sets price for display. Displayed as is.
3025
+ */
3002
3026
  price: { type: String },
3027
+
3028
+ /**
3029
+ * Sets pane state to selected.
3030
+ */
3003
3031
  selected: { type: Boolean, reflect: true },
3032
+
3033
+ /**
3034
+ * DEPRECATED - Locks the component to `sm` variant.
3035
+ */
3004
3036
  sm: { type: Boolean },
3037
+
3038
+ /**
3039
+ * Sets tabindex on the inner button.
3040
+ */
3005
3041
  tabIndex: { type: Number },
3006
3042
  };
3007
3043
  }
@@ -3012,7 +3048,7 @@ class AuroPane extends i$1 {
3012
3048
 
3013
3049
  /**
3014
3050
  * This will register this element with the browser.
3015
- * @param {string} [name="auro-pane"] - The name of element that you want to register to.
3051
+ * @param {string} [name="auro-pane"] - The name of the element that you want to register.
3016
3052
  *
3017
3053
  * @example
3018
3054
  * AuroPane.register("custom-pane") // this will register this element to <custom-pane/>
@@ -3075,7 +3111,7 @@ class AuroPane extends i$1 {
3075
3111
 
3076
3112
  /**
3077
3113
  * Programmatically focuses the component.
3078
- * @return {void}
3114
+ * @returns {void}
3079
3115
  */
3080
3116
  focus() {
3081
3117
  this.renderRoot.querySelector("button").focus();