@ds-gn/ui 0.9.0 → 0.11.0

package/dist/components/Input/src/Input.js

@@ -91,6 +91,16 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
+// common/helpers/field-control.ts
+var FIELD_CONTROL = Symbol.for("dsgn.field-control");
+var markFieldControl = (ctor) => {
+  Object.defineProperty(ctor, FIELD_CONTROL, { value: true });
+};
+var describedBy = (...ids) => {
+  const value = ids.filter(Boolean).join(" ");
+  return value || undefined;
+};
+
 // common/helpers/enum-validator.ts
 var enumValidator = (propName, enumSet, candidateValue) => {
   if (!enumSet.has(candidateValue)) {
@@ -120,7 +130,9 @@ var surfaceValues = {
   DARK: "dark"
 };
 var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
-
+// components/Icon/src/icons/circle-alert.ts
+import { svg } from "lit";
+var circleAlert = svg`<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />`;
 // components/Input/src/Input.css
 import { css as css2 } from "lit";
 var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@@ -130,32 +142,47 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
     --font-weight-medium: 500;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --radius-control: var(--dsgn-src-radius-control, 0.375rem);
+    --radius-input: var(--dsgn-src-radius-input, var(--radius-control));
     --color-error: inherit;
+    --color-error-strong: inherit;
     --color-input-bg: inherit;
+    --color-input-bg-disabled: inherit;
+    --color-input-bg-readonly: inherit;
     --color-input-border: inherit;
+    --color-input-border-disabled: inherit;
+    --color-input-border-hover: inherit;
+    --color-input-border-readonly: inherit;
+    --color-input-error-ring: inherit;
     --color-input-error-text: inherit;
     --color-input-focus: inherit;
+    --color-input-focus-ring: inherit;
     --color-input-placeholder: inherit;
     --color-input-text: inherit;
+    --color-input-text-disabled: inherit;
     --color-text-primary: inherit;
+    --color-text-secondary: inherit;
   }
 }
 @layer utilities {
+  .visible {
+    visibility: visible;
+  }
   .static {
     position: static;
   }
-  .mb-1\\.5 {
-    margin-bottom: calc(var(--spacing) * 1.5);
+  .box-border {
+    box-sizing: border-box;
   }
   .block {
     display: block;
@@ -163,25 +190,24 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .flex {
     display: flex;
   }
+  .size-3\\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
-  .max-h-0 {
-    max-height: calc(var(--spacing) * 0);
-  }
-  .max-h-12 {
-    max-height: calc(var(--spacing) * 12);
+  .h-12 {
+    height: calc(var(--spacing) * 12);
   }
   .w-full {
     width: 100%;
   }
-  .-translate-y-full {
-    --tw-translate-y: -100%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-0 {
-    --tw-translate-y: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
+  .shrink-0 {
+    flex-shrink: 0;
   }
   .cursor-not-allowed {
     cursor: not-allowed;
@@ -189,11 +215,14 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .flex-col {
     flex-direction: column;
   }
-  .overflow-hidden {
-    overflow: hidden;
+  .items-center {
+    align-items: center;
   }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
+  .gap-1\\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .rounded-\\[var\\(--radius-input\\,0\\.375rem\\)\\] {
+    border-radius: var(--radius-input,0.375rem);
   }
   .border {
     border-style: var(--tw-border-style);
@@ -205,23 +234,38 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .border-input-border {
     border-color: var(--color-input-border);
   }
+  .border-input-border-disabled {
+    border-color: var(--color-input-border-disabled);
+  }
+  .border-input-border-readonly {
+    border-color: var(--color-input-border-readonly);
+  }
   .bg-input-bg {
     background-color: var(--color-input-bg);
   }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
+  .bg-input-bg-disabled {
+    background-color: var(--color-input-bg-disabled);
+  }
+  .bg-input-bg-readonly {
+    background-color: var(--color-input-bg-readonly);
   }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
+  .fill-none {
+    fill: none;
   }
-  .py-1\\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
+  .stroke-current {
+    stroke: currentcolor;
   }
-  .py-3 {
-    padding-block: calc(var(--spacing) * 3);
+  .stroke-\\[1\\.75\\] {
+    stroke-width: 1.75;
+  }
+  .px-2\\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
   }
-  .pt-1\\.5 {
-    padding-top: calc(var(--spacing) * 1.5);
+  .px-3\\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
   }
   .text-left {
     text-align: left;
@@ -233,92 +277,111 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\\[13px\\] {
+    font-size: 13px;
+  }
+  .text-\\[15px\\] {
+    font-size: 15px;
+  }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+  .leading-\\[18px\\] {
+    --tw-leading: 18px;
+    line-height: 18px;
+  }
+  .leading-\\[22px\\] {
+    --tw-leading: 22px;
+    line-height: 22px;
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .text-error-strong {
+    color: var(--color-error-strong);
+  }
   .text-input-error-text {
     color: var(--color-input-error-text);
   }
   .text-input-text {
     color: var(--color-input-text);
   }
+  .text-input-text-disabled {
+    color: var(--color-input-text-disabled);
+  }
   .text-text-primary {
     color: var(--color-text-primary);
   }
-  .placeholder-input-placeholder {
-    &::placeholder {
-      color: var(--color-input-placeholder);
-    }
-  }
-  .opacity-50 {
-    opacity: 50%;
+  .text-text-secondary {
+    color: var(--color-text-secondary);
   }
-  .transition-\\[max-height\\] {
-    transition-property: max-height;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .transition-colors {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  .transition-\\[border-color\\,box-shadow\\] {
+    transition-property: border-color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-transform {
-    transition-property: transform, translate, scale, rotate;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .duration-\\[250ms\\] {
-    --tw-duration: 250ms;
-    transition-duration: 250ms;
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
   }
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .focus\\:border-error {
-    &:focus {
-      border-color: var(--color-error);
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .placeholder\\:text-input-placeholder {
+    &::placeholder {
+      color: var(--color-input-placeholder);
     }
   }
-  .focus\\:border-input-focus {
-    &:focus {
-      border-color: var(--color-input-focus);
+  .hover\\:border-input-border-hover {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-input-border-hover);
+      }
     }
   }
-  .focus\\:ring-2 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .focus-visible\\:border-input-focus {
+    &:focus-visible {
+      border-color: var(--color-input-focus);
     }
   }
-  .focus\\:ring-error {
-    &:focus {
-      --tw-ring-color: var(--color-error);
+  .focus-visible\\:shadow-\\[0_0_0_3px_var\\(--color-input-error-ring\\)\\] {
+    &:focus-visible {
+      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-input-error-ring));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\\:ring-input-focus {
-    &:focus {
-      --tw-ring-color: var(--color-input-focus);
+  .focus-visible\\:shadow-\\[0_0_0_3px_var\\(--color-input-focus-ring\\)\\] {
+    &:focus-visible {
+      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-input-focus-ring));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\\:outline-none {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
+  .motion-reduce\\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none;
     }
   }
 }
@@ -327,35 +390,16 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   inherits: false;
   initial-value: 0deg;
 }
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-duration {
+@property --tw-leading {
   syntax: "*";
   inherits: false;
 }
-@property --tw-ease {
+@property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
@@ -424,16 +468,20 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
       --tw-border-style: solid;
+      --tw-leading: initial;
       --tw-font-weight: initial;
-      --tw-duration: initial;
-      --tw-ease: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -448,6 +496,8 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+      --tw-ease: initial;
       --dsgn-border-sweep-angle: 0deg;
     }
   }
@@ -455,18 +505,24 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
 `;
 var Input_default = styles2;
 
+// common/props/size/size.props.ts
+var sizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var sizeProps = enumCreator(Object.values(sizeValues), "size", String, {
+  reflect: true
+});
+
 // components/Input/src/Input.props.ts
 var inputTypeValues = {
   TEXT: "text",
   EMAIL: "email"
 };
 var inputTypeProps = enumCreator(Object.values(inputTypeValues), "type", String, { reflect: true });
-var inputSizeValues = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg"
-};
-var inputSizeProps = enumCreator(Object.values(inputSizeValues), "size", String, { reflect: true });
+var inputSizeValues = sizeValues;
+var inputSizeProps = sizeProps;
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -493,37 +549,85 @@ var clsx_default = clsx;
 // components/Input/src/Input.styles.ts
 var baseClasses = [
   "w-full",
-  "bg-input-bg",
+  "box-border",
   "border",
-  "border-input-border",
   "text-input-text",
-  "placeholder-input-placeholder",
-  "rounded-full",
+  "placeholder:text-input-placeholder",
+  "rounded-[var(--radius-input,0.375rem)]",
   "font-sans",
-  "transition-colors",
-  "duration-200",
-  "focus:outline-none",
-  "focus:ring-2",
-  "focus:ring-input-focus",
-  "focus:border-input-focus"
+  "outline-none",
+  "transition-[border-color,box-shadow]",
+  "duration-150",
+  "ease-out",
+  "motion-reduce:transition-none"
 ];
-var errorClasses = ["border-error", "focus:ring-error", "focus:border-error"];
-var disabledClasses = ["opacity-50", "cursor-not-allowed"];
+var stateClasses = {
+  default: [
+    "bg-input-bg",
+    "border-input-border",
+    "hover:border-input-border-hover",
+    "focus-visible:border-input-focus",
+    "focus-visible:shadow-[0_0_0_3px_var(--color-input-focus-ring)]"
+  ],
+  invalid: [
+    "bg-input-bg",
+    "border-error",
+    "focus-visible:shadow-[0_0_0_3px_var(--color-input-error-ring)]"
+  ],
+  readonly: [
+    "bg-input-bg-readonly",
+    "border-input-border-readonly",
+    "focus-visible:border-input-focus",
+    "focus-visible:shadow-[0_0_0_3px_var(--color-input-focus-ring)]"
+  ],
+  disabled: [
+    "bg-input-bg-disabled",
+    "border-input-border-disabled",
+    "text-input-text-disabled",
+    "cursor-not-allowed"
+  ]
+};
 var sizeClasses = {
-  [inputSizeValues.SM]: ["px-3", "py-1.5", "text-sm"],
-  [inputSizeValues.MD]: ["px-4", "h-10", "text-base"],
-  [inputSizeValues.LG]: ["px-4", "py-3", "text-lg"]
+  [inputSizeValues.SM]: ["h-8", "px-2.5", "text-[13px]"],
+  [inputSizeValues.MD]: ["h-10", "px-3", "text-sm"],
+  [inputSizeValues.LG]: ["h-12", "px-3.5", "text-base"]
 };
-var classNames = (size, hasError, disabled) => clsx_default(baseClasses, sizeClasses[size], hasError && errorClasses, disabled && disabledClasses);
-var wrapperClasses = () => clsx_default("flex", "flex-col");
-var labelClasses = () => clsx_default("block", "text-sm", "font-medium", "text-text-primary", "mb-1.5");
-var errorWrapClasses = (hasError) => clsx_default("overflow-hidden", "transition-[max-height]", "duration-[250ms]", "ease-out", hasError ? "max-h-12" : "max-h-0");
-var errorMessageClasses = (hasError) => clsx_default("block", "text-sm", "text-left", "text-input-error-text", "pt-1.5", "transition-transform", "duration-[250ms]", "ease-out", hasError ? "translate-y-0" : "-translate-y-full");
+var classNames = (size, state) => clsx_default(baseClasses, sizeClasses[size], stateClasses[state]);
+var wrapperClasses = () => clsx_default("flex", "flex-col", "gap-1.5");
+var labelSizeClasses = {
+  [inputSizeValues.SM]: ["text-[13px]", "leading-[18px]"],
+  [inputSizeValues.MD]: ["text-sm", "leading-5"],
+  [inputSizeValues.LG]: ["text-[15px]", "leading-[22px]"]
+};
+var labelClasses = (size, disabled) => clsx_default("block", "font-sans", "font-medium", labelSizeClasses[size], disabled ? "text-input-text-disabled" : "text-text-primary");
+var requiredClasses = () => clsx_default("text-error-strong");
+var messageSizeClasses = {
+  [inputSizeValues.SM]: ["text-xs", "leading-4"],
+  [inputSizeValues.MD]: ["text-[13px]", "leading-[18px]"],
+  [inputSizeValues.LG]: ["text-sm", "leading-5"]
+};
+var hintClasses = (size) => clsx_default("font-sans", messageSizeClasses[size], "text-text-secondary");
+var errorClasses = (size) => clsx_default("flex", "items-center", "gap-1.5", "font-sans", "text-left", "text-input-error-text", messageSizeClasses[size]);
+var errorIconClasses = () => clsx_default("size-3.5", "shrink-0", "fill-none", "stroke-current", "stroke-[1.75]");
 
 // components/Input/src/Input.ts
+var errorIcon = () => html2`<svg
+    class="${errorIconClasses()}"
+    viewBox="0 0 24 24"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${circleAlert}
+  </svg>`;
+
 class Input extends Base {
   static styles = [Base.styles, Input_default];
   static formAssociated = true;
+  static shadowRootOptions = {
+    ...Base.shadowRootOptions,
+    delegatesFocus: true
+  };
   #internals;
   constructor() {
     super();
@@ -532,18 +636,33 @@ class Input extends Base {
     this.placeholder = "";
     this.label = "";
     this.ariaLabel = "";
+    this.hint = "";
     this.error = "";
+    this.invalid = false;
     this.size = inputSizeValues.MD;
     this.value = "";
     this.name = "";
     this.disabled = false;
     this.required = false;
+    this.readOnly = false;
     this._formDisabled = false;
     this.#internals = this.attachInternals();
   }
   get isDisabled() {
     return this.disabled || this._formDisabled;
   }
+  get isInvalid() {
+    return this.invalid || !!this.error;
+  }
+  get state() {
+    if (this.isDisabled)
+      return "disabled";
+    if (this.readOnly)
+      return "readonly";
+    if (this.isInvalid)
+      return "invalid";
+    return "default";
+  }
   _syncValidity() {
     const input = this.shadowRoot?.querySelector("input");
     if (!input)
@@ -576,32 +695,60 @@ class Input extends Base {
     if (changedProperties.has("value")) {
       this.#internals.setFormValue(this.value);
     }
-    if (changedProperties.has("value") || changedProperties.has("disabled") || changedProperties.has("_formDisabled")) {
+    if (changedProperties.has("value") || changedProperties.has("disabled") || changedProperties.has("_formDisabled") || changedProperties.has("required") || changedProperties.has("readOnly")) {
       this._syncValidity();
     }
   }
+  _renderLabel() {
+    if (!this.label)
+      return nothing;
+    return html2`<label
+      part="label"
+      class="${labelClasses(this.size, this.isDisabled)}"
+      for="input"
+      >${this.label}${this.required ? html2` <span
+            part="required-indicator"
+            class="${requiredClasses()}"
+            aria-hidden="true"
+            >*</span
+          >` : nothing}</label
+    >`;
+  }
+  _renderHint() {
+    if (!this.hint)
+      return nothing;
+    return html2`<div id="hint" part="hint" class="${hintClasses(this.size)}">
+      ${this.hint}
+    </div>`;
+  }
+  _renderError() {
+    if (!this.error)
+      return nothing;
+    return html2`<div id="error" part="error" class="${errorClasses(this.size)}">
+      ${errorIcon()}
+      <span>${this.error}</span>
+    </div>`;
+  }
   render() {
     return html2`
       <div class="${wrapperClasses()}">
-        ${this.label ? html2`<label class="${labelClasses()}" for="input"
-              >${this.label}</label
-            >` : nothing}
+        ${this._renderLabel()}
         <input
           id="input"
+          part="input"
           type="${this.type}"
-          class="${classNames(this.size, !!this.error, this.isDisabled)}"
+          class="${classNames(this.size, this.state)}"
           placeholder="${this.placeholder || nothing}"
-          aria-label="${this.ariaLabel || nothing}"
+          aria-label="${!this.label && this.ariaLabel || nothing}"
+          aria-invalid="${this.isInvalid ? "true" : nothing}"
+          aria-describedby="${describedBy(!!this.error && "error", !!this.hint && "hint") ?? nothing}"
           .value="${this.value}"
           ?disabled="${this.isDisabled}"
+          ?readonly="${this.readOnly}"
           ?required="${this.required}"
           @input="${this._handleInput}"
         />
-        <div class="${errorWrapClasses(!!this.error)}">
-          <span class="${errorMessageClasses(!!this.error)}">
-            ${this.error}
-          </span>
-        </div>
+        ${this._renderHint()} ${this._renderError()}
       </div>
     `;
   }
@@ -621,9 +768,15 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ type: String, attribute: "aria-label" })
 ], Input.prototype, "ariaLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Input.prototype, "hint", undefined);
 __legacyDecorateClassTS([
   property({ type: String })
 ], Input.prototype, "error", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Input.prototype, "invalid", undefined);
 __legacyDecorateClassTS([
   property({ ...inputSizeProps })
 ], Input.prototype, "size", undefined);
@@ -639,9 +792,13 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ type: Boolean, reflect: true })
 ], Input.prototype, "required", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true, attribute: "readonly" })
+], Input.prototype, "readOnly", undefined);
 __legacyDecorateClassTS([
   state()
 ], Input.prototype, "_formDisabled", undefined);
+markFieldControl(Input);
 defineElement("dsgn-input", Input);
 export {
   Input