@aurodesignsystem-dev/auro-background 0.0.0-pr71.1 → 0.0.0-pr71.3

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 +13 -10
  2. package/custom-elements.json +31 -27
  3. package/demo/api.html +3 -3
  4. package/demo/api.md +53 -53
  5. package/demo/auro-background.min.js +32 -31
  6. package/demo/index.html +3 -3
  7. package/demo/index.md +5 -6
  8. package/dist/{auro-background-BGnvDU50.js → auro-background-B1Q_3Y1A.js} +1 -1
  9. package/dist/index.d.ts +220 -8
  10. package/dist/index.js +1 -1
  11. package/dist/registered.js +1 -1
  12. package/package.json +7 -3
package/README.md CHANGED
@@ -25,18 +25,21 @@ The `auro-background` element is an easy-to-use mobile-first alternative to writ
25
25
  <!-- AURO-GENERATED-CONTENT:END -->
26
26
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
27
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
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. -->
28
+ 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.
29
+
30
+ 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.
31
+
32
+ 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.
29
33
  <!-- AURO-GENERATED-CONTENT:END -->
30
34
 
31
35
  ## Use Cases
32
36
 
33
37
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
34
38
  <!-- 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.
39
+ The `<auro-background>` element should be used in situations where users may:
38
40
 
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.
41
+ * Need to apply a background image or color to a specific section of content
42
+ * Require responsive background images that change at different breakpoints
40
43
  <!-- AURO-GENERATED-CONTENT:END -->
41
44
 
42
45
  ## Install
@@ -87,7 +90,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
87
90
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
88
91
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
89
92
  <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>
93
+ <auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
91
94
  </div>
92
95
  </auro-background>
93
96
  ```
@@ -122,8 +125,8 @@ This will create a new custom element `<custom-background>` that behaves exactly
122
125
  <!-- The below content is automatically added from ./apiExamples/custom.html -->
123
126
  <custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
124
127
  <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>
128
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
129
+ <auro-hyperlink type="cta" variant="secondary" href="#" size="xs">See where we fly</auro-hyperlink>
127
130
  </div>
128
131
  </custom-background>
129
132
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -136,8 +139,8 @@ This will create a new custom element `<custom-background>` that behaves exactly
136
139
  ```html
137
140
  <custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
138
141
  <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>
142
+ <auro-header level="2" visualLevel="3">View all destinations</auro-header>
143
+ <auro-hyperlink type="cta" variant="secondary" href="#" size="xs">See where we fly</auro-hyperlink>
141
144
  </div>
142
145
  </custom-background>
