@blockquote-web-components/blockquote-tabs 1.6.3 → 1.6.5
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.
package/README.md
CHANGED
|
@@ -90,7 +90,6 @@ Tabs are a set of layered sections of content, known as tab panels, that display
|
|
|
90
90
|
| `_requestFocusUpdate` | | | | | |
|
|
91
91
|
| `_scrollIntoView` | | | | | |
|
|
92
92
|
| `_scrollIntoViewWithOffset` | | | `tabScroller, behavior` | | |
|
|
93
|
-
| `_requestPropertyUpdate` | | | `prop` | | |
|
|
94
93
|
| `_onResizeObserverChange` | | | | | |
|
|
95
94
|
|
|
96
95
|
##### Events
|
|
@@ -169,20 +168,27 @@ Tabs are a set of layered sections of content, known as tab panels, that display
|
|
|
169
168
|
|
|
170
169
|
|
|
171
170
|
|
|
172
|
-
`<blockquote-
|
|
171
|
+
`<blockquote-tab>`
|
|
173
172
|
A tab element that can be used inside a `blockquote-tabs` element.
|
|
174
173
|
|
|
175
174
|
|
|
176
|
-
### `src/
|
|
175
|
+
### `src/tab/BlockquoteTab.js`:
|
|
177
176
|
|
|
178
|
-
#### class: `
|
|
177
|
+
#### class: `BlockquoteTab`, `blockquote-tab`
|
|
178
|
+
|
|
179
|
+
##### Mixins
|
|
180
|
+
|
|
181
|
+
| Name | Module | Package |
|
|
182
|
+
| ---------------------------- | ------ | -------------------------------------------------------- |
|
|
183
|
+
| `BlockquoteMixinSlotContent` | | @blockquote-web-components/blockquote-mixin-slot-content |
|
|
179
184
|
|
|
180
185
|
##### Fields
|
|
181
186
|
|
|
182
|
-
| Name | Privacy | Type | Default
|
|
183
|
-
| ---------------------- | ------- | --------- |
|
|
184
|
-
| `
|
|
185
|
-
| `
|
|
187
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
188
|
+
| ---------------------- | ------- | --------- | -------------------------------------------- | --------------------------------------- | -------------- |
|
|
189
|
+
| `_onSlotChanges` | | | | | |
|
|
190
|
+
| `selected` | public | `boolean` | `false` | Whether or not the tab is \`selected\`. | |
|
|
191
|
+
| `globalRootAttributes` | | `object` | `{ role: 'tab', slot: 'tab', tabindex: 0, }` | | |
|
|
186
192
|
|
|
187
193
|
##### Methods
|
|
188
194
|
|
|
@@ -200,33 +206,26 @@ A tab element that can be used inside a `blockquote-tabs` element.
|
|
|
200
206
|
|
|
201
207
|
#### Exports
|
|
202
208
|
|
|
203
|
-
| Kind | Name
|
|
204
|
-
| ---- |
|
|
205
|
-
| `js` | `
|
|
209
|
+
| Kind | Name | Declaration | Module | Package |
|
|
210
|
+
| ---- | --------------- | ------------- | ------------------------ | ------- |
|
|
211
|
+
| `js` | `BlockquoteTab` | BlockquoteTab | src/tab/BlockquoteTab.js | |
|
|
206
212
|
|
|
207
213
|
|
|
208
214
|
|
|
209
|
-
`<blockquote-
|
|
215
|
+
`<blockquote-tabpanel>`
|
|
210
216
|
A tab element that can be used inside a `blockquote-tabs` element.
|
|
211
217
|
|
|
212
218
|
|
|
213
|
-
### `src/
|
|
214
|
-
|
|
215
|
-
#### class: `BlockquoteTab`, `blockquote-tab`
|
|
216
|
-
|
|
217
|
-
##### Mixins
|
|
219
|
+
### `src/tabpanel/BlockquoteTabPanel.js`:
|
|
218
220
|
|
|
219
|
-
|
|
220
|
-
| ---------------------------- | ------ | -------------------------------------------------------- |
|
|
221
|
-
| `BlockquoteMixinSlotContent` | | @blockquote-web-components/blockquote-mixin-slot-content |
|
|
221
|
+
#### class: `BlockquoteTabPanel`, `blockquote-tabpanel`
|
|
222
222
|
|
|
223
223
|
##### Fields
|
|
224
224
|
|
|
225
|
-
| Name | Privacy | Type | Default
|
|
226
|
-
| ---------------------- | ------- | --------- |
|
|
227
|
-
| `
|
|
228
|
-
| `
|
|
229
|
-
| `globalRootAttributes` | | `object` | `{ role: 'tab', slot: 'tab', tabindex: 0, }` | | |
|
|
225
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
226
|
+
| ---------------------- | ------- | --------- | ------------------------------------------------------ | -------------------------------------------- | -------------- |
|
|
227
|
+
| `selected` | public | `boolean` | `false` | Whether or not the tabpanel is \`selected\`. | |
|
|
228
|
+
| `globalRootAttributes` | | `object` | `{ role: 'tabpanel', slot: 'tabpanel', tabindex: 0, }` | | |
|
|
230
229
|
|
|
231
230
|
##### Methods
|
|
232
231
|
|
|
@@ -244,11 +243,11 @@ A tab element that can be used inside a `blockquote-tabs` element.
|
|
|
244
243
|
|
|
245
244
|
#### Exports
|
|
246
245
|
|
|
247
|
-
| Kind | Name
|
|
248
|
-
| ---- |
|
|
249
|
-
| `js` | `
|
|
246
|
+
| Kind | Name | Declaration | Module | Package |
|
|
247
|
+
| ---- | -------------------- | ------------------ | ---------------------------------- | ------- |
|
|
248
|
+
| `js` | `BlockquoteTabPanel` | BlockquoteTabPanel | src/tabpanel/BlockquoteTabPanel.js | |
|
|
250
249
|
|
|
251
|
-
### `src/
|
|
250
|
+
### `src/tab/styles/blockquote-tab-styles.css.js`:
|
|
252
251
|
|
|
253
252
|
#### Variables
|
|
254
253
|
|
|
@@ -260,11 +259,11 @@ A tab element that can be used inside a `blockquote-tabs` element.
|
|
|
260
259
|
|
|
261
260
|
#### Exports
|
|
262
261
|
|
|
263
|
-
| Kind | Name | Declaration | Module
|
|
264
|
-
| ---- | -------- | ----------- |
|
|
265
|
-
| `js` | `styles` | styles | src/
|
|
262
|
+
| Kind | Name | Declaration | Module | Package |
|
|
263
|
+
| ---- | -------- | ----------- | ------------------------------------------- | ------- |
|
|
264
|
+
| `js` | `styles` | styles | src/tab/styles/blockquote-tab-styles.css.js | |
|
|
266
265
|
|
|
267
|
-
### `src/
|
|
266
|
+
### `src/tabpanel/styles/blockquote-tabpanel-styles.css.js`:
|
|
268
267
|
|
|
269
268
|
#### Variables
|
|
270
269
|
|
|
@@ -276,6 +275,6 @@ A tab element that can be used inside a `blockquote-tabs` element.
|
|
|
276
275
|
|
|
277
276
|
#### Exports
|
|
278
277
|
|
|
279
|
-
| Kind | Name | Declaration | Module
|
|
280
|
-
| ---- | -------- | ----------- |
|
|
281
|
-
| `js` | `styles` | styles | src/
|
|
278
|
+
| Kind | Name | Declaration | Module | Package |
|
|
279
|
+
| ---- | -------- | ----------- | ----------------------------------------------------- | ------- |
|
|
280
|
+
| `js` | `styles` | styles | src/tabpanel/styles/blockquote-tabpanel-styles.css.js | |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-tabs",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.5",
|
|
4
4
|
"description": "Webcomponent blockquote-tabs following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -139,19 +139,19 @@
|
|
|
139
139
|
]
|
|
140
140
|
},
|
|
141
141
|
"dependencies": {
|
|
142
|
-
"@blockquote-web-components/blockquote-mixin-slot-content": "^1.9.
|
|
142
|
+
"@blockquote-web-components/blockquote-mixin-slot-content": "^1.9.4",
|
|
143
143
|
"@juggle/resize-observer": "^3.4.0",
|
|
144
144
|
"@lit-labs/observers": "^2.0.6",
|
|
145
145
|
"lit": "^3.3.0"
|
|
146
146
|
},
|
|
147
147
|
"devDependencies": {
|
|
148
|
-
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.12.
|
|
149
|
-
"@blockquote-web-components/blockquote-base-embedded-webview": "^1.13.
|
|
148
|
+
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.12.3",
|
|
149
|
+
"@blockquote-web-components/blockquote-base-embedded-webview": "^1.13.4",
|
|
150
150
|
"@blockquote-web-components/blockquote-foundations-sass": "^1.1.6"
|
|
151
151
|
},
|
|
152
152
|
"publishConfig": {
|
|
153
153
|
"access": "public"
|
|
154
154
|
},
|
|
155
155
|
"customElements": "custom-elements.json",
|
|
156
|
-
"gitHead": "
|
|
156
|
+
"gitHead": "0e9ab080e532552ab65de7e746602be604f5181e"
|
|
157
157
|
}
|
package/src/BlockquoteTabs.js
CHANGED
|
@@ -82,7 +82,6 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
82
82
|
selected: {
|
|
83
83
|
type: Number,
|
|
84
84
|
reflect: true,
|
|
85
|
-
useDefault: true,
|
|
86
85
|
},
|
|
87
86
|
|
|
88
87
|
_hasScrollLeftIndicator: {
|
|
@@ -117,7 +116,6 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
117
116
|
|
|
118
117
|
this._scrollContentRef = createRef();
|
|
119
118
|
|
|
120
|
-
// @ts-ignore
|
|
121
119
|
this._resizeControllerObserver = new ResizeController(this, {
|
|
122
120
|
callback: () => {
|
|
123
121
|
this._onResizeObserverChange();
|
|
@@ -195,13 +193,6 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
195
193
|
if (detail.assignedSlotContent.slotName === 'tabpanel') {
|
|
196
194
|
this._tabpanelList = assignedNodesList;
|
|
197
195
|
}
|
|
198
|
-
|
|
199
|
-
if (
|
|
200
|
-
Array.isArray(this._slotNodesCount) &&
|
|
201
|
-
this._slotChangesCount > this._slotNodesCount.length
|
|
202
|
-
) {
|
|
203
|
-
this._requestPropertyUpdate('selected');
|
|
204
|
-
}
|
|
205
196
|
};
|
|
206
197
|
|
|
207
198
|
get _scrollContentTpl() {
|
|
@@ -384,12 +375,6 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
384
375
|
// tabScroller.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
|
|
385
376
|
}
|
|
386
377
|
|
|
387
|
-
_requestPropertyUpdate(prop) {
|
|
388
|
-
const oldVal = this[prop];
|
|
389
|
-
this[prop] = undefined;
|
|
390
|
-
this[prop] = oldVal;
|
|
391
|
-
}
|
|
392
|
-
|
|
393
378
|
_onResizeObserverChange() {
|
|
394
379
|
this._scrollIntoView();
|
|
395
380
|
this._scrollEdge();
|
|
@@ -37,20 +37,18 @@ export const styles = css`
|
|
|
37
37
|
.hold .separator {
|
|
38
38
|
position: absolute;
|
|
39
39
|
z-index: -1;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
right: 0;
|
|
40
|
+
inset-block-end: 0;
|
|
41
|
+
block-size: 1px;
|
|
42
|
+
inset-inline: 0;
|
|
44
43
|
background-color: var(--_unselected-color);
|
|
45
44
|
}
|
|
46
45
|
|
|
47
46
|
.hold .indicator {
|
|
48
47
|
position: absolute;
|
|
49
|
-
|
|
48
|
+
inline-size: 1rem;
|
|
50
49
|
pointer-events: none;
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
left: 0;
|
|
50
|
+
inset-block: 0 1px;
|
|
51
|
+
inset-inline-start: 0;
|
|
54
52
|
box-shadow:
|
|
55
53
|
rgb(255, 255, 255) 4px 0 12px 4px inset,
|
|
56
54
|
rgb(210, 210, 210) 4px 0 4px -4px;
|
|
@@ -65,13 +63,12 @@ export const styles = css`
|
|
|
65
63
|
}
|
|
66
64
|
|
|
67
65
|
.hold .indicator + .indicator {
|
|
68
|
-
|
|
69
|
-
right: 0;
|
|
66
|
+
inset-inline: auto 0;
|
|
70
67
|
transform: scale(-1);
|
|
71
68
|
}
|
|
72
69
|
|
|
73
70
|
.scroll-content {
|
|
74
|
-
|
|
71
|
+
inline-size: 100%;
|
|
75
72
|
overflow: auto hidden;
|
|
76
73
|
-webkit-overflow-scrolling: touch;
|
|
77
74
|
scrollbar-width: none;
|
|
@@ -26,10 +26,11 @@ export const styles = css`
|
|
|
26
26
|
justify-content: center;
|
|
27
27
|
white-space: nowrap;
|
|
28
28
|
color: var(--_color);
|
|
29
|
-
padding: 1em
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
padding-block: 1em;
|
|
30
|
+
padding-inline: 0.5em;
|
|
31
|
+
min-inline-size: 6.25rem;
|
|
32
|
+
border-block-end: 0.0625rem solid transparent;
|
|
33
|
+
transition: border-block-end-color 192ms ease-in-out;
|
|
33
34
|
cursor: pointer;
|
|
34
35
|
}
|
|
35
36
|
|
|
@@ -46,7 +47,7 @@ export const styles = css`
|
|
|
46
47
|
|
|
47
48
|
:host([aria-selected='true']) {
|
|
48
49
|
font-weight: 700;
|
|
49
|
-
border-
|
|
50
|
+
border-block-end-color: var(--_selected-border-color);
|
|
50
51
|
}
|
|
51
52
|
|
|
52
53
|
:host(:focus:not(:focus-visible)) {
|
|
@@ -63,8 +64,8 @@ export const styles = css`
|
|
|
63
64
|
display: block;
|
|
64
65
|
font: inherit;
|
|
65
66
|
font-weight: 700;
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
inline-size: inherit;
|
|
68
|
+
block-size: 0;
|
|
68
69
|
overflow: hidden;
|
|
69
70
|
visibility: hidden;
|
|
70
71
|
}
|