@aurodesignsystem-dev/auro-background 0.0.0-pr70.0 → 0.0.0-pr71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +55 -62
  2. package/custom-elements.json +394 -0
  3. package/demo/api.md +100 -83
  4. package/demo/auro-background.min.js +67 -17
  5. package/demo/index.md +24 -61
  6. package/dist/{auro-background-Bq6XF4Pn.js → auro-background-BGnvDU50.js} +3 -3
  7. package/dist/index.d.ts +2 -2
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +11 -8
package/README.md CHANGED
@@ -28,17 +28,21 @@ The `auro-background` element is an easy-to-use mobile-first alternative to writ
28
28
  <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
29
29
  <!-- AURO-GENERATED-CONTENT:END -->
30
30
 
31
- ## UI development browser support
31
+ ## Use Cases
32
32
 
33
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
34
- For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
33
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
34
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
35
+ The `auro-background` component accepts 4 properties - `bg`, `height`, `width`, and `inset` that serve as the default at all breakpoints. `height`, `width`, and `inset` are not required and sizing will scale to the content when omitted. Additionally, there is a separate property for each supported breakpoint (`bgSm`, `bgMd`, `bgLg`, `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, `widthLg`). If you don't set a specific size property, the smaller property will be used.
36
+
37
+ These properties map to the compound CSS `background` property and CSS properties of `height`, `width`, and `padding`. Anything you can do within the scope of those CSS rules you can do here.
35
38
 
39
+ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/background-image">CSS Background Image Generator</auro-hyperlink> for a helpful code generation tool.
36
40
  <!-- AURO-GENERATED-CONTENT:END -->
37
41
 
38
42
  ## Install
39
43
 
40
44
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
41
- [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-background/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-background/actions/workflows/testPublish.yml)
45
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-background/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-background/actions/workflows/release.yml)
42
46
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-background?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-background)
43
47
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-background?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
44
48
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -49,17 +53,10 @@ $ npm i @aurodesignsystem/auro-background
49
53
 
50
54
  <!-- AURO-GENERATED-CONTENT:END -->
51
55
 
52
- ### Design Token CSS Custom Property dependency
53
-
54
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
55
- The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
56
-
57
- <!-- AURO-GENERATED-CONTENT:END -->
58
-
59
- ### Define dependency in project component
56
+ ### Define Dependency in Project
60
57
 
61
58
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
62
- Defining the component dependency within each component that is using the `<auro-background>` component.
59
+ Defining the dependency within each project that is using the `<auro-background>` component.
63
60
 
64
61
  <!-- AURO-GENERATED-CONTENT:END -->
65
62
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -68,22 +65,9 @@ Defining the component dependency within each component that is using the `<auro
68
65
  import "@aurodesignsystem/auro-background";
69
66
  ```
70
67
 
71
- <!-- AURO-GENERATED-CONTENT:END -->
72
- **Reference component in HTML**
73
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
74
- <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
75
-
76
- ```html
77
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
78
- <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
79
- <auro-header level="2" display="600">View all destinations</auro-header>
80
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
81
- </div>
82
- </auro-background>
83
- ```
84
68
  <!-- AURO-GENERATED-CONTENT:END -->
85
69
 
86
- ## Use CDN
70
+ ### Use CDN
87
71
 
88
72
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
89
73
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -94,20 +78,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
94
78
 
95
79
  <!-- AURO-GENERATED-CONTENT:END -->
96
80
 
97
- ## auro-background use cases
98
-
99
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
100
- <!-- The below content is automatically added from ./docs/partials/useCases.md -->
101
- The `auro-background` component accepts 4 properties - `bg`, `height`, `width`, and `inset` that serve as the default at all breakpoints. `height`, `width`, and `inset` are not required and sizing will scale to the content when omitted. Additionally, there is a separate property for each supported breakpoint (`bgsm`, `bgmd`, `bglg`, `heightsm`, `heightmd`, `heightlg`, `widthsm`, `widthmd`, `widthlg`). If you don't set specific size property the smaller property will be used.
102
-
103
- These properties map to the compound CSS `background` property and CSS properties of `height`, `width`, and `padding`. Anything you can do within the scope of those CSS rules you can do here.
104
-
105
- See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/background-image">CSS Background Image Generator</auro-hyperlink> for a helpful code generation tool.
106
- <!-- AURO-GENERATED-CONTENT:END -->
107
-
108
- ## API Code Examples
109
-
110
- ### Default auro-background
81
+ ## Basic Example
111
82
 
112
83
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
113
84
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -115,38 +86,60 @@ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/b
115
86
  ```html
116
87
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
117
88
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
118
- <auro-header level="2" display="600">View all destinations</auro-header>
119
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
89
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
90
+ <auro-hyperlink type="cta" size="sm" href="#">See where we fly</auro-hyperlink>
120
91
  </div>
121
92
  </auro-background>
122
93
  ```
123
94
  <!-- AURO-GENERATED-CONTENT:END -->
124
95
 
125
- ## Development
96
+ ## Custom Component Registration for Version Management
126
97
 
127
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
128
- 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
+ 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.
99
+ The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
129
100
 
130
- 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.
101
+ When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
131
102
 
132
- <!-- AURO-GENERATED-CONTENT:END -->
133
-
134
- ### Start development environment
103
+ 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.
135
104
 
136
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
137
- 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**.
105
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
138
106
 
139
- ```shell
140
- $ npm run dev
107
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
108
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
109
+
110
+ ```js
111
+ // Import the class only
112
+ import { AuroBackground } from '@aurodesignsystem/auro-background/class';
113
+
114
+ // Register with a custom name if desired
115
+ AuroBackground.register('custom-background');
141
116
  ```
142
117
 
143
- Open [localhost:8000](http://localhost:8000/)
144
-
118
+ This will create a new custom element `<custom-background>` that behaves exactly like `<auro-background>`, allowing both to coexist on the same page without interfering with each other.
145
119
  <!-- AURO-GENERATED-CONTENT:END -->
120
+ <div class="exampleWrapper exampleWrapper--flex">
121
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
122
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
123
+ <custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
124
+ <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
125
+ <auro-header level="2">View all destinations</auro-header>
126
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
127
+ </div>
128
+ </custom-background>
129
+ <!-- AURO-GENERATED-CONTENT:END -->
130
+ </div>
131
+ <auro-accordion alignRight>
132
+ <span slot="trigger">See code</span>
133
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
134
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
146
135
 
147
- ### Testing
148
-
149
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
150
- Automated tests are required for every Auro component. See `.\test\auro-background.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.
151
-
152
- <!-- AURO-GENERATED-CONTENT:END -->
136
+ ```html
137
+ <custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
138
+ <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
139
+ <auro-header level="2">View all destinations</auro-header>
140
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
141
+ </div>
142
+ </custom-background>
143
+ ```
144
+ <!-- AURO-GENERATED-CONTENT:END -->
145
+ </auro-accordion>
package/custom-elements.json ADDED
@@ -0,0 +1,394 @@
1
+ {
2
+ "schemaVersion": "1.0.0",
3
+ "readme": "",
4
+ "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/auro-background.js",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "description": "Auro-background provides users a way to add a background image or color block including a gradient.",
12
+ "name": "AuroBackground",
13
+ "slots": [
14
+ {
15
+ "description": "Default slot for content within the background container.",
16
+ "name": ""
17
+ }
18
+ ],
19
+ "members": [
20
+ {
21
+ "kind": "field",
22
+ "name": "bg",
23
+ "privacy": "public",
24
+ "type": {
25
+ "text": "string"
26
+ },
27
+ "description": "Sets the background image at all breakpoints",
28
+ "attribute": "bg"
29
+ },
30
+ {
31
+ "kind": "field",
32
+ "name": "bgLg",
33
+ "privacy": "public",
34
+ "type": {
35
+ "text": "string"
36
+ },
37
+ "description": "Sets the background image at `breakpoint-lg` and above",
38
+ "attribute": "bgLg"
39
+ },
40
+ {
41
+ "kind": "field",
42
+ "name": "bgMd",
43
+ "privacy": "public",
44
+ "type": {
45
+ "text": "string"
46
+ },
47
+ "description": "Sets the background image at `breakpoint-md` and above",
48
+ "attribute": "bgMd"
49
+ },
50
+ {
51
+ "kind": "field",
52
+ "name": "bgSm",
53
+ "privacy": "public",
54
+ "type": {
55
+ "text": "string"
56
+ },
57
+ "description": "Sets the background image at `breakpoint-sm` and above",
58
+ "attribute": "bgSm"
59
+ },
60
+ {
61
+ "kind": "method",
62
+ "name": "getInsetValues",
63
+ "parameters": [
64
+ {
65
+ "name": "inset",
66
+ "description": "Value from host attribute.",
67
+ "type": {
68
+ "text": "string"
69
+ }
70
+ }
71
+ ],
72
+ "privacy": "private",
73
+ "return": {
74
+ "type": {
75
+ "text": "string"
76
+ }
77
+ }
78
+ },
79
+ {
80
+ "kind": "field",
81
+ "name": "height",
82
+ "privacy": "public",
83
+ "type": {
84
+ "text": "string"
85
+ },
86
+ "description": "Applies custom height at all breakpoints",
87
+ "attribute": "height"
88
+ },
89
+ {
90
+ "kind": "field",
91
+ "name": "heightLg",
92
+ "privacy": "public",
93
+ "type": {
94
+ "text": "string"
95
+ },
96
+ "description": "Applies custom height at `breakpoint-lg` and above",
97
+ "attribute": "heightLg"
98
+ },
99
+ {
100
+ "kind": "field",
101
+ "name": "heightMd",
102
+ "privacy": "public",
103
+ "type": {
104
+ "text": "string"
105
+ },
106
+ "description": "Applies custom height at `breakpoint-md` and above",
107
+ "attribute": "heightMd"
108
+ },
109
+ {
110
+ "kind": "field",
111
+ "name": "heightSm",
112
+ "privacy": "public",
113
+ "type": {
114
+ "text": "string"
115
+ },
116
+ "description": "Applies custom height at `breakpoint-sm` and above",
117
+ "attribute": "heightSm"
118
+ },
119
+ {
120
+ "kind": "field",
121
+ "name": "inset",
122
+ "privacy": "public",
123
+ "type": {
124
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
125
+ },
126
+ "description": "Applies internal padding at all breakpoints",
127
+ "attribute": "inset"
128
+ },
129
+ {
130
+ "kind": "field",
131
+ "name": "insetLg",
132
+ "privacy": "public",
133
+ "type": {
134
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
135
+ },
136
+ "description": "Applies internal padding at `breakpoint-lg` and above",
137
+ "attribute": "insetLg"
138
+ },
139
+ {
140
+ "kind": "field",
141
+ "name": "insetMd",
142
+ "privacy": "public",
143
+ "type": {
144
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
145
+ },
146
+ "description": "Applies internal padding at `breakpoint-md` and above",
147
+ "attribute": "insetMd"
148
+ },
149
+ {
150
+ "kind": "field",
151
+ "name": "insetSm",
152
+ "privacy": "public",
153
+ "type": {
154
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
155
+ },
156
+ "description": "Applies internal padding at `breakpoint-sm` and above",
157
+ "attribute": "insetSm"
158
+ },
159
+ {
160
+ "kind": "method",
161
+ "name": "register",
162
+ "static": true,
163
+ "parameters": [
164
+ {
165
+ "name": "name",
166
+ "default": "\"auro-background\"",
167
+ "description": "The name of element that you want to register to.",
168
+ "optional": true,
169
+ "type": {
170
+ "text": "string"
171
+ }
172
+ }
173
+ ],
174
+ "description": "This will register this element with the browser."
175
+ },
176
+ {
177
+ "kind": "field",
178
+ "name": "runtimeUtils",
179
+ "privacy": "private",
180
+ "default": "new AuroLibraryRuntimeUtils()"
181
+ },
182
+ {
183
+ "kind": "field",
184
+ "name": "width",
185
+ "privacy": "public",
186
+ "type": {
187
+ "text": "string"
188
+ },
189
+ "description": "Applies custom width at all breakpoints",
190
+ "attribute": "width"
191
+ },
192
+ {
193
+ "kind": "field",
194
+ "name": "widthLg",
195
+ "privacy": "public",
196
+ "type": {
197
+ "text": "string"
198
+ },
199
+ "description": "Applies custom width at `breakpoint-lg` and above",
200
+ "attribute": "widthLg"
201
+ },
202
+ {
203
+ "kind": "field",
204
+ "name": "widthMd",
205
+ "privacy": "public",
206
+ "type": {
207
+ "text": "string"
208
+ },
209
+ "description": "Applies custom width at `breakpoint-md` and above",
210
+ "attribute": "widthMd"
211
+ },
212
+ {
213
+ "kind": "field",
214
+ "name": "widthSm",
215
+ "privacy": "public",
216
+ "type": {
217
+ "text": "string"
218
+ },
219
+ "description": "Applies custom width at `breakpoint-sm` and above",
220
+ "attribute": "widthSm"
221
+ }
222
+ ],
223
+ "attributes": [
224
+ {
225
+ "name": "bg",
226
+ "type": {
227
+ "text": "string"
228
+ },
229
+ "description": "Sets the background image at all breakpoints",
230
+ "fieldName": "bg"
231
+ },
232
+ {
233
+ "name": "bgLg",
234
+ "type": {
235
+ "text": "string"
236
+ },
237
+ "description": "Sets the background image at `breakpoint-lg` and above",
238
+ "fieldName": "bgLg"
239
+ },
240
+ {
241
+ "name": "bgMd",
242
+ "type": {
243
+ "text": "string"
244
+ },
245
+ "description": "Sets the background image at `breakpoint-md` and above",
246
+ "fieldName": "bgMd"
247
+ },
248
+ {
249
+ "name": "bgSm",
250
+ "type": {
251
+ "text": "string"
252
+ },
253
+ "description": "Sets the background image at `breakpoint-sm` and above",
254
+ "fieldName": "bgSm"
255
+ },
256
+ {
257
+ "name": "height",
258
+ "type": {
259
+ "text": "string"
260
+ },
261
+ "description": "Applies custom height at all breakpoints",
262
+ "fieldName": "height"
263
+ },
264
+ {
265
+ "name": "heightLg",
266
+ "type": {
267
+ "text": "string"
268
+ },
269
+ "description": "Applies custom height at `breakpoint-lg` and above",
270
+ "fieldName": "heightLg"
271
+ },
272
+ {
273
+ "name": "heightMd",
274
+ "type": {
275
+ "text": "string"
276
+ },
277
+ "description": "Applies custom height at `breakpoint-md` and above",
278
+ "fieldName": "heightMd"
279
+ },
280
+ {
281
+ "name": "heightSm",
282
+ "type": {
283
+ "text": "string"
284
+ },
285
+ "description": "Applies custom height at `breakpoint-sm` and above",
286
+ "fieldName": "heightSm"
287
+ },
288
+ {
289
+ "name": "inset",
290
+ "type": {
291
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
292
+ },
293
+ "description": "Applies internal padding at all breakpoints",
294
+ "fieldName": "inset"
295
+ },
296
+ {
297
+ "name": "insetLg",
298
+ "type": {
299
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
300
+ },
301
+ "description": "Applies internal padding at `breakpoint-lg` and above",
302
+ "fieldName": "insetLg"
303
+ },
304
+ {
305
+ "name": "insetMd",
306
+ "type": {
307
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
308
+ },
309
+ "description": "Applies internal padding at `breakpoint-md` and above",
310
+ "fieldName": "insetMd"
311
+ },
312
+ {
313
+ "name": "insetSm",
314
+ "type": {
315
+ "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
316
+ },
317
+ "description": "Applies internal padding at `breakpoint-sm` and above",
318
+ "fieldName": "insetSm"
319
+ },
320
+ {
321
+ "name": "width",
322
+ "type": {
323
+ "text": "string"
324
+ },
325
+ "description": "Applies custom width at all breakpoints",
326
+ "fieldName": "width"
327
+ },
328
+ {
329
+ "name": "widthLg",
330
+ "type": {
331
+ "text": "string"
332
+ },
333
+ "description": "Applies custom width at `breakpoint-lg` and above",
334
+ "fieldName": "widthLg"
335
+ },
336
+ {
337
+ "name": "widthMd",
338
+ "type": {
339
+ "text": "string"
340
+ },
341
+ "description": "Applies custom width at `breakpoint-md` and above",
342
+ "fieldName": "widthMd"
343
+ },
344
+ {
345
+ "name": "widthSm",
346
+ "type": {
347
+ "text": "string"
348
+ },
349
+ "description": "Applies custom width at `breakpoint-sm` and above",
350
+ "fieldName": "widthSm"
351
+ }
352
+ ],
353
+ "superclass": {
354
+ "name": "LitElement",
355
+ "package": "lit"
356
+ },
357
+ "tagName": "auro-background",
358
+ "customElement": true
359
+ }
360
+ ],
361
+ "exports": [
362
+ {
363
+ "kind": "js",
364
+ "name": "AuroBackground",
365
+ "declaration": {
366
+ "name": "AuroBackground",
367
+ "module": "src/auro-background.js"
368
+ }
369
+ }
370
+ ]
371
+ },
372
+ {
373
+ "kind": "javascript-module",
374
+ "path": "src/index.js",
375
+ "declarations": [],
376
+ "exports": [
377
+ {
378
+ "kind": "js",
379
+ "name": "AuroBackground",
380
+ "declaration": {
381
+ "name": "AuroBackground",
382
+ "module": "src/index.js"
383
+ }
384
+ }
385
+ ]
386
+ },
387
+ {
388
+ "kind": "javascript-module",
389
+ "path": "src/registered.js",
390
+ "declarations": [],
391
+ "exports": []
392
+ }
393
+ ]
394
+ }
package/demo/api.md CHANGED
@@ -1,152 +1,169 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
- <!-- The below content is automatically added from ../docs/api.md -->
1
+
2
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
3
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
4
 
4
5
  # auro-background
5
6
 
6
7
  Auro-background provides users a way to add a background image or color block including a gradient.
7
8
 
8
- ## Properties
9
-
10
- | Property | Attribute | Type | Description |
11
- |------------|------------|----------|--------------------------------------------------|
12
- | [bg](#bg) | `bg` | `String` | Applies all breakpoints |
13
- | [bgLg](#bgLg) | `bgLg` | `String` | `breakpoint-lg` and above |
14
- | [bgMd](#bgMd) | `bgMd` | `String` | `breakpoint-md` and above |
15
- | [bgSm](#bgSm) | `bgSm` | `String` | `breakpoint--sm` and above |
16
- | [height](#height) | `height` | `String` | Apply minimum height value |
17
- | [heightLg](#heightLg) | `heightLg` | `String` | Apply minimum height for `breakpoint-lg` and above |
18
- | [heightMd](#heightMd) | `heightMd` | `String` | Apply minimum height for `breakpoint-md` and above |
19
- | [heightSm](#heightSm) | `heightSm` | `String` | Apply minimum height for `breakpoint-sm` and above |
20
- | [inset](#inset) | `inset` | `String` | Apply internal padding |
21
- | [insetLg](#insetLg) | `insetLg` | `String` | Apply internal padding for `breakpoint-lg` and above |
22
- | [insetMd](#insetMd) | `insetMd` | `String` | Apply internal padding for `breakpoint-md` and above |
23
- | [insetSm](#insetSm) | `insetSm` | `String` | Apply internal padding for `breakpoint-sm` and above |
24
- | [width](#width) | `width` | `String` | Define custom width |
25
- | [widthLg](#widthLg) | `widthLg` | `String` | Define custom width for `breakpoint-lg` and above |
26
- | [widthMd](#widthMd) | `widthMd` | `String` | Define custom with for `breakpoint-md` and above |
27
- | [widthSm](#widthSm) | `widthSm` | `String` | Define custom width for `breakpoint-sm` and above |
9
+ ### Properties & Attributes
10
+
11
+ | Properties | Attributes | Modifiers | Type | Default | Description |
12
+ | ---------- | ---------- | --------- | ---------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------ |
13
+ | bg | bg | | string | | Sets the background image at all breakpoints |
14
+ | bgLg | bgLg | | string | | Sets the background image at `breakpoint-lg` and above |
15
+ | bgMd | bgMd | | string | | Sets the background image at `breakpoint-md` and above |
16
+ | bgSm | bgSm | | string | | Sets the background image at `breakpoint-sm` and above |
17
+ | height | height | | string | | Applies custom height at all breakpoints |
18
+ | heightLg | heightLg | | string | | Applies custom height at `breakpoint-lg` and above |
19
+ | heightMd | heightMd | | string | | Applies custom height at `breakpoint-md` and above |
20
+ | heightSm | heightSm | | string | | Applies custom height at `breakpoint-sm` and above |
21
+ | inset | inset | | 'none' \| 'xxxs' \| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl' \| string | | Applies internal padding at all breakpoints |
22
+ | insetLg | insetLg | | 'none' \| 'xxxs' \| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl' \| string | | Applies internal padding at `breakpoint-lg` and above |
23
+ | insetMd | insetMd | | 'none' \| 'xxxs' \| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl' \| string | | Applies internal padding at `breakpoint-md` and above |
24
+ | insetSm | insetSm | | 'none' \| 'xxxs' \| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl' \| string | | Applies internal padding at `breakpoint-sm` and above |
25
+ | width | width | | string | | Applies custom width at all breakpoints |
26
+ | widthLg | widthLg | | string | | Applies custom width at `breakpoint-lg` and above |
27
+ | widthMd | widthMd | | string | | Applies custom width at `breakpoint-md` and above |
28
+ | widthSm | widthSm | | string | | Applies custom width at `breakpoint-sm` and above |
29
+
30
+ ### Methods
31
+
32
+ | Name | Parameters | Return | Description |
33
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
34
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
35
+
36
+ ### Slots
37
+
38
+ | Name | Description |
39
+ | --------- | --------------------------------------------------------- |
40
+ | (default) | Default slot for content within the background container. |
28
41
  <!-- AURO-GENERATED-CONTENT:END -->
29
42
 
30
- ## API Examples
31
-
32
- ### Basic
43
+ ## Basic
33
44
 
34
45
  <div class="exampleWrapper">
35
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
36
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
46
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
47
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
37
48
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
38
49
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
39
- <auro-header level="2" display="600">View all destinations</auro-header>
40
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
50
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
51
+ <auro-hyperlink type="cta" size="sm" href="#">See where we fly</auro-hyperlink>
41
52
  </div>
42
53
  </auro-background>
43
54
  <!-- AURO-GENERATED-CONTENT:END -->
44
55
  </div>
45
56
  <auro-accordion alignRight>
46
57
  <span slot="trigger">See code</span>
47
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
48
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
58
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
59
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
49
60
 
50
61
  ```html
51
62
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
52
63
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
53
- <auro-header level="2" display="600">View all destinations</auro-header>
54
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
64
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
65
+ <auro-hyperlink type="cta" size="sm" href="#">See where we fly</auro-hyperlink>
55
66
  </div>
56
67
  </auro-background>
57
68
  ```
58
69
  <!-- AURO-GENERATED-CONTENT:END -->
59
70
  </auro-accordion>
60
71
 
61
- ### Attribute Examples
72
+ ## Property & Attribute Examples
62
73
 
63
- #### Use `inset` attribute to add padding
74
+ ### Background
64
75
 
65
- The following example adds padding by using the `inset="xl"` property. The `inset` property support the following values; `none`, `xxxs`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl` or any CSS value which is valid for the CSS `padding` rule (e.g. `1rem`).
76
+ Use the `bg` attribute to set the background image.
66
77
 
67
- When using a custom CSS rule do not include a semi-colon at at the end of the string (e.g. `1rem` is valid, `1rem;` is invalid).
68
-
69
- Inset values may also be declared following the same rules as `inset` for each breakpoint property, i.e. `insetSm`, `insetMd` and `insetLg`.
78
+ Different `bg` values may be set for each breakpoint using the `bgSm`, `bgMd` and `bgLg` attributes.
70
79
 
71
80
  <div class="exampleWrapper">
72
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inset.html) -->
73
- <!-- The below content is automatically added from ../apiExamples/inset.html -->
74
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
81
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/breakpoints.html) -->
82
+ <!-- The below content is automatically added from ../apiExamples/breakpoints.html -->
83
+ <auro-background
84
+ bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
85
+ bgMd="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
86
+ bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt947ef7b1f81b7f99/6633c2589db1edec36f6de69/MKT_091820_BF-CM-Email-Sign-Up-Materials_Merch-tiles_Evergreen_720x720-background.jpg) center center/cover no-repeat"
87
+ inset="xxxl">
75
88
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
76
- <auro-header level="2" display="600">View all destinations</auro-header>
77
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
89
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
90
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
78
91
  </div>