143
146
  ```
package/custom-elements.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "Auro-background provides users a way to add a background image or color block including a gradient.",
11
+ "description": "The `auro-background` element provides users a way to add a background image or color block including a gradient.",
12
12
  "name": "AuroBackground",
13
13
  "slots": [
14
14
  {
@@ -34,7 +34,7 @@
34
34
  "type": {
35
35
  "text": "string"
36
36
  },
37
- "description": "Sets the background image at `breakpoint-lg` and above",
37
+ "description": "Sets the background image at `ds-grid-breakpoint-lg` and above",
38
38
  "attribute": "bgLg"
39
39
  },
40
40
  {
@@ -44,7 +44,7 @@
44
44
  "type": {
45
45
  "text": "string"
46
46
  },
47
- "description": "Sets the background image at `breakpoint-md` and above",
47
+ "description": "Sets the background image at `ds-grid-breakpoint-md` and above",
48
48
  "attribute": "bgMd"
49
49
  },
50
50
  {
@@ -54,7 +54,7 @@
54
54
  "type": {
55
55
  "text": "string"
56
56
  },
57
- "description": "Sets the background image at `breakpoint-sm` and above",
57
+ "description": "Sets the background image at `ds-grid-breakpoint-sm` and above",
58
58
  "attribute": "bgSm"
59
59
  },
60
60
  {
@@ -93,7 +93,7 @@
93
93
  "type": {
94
94
  "text": "string"
95
95
  },
96
- "description": "Applies custom height at `breakpoint-lg` and above",
96
+ "description": "Applies custom height at `ds-grid-breakpoint-lg` and above",
97
97
  "attribute": "heightLg"
98
98
  },
99
99
  {
@@ -103,7 +103,7 @@
103
103
  "type": {
104
104
  "text": "string"
105
105
  },
106
- "description": "Applies custom height at `breakpoint-md` and above",
106
+ "description": "Applies custom height at `ds-grid-breakpoint-md` and above",
107
107
  "attribute": "heightMd"
108
108
  },
109
109
  {
@@ -113,7 +113,7 @@
113
113
  "type": {
114
114
  "text": "string"
115
115
  },
116
- "description": "Applies custom height at `breakpoint-sm` and above",
116
+ "description": "Applies custom height at `ds-grid-breakpoint-sm` and above",
117
117
  "attribute": "heightSm"
118
118
  },
119
119
  {
@@ -133,7 +133,7 @@
133
133
  "type": {
134
134
  "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
135
135
  },
136
- "description": "Applies internal padding at `breakpoint-lg` and above",
136
+ "description": "Applies internal padding at `ds-grid-breakpoint-lg` and above",
137
137
  "attribute": "insetLg"
138
138
  },
139
139
  {
@@ -143,7 +143,7 @@
143
143
  "type": {
144
144
  "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
145
145
  },
146
- "description": "Applies internal padding at `breakpoint-md` and above",
146
+ "description": "Applies internal padding at `ds-grid-breakpoint-md` and above",
147
147
  "attribute": "insetMd"
148
148
  },
149
149
  {
@@ -153,7 +153,7 @@
153
153
  "type": {
154
154
  "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
155
155
  },
156
- "description": "Applies internal padding at `breakpoint-sm` and above",
156
+ "description": "Applies internal padding at `ds-grid-breakpoint-sm` and above",
157
157
  "attribute": "insetSm"
158
158
  },
159
159
  {
@@ -171,7 +171,10 @@
171
171
  }
172
172
  }
173
173
  ],
174
- "description": "This will register this element with the browser."
174
+ "description": "This will register this element with the browser.",
175
+ "type": {
176
+ "text": "register(name?: string = \"auro-background\") => void"
177
+ }
175
178
  },
176
179
  {
177
180
  "kind": "field",
@@ -196,7 +199,7 @@
196
199
  "type": {
197
200
  "text": "string"
198
201
  },
199
- "description": "Applies custom width at `breakpoint-lg` and above",
202
+ "description": "Applies custom width at `ds-grid-breakpoint-lg` and above",
200
203
  "attribute": "widthLg"
201
204
  },
202
205
  {
@@ -206,7 +209,7 @@
206
209
  "type": {
207
210
  "text": "string"
208
211
  },
209
- "description": "Applies custom width at `breakpoint-md` and above",
212
+ "description": "Applies custom width at `ds-grid-breakpoint-md` and above",
210
213
  "attribute": "widthMd"
211
214
  },
212
215
  {
@@ -216,7 +219,7 @@
216
219
  "type": {
217
220
  "text": "string"
218
221
  },
219
- "description": "Applies custom width at `breakpoint-sm` and above",
222
+ "description": "Applies custom width at `ds-grid-breakpoint-sm` and above",
220
223
  "attribute": "widthSm"
221
224
  }
222
225
  ],
@@ -234,7 +237,7 @@
234
237
  "type": {
235
238
  "text": "string"
236
239
  },
237
- "description": "Sets the background image at `breakpoint-lg` and above",
240
+ "description": "Sets the background image at `ds-grid-breakpoint-lg` and above",
238
241
  "fieldName": "bgLg"
239
242
  },
240
243
  {
@@ -242,7 +245,7 @@
242
245
  "type": {
243
246
  "text": "string"
244
247
  },
245
- "description": "Sets the background image at `breakpoint-md` and above",
248
+ "description": "Sets the background image at `ds-grid-breakpoint-md` and above",
246
249
  "fieldName": "bgMd"
247
250
  },
248
251
  {
@@ -250,7 +253,7 @@
250
253
  "type": {
251
254
  "text": "string"
252
255
  },
253
- "description": "Sets the background image at `breakpoint-sm` and above",
256
+ "description": "Sets the background image at `ds-grid-breakpoint-sm` and above",
254
257
  "fieldName": "bgSm"
255
258
  },
256
259
  {
@@ -266,7 +269,7 @@
266
269
  "type": {
267
270
  "text": "string"
268
271
  },
269
- "description": "Applies custom height at `breakpoint-lg` and above",
272
+ "description": "Applies custom height at `ds-grid-breakpoint-lg` and above",
270
273
  "fieldName": "heightLg"
271
274
  },
272
275
  {
@@ -274,7 +277,7 @@
274
277
  "type": {
275
278
  "text": "string"
276
279
  },
277
- "description": "Applies custom height at `breakpoint-md` and above",
280
+ "description": "Applies custom height at `ds-grid-breakpoint-md` and above",
278
281
  "fieldName": "heightMd"
279
282
  },
280
283
  {
@@ -282,7 +285,7 @@
282
285
  "type": {
283
286
  "text": "string"
284
287
  },
285
- "description": "Applies custom height at `breakpoint-sm` and above",
288
+ "description": "Applies custom height at `ds-grid-breakpoint-sm` and above",
286
289
  "fieldName": "heightSm"
287
290
  },
288
291
  {
@@ -298,7 +301,7 @@
298
301
  "type": {
299
302
  "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
300
303
  },
301
- "description": "Applies internal padding at `breakpoint-lg` and above",
304
+ "description": "Applies internal padding at `ds-grid-breakpoint-lg` and above",
302
305
  "fieldName": "insetLg"
303
306
  },
304
307
  {
@@ -306,7 +309,7 @@
306
309
  "type": {
307
310
  "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
308
311
  },
309
- "description": "Applies internal padding at `breakpoint-md` and above",
312
+ "description": "Applies internal padding at `ds-grid-breakpoint-md` and above",
310
313
  "fieldName": "insetMd"
311
314
  },
312
315
  {
@@ -314,7 +317,7 @@
314
317
  "type": {
315
318
  "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
316
319
  },
317
- "description": "Applies internal padding at `breakpoint-sm` and above",
320
+ "description": "Applies internal padding at `ds-grid-breakpoint-sm` and above",
318
321
  "fieldName": "insetSm"
319
322
  },
320
323
  {
@@ -330,7 +333,7 @@
330
333
  "type": {
331
334
  "text": "string"
332
335
  },
333
- "description": "Applies custom width at `breakpoint-lg` and above",
336
+ "description": "Applies custom width at `ds-grid-breakpoint-lg` and above",
334
337
  "fieldName": "widthLg"
335
338
  },
336
339
  {
@@ -338,7 +341,7 @@
338
341
  "type": {
339
342
  "text": "string"
340
343
  },
341
- "description": "Applies custom width at `breakpoint-md` and above",
344
+ "description": "Applies custom width at `ds-grid-breakpoint-md` and above",
342
345
  "fieldName": "widthMd"
343
346
  },
344
347
  {
@@ -346,7 +349,7 @@
346
349
  "type": {
347
350
  "text": "string"
348
351
  },
349
- "description": "Applies custom width at `breakpoint-sm` and above",
352
+ "description": "Applies custom width at `ds-grid-breakpoint-sm` and above",
350
353
  "fieldName": "widthSm"
351
354
  }
352
355
  ],
@@ -355,7 +358,8 @@
355
358
  "package": "lit"
356
359
  },
357
360
  "tagName": "auro-background",
358
- "customElement": true
361
+ "customElement": true,
362
+ "modulePath": "src/auro-background.js"
359
363
  }
360
364
  ],
361
365
  "exports": [
package/demo/api.html CHANGED
@@ -51,8 +51,8 @@
51
51
  <script type="module" data-demo-script="true" src="./api.min.js"></script>
52
52
 
53
53
  <!-- If additional elements are needed for the demo, add them here. -->
54
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
56
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
57
57
  </body>
58
58
  </html>
package/demo/api.md CHANGED
@@ -4,28 +4,28 @@
4
4
 
5
5
  # auro-background
6
6
 
7
- Auro-background provides users a way to add a background image or color block including a gradient.
7
+ The `auro-background` element provides users a way to add a background image or color block including a gradient.
8
8
 
9
9
  ### Properties & Attributes
10
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 |
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 `ds-grid-breakpoint-lg` and above |
15
+ | bgMd | bgMd | | string | | Sets the background image at `ds-grid-breakpoint-md` and above |
16
+ | bgSm | bgSm | | string | | Sets the background image at `ds-grid-breakpoint-sm` and above |
17
+ | height | height | | string | | Applies custom height at all breakpoints |
18
+ | heightLg | heightLg | | string | | Applies custom height at `ds-grid-breakpoint-lg` and above |
19
+ | heightMd | heightMd | | string | | Applies custom height at `ds-grid-breakpoint-md` and above |
20
+ | heightSm | heightSm | | string | | Applies custom height at `ds-grid-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 `ds-grid-breakpoint-lg` and above |
23
+ | insetMd | insetMd | | `none` \| `xxxs` \| `xxs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` \| string | | Applies internal padding at `ds-grid-breakpoint-md` and above |
24
+ | insetSm | insetSm | | `none` \| `xxxs` \| `xxs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` \| string | | Applies internal padding at `ds-grid-breakpoint-sm` and above |
25
+ | width | width | | string | | Applies custom width at all breakpoints |
26
+ | widthLg | widthLg | | string | | Applies custom width at `ds-grid-breakpoint-lg` and above |
27
+ | widthMd | widthMd | | string | | Applies custom width at `ds-grid-breakpoint-md` and above |
28
+ | widthSm | widthSm | | string | | Applies custom width at `ds-grid-breakpoint-sm` and above |
29
29
 
