@blockquote-web-components/blockquote-base-embedded-webview 1.13.5 → 1.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-base-embedded-webview",
-  "version": "1.13.5",
+  "version": "1.13.7",
   "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
   "keywords": [
     "lit",
@@ -149,11 +149,11 @@
   },
   "devDependencies": {
     "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.12.3",
-    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.6"
+    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.7"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "4e07d405ad5c2d6fac5b7d5ac635c25a921535fc"
+  "gitHead": "2580fca4a2ecd8787aa2efa7ef5861b32da29b70"
 }

package/src/BlockquoteBaseEmbeddedWebview.js

@@ -256,7 +256,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
       ${this._sources.some((options) => options.option)
         ? html`
             <div class="select">
-              <select @change="${this._onChangeFile}" aria-label="Cases">
+              <select id="select-sources" @change="${this._onChangeFile}" aria-label="Cases">
                 ${this._sources.map(
                   (item, index) => html`
                     <option ?selected="${this.selected === index}" value="${index}">

package/src/styles/blockquote-base-embedded-webview-element-styles.css.js

@@ -5,8 +5,8 @@ export const styles = css`
   ::slotted([slot='embedded']) {
     display: block;
     box-sizing: border-box;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     margin: 0;
     border: 0;
   }

package/src/styles/blockquote-base-embedded-webview-resize-styles.css.js

@@ -39,8 +39,8 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: inherit;
-    padding: calc(var(--__resizer-factor) * 1) 0 calc(var(--__resizer-factor) * 2);
+    block-size: inherit;
+    padding-block: calc(var(--__resizer-factor) * 1) calc(var(--__resizer-factor) * 2);
   }
 
   :host([hidden]),
@@ -57,12 +57,12 @@ export const styles = css`
   .rect {
     position: relative;
     align-self: center;
-    min-width: var(--_rect-min-width);
-    min-height: var(--_rect-min-height);
-    max-width: var(--_rect-max-width);
-    max-height: var(--_rect-max-height);
-    width: var(--_rect-width);
-    height: var(--_rect-height);
+    min-inline-size: var(--_rect-min-width);
+    min-block-size: var(--_rect-min-height);
+    max-inline-size: var(--_rect-max-width);
+    max-block-size: var(--_rect-max-height);
+    inline-size: var(--_rect-width);
+    block-size: var(--_rect-height);
     transform: translateZ(0);
   }
 
@@ -71,8 +71,8 @@ export const styles = css`
     display: block;
     position: absolute;
     background-color: var(--_resizer-bgcolor);
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
   }
 
   .resizer::after {
@@ -84,10 +84,10 @@ export const styles = css`
   }
 
   .resizer-n {
-    height: calc(var(--__resizer-factor) / 4);
+    block-size: calc(var(--__resizer-factor) / 4);
     inset-block-start: calc(var(--__resizer-factor) / 4 * -1);
     inset-inline-start: calc(var(--__resizer-factor) * -1);
-    width: calc(100% + var(--__resizer-factor) * 2);
+    inline-size: calc(100% + var(--__resizer-factor) * 2);
     border-start-start-radius: calc(var(--__resizer-factor) / 10);
     border-start-end-radius: calc(var(--__resizer-factor) / 10);
   }
@@ -132,8 +132,8 @@ export const styles = css`
 
   .resizer-se,
   .resizer-sw {
-    height: var(--__resizer-factor);
-    width: var(--__resizer-factor);
+    block-size: var(--__resizer-factor);
+    inline-size: var(--__resizer-factor);
   }
 
   .resizer-se::after,
@@ -148,7 +148,7 @@ export const styles = css`
 
   .resizer-s {
     cursor: ns-resize;
-    height: var(--__resizer-factor);
+    block-size: var(--__resizer-factor);
   }
 
   .resizer-s::after {
@@ -163,7 +163,7 @@ export const styles = css`
   .resizer-e,
   .resizer-w {
     cursor: ew-resize;
-    width: var(--__resizer-factor);
+    inline-size: var(--__resizer-factor);
   }
 
   .resizer-e:hover,

package/src/styles/blockquote-base-embedded-webview-size-styles.css.js

@@ -51,19 +51,19 @@ export const styles = css`
     font: inherit;
     margin: 0;
     padding: 0;
-    height: inherit;
+    block-size: inherit;
     text-align: inherit;
     text-decoration: none;
     text-transform: inherit;
     text-shadow: inherit;
     letter-spacing: inherit;
     word-spacing: inherit;
-    width: auto;
+    inline-size: auto;
   }
 
   .rect {
     overflow: hidden;
-    height: var(--_rect-height);
+    block-size: var(--_rect-height);
     position: relative;
     display: flex;
     justify-content: center;
@@ -88,8 +88,8 @@ export const styles = css`
   .rect [aria-disabled='true']::after {
     content: '';
     display: block;
-    height: 1px;
-    width: calc(100% + 2rem);
+    block-size: 1px;
+    inline-size: calc(100% + 2rem);
     position: absolute;
     inset-inline-start: 50%;
     inset-block-start: 50%;

package/src/styles/blockquote-base-embedded-webview-styles.css.js

@@ -15,8 +15,8 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     color: var(--_host-color);
   }
 
@@ -27,8 +27,8 @@ export const styles = css`
 
   .sr-only {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -44,7 +44,7 @@ export const styles = css`
   }
 
   :host([limit-height]) .main {
-    height: inherit;
+    block-size: inherit;
   }
 
   *,
@@ -55,14 +55,15 @@ export const styles = css`
 
   header > div {
     position: relative;
-    max-width: 80rem;
+    max-inline-size: 80rem;
     margin: 0 auto;
-    padding: 0.5rem 1.5rem;
+    padding-block: 0.5rem;
+    padding-inline: 1.5rem;
   }
 
   [role='heading'] {
     font-size: 1.25rem;
-    margin-bottom: 0.5rem;
+    margin-block-end: 0.5rem;
   }
 
   [role='heading'] + div {
@@ -71,7 +72,7 @@ export const styles = css`
   }
 
   .open-externally {
-    width: 1rem;
+    inline-size: 1rem;
     display: inline-block;
     margin-inline-start: 1rem;
     color: inherit;
@@ -92,7 +93,7 @@ export const styles = css`
   }
 
   .select svg {
-    width: 0.875rem;
+    inline-size: 0.875rem;
     justify-self: end;
     pointer-events: none;
   }
@@ -106,14 +107,15 @@ export const styles = css`
     background-color: transparent;
     border: none;
     border-block-end: 0.125rem solid var(--_select-bgcolor);
-    padding: 0.25em 1em 0.25em 0;
+    padding-block: 0.25em;
+    padding-inline: 0 1em;
     margin: 0;
-    width: 100%;
+    inline-size: 100%;
     cursor: pointer;
     outline: none;
     border-radius: 0;
-    min-width: 10ch;
-    max-width: 18ch;
+    min-inline-size: 10ch;
+    max-inline-size: 18ch;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -122,11 +124,12 @@ export const styles = css`
 
   .select select:hover,
   .select select:focus {
-    border-bottom-color: currentcolor;
+    border-block-end-color: currentcolor;
   }
 
   .description {
-    margin: 0.5rem 0 1rem;
+    margin-inline: 0;
+    margin-block: 0.5rem 1rem;
     font-size: 0.875rem;
   }
 
@@ -147,5 +150,6 @@ export const styles = css`
 
   blockquote-base-embedded-webview-resize {
     overflow-x: hidden;
+    overflow-inline: hidden;
   }
 `;