79
92
  </auro-background>
80
93
  <!-- AURO-GENERATED-CONTENT:END -->
81
94
  </div>
82
95
  <auro-accordion alignRight>
83
96
  <span slot="trigger">See code</span>
84
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inset.html) -->
85
- <!-- The below code snippet is automatically added from ../apiExamples/inset.html -->
97
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/breakpoints.html) -->
98
+ <!-- The below code snippet is automatically added from ../apiExamples/breakpoints.html -->
86
99
 
87
100
  ```html
88
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
101
+ <auro-background
102
+ bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
103
+ bgMd="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
104
+ bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt947ef7b1f81b7f99/6633c2589db1edec36f6de69/MKT_091820_BF-CM-Email-Sign-Up-Materials_Merch-tiles_Evergreen_720x720-background.jpg) center center/cover no-repeat"
105
+ inset="xxxl">
89
106
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
90
- <auro-header level="2" display="600">View all destinations</auro-header>
91
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
107
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
108
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
92
109
  </div>
93
110
  </auro-background>
94
111
  ```
95
112
  <!-- AURO-GENERATED-CONTENT:END -->
96
113
  </auro-accordion>
97
114
 
98
- #### Change backgrounds at breakpoints
115
+ ### Inset
116
+
117
+ Use the `inset` attribute to add padding inside the element.
118
+
119
+ The `inset` attribute supports the following values: 'none', 'xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl' or any CSS value which is valid for the CSS `padding` rule (e.g. '1rem').
99
120
 