30
30
  ### Methods
31
31
 
@@ -48,7 +48,7 @@ Auro-background provides users a way to add a background image or color block in
48
48
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
49
49
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
50
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>
51
+ <auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
52
52
  </div>
53
53
  </auro-background>
54
54
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -62,7 +62,7 @@ Auro-background provides users a way to add a background image or color block in
62
62
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
63
63
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
64
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>
65
+ <auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
66
66
  </div>
67
67
  </auro-background>
68
68
  ```
@@ -87,7 +87,7 @@ Different `bg` values may be set for each breakpoint using the `bgSm`, `bgMd` an
87
87
  inset="xxxl">
88
88
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
89
89
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
90
- <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
90
+ <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
91
91
  </div>
92
92
  </auro-background>
93
93
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -105,79 +105,79 @@ Different `bg` values may be set for each breakpoint using the `bgSm`, `bgMd` an
105
105
  inset="xxxl">
106
106
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
107
107
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
108
- <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
108
+ <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
109
109
  </div>
110
110
  </auro-background>
111
111
  ```
112
112
  <!-- AURO-GENERATED-CONTENT:END -->
113
113
  </auro-accordion>
114
114
 
115
- ### Inset
116
-
117
- Use the `inset` attribute to add padding inside the element.
115
+ ### Height and Width
118
116
 
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').
117
+ Use the `height` and `width` attributes to set a fixed height/width on the element.
120
118
 
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).
119
+ The `height` and `width` attributes accept any valid CSS value for height/width (e.g. `100px`, `12rem`, `50vw`).
122
120
 
