@aurodesignsystem-dev/auro-header 0.0.0-pr174.1 → 0.0.0-pr176.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 +44 -56
  2. package/demo/api.html +1 -1
  3. package/demo/api.md +41 -35
  4. package/demo/index.html +1 -1
  5. package/demo/index.md +20 -50
  6. package/demo/index.min.js +56 -39
  7. package/dist/auro-header-DxcQaAOk.js +2 -0
  8. package/dist/index.d.ts +188 -7
  9. package/dist/index.js +1 -1
  10. package/dist/registered.js +1 -1
  11. package/package.json +14 -8
  12. package/dist/auro-header-D9QEL8PS.js +0 -2
package/README.md CHANGED
@@ -21,26 +21,29 @@ 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-header>` component is a simple component for rendering page or content headers without having to deal with font styling. Simply choose the level of the header want and the style type.
24
+ The `<auro-header>` element is for rendering page or content headers without having to deal with font styling. Simply choose the level of the header you want and the style type.
25
25
 
26
- The auro-header component is able to take any combination of options for heading levels and display options. See [Auro's header usage guidelines](https://auro.alaskaair.com/typography/usage) for additional examples sans web component dependency.
26
+ The `<auro-header>` element is able to take any combination of options for heading levels and display options. See [Auro's header usage guidelines](https://auro.alaskaair.com/typography/usage) for additional examples sans web component dependency.
27
27
  <!-- AURO-GENERATED-CONTENT:END -->
28
28
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
29
29
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
30
30
  <!-- 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
31
  <!-- AURO-GENERATED-CONTENT:END -->
32
32
 
33
- ## UI development browser support
33
+ ## Use Cases
34
34
 
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)
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
36
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
37
+ The `<auro-header>` element should be used in situations where users may:
37
38
 
39
+ * page header
40
+ * content / paragraph header
38
41
  <!-- AURO-GENERATED-CONTENT:END -->
39
42
 
40
43
  ## Install
41
44
 
42
45
  <!-- 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-header/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-header/actions/workflows/testPublish.yml)
46
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-header/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-header/actions/workflows/release.yml)
44
47
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-header?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-header)
45
48
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-header?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
46
49
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -51,17 +54,10 @@ $ npm i @aurodesignsystem/auro-header
51
54
 
52
55
  <!-- AURO-GENERATED-CONTENT:END -->
53
56
 
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
57
+ ### Define Dependency in Project
62
58
 
63
59
  <!-- 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-header>` component.
60
+ Defining the dependency within each project that is using the `<auro-header>` component.
65
61
 
66
62
  <!-- AURO-GENERATED-CONTENT:END -->
67
63
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -71,16 +67,8 @@ import "@aurodesignsystem/auro-header";
71
67
  ```
72
68
 
73
69
  <!-- 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
70
 
78
- ```html
79
- <auro-header>Hello World!</auro-header>
80
- ```
81
- <!-- AURO-GENERATED-CONTENT:END -->
82
-
83
- ## Use CDN
71
+ ### Use CDN
84
72
 
85
73
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
86
74
  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,19 +79,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
91
79
 
92
80
  <!-- AURO-GENERATED-CONTENT:END -->
93
81
 
94
- ## auro-header 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-header>` element should be used in situations where users may:
99
-
100
- * page header
101
- * content / paragraph header
102
- <!-- AURO-GENERATED-CONTENT:END -->
103
-
104
- ## API Code Examples
105
-
106
- ### Default auro-header
82
+ ## Basic Example
107
83
 
108
84
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
109
85
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -113,31 +89,43 @@ The `<auro-header>` element should be used in situations where users may:
113
89
  ```
114
90
  <!-- AURO-GENERATED-CONTENT:END -->
115
91
 
116
- ## Development
92
+ ## Custom Component Registration for Version Management
117
93
 
118
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
119
- 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.
120
96
 
121
- 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.
122
98
 
123
- <!-- AURO-GENERATED-CONTENT:END -->
124
-
125
- ### 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.
126
100
 
127
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
128
- 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:
129
102
 
130
- ```shell
131
- $ 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 { AuroHeader } from '@aurodesignsystem/auro-header/class';
109
+
110
+ // Register with a custom name if desired
111
+ AuroHeader.register('custom-header');
132
112
  ```
133
113
 
134
- Open [localhost:8000](http://localhost:8000/)
135
-
114
+ This will create a new custom element `<custom-header>` that behaves exactly like `<auro-header>`, allowing both to coexist on the same page without interfering with each other.
136
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-header>Hello World!</custom-header>
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ </div>
122
+ <auro-accordion alignRight>
123
+ <span slot="trigger">See code</span>
124
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
125
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
137
126
 
138
- ### Testing
139
-
140
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
141
- Automated tests are required for every Auro component. See `.\test\auro-header.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.
142
-
143
- <!-- AURO-GENERATED-CONTENT:END -->
127
+ ```html
128
+ <custom-header>Hello World!</custom-header>
129
+ ```
130
+ <!-- AURO-GENERATED-CONTENT:END -->
131
+ </auro-accordion>
package/demo/api.html CHANGED
@@ -51,6 +51,6 @@
51
51
  <script type="module" data-demo-script="true" src="./index.min.js"></script>