100
- You may specify different `bg` values for each breakpoint using the `bgSm`, `bgMd` and `bgLg` properties.
121
+ Note: When using a custom CSS rule do not include a semi-colon at at the end of the string (e.g. '1rem' is valid, '1rem;' is invalid).
122
+
123
+ Inset values may also be set for each breakpoint size via the `insetSm`, `insetMd` and `insetLg` attributes.
101
124
 
102
125
  <div class="exampleWrapper">
103
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/breakpoints.html) -->
104
- <!-- The below content is automatically added from ../apiExamples/breakpoints.html -->
105
- <auro-background
106
- bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
107
- bgMd="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt947ef7b1f81b7f99/6633c2589db1edec36f6de69/MKT_091820_BF-CM-Email-Sign-Up-Materials_Merch-tiles_Evergreen_720x720-background.jpg) center center/cover no-repeat"
108
- bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
109
- inset="xl">
126
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inset.html) -->
127
+ <!-- The below content is automatically added from ./../apiExamples/inset.html -->
128
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
110
129
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
111
- <auro-header level="2" display="600">View all destinations</auro-header>
112
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
130
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
131
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
113
132
  </div>
114
133
  </auro-background>
115
134
  <!-- AURO-GENERATED-CONTENT:END -->
116
135
  </div>