123
- Inset values may also be set for each breakpoint size via the `insetSm`, `insetMd` and `insetLg` attributes.
121
+ Custom height/width can be set per breakpoint using the `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, and `widthLg` attributes.
124
122
 
125
123
  <div class="exampleWrapper">
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">
129
- <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
124
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fixed-size.html) -->
125
+ <!-- The below content is automatically added from ../apiExamples/fixed-size.html -->
126
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
127
+ <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
130
128
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
131
- <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
129
+ <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
132
130
  </div>
133
131
  </auro-background>
134
132
  <!-- AURO-GENERATED-CONTENT:END -->
135
133
  </div>
136
134
  <auro-accordion alignRight>
137
135
  <span slot="trigger">See code</span>
138
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inset.html) -->
139
- <!-- The below code snippet is automatically added from ./../apiExamples/inset.html -->
136
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fixed-size.html) -->
137
+ <!-- The below code snippet is automatically added from ../apiExamples/fixed-size.html -->
140
138
 
141
139
  ```html
142
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
143
- <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
140
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
141
+ <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
144
142
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
145
- <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
143
+ <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
146
144
  </div>
147
145
  </auro-background>
148
146
  ```
149
147
  <!-- AURO-GENERATED-CONTENT:END -->
150
148
  </auro-accordion>
151
149
 
152
- ### Height and Width
150
+ ### Inset
153
151
 
154
- Use the `height` and `width` attributes to set a fixed height/width on the element.
152
+ Use the `inset` attribute to add padding inside the element.
155
153
 
156
- The `height` and `width` attributes accept any valid CSS value for height/width (e.g. '100px', '12rem', '50vw').
154
+ 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`).
157
155
 
