@m3e/form-field 1.0.0-rc.2 → 1.0.0-rc.4

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

package/dist/custom-elements.json

@@ -445,6 +445,9 @@
                 {
                   "name": "checkValidity",
                   "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  },
                   "description": "Whether to check validity.",
                   "optional": true
                 }
@@ -1646,25 +1649,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -1962,6 +1946,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2498,6 +2493,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -2547,16 +2547,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -2571,6 +2561,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/html-custom-data.json

@@ -4,7 +4,7 @@
   "tags": [
     {
       "name": "m3e-form-field",
-      "description": "A container for form controls that applies Material Design styling and behavior.\n---\n\n\n### **Methods:**\n - **notifyControlStateChange(checkValidity): _void_** - Notifies the form field that the state of the hosted `control` has changed.\n\n### **Slots:**\n - _default_ - Renders the control of the field.\n- **prefix** - Renders content before the fields's control.\n- **prefix-text** - Renders text before the fields's control.\n- **suffix** - Renders content after the fields's control.\n- **suffix-text** - Renders text after the fields's control.\n- **hint** - Renders hint text in the fields's subscript, when the control is valid.\n- **error** - Renders error text in the fields's subscript, when the control is invalid.\n\n### **CSS Properties:**\n - **--m3e-form-field-font-size** - Font size for the form field container text. _(default: undefined)_\n- **--m3e-form-field-font-weight** - Font weight for the form field container text. _(default: undefined)_\n- **--m3e-form-field-line-height** - Line height for the form field container text. _(default: undefined)_\n- **--m3e-form-field-tracking** - Letter spacing for the form field container text. _(default: undefined)_\n- **--m3e-form-field-label-font-size** - Font size for the floating label. _(default: undefined)_\n- **--m3e-form-field-label-font-weight** - Font weight for the floating label. _(default: undefined)_\n- **--m3e-form-field-label-line-height** - Line height for the floating label. _(default: undefined)_\n- **--m3e-form-field-label-tracking** - Letter spacing for the floating label. _(default: undefined)_\n- **--m3e-form-field-subscript-font-size** - Font size for hint and error text. _(default: undefined)_\n- **--m3e-form-field-subscript-font-weight** - Font weight for hint and error text. _(default: undefined)_\n- **--m3e-form-field-subscript-line-height** - Line height for hint and error text. _(default: undefined)_\n- **--m3e-form-field-subscript-tracking** - Letter spacing for hint and error text. _(default: undefined)_\n- **--m3e-form-field-color** - Text color for the form field container. _(default: undefined)_\n- **--m3e-form-field-subscript-color** - Color for hint and error text. _(default: undefined)_\n- **--m3e-form-field-invalid-color** - Color used when the control is invalid. _(default: undefined)_\n- **--m3e-form-field-focused-outline-color** - Outline color when focused. _(default: undefined)_\n- **--m3e-form-field-focused-color** - Label color when focused. _(default: undefined)_\n- **--m3e-form-field-outline-color** - Outline color in outlined variant. _(default: undefined)_\n- **--m3e-form-field-container-color** - Background color in filled variant. _(default: undefined)_\n- **--m3e-form-field-hover-container-color** - Hover background color in filled variant. _(default: undefined)_\n- **--m3e-form-field-width** - Width of the form field container. _(default: undefined)_\n- **--m3e-form-field-icon-size** - Size of prefix and suffix icons. _(default: undefined)_\n- **--m3e-outlined-form-field-container-shape** - Corner radius for outlined container. _(default: undefined)_\n- **--m3e-form-field-container-shape** - Corner radius for filled container. _(default: undefined)_\n- **--m3e-form-field-hover-container-opacity** - Opacity for hover background in filled variant. _(default: undefined)_\n- **--m3e-form-field-disabled-opacity** - Opacity for disabled text. _(default: undefined)_\n- **--m3e-form-field-disabled-container-opacity** - Opacity for disabled container background. _(default: undefined)_",
+      "description": "A container for form controls that applies Material Design styling and behavior.\n---\n\n\n### **Methods:**\n - **notifyControlStateChange(checkValidity: _boolean_): _void_** - Notifies the form field that the state of the hosted `control` has changed.\n\n### **Slots:**\n - _default_ - Renders the control of the field.\n- **prefix** - Renders content before the fields's control.\n- **prefix-text** - Renders text before the fields's control.\n- **suffix** - Renders content after the fields's control.\n- **suffix-text** - Renders text after the fields's control.\n- **hint** - Renders hint text in the fields's subscript, when the control is valid.\n- **error** - Renders error text in the fields's subscript, when the control is invalid.\n\n### **CSS Properties:**\n - **--m3e-form-field-font-size** - Font size for the form field container text. _(default: undefined)_\n- **--m3e-form-field-font-weight** - Font weight for the form field container text. _(default: undefined)_\n- **--m3e-form-field-line-height** - Line height for the form field container text. _(default: undefined)_\n- **--m3e-form-field-tracking** - Letter spacing for the form field container text. _(default: undefined)_\n- **--m3e-form-field-label-font-size** - Font size for the floating label. _(default: undefined)_\n- **--m3e-form-field-label-font-weight** - Font weight for the floating label. _(default: undefined)_\n- **--m3e-form-field-label-line-height** - Line height for the floating label. _(default: undefined)_\n- **--m3e-form-field-label-tracking** - Letter spacing for the floating label. _(default: undefined)_\n- **--m3e-form-field-subscript-font-size** - Font size for hint and error text. _(default: undefined)_\n- **--m3e-form-field-subscript-font-weight** - Font weight for hint and error text. _(default: undefined)_\n- **--m3e-form-field-subscript-line-height** - Line height for hint and error text. _(default: undefined)_\n- **--m3e-form-field-subscript-tracking** - Letter spacing for hint and error text. _(default: undefined)_\n- **--m3e-form-field-color** - Text color for the form field container. _(default: undefined)_\n- **--m3e-form-field-subscript-color** - Color for hint and error text. _(default: undefined)_\n- **--m3e-form-field-invalid-color** - Color used when the control is invalid. _(default: undefined)_\n- **--m3e-form-field-focused-outline-color** - Outline color when focused. _(default: undefined)_\n- **--m3e-form-field-focused-color** - Label color when focused. _(default: undefined)_\n- **--m3e-form-field-outline-color** - Outline color in outlined variant. _(default: undefined)_\n- **--m3e-form-field-container-color** - Background color in filled variant. _(default: undefined)_\n- **--m3e-form-field-hover-container-color** - Hover background color in filled variant. _(default: undefined)_\n- **--m3e-form-field-width** - Width of the form field container. _(default: undefined)_\n- **--m3e-form-field-icon-size** - Size of prefix and suffix icons. _(default: undefined)_\n- **--m3e-outlined-form-field-container-shape** - Corner radius for outlined container. _(default: undefined)_\n- **--m3e-form-field-container-shape** - Corner radius for filled container. _(default: undefined)_\n- **--m3e-form-field-hover-container-opacity** - Opacity for hover background in filled variant. _(default: undefined)_\n- **--m3e-form-field-disabled-opacity** - Opacity for disabled text. _(default: undefined)_\n- **--m3e-form-field-disabled-container-opacity** - Opacity for disabled container background. _(default: undefined)_",
       "attributes": [
         {
           "name": "float-label",

package/dist/index.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
+import { LitElement, nothing, html, css, unsafeCSS } from 'lit';
 import { AttachInternals, MutationController, ResizeController, FocusController, HoverController, PressedController, isReadOnlyMixin, DesignToken, hasAssignedNodes, getTextContent } from '@m3e/core';
 import { M3eAriaDescriber } from '@m3e/core/a11y';
 
@@ -299,7 +299,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals(LitE
     }
     /**
      * Notifies the form field that the state of the hosted `control` has changed.
-     * @param [checkValidity=false] Whether to check validity.
+     * @param {boolean} [checkValidity=false] Whether to check validity.
      */
     notifyControlStateChange(checkValidity = false) {
         this._required = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.required === true;
@@ -506,6 +506,29 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
         M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
     }
 };
+(() => {
+    const lightDomStyle = new CSSStyleSheet();
+    lightDomStyle.replaceSync(css `
+        m3e-form-field input::placeholder,
+        m3e-form-field textarea::placeholder {
+          user-select: none;
+          color: currentColor;
+          transition: opacity ${DesignToken.motion.duration.extraLong1};
+        }
+        m3e-form-field[float-label="auto"]:not(.-float-label).-with-label input::placeholder,
+        m3e-form-field[float-label="auto"]:not(.-float-label).-with-label textarea::placeholder {
+          opacity: 0;
+          transition: opacity 0s;
+        }
+        @media (prefers-reduced-motion) {
+          m3e-form-field input::placeholder,
+          m3e-form-field textarea::placeholder {
+            transition: none !important;
+          }
+        }
+      `.toString());
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
+})();
 /** The styles of the element. */
 M3eFormFieldElement.styles = css `
     :host {
@@ -581,7 +604,7 @@ M3eFormFieldElement.styles = css `
         line-height ${DesignToken.motion.duration.short4}`)};
     }
     :host(.-with-select) .label {
-      margin-right: 1.5rem;
+      margin-inline-end: 1.5rem;
     }
     ::slotted([slot="label"]) {
       white-space: nowrap;
@@ -654,41 +677,27 @@ M3eFormFieldElement.styles = css `
     :host([variant="outlined"]) ::slotted(m3e-input-chip-set) {
       margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4);
     }
-    ::slotted(:not([slot])::part(focus-ring)) {
-      display: none;
-    }
-    ::slotted(input)::placeholder,
-    ::slotted(textarea)::placeholder {
-      user-select: none;
-      color: currentColor;
-      transition: opacity ${DesignToken.motion.duration.extraLong1};
-    }
     :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
       font-size: inherit;
     }
-    :host([float-label="auto"]:not(.-float-label).-with-label) ::slotted(input)::placeholder,
-    :host([float-label="auto"]:not(.-float-label).-with-label) ::slotted(textarea)::placeholder,
+
     :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text,
     :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text {
       opacity: 0;
       transition: opacity 0s;
     }
     .prefix {
-      margin-left: 1rem;
+      margin-inline-start: 1rem;
     }
     :host(.-with-prefix) .prefix {
-      margin-right: 1rem;
-      margin-left: 0.75rem;
-    }
-    .suffix {
-      margin-right: 1rem;
+      margin-inline-end: 1rem;
+      margin-inline-start: 0.75rem;
     }
     :host(.-with-suffix) .suffix {
-      margin-left: 1rem;
-      margin-right: 0.75rem;
+      margin-inline-start: 0.25rem;
     }
     :host(.-with-suffix.-with-select) .suffix {
-      margin-left: unset;
+      margin-inline-start: unset;
     }
     :host(.-with-select) .suffix-text {
       display: none;
@@ -707,17 +716,17 @@ M3eFormFieldElement.styles = css `
     }
     :host([variant="outlined"]) .pseudo-label {
       visibility: hidden;
-      margin-right: 0.25rem;
+      margin-inline-end: 0.25rem;
       font-size: var(--_form-field-label-font-size);
       line-height: var(--_form-field-label-line-height);
       letter-spacing: var(--_form-field-label-tracking);
       max-width: 100%;
-      transition-property: max-width, margin-right;
+      transition-property: max-width, margin-inline-end;
       transition-duration: 1ms;
     }
     :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label {
       max-width: 0;
-      margin-right: 0px;
+      margin-inline-end: 0px;
       transition-delay: ${DesignToken.motion.duration.short2};
     }
     :host([variant="outlined"]) .outline-start,
@@ -731,9 +740,6 @@ M3eFormFieldElement.styles = css `
     :host([variant="outlined"]:not(.-with-label)) .outline-notch {
       display: none;
     }
-    :host([variant="outlined"].-with-suffix:not(.-with-select)) .outline-notch {
-      margin-right: -0.75rem;
-    }
     :host([variant="outlined"]) .outline-start {
       min-width: 0.75rem;
       border-top-style: solid;
@@ -917,9 +923,7 @@ M3eFormFieldElement.styles = css `
       .outline-start,
       .outline-notch,
       .outline-end,
-      .pseudo-label,
-      ::slotted(input)::placeholder,
-      ::slotted(textarea)::placeholder {
+      .pseudo-label {
         transition: none !important;
       }
     }