117
136
  <auro-accordion alignRight>
118
137
  <span slot="trigger">See code</span>
119
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/breakpoints.html) -->
120
- <!-- The below code snippet is automatically added from ../apiExamples/breakpoints.html -->
138
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inset.html) -->
139
+ <!-- The below code snippet is automatically added from ./../apiExamples/inset.html -->
121
140
 
122
141
  ```html
123
- <auro-background
124
- bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
125
- bgMd="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt947ef7b1f81b7f99/6633c2589db1edec36f6de69/MKT_091820_BF-CM-Email-Sign-Up-Materials_Merch-tiles_Evergreen_720x720-background.jpg) center center/cover no-repeat"
126
- bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
127
- inset="xl">
142
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
128
143
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
129
- <auro-header level="2" display="600">View all destinations</auro-header>
130
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
144
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
145
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
131
146
  </div>
132
147
  </auro-background>
133
148
  ```
134
149
  <!-- AURO-GENERATED-CONTENT:END -->
135
150
  </auro-accordion>
136
151
 
137
- ### Property Examples
138
-
139
- #### Use fixed `height` and `width`
152
+ ### Height and Width
153
+
154
+ Use the `height` and `width` attributes to set a fixed height/width on the element.
155
+
156
+ The `height` and `width` attributes accept any valid CSS value for height/width (e.g. '100px', '12rem', '50vw').
140
157
 
