@api-client/ui 0.3.1 → 0.3.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 (59) hide show
  1. package/build/src/elements/environment/EnvironmentEditor.d.ts.map +1 -1
  2. package/build/src/elements/environment/EnvironmentEditor.js +8 -6
  3. package/build/src/elements/environment/EnvironmentEditor.js.map +1 -1
  4. package/build/src/elements/har/HarViewer.d.ts.map +1 -1
  5. package/build/src/elements/har/HarViewer.js +13 -15
  6. package/build/src/elements/har/HarViewer.js.map +1 -1
  7. package/build/src/elements/http/RequestEditor.d.ts +2 -1
  8. package/build/src/elements/http/RequestEditor.d.ts.map +1 -1
  9. package/build/src/elements/http/RequestEditor.js +17 -12
  10. package/build/src/elements/http/RequestEditor.js.map +1 -1
  11. package/build/src/elements/http/RequestLog.d.ts.map +1 -1
  12. package/build/src/elements/http/RequestLog.js +34 -8
  13. package/build/src/elements/http/RequestLog.js.map +1 -1
  14. package/build/src/md/button/internals/button.styles.js +4 -4
  15. package/build/src/md/button/internals/button.styles.js.map +1 -1
  16. package/build/src/md/motion/animation.d.ts +5 -3
  17. package/build/src/md/motion/animation.d.ts.map +1 -1
  18. package/build/src/md/motion/animation.js +4 -2
  19. package/build/src/md/motion/animation.js.map +1 -1
  20. package/build/src/md/ripple/internals/ripple.styles.d.ts.map +1 -1
  21. package/build/src/md/ripple/internals/ripple.styles.js +20 -8
  22. package/build/src/md/ripple/internals/ripple.styles.js.map +1 -1
  23. package/build/src/md/tabs/internals/Tab.d.ts +25 -9
  24. package/build/src/md/tabs/internals/Tab.d.ts.map +1 -1
  25. package/build/src/md/tabs/internals/Tab.js +122 -53
  26. package/build/src/md/tabs/internals/Tab.js.map +1 -1
  27. package/build/src/md/tabs/internals/Tab.styles.d.ts.map +1 -1
  28. package/build/src/md/tabs/internals/Tab.styles.js +69 -64
  29. package/build/src/md/tabs/internals/Tab.styles.js.map +1 -1
  30. package/build/src/md/tabs/internals/Tabs.d.ts +52 -54
  31. package/build/src/md/tabs/internals/Tabs.d.ts.map +1 -1
  32. package/build/src/md/tabs/internals/Tabs.js +270 -330
  33. package/build/src/md/tabs/internals/Tabs.js.map +1 -1
  34. package/build/src/md/tabs/internals/Tabs.styles.d.ts.map +1 -1
  35. package/build/src/md/tabs/internals/Tabs.styles.js +13 -17
  36. package/build/src/md/tabs/internals/Tabs.styles.js.map +1 -1
  37. package/build/src/md/text-field/internals/common.styles.d.ts.map +1 -1
  38. package/build/src/md/text-field/internals/common.styles.js +0 -3
  39. package/build/src/md/text-field/internals/common.styles.js.map +1 -1
  40. package/build/src/styles/m3/native.css +270 -0
  41. package/build/src/styles/m3/theme.css +155 -0
  42. package/build/src/styles/m3/tokens.css +512 -0
  43. package/demo/md/tabs/tabs.html +19 -0
  44. package/demo/md/tabs/tabs.ts +133 -83
  45. package/package.json +20 -4
  46. package/scripts/copy-assets.js +21 -0
  47. package/src/elements/environment/EnvironmentEditor.ts +8 -6
  48. package/src/elements/har/HarViewer.ts +13 -15
  49. package/src/elements/http/RequestEditor.ts +18 -13
  50. package/src/elements/http/RequestLog.ts +34 -8
  51. package/src/md/button/internals/button.styles.ts +4 -4
  52. package/src/md/motion/animation.ts +4 -2
  53. package/src/md/ripple/internals/ripple.styles.ts +20 -8
  54. package/src/md/tabs/internals/Tab.styles.ts +69 -64
  55. package/src/md/tabs/internals/Tab.ts +126 -43
  56. package/src/md/tabs/internals/Tabs.styles.ts +13 -17
  57. package/src/md/tabs/internals/Tabs.ts +259 -305
  58. package/src/md/text-field/internals/common.styles.ts +0 -3
  59. package/test/elements/har/HarViewerElement.test.ts +1 -55
package/demo/md/tabs/tabs.html CHANGED
@@ -11,6 +11,25 @@
11
11
  .demo-row {
12
12
  margin: 20px 0;
13
13
  }
