@editora/ui-core 0.1.25 → 0.2.1

package/dist/password-field.esm.js

@@ -17,20 +17,23 @@ const N = `
   </svg>
 `, I = `
   :host {
-    --ui-input-padding: var(--ui-padding, 10px 12px);
-    --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-input-action-size: 24px;
+    --ui-input-padding: var(--ui-padding, 0);
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-input-border-color: var(--ui-color-line, var(--ui-color-border, var(--ui-border-color, #cbd5e1)));
     --ui-input-border-width: 1px;
     --ui-input-border-style: solid;
     --ui-input-border: var(--ui-input-border-width) var(--ui-input-border-style) var(--ui-input-border-color);
-    --ui-input-border-radius: var(--ui-radius, 10px);
-    --ui-input-min-height: var(--ui-min-height, 40px);
+    --ui-input-border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-md, var(--ui-control-height-2, 32px)));
     --ui-input-width: 100%;
     --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-label-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-input-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-input-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-input-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-input-success: var(--ui-color-success, var(--ui-success, #15803d));
     --ui-input-warning: var(--ui-color-warning, var(--ui-warning, #b45309));
     --ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
@@ -38,7 +41,7 @@ const N = `
     --ui-input-gap: 8px;
     --ui-input-meta-gap: 4px;
     --ui-input-shell-gap: 8px;
-    --ui-input-placeholder: color-mix(in srgb, var(--ui-input-color) 40%, transparent);
+    --ui-input-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-input-color) 62%, transparent));
     --ui-password-field-strength-gap: 8px;
     --ui-password-field-track-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 10%, transparent);
     --ui-password-field-strength-weak: var(--ui-color-danger, #dc2626);
@@ -117,7 +120,7 @@ const N = `
     gap: var(--ui-input-shell-gap);
     box-sizing: border-box;
     min-block-size: var(--ui-input-min-height);
-    padding-inline: 10px;
+    padding-inline: var(--ui-input-pad-x);
     border: var(--ui-input-border);
     border-radius: var(--ui-input-border-radius);
     background: var(--ui-input-bg);
@@ -126,8 +129,13 @@ const N = `
   }
 
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-input-focus-ring) 56%, var(--ui-input-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-focus-ring) 24%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline-offset: -1px;
+  }
+
+  .shell:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-input-border-color));
   }
 
   .prefix,
@@ -191,7 +199,7 @@ const N = `
     border: none;
     background: transparent;
     color: inherit;
-    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 var(--ui-input-font-size)/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     padding: var(--ui-input-padding);
     min-block-size: calc(var(--ui-input-min-height) - 2px);
     margin: 0;
@@ -215,8 +223,9 @@ const N = `
     border: none;
     outline: none;
     cursor: pointer;
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-input-action-size);
+    block-size: var(--ui-input-action-size);
+    margin-block: var(--ui-input-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -254,7 +263,6 @@ const N = `
   }
 
   .toggle-btn:hover {
-    transform: translateY(-1px);
   }
 
   .clear-btn:focus-visible,
@@ -368,30 +376,27 @@ const N = `
     pointer-events: none;
   }
 
