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

package/dist/index.min.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{LitElement as t,nothing as e,html as i,unsafeCSS as o,css as s}from"lit";import{AttachInternals as r,MutationController as a,ResizeController as n,FocusController as l,HoverController as d,PressedController as h,isReadOnlyMixin as c,DesignToken as f,hasAssignedNodes as p,getTextContent as u}from"@m3e/core";import{M3eAriaDescriber as m}from"@m3e/core/a11y";
+import{LitElement as t,nothing as e,html as i,css as o,unsafeCSS as s}from"lit";import{AttachInternals as r,MutationController as a,ResizeController as n,FocusController as l,HoverController as d,PressedController as h,isReadOnlyMixin as c,DesignToken as f,hasAssignedNodes as p,getTextContent as u}from"@m3e/core";import{M3eAriaDescriber as m}from"@m3e/core/a11y";
 /**
  * Adapted from Angular Material Form Field Control
  * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts
@@ -88,7 +88,25 @@ function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       <span class="subscript" aria-hidden="true">
         <span class="error"><slot name="error">${this._validationMessage}</slot></span>
         <span class="hint"><slot name="hint"></slot></span>
-      </span>`}};Q=new WeakMap,X=new WeakMap,Y=new WeakMap,Z=new WeakMap,tt=new WeakMap,et=new WeakMap,it=new WeakMap,ot=new WeakMap,st=new WeakMap,rt=new WeakMap,at=new WeakMap,K=new WeakSet,nt=function(){return void 0!==w(this,Q,"f")?.shouldLabelFloat?!0===w(this,Q,"f").shouldLabelFloat:"string"==typeof w(this,Q,"f")?.value&&w(this,Q,"f").value.length>0},lt=function(t){t.stopImmediatePropagation(),t.stopPropagation()},dt=function(t){const e=t.target.assignedElements({flatten:!0});this.classList.toggle("-with-label",e.length>0),this._pseudoLabel=e[0]?.textContent??""},ht=function(t){this.classList.toggle("-with-prefix",p(t.target)),w(this,tt,"f").observe(this._prefix)},ct=function(t){this.classList.toggle("-with-suffix",p(t.target))},ft=function(){"outlined"===this.variant&&this._base.style.setProperty("--_prefix-width",`${this._prefix.clientWidth}px`)},pt=function(t){w(this,K,"m",gt).call(this,g(t.target))},ut=function(t){!w(this,Q,"f")||w(this,st,"f")||w(this,Q,"f").disabled||(w(this,Q,"f").onContainerClick?w(this,Q,"f").onContainerClick(t):w(this,Q,"f").focus())},mt=function(){this._invalid=!0,this.notifyControlStateChange()},bt=function(){this._invalid=!(w(this,Q,"f")?.checkValidity?.()??1),this.notifyControlStateChange()},vt=function(){this._invalid=!1,this.notifyControlStateChange()},gt=function(t){w(this,Q,"f")!==t&&(w(this,Q,"f")&&(w(this,rt,"f")&&m.removeDescription(w(this,Q,"f"),w(this,rt,"f")),w(this,at,"f")&&m.removeDescription(w(this,Q,"f"),w(this,at,"f")),w(this,Z,"f").unobserve(w(this,Q,"f")),w(this,Q,"f").removeEventListener("invalid",w(this,Y,"f")),w(this,Q,"f").form?.removeEventListener("reset",w(this,X,"f"))),_(this,Q,t,"f"),w(this,Q,"f")&&(w(this,Z,"f").observe(w(this,Q,"f")),w(this,Q,"f").addEventListener("invalid",w(this,Y,"f")),w(this,Q,"f").form?.addEventListener("reset",w(this,X,"f")),w(this,Q,"f").removeAttribute("aria-invalid"),w(this,rt,"f")&&m.describe(w(this,Q,"f"),w(this,rt,"f")),this.notifyControlStateChange()))},yt=function(){const t=u(this._hint,!0);t!==w(this,rt,"f")&&(w(this,Q,"f")&&w(this,rt,"f")&&m.removeDescription(w(this,Q,"f"),w(this,rt,"f")),_(this,rt,t,"f"),w(this,Q,"f")&&w(this,rt,"f")&&m.describe(w(this,Q,"f"),w(this,rt,"f")))},wt=function(){const t=u(this._error,!0);t!==w(this,at,"f")&&(w(this,Q,"f")&&w(this,at,"f")&&m.removeDescription(w(this,Q,"f"),w(this,at,"f")),_(this,at,t,"f"),w(this,Q,"f")&&w(this,at,"f")&&this._invalid&&m.describe(w(this,Q,"f"),w(this,at,"f")))},_t.styles=s`
+      </span>`}};Q=new WeakMap,X=new WeakMap,Y=new WeakMap,Z=new WeakMap,tt=new WeakMap,et=new WeakMap,it=new WeakMap,ot=new WeakMap,st=new WeakMap,rt=new WeakMap,at=new WeakMap,K=new WeakSet,nt=function(){return void 0!==w(this,Q,"f")?.shouldLabelFloat?!0===w(this,Q,"f").shouldLabelFloat:"string"==typeof w(this,Q,"f")?.value&&w(this,Q,"f").value.length>0},lt=function(t){t.stopImmediatePropagation(),t.stopPropagation()},dt=function(t){const e=t.target.assignedElements({flatten:!0});this.classList.toggle("-with-label",e.length>0),this._pseudoLabel=e[0]?.textContent??""},ht=function(t){this.classList.toggle("-with-prefix",p(t.target)),w(this,tt,"f").observe(this._prefix)},ct=function(t){this.classList.toggle("-with-suffix",p(t.target))},ft=function(){"outlined"===this.variant&&this._base.style.setProperty("--_prefix-width",`${this._prefix.clientWidth}px`)},pt=function(t){w(this,K,"m",gt).call(this,g(t.target))},ut=function(t){!w(this,Q,"f")||w(this,st,"f")||w(this,Q,"f").disabled||(w(this,Q,"f").onContainerClick?w(this,Q,"f").onContainerClick(t):w(this,Q,"f").focus())},mt=function(){this._invalid=!0,this.notifyControlStateChange()},bt=function(){this._invalid=!(w(this,Q,"f")?.checkValidity?.()??1),this.notifyControlStateChange()},vt=function(){this._invalid=!1,this.notifyControlStateChange()},gt=function(t){w(this,Q,"f")!==t&&(w(this,Q,"f")&&(w(this,rt,"f")&&m.removeDescription(w(this,Q,"f"),w(this,rt,"f")),w(this,at,"f")&&m.removeDescription(w(this,Q,"f"),w(this,at,"f")),w(this,Z,"f").unobserve(w(this,Q,"f")),w(this,Q,"f").removeEventListener("invalid",w(this,Y,"f")),w(this,Q,"f").form?.removeEventListener("reset",w(this,X,"f"))),_(this,Q,t,"f"),w(this,Q,"f")&&(w(this,Z,"f").observe(w(this,Q,"f")),w(this,Q,"f").addEventListener("invalid",w(this,Y,"f")),w(this,Q,"f").form?.addEventListener("reset",w(this,X,"f")),w(this,Q,"f").removeAttribute("aria-invalid"),w(this,rt,"f")&&m.describe(w(this,Q,"f"),w(this,rt,"f")),this.notifyControlStateChange()))},yt=function(){const t=u(this._hint,!0);t!==w(this,rt,"f")&&(w(this,Q,"f")&&w(this,rt,"f")&&m.removeDescription(w(this,Q,"f"),w(this,rt,"f")),_(this,rt,t,"f"),w(this,Q,"f")&&w(this,rt,"f")&&m.describe(w(this,Q,"f"),w(this,rt,"f")))},wt=function(){const t=u(this._error,!0);t!==w(this,at,"f")&&(w(this,Q,"f")&&w(this,at,"f")&&m.removeDescription(w(this,Q,"f"),w(this,at,"f")),_(this,at,t,"f"),w(this,Q,"f")&&w(this,at,"f")&&this._invalid&&m.describe(w(this,Q,"f"),w(this,at,"f")))},(()=>{const t=new CSSStyleSheet;t.replaceSync(o`
+        m3e-form-field input::placeholder,
+        m3e-form-field textarea::placeholder {
+          user-select: none;
+          color: currentColor;
+          transition: opacity ${f.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,t]})(),_t.styles=o`
     :host {
       display: inline-flex;
       flex-direction: column;
@@ -157,10 +175,10 @@ function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       line-height: var(--m3e-form-field-label-line-height, ${f.typescale.standard.body.small.lineHeight});
       letter-spacing: var(--m3e-form-field-label-tracking, ${f.typescale.standard.body.small.tracking});
       color: var(--_form-field-label-color, inherit);
-      transition: ${o(`top ${f.motion.duration.short4}, \n        font-size ${f.motion.duration.short4}, \n        line-height ${f.motion.duration.short4}`)};
+      transition: ${s(`top ${f.motion.duration.short4}, \n        font-size ${f.motion.duration.short4}, \n        line-height ${f.motion.duration.short4}`)};
     }
     :host(.-with-select) .label {
-      margin-right: 1.5rem;
+      margin-inline-end: 1.5rem;
     }
     ::slotted([slot="label"]) {
       white-space: nowrap;
@@ -189,7 +207,7 @@ function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       opacity: 0;
       margin-top: 0px;
       margin-bottom: 0.25rem;
-      transition: ${o(`opacity ${f.motion.duration.short4}, \n        margin-top ${f.motion.duration.short4}, \n        margin-bottom ${f.motion.duration.short4}`)};
+      transition: ${s(`opacity ${f.motion.duration.short4}, \n        margin-top ${f.motion.duration.short4}, \n        margin-bottom ${f.motion.duration.short4}`)};
     }
     :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript,
     :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript {
@@ -231,41 +249,27 @@ function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     :host([variant="outlined"]) ::slotted(m3e-input-chip-set) {
       margin-block: calc(calc(3.5rem + ${f.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 ${f.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;
@@ -284,17 +288,17 @@ function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
     :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: ${f.motion.duration.short2};
     }
     :host([variant="outlined"]) .outline-start,
@@ -308,9 +312,6 @@ function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     :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;
@@ -494,9 +495,7 @@ function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       .outline-start,
       .outline-notch,
       .outline-end,
-      .pseudo-label,
-      ::slotted(input)::placeholder,
-      ::slotted(textarea)::placeholder {
+      .pseudo-label {
         transition: none !important;
       }
     }