141
- The `height` and `width` properties can be used to set custom dimensions. Additional properties available per breakpoint, i.e. `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, `widthLg`.
158
+ Custom height/width can be set per breakpoint using the `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, and `widthLg` attributes.
142
159
 
143
160
  <div class="exampleWrapper">
144
161
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fixedSize.html) -->
145
162
  <!-- The below content is automatically added from ../apiExamples/fixedSize.html -->
146
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="350px" width="300px">
163
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
147
164
  <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
148
- <auro-header level="2" display="600">View all destinations</auro-header>
149
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
165
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
166
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
150
167
  </div>
151
168
  </auro-background>
152
169
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -157,22 +174,22 @@ The `height` and `width` properties can be used to set custom dimensions. Additi
157
174
  <!-- The below code snippet is automatically added from ../apiExamples/fixedSize.html -->
158
175
 
159
176
  ```html
160
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="350px" width="300px">
177
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
161
178
  <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
162
- <auro-header level="2" display="600">View all destinations</auro-header>
163
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
179
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
180
+ <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
164
181
  </div>
165
182
  </auro-background>
166
183
  ```
167
184
  <!-- AURO-GENERATED-CONTENT:END -->
168
185
  </auro-accordion>
169
186
 
170
- ### Theme Support
187
+ ## Restyle Component with CSS Variables
171
188
 
172
- The component may be restyled using the following code sample and changing the values of the following token(s).
189
+ The component may be restyled by changing the values of the following token(s).
173
190
 
174
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
175
- <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
191
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
192
+ <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
176
193
 
