@blockquote-web-components/blockquote-base-embedded-webview 1.0.9 → 1.1.1

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 (7) hide show
  1. package/README.md +5 -5
  2. package/package.json +3 -3
  3. package/src/BlockquoteBaseEmbeddedWebview.js +49 -24
  4. package/src/BlockquoteBaseEmbeddedWebviewSize.js +5 -5
  5. package/src/styles/BlockquoteBaseEmbeddedWebview-styles.js +14 -7
  6. package/src/styles/BlockquoteBaseEmbeddedWebviewResize-styles.js +34 -23
  7. 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.9",
3
+ "version": "1.1.1",
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.2",
132
+ "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.3.4",
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": "c75f672c60e0a744530f9dfabbcf623ed8bca3af"
140
+ "gitHead": "ff5cd7a9e66876654c3a7fe1f378968c03099813"
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,40 +180,49 @@ 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
 
195
201
  get _selectTpl() {
196
202
  return html`
197
- <div class="select">
198
- <select @change="${this._onChangeFile}" aria-label="Cases">
199
- ${this._sources.map(
200
- (item, index) => html`
201
- <option ?selected="${this.selected === index}" value="${index}">
202
- ${item.option}
203
- </option>
204
- `,
205
- )}
206
- </select>
207
- ${this.__selectArrow}
208
- </div>
203
+ ${this._sources.some(options => options.option)
204
+ ? html`
205
+ <div class="select">
206
+ <select @change="${this._onChangeFile}" aria-label="Cases">
207
+ ${this._sources.map(
208
+ (item, index) => html`
209
+ <option ?selected="${this.selected === index}" value="${index}">
210
+ ${item.option}
211
+ </option>
212
+ `,
213
+ )}
214
+ </select>
215
+ ${this.__selectArrow}
216
+ </div>
217
+ `
218
+ : ''}
209
219
  `;
210
220
  }
211
221
 
222
+ get _descriptionTpl() {
223
+ return html` <p class="description">${this._sources[this.selected].description}</p>`;
224
+ }
225
+
212
226
  get _readDataPosTpl() {
213
227
  return html`
214
228
  <div
@@ -225,17 +239,28 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
225
239
 
226
240
  get _screenSizeTpl() {
227
241
  return html` <blockquote-base-embedded-webview-size
242
+ ?data-resizing="${this.__resetResizing}"
228
243
  @click="${this._updateSize}"
229
244
  @selectedchange="${this._updateSize}"
230
245
  .selected="${this.screenSizeSelected}"
231
246
  ></blockquote-base-embedded-webview-size>`;
232
247
  }
233
248
 
249
+ get _mainTpl() {
250
+ return html`
251
+ <div class="main">
252
+ <blockquote-base-embedded-webview-resize ${ref(this._embeddedResizeRef)}>
253
+ <slot name="embedded"> ${this._embeddedSlotTpl} </slot>
254
+ </blockquote-base-embedded-webview-resize>
255
+ </div>
256
+ `;
257
+ }
258
+
234
259
  get _embeddedSlotTpl() {
235
260
  return html` <blockquote-base-embedded-webview-element
236
261
  slot="embedded"
237
262
  .src="${this._src}"
238
- .embeddedTitle="${this._sources[this.selected].option}"
263
+ .embeddedTitle="${this._sources[this.selected].option || 'Demo'}"
239
264
  >
240
265
  </blockquote-base-embedded-webview-element>`;
241
266
  }
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;
@@ -52,7 +52,6 @@ header > div {
52
52
  display: inline-grid;
53
53
  grid-template-areas: select;
54
54
  align-items: center;
55
- margin-bottom: 0.5rem;
56
55
  }
57
56
  .select > * {
58
57
  grid-area: select;
@@ -68,7 +67,6 @@ header > div {
68
67
  appearance: none;
69
68
  color: inherit;
70
69
  font: inherit;
71
- font-size: 0.875rem;
72
70
  background-color: transparent;
73
71
  border: none;
74
72
  border-bottom: 0.125rem solid var(--_select-bgcolor);
@@ -89,6 +87,15 @@ header > div {
89
87
  border-bottom-color: currentcolor;
90
88
  }
91
89
 
90
+ .description {
91
+ margin: 0.5rem 0 1rem;
92
+ font-size: 0.875rem;
93
+ }
94
+
95
+ .description:empty {
96
+ visibility: hidden;
97
+ }
98
+
92
99
  .read-data-pos {
93
100
  font-size: 0.875rem;
94
101
  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;