52
52
 
53
53
  <!-- If additional elements are needed for the demo, add them here. -->
54
- <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-accordion@latest/+esm" type="module"></script>
55
55
  </body>
56
56
  </html>
package/demo/api.md CHANGED
@@ -1,39 +1,41 @@
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-header
5
5
 
6
- The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
6
+ The `auro-header` element is a custom element to make using headers with the Auro Design System seamless and easy.
7
7
 
8
- ## Properties
8
+ ### Properties & Attributes
9
9
 
10
- | Property | Attribute | Type | Default | Description |
11
- |---------------|---------------|----------|-------------------------|--------------------------------------------------|
12
- | [color](#color) | `color` | `string` | | (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header. |
13
- | [display](#display) | `display` | `string` | | (Deprecated) Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. |
14
- | [level](#level) | `level` | `number` | 1 | Determines the semantic heading level of the HTML element. Options are `1` - `6`. |
15
- | [margin](#margin) | `margin` | `string` | | (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. |
16
- | [size](#size) | `size` | `string` | | (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. |
17
- | [typography](#typography) | `typography` | `string` | "heading" | Determines the font of heading, Options are `heading` or `display`. |
18
- | [visualLevel](#visualLevel) | `visualLevel` | `number` | "same value as `level`" | Determines the visual appearance of the header. Options are `1` - `6`. |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ----------- | ----------- | --------- | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
12
+ | level | level | | number | | Determines the semantic heading level of the HTML element. Options are `1` - `6`. |
13
+ | typography | typography | | string | | Determines the font of heading, Options are `heading` or `display`. |
14
+ | visualLevel | visualLevel | | number | `1` | Determines the visual appearance of the header. Options are `1` - `6`. |
15
+ | color | color | | string | | (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header. |
16
+ | display | display | | string | | (Deprecated) Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. |
17
+ | margin | margin | | string | | (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. |
18
+ | size | size | | string | | (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. |
19
+
20
+ ### Methods
21
+
22
+ | Name | Parameters | Return | Description |
23
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
24
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
19
25
  <!-- AURO-GENERATED-CONTENT:END -->
20
26
 
21
- ## API Examples
22
-
23
- ### Basic
24
-
25
- The `auro-header` defaults to an `<h1>` element.
27
+ ## Basic
26
28
 
27
29
  <div class="exampleWrapper">
28
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
29
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
30
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
31
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
30
32
  <auro-header>Hello World!</auro-header>
31
33
  <!-- AURO-GENERATED-CONTENT:END -->
32
- </div>
34
+ </div>
33
35
  <auro-accordion alignRight>
34
36
  <span slot="trigger">See code</span>
35
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
36
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
37
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
38
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
37
39
 
38
40
  ```html
39
41
  <auro-header>Hello World!</auro-header>
@@ -41,6 +43,8 @@ The `auro-header` defaults to an `<h1>` element.
41
43
  <!-- AURO-GENERATED-CONTENT:END -->
42
44
  </auro-accordion>
43
45
 
46
+ ## Property & Attribute Examples
47
+
44
48
  ### Changing Header Styles and Sizes
45
49
 
46
50
  The `auro-header` component allows for flexible customization of both HTML semantics and visual appearance styles.
@@ -72,8 +76,8 @@ If `visualLevel` is not specified, `visualLevel` will default to the same value
72
76
  Use the `visualLevel` attribute to control the visual style of the header.
73
77
 
74
78
  <div class="exampleWrapper">
75
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visualLevel.html) -->
76
- <!-- The below content is automatically added from ../apiExamples/visualLevel.html -->
79
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visual-level.html) -->
80
+ <!-- The below content is automatically added from ../apiExamples/visual-level.html -->
77
81
  <table>
78
82
  <thead>
79
83
  <tr>
@@ -153,8 +157,8 @@ Use the `visualLevel` attribute to control the visual style of the header.
153
157
  </div>
154
158
  <auro-accordion alignRight>
155
159
  <span slot="trigger">See code</span>
156
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visualLevel.html) -->
157
- <!-- The below code snippet is automatically added from ../apiExamples/visualLevel.html -->
160
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visual-level.html) -->
161
+ <!-- The below code snippet is automatically added from ../apiExamples/visual-level.html -->
158
162
 
159
163
  ```html
160
164
  <table>
@@ -253,13 +257,15 @@ Below is how each `visualLevel` value corresponds to a typography class:
253
257
 
254
258
  These classes apply consistent typography styles, including font size, line height, font weight, and more, ensuring uniform header presentation across components.
255
259
 
260
+ ## Common Usage Patterns & Functional Examples
261
+
256
262
  ### Additional Header Examples
257
263
 
258
264
  Additional examples with various header `level` and `visualLevel` options.
259
265
 
260
266
  <div class="exampleWrapper">
261
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/additionalExamples.html) -->
262
- <!-- The below content is automatically added from ../apiExamples/additionalExamples.html -->
267
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/additional-examples.html) -->
268
+ <!-- The below content is automatically added from ../apiExamples/additional-examples.html -->
263
269
  <auro-header level="2" visualLevel="1">Hello World!</auro-header>
264
270
  <auro-header level="2" visualLevel="2">Hello World!</auro-header>
265
271
  <auro-header level="3" visualLevel="3">Hello World!</auro-header>
@@ -268,8 +274,8 @@ Additional examples with various header `level` and `visualLevel` options.
268
274
  </div>
269
275
  <auro-accordion alignRight>
270
276
  <span slot="trigger">See code</span>
271
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/additionalExamples.html) -->
272
- <!-- The below code snippet is automatically added from ../apiExamples/additionalExamples.html -->
277
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/additional-examples.html) -->
278
+ <!-- The below code snippet is automatically added from ../apiExamples/additional-examples.html -->
273
279
 
274
280
  ```html
275
281
  <auro-header level="2" visualLevel="1">Hello World!</auro-header>
@@ -313,8 +319,8 @@ In some cases the margin between elements may need to be adjusted. To do this, a
313
319
  If there is a CSS selector that has the color definition you want to use with the header, simply wrap the header in a `div` or `span` and the auro-header component will inherit the color.
314
320
 
315
321
  <div class="exampleWrapper">
316
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/colorInheritance.html) -->
317
- <!-- The below content is automatically added from ../apiExamples/colorInheritance.html -->
322
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/color-inheritance.html) -->
323
+ <!-- The below content is automatically added from ../apiExamples/color-inheritance.html -->
318
324
  <div style="color: var(--ds-color-alert-error-default)">
319
325
  <auro-header level="3" visualLevel="2">There has been an error</auro-header>
320
326
  </div>
@@ -322,8 +328,8 @@ If there is a CSS selector that has the color definition you want to use with th
322
328
  </div>
323
329
  <auro-accordion alignRight>
324
330
  <span slot="trigger">See code</span>
325
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/colorInheritance.html) -->
326
- <!-- The below code snippet is automatically added from ../apiExamples/colorInheritance.html -->
331
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/color-inheritance.html) -->
332
+ <!-- The below code snippet is automatically added from ../apiExamples/color-inheritance.html -->
327
333
 
328
334
  ```html
329
335
  <div style="color: var(--ds-color-alert-error-default)">
package/demo/index.html CHANGED
@@ -51,6 +51,6 @@
51
51
  <script type="module" data-demo-script="true" src="./index.min.js"></script>
52
52
 
53
53
  <!-- If additional elements are needed for the demo, add them here. -->
54
- <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-accordion@latest/+esm" type="module"></script>
55
55
  </body>
56
56
  </html>
package/demo/index.md CHANGED
@@ -1,22 +1,22 @@
1
1
  <!--
2
- The index.md file is a compiled document. No edits should be made directly to this file.
3
- README.md is created by running `npm run build:docs`.
4
- This file is generated based on a template fetched from `./docs/partials/index.md`
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
5
  -->
6
6
 
7
- # Header
8
-
9
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
10
- <!-- The below content is automatically added from ../docs/partials/description.md -->
11
- The `<auro-header>` component is a simple component for rendering page or content headers without having to deal with font styling. Simply choose the level of the header want and the style type.
7
+ # Header
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
+ The `<auro-header>` element is for rendering page or content headers without having to deal with font styling. Simply choose the level of the header you want and the style type.
12
12
 
13
- The auro-header component is able to take any combination of options for heading levels and display options. See [Auro's header usage guidelines](https://auro.alaskaair.com/typography/usage) for additional examples sans web component dependency.
13
+ The `<auro-header>` element is able to take any combination of options for heading levels and display options. See [Auro's header usage guidelines](https://auro.alaskaair.com/typography/usage) for additional examples sans web component dependency.
14
14
  <!-- AURO-GENERATED-CONTENT:END -->
15
15
 
16
- ## auro-header use cases
17
-
18
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
19
- <!-- The below content is automatically added from ../docs/partials/useCases.md -->
16
+ ## Use Cases
17
+
18
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
19
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
20
20
  The `<auro-header>` element should be used in situations where users may:
21
21
 
22
22
  * page header
@@ -25,52 +25,22 @@ The `<auro-header>` element should be used in situations where users may:
25
25
 
26
26
  ## Example(s)
27
27
 
28
- The `auro-header` defaults to an `<h1>` element.
29
-
28
+ ### Basic
29
+
30
30
  <div class="exampleWrapper">
31
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
32
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
31
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
32
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
33
33
  <auro-header>Hello World!</auro-header>
34
34
  <!-- AURO-GENERATED-CONTENT:END -->
35
35
  </div>
36
36
  <auro-accordion alignRight>
37
37
  <span slot="trigger">See code</span>
38
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
39
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
38
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
39
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
40
40
 
41
41
  ```html
42
42
  <auro-header>Hello World!</auro-header>
43
43
  ```
44
44
  <!-- AURO-GENERATED-CONTENT:END -->
45
- </auro-accordion>
46
-
47
- ## Recommended Use and Version Control
48
-
49
- There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-header` custom element is defined automatically.
50
-
51
- To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroHeader.register(name)` method and pass in a unique name.
52
-
53
- ```js
54
- import { AuroHeader } from '@aurodesignsystem/auro-header/class';
55
-
56
- AuroHeader.register('custom-header');
57
- ```
58
-
59
- This will create a new custom element that you can use in your HTML that will function identically to the `auro-header` element.
60
-
61
- <div class="exampleWrapper">
62
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
63
- <!-- The below content is automatically added from ../apiExamples/custom.html -->
64
- <custom-header>Hello World!</custom-header>
65
- <!-- AURO-GENERATED-CONTENT:END -->
66
- </div>
67
- <auro-accordion alignRight>
68
- <span slot="trigger">See code</span>
69
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
70
- <!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
71
-
72
- ```html
73
- <custom-header>Hello World!</custom-header>
74
- ```
75
- <!-- AURO-GENERATED-CONTENT:END -->
76
45
  </auro-accordion>
46
+
package/demo/index.min.js CHANGED
@@ -66,6 +66,19 @@ class AuroLibraryRuntimeUtils {
66
66
 
67
67
  return elemTag === tag || elem.hasAttribute(tag);
68
68
  }
69
+
70
+ /**
71
+ * Gets the text content of a named slot.
72
+ * @returns {String}
73
+ * @private
74
+ */
75
+ getSlotText(elem, name) {
76
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
77
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
78
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
79
+
80
+ return text || null;
81
+ }
69
82
  }
70
83
 
71
84
  /**
@@ -127,17 +140,20 @@ var styleCss = i$4`.body-default{font-size:var(--wcss-body-default-font-size, 1r
127
140
  // See LICENSE in the project root for license information.
128
141
 
129
142
 
130
- /**
131
- * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
132
- */
133
-
134
143
  const MAX_LEVEL = 6;
135
144
 
136
- // build the component class
145
+ /**
146
+ * The `auro-header` element is a custom element to make using headers with the Auro Design System seamless and easy.
147
+ * @customElement auro-header
148
+ */
137
149
  class AuroHeader extends i$1 {
138
150
  constructor() {
139
151
  super();
140
152
 
153
+ this._initializeDefaults();
154
+ }
155
+
156
+ _initializeDefaults() {
141
157
  this.level = 1;
142
158
  this.typography = "heading";
143
159
 
@@ -145,28 +161,19 @@ class AuroHeader extends i$1 {
145
161
  * @private
146
162
  */
147
163
  this.runtimeUtils = new AuroLibraryRuntimeUtils();
164
+
148
165
  }
149
166
 
150
167
  // function to define props used within the scope of this component
151
168
  static get properties() {
152
169
  return {
153
170
  /**
154
- * Determines the semantic heading level of the HTML element. Options are `1` - `6`.
171
+ * (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header.
172
+ * @deprecated
155
173
  */
156
- level: {
157
- type: Number,
158
- reflect: true,
159
- converter(value) {
160
- const num = Number(value);
161
- // Clamp value between 1 and 6, default to 1 if invalid
162
- if (Number.isNaN(num) || num < 1) {
163
- return 1;
164
- }
165
- if (num > MAX_LEVEL) {
166
- return MAX_LEVEL;
167
- }
168
- return num;
169
- },
174
+ color: {
175
+ type: String,
176
+ reflect: true
170
177
  },
171
178
 
172
179
  /**
@@ -175,14 +182,13 @@ class AuroHeader extends i$1 {
175
182
  */
176
183
  display: {
177
184
  type: String,
178
- reflect: true,
185
+ reflect: true
179
186
  },
180
187
 
181
188
  /**
182
- * Determines the visual appearance of the header. Options are `1` - `6`.
183
- * @default same value as `level`
189
+ * Determines the semantic heading level of the HTML element. Options are `1` - `6`.
184
190
  */
185
- visualLevel: {
191
+ level: {
186
192
  type: Number,
187
193
  reflect: true,
188
194
  converter(value) {
@@ -195,42 +201,53 @@ class AuroHeader extends i$1 {
195
201
  return MAX_LEVEL;
196
202
  }
197
203
  return num;
198
- },
204
+ }
199
205
  },
200
206
 
201
207
  /**
202
- * Determines the font of heading, Options are `heading` or `display`.
208
+ * (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
209
+ * @deprecated
203
210
  */
204
- typography: {
211
+ margin: {
205
212
  type: String,
206
- reflect: true,
213
+ reflect: true
207
214
  },
208
215
 
209
216
  /**
210
- * (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header.
217
+ * (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
211
218
  * @deprecated
212
219
  */
213
- color: {
220
+ size: {
214
221
  type: String,
215
- reflect: true,
222
+ reflect: true
216
223
  },
217
224
 
218
225
  /**
219
- * (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
220
- * @deprecated
226
+ * Determines the font of heading, Options are `heading` or `display`.
221
227
  */
222
- margin: {
228
+ typography: {
223
229
  type: String,
224
- reflect: true,
230
+ reflect: true
225
231
  },
226
232
 
227
233
  /**
228
- * (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
229
- * @deprecated
234
+ * Determines the visual appearance of the header. Options are `1` - `6`.
235
+ * @default 1
230
236
  */
231
- size: {
232
- type: String,
237
+ visualLevel: {
238
+ type: Number,
233
239
  reflect: true,
240
+ converter(value) {
241
+ const num = Number(value);
242
+ // Clamp value between 1 and 6, default to 1 if invalid
243
+ if (Number.isNaN(num) || num < 1) {
244
+ return 1;
245
+ }
246
+ if (num > MAX_LEVEL) {
247
+ return MAX_LEVEL;
248
+ }
249
+ return num;
250
+ },
234
251
  },
235
252
  };
236
253
  }
package/dist/auro-header-DxcQaAOk.js ADDED
@@ -0,0 +1,2 @@
1
+ import{css as e,LitElement as s}from"lit";import{classMap as t}from"lit/directives/class-map.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{unsafeStatic as i,html as l}from"lit/static-html.js";class r{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,t=(s,a=s&&s.closest(e))=>s&&s!==document&&s!==window?a||t(s.getRootNode().host):null){return t(s)}handleComponentTagRename(e,s){const t=s.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,!0)}elementMatch(e,s){const t=s.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}getSlotText(e,s){const t=e.shadowRoot?.querySelector(`slot[name="${s}"]`);return(t?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var n=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
2
+ `;class c extends s{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.level=1,this.typography="heading",this.runtimeUtils=new r}static get properties(){return{color:{type:String,reflect:!0},display:{type:String,reflect:!0},level:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},margin:{type:String,reflect:!0},size:{type:String,reflect:!0},typography:{type:String,reflect:!0},visualLevel:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}}}}static get styles(){return[n]}static get displayClassMap(){return{800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){r.prototype.registerComponent(e,c)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header")}spacingDecision(e){if("both"===this.margin)switch(e){case"none":return"util_stackMarginnone--top util_stackMarginnone--bottom";case"25":return"util_stackMargin25--top util_stackMargin25--bottom";case"50":return"util_stackMargin50--top util_stackMargin50--bottom";case"100":return"util_stackMargin100--top util_stackMargin100--bottom";case"150":return"util_stackMargin150--top util_stackMargin150--bottom";case"200":return"util_stackMargin200--top util_stackMargin200--bottom";case"300":return"util_stackMargin300--top util_stackMargin300--bottom";case"400":return"util_stackMargin400--top util_stackMargin400--bottom";case"600":return"util_stackMargin600--top util_stackMargin600--bottom";case"800":return"util_stackMargin800--top util_stackMargin800--bottom";default:return""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case"none":return`util_stackMarginnone--${this.margin}`;case"25":return`util_stackMargin25--${this.margin}`;case"50":return`util_stackMargin50--${this.margin}`;case"100":return`util_stackMargin100--${this.margin}`;case"150":return`util_stackMargin150--${this.margin}`;case"200":return`util_stackMargin200--${this.margin}`;case"300":return`util_stackMargin300--${this.margin}`;case"400":return`util_stackMargin400--${this.margin}`;case"600":return`util_stackMarginX600--${this.margin}`;case"800":return`util_stackMargin800--${this.margin}`;default:return""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",r=this.spacingDecision(this.size),n=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],o={heading:!0,[n]:!0};if(r){r.split(" ").forEach(e=>{e.trim()&&(o[e.trim()]=!0)})}const m=t(o),g=i(`h${s}`);return l`<${g} class="${m}" style="color: ${a(this.color?this.color:void 0)}"><slot></slot></${g}>`}render(){return this.template(this.level)}}export{c as A};
package/dist/index.d.ts CHANGED
@@ -1,9 +1,190 @@
1
- import { css, LitElement } from 'lit';
2
- import { classMap } from 'lit/directives/class-map.js';
3
- import { ifDefined } from 'lit/directives/if-defined.js';
4
- import { unsafeStatic, html } from 'lit/static-html.js';
5
1
 
6
- class l{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{});}closestElement(e,s=this,t=(s,a=s&&s.closest(e))=>s&&s!==document&&s!==window?a||t(s.getRootNode().host):null){return t(s)}handleComponentTagRename(e,s){const t=s.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,true);}elementMatch(e,s){const t=s.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}}var n=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
7
- `;class c extends LitElement{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new l;}static get properties(){return {level:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},display:{type:String,reflect:true},visualLevel:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},typography:{type:String,reflect:true},color:{type:String,reflect:true},margin:{type:String,reflect:true},size:{type:String,reflect:true}}}static get styles(){return [n]}static get displayClassMap(){return {800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){l.prototype.registerComponent(e,c);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header");}spacingDecision(e){if("both"===this.margin)switch(e){case "none":return "util_stackMarginnone--top util_stackMarginnone--bottom";case "25":return "util_stackMargin25--top util_stackMargin25--bottom";case "50":return "util_stackMargin50--top util_stackMargin50--bottom";case "100":return "util_stackMargin100--top util_stackMargin100--bottom";case "150":return "util_stackMargin150--top util_stackMargin150--bottom";case "200":return "util_stackMargin200--top util_stackMargin200--bottom";case "300":return "util_stackMargin300--top util_stackMargin300--bottom";case "400":return "util_stackMargin400--top util_stackMargin400--bottom";case "600":return "util_stackMargin600--top util_stackMargin600--bottom";case "800":return "util_stackMargin800--top util_stackMargin800--bottom";default:return ""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case "none":return `util_stackMarginnone--${this.margin}`;case "25":return `util_stackMargin25--${this.margin}`;case "50":return `util_stackMargin50--${this.margin}`;case "100":return `util_stackMargin100--${this.margin}`;case "150":return `util_stackMargin150--${this.margin}`;case "200":return `util_stackMargin200--${this.margin}`;case "300":return `util_stackMargin300--${this.margin}`;case "400":return `util_stackMargin400--${this.margin}`;case "600":return `util_stackMarginX600--${this.margin}`;case "800":return `util_stackMargin800--${this.margin}`;default:return ""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",l=this.spacingDecision(this.size),n=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],o={heading:true,[n]:true};if(l){l.split(" ").forEach(e=>{e.trim()&&(o[e.trim()]=true);});}const m=classMap(o),g=unsafeStatic(`h${s}`);return html`<${g} class="${m}" style="color: ${ifDefined(this.color?this.color:void 0)}"><slot></slot></${g}>`}render(){return this.template(this.level)}}
2
+ import type { AuroHeader } from "src/auro-header.js";
8
3
 
9
- export { c as AuroHeader };
4
+ /**
5
+ * This type can be used to create scoped tags for your components.
6
+ *
7
+ * Usage:
8
+ *
9
+ * ```ts
10
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
11
+ *
12
+ * declare module "my-library" {
13
+ * namespace JSX {
14
+ * interface IntrinsicElements
15
+ * extends ScopedElements<'test-', ''> {}
16
+ * }
17
+ * }
18
+ * ```
19
+ *
20
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
21
+ */
22
+ export type ScopedElements<
23
+ Prefix extends string = "",
24
+ Suffix extends string = ""
25
+ > = {
26
+ [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
27
+ };
28
+
29
+ type BaseProps<T extends HTMLElement> = {
30
+
31
+ /** Content added between the opening and closing tags of the element */
32
+ children?: any;
33
+ /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
34
+ class?: string;
35
+ /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
36
+ className?: string;
37
+ /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
38
+ classList?: Record<string, boolean | undefined>;
39
+ /** Specifies the text direction of the element. */
40
+ dir?: "ltr" | "rtl";
41
+ /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
42
+ exportparts?: string;
43
+ /** For <label> and <output>, lets you associate the label with some control. */
44
+ htmlFor?: string;
45
+ /** Specifies whether the element should be hidden. */
46
+ hidden?: boolean | string;
47
+ /** A unique identifier for the element. */
48
+ id?: string;
49
+ /** Keys tell React which array item each component corresponds to */
50
+ key?: string | number;
51
+ /** Specifies the language of the element. */
52
+ lang?: string;
53
+ /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
54
+ part?: string;
55
+ /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
56
+ ref?: T | ((e: T) => void);
57
+ /** Adds a reference for a custom element slot */
58
+ slot?: string;
59
+ /** Prop for setting inline styles */
60
+ style?: Record<string, string | number>;
61
+ /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
62
+ tabIndex?: number;
63
+ /** Specifies the tooltip text for the element. */
64
+ title?: string;
65
+ /** Passing 'no' excludes the element content from being translated. */
66
+ translate?: "yes" | "no";
67
+ /** The popover global attribute is used to designate an element as a popover element. */
68
+ popover?: "auto" | "hint" | "manual";
69
+ /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
70
+ popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
71
+ /** Specifies the action to be performed on a popover element being controlled by a control element. */
72
+ popovertargetaction?: "show" | "hide" | "toggle";
73
+
74
+ } ;
75
+
76
+ type BaseEvents = {
77
+
78
+
79
+ };
80
+
81
+
82
+
83
+ export type AuroHeaderProps = {
84
+ /** Determines the semantic heading level of the HTML element. Options are `1` - `6`. */
85
+ "level"?: AuroHeader['level'];
86
+ /** Determines the font of heading, Options are `heading` or `display`. */
87
+ "typography"?: AuroHeader['typography'];
88
+ /** Determines the visual appearance of the header. Options are `1` - `6`. */
89
+ "visualLevel"?: AuroHeader['visualLevel'];
90
+ /** @deprecated true - (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header. */
91
+ "color"?: AuroHeader['color'];
92
+ /** @deprecated true - (Deprecated) Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. */
93
+ "display"?: AuroHeader['display'];
94
+ /** @deprecated true - (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. */
95
+ "margin"?: AuroHeader['margin'];
96
+ /** @deprecated true - (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. */
97
+ "size"?: AuroHeader['size'];
98
+
99
+
100
+ }
101
+
102
+ export type CustomElements = {
103
+
104
+
105
+ /**
106
+ * The `auro-header` element is a custom element to make using headers with the Auro Design System seamless and easy.
107
+ *
108
+ * ## Attributes & Properties
109
+ *
110
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
111
+ *
112
+ * - `level`: Determines the semantic heading level of the HTML element. Options are `1` - `6`.
113
+ * - `typography`: Determines the font of heading, Options are `heading` or `display`.
114
+ * - `visualLevel`: Determines the visual appearance of the header. Options are `1` - `6`.
115
+ * - `color`: (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header.
116
+ * - `display`: (Deprecated) Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
117
+ * - `margin`: (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
118
+ * - `size`: (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
119
+ *
120
+ * ## Methods
121
+ *
122
+ * Methods that can be called to access component functionality.
123
+ *
124
+ * - `_initializeDefaults() => void`: undefined
125
+ * - `register(name?: string = "auro-header") => void`: This will register this element with the browser.
126
+ */
127
+ "auro-header": Partial<AuroHeaderProps & BaseProps<AuroHeader> & BaseEvents>;
128
+ }
129
+
130
+ export type CustomCssProperties = {
131
+
132
+ }
133
+
134
+
135
+ declare module 'react' {
136
+ namespace JSX {
137
+ interface IntrinsicElements extends CustomElements {}
138
+ }
139
+
140
+ }
141
+
142
+ declare module 'preact' {
143
+ namespace JSX {
144
+ interface IntrinsicElements extends CustomElements {}
145
+ }
146
+
147
+ }
148
+
149
+ declare module '@builder.io/qwik' {
150
+ namespace JSX {
151
+ interface IntrinsicElements extends CustomElements {}
152
+ }
153
+
154
+ }
155
+
156
+ declare module '@stencil/core' {
157
+ namespace JSX {
158
+ interface IntrinsicElements extends CustomElements {}
159
+ }
160
+
161
+ }
162
+
163
+ declare module 'hono/jsx' {
164
+ namespace JSX {
165
+ interface IntrinsicElements extends CustomElements {}
166
+ }
167
+
168
+ }
169
+
170
+ declare module 'react-native' {
171
+ namespace JSX {
172
+ interface IntrinsicElements extends CustomElements {}
173
+ }
174
+
175
+ }
176
+
177
+ declare global {
178
+ namespace JSX {
179
+ interface IntrinsicElements extends CustomElements {}
180
+ }
181
+
182
+ }
183
+ declare global {
184
+ namespace svelteHTML {
185
+ interface IntrinsicElements extends CustomElements {}
186
+ }
187
+ }
188
+
189
+
190
+ export { AuroHeader } from "./index.js";
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroHeader}from"./auro-header-D9QEL8PS.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";
1
+ export{A as AuroHeader}from"./auro-header-DxcQaAOk.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";
package/dist/registered.js CHANGED
@@ -1 +1 @@
1
- import{A as i}from"./auro-header-D9QEL8PS.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";i.register();
1
+ import{A as i}from"./auro-header-DxcQaAOk.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";i.register();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-header",
10
- "version": "0.0.0-pr174.1",
10
+ "version": "0.0.0-pr176.0",
11
11
  "description": "auro-header HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -21,14 +21,14 @@
21
21
  "node": ">=20"
22
22
  },
23
23
  "dependencies": {
24
- "lit": "^3.3.0"
24
+ "lit": "^3.3.2"
25
25
  },
26
26
  "devDependencies": {
27
- "@aurodesignsystem/auro-cli": "^3.0.3",
27
+ "@aurodesignsystem/auro-cli": "^3.5.0",
28
28
  "@aurodesignsystem/auro-config": "^1.3.1",
29
- "@aurodesignsystem/auro-library": "^5.4.0",
30
- "@aurodesignsystem/design-tokens": "^8.4.0",
31
- "@aurodesignsystem/webcorestylesheets": "10.0.3",
29
+ "@aurodesignsystem/auro-library": "^5.5.4",
30
+ "@aurodesignsystem/design-tokens": "^8.7.0",
31
+ "@aurodesignsystem/webcorestylesheets": "^10.1.4",
32
32
  "husky": "^9.1.7"
33
33
  },
34
34
  "browserslist": [
@@ -62,7 +62,12 @@
62
62
  "exports": {
63
63
  "./package.json": "./package.json",
64
64
  "./readme.md": "./README.md",
65
- ".": "./dist/registered.js",
65
+ "./custom-elements.json": "./custom-elements.json",
66
+ ".": {
67
+ "module": "./dist/registered.js",
68
+ "types": "./dist/index.d.ts",
69
+ "default": "./dist/registered.js"
70
+ },
66
71
  "./demo/*.md": "./demo/*.md",
67
72
  "./demo/*.js": "./demo/*.min.js",
68
73
  "./class": {
@@ -78,5 +83,6 @@
78
83
  "README.md",
79
84
  "LICENSE",
80
85
  "NOTICE"
81
- ]
86
+ ],
87
+ "customElements": "custom-elements.json"
82
88
  }
package/dist/auro-header-D9QEL8PS.js DELETED
@@ -1,2 +0,0 @@
1
- import{css as e,LitElement as s}from"lit";import{classMap as t}from"lit/directives/class-map.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{unsafeStatic as i,html as r}from"lit/static-html.js";class l{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,t=(s,a=s&&s.closest(e))=>s&&s!==document&&s!==window?a||t(s.getRootNode().host):null){return t(s)}handleComponentTagRename(e,s){const t=s.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,!0)}elementMatch(e,s){const t=s.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}}var n=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
2
- `;class c extends s{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new l}static get properties(){return{level:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},display:{type:String,reflect:!0},visualLevel:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},typography:{type:String,reflect:!0},color:{type:String,reflect:!0},margin:{type:String,reflect:!0},size:{type:String,reflect:!0}}}static get styles(){return[n]}static get displayClassMap(){return{800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){l.prototype.registerComponent(e,c)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header")}spacingDecision(e){if("both"===this.margin)switch(e){case"none":return"util_stackMarginnone--top util_stackMarginnone--bottom";case"25":return"util_stackMargin25--top util_stackMargin25--bottom";case"50":return"util_stackMargin50--top util_stackMargin50--bottom";case"100":return"util_stackMargin100--top util_stackMargin100--bottom";case"150":return"util_stackMargin150--top util_stackMargin150--bottom";case"200":return"util_stackMargin200--top util_stackMargin200--bottom";case"300":return"util_stackMargin300--top util_stackMargin300--bottom";case"400":return"util_stackMargin400--top util_stackMargin400--bottom";case"600":return"util_stackMargin600--top util_stackMargin600--bottom";case"800":return"util_stackMargin800--top util_stackMargin800--bottom";default:return""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case"none":return`util_stackMarginnone--${this.margin}`;case"25":return`util_stackMargin25--${this.margin}`;case"50":return`util_stackMargin50--${this.margin}`;case"100":return`util_stackMargin100--${this.margin}`;case"150":return`util_stackMargin150--${this.margin}`;case"200":return`util_stackMargin200--${this.margin}`;case"300":return`util_stackMargin300--${this.margin}`;case"400":return`util_stackMargin400--${this.margin}`;case"600":return`util_stackMarginX600--${this.margin}`;case"800":return`util_stackMargin800--${this.margin}`;default:return""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",l=this.spacingDecision(this.size),n=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],o={heading:!0,[n]:!0};if(l){l.split(" ").forEach(e=>{e.trim()&&(o[e.trim()]=!0)})}const m=t(o),g=i(`h${s}`);return r`<${g} class="${m}" style="color: ${a(this.color?this.color:void 0)}"><slot></slot></${g}>`}render(){return this.template(this.level)}}export{c as A};