177
194
  ```scss
178
195
  :host {
package/demo/auro-background.min.js CHANGED
@@ -92,6 +92,19 @@ class AuroLibraryRuntimeUtils {
92
92
 
93
93
  return elemTag === tag || elem.hasAttribute(tag);
94
94
  }
95
+
96
+ /**
97
+ * Gets the text content of a named slot.
98
+ * @returns {String}
99
+ * @private
100
+ */
101
+ getSlotText(elem, name) {
102
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
103
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
104
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
105
+
106
+ return text || null;
107
+ }
95
108
  }
96
109
 
97
110
  var styleCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
@@ -120,23 +133,8 @@ const t={ATTRIBUTE:1},e=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = clas
120
133
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
121
134
  /**
122
135
  * Auro-background provides users a way to add a background image or color block including a gradient.
123
- *
124
- * @attr {String} bg - Applies all breakpoints
125
- * @attr {String} bgSm - `breakpoint--sm` and above
126
- * @attr {String} bgMd - `breakpoint-md` and above
127
- * @attr {String} bgLg - `breakpoint-lg` and above
128
- * @attr {String} height - Apply minimum height value
129
- * @attr {String} heightSm - Apply minimum height for `breakpoint-sm` and above
130
- * @attr {String} heightMd - Apply minimum height for `breakpoint-md` and above
131
- * @attr {String} heightLg - Apply minimum height for `breakpoint-lg` and above
132
- * @attr {String} width - Define custom width
133
- * @attr {String} widthSm - Define custom width for `breakpoint-sm` and above
134
- * @attr {String} widthMd - Define custom with for `breakpoint-md` and above
135
- * @attr {String} widthLg - Define custom width for `breakpoint-lg` and above
136
- * @attr {String} inset - Apply internal padding
137
- * @attr {String} insetSm - Apply internal padding for `breakpoint-sm` and above
138
- * @attr {String} insetMd - Apply internal padding for `breakpoint-md` and above
139
- * @attr {String} insetLg - Apply internal padding for `breakpoint-lg` and above
136
+ * @customElement auro-background
137
+ * @slot - Default slot for content within the background container.
140
138
  */
141
139
 
142
140
  // build the component class
@@ -153,21 +151,73 @@ class AuroBackground extends i$2 {
153
151
  // function to define props used within the scope of this component
154
152
  static get properties() {
155
153
  return {
154
+ /**
155
+ * Sets the background image at all breakpoints
156
+ */
156
157
  bg: { type: String },
158
+ /**
159
+ * Sets the background image at `breakpoint-sm` and above
160
+ */
157
161
  bgSm: { type: String },
162
+ /**
163
+ * Sets the background image at `breakpoint-md` and above
164
+ */
158
165
  bgMd: { type: String },
166
+ /**
167
+ * Sets the background image at `breakpoint-lg` and above
168
+ */
159
169
  bgLg: { type: String },
170
+ /**
171
+ * Applies custom height at all breakpoints
172
+ */
160
173
  height: { type: String },
174
+ /**
175
+ * Applies custom height at `breakpoint-sm` and above
176
+ */
161
177
  heightSm: { type: String },
178
+ /**
179
+ * Applies custom height at `breakpoint-md` and above
180
+ */
162
181
  heightMd: { type: String },
182
+ /**
183
+ * Applies custom height at `breakpoint-lg` and above
184
+ */
163
185
  heightLg: { type: String },
186
+ /**
187
+ * Applies custom width at all breakpoints
188
+ */
164
189
  width: { type: String },
190
+ /**
191
+ * Applies custom width at `breakpoint-sm` and above
192
+ */
165
193
  widthSm: { type: String },
194
+ /**
195
+ * Applies custom width at `breakpoint-md` and above
196
+ */
166
197
  widthMd: { type: String },
198
+ /**
199
+ * Applies custom width at `breakpoint-lg` and above
200
+ */
167
201
  widthLg: { type: String },
202
+ /**
203
+ * Applies internal padding at all breakpoints
204
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
205
+ */
168
206
  inset: { type: String },
207
+ /**
208
+ * Applies internal padding at `breakpoint-sm` and above
209
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
210
+ */
169
211
  insetSm: { type: String },
212
+ /**
213
+ * Applies internal padding at `breakpoint-md` and above
214
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
215
+ */
170
216
  insetMd: { type: String },
217
+ /**
218
+ * Applies internal padding at `breakpoint-lg` and above
219
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
220
+ */
171
221
  insetLg: { type: String },
172
222
  };
173
223
  }
package/demo/index.md CHANGED
@@ -1,21 +1,21 @@
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
- # Background
8
-
9
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
10
- <!-- The below content is automatically added from ../docs/partials/description.md -->
7
+ # Background
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
11
  The `auro-background` element is an easy-to-use mobile-first alternative to writing custom CSS for background colors or images with automatically scoped media queries. Use independently or in the slot of another custom element such as `auro-banner`.
12
12
  <!-- AURO-GENERATED-CONTENT:END -->
13
13
 
14
- ## How to use
15
-
16
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
17
- <!-- The below content is automatically added from ../docs/partials/useCases.md -->
18
- The `auro-background` component accepts 4 properties - `bg`, `height`, `width`, and `inset` that serve as the default at all breakpoints. `height`, `width`, and `inset` are not required and sizing will scale to the content when omitted. Additionally, there is a separate property for each supported breakpoint (`bgsm`, `bgmd`, `bglg`, `heightsm`, `heightmd`, `heightlg`, `widthsm`, `widthmd`, `widthlg`). If you don't set specific size property the smaller property will be used.
14
+ ## Use Cases
15
+
16
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
+ The `auro-background` component accepts 4 properties - `bg`, `height`, `width`, and `inset` that serve as the default at all breakpoints. `height`, `width`, and `inset` are not required and sizing will scale to the content when omitted. Additionally, there is a separate property for each supported breakpoint (`bgSm`, `bgMd`, `bgLg`, `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, `widthLg`). If you don't set a specific size property, the smaller property will be used.
19
19
 
20
20
  These properties map to the compound CSS `background` property and CSS properties of `height`, `width`, and `padding`. Anything you can do within the scope of those CSS rules you can do here.
21
21
 
@@ -24,69 +24,32 @@ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/b
24
24
 
25
25
  ## Example(s)
26
26
 
27
+ ### Basic
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-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
31
33
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
32
- <auro-header level="2" display="600">View all destinations</auro-header>
33
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
34
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
35
+ <auro-hyperlink type="cta" size="sm" href="#">See where we fly</auro-hyperlink>
34
36
  </div>
35
37
  </auro-background>
36
38
  <!-- AURO-GENERATED-CONTENT:END -->
37
39
  </div>
38
40
  <auro-accordion alignRight>
39
41
  <span slot="trigger">See code</span>
40
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
41
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
42
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
43
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
42
44
 
43
45
  ```html
44
46
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
45
47
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
46
- <auro-header level="2" display="600">View all destinations</auro-header>
47
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
48
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
49
+ <auro-hyperlink type="cta" size="sm" href="#">See where we fly</auro-hyperlink>
48
50
  </div>
49
51
  </auro-background>
50
52
  ```
51
53
  <!-- AURO-GENERATED-CONTENT:END -->
