@blockquote-web-components/blockquote-base-embedded-webview 1.0.8 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +5 -5
  2. package/package.json +3 -3
  3. package/src/BlockquoteBaseEmbeddedWebview.js +32 -11
  4. package/src/BlockquoteBaseEmbeddedWebviewElement.js +7 -4
  5. package/src/BlockquoteBaseEmbeddedWebviewSize.js +5 -5
  6. package/src/styles/BlockquoteBaseEmbeddedWebview-styles.js +10 -6
  7. package/src/styles/BlockquoteBaseEmbeddedWebviewResize-styles.js +34 -23
  8. package/src/styles/BlockquoteBaseEmbeddedWebviewSize-styles.js +22 -6
package/README.md CHANGED
@@ -56,10 +56,10 @@
56
56
  <blockquote-base-embedded-webview-size
57
57
  screen-sizes="[
58
58
  { width: 360, height: 640, id: '360x640' },
59
- { width: 375, height: 667, id: '375x667' },
59
+ { width: 360, height: 800, id: '360x800' },
60
60
  { width: 414, height: 896, id: '414x896' },
61
61
  { width: 768, height: 1024, id: '768x1024' },
62
- { width: 1024, height: 768, id: '1024x768' },
62
+ { width: 810, height: 1080, id: '810x1080' },
63
63
  { width: 1280, height: 800, id: '1280x800' },
64
64
  { width: 1366, height: 768, id: '1366x768' },
65
65
  { width: 1536, height: 864, id: '1536x864' },
@@ -77,7 +77,7 @@ screen-sizes="[
77
77
  | Property | Attribute | Modifiers | Type | Default | Description |
78
78
  |----------------------|----------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
79
79
  | `computedStyleWidth` | | readonly | `number` | | |
80
- | `screenSizes` | `screen-sizes` | | `Array` | [{"width":360,"height":640,"id":"360x640"},{"width":375,"height":667,"id":"375x667"},{"width":414,"height":896,"id":"414x896"},{"width":768,"height":1024,"id":"768x1024"},{"width":1024,"height":768,"id":"1024x768"},{"width":1280,"height":800,"id":"1280x800"},{"width":1366,"height":768,"id":"1366x768"},{"width":1536,"height":864,"id":"1536x864"},{"width":1920,"height":1080,"id":"1920x1080"}] | The screen size options to display |
80
+ | `screenSizes` | `screen-sizes` | | `Array` | [{"width":360,"height":640,"id":"360x640"},{"width":360,"height":800,"id":"360x800"},{"width":414,"height":896,"id":"414x896"},{"width":768,"height":1024,"id":"768x1024"},{"width":810,"height":1080,"id":"810x1080"},{"width":1280,"height":800,"id":"1280x800"},{"width":1366,"height":768,"id":"1366x768"},{"width":1536,"height":864,"id":"1536x864"},{"width":1920,"height":1080,"id":"1920x1080"}] | The screen size options to display |
81
81
  | `selected` | `selected` | | `Number` | 0 | The screen size option selected |
82
82
  | `selectedDetail` | | readonly | `{ index: number; width: number; height: number; id: string; }` | | |
83
83
  | `selectedSize` | | readonly | `{ width: number; height: number; id: string; }` | | |
@@ -109,8 +109,8 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
109
109
 
110
110
  ```html
111
111
  <blockquote-base-embedded-webview heading="My demo title">
112
- <template data-src="./base.html" data-option="Basis"></template>
113
- <template data-src="./complex.html" data-option="Complex"></template>
112
+ <template data-src="./base.html" data-option="Base" data-description="base - description"></template>
113
+ <template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
114
114
  </blockquote-base-embedded-webview>
115
115
  ```
116
116
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockquote-web-components/blockquote-base-embedded-webview",
3
- "version": "1.0.8",
3
+ "version": "1.1.0",
4
4
  "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
5
5
  "keywords": [
6
6
  "lit",
@@ -129,7 +129,7 @@
129
129
  "lit": "^2.0.2"
130
130
  },
