@aurodesignsystem-dev/auro-header 0.0.0-pr176.0 → 0.0.0-pr181.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 +56 -44
  2. package/demo/api.html +1 -1
  3. package/demo/api.md +35 -41
  4. package/demo/index.html +1 -1
  5. package/demo/index.md +50 -20
  6. package/demo/index.min.js +39 -56
  7. package/dist/auro-header-D9QEL8PS.js +2 -0
  8. package/dist/index.d.ts +7 -188
  9. package/dist/index.js +1 -1
  10. package/dist/registered.js +1 -1
  11. package/package.json +8 -14
  12. package/dist/auro-header-DxcQaAOk.js +0 -2
package/README.md CHANGED
@@ -21,29 +21,26 @@ 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>` 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.
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.
25
25
 
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.
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.
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
- ## Use Cases
33
+ ## UI development browser support
34
34
 
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:
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)
38
37
 
39
- * page header
40
- * content / paragraph header
41
38
  <!-- AURO-GENERATED-CONTENT:END -->
42
39
 
43
40
  ## Install
44
41
 
45
42
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
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)
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)
47
44
  [![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)
48
45
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-header?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
49
46
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -54,10 +51,17 @@ $ npm i @aurodesignsystem/auro-header
54
51
 
55
52
  <!-- AURO-GENERATED-CONTENT:END -->
56
53
 
57
- ### Define Dependency in Project
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
58
62
 
59
63
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
60
- Defining the dependency within each project that is using the `<auro-header>` component.
64
+ Defining the component dependency within each component that is using the `<auro-header>` component.
61
65
 
62
66
  <!-- AURO-GENERATED-CONTENT:END -->
63
67
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -67,8 +71,16 @@ import "@aurodesignsystem/auro-header";
67
71
  ```
68
72
 
69
73
  <!-- 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 -->
70
77
 
71
- ### Use CDN
78
+ ```html
79
+ <auro-header>Hello World!</auro-header>
80
+ ```
81
+ <!-- AURO-GENERATED-CONTENT:END -->
82
+
83
+ ## Use CDN
72
84
 
73
85
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
74
86
  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.
@@ -79,7 +91,19 @@ In cases where the project is not able to process JS assets, there are pre-proce
79
91
 
80
92
  <!-- AURO-GENERATED-CONTENT:END -->
81
93
 
82
- ## Basic Example
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
83
107
 
84
108
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
85
109
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -89,43 +113,31 @@ In cases where the project is not able to process JS assets, there are pre-proce
89
113
  ```
90
114
  <!-- AURO-GENERATED-CONTENT:END -->
91
115
 
92
- ## Custom Component Registration for Version Management
93
-
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.
116
+ ## Development
96
117
 
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.
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.
98
120
 
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.
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.
100
122
 
101
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
102
-
103
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
104
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
123
+ <!-- AURO-GENERATED-CONTENT:END -->
105
124
 
106
- ```js
107
- // Import the class only
108
- import { AuroHeader } from '@aurodesignsystem/auro-header/class';
125
+ ### Start development environment
126
+
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**.
109
129
 
110
- // Register with a custom name if desired
111
- AuroHeader.register('custom-header');
130
+ ```shell
131
+ $ npm run dev
112
132
  ```