14
+
15
+ .demo .demo-section {
16
+ max-width: 858px;
17
+ margin: 0 auto 80px auto;
18
+ }
19
+
20
+ .demo h2, .demo h3 {
21
+ margin-bottom: 36px;
22
+ }
23
+
24
+ .frame {
25
+ padding: 40px;
26
+ border-radius: 20px;
27
+ border: 1px var(--md-sys-color-outline) solid;
28
+ }
29
+
30
+ .scrollable {
31
+ max-width: 700px;
32
+ }
14
33
  </style>
15
34
  </head>
16
35
  <body>
package/demo/md/tabs/tabs.ts CHANGED
@@ -7,6 +7,10 @@ import { iconWrapper } from '../../../src/md/icons/Icons.js'
7
7
  import { reactive } from '../../../src/decorators/index.js'
8
8
  import { TabSelectionDetail } from '../../../src/md/tabs/internals/Tabs.js'
9
9
 
10
+ import '@material/web/tabs/primary-tab.js'
11
+ import '@material/web/tabs/secondary-tab.js'
12
+ import '@material/web/tabs/tabs.js'
13
+
10
14
  const travelIcon = iconWrapper(
11
15
  svg`<path d="M8.5 22v-1.5l2-1.5v-5.5L2 16v-2l8.5-5V3.5q0-.625.438-1.062Q11.375 2 12 2t1.062.438q.438.437.438 1.062V9l8.5 5v2l-8.5-2.5V19l2 1.5V22L12 21Z"/>`
12
16
  )
