@aurodesignsystem-dev/auro-tabs 0.0.0-pr87.0 → 0.0.0-pr87.2

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 (16) hide show
  1. package/README.md +2 -2
  2. package/custom-elements.json +2300 -0
  3. package/demo/api.html +12 -6
  4. package/demo/api.md +123 -42
  5. package/demo/auro-tabpanel.min.js +97 -21
  6. package/demo/generatedTabExample.js +1 -1
  7. package/demo/index.html +13 -19
  8. package/demo/index.md +53 -46
  9. package/demo/lit-element.min.js +1 -1
  10. package/dist/auro-tabpanel-CmN2vp5_.js +23 -0
  11. package/dist/index.d.ts +10 -10
  12. package/dist/index.js +1 -1
  13. package/dist/registered.js +1 -1
  14. package/package.json +11 -8
  15. package/demo/demo.md +0 -608
  16. package/dist/auro-tabpanel-B-TuhB7-.js +0 -23
package/demo/api.html CHANGED
@@ -17,12 +17,18 @@
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
19
  <title>Auro Web Component Generator | auro-tabs custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-button's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+ <!-- Webcore Stylesheet Alaska Theme -->
30
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
31
+ <!-- Demo Specific Styles -->
26
32
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
27
33
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
28
34
  </head>
package/demo/api.md CHANGED
@@ -6,13 +6,23 @@
6
6
  Represents a tab within an auro-tabgroup element. When selected, displays the corresponding AuroTabpanel.
7
7
  The auro-tabpanel element should only be used inside an AuroTabgroup element.
8
8
 
9
- ## Properties
9
+ ### Properties & Attributes
10
10
 