113
133
 
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.
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 -->
134
+ Open [localhost:8000](http://localhost:8000/)
126
135
 
127
- ```html
128
- <custom-header>Hello World!</custom-header>
129
- ```
130
136
  <!-- AURO-GENERATED-CONTENT:END -->
131
- </auro-accordion>
137
+
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 -->
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/+esm" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
55
  </body>
56
56
  </html>
package/demo/api.md CHANGED
@@ -1,41 +1,39 @@
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` element is a custom element to make using headers with the Auro Design System seamless and easy.
6
+ The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
7
7
 
8
- ### Properties & Attributes
8
+ ## Properties
9
9
 
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. |
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`. |
25
19
  <!-- AURO-GENERATED-CONTENT:END -->
26
20
 
27
- ## Basic
21
+ ## API Examples
22
+
23
+ ### Basic
24
+
25
+ The `auro-header` defaults to an `<h1>` element.
28
26
 
29
27
  <div class="exampleWrapper">
30
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
31
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
28
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
29
+ <!-- The below content is automatically added from ../apiExamples/basic.html -->
32
30
  <auro-header>Hello World!</auro-header>
33
31
  <!-- AURO-GENERATED-CONTENT:END -->
34
- </div>
32
+ </div>
35
33
  <auro-accordion alignRight>
36
34
  <span slot="trigger">See code</span>
37
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
38
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
35
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
36
+ <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
39
37
 
40
38
  ```html
41
39
  <auro-header>Hello World!</auro-header>
@@ -43,8 +41,6 @@ The `auro-header` element is a custom element to make using headers with the Aur
43
41
  <!-- AURO-GENERATED-CONTENT:END -->
44
42
  </auro-accordion>
45
43
 
46
- ## Property & Attribute Examples
47
-
48
44
  ### Changing Header Styles and Sizes
49
45
 
50
46
  The `auro-header` component allows for flexible customization of both HTML semantics and visual appearance styles.
@@ -76,8 +72,8 @@ If `visualLevel` is not specified, `visualLevel` will default to the same value
76
72
  Use the `visualLevel` attribute to control the visual style of the header.
77
73
 
78
74
  <div class="exampleWrapper">
79
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visual-level.html) -->
80
- <!-- The below content is automatically added from ../apiExamples/visual-level.html -->
75
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visualLevel.html) -->
76
+ <!-- The below content is automatically added from ../apiExamples/visualLevel.html -->
81
77
  <table>
82
78
  <thead>
83
79
  <tr>
@@ -157,8 +153,8 @@ Use the `visualLevel` attribute to control the visual style of the header.
157
153
  </div>
158
154
  <auro-accordion alignRight>
159
155
  <span slot="trigger">See code</span>
160
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visual-level.html) -->
161
- <!-- The below code snippet is automatically added from ../apiExamples/visual-level.html -->
156
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visualLevel.html) -->
157
+ <!-- The below code snippet is automatically added from ../apiExamples/visualLevel.html -->
162
158
 
163
159
  ```html
164
160
  <table>
@@ -257,15 +253,13 @@ Below is how each `visualLevel` value corresponds to a typography class:
257
253
 
258
254
  These classes apply consistent typography styles, including font size, line height, font weight, and more, ensuring uniform header presentation across components.
259
255
 
260
- ## Common Usage Patterns & Functional Examples
261
-
262
256
  ### Additional Header Examples
263
257
 
264
258
  Additional examples with various header `level` and `visualLevel` options.
265
259
 
266
260
  <div class="exampleWrapper">
267
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/additional-examples.html) -->
268
- <!-- The below content is automatically added from ../apiExamples/additional-examples.html -->
261
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/additionalExamples.html) -->
262
+ <!-- The below content is automatically added from ../apiExamples/additionalExamples.html -->
269
263
  <auro-header level="2" visualLevel="1">Hello World!</auro-header>
270
264
  <auro-header level="2" visualLevel="2">Hello World!</auro-header>
271
265
  <auro-header level="3" visualLevel="3">Hello World!</auro-header>
@@ -274,8 +268,8 @@ Additional examples with various header `level` and `visualLevel` options.
274
268
  </div>
275
269
  <auro-accordion alignRight>
276
270
  <span slot="trigger">See code</span>
277
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/additional-examples.html) -->
278
- <!-- The below code snippet is automatically added from ../apiExamples/additional-examples.html -->
271
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/additionalExamples.html) -->
272
+ <!-- The below code snippet is automatically added from ../apiExamples/additionalExamples.html -->
279
273
 
280
274
  ```html
281
275
  <auro-header level="2" visualLevel="1">Hello World!</auro-header>
@@ -319,8 +313,8 @@ In some cases the margin between elements may need to be adjusted. To do this, a
319
313
  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.
320
314
 
321
315
  <div class="exampleWrapper">
322
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/color-inheritance.html) -->
323
- <!-- The below content is automatically added from ../apiExamples/color-inheritance.html -->
316
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/colorInheritance.html) -->
317
+ <!-- The below content is automatically added from ../apiExamples/colorInheritance.html -->
324
318
  <div style="color: var(--ds-color-alert-error-default)">
325
319
  <auro-header level="3" visualLevel="2">There has been an error</auro-header>
326
320
  </div>
@@ -328,8 +322,8 @@ If there is a CSS selector that has the color definition you want to use with th
328
322
  </div>
329
323
  <auro-accordion alignRight>
330
324
  <span slot="trigger">See code</span>
331
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/color-inheritance.html) -->
332
- <!-- The below code snippet is automatically added from ../apiExamples/color-inheritance.html -->
325
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/colorInheritance.html) -->
326
+ <!-- The below code snippet is automatically added from ../apiExamples/colorInheritance.html -->
333
327
 
334
328
  ```html
335
329
  <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/+esm" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
55
  </body>
56
56
  </html>
package/demo/index.md CHANGED
@@ -1,22 +1,22 @@
1
1
  <!--
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.
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`
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>` 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.
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.
12
12
 
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.
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.
14
14
  <!-- AURO-GENERATED-CONTENT:END -->
15
15
 
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 -->
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 -->
20
20
  The `<auro-header>` element should be used in situations where users may:
21
21
 
22
22
  * page header
@@ -25,22 +25,52 @@ The `<auro-header>` element should be used in situations where users may:
25
25
 
26
26
  ## Example(s)
27
27
 
28
- ### Basic
29
-
28
+ The `auro-header` defaults to an `<h1>` element.
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 -->
45
76
  </auro-accordion>
46
-
package/demo/index.min.js CHANGED
@@ -66,19 +66,6 @@ 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
- }
82
69
  }
83
70
 
84
71
  /**
@@ -140,20 +127,17 @@ var styleCss = i$4`.body-default{font-size:var(--wcss-body-default-font-size, 1r
140
127
  // See LICENSE in the project root for license information.
141
128
 
142
129
 
143
- const MAX_LEVEL = 6;
144
-
145
130
  /**
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
131
+ * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
148
132
  */