@@ -31,14 +35,16 @@ class ComponentDemoPage extends DemoPage {
31
35
 
32
36
  @reactive() accessor selected4 = 'cars4'
33
37
 
34
- handleSelect(e: CustomEvent): void {
38
+ @reactive() accessor selected5 = 'travel5'
39
+
40
+ handleTabsChange(e: CustomEvent): void {
35
41
  const info = e.detail as TabSelectionDetail
36
42
  console.log(info)
37
43
  const property = (e.target as HTMLElement).dataset.property as 'selected1' | undefined
38
44
  if (!property) {
39
45
  return
40
46
  }
41
- this[property] = info.select as string
47
+ this[property] = info.item.getAttribute('aria-controls') || ''
42
48
  }
43
49
 
44
50
  contentTemplate(): TemplateResult {
@@ -52,19 +58,22 @@ class ComponentDemoPage extends DemoPage {
52
58
  const { selected1 } = this
53
59
  return html`
54
60
  <section class="demo-section">
55
- <h2 class="title-large">Primary tabs</h2>
56
- <ui-tabs .selected="${selected1}" data-property="selected1" @select="${this.handleSelect}">
57
- <ui-tab aria-controls="travel1">Travel</ui-tab>
58
- <ui-tab aria-controls="hotel1">Hotel</ui-tab>
59
- <ui-tab aria-controls="travelHotel1">Travel + Hotel</ui-tab>
60
- <ui-tab aria-controls="cars1">Cars</ui-tab>
61
- </ui-tabs>
62
-
63
- <div class="page">
64
- <p id="travel1" ?hidden="${selected1 !== 'travel1'}">Travel page</p>
65
- <p id="hotel1" ?hidden="${selected1 !== 'hotel1'}">Hotel page</p>
66
- <p id="travelHotel1" ?hidden="${selected1 !== 'travelHotel1'}">Hotel & travel page</p>
67
- <p id="cars1" ?hidden="${selected1 !== 'cars1'}">Cars page</p>
61
+ <h2 class="display-large">Primary tabs</h2>
62
+
63
+ <div class="frame">
64
+ <ui-tabs data-property="selected1" @change="${this.handleTabsChange}">
65
+ <ui-tab aria-controls="travel1">Travel</ui-tab>
66
+ <ui-tab aria-controls="hotel1">Hotel</ui-tab>
67
+ <ui-tab aria-controls="travelHotel1">Travel + Hotel</ui-tab>
68
+ <ui-tab aria-controls="cars1">Cars</ui-tab>
69
+ </ui-tabs>
70
+
71
+ <div class="page">
72
+ <p id="travel1" ?hidden="${selected1 !== 'travel1'}">Travel page</p>
73
+ <p id="hotel1" ?hidden="${selected1 !== 'hotel1'}">Hotel page</p>
74
+ <p id="travelHotel1" ?hidden="${selected1 !== 'travelHotel1'}">Hotel & travel page</p>
75
+ <p id="cars1" ?hidden="${selected1 !== 'cars1'}">Cars page</p>
76
+ </div>
68
77
  </div>
69
78
  </section>
70
79
  `
@@ -74,90 +83,131 @@ class ComponentDemoPage extends DemoPage {
74
83
  const { selected2 } = this
75
84
  return html`
76
85
  <section class="demo-section">
77
- <h2 class="title-large">Secondary tabs</h2>
78
- <ui-tabs priority="secondary" .selected="${selected2}" data-property="selected2" @select="${this.handleSelect}">
79
- <ui-tab aria-controls="travel2">Travel</ui-tab>
80
- <ui-tab aria-controls="hotel2">Hotel</ui-tab>
81
- <ui-tab aria-controls="travelHotel2">Travel + Hotel</ui-tab>
82
- <ui-tab aria-controls="cars2">Cars</ui-tab>
83
- </ui-tabs>
84
-
85
- <div class="page">
86
- <p id="travel2" ?hidden="${selected2 !== 'travel2'}">Travel page</p>
87
- <p id="hotel2" ?hidden="${selected2 !== 'hotel2'}">Hotel page</p>
88
- <p id="travelHotel2" ?hidden="${selected2 !== 'travelHotel2'}">Hotel & travel page</p>
89
- <p id="cars2" ?hidden="${selected2 !== 'cars2'}">Cars page</p>
86
+ <h2 class="display-large">Secondary tabs</h2>
87
+
88
+ <div class="frame">
89
+ <ui-tabs priority="secondary" data-property="selected2" @change="${this.handleTabsChange}">
90
+ <ui-tab aria-controls="travel2">Travel</ui-tab>
91
+ <ui-tab aria-controls="hotel2" selected>Hotel</ui-tab>
92
+ <ui-tab aria-controls="travelHotel2">Travel + Hotel</ui-tab>
93
+ <ui-tab aria-controls="cars2">Cars</ui-tab>
94
+ </ui-tabs>
95
+
96
+ <div class="page">
97
+ <p id="travel2" ?hidden="${selected2 !== 'travel2'}">Travel page</p>
98
+ <p id="hotel2" ?hidden="${selected2 !== 'hotel2'}">Hotel page</p>
99
+ <p id="travelHotel2" ?hidden="${selected2 !== 'travelHotel2'}">Hotel & travel page</p>
100
+ <p id="cars2" ?hidden="${selected2 !== 'cars2'}">Cars page</p>
101
+ </div>
90
102
  </div>
91
103
  </section>
92
104
  `
93
105
  }
94
106
 
95
107
  renderIconTabs(): TemplateResult {
96
- const { selected3 } = this
108
+ const { selected3, selected4 } = this
97
109
  return html`
98
110
  <section class="demo-section">
99
- <h2 class="title-large">Icon tabs</h2>
100
- <ui-tabs .selected="${selected3}" data-property="selected3" @select="${this.handleSelect}">
101
- <ui-tab aria-controls="travel3">
102
- <ui-icon slot="icon">${travelIcon}</ui-icon>
103
- Travel
104
- </ui-tab>
105
- <ui-tab aria-controls="hotel3">
106
- <ui-icon slot="icon">${hotelIcon}</ui-icon>
107
- Hotel
108
- </ui-tab>
109
- <ui-tab aria-controls="travelHotel3">
110
- <ui-icon slot="icon">${cityIcon}</ui-icon>
111
- Travel + Hotel
112
- </ui-tab>
113
- <ui-tab aria-controls="cars3">
114
- <ui-icon slot="icon">${taxiIcon}</ui-icon>
115
- Cars
116
- </ui-tab>
117
- </ui-tabs>
118
-
119
- <div class="page">
120
- <p id="travel3" ?hidden="${selected3 !== 'travel3'}">Travel page</p>
121
- <p id="hotel3" ?hidden="${selected3 !== 'hotel3'}">Hotel page</p>
122
- <p id="travelHotel3" ?hidden="${selected3 !== 'travelHotel3'}">Hotel & travel page</p>
123
- <p id="cars3" ?hidden="${selected3 !== 'cars3'}">Cars page</p>
111
+ <h2 class="display-large">Primary icon tabs</h2>
112
+ <div class="frame">
113
+ <ui-tabs data-property="selected3" @change="${this.handleTabsChange}">
114
+ <ui-tab aria-controls="travel3">
115
+ <ui-icon slot="icon">${travelIcon}</ui-icon>
116
+ Travel
117
+ </ui-tab>
118
+ <ui-tab aria-controls="hotel3">
119
+ <ui-icon slot="icon">${hotelIcon}</ui-icon>
120
+ Hotel
121
+ </ui-tab>
122
+ <ui-tab aria-controls="travelHotel3" selected>
123
+ <ui-icon slot="icon">${cityIcon}</ui-icon>
124
+ Travel + Hotel
125
+ </ui-tab>
126
+ <ui-tab aria-controls="cars3">
127
+ <ui-icon slot="icon">${taxiIcon}</ui-icon>
128
+ Cars
129
+ </ui-tab>
130
+ </ui-tabs>
131
+ <div class="page">
132
+ <p id="travel3" ?hidden="${selected3 !== 'travel3'}">Travel page</p>
133
+ <p id="hotel3" ?hidden="${selected3 !== 'hotel3'}">Hotel page</p>
134
+ <p id="travelHotel3" ?hidden="${selected3 !== 'travelHotel3'}">Hotel & travel page</p>
135
+ <p id="cars3" ?hidden="${selected3 !== 'cars3'}">Cars page</p>
136
+ </div>
137
+ </div>
138
+ </section>
139
+ <section class="demo-section">
140
+ <h2 class="display-large">Secondary icon tabs</h2>
141
+
142
+ <div class="frame">
143
+ <ui-tabs priority="secondary" data-property="selected4" @change="${this.handleTabsChange}">
144
+ <ui-tab aria-controls="travel4">
145
+ <ui-icon slot="icon">${travelIcon}</ui-icon>
146
+ Travel
147
+ </ui-tab>
148
+ <ui-tab aria-controls="hotel4">
149
+ <ui-icon slot="icon">${hotelIcon}</ui-icon>
150
+ Hotel
151
+ </ui-tab>
152
+ <ui-tab aria-controls="travelHotel4">
153
+ <ui-icon slot="icon">${cityIcon}</ui-icon>
154
+ Travel + Hotel
155
+ </ui-tab>
156
+ <ui-tab aria-controls="cars4" selected>
157
+ <ui-icon slot="icon">${taxiIcon}</ui-icon>
158
+ Cars
159
+ </ui-tab>
160
+ </ui-tabs>
161
+ <div class="page">
162
+ <p id="travel4" ?hidden="${selected4 !== 'travel4'}">Travel page</p>
163
+ <p id="hotel4" ?hidden="${selected4 !== 'hotel4'}">Hotel page</p>
164
+ <p id="travelHotel4" ?hidden="${selected4 !== 'travelHotel4'}">Hotel & travel page</p>
165
+ <p id="cars4" ?hidden="${selected4 !== 'cars4'}">Cars page</p>
166
+ </div>
124
167
  </div>
125
168
  </section>
126
169
  `
127
170
  }
128
171
 
129
172
  renderScrollableDemo(): TemplateResult {
130
- const { selected4 } = this
173
+ const { selected5 } = this
131
174
  return html`
132
175
  <section class="demo-section">
133
- <h2 class="title-large">Scrollable tabs</h2>
134
- <ui-tabs .selected="${selected4}" scrollable data-property="selected4" @select="${this.handleSelect}">
135
- <ui-tab aria-controls="travel4">Travel</ui-tab>
136
- <ui-tab aria-controls="hotel4">Hotel</ui-tab>
137
- <ui-tab aria-controls="travelHotel4">Travel + Hotel</ui-tab>
138
- <ui-tab aria-controls="cars4">Cars</ui-tab>
139
-
140
- <ui-tab aria-controls="travel41">Travel (1)</ui-tab>
141
- <ui-tab aria-controls="hotel41">Hotel (1)</ui-tab>
142
- <ui-tab aria-controls="travelHotel41">Travel + Hotel (1)</ui-tab>
143
- <ui-tab aria-controls="cars41" disabled>Cars (1)</ui-tab>
144
-
145
- <ui-tab aria-controls="travel42">Travel (2)</ui-tab>
146
- <ui-tab aria-controls="hotel42">Hotel (2)</ui-tab>
147
- <ui-tab aria-controls="travelHotel42">Travel + Hotel (2)</ui-tab>
148
- <ui-tab aria-controls="cars42">Cars (2)</ui-tab>
149
- </ui-tabs>
150
-
151
- <div class="page">
152
- <p id="travel4" ?hidden="${selected4 !== 'travel4'}">Travel page</p>
153
- <p id="hotel4" ?hidden="${selected4 !== 'hotel4'}">Hotel page</p>
154
- <p id="travelHotel4" ?hidden="${selected4 !== 'travelHotel4'}">Hotel & travel page</p>
155
- <p id="cars4" ?hidden="${selected4 !== 'cars4'}">Cars page</p>
156
-
157
- <p id="travel41" ?hidden="${selected4 !== 'travel41'}">Travel page (1)</p>
158
- <p id="hotel41" ?hidden="${selected4 !== 'hotel41'}">Hotel page (1)</p>
159
- <p id="travelHotel41" ?hidden="${selected4 !== 'travelHotel41'}">Hotel & travel page (1)</p>
160
- <p id="cars41" ?hidden="${selected4 !== 'cars41'}">Cars page (1)</p>
176
+ <h2 class="display-large">Scrollable tabs</h2>
177
+ <div class="frame scrollable">
178
+ <ui-tabs data-property="selected5" @change="${this.handleTabsChange}">
179
+ <ui-tab aria-controls="travel5" selected>Travel</ui-tab>
180
+ <ui-tab aria-controls="hotel5">Hotel</ui-tab>
181
+ <ui-tab aria-controls="travelHotel5">Travel + Hotel</ui-tab>
182
+ <ui-tab aria-controls="cars5" disabled>Cars</ui-tab>
183
+
184
+ <ui-tab aria-controls="travel51">Travel (1)</ui-tab>
185
+ <ui-tab aria-controls="hotel51">Hotel (1)</ui-tab>
186
+ <ui-tab aria-controls="travelHotel51">Travel + Hotel (1)</ui-tab>
187
+ <ui-tab aria-controls="cars51" disabled>Cars (1)</ui-tab>
188
+
189
+ <ui-tab aria-controls="travel52">Travel (2)</ui-tab>
190
+ <ui-tab aria-controls="hotel52">Hotel (2)</ui-tab>
191
+ <ui-tab aria-controls="travelHotel52">Travel + Hotel (2)</ui-tab>
192
+ <ui-tab aria-controls="cars52" disabled>Cars (2)</ui-tab>
193
+ </ui-tabs>
194
+
195
+ <div class="page">
196
+ <p id="travel5" ?hidden="${selected5 !== 'travel5'}">Travel page</p>
197
+ <p id="hotel5" ?hidden="${selected5 !== 'hotel5'}">Hotel page</p>
198
+ <p id="travelHotel5" ?hidden="${selected5 !== 'travelHotel5'}">Hotel & travel page</p>
199
+ <p id="cars5" ?hidden="${selected5 !== 'cars5'}">Cars page</p>
200
+
201
+ <p id="travel51" ?hidden="${selected5 !== 'travel51'}">Travel page (1)</p>
202
+ <p id="hotel51" ?hidden="${selected5 !== 'hotel51'}">Hotel page (1)</p>
203
+ <p id="travelHotel51" ?hidden="${selected5 !== 'travelHotel51'}">Hotel & travel page (1)</p>
204
+ <p id="cars51" ?hidden="${selected5 !== 'cars51'}">Cars page (1)</p>
205
+
206
+ <p id="travel52" ?hidden="${selected5 !== 'travel52'}">Travel page (2)</p>
207
+ <p id="hotel52" ?hidden="${selected5 !== 'hotel52'}">Hotel page (2)</p>
208
+ <p id="travelHotel52" ?hidden="${selected5 !== 'travelHotel52'}">Hotel & travel page (2)</p>
209
+ <p id="cars52" ?hidden="${selected5 !== 'cars52'}">Cars page (2)</p>
210
+ </div>
161
211
  </div>
162
212
  </section>
163
213
  `
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@api-client/ui",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "description": "Internal UI component library for the API Client ecosystem.",
5
5
  "license": "UNLICENSED",
6
6
  "main": "build/src/index.js",
@@ -57,7 +57,8 @@
57
57
  "./types/*": "./build/src/types/*"
58
58
  },
59
59
  "scripts": {
60
- "build": "npm run tsc && npm run lint",
60
+ "build": "wireit",
61
+ "copy-assets": "wireit",
61
62
  "lint": "npm run lint:prettier && npm run lint:eslint",
62
63
  "lint:eslint": "wireit",
63
64
  "lint:prettier": "wireit",
@@ -73,6 +74,17 @@
73
74
  "tsc:all": "wireit"
74
75
  },
75
76
  "wireit": {
77
+ "build": {
78
+ "command": "npm run copy-assets",
79
+ "dependencies": [
80
+ "tsc",
81
+ "lint:prettier",
82
+ "lint:eslint"
83
+ ]
84
+ },
85
+ "copy-assets": {
86
+ "command": "node scripts/copy-assets.js"
87
+ },
76
88
  "lint:eslint": {
77
89
  "command": "eslint --color --cache --cache-location .eslintcache .",
78
90
  "files": [
@@ -97,11 +109,15 @@
97
109
  },
98
110
  "test": {
99
111
  "command": "wtr --playwright --browsers chromium",
100
- "dependencies": ["tsc:all"]
112
+ "dependencies": [
113
+ "tsc:all"
114
+ ]
101
115
  },
102
116
  "test:coverage": {
103
117
  "command": "wtr --playwright --browsers chromium --coverage",
104
- "dependencies": ["tsc:all"]
118
+ "dependencies": [
119
+ "tsc:all"
120
+ ]
105
121
  },
106
122
  "tsc:all": {
107
123
  "command": "tsc --project tsconfig.all.json",
package/scripts/copy-assets.js ADDED
@@ -0,0 +1,21 @@
1
+ import { copyFile, mkdir } from 'node:fs/promises';
2
+ import { join } from 'node:path';
3
+
4
+ async function copyStyles() {
5
+ const src = join('src', 'styles', 'm3');
6
+ const dest = join('build', 'src', 'styles', 'm3');
7
+ const files = [
8
+ 'native.css',
9
+ 'theme.css',
10
+ 'tokens.css',
11
+ ];
12
+ await mkdir(dest, { recursive: true });
13
+ await Promise.all(
14
+ files.map(async (name) => {
15
+ const destFile = join(dest, name);
16
+ await copyFile(join(src, name), destFile);
17
+ })
18
+ );
19
+ }
20
+
21
+ await copyStyles();
package/src/elements/environment/EnvironmentEditor.ts CHANGED
@@ -220,8 +220,7 @@ export default class EnvironmentEditor extends ApiElement {
220
220
  }
221
221
 
222
222
  protected handleTabSelection(e: CustomEvent<TabSelectionDetail>): void {
223
- const { item } = e.detail
224
- const { page } = item.dataset
223
+ const { page } = e.detail.item.dataset
225
224
  if (!page) {
226
225
  return
227
226
  }
@@ -524,11 +523,14 @@ export default class EnvironmentEditor extends ApiElement {
524
523
  }
525
524
 
526
525
  protected renderTabs(): TemplateResult {
526
+ const { selected: s } = this
527
527
  return html`
528
- <ui-tabs .selected="${this.selected}" @select="${this.handleTabSelection}">
529
- <ui-tab aria-controls="server" data-page="server">Server</ui-tab>
530
- <ui-tab aria-controls="variables" data-page="variables">Variables</ui-tab>
531
- <ui-tab aria-controls="authorization" data-page="authorization">Authorization</ui-tab>
528
+ <ui-tabs @select="${this.handleTabSelection}">
529
+ <ui-tab .selected="${s === 'server'}" aria-controls="server" data-page="server">Server</ui-tab>
530
+ <ui-tab .selected="${s === 'variables'}" aria-controls="variables" data-page="variables">Variables</ui-tab>
531
+ <ui-tab .selected="${s === 'authorization'}" aria-controls="authorization" data-page="authorization"
532
+ >Authorization</ui-tab
533
+ >
532
534
  </ui-tabs>
533
535
  `
534
536
  }
package/src/elements/har/HarViewer.ts CHANGED
@@ -456,12 +456,12 @@ export default class HarViewer extends ApiElement {
456
456
  * Handler for the list item selection event.
457
457
  */
458
458
  protected handleDetailsTabSelection(e: CustomEvent<TabSelectionDetail>): void {
459
- const { select } = e.detail
459
+ const { selected } = e.detail.item.dataset
460
460
  const { entry } = (e.target as UiTabs).dataset
461
- if (!select || !entry) {
461
+ if (!selected || !entry) {
462
462
  return
463
463
  }
464
- this.selectedTabs.set(entry, select as HarTab)
464
+ this.selectedTabs.set(entry, selected as HarTab)
465
465
  this.requestUpdate()
466
466
  }
467
467
 
@@ -687,18 +687,16 @@ export default class HarViewer extends ApiElement {
687
687
  const hasResponseCookies = Array.isArray(responseCookies) && !!responseCookies.length
688
688
  const hasCookies = hasRequestCookies || hasResponseCookies
689
689
  return html`
690
- <ui-tabs
691
- priority="secondary"
692
- selectedAttribute="data-selected"
693
- .selected="${selected}"
694
- @select="${this.handleDetailsTabSelection}"
695
- data-entry="${id}"
696
- >
697
- <ui-tab data-selected="${HarTab.request}">Request</ui-tab>
698
- <ui-tab data-selected="${HarTab.response}">Response</ui-tab>
699
- <ui-tab data-selected="${HarTab.requestContent}" ?hidden="${!hashRequestContent}">Request content</ui-tab>
700
- <ui-tab data-selected="${HarTab.responseContent}" ?hidden="${!hashResponseContent}">Response content</ui-tab>
701
- <ui-tab data-selected="${HarTab.cookies}" ?hidden="${!hasCookies}">Cookies</ui-tab>
690
+ <ui-tabs priority="secondary" @change="${this.handleDetailsTabSelection}" data-entry="${id}">
691
+ <ui-tab .selected="${selected === HarTab.request}" data-selected="${HarTab.request}">Request</ui-tab>
692
+ <ui-tab .selected="${selected === HarTab.response}" data-selected="${HarTab.response}">Response</ui-tab>
693
+ <ui-tab .selected="${selected === HarTab.requestContent}" ?hidden="${!hashRequestContent}"
694
+ >Request content</ui-tab
695
+ >
696
+ <ui-tab .selected="${selected === HarTab.responseContent}" ?hidden="${!hashResponseContent}"
697
+ >Response content</ui-tab
698
+ >
699
+ <ui-tab .selected="${selected === HarTab.cookies}" ?hidden="${!hasCookies}">Cookies</ui-tab>
702
700
  </ui-tabs>
703
701
  `
704
702
  }
package/src/elements/http/RequestEditor.ts CHANGED
@@ -481,9 +481,8 @@ export default class RequestEditor extends ApiElement {
481
481
  this.computeSnippetsRequest()
482
482
  }
483
483
 
484
- protected handleTabSelect(e: CustomEvent): void {
485
- const info = e.detail as TabSelectionDetail
486
- this.selectedTab = info.select as SelectedTab
484
+ protected handleTabSelect(e: CustomEvent<TabSelectionDetail>): void {
485
+ this.selectedTab = e.detail.item.getAttribute('aria-controls') as SelectedTab
487
486
  if (this.ui) {
488
487
  this.ui.selectedEditor = this.selectedTab
489
488
  this.notifyPropertyChanged('ui', this.ui)
@@ -828,16 +827,22 @@ export default class RequestEditor extends ApiElement {
828
827
  protected renderTabs(): TemplateResult {
829
828
  const { isPayload, selectedTab } = this
830
829
  // ui && ui.selectedEditor ||
831
- const selected = selectedTab
832
- return html` <ui-tabs .selected="${selected}" @select="${this.handleTabSelect}" class="editor-tabs">
833
- <ui-tab aria-controls="parameters" id="parameters-tab">Parameters</ui-tab>
834
- <ui-tab aria-controls="headers" id="headers-tab">Headers</ui-tab>
835
- <ui-tab ?hidden="${!isPayload}" aria-controls="payload" id="payload-tab">Body</ui-tab>
836
- <ui-tab aria-controls="authorization" id="authorization-tab">Authorization</ui-tab>
837
- <ui-tab aria-controls="flows" id="flows-tab">Flows</ui-tab>
838
- <ui-tab aria-controls="assertions" id="assertions-tab">Assertions</ui-tab>
839
- <ui-tab aria-controls="config" id="config-tab">Config</ui-tab>
840
- <ui-tab aria-controls="code-snippets" id="code-snippets-tab">Code snippets</ui-tab>
830
+ const s = selectedTab
831
+ return html` <ui-tabs @select="${this.handleTabSelect}" class="editor-tabs">
832
+ <ui-tab .selected="${s === 'parameters'}" aria-controls="parameters" id="parameters-tab">Parameters</ui-tab>
833
+ <ui-tab .selected="${s === 'headers'}" aria-controls="headers" id="headers-tab">Headers</ui-tab>
834
+ <ui-tab ?hidden="${!isPayload}" .selected="${s === 'payload'}" aria-controls="payload" id="payload-tab"
835
+ >Body</ui-tab
836
+ >
837
+ <ui-tab .selected="${s === 'authorization'}" aria-controls="authorization" id="authorization-tab"
838
+ >Authorization</ui-tab
839
+ >
840
+ <ui-tab .selected="${s === 'flows'}" aria-controls="flows" id="flows-tab">Flows</ui-tab>
841
+ <ui-tab .selected="${s === 'assertions'}" aria-controls="assertions" id="assertions-tab">Assertions</ui-tab>
842
+ <ui-tab .selected="${s === 'config'}" aria-controls="config" id="config-tab">Config</ui-tab>
843
+ <ui-tab .selected="${s === 'code-snippets'}" aria-controls="code-snippets" id="code-snippets-tab"
844
+ >Code snippets</ui-tab
845
+ >
841
846
  </ui-tabs>`
842
847
  }
843
848
 
package/src/elements/http/RequestLog.ts CHANGED
@@ -162,7 +162,7 @@ export default class RequestLog extends ApiElement {
162
162
  }
163
163
 
164
164
  protected handleViewSelect(e: CustomEvent<TabSelectionDetail>): void {
165
- const key = e.detail.select as RequestLogView | undefined
165
+ const key = e.detail.item.getAttribute('aria-controls') as RequestLogView | undefined
166
166
  if (!key) {
167
167
  return
168
168
  }
@@ -175,12 +175,19 @@ export default class RequestLog extends ApiElement {
175
175
  }
176
176
 
177
177
  protected renderTabs(effectiveLog?: CoreRequestLog): TemplateResult {
178
- const { view: selected = 'headers' } = this
178
+ const { view: s = 'headers' } = this
179
179
  return html`
180
- <ui-tabs .selected="${selected}" @select="${this.handleViewSelect}">
181
- <ui-tab aria-controls="headers" id="headers-tab" title="Request and response header">Headers</ui-tab>
180
+ <ui-tabs @select="${this.handleViewSelect}">
181
+ <ui-tab
182
+ .selected="${s === 'headers'}"
183
+ aria-controls="headers"
184
+ id="headers-tab"
185
+ title="Request and response header"
186
+ >Headers</ui-tab
187
+ >
182
188
  <ui-tab
183
189
  ?hidden="${!this.hasRequestPayload}"
190
+ .selected="${s === 'payload'}"
184
191
  aria-controls="payload"
185
192
  id="payload-tab"
186
193
  title="Request payload set to server"
@@ -188,15 +195,34 @@ export default class RequestLog extends ApiElement {
188
195
  >
189
196
  <ui-tab
190
197
  ?hidden="${!this.hasResponsePayload}"
198
+ .selected="${s === 'preview'}"
191
199
  aria-controls="preview"
192
200
  id="preview-tab"
193
201
  title="Formatted view of the response"
194
202
  >Preview</ui-tab
195
203
  >
196
- <ui-tab aria-controls="response" id="response-tab" title="Unformatted view of the response">Response</ui-tab>
197
- <ui-tab aria-controls="timings" id="timings-tab" title="Request detailed timings">Timings</ui-tab>
198
- <ui-tab aria-controls="redirects" id="redirects-tab" title="Detailed redirect information">Redirects</ui-tab>
199
- <ui-tab aria-controls="assertions" id="assertions-tab" title="HTTP assertions result"
204
+ <ui-tab
205
+ .selected="${s === 'response'}"
206
+ aria-controls="response"
207
+ id="response-tab"
208
+ title="Unformatted view of the response"
209
+ >Response</ui-tab
210
+ >
211
+ <ui-tab .selected="${s === 'timings'}" aria-controls="timings" id="timings-tab" title="Request detailed timings"
212
+ >Timings</ui-tab
213
+ >
214
+ <ui-tab
215
+ .selected="${s === 'redirects'}"
216
+ aria-controls="redirects"
217
+ id="redirects-tab"
218
+ title="Detailed redirect information"
219
+ >Redirects</ui-tab
220
+ >
221
+ <ui-tab
222
+ .selected="${s === 'assertions'}"
223
+ aria-controls="assertions"
224
+ id="assertions-tab"
225
+ title="HTTP assertions result"
200
226
  >Assertions ${this.renderAssertionsBadge(effectiveLog)}</ui-tab
201
227
  >
202
228
  </ui-tabs>
package/src/md/button/internals/button.styles.ts CHANGED
@@ -83,6 +83,10 @@ export default css`
83
83
  transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
84
84
  }
85
85
 
86
+ .ripple.activated {
87
+ z-index: 1;
88
+ }
89
+
86
90
  .focus-ring {
87
91
  --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));
88
92
  --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));
@@ -91,10 +95,6 @@ export default css`
91
95
  transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
92
96
  }
93
97
 
94
- .ripple.activated {
95
- z-index: 1;
96
- }
97
-
98
98
  /* Disabled state */
99
99
  :host([disabled]) {
100
100
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
package/src/md/motion/animation.ts CHANGED
@@ -9,9 +9,11 @@
9
9
  */
10
10
  export enum Easing {
11
11
  STANDARD = 'cubic-bezier(0.2, 0, 0, 1)',
12
- ACCELERATION = 'cubic-bezier(0.4, 0, 1, 1)',
13
- DECELERATION = 'cubic-bezier(0, 0, 0.2, 1)',
12
+ ACCELERATION = 'cubic-bezier(0.3, 0, 1, 1)',
13
+ DECELERATION = 'cubic-bezier(0, 0, 0, 1)',
14
14
  SHARP = 'cubic-bezier(0.4, 0, 0.6, 1)',
15
+ EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)',
16
+ EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)',
15
17
  }
16
18
 
17
19
  /**