semantic-forms 5.1.6 → 5.1.8

package/semanticForms.js

@@ -241,62 +241,62 @@ const semanticForms = () => {
             input.style.setProperty('min-height', '0')
             input.style.setProperty('max-height', 'none')
             input.style.setProperty('height', 'auto')
-  
+
             const handleInput = () => {
               // reset rows attribute to get accurate scrollHeight
               let maxRows = input.getAttribute('data-max-rows')
 
               if (maxRows) {
                 if (isNaN(maxRows) || Number(maxRows) <= 0) {
-                  console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`, )
+                  console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`)
                   maxRows = null
                 }
               }
 
               const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'
               input.setAttribute('rows', minRows)
-  
+
               // get the computed values object reference
               const style = window.getComputedStyle(input)
-  
+
               // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy)
               const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])
               const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])
               input.style.setProperty('overflow', 'hidden', 'important')
-              input.style.setProperty('width', (parseFloat(style['width']) - inlinePadding - inlineBorderWidth) + 'px')
+              input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')
               input.style.setProperty('box-sizing', 'content-box')
               input.style.setProperty('padding-inline', '0')
               input.style.setProperty('border-width', '0')
-              
+
               // get the base line height, and top / bottom padding
               const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])
-              const lineHeight = style['line-height'] === 'normal' 
-                ? parseFloat(style['height']) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)
+              const lineHeight = style['line-height'] === 'normal'
+                ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)
                 : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value
-  
+
               // get the scroll height (rounding to be safe to ensure cross browser consistency)
               const scrollHeight = Math.round(input.scrollHeight)
-  
+
               // undo overflow, width, border-width, box-sizing & inline padding overrides
               input.style.removeProperty('width')
               input.style.removeProperty('box-sizing')
               input.style.removeProperty('padding-inline')
               input.style.removeProperty('border-width')
               input.style.removeProperty('overflow')
-  
+
               // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number
               const rows = Math.round((scrollHeight - blockPadding) / lineHeight)
-  
+
               // set the calculated rows attribute (limited by rowLimit)
               if (maxRows) {
-                input.setAttribute("rows", "" + Math.min(rows, Number(maxRows)))
+                input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))
               } else {
-                input.setAttribute("rows", "" + rows)
+                input.setAttribute('rows', '' + rows)
               }
             }
-  
+
             input.addEventListener('input', handleInput)
-  
+
             // trigger the event to set the initial rows value
             input.dispatchEvent(new Event('input', { bubbles: true }))
           }

package/semanticForms.scss

@@ -1,6 +1,7 @@
 // #region global styles
 form.semanticForms, form.semanticForms.light, table.semanticForms {
   --semanticFormsFontFamily: sans-serif;
+  --semanticFormsFontSize: 16px;
   --semanticFormsFormBgColor: #fff;
   --semanticFormsFormSubBgColor: #f5f5f5;
   --semanticFormsTextColor: #000;
@@ -90,6 +91,7 @@ form.semanticForms.light,
 table.semanticForms,
 table.semanticForms.light {
   font-family: var(--semanticFormsFontFamily);
+  font-size: var(--semanticFormsFontSize);
   width: 100%;
   container-type: inline-size;
   container-name: semanticForm;
@@ -325,9 +327,11 @@ table.semanticForms.light {
     font-size: 100%;
     line-height: 1;
     user-select: none;
+    transform: scale(1);
+    transition: transform 180ms;
 
     &:active {
-      background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientDark) 0%, var(--semanticFormsButtonGradientLight) 100%);
+      transform: scale(0.97);
     }
   }
 
@@ -412,6 +416,71 @@ table.semanticForms.light {
     }
   }
 
+  // #region summary
+  details {
+    box-sizing: border-box; // ensure sizings match across browsers
+    position: relative;
+    background-color: var(--semanticFormsNestedFieldsetBgColor); // TODO: check if this is right
+    border: var(--semanticFormsNestedFieldsetBorder);
+    border-radius: var(--semanticFormsBorderRadius);
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 20px 10px 10px 10px;
+    margin-bottom: 15px;
+    min-height: calc(var(--semanticFormsFontSize) + 20px);
+
+    &::details-content {
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
+    }
+
+    summary {
+      margin: 0;
+      line-height: 1;
+      position: absolute;
+      top: 10px;
+      left: 22px;
+      transition: top 250ms;
+
+      &::-webkit-details-marker,
+      &::marker {
+        content: ''; // hide default arrow, as it cannot be animated
+      }
+
+      &::after {
+        // custom arrow
+        content: '';
+        border-width: .4rem;
+        border-style: solid;
+        border-color: transparent transparent transparent var(--semanticFormsTextColor);
+        position: absolute;
+        top: 0;
+        left: -10px;
+        transform: rotate(0);
+        transform-origin: .2rem 50%;
+        transition: 250ms transform ease;
+      }
+    }
+  }
+
+  details[open] {
+    padding-top: 35px; // TODO: remove this when animated detail label is reintroduced
+
+    &::details-content {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
+    }
+
+    summary {
+      &::after {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
   details[open], summary {
     margin-bottom: 10px;
   }
@@ -419,6 +488,7 @@ table.semanticForms.light {
   summary {
     cursor: pointer;
   }
+  // #endregion
 
   // update for scrollbars
   @supports (scrollbar-color: auto) {