@grayscale-dev/dragon 0.1.2 → 0.1.4

package/README.md

@@ -83,15 +83,19 @@ CSS custom properties:
 - `--ui-input-color`
 - `--ui-input-placeholder-color`
 - `--ui-input-focus-ring`
+- `--ui-input-label-font-size`
+
+Default size values in `<dui-input>` are pixel-based.
 
 Example:
 
 ```css
 dui-input {
-  --ui-input-padding: 0.75rem 1rem;
+  --ui-input-padding: 12px 16px;
   --ui-input-border: 1px solid #94a3b8;
   --ui-input-radius: 999px;
   --ui-input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
+  --ui-input-label-font-size: 14px;
 }
 
 dui-input::part(input) {
@@ -105,6 +109,7 @@ dui-input::part(input) {
 
 - `label-position="above"` (default): label sits above the field.
 - `label-position="floating"`: label sits like a placeholder and floats to the top-left on focus or when the input has a value.
+- Floating mode hides placeholder text to avoid overlap with the label.
 
 **Form Behavior**
 

package/dist/index.js

@@ -1,10 +1,10 @@
 import { css as h, LitElement as c, html as d } from "lit";
 import { property as l, query as f, customElement as b } from "lit/decorators.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
-var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (t, i, o, n) => {
-  for (var r = n > 1 ? void 0 : n ? m(i, o) : i, s = t.length - 1, u; s >= 0; s--)
-    (u = t[s]) && (r = (n ? u(i, o, r) : u(r)) || r);
-  return n && r && g(i, o, r), r;
+import { ifDefined as u } from "lit/directives/if-defined.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (t, i, n, r) => {
+  for (var o = r > 1 ? void 0 : r ? v(i, n) : i, s = t.length - 1, p; s >= 0; s--)
+    (p = t[s]) && (o = (r ? p(i, n, o) : p(o)) || o);
+  return r && o && g(i, n, o), o;
 };
 let e = class extends c {
   constructor() {
@@ -56,9 +56,9 @@ let e = class extends c {
     this.value = i.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
   }
   render() {
-    const t = this.label.length > 0, i = t && this.labelPosition === "floating", o = this.value.length > 0;
+    const t = this.label.length > 0, i = t && this.labelPosition === "floating", n = this.value.length > 0, r = i ? void 0 : this.placeholder || void 0;
     return d`
-      <div class="field ${i ? "floating" : ""}" data-has-value=${o}>
+      <div class="field ${i ? "floating" : ""}" data-has-value=${n}>
         ${t ? d`<label for="input">${this.label}</label>` : null}
         <input
           id="input"
@@ -68,9 +68,9 @@ let e = class extends c {
           .name=${this.name}
           ?disabled=${this.disabled}
           ?required=${this.required}
-          placeholder=${p(this.placeholder || void 0)}
-          autocomplete=${p(this.autocomplete)}
-          aria-label=${p(this.label || this.placeholder || void 0)}
+          placeholder=${u(r)}
+          autocomplete=${u(this.autocomplete)}
+          aria-label=${u(this.label || this.placeholder || void 0)}
           @input=${this.handleInput}
           @change=${this.handleChange}
           @keydown=${this.handleKeydown}
@@ -94,39 +94,40 @@ e.styles = h`
 
     label {
       display: block;
-      font-size: 0.875rem;
+      font-size: var(--ui-input-label-font-size, 14px);
       color: var(--ui-input-label-color, #475569);
-      margin-bottom: 0.4rem;
+      margin-bottom: 6px;
       line-height: 1.2;
     }
 
     .field.floating label {
       position: absolute;
-      left: var(--ui-input-floating-label-left, 0.75rem);
+      left: var(--ui-input-floating-label-left, var(--ui-input-floating-padding-left, 12px));
       top: 50%;
       transform: translateY(-50%);
+      transform-origin: left center;
       margin: 0;
-      padding: 0 0.25rem;
+      padding: 0;
       background: var(--ui-input-bg, #ffffff);
       color: var(--ui-input-placeholder-color, #9aa4b2);
       pointer-events: none;
       transition: transform 120ms ease, top 120ms ease, color 120ms ease;
     }
 
-    .field.floating[data-has-value="true"] label,
+    .field.floating[data-has-value='true'] label,
     :host(:focus-within) .field.floating label {
-      top: 0.35rem;
-      transform: translateY(0) scale(0.85);
+      top: 7px;
+      transform: scale(0.85);
       color: var(--ui-input-label-color, #475569);
     }
 
     input {
       box-sizing: border-box;
       width: 100%;
-      padding: var(--ui-input-padding, 0.5rem 0.75rem);
-      font-size: var(--ui-input-font-size, 1rem);
+      padding: var(--ui-input-padding, 8px 12px);
+      font-size: var(--ui-input-font-size, 16px);
       border: var(--ui-input-border, 1px solid #c6ccd5);
-      border-radius: var(--ui-input-radius, 0.5rem);
+      border-radius: var(--ui-input-radius, 8px);
       background: var(--ui-input-bg, #ffffff);
       color: var(--ui-input-color, #1f2937);
       outline: none;
@@ -137,6 +138,10 @@ e.styles = h`
       color: var(--ui-input-placeholder-color, #9aa4b2);
     }
 
+    .field.floating input::placeholder {
+      color: transparent;
+    }
+
     input:focus {
       box-shadow: var(--ui-input-focus-ring, 0 0 0 3px rgba(24, 98, 255, 0.25));
     }
@@ -147,10 +152,10 @@ e.styles = h`
     }
 
     .field.floating input {
-      padding-top: var(--ui-input-floating-padding-top, 0.95rem);
-      padding-right: var(--ui-input-floating-padding-right, 0.75rem);
-      padding-bottom: var(--ui-input-floating-padding-bottom, 0.45rem);
-      padding-left: var(--ui-input-floating-padding-left, 0.75rem);
+      padding-top: var(--ui-input-floating-padding-top, 22px);
+      padding-right: var(--ui-input-floating-padding-right, 12px);
+      padding-bottom: var(--ui-input-floating-padding-bottom, 8px);
+      padding-left: var(--ui-input-floating-padding-left, 12px);
     }
   `;
 a([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grayscale-dev/dragon",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Framework-agnostic Web Components built with Lit.",
   "type": "module",
   "files": [