@muonic/muon 0.0.2-experimental-181-3ac42d9.0 → 0.0.2-experimental-183-50f5b70.0

package/components/inputter/src/design-tokens.json

@@ -23,24 +23,42 @@
       },
       "padding": {
         "block": {
-          "description": "Padding space above and below the field text. Equal values in the block axis.",
-          "value": "{ theme.spacer.sm.value }"
+          "start": {
+            "description": "Padding space above the field text.",
+            "value": "{ theme.spacer.sm.value }"
+          },
+          "end": {
+            "description": "Padding space below the field text.",
+            "value": "{ theme.spacer.sm.value }"
+          }
         },
         "inline": {
-          "description": "Padding space left and right of the field text. Equal values in the inline axis.",
-          "value": "{ inputter.field.padding.block.value }"
-        }
-      },
-      "margin": {
-        "block": {
-          "description": "Margin space between the label and the field.",
-          "value": "{ theme.spacer.sm.value }"
+          "start": {
+            "description": "Padding space left of the field text. Equal values in the inline axis.",
+            "value": "{ theme.spacer.sm.value }"
+          },
+          "end": {
+            "description": "Padding space right of the field text. Equal values in the inline axis.",
+            "value": "{ theme.spacer.sm.value }"
+          }
         }
       },
       "border": {
         "color": {
           "description": "Border color of the field.",
           "value": "{ inputter.field.color.value }"
+        },
+        "radius": {
+          "description": "Border radius of the field.",
+          "value": 0
+        },
+        "style": {
+          "description": "Border style of the field.",
+          "value": "solid"
+        },
+        "width": {
+          "description": "Border width of the field.",
+          "value": "2px"
         }
       },
       "icon": {
@@ -50,7 +68,7 @@
         },
         "spacer": {
           "description": "Padding space used if an icon exists at the start or end of the field.",
-          "value": "calc({ inputter.field.padding.block.value } + { inputter.field.icon.size.value } + { inputter.field.padding.block.value })"
+          "value": "calc({ inputter.field.padding.block.start.value } + { inputter.field.icon.size.value } + { inputter.field.padding.block.end.value })"
         }
       },
       "date": {
@@ -98,6 +116,18 @@
       "color": {
         "description": "Label text color of field.",
         "value": "{ inputter.field.color.value }"
+      },
+      "margin": {
+        "block": {
+          "start": {
+            "description": "Margin space above the label.",
+            "value": 0
+          },
+          "end": {
+            "description": "Margin space below the label.",
+            "value": "{ theme.spacer.sm.value }"
+          }
+        }
       }
     },
     "placeholder": {
@@ -109,10 +139,12 @@
     "mask": {
       "__private_color": {
         "value": "{ theme.color.darkest.value }",
-        "modify": [{
-          "type": "brighten",
-          "amount": 2.75
-        }]
+        "modify": [
+          {
+            "type": "brighten",
+            "amount": 2.75
+          }
+        ]
       },
       "color": {
         "description": "Text color for the mask of the inputter. Defaults to brightened version of the darkest color.",
@@ -132,10 +164,12 @@
     "hover": {
       "__private_color": {
         "value": "{ inputter.field.color.value }",
-        "modify": [{
-          "type": "darken",
-          "amount": 1.5
-        }]
+        "modify": [
+          {
+            "type": "darken",
+            "amount": 1.5
+          }
+        ]
       },
       "color": {
         "description": "Color of the field on `hover` state. Defaults to a darkened version of the color.",
@@ -163,6 +197,18 @@
         "color": {
           "description": "Outline color for `keyboard focus` state. Defaults to theme's focus color.",
           "value": "{ theme.color.focus.value }"
+        },
+        "offset": {
+          "description": "Outline offset for `keyboard focus` state. Defaults to theme's focus color.",
+          "value": 0
+        },
+        "style": {
+          "description": "Outline style for `keyboard focus` state. Defaults to theme's focus color.",
+          "value": "solid"
+        },
+        "width": {
+          "description": "Outline width for `keyboard focus` state. Defaults to theme's focus color.",
+          "value": "3px"
         }
       }
     },
@@ -180,10 +226,12 @@
       "background": {
         "__private_color": {
           "value": "{ inputter.disabled.color.value }",
-          "modify": [{
-            "type": "brighten",
-            "amount": 1
-          }]
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 1
+            }
+          ]
         },
         "color": {
           "description": "Disabled background color. Defaults to a brightened version of theme's disabled color.",
@@ -198,6 +246,12 @@
       }
     },
     "validation": {
+      "font": {
+        "size": {
+          "description": "Font size for the validation.",
+          "value": "14px"
+        }
+      },
       "margin": {
         "block": {
           "description": "Margin space above and below the validation message. Equal values in the block axis.",
@@ -226,6 +280,12 @@
       }
     },
     "detail": {
+      "font": {
+        "size": {
+          "description": "Font size for the detail.",
+          "value": "12px"
+        }
+      },
       "color": {
         "description": "Text color for the detail.",
         "value": "{ inputter.field.color.value }"
@@ -237,10 +297,21 @@
         }
       },
       "heading": {
+        "font": {
+          "size": {
+            "value": "14px"
+          }
+        },
         "margin": {
           "block": {
-            "description": "Margin space between the detail heading and the field.",
-            "value": "{ theme.spacer.sm.value }"
+            "start": {
+              "description": "Margin space above the detail heading.",
+              "value": 0
+            },
+            "end": {
+              "description": "Margin space below the detail heading.",
+              "value": "{ theme.spacer.sm.value }"
+            }
           }
         },
         "gap": {
@@ -251,8 +322,14 @@
       "content": {
         "margin": {
           "block": {
-            "description": "Margin space between the detail's heading and content.",
-            "value": "{ theme.spacer.sm.value }"
+            "start": {
+              "description": "Margin space above the detail content.",
+              "value": 0
+            },
+            "end": {
+              "description": "Margin space below the detail content.",
+              "value": "{ theme.spacer.sm.value }"
+            }
           }
         },
         "padding": {
@@ -285,22 +362,42 @@
       "focus": {
         "outline": {
           "color": {
-            "description": "Outline color of the detail on `keyboard focus` state.",
+            "description": "Outline color for `keyboard focus` state. Defaults to theme's focus color.",
             "value": "{ inputter.focus.outline.color.value }"
+          },
+          "offset": {
+            "description": "Outline offset for `keyboard focus` state. Defaults to theme's focus color.",
+            "value": "{ inputter.focus.outline.offset.value }"
+          },
+          "style": {
+            "description": "Outline style for `keyboard focus` state. Defaults to theme's focus color.",
+            "value": "{ inputter.focus.outline.style.value }"
+          },
+          "width": {
+            "description": "Outline width for `keyboard focus` state. Defaults to theme's focus color.",
+            "value": "{ inputter.focus.outline.width.value }"
           }
         }
       },
       "border": {
         "__private_color": {
           "value": "{ inputter.field.color.value }",
-          "modify": [{
-            "type": "brighten",
-            "amount": 3
-          }]
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 3
+            }
+          ]
         },
         "color": {
           "description": "Border color of the detail. Defaults to a brightened version of the field color.",
           "value": "{ inputter.detail.border.__private_color.value }"
+        },
+        "style": {
+          "value": "solid"
+        },
+        "width": {
+          "value": "3px"
         }
       }
     }

package/components/inputter/src/inputter-styles-detail.css

@@ -9,7 +9,8 @@
 
   & .details {
     color: $INPUTTER_DETAIL_COLOR;
-    margin-block-start: $INPUTTER_DETAIL_MARGIN_BLOCK;
+    margin-block-start: $INPUTTER_DETAIL_MARGIN_BLOCK_START;
+    margin-block-end: $INPUTTER_DETAIL_MARGIN_BLOCK_END;
   }
 
   & .toggle {
@@ -24,8 +25,9 @@
     column-gap: $INPUTTER_DETAIL_HEADING_GAP;
     width: fit-content;
     cursor: pointer;
-    font-size: 14px;
-    margin-block-start: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK;
+    font-size: $INPUTTER_DETAIL_HEADING_FONT_SIZE;
+    margin-block-start: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK_START;
+    margin-block-end: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK_END;
 
     &:hover {
       text-decoration: underline;
@@ -42,18 +44,19 @@
 
     &:focus-visible {
       outline-color: $INPUTTER_DETAIL_FOCUS_OUTLINE_COLOR;
-      outline-style: solid;
-      outline-width: 3px;
-      outline-offset: 0;
+      outline-offset: $INPUTTER_DETAIL_FOCUS_OUTLINE_OFFSET;
+      outline-style: $INPUTTER_DETAIL_FOCUS_OUTLINE_STYLE;
+      outline-width: $INPUTTER_DETAIL_FOCUS_OUTLINE_WIDTH;
     }
   }
 
   & .content {
-    margin-block-start: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK;
+    margin-block-start: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK_START;
+    margin-block-end: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK_END;
     padding-inline-start: $INPUTTER_DETAIL_CONTENT_PADDING_INLINE;
     font-size: 12px;
-    border-inline-start-style: solid;
-    border-inline-start-width: 3px;
     border-inline-start-color: $INPUTTER_DETAIL_BORDER_COLOR;
+    border-inline-start-style: $INPUTTER_DETAIL_BORDER_STYLE;
+    border-inline-start-width: $INPUTTER_DETAIL_BORDER_WIDTH;
   }
 }

package/components/inputter/src/inputter-styles.css

@@ -4,6 +4,9 @@
   display: block;
 
   & ::slotted(label) {
+    display: inline-block;
+    margin-block-start: $INPUTTER_LABEL_MARGIN_BLOCK_START;
+    margin-block-end: $INPUTTER_LABEL_MARGIN_BLOCK_END;
     color: $INPUTTER_LABEL_COLOR;
   }
 
@@ -23,16 +26,16 @@
   select,
   textarea)) {
     margin: 0; /* NOTE: remove `margin: 2px` Safari user agent */
-    padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK;
-    padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK;
-    padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE;
-    padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE;
+    padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK_START;
+    padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK_END;
+    padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE_START;
+    padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE_END;
     color: $INPUTTER_FIELD_COLOR;
     background-color: $INPUTTER_FIELD_BACKGROUND_COLOR;
-    border-width: 2px;
-    border-style: solid;
+    border-width: $INPUTTER_FIELD_BORDER_WIDTH;
+    border-style: $INPUTTER_FIELD_BORDER_STYLE;
     border-color: $INPUTTER_FIELD_BORDER_COLOR;
-    border-radius: 0;
+    border-radius: $INPUTTER_FIELD_BORDER_RADIUS;
     font-family: $INPUTTER_FIELD_FONT_FAMILY;
     font-size: $INPUTTER_FIELD_FONT_SIZE;
   }
@@ -64,9 +67,9 @@
     border-color: $INPUTTER_FOCUS_BORDER_COLOR;
     color: $INPUTTER_FOCUS_COLOR;
     outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
-    outline-offset: 0;
-    outline-style: solid;
-    outline-width: 3px;
+    outline-offset: $INPUTTER_FOCUS_OUTLINE_OFFSET;
+    outline-style: $INPUTTER_FOCUS_OUTLINE_STYLE;
+    outline-width: $INPUTTER_FOCUS_OUTLINE_WIDTH;
   }
 
   & .has-disabled {
@@ -92,7 +95,6 @@
   }
 
   & .wrapper {
-    margin-block-start: $INPUTTER_FIELD_MARGIN_BLOCK;
     max-width: fit-content;
     position: relative;
   }