133
+
134
+ const MAX_LEVEL = 6;
135
+
136
+ // build the component class
149
137
  class AuroHeader extends i$1 {
150
138
  constructor() {
151
139
  super();
152
140
 
153
- this._initializeDefaults();
154
- }
155
-
156
- _initializeDefaults() {
157
141
  this.level = 1;
158
142
  this.typography = "heading";
159
143
 
@@ -161,19 +145,28 @@ class AuroHeader extends i$1 {
161
145
  * @private
162
146
  */
163
147
  this.runtimeUtils = new AuroLibraryRuntimeUtils();
164
-
165
148
  }
166
149
 
167
150
  // function to define props used within the scope of this component
168
151
  static get properties() {
169
152
  return {
170
153
  /**
171
- * (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header.
172
- * @deprecated
154
+ * Determines the semantic heading level of the HTML element. Options are `1` - `6`.
173
155
  */
174
- color: {
175
- type: String,
176
- reflect: true
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
+ },
177
170
  },
178
171
 
179
172
  /**
@@ -182,13 +175,14 @@ class AuroHeader extends i$1 {
182
175
  */
183
176
  display: {
184
177
  type: String,
185
- reflect: true
178
+ reflect: true,
186
179
  },
187
180
 
188
181
  /**
189
- * Determines the semantic heading level of the HTML element. Options are `1` - `6`.
182
+ * Determines the visual appearance of the header. Options are `1` - `6`.
183
+ * @default same value as `level`
190
184
  */
191
- level: {
185
+ visualLevel: {
192
186
  type: Number,
193
187
  reflect: true,
194
188
  converter(value) {
@@ -201,53 +195,42 @@ class AuroHeader extends i$1 {
201
195
  return MAX_LEVEL;
202
196
  }
203
197
  return num;
204
- }
198
+ },
205
199
  },
206
200
 
207
201
  /**
208
- * (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
209
- * @deprecated
202
+ * Determines the font of heading, Options are `heading` or `display`.
210
203
  */
211
- margin: {
204
+ typography: {
212
205
  type: String,
213
- reflect: true
206
+ reflect: true,
214
207
  },
215
208
 
216
209
  /**
217
- * (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
210
+ * (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header.
218
211
  * @deprecated
219
212
  */
220
- size: {
213
+ color: {
221
214
  type: String,
222
- reflect: true
215
+ reflect: true,
223
216
  },
224
217
 
225
218
  /**
226
- * Determines the font of heading, Options are `heading` or `display`.
219
+ * (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
220
+ * @deprecated
227
221
  */
228
- typography: {
222
+ margin: {
229
223
  type: String,
230
- reflect: true
224
+ reflect: true,
231
225
  },
232
226
 
233
227
  /**
234
- * Determines the visual appearance of the header. Options are `1` - `6`.
235
- * @default 1
228
+ * (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
229
+ * @deprecated
236
230
  */
237
- visualLevel: {
238
- type: Number,
231
+ size: {
232
+ type: String,
239
233
  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
- },
251
234
  },
252
235
  };
253
236
  }
package/dist/auro-header-D9QEL8PS.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 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};
package/dist/index.d.ts CHANGED
@@ -1,190 +1,9 @@
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';
1
5
 
2
- import type { AuroHeader } from "src/auro-header.js";
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)}}
3
8
 
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";
9
+ export { c as AuroHeader };
package/dist/index.js CHANGED
@@ -1 +1 @@
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";
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";
package/dist/registered.js CHANGED
@@ -1 +1 @@
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();
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();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-header",
10
- "version": "0.0.0-pr176.0",
10
+ "version": "0.0.0-pr181.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.2"
24
+ "lit": "^3.3.0"
25
25
  },
26
26
  "devDependencies": {
27
- "@aurodesignsystem/auro-cli": "^3.5.0",
27
+ "@aurodesignsystem/auro-cli": "^3.0.3",
28
28
  "@aurodesignsystem/auro-config": "^1.3.1",
29
- "@aurodesignsystem/auro-library": "^5.5.4",
30
- "@aurodesignsystem/design-tokens": "^8.7.0",
31
- "@aurodesignsystem/webcorestylesheets": "^10.1.4",
29
+ "@aurodesignsystem/auro-library": "^5.4.0",
30
+ "@aurodesignsystem/design-tokens": "^8.4.0",
31
+ "@aurodesignsystem/webcorestylesheets": "10.0.3",
32
32
  "husky": "^9.1.7"
33
33
  },
34
34
  "browserslist": [
@@ -62,12 +62,7 @@
62
62
  "exports": {
63
63
  "./package.json": "./package.json",
64
64
  "./readme.md": "./README.md",
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
- },
65
+ ".": "./dist/registered.js",
71
66
  "./demo/*.md": "./demo/*.md",
72
67
  "./demo/*.js": "./demo/*.min.js",
73
68
  "./class": {
@@ -83,6 +78,5 @@
83
78
  "README.md",
84
79
  "LICENSE",
85
80
  "NOTICE"
86
- ],
87
- "customElements": "custom-elements.json"
81
+ ]
88
82
  }
package/dist/auro-header-DxcQaAOk.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 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};