131
131
  "devDependencies": {
132
- "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.3.1",
132
+ "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.3.3",
133
133
  "@blockquote-web-components/blockquote-foundations-sass": "^1.0.0",
134
134
  "@polymer/iron-test-helpers": "^3.0.1"
135
135
  },
@@ -137,5 +137,5 @@
137
137
  "access": "public"
138
138
  },
139
139
  "customElements": "custom-elements.json",
140
- "gitHead": "4a14f74f572169c99989112aa5681940f4cde3aa"
140
+ "gitHead": "59788e9f9fd289014654abf2e902056700cbbd56"
141
141
  }
package/src/BlockquoteBaseEmbeddedWebview.js CHANGED
@@ -19,8 +19,8 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
19
19
 
20
20
  ```html
21
21
  <blockquote-base-embedded-webview heading="My demo title">
22
- <template data-src="./base.html" data-option="Basis"></template>
23
- <template data-src="./complex.html" data-option="Complex"></template>
22
+ <template data-src="./base.html" data-option="Base" data-description="base - description"></template>
23
+ <template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
24
24
  </blockquote-base-embedded-webview>
25
25
  ```
26
26
 
@@ -122,10 +122,11 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
122
122
  this.screenSizeSelected = 0;
123
123
  this.headingLevel = 1;
124
124
  this.heading = '';
125
+ this.__resetResizing = false;
125
126
  this.__selectArrow = chevronDownIcon;
126
127
  this.__readDataPos = { x: 0, y: 0, resizing: false };
127
128
  this.limitHeight = false;
128
- this._sources = [{ file: '', option: '' }];
129
+ this._sources = [{ file: '', option: '', description: '' }];
129
130
  this._updateSize = this._updateSize.bind(this);
130
131
  this._embeddedResizeRef = createRef();
131
132
  }
@@ -135,16 +136,18 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
135
136
 
136
137
  this.shadowRoot.addEventListener('webviewresize', ({ detail }) => {
137
138
  Object.assign(this.__readDataPos, detail);
139
+ this.__resetResizing = true;
138
140
  this.requestUpdate();
139
141
  });
140
142
 
141
143
  const _sources = Array.from(this.querySelectorAll('template'));
142
144
  if (_sources.length) {
143
145
  this._sources = _sources.map(item => {
144
- const { src, option } = item.dataset;
146
+ const { src, option, description } = item.dataset;
145
147
  return {
146
148
  src,
147
149
  option,
150
+ description,
148
151
  };
149
152
  });
150
153
 
@@ -168,6 +171,8 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
168
171
  '--blockquote-base-embedded-webview-resize-rect-height',
169
172
  this.limitHeight ? '100%' : `${detail.height}px`,
170
173
  );
174
+ this.__resetResizing = false;
175
+ this.requestUpdate();
171
176
  }
172
177
 
173
178
  get _headingLevel() {
@@ -175,20 +180,21 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
175
180
  }
176
181
 
177
182
  render() {
183
+ return html` ${this._headerTpl} ${this._mainTpl} `;
184
+ }
185
+
186
+ get _headerTpl() {
178
187
  return html`
179
188
  <header>
180
- <div>${this._headerTpl} ${this._selectTpl} ${this._readDataPosTpl}</div>
189
+ <div>
190
+ ${this._headingTpl} ${this._selectTpl} ${this._descriptionTpl} ${this._readDataPosTpl}
191
+ </div>
181
192
  ${this._screenSizeTpl}
182
193
  </header>
183
- <div class="main">
184
- <blockquote-base-embedded-webview-resize ${ref(this._embeddedResizeRef)}>
185
- <slot name="embedded"> ${this._embeddedSlotTpl} </slot>
186
- </blockquote-base-embedded-webview-resize>
187
- </div>
188
194
  `;
189
195
  }
190
196
 
