@m3e/form-field 1.0.0-rc.1 → 1.0.0-rc.3

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,8 +3,8 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
-import { AttachInternals, Role, MutationController, ResizeController, FocusController, HoverController, PressedController, isReadOnlyMixin, DesignToken, hasAssignedNodes, getTextContent } from '@m3e/core';
+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';
 
 /**
@@ -145,7 +145,6 @@ const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  */
 var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
 /**
- * @summary
  * A container for form controls that applies Material Design styling and behavior.
  *
  * @description
@@ -216,7 +215,7 @@ var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldE
  * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.
  * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.
  */
-let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals(Role(LitElement, "none")) {
+let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals(LitElement) {
     constructor() {
         super();
         _M3eFormFieldElement_instances.add(this);
@@ -300,7 +299,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals(Role
     }
     /**
      * 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;
@@ -507,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 {
@@ -582,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;
@@ -655,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;
@@ -708,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,
@@ -732,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;
@@ -918,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;
       }
     }