@blockquote-web-components/blockquote-base-embedded-webview 1.13.4 → 1.13.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-base-embedded-webview",
-  "version": "1.13.4",
+  "version": "1.13.6",
   "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": "13c87a3d8022cc2b9b46fcf2c0b5c3a719025070"
+  "gitHead": "a18c21702f2d549b46d6793e9c89ee5776d1aea5"
 }

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,7 +39,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: inherit;
+    block-size: inherit;
     padding: calc(var(--__resizer-factor) * 1) 0 calc(var(--__resizer-factor) * 2);
   }
 
@@ -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,25 +71,25 @@ 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 {
     content: url("data:image/svg+xml,%0A%3Csvg width='6' height='26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='26' rx='1' fill='%23848282'/%3E%3Crect x='4' width='2' height='26' rx='1' fill='%23848282'/%3E%3C/svg%3E");
     position: absolute;
-    top: 50%;
-    left: 50%;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
   .resizer-n {
-    height: calc(var(--__resizer-factor) / 4);
-    top: calc(var(--__resizer-factor) / 4 * -1);
-    left: calc(var(--__resizer-factor) * -1);
-    width: calc(100% + var(--__resizer-factor) * 2);
-    border-top-left-radius: calc(var(--__resizer-factor) / 10);
-    border-top-right-radius: calc(var(--__resizer-factor) / 10);
+    block-size: calc(var(--__resizer-factor) / 4);
+    inset-block-start: calc(var(--__resizer-factor) / 4 * -1);
+    inset-inline-start: calc(var(--__resizer-factor) * -1);
+    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);
   }
 
   .resizer-n::after {
@@ -98,7 +98,7 @@ export const styles = css`
 
   .resizer-se {
     cursor: nwse-resize;
-    border-bottom-right-radius: calc(var(--__resizer-factor) / 10);
+    border-end-end-radius: calc(var(--__resizer-factor) / 10);
   }
 
   .resizer-se::after {
@@ -107,7 +107,7 @@ export const styles = css`
 
   .resizer-sw {
     cursor: nesw-resize;
-    border-bottom-left-radius: calc(var(--__resizer-factor) / 10);
+    border-end-start-radius: calc(var(--__resizer-factor) / 10);
   }
 
   .resizer-sw::after {
@@ -116,24 +116,24 @@ export const styles = css`
 
   .resizer-se,
   .resizer-e {
-    right: calc(var(--__resizer-factor) * -1);
+    inset-inline-end: calc(var(--__resizer-factor) * -1);
   }
 
   .resizer-se,
   .resizer-sw,
   .resizer-s {
-    bottom: calc(var(--__resizer-factor) * -1);
+    inset-block-end: calc(var(--__resizer-factor) * -1);
   }
 
   .resizer-w,
   .resizer-sw {
-    left: calc(var(--__resizer-factor) * -1);
+    inset-inline-start: calc(var(--__resizer-factor) * -1);
   }
 
   .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,11 +88,11 @@ 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;
-    left: 50%;
-    top: 50%;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
     transform: translate(-50%, -50%);
     background-image: linear-gradient(90deg, rgb(0, 0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0, 0));
   }
@@ -100,8 +100,8 @@ export const styles = css`
   button {
     position: absolute;
     background-color: var(--_button-bgcolor);
-    border-left: 1px solid var(--_button-border-color);
-    border-right: 1px solid var(--_button-border-color);
+    border-inline-start: 1px solid var(--_button-border-color);
+    border-inline-end: 1px solid var(--_button-border-color);
   }
 
   button span {

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,14 @@ export const styles = css`
 
   header > div {
     position: relative;
-    max-width: 80rem;
+    max-inline-size: 80rem;
     margin: 0 auto;
     padding: 0.5rem 1.5rem;
   }
 
   [role='heading'] {
     font-size: 1.25rem;
-    margin-bottom: 0.5rem;
+    margin-block-end: 0.5rem;
   }
 
   [role='heading'] + div {
@@ -71,9 +71,9 @@ export const styles = css`
   }
 
   .open-externally {
-    width: 1rem;
+    inline-size: 1rem;
     display: inline-block;
-    margin-left: 1rem;
+    margin-inline-start: 1rem;
     color: inherit;
   }
 
@@ -92,7 +92,7 @@ export const styles = css`
   }
 
   .select svg {
-    width: 0.875rem;
+    inline-size: 0.875rem;
     justify-self: end;
     pointer-events: none;
   }
@@ -105,15 +105,15 @@ export const styles = css`
     font: inherit;
     background-color: transparent;
     border: none;
-    border-bottom: 0.125rem solid var(--_select-bgcolor);
+    border-block-end: 0.125rem solid var(--_select-bgcolor);
     padding: 0.25em 1em 0.25em 0;
     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,7 +122,7 @@ export const styles = css`
 
   .select select:hover,
   .select select:focus {
-    border-bottom-color: currentcolor;
+    border-block-end-color: currentcolor;
   }
 
   .description {
@@ -139,13 +139,13 @@ export const styles = css`
     letter-spacing: 0.0156rem;
     position: fixed;
     z-index: 1;
-    right: 0.375rem;
-    top: 0.3125rem;
+    inset-inline-end: 0.375rem;
+    inset-block-start: 0.3125rem;
     opacity: 0;
     transition: opacity 90ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 
   blockquote-base-embedded-webview-resize {
-    overflow-x: hidden;
+    overflow-inline: hidden;
   }
 `;