-  :host([size="sm"]),
+    :host([size="sm"]),
   :host([size="1"]) {
-    --ui-input-min-height: 34px;
-    --ui-input-padding: 7px 8px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-sm, var(--ui-control-height-1, 24px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-input-border-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
+    --ui-input-action-size: 24px;
+    --ui-input-action-bleed: -1px;
     --ui-input-shell-gap: 6px;
   }
 
-  :host([size="sm"]) input,
-  :host([size="1"]) input {
-    font-size: 12px;
-  }
-
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-input-min-height: 46px;
-    --ui-input-padding: 11px 14px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-lg, var(--ui-control-height-3, 40px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-input-border-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
+    --ui-input-action-size: 28px;
     --ui-input-shell-gap: 10px;
   }
 
-  :host([size="lg"]) input,
-  :host([size="3"]) input {
-    font-size: 16px;
-  }
-
   :host([variant="classic"]),
   :host([variant="outlined"]) {
     --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
@@ -493,7 +498,7 @@ const N = `
   }
 
   :host([validation="error"]) .shell {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-error) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-input-error);
   }
 
   :host([radius="none"]) {
@@ -700,30 +705,30 @@ class F extends T {
         composed: !0
       })
     ), queueMicrotask(() => {
-      const n = this._input;
-      if (n) {
+      const s = this._input;
+      if (s) {
         try {
-          n.focus({ preventScroll: !0 });
+          s.focus({ preventScroll: !0 });
         } catch {
-          n.focus();
+          s.focus();
         }
-        if (i != null && r != null && typeof n.setSelectionRange == "function")
+        if (i != null && r != null && typeof s.setSelectionRange == "function")
           try {
-            n.setSelectionRange(i, r);
+            s.setSelectionRange(i, r);
           } catch {
           }
       }
     });
   }
   render() {
-    const t = this.value, e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", r = this.getAttribute("data-error") || "", n = this.getAttribute("placeholder") || "", s = this.hasAttribute("required") ? '<span class="required" aria-hidden="true">*</span>' : "", a = this.hasAttribute("floating-label");
+    const t = this.value, e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", r = this.getAttribute("data-error") || "", s = this.getAttribute("placeholder") || "", n = this.hasAttribute("required") ? '<span class="required" aria-hidden="true">*</span>' : "", a = this.hasAttribute("floating-label");
     this.setContent(`
       <style>${I}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
             <slot name="label">${u(e)}</slot>
-            ${s}
+            ${n}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
             <slot name="description">${u(i)}</slot>
@@ -738,9 +743,9 @@ class F extends T {
               part="input"
               type="password"
               value="${u(t)}"
-              placeholder="${u(n)}"
+              placeholder="${u(s)}"
             />
-            ${a ? `<span class="floating-label" part="floating-label">${u(e || n || "Password")}</span>` : ""}
+            ${a ? `<span class="floating-label" part="floating-label">${u(e || s || "Password")}</span>` : ""}
           </div>
 
           <div class="actions" part="actions">
@@ -780,8 +785,8 @@ class F extends T {
   }
   _syncControlAttrs() {
     if (this._syncHostTokens(), !this._input) return;
-    const t = c(this, "disabled"), e = this.hasAttribute("required"), i = this.hasAttribute("readonly"), r = this.getAttribute("maxlength") || "", n = this.getAttribute("minlength") || "", s = this.getAttribute("pattern") || "", a = this.getAttribute("autocomplete") || "current-password", l = this.getAttribute("spellcheck") || "", h = this.getAttribute("placeholder") || "", d = this.getAttribute("name") || "";
-    this._input.disabled = t, this._input.required = e, this._input.readOnly = i, this._input.placeholder = h, this._input.name = d, this._input.type = this._revealed ? "text" : "password", this._input.setAttribute("autocomplete", a), s ? this._input.setAttribute("pattern", s) : this._input.removeAttribute("pattern"), l ? this._input.setAttribute("spellcheck", l) : this._input.removeAttribute("spellcheck"), r && Number.isFinite(Number(r)) ? this._input.setAttribute("maxlength", r) : this._input.removeAttribute("maxlength"), n && Number.isFinite(Number(n)) ? this._input.setAttribute("minlength", n) : this._input.removeAttribute("minlength");
+    const t = c(this, "disabled"), e = this.hasAttribute("required"), i = this.hasAttribute("readonly"), r = this.getAttribute("maxlength") || "", s = this.getAttribute("minlength") || "", n = this.getAttribute("pattern") || "", a = this.getAttribute("autocomplete") || "current-password", l = this.getAttribute("spellcheck") || "", h = this.getAttribute("placeholder") || "", d = this.getAttribute("name") || "";
+    this._input.disabled = t, this._input.required = e, this._input.readOnly = i, this._input.placeholder = h, this._input.name = d, this._input.type = this._revealed ? "text" : "password", this._input.setAttribute("autocomplete", a), n ? this._input.setAttribute("pattern", n) : this._input.removeAttribute("pattern"), l ? this._input.setAttribute("spellcheck", l) : this._input.removeAttribute("spellcheck"), r && Number.isFinite(Number(r)) ? this._input.setAttribute("maxlength", r) : this._input.removeAttribute("maxlength"), s && Number.isFinite(Number(s)) ? this._input.setAttribute("minlength", s) : this._input.removeAttribute("minlength");
   }
   _syncInputValue(t) {
     this._input && this._input.value !== t && (this._input.value = t);
@@ -804,21 +809,21 @@ class F extends T {
   _syncStrengthUi() {
     const t = this.root.querySelector(".strength"), e = this.root.querySelector(".strength-label"), i = this.root.querySelector(".strength-caption");
     if (!t || !e || !i) return;
-    const r = this.value, n = this.hasAttribute("show-strength") && r.length > 0;
-    if (t.hidden = !n, !n) {
+    const r = this.value, s = this.hasAttribute("show-strength") && r.length > 0;
+    if (t.hidden = !s, !s) {
       delete t.dataset.score, e.textContent = "", i.textContent = "", this._lastStrengthKey = "";
       return;
     }
-    const s = (this.strengthEvaluator || $)(r);
-    t.dataset.score = String(s.score), e.textContent = s.label, i.textContent = s.caption;
-    const a = `${r}|${s.score}|${s.label}|${s.caption}`;
+    const n = (this.strengthEvaluator || $)(r);
+    t.dataset.score = String(n.score), e.textContent = n.label, i.textContent = n.caption;
+    const a = `${r}|${n.score}|${n.label}|${n.caption}`;
     a !== this._lastStrengthKey && (this._lastStrengthKey = a, this.dispatchEvent(
       new CustomEvent("strength-change", {
         detail: {
           value: r,
-          score: s.score,
-          label: s.label,
-          caption: s.caption
+          score: n.score,
+          label: n.label,
+          caption: n.caption
         },
         bubbles: !0,
         composed: !0
@@ -826,8 +831,8 @@ class F extends T {
     ));
   }
   _syncDerivedState() {
-    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), l = (this.getAttribute("data-error") || "").trim(), h = !!s || p(t), d = !!a || p(e), g = !!l || p(i), E = p(r), z = p(n), v = this.root.querySelector(".label"), m = this.root.querySelector(".description"), _ = this.root.querySelector(".prefix"), x = this.root.querySelector(".suffix-slot"), y = this.root.querySelector(".meta"), w = this.root.querySelector(".footer"), A = this.root.querySelector(".error"), k = this.root.querySelector(".counter");
-    f(t, s), f(e, a), f(i, l), v && v.toggleAttribute("hidden", !h), m && m.toggleAttribute("hidden", !d), _ && _.toggleAttribute("hidden", !E), x && x.toggleAttribute("hidden", !z), y && y.toggleAttribute("hidden", !h && !d);
+    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), s = this.root.querySelector('slot[name="suffix"]'), n = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), l = (this.getAttribute("data-error") || "").trim(), h = !!n || p(t), d = !!a || p(e), g = !!l || p(i), z = p(r), E = p(s), v = this.root.querySelector(".label"), m = this.root.querySelector(".description"), x = this.root.querySelector(".prefix"), _ = this.root.querySelector(".suffix-slot"), y = this.root.querySelector(".meta"), w = this.root.querySelector(".footer"), A = this.root.querySelector(".error"), k = this.root.querySelector(".counter");
+    f(t, n), f(e, a), f(i, l), v && v.toggleAttribute("hidden", !h), m && m.toggleAttribute("hidden", !d), x && x.toggleAttribute("hidden", !z), _ && _.toggleAttribute("hidden", !E), y && y.toggleAttribute("hidden", !h && !d);
     const C = this.hasAttribute("counter");
     if (k && k.toggleAttribute("hidden", !C), A && A.toggleAttribute("hidden", !g), w && w.toggleAttribute("hidden", !g && !C), !this._input) return;
     q(this._input, this, h ? `${this._uid}-label` : null);
@@ -856,16 +861,16 @@ class F extends T {
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), n = this.getAttribute("name");
-      r && typeof r.registerField == "function" && n && (this._formUnregister = r.registerField(n, {
-        name: n,
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), s = this.getAttribute("name");
+      r && typeof r.registerField == "function" && s && (this._formUnregister = r.registerField(s, {
+        name: s,
         getValue: () => this.value,
-        setValue: (s) => {
-          this.value = String(s ?? "");
+        setValue: (n) => {
+          this.value = String(n ?? "");
         },
         validate: async () => this._input ? { valid: this._input.checkValidity(), message: this._input.validationMessage || void 0 } : { valid: !0 },
-        setError: (s) => {
-          s ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", s)) : (this.removeAttribute("validation"), this.removeAttribute("data-error")), this._syncUi();
+        setError: (n) => {
+          n ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", n)) : (this.removeAttribute("validation"), this.removeAttribute("data-error")), this._syncUi();
         }
       }));
     } catch {

package/dist/pin-input.cjs.js

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),E=require("./control-name-BmoI1m3a.js");let I=0;const w=`
   :host {
-    --ui-pin-gap: 10px;
-    --ui-pin-slot-width: 48px;
-    --ui-pin-slot-height: 56px;
-    --ui-pin-radius: 14px;
+    --ui-pin-gap: 8px;
+    --ui-pin-slot-width: 40px;
+    --ui-pin-slot-height: var(--ui-control-height-3, 40px);
+    --ui-pin-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-pin-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-pin-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-pin-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-pin-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
-    --ui-pin-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-pin-border-color: var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent));
+    --ui-pin-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-pin-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-pin-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     color-scheme: light dark;
@@ -92,25 +92,29 @@
     background: var(--ui-pin-bg);
     color: var(--ui-pin-color);
     text-align: center;
-    font: 650 24px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 18px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.04em;
     outline: none;
     transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease;
   }
 
   .slot::placeholder {
-    color: color-mix(in srgb, var(--ui-pin-color) 26%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-pin-color) 62%, transparent));
     letter-spacing: 0;
   }
 
+  .slot:hover:not(:disabled):not(:focus-visible) {
+    border-color: var(--ui-color-line-strong, var(--ui-pin-border-color));
+  }
+
   .slot:focus-visible {
-    border-color: color-mix(in srgb, var(--ui-pin-focus) 64%, var(--ui-pin-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-pin-focus) 24%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-pin-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-pin-focus));
+    outline-offset: -1px;
   }
 
   .slot[data-filled="true"] {
-    border-color: color-mix(in srgb, var(--ui-pin-accent) 34%, var(--ui-pin-border-color));
-    background: color-mix(in srgb, var(--ui-pin-accent) 5%, var(--ui-pin-bg));
+    border-color: var(--ui-color-line-strong, var(--ui-pin-border-color));
   }
 
   :host([invalid]) .slot,
@@ -172,7 +176,7 @@
       box-shadow: none;
     }
   }
-`;function C(a){return Number.isFinite(a)?Math.max(1,Math.min(12,Math.floor(a))):6}function u(a){return C(Number(a.getAttribute("length")||6))}function d(a,t){return a.id||(a.id=`${t}-${Math.random().toString(36).slice(2,9)}`),a.id}function k(a,t){const i=a.trim();if(!i)return"";const e=i.slice(-1);return t==="numeric"?/^[0-9]$/.test(e)?e:"":t==="alpha"?/^[a-z]$/i.test(e)?e.toUpperCase():"":/^[a-z0-9]$/i.test(e)?e.toUpperCase():""}function b(a,t){return Array.from(a).map(i=>k(i,t)).filter(Boolean)}class p extends A.ElementBase{constructor(){super(...arguments),this._pinUid=`ui-pin-input-${++I}`,this._value="",this._suppressValueAttr=!1,this._formUnregister=null,this._rootEl=null,this._metaEl=null,this._labelEl=null,this._descriptionEl=null,this._groupEl=null,this._errorEl=null,this._inputs=[],this._onFocus=t=>{const i=t.currentTarget;try{i.select()}catch{}},this._onInput=t=>{if(this._disabled()||this._readOnly())return;const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0);this._fillFromIndex(e,i.value,"input")},this._onPaste=t=>{if(this._disabled()||this._readOnly())return;const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0),r=t.clipboardData?.getData("text")||"";r&&(t.preventDefault(),this._fillFromIndex(e,r,"paste"))},this._onKeyDown=t=>{const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0),r=Array.from({length:u(this)},(s,o)=>this._value[o]||"");if(t.key==="ArrowLeft"){t.preventDefault(),this.focusIndex(e-1);return}if(t.key==="ArrowRight"){t.preventDefault(),this.focusIndex(e+1);return}if(t.key==="Home"){t.preventDefault(),this.focusIndex(0);return}if(t.key==="End"){t.preventDefault(),this.focusIndex(this._inputs.length-1);return}if(t.key==="Backspace"){if(t.preventDefault(),r[e]){r[e]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e);return}e>0&&(r[e-1]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e-1));return}if(t.key==="Delete"){t.preventDefault(),r[e]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e);return}}}static get observedAttributes(){return["aria-description","aria-describedby","value","length","name","label","description","error","disabled","readonly","required","mask","placeholder-char","mode","size","density","shape","invalid"]}get value(){return this._value}set value(t){this._applyValue(String(t??""),"api",!1)}clear(){this._applyValue("","clear",!0),this.focusIndex(0)}focusIndex(t=0){const i=this._inputs[Math.max(0,Math.min(t,this._inputs.length-1))];if(i)try{i.focus({preventScroll:!0}),i.select()}catch{i.focus(),i.select()}}focusFirst(){this.focusIndex(0)}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,i,e){if(i!==e){if(t==="name"&&this.isConnected&&this._registerWithForm(),t==="value"&&!this._suppressValueAttr&&(this._value=this._sanitizeValue(e||"")),t==="length"&&this.isConnected){this.invalidateContentCache(),this.requestRender();return}this._rootEl&&this._syncUi()}}shouldRenderOnAttributeChange(t){return t==="length"}render(){const t=u(this),i=Array.from({length:t},(e,r)=>{const s=this.hasAttribute("mask")?"password":"text",o=r===0?"one-time-code":"off",l=this._mode()==="numeric"?"numeric":"text";return`<input class="slot" part="slot" data-index="${r}" type="${s}" inputmode="${l}" autocomplete="${o}" maxlength="1" />`}).join("");this.setContent(`
+`;function C(l){return Number.isFinite(l)?Math.max(1,Math.min(12,Math.floor(l))):6}function u(l){return C(Number(l.getAttribute("length")||6))}function c(l,t){return l.id||(l.id=`${t}-${Math.random().toString(36).slice(2,9)}`),l.id}function k(l,t){const i=l.trim();if(!i)return"";const e=i.slice(-1);return t==="numeric"?/^[0-9]$/.test(e)?e:"":t==="alpha"?/^[a-z]$/i.test(e)?e.toUpperCase():"":/^[a-z0-9]$/i.test(e)?e.toUpperCase():""}function b(l,t){return Array.from(l).map(i=>k(i,t)).filter(Boolean)}class p extends A.ElementBase{constructor(){super(...arguments),this._pinUid=`ui-pin-input-${++I}`,this._value="",this._suppressValueAttr=!1,this._formUnregister=null,this._rootEl=null,this._metaEl=null,this._labelEl=null,this._descriptionEl=null,this._groupEl=null,this._errorEl=null,this._inputs=[],this._onFocus=t=>{const i=t.currentTarget;try{i.select()}catch{}},this._onInput=t=>{if(this._disabled()||this._readOnly())return;const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0);this._fillFromIndex(e,i.value,"input")},this._onPaste=t=>{if(this._disabled()||this._readOnly())return;const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0),r=t.clipboardData?.getData("text")||"";r&&(t.preventDefault(),this._fillFromIndex(e,r,"paste"))},this._onKeyDown=t=>{const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0),r=Array.from({length:u(this)},(s,o)=>this._value[o]||"");if(t.key==="ArrowLeft"){t.preventDefault(),this.focusIndex(e-1);return}if(t.key==="ArrowRight"){t.preventDefault(),this.focusIndex(e+1);return}if(t.key==="Home"){t.preventDefault(),this.focusIndex(0);return}if(t.key==="End"){t.preventDefault(),this.focusIndex(this._inputs.length-1);return}if(t.key==="Backspace"){if(t.preventDefault(),r[e]){r[e]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e);return}e>0&&(r[e-1]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e-1));return}if(t.key==="Delete"){t.preventDefault(),r[e]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e);return}}}static get observedAttributes(){return["aria-description","aria-describedby","value","length","name","label","description","error","disabled","readonly","required","mask","placeholder-char","mode","size","density","shape","invalid"]}get value(){return this._value}set value(t){this._applyValue(String(t??""),"api",!1)}clear(){this._applyValue("","clear",!0),this.focusIndex(0)}focusIndex(t=0){const i=this._inputs[Math.max(0,Math.min(t,this._inputs.length-1))];if(i)try{i.focus({preventScroll:!0}),i.select()}catch{i.focus(),i.select()}}focusFirst(){this.focusIndex(0)}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,i,e){if(i!==e){if(t==="name"&&this.isConnected&&this._registerWithForm(),t==="value"&&!this._suppressValueAttr&&(this._value=this._sanitizeValue(e||"")),t==="length"&&this.isConnected){this.invalidateContentCache(),this.requestRender();return}this._rootEl&&this._syncUi()}}shouldRenderOnAttributeChange(t){return t==="length"}render(){const t=u(this),i=Array.from({length:t},(e,r)=>{const s=this.hasAttribute("mask")?"password":"text",o=r===0?"one-time-code":"off",a=this._mode()==="numeric"?"numeric":"text";return`<input class="slot" part="slot" data-index="${r}" type="${s}" inputmode="${a}" autocomplete="${o}" maxlength="1" />`}).join("");this.setContent(`
       <style>${w}</style>
       <div class="root">
         <div class="meta" hidden>
@@ -184,4 +188,4 @@
           <div class="error" hidden></div>
         </div>
       </div>
-    `),this._rootEl=this.root.querySelector(".root"),this._metaEl=this.root.querySelector(".meta"),this._labelEl=this.root.querySelector(".label"),this._descriptionEl=this.root.querySelector(".description"),this._groupEl=this.root.querySelector(".group"),this._errorEl=this.root.querySelector(".error"),this._inputs=Array.from(this.root.querySelectorAll(".slot")),this._inputs.forEach(e=>{e.addEventListener("input",this._onInput),e.addEventListener("keydown",this._onKeyDown),e.addEventListener("paste",this._onPaste),e.addEventListener("focus",this._onFocus)}),this._value=this._sanitizeValue(this.getAttribute("value")||this._value),this._syncUi()}_mode(){const t=(this.getAttribute("mode")||"numeric").toLowerCase();return t==="alpha"?"alpha":t==="alphanumeric"?"alphanumeric":"numeric"}_disabled(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}_readOnly(){return this.hasAttribute("readonly")}_placeholderChar(){const t=this.getAttribute("placeholder-char");return t&&t.length?t[0]:""}_sanitizeValue(t){const i=u(this);return b(t,this._mode()).join("").slice(0,i)}_setValueAttr(t){this._suppressValueAttr=!0;try{t?this.getAttribute("value")!==t&&this.setAttribute("value",t):this.removeAttribute("value")}finally{this._suppressValueAttr=!1}}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}_applyValue(t,i,e){const r=this._sanitizeValue(t),s=this._value;if(r===s){this._syncUi();return}this._value=r,this._setValueAttr(r),this._syncUi(),e&&(this._emit("input",{value:r,previousValue:s,source:i}),this._emit("change",{value:r,previousValue:s,source:i}),r.length===u(this)&&this._emit("complete",{value:r,length:r.length,source:i}))}_fillFromIndex(t,i,e){const r=b(i,this._mode());if(!r.length){this._syncUi();return}const s=Array.from({length:u(this)},(l,h)=>this._value[h]||"");let o=Math.max(0,Math.min(t,s.length-1));r.forEach(l=>{o>=s.length||(s[o]=l,o+=1)}),this._applyValue(s.join(""),e,!0),this.focusIndex(Math.min(o,s.length-1))}_syncUi(){if(!this._groupEl||!this._labelEl||!this._descriptionEl||!this._errorEl||!this._metaEl)return;const t=Array.from({length:u(this)},(n,c)=>this._value[c]||""),i=this._placeholderChar(),e=this.getAttribute("label")||"",r=this.getAttribute("description")||"",s=this.getAttribute("error")||"",o=this.hasAttribute("required"),l=this._labelEl.querySelector(".label-text"),h=this._labelEl.querySelector(".required");l&&(l.textContent=e),h&&h.toggleAttribute("hidden",!o),this._labelEl.toggleAttribute("hidden",!e),this._descriptionEl.textContent=r,this._descriptionEl.toggleAttribute("hidden",!r),this._errorEl.textContent=s,this._errorEl.toggleAttribute("hidden",!s),this._metaEl.toggleAttribute("hidden",!e&&!r);const f=e?d(this._labelEl,"ui-pin-label"):"",v=r?d(this._descriptionEl,"ui-pin-description"):"",y=s?d(this._errorEl,"ui-pin-error"):"",x=E.syncExternalDescription(this._inputs[0],this,this._pinUid)||"",m=[v,y,x].filter(Boolean).join(" ");this._inputs.forEach((n,c)=>{const g=t[c]||"";n.value=g,n.setAttribute("data-filled",g?"true":"false"),n.placeholder=i,n.disabled=this._disabled(),n.readOnly=this._readOnly(),n.setAttribute("aria-label",`Digit ${c+1} of ${t.length}`),f?n.setAttribute("aria-labelledby",f):n.removeAttribute("aria-labelledby"),m?n.setAttribute("aria-describedby",m):n.removeAttribute("aria-describedby"),s||this.hasAttribute("invalid")?n.setAttribute("aria-invalid","true"):n.removeAttribute("aria-invalid"),n.inputMode=this._mode()==="numeric"?"numeric":"text",n.pattern=this._mode()==="numeric"?"[0-9]*":this._mode()==="alpha"?"[A-Za-z]*":"[A-Za-z0-9]*"})}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,getValue:()=>this.value,setValue:o=>{o==null||o===""?this.removeAttribute("value"):this.setAttribute("value",String(o))},validate:async()=>this.hasAttribute("required")&&this.value.length<u(this)?{valid:!1,message:"Enter the full verification code."}:{valid:!0,message:void 0},setError:o=>{o?(this.setAttribute("error",o),this.toggleAttribute("invalid",!0)):(this.removeAttribute("error"),this.removeAttribute("invalid")),this._syncUi()}}))}catch{}}}class _ extends p{}typeof customElements<"u"&&!customElements.get("ui-pin-input")&&customElements.define("ui-pin-input",p);typeof customElements<"u"&&!customElements.get("ui-otp-input")&&customElements.define("ui-otp-input",_);exports.UIOtpInput=_;exports.UIPinInput=p;
+    `),this._rootEl=this.root.querySelector(".root"),this._metaEl=this.root.querySelector(".meta"),this._labelEl=this.root.querySelector(".label"),this._descriptionEl=this.root.querySelector(".description"),this._groupEl=this.root.querySelector(".group"),this._errorEl=this.root.querySelector(".error"),this._inputs=Array.from(this.root.querySelectorAll(".slot")),this._inputs.forEach(e=>{e.addEventListener("input",this._onInput),e.addEventListener("keydown",this._onKeyDown),e.addEventListener("paste",this._onPaste),e.addEventListener("focus",this._onFocus)}),this._value=this._sanitizeValue(this.getAttribute("value")||this._value),this._syncUi()}_mode(){const t=(this.getAttribute("mode")||"numeric").toLowerCase();return t==="alpha"?"alpha":t==="alphanumeric"?"alphanumeric":"numeric"}_disabled(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}_readOnly(){return this.hasAttribute("readonly")}_placeholderChar(){const t=this.getAttribute("placeholder-char");return t&&t.length?t[0]:""}_sanitizeValue(t){const i=u(this);return b(t,this._mode()).join("").slice(0,i)}_setValueAttr(t){this._suppressValueAttr=!0;try{t?this.getAttribute("value")!==t&&this.setAttribute("value",t):this.removeAttribute("value")}finally{this._suppressValueAttr=!1}}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}_applyValue(t,i,e){const r=this._sanitizeValue(t),s=this._value;if(r===s){this._syncUi();return}this._value=r,this._setValueAttr(r),this._syncUi(),e&&(this._emit("input",{value:r,previousValue:s,source:i}),this._emit("change",{value:r,previousValue:s,source:i}),r.length===u(this)&&this._emit("complete",{value:r,length:r.length,source:i}))}_fillFromIndex(t,i,e){const r=b(i,this._mode());if(!r.length){this._syncUi();return}const s=Array.from({length:u(this)},(a,h)=>this._value[h]||"");let o=Math.max(0,Math.min(t,s.length-1));r.forEach(a=>{o>=s.length||(s[o]=a,o+=1)}),this._applyValue(s.join(""),e,!0),this.focusIndex(Math.min(o,s.length-1))}_syncUi(){if(!this._groupEl||!this._labelEl||!this._descriptionEl||!this._errorEl||!this._metaEl)return;const t=Array.from({length:u(this)},(n,d)=>this._value[d]||""),i=this._placeholderChar(),e=this.getAttribute("label")||"",r=this.getAttribute("description")||"",s=this.getAttribute("error")||"",o=this.hasAttribute("required"),a=this._labelEl.querySelector(".label-text"),h=this._labelEl.querySelector(".required");a&&(a.textContent=e),h&&h.toggleAttribute("hidden",!o),this._labelEl.toggleAttribute("hidden",!e),this._descriptionEl.textContent=r,this._descriptionEl.toggleAttribute("hidden",!r),this._errorEl.textContent=s,this._errorEl.toggleAttribute("hidden",!s),this._metaEl.toggleAttribute("hidden",!e&&!r);const f=e?c(this._labelEl,"ui-pin-label"):"",v=r?c(this._descriptionEl,"ui-pin-description"):"",y=s?c(this._errorEl,"ui-pin-error"):"",x=E.syncExternalDescription(this._inputs[0],this,this._pinUid)||"",m=[v,y,x].filter(Boolean).join(" ");this._inputs.forEach((n,d)=>{const g=t[d]||"";n.value=g,n.setAttribute("data-filled",g?"true":"false"),n.placeholder=i,n.disabled=this._disabled(),n.readOnly=this._readOnly(),n.setAttribute("aria-label",`Digit ${d+1} of ${t.length}`),f?n.setAttribute("aria-labelledby",f):n.removeAttribute("aria-labelledby"),m?n.setAttribute("aria-describedby",m):n.removeAttribute("aria-describedby"),s||this.hasAttribute("invalid")?n.setAttribute("aria-invalid","true"):n.removeAttribute("aria-invalid"),n.inputMode=this._mode()==="numeric"?"numeric":"text",n.pattern=this._mode()==="numeric"?"[0-9]*":this._mode()==="alpha"?"[A-Za-z]*":"[A-Za-z0-9]*"})}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,getValue:()=>this.value,setValue:o=>{o==null||o===""?this.removeAttribute("value"):this.setAttribute("value",String(o))},validate:async()=>this.hasAttribute("required")&&this.value.length<u(this)?{valid:!1,message:"Enter the full verification code."}:{valid:!0,message:void 0},setError:o=>{o?(this.setAttribute("error",o),this.toggleAttribute("invalid",!0)):(this.removeAttribute("error"),this.removeAttribute("invalid")),this._syncUi()}}))}catch{}}}class _ extends p{}typeof customElements<"u"&&!customElements.get("ui-pin-input")&&customElements.define("ui-pin-input",p);typeof customElements<"u"&&!customElements.get("ui-otp-input")&&customElements.define("ui-otp-input",_);exports.UIOtpInput=_;exports.UIPinInput=p;

package/dist/pin-input.esm.js

@@ -1,17 +1,17 @@
-import { E as y } from "./ElementBase-BeZT54Hj.mjs";
+import { E as x } from "./ElementBase-BeZT54Hj.mjs";
 import { c as A } from "./control-name-Bpj7F34X.mjs";
 let E = 0;
 const I = `
   :host {
-    --ui-pin-gap: 10px;
-    --ui-pin-slot-width: 48px;
-    --ui-pin-slot-height: 56px;
-    --ui-pin-radius: 14px;
+    --ui-pin-gap: 8px;
+    --ui-pin-slot-width: 40px;
+    --ui-pin-slot-height: var(--ui-control-height-3, 40px);
+    --ui-pin-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-pin-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-pin-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-pin-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-pin-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
-    --ui-pin-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-pin-border-color: var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent));
+    --ui-pin-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-pin-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-pin-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     color-scheme: light dark;
@@ -95,25 +95,29 @@ const I = `
     background: var(--ui-pin-bg);
     color: var(--ui-pin-color);
     text-align: center;
-    font: 650 24px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 18px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.04em;
     outline: none;
     transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease;
   }
 
   .slot::placeholder {
-    color: color-mix(in srgb, var(--ui-pin-color) 26%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-pin-color) 62%, transparent));
     letter-spacing: 0;
   }
 
+  .slot:hover:not(:disabled):not(:focus-visible) {
+    border-color: var(--ui-color-line-strong, var(--ui-pin-border-color));
+  }
+
   .slot:focus-visible {
-    border-color: color-mix(in srgb, var(--ui-pin-focus) 64%, var(--ui-pin-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-pin-focus) 24%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-pin-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-pin-focus));
+    outline-offset: -1px;
   }
 
   .slot[data-filled="true"] {
-    border-color: color-mix(in srgb, var(--ui-pin-accent) 34%, var(--ui-pin-border-color));
-    background: color-mix(in srgb, var(--ui-pin-accent) 5%, var(--ui-pin-bg));
+    border-color: var(--ui-color-line-strong, var(--ui-pin-border-color));
   }
 
   :host([invalid]) .slot,
@@ -182,7 +186,7 @@ function w(a) {
 function u(a) {
   return w(Number(a.getAttribute("length") || 6));
 }
-function d(a, t) {
+function c(a, t) {
   return a.id || (a.id = `${t}-${Math.random().toString(36).slice(2, 9)}`), a.id;
 }
 function C(a, t) {
@@ -194,7 +198,7 @@ function C(a, t) {
 function g(a, t) {
   return Array.from(a).map((i) => C(i, t)).filter(Boolean);
 }
-class b extends y {
+class b extends x {
   constructor() {
     super(...arguments), this._pinUid = `ui-pin-input-${++E}`, this._value = "", this._suppressValueAttr = !1, this._formUnregister = null, this._rootEl = null, this._metaEl = null, this._labelEl = null, this._descriptionEl = null, this._groupEl = null, this._errorEl = null, this._inputs = [], this._onFocus = (t) => {
       const i = t.currentTarget;
@@ -375,12 +379,12 @@ class b extends y {
   }
   _syncUi() {
     if (!this._groupEl || !this._labelEl || !this._descriptionEl || !this._errorEl || !this._metaEl) return;
-    const t = Array.from({ length: u(this) }, (n, c) => this._value[c] || ""), i = this._placeholderChar(), e = this.getAttribute("label") || "", r = this.getAttribute("description") || "", s = this.getAttribute("error") || "", o = this.hasAttribute("required"), l = this._labelEl.querySelector(".label-text"), h = this._labelEl.querySelector(".required");
+    const t = Array.from({ length: u(this) }, (n, d) => this._value[d] || ""), i = this._placeholderChar(), e = this.getAttribute("label") || "", r = this.getAttribute("description") || "", s = this.getAttribute("error") || "", o = this.hasAttribute("required"), l = this._labelEl.querySelector(".label-text"), h = this._labelEl.querySelector(".required");
     l && (l.textContent = e), h && h.toggleAttribute("hidden", !o), this._labelEl.toggleAttribute("hidden", !e), this._descriptionEl.textContent = r, this._descriptionEl.toggleAttribute("hidden", !r), this._errorEl.textContent = s, this._errorEl.toggleAttribute("hidden", !s), this._metaEl.toggleAttribute("hidden", !e && !r);
-    const p = e ? d(this._labelEl, "ui-pin-label") : "", _ = r ? d(this._descriptionEl, "ui-pin-description") : "", v = s ? d(this._errorEl, "ui-pin-error") : "", x = A(this._inputs[0], this, this._pinUid) || "", f = [_, v, x].filter(Boolean).join(" ");
-    this._inputs.forEach((n, c) => {
-      const m = t[c] || "";
-      n.value = m, n.setAttribute("data-filled", m ? "true" : "false"), n.placeholder = i, n.disabled = this._disabled(), n.readOnly = this._readOnly(), n.setAttribute("aria-label", `Digit ${c + 1} of ${t.length}`), p ? n.setAttribute("aria-labelledby", p) : n.removeAttribute("aria-labelledby"), f ? n.setAttribute("aria-describedby", f) : n.removeAttribute("aria-describedby"), s || this.hasAttribute("invalid") ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid"), n.inputMode = this._mode() === "numeric" ? "numeric" : "text", n.pattern = this._mode() === "numeric" ? "[0-9]*" : this._mode() === "alpha" ? "[A-Za-z]*" : "[A-Za-z0-9]*";
+    const p = e ? c(this._labelEl, "ui-pin-label") : "", _ = r ? c(this._descriptionEl, "ui-pin-description") : "", v = s ? c(this._errorEl, "ui-pin-error") : "", y = A(this._inputs[0], this, this._pinUid) || "", f = [_, v, y].filter(Boolean).join(" ");
+    this._inputs.forEach((n, d) => {
+      const m = t[d] || "";
+      n.value = m, n.setAttribute("data-filled", m ? "true" : "false"), n.placeholder = i, n.disabled = this._disabled(), n.readOnly = this._readOnly(), n.setAttribute("aria-label", `Digit ${d + 1} of ${t.length}`), p ? n.setAttribute("aria-labelledby", p) : n.removeAttribute("aria-labelledby"), f ? n.setAttribute("aria-describedby", f) : n.removeAttribute("aria-describedby"), s || this.hasAttribute("invalid") ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid"), n.inputMode = this._mode() === "numeric" ? "numeric" : "text", n.pattern = this._mode() === "numeric" ? "[0-9]*" : this._mode() === "alpha" ? "[A-Za-z]*" : "[A-Za-z0-9]*";
     });
   }
   _registerWithForm() {

package/dist/placement-grid.cjs.js

@@ -15,7 +15,7 @@
     --ui-placement-align-content: normal;
     --ui-placement-justify-content: normal;
     --ui-placement-place-content: initial;
-    --ui-placement-color: var(--ui-color-text, inherit);
+    --ui-placement-color: inherit;
     --ui-placement-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     color-scheme: light dark;
     display: var(--ui-placement-display);

package/dist/placement-grid.esm.js

@@ -52,7 +52,7 @@ const b = {
     --ui-placement-align-content: normal;
     --ui-placement-justify-content: normal;
     --ui-placement-place-content: initial;
-    --ui-placement-color: var(--ui-color-text, inherit);
+    --ui-placement-color: inherit;
     --ui-placement-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     color-scheme: light dark;
     display: var(--ui-placement-display);

package/dist/plugin-panel.cjs.js

@@ -9,7 +9,7 @@
     --ui-plugin-panel-height: min(280px, 44vh);
     --ui-plugin-panel-bg: var(--base-panel-bg, var(--color-panel, color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent)));
     --ui-plugin-panel-border: var(--base-panel-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent));
-    --ui-plugin-panel-radius: var(--base-panel-radius, var(--ui-radius, 4px));
+    --ui-plugin-panel-radius: var(--base-panel-radius, var(--ui-radius, 6px));
     --ui-plugin-panel-shadow: var(--base-panel-shadow, var(--shadow-4, none));
     --ui-plugin-panel-color: var(--ui-color-text, #0f172a);
   }

package/dist/plugin-panel.esm.js

@@ -10,7 +10,7 @@ const s = `
     --ui-plugin-panel-height: min(280px, 44vh);
     --ui-plugin-panel-bg: var(--base-panel-bg, var(--color-panel, color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent)));
     --ui-plugin-panel-border: var(--base-panel-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent));
-    --ui-plugin-panel-radius: var(--base-panel-radius, var(--ui-radius, 4px));
+    --ui-plugin-panel-radius: var(--base-panel-radius, var(--ui-radius, 6px));
     --ui-plugin-panel-shadow: var(--base-panel-shadow, var(--shadow-4, none));
     --ui-plugin-panel-color: var(--ui-color-text, #0f172a);
   }