11
- | Property | Attribute | Type | Default | Description |
12
- |------------|------------|-----------|---------|-------------------------------|
13
- | [disabled](#disabled) | `disabled` | `Boolean` | "false" | Mark the tab as disabled tab. |
14
- | [selected](#selected) | `selected` | `Boolean` | "false" | Mark the tab as selected tab. |
15
- | [variant](#variant) | `variant` | `string` | "false" | |
11
+ | Properties | Attributes | Type | Default | Description |
12
+ | ---------- | ---------- | --------------------------------- | --------- | ----------------------------------------------------------------------- |
13
+ | appearance | appearance | "default" \| "inverse" \| string | "default" | Defines whether the component will be on lighter or darker backgrounds. |
14
+ | disabled | disabled | boolean | false | Indicates whether the tab is disabled. |
15
+ | selected | selected | boolean | false | Indicates whether the tab is selected. |
16
+ | variant | variant | "default" \| "unstyled" \| string | "default" | The variant of the tab. |
17
+ | | focused | boolean | false | Indicates whether the tab is focused. |
18
+
19
+ ### Methods
20
+
21
+ | Name | Parameters | Return | Description |
22
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
23
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
24
+
25
+ ---
16
26
 
17
27
  # auro-tabgroup
18
28
 
@@ -21,49 +31,53 @@ All children of `<auro-tabgroup>` should be either `<auro-tab>` or
21
31
  `<auro-tabpanel>`. This element is stateless, meaning that no values are
22
32
  cached and therefore, changes during runtime work.
23
33
 
24
- ## Properties
34
+ ### Properties & Attributes
35
+
36
+ | Properties | Attributes | Type | Default | Description |
37
+ | ---------- | ---------- | -------------------------------- | --------- | ----------------------------------------------------------------------- |
38
+ | appearance | appearance | "default" \| "inverse" \| string | 'default' | Defines whether the component will be on lighter or darker backgrounds. |
25
39
 
26
- | Property | Attribute | Type | Default |
27
- |-----------------|-----------------|-----------|---------|
28
- | [busy](#busy) | | `boolean` | |
29
- | [panels](#panels) | | | |
30
- | [selectOnFocus](#selectOnFocus) | `selectOnFocus` | `boolean` | "false" |
31
- | [tabs](#tabs) | | | |
40
+ ### Methods
32
41
 
33
- ## Methods
42
+ | Name | Parameters | Return | Description |
43
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
44
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
34
45
 
35
- | Method | Type | Description |
36
- |--------------------|-------------------------------|--------------------------------------------|
37
- | [selectTab](#selectTab) | `(newTab: HTMLElement): void` | **newTab**: Selected auro-tab. |
38
- | [selectTabByIndex](#selectTabByIndex) | `(index: number): void` | **index**: The index of the tab to select. |
46
+ ### Slots
39
47
 
40
- ## Slots
48
+ | Name | Description |
49
+ | ----- | --------------------------------------- |
50
+ | panel | Slot component named for auro-tabpanel. |
51
+ | tab | Slot component named for auro-tab. |
41
52
 
42
- | Name | Description |
43
- |---------|-----------------------------------------|
44
- | [panel](#panel) | Slot component named for auro-tabpanel. |
45
- | [tab](#tab) | Slot component named for auro-tab. |
53
+ ### CSS Shadow Parts
46
54
 
47
- ## CSS Shadow Parts
55
+ | Name | Description |
56
+ | ----------------- | ------------------------------------------------------------------------------ |
57
+ | slider | The slider element. |
58
+ | slider-positioner | The slider positioner element (non-visual, only used to center slider on tab). |
59
+ | tabgroup__panels | The panel wrapper element. |
60
+ | tabgroup__root | The root element of the tab group. |
61
+ | tabgroup__tabs | The "tabs list" internal wrapper element. |
48
62
 
49
- | Part | Description |
50
- |---------------------|--------------------------------------------------|
51
- | [slider](#slider) | The slider element. |
52
- | `slider-positioner` | The slider positioner element (non-visual, only used to center slider on tab). |
53
- | `tabgroup__panels` | The panel wrapper element. |
54
- | `tabgroup__root` | The root element of the tab group. |
55
- | `tabgroup__tabs` | The "tabs list" internal wrapper element. |
63
+ ---
56
64
 
57
65
  # auro-tabpanel
58
66
 
59
67
  Represents a panel to be displayed when the corresponding tab is selected in an AuroTabgroup element.
60
68
  The auro-tabpanel element should only be used inside an AuroTabgroup element.
61
69
 
62
- ## Properties
70
+ ### Properties & Attributes
63
71
 
64
- | Property | Attribute | Type | Default |
65
- |----------|-----------|-----------|---------|
66
- | [hidden](#hidden) | `hidden` | `boolean` | "false" |
72
+ | Properties | Attributes | Type | Default | Description |
73
+ | ---------- | ---------- | ------- | ------- | -------------------------------------- |
74
+ | hidden | hidden | boolean | false | Indicates whether the panel is hidden. |
75
+
76
+ ### Methods
77
+
78
+ | Name | Parameters | Return | Description |
79
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
80
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
67
81
  <!-- AURO-GENERATED-CONTENT:END -->
68
82
 
69
83
  ## API Examples
@@ -73,7 +87,7 @@ The auro-tabpanel element should only be used inside an AuroTabgroup element.
73
87
  <div class="exampleWrapper">
74
88
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
75
89
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
76
- <auro-tabgroup variant="unstyled">>
90
+ <auro-tabgroup variant="unstyled">
77
91
  <div slot="tabs">
78
92
  <auro-tab>
79
93
  Baggage Info
@@ -104,7 +118,7 @@ The auro-tabpanel element should only be used inside an AuroTabgroup element.
104
118
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
105
119
 
106
120
  ```html
107
- <auro-tabgroup variant="unstyled">>
121
+ <auro-tabgroup variant="unstyled">
108
122
  <div slot="tabs">
109
123
  <auro-tab>
110
124
  Baggage Info
@@ -310,14 +324,12 @@ export function removeListener() {
310
324
 
311
325
  ### Slot Examples
312
326
 
313
- #### <a name="tab"></a>`tab`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a> - `tabpanel`
314
-
315
- `<auro-tab slot=tab>` & `<auro-tabpanel slot=tabpanel>` needs to be sibling next to each other to be linked.
327
+ #### <a name="tabs"></a>`tabs`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a> - `panels`
316
328
 
317
329
  <div class="exampleWrapper">
318
330
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
319
331
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
320
- <auro-tabgroup variant="unstyled">>
332
+ <auro-tabgroup variant="unstyled">
321
333
  <div slot="tabs">
322
334
  <auro-tab>
323
335
  Baggage Info
@@ -348,7 +360,7 @@ export function removeListener() {
348
360
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
349
361
 
350
362
  ```html
351
- <auro-tabgroup variant="unstyled">>
363
+ <auro-tabgroup variant="unstyled">
352
364
  <div slot="tabs">
353
365
  <auro-tab>
354
366
  Baggage Info
@@ -373,4 +385,73 @@ export function removeListener() {
373
385
  </auro-tabgroup>
374
386
  ```
375
387
  <!-- AURO-GENERATED-CONTENT:END -->
388
+ </auro-accordion>
389
+
390
+ ### Visual State on Dark Background
391
+
392
+ Set when the tabgroup is used on a dark background.
393
+
394
+ <div class="exampleWrapper--ondark">
395
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
396
+ <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
397
+ <div style="color: white;">
398
+ <auro-tabgroup variant="unstyled" appearance="inverse">
399
+ <div slot="tabs">
400
+ <auro-tab>
401
+ Baggage Info
402
+ </auro-tab>
403
+ <auro-tab>
404
+ Help
405
+ </auro-tab>
406
+ <auro-tab>
407
+ More
408
+ </auro-tab>
409
+ <auro-tab>
410
+ No Panel
411
+ </auro-tab>
412
+ </div>
413
+ <div slot="panels">
414
+ <auro-tabpanel>
415
+ <span>Tab 1 Content</span>
416
+ </auro-tabpanel>
417
+ <auro-tabpanel><span>Tab 2 Content</span></auro-tabpanel>
418
+ <auro-tabpanel><span>Tab 3 Content</span></auro-tabpanel>
419
+ </div>
420
+ </auro-tabgroup>
421
+ </div>
422
+ <!-- AURO-GENERATED-CONTENT:END -->
423
+ </div>
424
+ <auro-accordion lowProfile justifyRight>
425
+ <span slot="trigger">See code</span>
426
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inverseAppearance.html) -->
427
+ <!-- The below code snippet is automatically added from ./../apiExamples/inverseAppearance.html -->
428
+
429
+ ```html
430
+ <div style="color: white;">
431
+ <auro-tabgroup variant="unstyled" appearance="inverse">
432
+ <div slot="tabs">
433
+ <auro-tab>
434
+ Baggage Info
435
+ </auro-tab>
436
+ <auro-tab>
437
+ Help
438
+ </auro-tab>
439
+ <auro-tab>
440
+ More
441
+ </auro-tab>
442
+ <auro-tab>
443
+ No Panel
444
+ </auro-tab>
445
+ </div>
446
+ <div slot="panels">
447
+ <auro-tabpanel>
448
+ <span>Tab 1 Content</span>
449
+ </auro-tabpanel>
450
+ <auro-tabpanel><span>Tab 2 Content</span></auro-tabpanel>
451
+ <auro-tabpanel><span>Tab 3 Content</span></auro-tabpanel>
452
+ </div>
453
+ </auro-tabgroup>
454
+ </div>
455
+ ```
456
+ <!-- AURO-GENERATED-CONTENT:END -->
376
457
  </auro-accordion>