52
- </auro-accordion>
53
-
54
- ## Recommended Use and Version Control
55
-
56
- 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-background` custom element is defined automatically.
57
-
58
- To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroBackground.register(name)` method and pass in a unique name.
59
-
60
- ```js
61
- import { AuroBackground } from '@aurodesignsystem/auro-background/class';
62
-
63
- AuroBackground.register('custom-background');
64
- ```
65
-
66
- This will create a new custom element that you can use in your HTML that will function identically to the `auro-background` element.
67
-
68
- <div class="exampleWrapper">
69
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
70
- <!-- The below content is automatically added from ../apiExamples/custom.html -->
71
- <custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
72
- <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
73
- <auro-header level="2" display="600">View all destinations</auro-header>
74
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
75
- </div>
76
- </custom-background>
77
- <!-- AURO-GENERATED-CONTENT:END -->
78
- </div>
79
- <auro-accordion alignRight>
80
- <span slot="trigger">See code</span>
81
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
82
- <!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
83
-
84
- ```html
85
- <custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
86
- <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
87
- <auro-header level="2" display="600">View all destinations</auro-header>
88
- <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
89
- </div>
90
- </custom-background>
91
- ```
92
- <!-- AURO-GENERATED-CONTENT:END -->
54
+ </auro-accordion>
55
+
package/dist/{auro-background-Bq6XF4Pn.js → auro-background-BGnvDU50.js} RENAMED
@@ -1,5 +1,5 @@
1
- import{css as t,LitElement as e,html as i}from"lit";import{styleMap as r}from"lit/directives/style-map.js";class n{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,i=(e,r=e&&e.closest(t))=>e&&e!==document&&e!==window?r||i(e.getRootNode().host):null){return i(e)}handleComponentTagRename(t,e){const i=e.toLowerCase();t.tagName.toLowerCase()!==i&&t.setAttribute(i,!0)}elementMatch(t,e){const i=e.toLowerCase();return t.tagName.toLowerCase()===i||t.hasAttribute(i)}}var s=t`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
1
+ import{css as t,LitElement as e,html as i}from"lit";import{styleMap as n}from"lit/directives/style-map.js";class r{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,i=(e,n=e&&e.closest(t))=>e&&e!==document&&e!==window?n||i(e.getRootNode().host):null){return i(e)}handleComponentTagRename(t,e){const i=e.toLowerCase();t.tagName.toLowerCase()!==i&&t.setAttribute(i,!0)}elementMatch(t,e){const i=e.toLowerCase();return t.tagName.toLowerCase()===i||t.hasAttribute(i)}getSlotText(t,e){const i=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var s=t`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
2
2
  `,a=t`:host{--ds-auro-background-container-color: transparent}
