@editora/ui-core 0.1.9 → 0.1.12

package/dist/textarea.cjs.js

@@ -0,0 +1,329 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-1b301e7f.js"),_=`
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  </svg>
+`,y=`
+  :host {
+    --ui-textarea-bg: var(--ui-color-surface, #ffffff);
+    --ui-textarea-text: var(--ui-color-text, #0f172a);
+    --ui-textarea-muted: var(--ui-color-muted, #64748b);
+    --ui-textarea-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-textarea-accent: var(--ui-color-primary, #2563eb);
+    --ui-textarea-danger: var(--ui-color-danger, #dc2626);
+    --ui-textarea-success: var(--ui-color-success, #16a34a);
+    --ui-textarea-radius: 12px;
+    --ui-textarea-padding-x: 12px;
+    --ui-textarea-padding-y: 10px;
+    --ui-textarea-min-height: 110px;
+    --ui-textarea-shadow: none;
+
+    color-scheme: light dark;
+    display: inline-grid;
+    inline-size: min(100%, 520px);
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .shell {
+    min-inline-size: 0;
+    display: grid;
+    gap: 7px;
+    color: var(--ui-textarea-text);
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: grid;
+    gap: 3px;
+  }
+
+  .meta[hidden] {
+    display: none;
+  }
+
+  .label {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--ui-textarea-text);
+  }
+
+  .description {
+    font-size: 12px;
+    line-height: 1.3;
+    color: var(--ui-textarea-muted);
+  }
+
+  .field {
+    min-inline-size: 0;
+    position: relative;
+    border: 1px solid var(--ui-textarea-border);
+    border-radius: var(--ui-textarea-radius);
+    background: var(--ui-textarea-bg);
+    box-shadow: var(--ui-textarea-shadow);
+    transition:
+      border-color 160ms ease,
+      box-shadow 160ms ease,
+      background-color 160ms ease;
+  }
+
+  .field:focus-within {
+    border-color: color-mix(in srgb, var(--ui-textarea-focus) 72%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-textarea-focus) 22%, transparent),
+      var(--ui-textarea-shadow);
+  }
+
+  textarea {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-textarea-min-height);
+    border: 0;
+    background: transparent;
+    color: var(--ui-textarea-text);
+    resize: vertical;
+    outline: none;
+    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: var(--ui-textarea-padding-y) var(--ui-textarea-padding-x);
+    border-radius: inherit;
+  }
+
+  textarea::placeholder {
+    color: color-mix(in srgb, var(--ui-textarea-muted) 76%, transparent);
+  }
+
+  textarea[readonly] {
+    cursor: default;
+  }
+
+  textarea[disabled] {
+    cursor: not-allowed;
+    opacity: 0.66;
+  }
+
+  .clear-btn {
+    position: absolute;
+    inset-inline-end: 8px;
+    inset-block-start: 8px;
+    inline-size: 26px;
+    block-size: 26px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--ui-textarea-muted);
+    cursor: pointer;
+    display: inline-grid;
+    place-items: center;
+    transition: background-color 140ms ease, color 140ms ease;
+  }
+
+  .clear-btn svg {
+    inline-size: 14px;
+    block-size: 14px;
+    pointer-events: none;
+  }
+
+  .clear-btn:hover {
+    background: color-mix(in srgb, var(--ui-textarea-text) 10%, transparent);
+    color: var(--ui-textarea-text);
+  }
+
+  .clear-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-textarea-focus) 74%, transparent);
+    outline-offset: 1px;
+  }
+
+  .clear-btn[hidden] {
+    display: none;
+  }
+
+  .footer {
+    min-inline-size: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 10px;
+    font-size: 12px;
+  }
+
+  .error {
+    color: var(--ui-textarea-danger);
+    line-height: 1.35;
+  }
+
+  .error:empty {
+    display: none;
+  }
+
+  .count {
+    color: var(--ui-textarea-muted);
+    white-space: nowrap;
+  }
+
+  .count[hidden] {
+    display: none;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-textarea-padding-x: 10px;
+    --ui-textarea-padding-y: 8px;
+    --ui-textarea-min-height: 84px;
+  }
+
+  :host([size="sm"]) textarea,
+  :host([size="1"]) textarea {
+    font-size: 13px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-textarea-padding-x: 14px;
+    --ui-textarea-padding-y: 12px;
+    --ui-textarea-min-height: 140px;
+  }
+
+  :host([size="lg"]) textarea,
+  :host([size="3"]) textarea {
+    font-size: 15px;
+  }
+
+  :host([density="compact"]) {
+    --ui-textarea-padding-y: 7px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-textarea-padding-y: 13px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-textarea-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 82%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="soft"]) {
+    --ui-textarea-bg: color-mix(in srgb, var(--ui-textarea-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-textarea-border: color-mix(in srgb, var(--ui-textarea-accent) 32%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="filled"]) {
+    --ui-textarea-bg: color-mix(in srgb, var(--ui-textarea-text) 6%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="ghost"]) .field {
+    box-shadow: none;
+    background: transparent;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-textarea-bg: #0f172a;
+    --ui-textarea-text: #e2e8f0;
+    --ui-textarea-muted: #93a4bd;
+    --ui-textarea-border: #334155;
+    --ui-textarea-accent: #93c5fd;
+    --ui-textarea-focus: #93c5fd;
+    --ui-textarea-shadow:
+      0 12px 32px rgba(2, 6, 23, 0.46),
+      0 24px 56px rgba(2, 6, 23, 0.42);
+  }
+
+  :host([tone="success"]) {
+    --ui-textarea-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-textarea-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-textarea-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([validation="error"]) .field {
+    border-color: color-mix(in srgb, var(--ui-textarea-danger) 74%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-textarea-danger) 22%, transparent);
+  }
+
+  :host([validation="success"]) .field {
+    border-color: color-mix(in srgb, var(--ui-textarea-success) 66%, transparent);
+  }
+
+  :host([radius="none"]) {
+    --ui-textarea-radius: 0;
+  }
+
+  :host([radius="large"]) {
+    --ui-textarea-radius: 16px;
+  }
+
+  :host([radius="full"]) {
+    --ui-textarea-radius: 24px;
+  }
+
+  :host([disabled]) .field,
+  :host([readonly]) .field {
+    background: color-mix(in srgb, var(--ui-textarea-bg) 78%, #94a3b8 22%);
+  }
+
+  :host([headless]) .meta,
+  :host([headless]) .footer {
+    display: none;
+  }
+
+  :host([headless]) .field {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field,
+    .clear-btn {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .field {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-textarea-bg: Canvas;
+      --ui-textarea-text: CanvasText;
+      --ui-textarea-muted: CanvasText;
+      --ui-textarea-border: CanvasText;
+      --ui-textarea-focus: Highlight;
+      --ui-textarea-accent: Highlight;
+      --ui-textarea-danger: Highlight;
+      --ui-textarea-success: Highlight;
+      --ui-textarea-shadow: none;
+    }
+
+    .clear-btn {
+      color: CanvasText;
+    }
+  }
+`;function d(h){return h.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function x(h,t){const e=Number(h);return Number.isFinite(e)?e:t}class p extends v.ElementBase{constructor(){super(),this._uid=`ui-textarea-${Math.random().toString(36).slice(2,9)}`,this._textarea=null,this._clearBtn=null,this._countEl=null,this._debounceTimer=null,this._formUnregister=null,this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this),this._onClear=this._onClear.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","rows","readonly","autofocus","resize","name","required","variant","color","radius","label","description","autosize","max-rows","show-count","density","tone","headless","data-error"]}connectedCallback(){super.connectedCallback(),this._tryRegisterWithForm()}disconnectedCallback(){this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="name"&&this._tryRegisterWithForm(),t==="value"&&this._textarea){const r=i||"";this._textarea.value!==r&&(this._textarea.value=r),this._syncDynamicUi(),this._applyAutosize();return}if(new Set(["placeholder","disabled","maxlength","minlength","rows","readonly","required","resize","name","validation","show-count","clearable","autosize","max-rows","variant","size","density","tone","headless","color","radius","autofocus"]).has(t)){this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),t==="autofocus"&&this.hasAttribute("autofocus")&&queueMicrotask(()=>{var r;(r=this._textarea)==null||r.focus()});return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}_tryRegisterWithForm(){var t;try{const e=(t=this.closest)==null?void 0:t.call(this,"ui-form"),i=this.getAttribute("name");if(!e||typeof e.registerField!="function"||!i)return;this._formUnregister=e.registerField(i,{name:i,getValue:()=>this.value,setValue:a=>{this.value=a},validate:async()=>this._textarea?{valid:this._textarea.checkValidity(),message:this._textarea.validationMessage||void 0}:{valid:!0},setError:a=>{a?(this.setAttribute("validation","error"),this.setAttribute("data-error",a)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}})}catch{}}_detachListeners(){this._textarea&&(this._textarea.removeEventListener("input",this._onInput),this._textarea.removeEventListener("change",this._onChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClear),this._clearBtn=null}_syncControlAttrs(){if(!this._textarea)return;const t=this.getAttribute("placeholder")||"",e=this.getAttribute("maxlength"),i=this.getAttribute("minlength"),a=x(this.getAttribute("rows"),4),r=this.hasAttribute("disabled"),c=this.hasAttribute("readonly"),n=this.hasAttribute("required"),o=this.getAttribute("name")||"",s=this.getAttribute("resize")||"vertical",g=this.getAttribute("validation"),b=this.getAttribute("color"),l=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=r,this._textarea.readOnly=c,this._textarea.required=n,this._textarea.rows=Math.max(1,a),this._textarea.name=o,this._textarea.style.resize=s,e&&Number.isFinite(Number(e))?this._textarea.maxLength=Number(e):this._textarea.removeAttribute("maxlength"),i&&Number.isFinite(Number(i))?this._textarea.minLength=Number(i):this._textarea.removeAttribute("minlength"),g==="error"?this._textarea.setAttribute("aria-invalid","true"):this._textarea.removeAttribute("aria-invalid"),b?this.style.setProperty("--ui-textarea-accent",b):this.style.removeProperty("--ui-textarea-accent"),l&&l!=="none"&&l!=="large"&&l!=="full"?this.style.setProperty("--ui-textarea-radius",l):this.style.removeProperty("--ui-textarea-radius");const u=[],m=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),f=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));m&&u.push(`${this._uid}-description`),f&&u.push(`${this._uid}-error`),(this.hasAttribute("show-count")||this.hasAttribute("maxlength"))&&u.push(`${this._uid}-count`),!!(this.getAttribute("label")||this.querySelector('[slot="label"]'))?this._textarea.setAttribute("aria-labelledby",`${this._uid}-label`):this._textarea.removeAttribute("aria-labelledby"),u.length?this._textarea.setAttribute("aria-describedby",u.join(" ")):this._textarea.removeAttribute("aria-describedby")}_syncDynamicUi(){var a;const t=((a=this._textarea)==null?void 0:a.value)||this.getAttribute("value")||"",e=this.getAttribute("maxlength"),i=this.hasAttribute("clearable");this._clearBtn&&(i&&t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden","")),this._countEl&&(this.hasAttribute("show-count")||!!e?(this._countEl.removeAttribute("hidden"),e&&Number.isFinite(Number(e))?this._countEl.textContent=`${t.length} / ${Number(e)}`:this._countEl.textContent=`${t.length}`):this._countEl.setAttribute("hidden",""))}_applyAutosize(){if(!this._textarea)return;if(!this.hasAttribute("autosize")){this._textarea.style.height="",this._textarea.style.overflowY="";return}this._textarea.style.height="auto";const t=this._textarea.scrollHeight,e=x(this.getAttribute("max-rows"),0);if(e>0){const i=getComputedStyle(this._textarea),a=parseFloat(i.lineHeight||"20")||20,r=parseFloat(i.borderTopWidth||"0")||0,c=parseFloat(i.borderBottomWidth||"0")||0,n=parseFloat(i.paddingTop||"0")||0,o=parseFloat(i.paddingBottom||"0")||0,s=a*e+r+c+n+o;this._textarea.style.height=`${Math.min(t,s)}px`,this._textarea.style.overflowY=t>s?"auto":"hidden";return}this._textarea.style.height=`${t}px`,this._textarea.style.overflowY="hidden"}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e,length:e.length,name:this.getAttribute("name")||""},bubbles:!0,composed:!0}))}_onInput(t){const e=t.target.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",e);const i=x(this.getAttribute("debounce"),0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emit("debounced-input",e),this._debounceTimer=null},i)):this._emit("debounced-input",e)}_onChange(t){const e=t.target.value;this._emit("change",e)}_onClear(t){t.preventDefault(),!(this.hasAttribute("disabled")||this.hasAttribute("readonly"))&&(this.value="",this._textarea&&(this._textarea.value="",this._textarea.focus()),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",""),this._emit("change",""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})))}render(){var o;const t=this.getAttribute("value")||"",e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",a=this.getAttribute("data-error")||"",r=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),n=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
+      <style>${y}</style>
+      <div class="shell" part="shell">
+        <div class="meta" part="meta" ${r?"":"hidden"}>
+          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${d(e)}</slot></label>
+          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${d(i)}</slot></div>
+        </div>
+
+        <div class="field" part="field">
+          <textarea part="textarea"></textarea>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${n?"":"hidden"}>${_}</button>
+        </div>
+
+        <div class="footer" part="footer">
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${d(a)}</slot></div>
+          <div id="${this._uid}-count" class="count" part="count" hidden></div>
+        </div>
+      </div>
+    `),this._detachListeners(),this._textarea=this.root.querySelector("textarea"),this._clearBtn=this.root.querySelector(".clear-btn"),this._countEl=this.root.querySelector(".count"),this._textarea&&(this._textarea.value=t,this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),this._textarea.addEventListener("input",this._onInput),this._textarea.addEventListener("change",this._onChange),(o=this._clearBtn)==null||o.addEventListener("click",this._onClear),this.hasAttribute("autofocus")&&queueMicrotask(()=>{var s;(s=this._textarea)==null||s.focus()}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"}}typeof customElements<"u"&&!customElements.get("ui-textarea")&&customElements.define("ui-textarea",p);exports.UITextarea=p;