@@ -134,9 +136,9 @@
     input[type="radio"]:focus-visible)) {
       border-color: $INPUTTER_FOCUS_BORDER_COLOR;
       outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
-      outline-offset: 0;
-      outline-style: solid;
-      outline-width: 3px;
+      outline-offset: $INPUTTER_FOCUS_OUTLINE_OFFSET;
+      outline-style: $INPUTTER_FOCUS_OUTLINE_STYLE;
+      outline-width: $INPUTTER_FOCUS_OUTLINE_WIDTH;
     }
 
     &.has-disabled {
@@ -229,7 +231,7 @@
   & .select {
     & .wrapper {
       & inputter-icon {
-        right: calc($INPUTTER_FIELD_PADDING_INLINE + 2px); /* NOTE: the 2px is the width of the border */
+        right: calc($INPUTTER_FIELD_PADDING_INLINE_END + $INPUTTER_FIELD_BORDER_WIDTH);
       }
     }
   }
@@ -237,7 +239,7 @@
   & .search {
     & .wrapper {
       & inputter-icon {
-        left: calc($INPUTTER_FIELD_PADDING_INLINE + 2px); /* NOTE: the 2px is the width of the border */
+        left: calc($INPUTTER_FIELD_PADDING_INLINE_START + $INPUTTER_FIELD_BORDER_WIDTH);
       }
     }
   }
@@ -257,14 +259,14 @@
     }
 
     & .input-mask {
-      padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK;
-      padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK;
-      padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE;
-      padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE;
-      border-width: 2px;
-      border-style: solid;
+      padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK_START;
+      padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK_END;
+      padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE_START;
+      padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE_END;
+      border-width: $INPUTTER_FIELD_BORDER_WIDTH;
+      border-style: $INPUTTER_FIELD_BORDER_STYLE;
       border-color: transparent;
-      border-radius: 0;
+      border-radius: $INPUTTER_FIELD_BORDER_RADIUS;
       position: absolute;
       top: 0;
       right: 0;
@@ -273,7 +275,7 @@
       color: $INPUTTER_MASK_COLOR;
       pointer-events: none;
       white-space: pre;
-      line-height: normal;
+      line-height: initial;
       text-align: start;
     }
 
@@ -298,8 +300,9 @@
   }
 
   & .helper {
-    margin-block-start: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK;
+    margin-block-start: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK_START;
+    margin-block-end: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK_END;
     color: $INPUTTER_DETAIL_COLOR;
-    font-size: 14px;
+    font-size: $INPUTTER_DETAIL_HEADING_FONT_SIZE;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-181-3ac42d9.0",
+  "version": "0.0.2-experimental-183-50f5b70.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -26,7 +26,7 @@
     "@rollup/plugin-virtual": "3.0.1",
     "@web/dev-server": "0.2.1",
     "@web/dev-server-rollup": "0.5.0",
-    "@web/dev-server-storybook": "0.7.1",
+    "@web/dev-server-storybook": "0.7.0",
     "@web/storybook-prebuilt": "0.1.34",
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "app-root-path": "3.1.0",