3
- `;class g extends e{constructor(){super(),this.runtimeUtils=new n}static get properties(){return{bg:{type:String},bgSm:{type:String},bgMd:{type:String},bgLg:{type:String},height:{type:String},heightSm:{type:String},heightMd:{type:String},heightLg:{type:String},width:{type:String},widthSm:{type:String},widthMd:{type:String},widthLg:{type:String},inset:{type:String},insetSm:{type:String},insetMd:{type:String},insetLg:{type:String}}}static get styles(){return[s,a]}static register(t="auro-background"){n.prototype.registerComponent(t,g)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-background")}getInsetValues(t){const e={none:"0",xxxs:"25",xxs:"50",xs:"100",sm:"150",md:"200",lg:"300",xl:"400",xxl:"600",xxxl:"800"};return e[t]?`var(--ds-size-${e[t]})`:t}render(){const t={"--background":this.bg||"var(--ds-auro-background-container-color)","--backgroundSm":this.bgSm||"var(--background)","--backgroundMd":this.bgMd||"var(--backgroundSm)","--backgroundLg":this.bgLg||"var(--backgroundMd)","--width":this.width||"auto","--widthSm":this.widthSm||"var(--width)","--widthMd":this.widthMd||"var(--widthSm)","--widthLg":this.widthLg||"var(--widthMd)","--height":this.height||"auto","--heightSm":this.heightSm||"var(--height)","--heightMd":this.heightMd||"var(--heightSm)","--heightLg":this.heightLg||"var(--heightMd)","--inset":this.getInsetValues(this.inset)||"0","--insetSm":this.getInsetValues(this.insetSm)||"var(--inset)","--insetMd":this.getInsetValues(this.insetMd)||"var(--insetSm)","--insetLg":this.getInsetValues(this.insetLg)||"var(--insetMd)"};return i`
4
- <div class="background" style=${r(t)}><slot></slot></div>
3
+ `;class g extends e{constructor(){super(),this.runtimeUtils=new r}static get properties(){return{bg:{type:String},bgSm:{type:String},bgMd:{type:String},bgLg:{type:String},height:{type:String},heightSm:{type:String},heightMd:{type:String},heightLg:{type:String},width:{type:String},widthSm:{type:String},widthMd:{type:String},widthLg:{type:String},inset:{type:String},insetSm:{type:String},insetMd:{type:String},insetLg:{type:String}}}static get styles(){return[s,a]}static register(t="auro-background"){r.prototype.registerComponent(t,g)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-background")}getInsetValues(t){const e={none:"0",xxxs:"25",xxs:"50",xs:"100",sm:"150",md:"200",lg:"300",xl:"400",xxl:"600",xxxl:"800"};return e[t]?`var(--ds-size-${e[t]})`:t}render(){const t={"--background":this.bg||"var(--ds-auro-background-container-color)","--backgroundSm":this.bgSm||"var(--background)","--backgroundMd":this.bgMd||"var(--backgroundSm)","--backgroundLg":this.bgLg||"var(--backgroundMd)","--width":this.width||"auto","--widthSm":this.widthSm||"var(--width)","--widthMd":this.widthMd||"var(--widthSm)","--widthLg":this.widthLg||"var(--widthMd)","--height":this.height||"auto","--heightSm":this.heightSm||"var(--height)","--heightMd":this.heightMd||"var(--heightSm)","--heightLg":this.heightLg||"var(--heightMd)","--inset":this.getInsetValues(this.inset)||"0","--insetSm":this.getInsetValues(this.insetSm)||"var(--inset)","--insetMd":this.getInsetValues(this.insetMd)||"var(--insetSm)","--insetLg":this.getInsetValues(this.insetLg)||"var(--insetMd)"};return i`
4
+ <div class="background" style=${n(t)}><slot></slot></div>
5
5
  `}}export{g as A};
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { css, LitElement, html } from 'lit';
2
2
  import { styleMap } from 'lit/directives/style-map.js';
3
3
 
4
- class n{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,i=(e,r=e&&e.closest(t))=>e&&e!==document&&e!==window?r||i(e.getRootNode().host):null){return i(e)}handleComponentTagRename(t,e){const i=e.toLowerCase();t.tagName.toLowerCase()!==i&&t.setAttribute(i,true);}elementMatch(t,e){const i=e.toLowerCase();return t.tagName.toLowerCase()===i||t.hasAttribute(i)}}var s=css`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
4
+ class r{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,i=(e,n=e&&e.closest(t))=>e&&e!==document&&e!==window?n||i(e.getRootNode().host):null){return i(e)}handleComponentTagRename(t,e){const i=e.toLowerCase();t.tagName.toLowerCase()!==i&&t.setAttribute(i,true);}elementMatch(t,e){const i=e.toLowerCase();return t.tagName.toLowerCase()===i||t.hasAttribute(i)}getSlotText(t,e){const i=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return (i?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var s=css`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
5
5
  `,a=css`:host{--ds-auro-background-container-color: transparent}
6
- `;class g extends LitElement{constructor(){super(),this.runtimeUtils=new n;}static get properties(){return {bg:{type:String},bgSm:{type:String},bgMd:{type:String},bgLg:{type:String},height:{type:String},heightSm:{type:String},heightMd:{type:String},heightLg:{type:String},width:{type:String},widthSm:{type:String},widthMd:{type:String},widthLg:{type:String},inset:{type:String},insetSm:{type:String},insetMd:{type:String},insetLg:{type:String}}}static get styles(){return [s,a]}static register(t="auro-background"){n.prototype.registerComponent(t,g);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-background");}getInsetValues(t){const e={none:"0",xxxs:"25",xxs:"50",xs:"100",sm:"150",md:"200",lg:"300",xl:"400",xxl:"600",xxxl:"800"};return e[t]?`var(--ds-size-${e[t]})`:t}render(){const t={"--background":this.bg||"var(--ds-auro-background-container-color)","--backgroundSm":this.bgSm||"var(--background)","--backgroundMd":this.bgMd||"var(--backgroundSm)","--backgroundLg":this.bgLg||"var(--backgroundMd)","--width":this.width||"auto","--widthSm":this.widthSm||"var(--width)","--widthMd":this.widthMd||"var(--widthSm)","--widthLg":this.widthLg||"var(--widthMd)","--height":this.height||"auto","--heightSm":this.heightSm||"var(--height)","--heightMd":this.heightMd||"var(--heightSm)","--heightLg":this.heightLg||"var(--heightMd)","--inset":this.getInsetValues(this.inset)||"0","--insetSm":this.getInsetValues(this.insetSm)||"var(--inset)","--insetMd":this.getInsetValues(this.insetMd)||"var(--insetSm)","--insetLg":this.getInsetValues(this.insetLg)||"var(--insetMd)"};return html`
6
+ `;class g extends LitElement{constructor(){super(),this.runtimeUtils=new r;}static get properties(){return {bg:{type:String},bgSm:{type:String},bgMd:{type:String},bgLg:{type:String},height:{type:String},heightSm:{type:String},heightMd:{type:String},heightLg:{type:String},width:{type:String},widthSm:{type:String},widthMd:{type:String},widthLg:{type:String},inset:{type:String},insetSm:{type:String},insetMd:{type:String},insetLg:{type:String}}}static get styles(){return [s,a]}static register(t="auro-background"){r.prototype.registerComponent(t,g);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-background");}getInsetValues(t){const e={none:"0",xxxs:"25",xxs:"50",xs:"100",sm:"150",md:"200",lg:"300",xl:"400",xxl:"600",xxxl:"800"};return e[t]?`var(--ds-size-${e[t]})`:t}render(){const t={"--background":this.bg||"var(--ds-auro-background-container-color)","--backgroundSm":this.bgSm||"var(--background)","--backgroundMd":this.bgMd||"var(--backgroundSm)","--backgroundLg":this.bgLg||"var(--backgroundMd)","--width":this.width||"auto","--widthSm":this.widthSm||"var(--width)","--widthMd":this.widthMd||"var(--widthSm)","--widthLg":this.widthLg||"var(--widthMd)","--height":this.height||"auto","--heightSm":this.heightSm||"var(--height)","--heightMd":this.heightMd||"var(--heightSm)","--heightLg":this.heightLg||"var(--heightMd)","--inset":this.getInsetValues(this.inset)||"0","--insetSm":this.getInsetValues(this.insetSm)||"var(--inset)","--insetMd":this.getInsetValues(this.insetMd)||"var(--insetSm)","--insetLg":this.getInsetValues(this.insetLg)||"var(--insetMd)"};return html`
7
7
  <div class="background" style=${styleMap(t)}><slot></slot></div>
8
8
  `}}
9
9
 
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroBackground}from"./auro-background-Bq6XF4Pn.js";import"lit";import"lit/directives/style-map.js";
1
+ export{A as AuroBackground}from"./auro-background-BGnvDU50.js";import"lit";import"lit/directives/style-map.js";
package/dist/registered.js CHANGED
@@ -1 +1 @@
1
- import{A as r}from"./auro-background-Bq6XF4Pn.js";import"lit";import"lit/directives/style-map.js";r.register();
1
+ import{A as r}from"./auro-background-BGnvDU50.js";import"lit";import"lit/directives/style-map.js";r.register();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-background",
10
- "version": "0.0.0-pr70.0",
10
+ "version": "0.0.0-pr71.0",
11
11
  "description": "auro-background 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.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@aurodesignsystem/auro-cli": "^3.0.3",
27
+ "@aurodesignsystem/auro-cli": "^3.3.1",
28
28
  "@aurodesignsystem/auro-config": "^1.3.1",
29
- "@aurodesignsystem/auro-library": "^5.5.3",
30
- "@aurodesignsystem/design-tokens": "^8.4.4",
31
- "@aurodesignsystem/webcorestylesheets": "^10.0.4",
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": [
@@ -65,6 +65,7 @@
65
65
  ".": "./dist/registered.js",
66
66
  "./demo/*.md": "./demo/*.md",
67
67
  "./demo/*.js": "./demo/*.min.js",
68
+ "./custom-elements.json": "./custom-elements.json",
68
69
  "./class": {
69
70
  "module": "./dist/index.js",
70
71
  "types": "./dist/index.d.ts",
@@ -77,6 +78,8 @@
77
78
  "CHANGELOG.md",
78
79
  "README.md",
79
80
  "LICENSE",
80
- "NOTICE"
81
- ]
81
+ "NOTICE",
82
+ "custom-elements.json"
83
+ ],
84
+ "customElements": "custom-elements.json"
82
85
  }