solid-ui 3.1.0 → 3.1.1-test.0

package/dist/components/header/index.js

@@ -73,7 +73,7 @@ const originalIconBase = icons.originalIconBase;
 
 /***/ },
 
-/***/ 568
+/***/ 463
 (__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
 
 
@@ -85,7 +85,7 @@ var lit = __webpack_require__(161);
 var external_SolidLogic_ = __webpack_require__(892);
 // EXTERNAL MODULE: ./node_modules/lit-html/lit-html.js
 var lit_html = __webpack_require__(752);
-;// ./src/v2/components/loginButton/downArrow.ts
+;// ./src/v2/components/auth/loginButton/downArrow.ts
 
 const phoneIcon = (0,lit_html/* html */.qy)`
   <svg xmlns="http://www.w3.org/2000/svg" 
@@ -95,7 +95,7 @@ const phoneIcon = (0,lit_html/* html */.qy)`
     <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
 `;
-;// ./src/v2/components/loginButton/LoginButton.ts
+;// ./src/v2/components/auth/loginButton/LoginButton.ts
 
 
 
@@ -133,7 +133,7 @@ class LoginButton extends lit/* LitElement */.WF {
     }
   };
   static styles = (0,lit/* css */.AH)`
-    :host { // default theme
+    :host { /* default theme */
       display: inline-block;
       position: relative;
       z-index: 400;
@@ -215,8 +215,9 @@ class LoginButton extends lit/* LitElement */.WF {
       background: transparent;
       outline: none;
       overflow: visible;
-      max-height: none;
-      max-width: none;
+      width: min(30rem, calc(100vw - 2rem));
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100dvh - 2rem);
     }
 
     .popup-dialog::backdrop {
@@ -229,7 +230,11 @@ class LoginButton extends lit/* LitElement */.WF {
       box-shadow: var(--popup-shadow);
       border: 1px solid var(--popup-border);
       border-radius: var(--border-radius-md, 0.5rem);
-      min-width: 480px;
+      width: min(30rem, calc(100vw - 2rem));
+      min-width: min(30rem, calc(100vw - 2rem));
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100dvh - 2rem);
+      overflow: auto;
       z-index: 1001;
     }
 
@@ -422,6 +427,43 @@ class LoginButton extends lit/* LitElement */.WF {
       font-size: 0.875rem;
       margin-top: 8px;
     }
+
+    @media (max-width: 40rem) {
+      .popup-dialog {
+        width: calc(100vw - 1rem);
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+      }
+
+      .popup-box {
+        width: calc(100vw - 1rem);
+        min-width: 0;
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+        border-radius: var(--border-radius-base, 0.3125rem);
+      }
+
+      .popup-top-menu,
+      .issuer-text-section,
+      .popup-footer {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+      }
+
+      .popup-footer {
+        flex-wrap: wrap;
+        gap: 0.625rem;
+      }
+
+      .popup-footer > button {
+        flex: 1 1 100%;
+      }
+
+      .issuer-text-row,
+      .issuer-input-field-row {
+        width: 100%;
+      }
+    }
   `;
   _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`;
   _errorMsg = '';
@@ -611,7 +653,7 @@ class LoginButton extends lit/* LitElement */.WF {
     `;
   }
 }
-;// ./src/v2/components/loginButton/index.ts
+;// ./src/v2/components/auth/loginButton/index.ts
 
 
 const LOGIN_BUTTON_TAG_NAME = 'solid-ui-login-button';
@@ -621,7 +663,7 @@ if (!customElements.get(LOGIN_BUTTON_TAG_NAME)) {
 
 /***/ },
 
-/***/ 765
+/***/ 830
 (__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
 
 
@@ -629,7 +671,7 @@ if (!customElements.get(LOGIN_BUTTON_TAG_NAME)) {
 
 // EXTERNAL MODULE: ./node_modules/lit/index.js
 var lit = __webpack_require__(161);
-;// ./src/v2/components/signupButton/SignupButton.ts
+;// ./src/v2/components/auth/signupButton/SignupButton.ts
 
 const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod';
 class SignupButton extends lit/* LitElement */.WF {
@@ -729,7 +771,7 @@ class SignupButton extends lit/* LitElement */.WF {
     `;
   }
 }
-;// ./src/v2/components/signupButton/index.ts
+;// ./src/v2/components/auth/signupButton/index.ts
 
 
 const SIGNUP_BUTTON_TAG_NAME = 'solid-ui-signup-button';
@@ -919,10 +961,10 @@ var lit = __webpack_require__(161);
 var iconBase = __webpack_require__(378);
 // EXTERNAL MODULE: external "SolidLogic"
 var external_SolidLogic_ = __webpack_require__(892);
-// EXTERNAL MODULE: ./src/v2/components/loginButton/index.ts + 2 modules
-var loginButton = __webpack_require__(568);
-// EXTERNAL MODULE: ./src/v2/components/signupButton/index.ts + 1 modules
-var signupButton = __webpack_require__(765);
+// EXTERNAL MODULE: ./src/v2/components/auth/loginButton/index.ts + 2 modules
+var loginButton = __webpack_require__(463);
+// EXTERNAL MODULE: ./src/v2/components/auth/signupButton/index.ts + 1 modules
+var signupButton = __webpack_require__(830);
 // EXTERNAL MODULE: ./node_modules/lit-html/lit-html.js
 var lit_html = __webpack_require__(752);
 ;// ./node_modules/lit-html/directives/if-defined.js
@@ -938,7 +980,7 @@ var lit_html = __webpack_require__(752);
 
 //# sourceMappingURL=if-defined.js.map
 
-;// ./src/v2/components/header/Header.ts
+;// ./src/v2/components/layout/header/Header.ts
 
 
 
@@ -1042,7 +1084,7 @@ class Header extends lit/* LitElement */.WF {
     }
   };
   static styles = (0,lit/* css */.AH)`
-  :host { // default theme
+  :host { /* default theme */
     display: block;
     --header-bg: var(--color-header-row-bg, #332746);
     --header-text: var(--color-header-text, #ffffff);
@@ -1062,7 +1104,7 @@ class Header extends lit/* LitElement */.WF {
     font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
   }
 
-  // for now light and dark are the same
+  /* for now light and dark are the same */
   :host([theme='dark']) {
     display: block;
     --header-bg: var(--color-header-row-bg, #332746);
@@ -1843,7 +1885,7 @@ class Header extends lit/* LitElement */.WF {
     `;
   }
 }
-;// ./src/v2/components/header/index.ts
+;// ./src/v2/components/layout/header/index.ts
 
 
 const HEADER_TAG_NAME = 'solid-ui-header';