@grayscale-dev/dragon 0.1.1 → 0.1.3

package/README.md

@@ -24,7 +24,8 @@ Covers value/property sync, native `input`/`change` events, form association, fo
   import '@grayscale-dev/dragon';
 </script>
 
-<dui-input id="name" placeholder="Your name"></dui-input>
+<dui-input id="name" label="Name" label-position="above"></dui-input>
+<dui-input id="email" label="Email" label-position="floating"></dui-input>
 
 <script type="module">
   const el = document.querySelector('#name');
@@ -42,7 +43,8 @@ import '@grayscale-dev/dragon';
 export function Demo() {
   return (
     <dui-input
-      placeholder="Email"
+      label="Email"
+      label-position="floating"
       onInput={(e) => {
         const el = e.currentTarget as HTMLInputElement & { value: string };
         console.log(el.value);
@@ -65,7 +67,7 @@ function handleInput(e: Event) {
 </script>
 
 <template>
-  <dui-input placeholder="Email" @input="handleInput" />
+  <dui-input label="Email" label-position="floating" @input="handleInput" />
 </template>
 ```
 
@@ -81,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) {
@@ -97,6 +103,14 @@ dui-input::part(input) {
 }
 ```
 
+**Labels**
+
+`label` and `label-position` control the built-in label:
+
+- `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**
 
 `<dui-input>` dispatches native `input` and `change` events (bubbling + composed) and exposes a `value` property on the custom element. It also integrates with forms via the Form-Associated Custom Elements API where supported.

package/dist/components/dui-input.d.ts

@@ -9,6 +9,8 @@ export declare class DuiInput extends LitElement {
     required: boolean;
     type: string;
     autocomplete?: string;
+    label: string;
+    labelPosition: 'floating' | 'above';
     private inputEl?;
     private internals?;
     private defaultValue?;

package/dist/index.js

@@ -1,23 +1,23 @@
-import { css as d, LitElement as h, html as c } from "lit";
-import { property as s, query as f, customElement as b } from "lit/decorators.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (e, r, l, o) => {
-  for (var a = o > 1 ? void 0 : o ? v(r, l) : r, n = e.length - 1, u; n >= 0; n--)
-    (u = e[n]) && (a = (o ? u(r, l, a) : u(a)) || a);
-  return o && a && m(r, l, a), a;
+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 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 t = class extends h {
+let e = class extends c {
   constructor() {
-    super(), this.value = "", this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.type = "text", "attachInternals" in this && (this.internals = this.attachInternals());
+    super(), this.value = "", this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.type = "text", this.label = "", this.labelPosition = "above", "attachInternals" in this && (this.internals = this.attachInternals());
   }
   connectedCallback() {
     super.connectedCallback(), this.defaultValue === void 0 && (this.defaultValue = this.getAttribute("value") ?? ""), this.syncFormValue();
   }
-  updated(e) {
-    (e.has("value") || e.has("disabled")) && this.syncFormValue();
+  updated(t) {
+    (t.has("value") || t.has("disabled")) && this.syncFormValue();
   }
-  focus(e) {
-    this.inputEl?.focus(e);
+  focus(t) {
+    this.inputEl?.focus(t);
   }
   blur() {
     this.inputEl?.blur();
@@ -25,11 +25,11 @@ let t = class extends h {
   formResetCallback() {
     this.value = this.defaultValue ?? "";
   }
-  formStateRestoreCallback(e) {
-    typeof e == "string" && (this.value = e);
+  formStateRestoreCallback(t) {
+    typeof t == "string" && (this.value = t);
   }
-  formDisabledCallback(e) {
-    this.disabled = e;
+  formDisabledCallback(t) {
+    this.disabled = t;
   }
   syncFormValue() {
     if (this.internals) {
@@ -40,53 +40,93 @@ let t = class extends h {
       this.internals.setFormValue(this.value);
     }
   }
-  handleInput(e) {
-    e.stopPropagation();
-    const r = e.target;
-    this.value = r.value, this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
+  handleInput(t) {
+    t.stopPropagation();
+    const i = t.target;
+    this.value = i.value, this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
   }
-  handleChange(e) {
-    e.stopPropagation();
-    const r = e.target;
-    this.value = r.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+  handleChange(t) {
+    t.stopPropagation();
+    const i = t.target;
+    this.value = i.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
   }
-  handleKeydown(e) {
-    if (e.key !== "Enter") return;
-    const r = e.target;
-    this.value = r.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+  handleKeydown(t) {
+    if (t.key !== "Enter") return;
+    const i = t.target;
+    this.value = i.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
   }
   render() {
-    return c`
-      <input
-        part="input"
-        .value=${this.value}
-        .type=${this.type}
-        .name=${this.name}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        placeholder=${p(this.placeholder || void 0)}
-        autocomplete=${p(this.autocomplete)}
-        @input=${this.handleInput}
-        @change=${this.handleChange}
-        @keydown=${this.handleKeydown}
-      />
+    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=${n}>
+        ${t ? d`<label for="input">${this.label}</label>` : null}
+        <input
+          id="input"
+          part="input"
+          .value=${this.value}
+          .type=${this.type}
+          .name=${this.name}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          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}
+        />
+      </div>
     `;
   }
 };
-t.formAssociated = !0;
-t.styles = d`
+e.formAssociated = !0;
+e.styles = h`
     :host {
       display: inline-block;
       width: 100%;
     }
 
+    .field {
+      position: relative;
+      display: block;
+      width: 100%;
+    }
+
+    label {
+      display: block;
+      font-size: var(--ui-input-label-font-size, 14px);
+      color: var(--ui-input-label-color, #475569);
+      margin-bottom: 6px;
+      line-height: 1.2;
+    }
+
+    .field.floating label {
+      position: absolute;
+      left: var(--ui-input-floating-label-left, 12px);
+      top: 50%;
+      transform: translateY(-50%);
+      margin: 0;
+      padding: 0 4px;
+      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,
+    :host(:focus-within) .field.floating label {
+      top: 6px;
+      transform: translateY(0) 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;
@@ -97,6 +137,10 @@ t.styles = d`
       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));
     }
@@ -105,34 +149,47 @@ t.styles = d`
       opacity: 0.6;
       cursor: not-allowed;
     }
+
+    .field.floating input {
+      padding-top: var(--ui-input-floating-padding-top, 15px);
+      padding-right: var(--ui-input-floating-padding-right, 12px);
+      padding-bottom: var(--ui-input-floating-padding-bottom, 7px);
+      padding-left: var(--ui-input-floating-padding-left, 12px);
+    }
   `;
-i([
-  s({ type: String })
-], t.prototype, "value", 2);
-i([
-  s({ type: String })
-], t.prototype, "placeholder", 2);
-i([
-  s({ type: String, reflect: !0 })
-], t.prototype, "name", 2);
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "required", 2);
-i([
-  s({ type: String, reflect: !0 })
-], t.prototype, "type", 2);
-i([
-  s({ type: String, reflect: !0 })
-], t.prototype, "autocomplete", 2);
-i([
+a([
+  l({ type: String })
+], e.prototype, "value", 2);
+a([
+  l({ type: String })
+], e.prototype, "placeholder", 2);
+a([
+  l({ type: String, reflect: !0 })
+], e.prototype, "name", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+a([
+  l({ type: String, reflect: !0 })
+], e.prototype, "type", 2);
+a([
+  l({ type: String, reflect: !0 })
+], e.prototype, "autocomplete", 2);
+a([
+  l({ type: String })
+], e.prototype, "label", 2);
+a([
+  l({ type: String, attribute: "label-position" })
+], e.prototype, "labelPosition", 2);
+a([
   f("input")
-], t.prototype, "inputEl", 2);
-t = i([
+], e.prototype, "inputEl", 2);
+e = a([
   b("dui-input")
-], t);
+], e);
 export {
-  t as DuiInput
+  e as DuiInput
 };

package/package.json

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