@toheeb/base 1.5.1 → 1.5.6

package/base-settings.js

@@ -119,6 +119,8 @@ class BaseSettings extends HTMLElement {
     
         ._bs button[type=submit] {
           display: flex;
+          justify-content: center;
+          align-items: center;
           border: 0;
           margin: auto;
           padding: .25em;
@@ -137,6 +139,10 @@ class BaseSettings extends HTMLElement {
           justify-content: space-between;
           gap: calc(.25 * var(--bbg)) calc(.75 * var(--bbg));
         }
+
+        ._bs .modes {
+          margin-top: var(--bbg);
+        }
     
         ._bs .fields label:not([hidden]) {
           display: grid;
@@ -202,17 +208,25 @@ class BaseSettings extends HTMLElement {
 
       // Indent Mode
       {
-        const mode_indent = root_styles.getPropertyValue("--base-mode-indent").trim();
         const label_mode_indent = this.querySelector("#base-mode-indent").closest("label");
+        const has_other_sheet = doc_sheets.some(sheet => sheet.title?.toLowerCase()?.trim() != "base");
+        const mode_indent = root_styles.getPropertyValue("--base-mode-indent").trim();
         
-        if (mode_indent) {
-          label_mode_indent.hidden = false;
-          this.querySelector("#base-mode-indent").checked = parseInt(mode_indent) === 1;
-        } else {
+        if (has_other_sheet) {
           label_mode_indent.hidden = true;
+          mode_indent.checked = false;
+        } else {
+
+          if (mode_indent) {
+            label_mode_indent.hidden = false;
+            this.querySelector("#base-mode-indent").checked = parseInt(mode_indent) === 1;
+          } else {
+            label_mode_indent.hidden = true;
+          }
         }
       }
       
+      
       // Font Family
       {
         const font_family = root_styles.getPropertyValue("--base-font-family").trim();

package/base.css

@@ -122,8 +122,9 @@ small, ::marker
 select::picker-icon {
   --bfs: var(--bfs-075);
   font-size: calc(var(--bfs) * 1rem);
-  line-height: 2.2em;
-  transform-origin: 50% 55%;
+  /* line-height: 2.2em; */
+  /* line-height: inherit */
+  /* transform-origin: 50%; */
 }
 
 /* 5 */
@@ -761,16 +762,24 @@ select,
   appearance: base-select;
 }
 
+
 select {
   font: inherit;
-  height: 2em;
-  padding: 0 .5em .2em .3em;
   width: fit-content;
   gap: 2em;
+  padding: 0 .3em .15em .3em;
+  align-items: center;
+
+  /* Use lineheight over height to align ::picker to center. Sum to 2em considering padding bottom and border top & bottom */
+  line-height: 1.725em;
 }
 
 select::picker-icon {
   transition: .4s rotate;
+
+  /* avoid cutoff upon clicked */
+  transform-origin: 40% 50%;
+  transform: translateX(-1px);
 }
 
 select:open::picker-icon {

package/base.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <link rel="stylesheet" href="./base.css">
+  <link rel="stylesheet" href="./base.css" title="Base">
   <meta name="color-scheme" content="darks slight">
   <script src="./base-settings.js"></script>
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toheeb/base",
-  "version": "1.5.1",
+  "version": "1.5.6",
   "description": "A classless stylesheet for Personalizable Web Design",
   "main": "index.js",
   "scripts": {