158
- Custom height/width can be set per breakpoint using the `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, and `widthLg` attributes.
156
+ 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).
157
+
158
+ Inset values may also be set for each breakpoint size via the `insetSm`, `insetMd` and `insetLg` attributes.
159
159
 
160
160
  <div class="exampleWrapper">
161
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fixedSize.html) -->
162
- <!-- The below content is automatically added from ../apiExamples/fixedSize.html -->
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">
164
- <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
161
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inset.html) -->
162
+ <!-- The below content is automatically added from ./../apiExamples/inset.html -->
163
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
164
+ <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
165
165
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
166
- <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
166
+ <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
167
167
  </div>
168
168
  </auro-background>
169
169
  <!-- AURO-GENERATED-CONTENT:END -->
170
170
  </div>
171
171
  <auro-accordion alignRight>
172
172
  <span slot="trigger">See code</span>
173
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fixedSize.html) -->
174
- <!-- The below code snippet is automatically added from ../apiExamples/fixedSize.html -->
173
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inset.html) -->
174
+ <!-- The below code snippet is automatically added from ./../apiExamples/inset.html -->
175
175
 
176
176
  ```html
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">
178
- <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
177
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
178
+ <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
179
179
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
180
- <auro-hyperlink type="cta" href="#">See where we fly</auro-hyperlink>
180
+ <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
181
181
  </div>
182
182
  </auro-background>