191
- get _headerTpl() {
197
+ get _headingTpl() {
192
198
  return html`<div aria-level="${this._headingLevel}" role="heading">${this.heading}</div>`;
193
199
  }
194
200
 
@@ -209,6 +215,10 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
209
215
  `;
210
216
  }
211
217
 
218
+ get _descriptionTpl() {
219
+ return html` <p class="description">${this._sources[this.selected].description}</p>`;
220
+ }
221
+
212
222
  get _readDataPosTpl() {
213
223
  return html`
214
224
  <div
@@ -225,12 +235,23 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
225
235
 
226
236
  get _screenSizeTpl() {
227
237
  return html` <blockquote-base-embedded-webview-size
238
+ ?data-resizing="${this.__resetResizing}"
228
239
  @click="${this._updateSize}"
229
240
  @selectedchange="${this._updateSize}"
230
241
  .selected="${this.screenSizeSelected}"
231
242
  ></blockquote-base-embedded-webview-size>`;
232
243
  }
233
244
 
245
+ get _mainTpl() {
246
+ return html`
247
+ <div class="main">
248
+ <blockquote-base-embedded-webview-resize ${ref(this._embeddedResizeRef)}>
249
+ <slot name="embedded"> ${this._embeddedSlotTpl} </slot>
250
+ </blockquote-base-embedded-webview-resize>
251
+ </div>
252
+ `;
253
+ }
254
+
234
255
  get _embeddedSlotTpl() {
235
256
  return html` <blockquote-base-embedded-webview-element
236
257
  slot="embedded"
package/src/BlockquoteBaseEmbeddedWebviewElement.js CHANGED
@@ -97,18 +97,18 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
97
97
 
98
98
  _fetch(resource) {
99
99
  if (resource) {
100
- if (this.embeddedTitle) {
101
- this._embeddedElement.title = this.embeddedTitle;
102
- }
103
100
  Object.assign(
104
101
  this._embeddedElement,
105
102
  this.type === 'iframe' && {
103
+ allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
106
104
  allowFullscreen: true,
107
- allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture,',
105
+ loading: 'lazy',
108
106
  },
107
+ this.embeddedTitle && { title: this.embeddedTitle },
109
108
  );
110
109
 
111
110
  this._embeddedElement[this._loadResource] = resource;
111
+ window.performance.mark('iframestart');
112
112
 
113
113
  Object.assign(
114
114
  this._embeddedElement.style,
@@ -126,6 +126,9 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
126
126
  Object.assign(target.contentDocument.body.dataset, {
127
127
  embedded: '',
128
128
  });
129
+
130
+ window.performance.mark('iframeend');
131
+ window.performance.measure('iframe', 'iframestart', 'iframeend');
129
132
  window.requestAnimationFrame(() => target.removeAttribute('style'));
130
133
 
131
134
  /**
package/src/BlockquoteBaseEmbeddedWebviewSize.js CHANGED
@@ -11,10 +11,10 @@ import styles from './styles/BlockquoteBaseEmbeddedWebviewSize-styles.js';
11
11
  <blockquote-base-embedded-webview-size
12
12
  screen-sizes="[
13
13
  { width: 360, height: 640, id: '360x640' },
14
- { width: 375, height: 667, id: '375x667' },
14
+ { width: 360, height: 800, id: '360x800' },
15
15
  { width: 414, height: 896, id: '414x896' },
16
16
  { width: 768, height: 1024, id: '768x1024' },
17
- { width: 1024, height: 768, id: '1024x768' },
17
+ { width: 810, height: 1080, id: '810x1080' },
18
18
  { width: 1280, height: 800, id: '1280x800' },
19
19
  { width: 1366, height: 768, id: '1366x768' },
20
20
  { width: 1536, height: 864, id: '1536x864' },
@@ -82,10 +82,10 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
82
82
  this.selected = 0;
83
83
  this.screenSizes = [
84
84
  { width: 360, height: 640, id: '360x640' },
85
- { width: 375, height: 667, id: '375x667' },
85
+ { width: 360, height: 800, id: '360x800' },
86
86
  { width: 414, height: 896, id: '414x896' },
87
87
  { width: 768, height: 1024, id: '768x1024' },
88
- { width: 1024, height: 768, id: '1024x768' },
88
+ { width: 810, height: 1080, id: '810x1080' },
89
89
  { width: 1280, height: 800, id: '1280x800' },
90
90
  { width: 1366, height: 768, id: '1366x768' },
91
91
  { width: 1536, height: 864, id: '1536x864' },
@@ -179,7 +179,7 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
179
179
  }
180
180
 
181
181
  get _visualTextTpl() {
182
- return html` <span aria-hidden="true">${this.selectedSize.id}</span>`;
182
+ return html` <span aria-disabled="true" aria-hidden="true">${this.selectedSize.id}</span>`;
183
183
  }
184
184
 
185
185
  _onResize(ev) {
package/src/styles/BlockquoteBaseEmbeddedWebview-styles.js CHANGED
@@ -2,12 +2,12 @@
2
2
  import { css } from 'lit';
3
3
 
4
4
  export default css`:host {
5
- --_host-color: var(--blockquote-base-embedded-webview-color, rgb(32, 33, 36));
6
- --_main-bgcolor: var(--blockquote-base-embedded-webview-main-bgcolor, rgb(248, 249, 249));
7
- --_select-bgcolor: var(--blockquote-base-embedded-webview-select-bgcolor, rgb(222, 225, 230));
5
+ --_host-color: var(--blockquote-base-embedded-webview-color, rgb(32, 32, 32));
6
+ --_main-bgcolor: var(--blockquote-base-embedded-webview-main-bgcolor, rgb(250, 250, 250));
7
+ --_select-bgcolor: var(--blockquote-base-embedded-webview-select-bgcolor, rgb(222, 222, 222));
8
8
  --_select-transition: var(--blockquote-base-embedded-webview-select-transition, border-bottom 196ms ease-out, var(--blockquote-base-embedded-webview-select-transition, border-bottom 196ms ease-out));
9
- --blockquote-base-embedded-webview-resize-rect-width: 640px; /* 40rem */
10
- --blockquote-base-embedded-webview-resize-rect-height: 360px; /* 22.5rem */
9
+ --blockquote-base-embedded-webview-resize-rect-width: 40rem; /* 40rem */
10
+ --blockquote-base-embedded-webview-resize-rect-height: 22.5rem; /* 22.5rem */
11
11
  display: flex;
12
12
  flex-direction: column;
13
13
  box-sizing: border-box;
@@ -68,7 +68,6 @@ header > div {
68
68
  appearance: none;
69
69
  color: inherit;
70
70
  font: inherit;
71
- font-size: 0.875rem;
72
71
  background-color: transparent;
73
72
  border: none;
74
73
  border-bottom: 0.125rem solid var(--_select-bgcolor);
@@ -89,6 +88,11 @@ header > div {
89
88
  border-bottom-color: currentcolor;
90
89
  }
91
90
 
91
+ .description {
92
+ margin: 0 0 1rem;
93
+ font-size: 0.875rem;
94
+ }
95
+
92
96
  .read-data-pos {
93
97
  font-size: 0.875rem;
94
98
  letter-spacing: 0.0156rem;
package/src/styles/BlockquoteBaseEmbeddedWebviewResize-styles.js CHANGED
@@ -9,8 +9,10 @@ export default css`:host {
9
9
  --_rect-max-height: var(--blockquote-base-embedded-webview-resize-rect-max-height, 100%);
10
10
  --_rect-width: var(--blockquote-base-embedded-webview-resize-rect-width, 40rem);
11
11
  --_rect-height: var(--blockquote-base-embedded-webview-resize-rect-height, 22.5rem);
12
- --_resizer-bgcolor: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor, rgb(222, 225, 230));
13
- --_resizer-bgcolor-hover: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover, rgb(218, 220, 224));
12
+ --_resizer-bgcolor: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor, rgb(234, 234, 234));
13
+ --_resizer-bgcolor-hover: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover, rgb(220, 220, 220));
14
+ --_resizer-bgimage-ew-hover: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover, linear-gradient(0deg, rgba(220, 220, 220, 0.2), rgba(220, 220, 220, 1) 50%, rgba(220, 220, 220, 0.2)));
15
+ --_resizer-bgimage-s-hover: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover, linear-gradient(90deg, rgba(220, 220, 220, 0.2), rgba(220, 220, 220, 1) 50%, rgba(220, 220, 220, 0.2)));
14
16
  display: flex;
15
17
  flex-direction: column;
16
18
  align-items: center;
@@ -57,9 +59,6 @@ export default css`:host {
57
59
  left: 50%;
58
60
  transform: translateX(-50%);
59
61
  }
60
- .resizer:hover:not(.resizer-n) {
61
- background-color: var(--_resizer-bgcolor-hover);
62
- }
63
62
  .resizer-n {
64
63
  height: calc(var(--__resizer-factor) / 4);
65
64
  top: calc(var(--__resizer-factor) / 4 * -1);
@@ -69,22 +68,36 @@ export default css`:host {
69
68
  .resizer-n::after {
70
69
  content: none;
71
70
  }
72
- .resizer-se, .resizer-sw {
73
- height: var(--__resizer-factor);
74
- width: var(--__resizer-factor);
75
- }
76
- .resizer-se::after, .resizer-sw::after {
77
- content: url("data:image/svg+xml,%0A%3Csvg width='13' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='%23848282'%3E%3Crect x='-.195' y='10.775' width='15.566' height='2' rx='1' transform='rotate(-45 -.195 10.775)'/%3E%3Crect x='5.346' y='11.241' width='8.401' height='2' rx='1' transform='rotate(-45 5.346 11.24)'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath fill='%23fff' d='M0 0h13v13H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
78
- transform: translate(-50%, -50%);
79
- }
80
71
  .resizer-se {
81
72
  cursor: nwse-resize;
82
73
  }
74
+ .resizer-se::after {
75
+ transform: translate(-50%, -50%);
76
+ }
83
77
  .resizer-sw {
84
78
  cursor: nesw-resize;
85
79
  }
86
80
  .resizer-sw::after {
87
- transform: translate(-50%, -50%) translateY(-1.5px) rotate(90deg);
81
+ transform: translate(-50%, -50%) translateY(-0.0938rem) rotate(90deg);
82
+ }
83
+ .resizer-se, .resizer-e {
84
+ right: calc(var(--__resizer-factor) * -1);
85
+ }
86
+ .resizer-se, .resizer-sw, .resizer-s {
87
+ bottom: calc(var(--__resizer-factor) * -1);
88
+ }
89
+ .resizer-w, .resizer-sw {
90
+ left: calc(var(--__resizer-factor) * -1);
91
+ }
92
+ .resizer-se, .resizer-sw {
93
+ height: var(--__resizer-factor);
94
+ width: var(--__resizer-factor);
95
+ }
96
+ .resizer-se::after, .resizer-sw::after {
97
+ content: url("data:image/svg+xml,%0A%3Csvg width='13' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='%23848282'%3E%3Crect x='-.195' y='10.775' width='15.566' height='2' rx='1' transform='rotate(-45 -.195 10.775)'/%3E%3Crect x='5.346' y='11.241' width='8.401' height='2' rx='1' transform='rotate(-45 5.346 11.24)'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath fill='%23fff' d='M0 0h13v13H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
98
+ }
99
+ .resizer-se:hover, .resizer-sw:hover {
100
+ background-color: var(--_resizer-bgcolor-hover);
88
101
  }
89
102
  .resizer-s {
90
103
  cursor: ns-resize;
@@ -92,20 +105,18 @@ export default css`:host {
92
105
  }
93
106
  .resizer-s::after {
94
107
  content: url("data:image/svg+xml,%0A%3Csvg width='26' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='26' height='2' rx='1' fill='%23848282'/%3E%3Crect y='4' width='26' height='2' rx='1' fill='%23848282'/%3E%3C/svg%3E");
95
- transform: translate(-50%, -50%) translateY(-3px);
108
+ transform: translate(-50%, -50%) translateY(-0.1875rem);
109
+ }
110
+ .resizer-s:hover {
111
+ background-image: var(--_resizer-bgimage-s-hover);
96
112
  }
97
113
  .resizer-e, .resizer-w {
98
114
  cursor: ew-resize;
99
115
  width: var(--__resizer-factor);
100
116
  }
101
- .resizer-se, .resizer-e {
102
- right: calc(var(--__resizer-factor) * -1);
103
- }
104
- .resizer-se, .resizer-sw, .resizer-s {
105
- bottom: calc(var(--__resizer-factor) * -1);
106
- }
107
- .resizer-w, .resizer-sw {
108
- left: calc(var(--__resizer-factor) * -1);
117
+ .resizer-e:hover, .resizer-w:hover {
118
+ background-image: var(--_resizer-bgimage-ew-hover);
119
+ background-position: bottom;
109
120
  }
110
121
 
111
122
  :host([resizing]),
package/src/styles/BlockquoteBaseEmbeddedWebviewSize-styles.js CHANGED
@@ -4,10 +4,10 @@ export default css`:host {
4
4
  --_host-color: var(--blockquote-base-embedded-webview-size-color, inherit);
5
5
  --_rect-height: var(--blockquote-base-embedded-webview-size-rect-height, 1.125rem);
6
6
  --_rect-size: var(--blockquote-base-embedded-webview-size-rect-size, 0.6875rem);
7
- --_button-border-color: var(--blockquote-base-embedded-webview-size-button-border-color, rgb(255, 255, 255));
8
- --_button-bgcolor: var(--blockquote-base-embedded-webview-size-button-bgcolor, rgb(222, 225, 230));
9
- --_button-bgcolor-hover: var(--blockquote-base-embedded-webview-size-button-bgcolor-hover, rgb(218, 220, 224));
10
- --_button-bgcolor-selected-hover: var(--blockquote-base-embedded-webview-size-button-bgcolor-selected-hover, rgb(207, 208, 208));
7
+ --_button-border-color: var(--blockquote-base-embedded-webview-size-button-border-color, rgb(184, 184, 184));
8
+ --_button-bgcolor: var(--blockquote-base-embedded-webview-size-button-bgcolor, rgb(234, 234, 234));
9
+ --_button-bgcolor-hover: var(--blockquote-base-embedded-webview-size-button-bgcolor-hover, rgb(220, 220, 220));
10
+ --_button-bgcolor-selected-hover: var(--blockquote-base-embedded-webview-size-button-bgcolor-selected-hover, rgb(210, 210, 210));
11
11
  color: var(--_host-color);
12
12
  display: block;
13
13
  box-sizing: border-box;
@@ -19,6 +19,22 @@ export default css`:host {
19
19
  display: none !important;
20
20
  }
21
21
 
22
+ :host([data-resizing]) [aria-hidden=true] {
23
+ opacity: 0.4;
24
+ }
25
+
26
+ :host([data-resizing]) [aria-hidden=true]::after {
27
+ content: "";
28
+ display: block;
29
+ height: 1px;
30
+ width: calc(100% + 2rem);
31
+ position: absolute;
32
+ left: 50%;
33
+ top: 50%;
34
+ transform: translate(-50%, -50%);
35
+ background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0));
36
+ }
37
+
22
38
  *,
23
39
  *::before,
24
40
  *::after {
@@ -70,8 +86,8 @@ button {
70
86
  button {
71
87
  position: absolute;
72
88
  background-color: var(--_button-bgcolor);
73
- border-left: 2px solid var(--_button-border-color);
74
- border-right: 2px solid var(--_button-border-color);
89
+ border-left: 1px solid var(--_button-border-color);
90
+ border-right: 1px solid var(--_button-border-color);
75
91
  }
76
92
  button span {
77
93
  opacity: 0;