183
183
  ```
package/demo/auro-background.min.js CHANGED
@@ -132,8 +132,9 @@ const t={ATTRIBUTE:1},e=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = clas
132
132
 
133
133
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
134
134
  /**
135
- * Auro-background provides users a way to add a background image or color block including a gradient.
135
+ * The `auro-background` element provides users a way to add a background image or color block including a gradient.
136
136
  * @customElement auro-background
137
+ *
137
138
  * @slot - Default slot for content within the background container.
138
139
  */
139
140
 
@@ -156,69 +157,69 @@ class AuroBackground extends i$2 {
156
157
  */
157
158
  bg: { type: String },
158
159
  /**
159
- * Sets the background image at `breakpoint-sm` and above
160
+ * Sets the background image at `ds-grid-breakpoint-lg` and above
160
161
  */
161
- bgSm: { type: String },
162
+ bgLg: { type: String },
162
163
  /**
163
- * Sets the background image at `breakpoint-md` and above
164
+ * Sets the background image at `ds-grid-breakpoint-md` and above
164
165
  */
165
166
  bgMd: { type: String },
166
167
  /**
167
- * Sets the background image at `breakpoint-lg` and above
168
+ * Sets the background image at `ds-grid-breakpoint-sm` and above
168
169
  */
169
- bgLg: { type: String },
170
+ bgSm: { type: String },
170
171
  /**
171
172
  * Applies custom height at all breakpoints
172
173
  */
173
174
  height: { type: String },
174
175
  /**
175
- * Applies custom height at `breakpoint-sm` and above
176
+ * Applies custom height at `ds-grid-breakpoint-lg` and above
176
177
  */
177
- heightSm: { type: String },
178
+ heightLg: { type: String },
178
179
  /**
179
- * Applies custom height at `breakpoint-md` and above
180
+ * Applies custom height at `ds-grid-breakpoint-md` and above
180
181
  */
181
182
  heightMd: { type: String },
182
183
  /**
183
- * Applies custom height at `breakpoint-lg` and above
184
+ * Applies custom height at `ds-grid-breakpoint-sm` and above
184
185
  */
185
- heightLg: { type: String },
186
+ heightSm: { type: String },
186
187
  /**
187
- * Applies custom width at all breakpoints
188
+ * Applies internal padding at all breakpoints
189
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
188
190
  */
189
- width: { type: String },
191
+ inset: { type: String },
190
192
  /**
191
- * Applies custom width at `breakpoint-sm` and above
193
+ * Applies internal padding at `ds-grid-breakpoint-lg` and above
194
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
192
195
  */
193
- widthSm: { type: String },
196
+ insetLg: { type: String },
194
197
  /**
195
- * Applies custom width at `breakpoint-md` and above
198
+ * Applies internal padding at `ds-grid-breakpoint-md` and above
199
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
196
200
  */
197
- widthMd: { type: String },
201
+ insetMd: { type: String },
198
202
  /**
199
- * Applies custom width at `breakpoint-lg` and above
203
+ * Applies internal padding at `ds-grid-breakpoint-sm` and above
204
+ * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
200
205
  */
201
- widthLg: { type: String },
206
+ insetSm: { type: String },
202
207
  /**
203
- * Applies internal padding at all breakpoints
204
- * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
208
+ * Applies custom width at all breakpoints
205
209
  */
206
- inset: { type: String },
210
+ width: { type: String },
207
211
  /**
208
- * Applies internal padding at `breakpoint-sm` and above
209
- * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
212
+ * Applies custom width at `ds-grid-breakpoint-lg` and above
210
213
  */
211
- insetSm: { type: String },
214
+ widthLg: { type: String },
212
215
  /**
213
- * Applies internal padding at `breakpoint-md` and above
214
- * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
216
+ * Applies custom width at `ds-grid-breakpoint-md` and above
215
217
  */
216
- insetMd: { type: String },
218
+ widthMd: { type: String },
217
219
  /**
218
- * Applies internal padding at `breakpoint-lg` and above
219
- * @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
220
+ * Applies custom width at `ds-grid-breakpoint-sm` and above
220
221
  */
221
- insetLg: { type: String },
222
+ widthSm: { type: String },
222
223
  };
223
224
  }
224
225
 
package/demo/index.html CHANGED
@@ -51,8 +51,8 @@
51
51
  <script type="module" data-demo-script="true" src="./index.min.js"></script>
52
52
 
53
53
  <!-- If additional elements are needed for the demo, add them here. -->
54
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
56
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
57
57
  </body>
58
58
  </html>
package/demo/index.md CHANGED
@@ -15,11 +15,10 @@ The `auro-background` element is an easy-to-use mobile-first alternative to writ
15
15
 
16
16
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
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.
18
+ The `<auro-background>` element should be used in situations where users may:
19
19
 
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
-
22
- 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.
20
+ * Need to apply a background image or color to a specific section of content
21
+ * Require responsive background images that change at different breakpoints
23
22
  <!-- AURO-GENERATED-CONTENT:END -->
24
23
 
25
24
  ## Example(s)
@@ -32,7 +31,7 @@ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/b
32
31
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
33
32
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
34
33
  <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
+ <auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
36
35
  </div>
37
36
  </auro-background>
38
37
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -46,7 +45,7 @@ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/b
46
45
  <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
47
46
  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
48
47
  <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
+ <auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
50
49
  </div>
51
50
  </auro-background>
52
51
  ```
package/dist/{auro-background-BGnvDU50.js → auro-background-B1Q_3Y1A.js} RENAMED
@@ -1,5 +1,5 @@
1
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 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`
3
+ `;class g extends e{constructor(){super(),this.runtimeUtils=new r}static get properties(){return{bg:{type:String},bgLg:{type:String},bgMd:{type:String},bgSm:{type:String},height:{type:String},heightLg:{type:String},heightMd:{type:String},heightSm:{type:String},inset:{type:String},insetLg:{type:String},insetMd:{type:String},insetSm:{type:String},width:{type:String},widthLg:{type:String},widthMd:{type:String},widthSm:{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
4
  <div class="background" style=${n(t)}><slot></slot></div>
5
5
  `}}export{g as A};
package/dist/index.d.ts CHANGED
@@ -1,10 +1,222 @@
1
- import { css, LitElement, html } from 'lit';
2
- import { styleMap } from 'lit/directives/style-map.js';
3
1
 
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
- `,a=css`:host{--ds-auro-background-container-color: transparent}
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
- <div class="background" style=${styleMap(t)}><slot></slot></div>
8
- `}}
2
+ import type { AuroBackground } from "src/auro-background.js";
9
3
 
10
- export { g as AuroBackground };
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 AuroBackgroundProps = {
84
+ /** Sets the background image at all breakpoints */
85
+ "bg"?: AuroBackground['bg'];
86
+ /** Sets the background image at `ds-grid-breakpoint-lg` and above */
87
+ "bgLg"?: AuroBackground['bgLg'];
88
+ /** Sets the background image at `ds-grid-breakpoint-md` and above */
89
+ "bgMd"?: AuroBackground['bgMd'];
90
+ /** Sets the background image at `ds-grid-breakpoint-sm` and above */
91
+ "bgSm"?: AuroBackground['bgSm'];
92
+ /** Applies custom height at all breakpoints */
93
+ "height"?: AuroBackground['height'];
94
+ /** Applies custom height at `ds-grid-breakpoint-lg` and above */
95
+ "heightLg"?: AuroBackground['heightLg'];
96
+ /** Applies custom height at `ds-grid-breakpoint-md` and above */
97
+ "heightMd"?: AuroBackground['heightMd'];
98
+ /** Applies custom height at `ds-grid-breakpoint-sm` and above */
99
+ "heightSm"?: AuroBackground['heightSm'];
100
+ /** Applies internal padding at all breakpoints */
101
+ "inset"?: AuroBackground['inset'];
102
+ /** Applies internal padding at `ds-grid-breakpoint-lg` and above */
103
+ "insetLg"?: AuroBackground['insetLg'];
104
+ /** Applies internal padding at `ds-grid-breakpoint-md` and above */
105
+ "insetMd"?: AuroBackground['insetMd'];
106
+ /** Applies internal padding at `ds-grid-breakpoint-sm` and above */
107
+ "insetSm"?: AuroBackground['insetSm'];
108
+ /** Applies custom width at all breakpoints */
109
+ "width"?: AuroBackground['width'];
110
+ /** Applies custom width at `ds-grid-breakpoint-lg` and above */
111
+ "widthLg"?: AuroBackground['widthLg'];
112
+ /** Applies custom width at `ds-grid-breakpoint-md` and above */
113
+ "widthMd"?: AuroBackground['widthMd'];
114
+ /** Applies custom width at `ds-grid-breakpoint-sm` and above */
115
+ "widthSm"?: AuroBackground['widthSm'];
116
+
117
+
118
+ }
119
+
120
+ export type CustomElements = {
121
+
122
+
123
+ /**
124
+ * The `auro-background` element provides users a way to add a background image or color block including a gradient.
125
+ *
126
+ * ## Attributes & Properties
127
+ *
128
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
129
+ *
130
+ * - `bg`: Sets the background image at all breakpoints
131
+ * - `bgLg`: Sets the background image at `ds-grid-breakpoint-lg` and above
132
+ * - `bgMd`: Sets the background image at `ds-grid-breakpoint-md` and above
133
+ * - `bgSm`: Sets the background image at `ds-grid-breakpoint-sm` and above
134
+ * - `height`: Applies custom height at all breakpoints
135
+ * - `heightLg`: Applies custom height at `ds-grid-breakpoint-lg` and above
136
+ * - `heightMd`: Applies custom height at `ds-grid-breakpoint-md` and above
137
+ * - `heightSm`: Applies custom height at `ds-grid-breakpoint-sm` and above
138
+ * - `inset`: Applies internal padding at all breakpoints
139
+ * - `insetLg`: Applies internal padding at `ds-grid-breakpoint-lg` and above
140
+ * - `insetMd`: Applies internal padding at `ds-grid-breakpoint-md` and above
141
+ * - `insetSm`: Applies internal padding at `ds-grid-breakpoint-sm` and above
142
+ * - `width`: Applies custom width at all breakpoints
143
+ * - `widthLg`: Applies custom width at `ds-grid-breakpoint-lg` and above
144
+ * - `widthMd`: Applies custom width at `ds-grid-breakpoint-md` and above
145
+ * - `widthSm`: Applies custom width at `ds-grid-breakpoint-sm` and above
146
+ *
147
+ * ## Slots
148
+ *
149
+ * Areas where markup can be added to the component.
150
+ *
151
+ * - `(default)`: Default slot for content within the background container.
152
+ *
153
+ * ## Methods
154
+ *
155
+ * Methods that can be called to access component functionality.
156
+ *
157
+ * - `register(name?: string = "auro-background") => void`: This will register this element with the browser.
158
+ */
159
+ "auro-background": Partial<AuroBackgroundProps & BaseProps<AuroBackground> & BaseEvents>;
160
+ }
161
+
162
+ export type CustomCssProperties = {
163
+
164
+ }
165
+
166
+
167
+ declare module 'react' {
168
+ namespace JSX {
169
+ interface IntrinsicElements extends CustomElements {}
170
+ }
171
+
172
+ }
173
+
174
+ declare module 'preact' {
175
+ namespace JSX {
176
+ interface IntrinsicElements extends CustomElements {}
177
+ }
178
+
179
+ }
180
+
181
+ declare module '@builder.io/qwik' {
182
+ namespace JSX {
183
+ interface IntrinsicElements extends CustomElements {}
184
+ }
185
+
186
+ }
187
+
188
+ declare module '@stencil/core' {
189
+ namespace JSX {
190
+ interface IntrinsicElements extends CustomElements {}
191
+ }
192
+
193
+ }
194
+
195
+ declare module 'hono/jsx' {
196
+ namespace JSX {
197
+ interface IntrinsicElements extends CustomElements {}
198
+ }
199
+
200
+ }
201
+
202
+ declare module 'react-native' {
203
+ namespace JSX {
204
+ interface IntrinsicElements extends CustomElements {}
205
+ }
206
+
207
+ }
208
+
209
+ declare global {
210
+ namespace JSX {
211
+ interface IntrinsicElements extends CustomElements {}
212
+ }
213
+
214
+ }
215
+ declare global {
216
+ namespace svelteHTML {
217
+ interface IntrinsicElements extends CustomElements {}
218
+ }
219
+ }
220
+
221
+
222
+ export { AuroBackground } from "./index.js";
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroBackground}from"./auro-background-BGnvDU50.js";import"lit";import"lit/directives/style-map.js";
1
+ export{A as AuroBackground}from"./auro-background-B1Q_3Y1A.js";import"lit";import"lit/directives/style-map.js";
package/dist/registered.js CHANGED
@@ -1 +1 @@
1
- import{A as r}from"./auro-background-BGnvDU50.js";import"lit";import"lit/directives/style-map.js";r.register();
1
+ import{A as r}from"./auro-background-B1Q_3Y1A.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-pr71.1",
10
+ "version": "0.0.0-pr71.3",
11
11
  "description": "auro-background HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -24,7 +24,7 @@
24
24
  "lit": "^3.3.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@aurodesignsystem/auro-cli": "^3.3.1",
27
+ "@aurodesignsystem/auro-cli": "^3.5.0",
28
28
  "@aurodesignsystem/auro-config": "^1.3.1",
29
29
  "@aurodesignsystem/auro-library": "^5.5.4",
30
30
  "@aurodesignsystem/design-tokens": "^8.7.0",
@@ -62,7 +62,11 @@
62
62
  "exports": {
63
63
  "./package.json": "./package.json",
64
64
  "./readme.md": "./README.md",
65
- ".": "./dist/registered.js",
65
+ ".": {
66
+ "module": "./dist/registered.js",
67
+ "types": "./dist/index.d.ts",
68
+ "default": "./dist/registered.js"
69
+ },
66
70
  "./demo/*.md": "./demo/*.md",
67
71
  "./demo/*.js": "./demo/*.min.js",
68
72
  "./custom-elements.json": "./custom-elements.json",