component Input {
  outputs {
    input(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
    change(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
    focus(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
    blur(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
    invalid(payload: { value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event })
    keydown(payload: { key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })
    keyup(payload: { key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })
  }

  props {
    size: string = "default"
    color: string = "primary"
    id: string = ""
    name: string = ""
    label: string = "Input"
    hiddenLabel: boolean = false
    placeholder: string = ""
    value: string = ""
    type: string = "text"
    variant: string = "normal"
    icon: string = ""
    iconPosition: string = "start"
    helperText: string = ""
    cornerHint: string = ""
    error: string = ""
    inline: boolean = false
    readonly: boolean = false
    disabled: boolean = false
    required: boolean = false
    autocomplete: string = ""
    inputmode: string = ""
    minlength: string = ""
    maxlength: string = ""
    pattern: string = ""
    min: string = ""
    max: string = ""
    step: string = ""
    class: string = ""
  }
  state validationError: string = ""
  functions {
    client function detail(sourceEvent) {
      return { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }
    }
    client function handleInput(sourceEvent) {
      sourceEvent.stopPropagation()
      if (sourceEvent.currentTarget.validity.valid) {
        validationError = ""
        sourceEvent.currentTarget.setAttribute("aria-invalid", error ? "true" : "false")
        sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", error ? "true" : "false")
      }
      output.input(detail(sourceEvent))
    }
    client function handleChange(sourceEvent) { sourceEvent.stopPropagation(); output.change(detail(sourceEvent)) }
    client function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); output.focus(detail(sourceEvent)) }
    client function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); output.blur(detail(sourceEvent)) }
    client function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); validationError = sourceEvent.currentTarget.validationMessage; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ value: sourceEvent.currentTarget.value, name: name, message: validationError, sourceEvent: sourceEvent }) }
    client function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); output.keydown({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
    client function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); output.keyup({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
  }
  view {
    <div
      {...attrs}
      class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--input {class}"
      data-variant="{variant}"
      data-inline="{inline}"
      data-floating="{variant === 'floating'}"
      data-invalid="{error || validationError ? 'true' : 'false'}"
    >
      <div
        class="wrn-next__field-heading"
      >
        <label
          class="{hiddenLabel ? 'wrn-next__sr-only' : ''}"
          for="{id || name}"
        >
          {label}
        </label>
        {#if cornerHint}
          <span
            class="wrn-next__field-hint"
          >
            {cornerHint}
          </span>
        {/if}
      </div>
      <div
        class="wrn-next__field-control"
        data-icon-position="{iconPosition}"
      >
        {#if icon}
          <span
            class="{icon} wrn-next__field-icon"
            aria-hidden="true"
          >
          </span>
        {/if}
        <input
          id="{id || name}"
          type="{type}"
          name="{name}"
          value="{value}"
          placeholder="{variant === 'floating' ? ' ' : placeholder}"
          readonly="{readonly}"
          disabled="{disabled}"
          required="{required}"
          autocomplete="{autocomplete}"
          inputmode="{inputmode}"
          minlength="{minlength}"
          maxlength="{maxlength}"
          pattern="{pattern}"
          min="{min}"
          max="{max}"
          step="{step}"
          aria-invalid="{error || validationError ? 'true' : 'false'}"
          aria-describedby="{error || validationError ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}"
          @input="handleInput(event)"
          @change="handleChange(event)"
          @focus="handleFocus(event)"
          @blur="handleBlur(event)"
          @invalid="handleInvalid(event)"
          @keydown="handleKeydown(event)"
          @keyup="handleKeyup(event)"
        />
        {#if variant === "floating"}
          <span
            class="wrn-next__field-floating-label"
          >
            {label}
          </span>
        {/if}
      </div>
      {#if helperText}
        <small
          id="{(id || name) + '-help'}"
          class="wrn-next__field-help"
        >
          {helperText}
        </small>
      {/if}
      <small
        id="{(id || name) + '-error'}"
        class="wrn-next__field-error"
        data-error="{name}"
        aria-live="polite"
      >
          {error || validationError}
      </small>
    </div>
  }

  style {
    .wrn-next--input { width: 100%; min-width: 0; }
    .wrn-next--input[data-invalid="true"] { --wrn-component-color: var(--wrn-color-danger); }

    /* Shared component foundation. */

    .wrn-component {
      --wrn-component-color: var(--wrn-color-primary);
      --wrn-component-scale: 1;
      margin: 0;
      color: var(--wrn-color-text);
      font-family: var(--wrn-font-sans, inherit);
    }

    .wrn-component--color-primary {
      --wrn-component-color: var(--wrn-color-primary);
    }

    .wrn-component--color-secondary {
      --wrn-component-color: var(--wrn-color-secondary);
    }

    .wrn-component--color-success {
      --wrn-component-color: var(--wrn-color-success);
    }

    .wrn-component--color-warning {
      --wrn-component-color: var(--wrn-color-warning);
    }

    .wrn-component--color-danger {
      --wrn-component-color: var(--wrn-color-danger);
    }

    .wrn-component--color-info {
      --wrn-component-color: var(--wrn-color-info);
    }

    .wrn-component--size-xs {
      --wrn-component-scale: 0.78;
    }

    .wrn-component--size-sm {
      --wrn-component-scale: 0.88;
    }

    .wrn-component--size-default,
    .wrn-component--size-md {
      --wrn-component-scale: 1;
    }

    .wrn-component--size-lg {
      --wrn-component-scale: 1.14;
    }

    .wrn-component--size-xl {
      --wrn-component-scale: 1.28;
    }

    .wrn-component:not(.wrn-btn) {
      font-size: calc(1em * var(--wrn-component-scale));
    }

    .wrn-component :is(a, button, input, select, textarea):focus-visible {
      outline-color: var(--wrn-component-color);
    }

    .wrn-component p {
      margin: 0;
      color: var(--wrn-color-muted);
      line-height: 1.6;
    }

    /* Shared field foundation. */

    /* Validation states set by the browser validation runtime. */
    .wrn-invalid {
      border-color: var(--wrn-color-danger) !important;
    }

    .wrn-field-error {
      display: block;
      min-height: 1em;
      margin-top: 0.25rem;
      color: var(--wrn-color-danger);
      font-size: 0.8rem;
    }

    .wrn-next--choice {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      cursor: pointer;
    }

    .wrn-next--choice input {
      width: 1.1rem;
      height: 1.1rem;
      accent-color: var(--wrn-color-primary);
    }

    .wrn-next--field {
      display: grid;
      width: min(100%, 28rem);
      gap: 0.4rem;
      font-size: 0.78rem;
      font-weight: 700;
    }
    .wrn-next--field :where(input, textarea, select) {
      width: 100%;
      min-height: 2.65rem;
      padding: 0.6rem 0.7rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.6rem;
      outline: 0;
      color: var(--wrn-color-text);
      background: var(--wrn-color-bg);
      font: inherit;
      font-weight: 500;
    }
    .wrn-auth-form form > .wrn-next--field,
    .wrn-auth-form form > .wrn-field {
      width: 100%;
      max-width: none;
    }
    .wrn-auth-form__submit > .wrn-btn {
      width: 100%;
      min-height: 3rem;
      border-radius: 0.75rem;
      box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wrn-btn-color) 20%, transparent);
    }
    .wrn-next--field :where(input, textarea, select):focus-visible {
      border-color: var(--wrn-color-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
    }
    .wrn-next--field textarea {
      resize: vertical;
    }
    .wrn-next--field,
    .wrn-next--choice-field {
      --wrn-field-color: var(--wrn-component-color, var(--wrn-color-primary));
      width: min(100%, 34rem);
      min-width: 0;
      color: var(--wrn-color-text);
      font-size: 0.8125rem;
      font-weight: 500;
    }
    .wrn-next--field.wrn-next--size-sm,
    .wrn-next--choice-field.wrn-next--size-sm {
      font-size: 0.8125rem;
    }
    .wrn-next--field.wrn-next--size-lg,
    .wrn-next--choice-field.wrn-next--size-lg {
      font-size: 1rem;
    }
    .wrn-next__field-heading {
      display: flex;
      min-width: 0;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
    }
    .wrn-next__field-heading label {
      color: var(--wrn-color-text);
      font-weight: 600;
    }
    .wrn-next__field-hint,
    .wrn-next__field-help {
      color: var(--wrn-color-muted);
      font-size: 0.82em;
      font-weight: 500;
    }
    .wrn-next__field-control {
      position: relative;
      min-width: 0;
    }
    .wrn-next__field-control > :is(input, textarea, select) {
      padding-inline: 0.85rem;
      border-color: var(--wrn-color-border);
      border-radius: var(--wrn-radius-sm);
      background: var(--wrn-color-surface);
      font-size: 0.8125rem;
    }
    .wrn-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
      padding-inline-start: 2.5rem;
    }
    .wrn-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
      padding-inline-end: 2.5rem;
    }
    .wrn-next__field-icon {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 0.85rem;
      color: var(--wrn-color-muted);
      pointer-events: none;
      transform: translateY(-50%);
    }
    .wrn-next__field-control[data-icon-position="end"] > .wrn-next__field-icon {
      right: 0.85rem;
      left: auto;
    }
    .wrn-next--field[data-variant="outlined"]
    .wrn-next__field-control
    > :is(input, textarea, select) {
      border-width: 2px;
    }
    .wrn-next--field[data-variant="underline"]
    .wrn-next__field-control
    > :is(input, textarea, select) {
      padding-inline: 0;
      border-width: 0 0 1px;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .wrn-next--field[data-variant="pill"] .wrn-next__field-control > :is(input, select) {
      border-radius: 999px;
      padding-inline: 1.15rem;
    }
    .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
      border-color: transparent;
      background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
    }
    .wrn-next__field-floating-label {
      position: absolute;
      top: 50%;
      left: 0.85rem;
      color: var(--wrn-color-muted);
      pointer-events: none;
      transform: translateY(-50%);
      transition: 150ms ease;
    }
    .wrn-next--textarea .wrn-next__field-floating-label {
      top: 1.35rem;
    }
    .wrn-next--field[data-floating="true"] .wrn-next__field-control > :is(input, textarea, select) {
      padding-top: 1.2rem;
      padding-bottom: 0.3rem;
    }
    .wrn-next--field[data-floating="true"] .wrn-next__field-heading > label {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      margin: -1px !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
    }
    .wrn-next--field[data-floating="true"]
    .wrn-next__field-heading:not(:has(.wrn-next__field-hint)) {
      display: none;
    }
    .wrn-next--field[data-floating="true"]
    .wrn-next__field-control
    > :is(input, textarea):is(:focus, :not(:placeholder-shown))
    + .wrn-next__field-floating-label {
      top: 0.42rem;
      font-size: 0.7em;
      transform: none;
    }
    .wrn-next__field-error {
      min-height: 1em;
      color: var(--wrn-color-danger);
      font-size: 0.82em;
      font-weight: 600;
    }
    .wrn-next__field-error:empty {
      display: none;
    }
    .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
    .wrn-next--choice-field[data-invalid="true"] input {
      border-color: var(--wrn-color-danger);
    }
    .wrn-next--field :is(input, textarea, select):disabled,
    .wrn-next--choice-field input:disabled {
      cursor: not-allowed;
      opacity: 0.58;
    }
    .wrn-next--field :is(input, textarea, select):read-only {
      background: var(--wrn-color-surface-2);
    }
    .wrn-next--field[data-inline="true"],
    .wrn-next--choice-field[data-inline="true"] {
      display: grid;
      width: 100%;
      max-width: none;
      grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
      justify-content: center;
      align-items: center;
      gap: 0.75rem;
    }
    .wrn-next--field[data-inline="true"] .wrn-next__field-heading,
    .wrn-next--choice-field[data-inline="true"] .wrn-next__field-heading {
      min-height: 2.65rem;
      align-items: center;
    }
    .wrn-next--field[data-inline="true"] .wrn-next__field-heading {
      justify-content: flex-end;
    }
    .wrn-next--field[data-inline="true"] .wrn-next__field-help,
    .wrn-next--choice-field[data-inline="true"] .wrn-next__field-help {
      display: flex;
      min-height: 2.65rem;
      align-items: center;
    }
    .wrn-next--choice-field[data-inline="true"] {
      grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
    }
    .wrn-next--choice-field[data-inline="true"] .wrn-next__field-heading:empty {
      display: none;
    }
    .wrn-next--field[data-inline="true"] .wrn-next__field-error,
    .wrn-next--choice-field[data-inline="true"] .wrn-next__field-error {
      grid-column: 2 / -1;
    }
    .wrn-next__sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      padding: 0 !important;
      border: 0 !important;
      margin: -1px !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
    }
    .wrn-next__choice-field {
      display: grid;
      width: 100%;
      max-width: none;
      gap: 0.4rem;
    }
    .wrn-next__choice {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 0.65rem;
      color: var(--wrn-color-text);
      width: 100%;
      font-size: 0.75rem;
      font-weight: 500;
    }
    .wrn-next__checkbox-content > .wrn-next__choice {
      width: 100%;
      min-width: 0;
      align-items: flex-start;
    }
    .wrn-next__choice input {
      flex: 0 0 auto;
      margin: 0;
      accent-color: var(--wrn-field-color);
    }
    .wrn-next__choice-copy {
      display: grid;
      min-width: 0;
      gap: 0.15rem;
      line-height: 1.35;
    }
    .wrn-next__choice-copy small {
      color: var(--wrn-color-muted);
      font-weight: 500;
    }
    .wrn-next__radio-group,
    .wrn-next__checkbox-group {
      display: grid;
      min-width: 0;
      gap: 0.65rem;
    }
    .wrn-next--radio-field[data-orientation="horizontal"] .wrn-next__radio-group,
    .wrn-next--checkbox-field[data-orientation="horizontal"] .wrn-next__checkbox-group {
      grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
      align-items: stretch;
    }
    .wrn-next--radio-field[data-card="true"] .wrn-next__radio-group,
    .wrn-next--checkbox-field[data-card="true"] .wrn-next__checkbox-group {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    }
    .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
    .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
      min-height: 4.5rem;
      padding: 0.85rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius-sm);
      background: var(--wrn-color-surface);
    }
    .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
    .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
      border-color: var(--wrn-field-color);
      box-shadow: 0 0 0 1px var(--wrn-field-color);
    }
    .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
    .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
      padding-block: 0.75rem;
      border-bottom: 1px solid var(--wrn-color-border);
    }
    .wrn-next--radio-field[data-right-aligned="true"] .wrn-next--radio,
    .wrn-next--checkbox-field[data-right-aligned="true"] .wrn-next--checkbox {
      justify-content: space-between;
    }
    .wrn-next--radio-field[data-right-aligned="true"] .wrn-next--radio input,
    .wrn-next--checkbox-field[data-right-aligned="true"] .wrn-next--checkbox input {
      order: 2;
    }
    .wrn-next--radio-field[data-right-aligned="true"] .wrn-next__choice-copy,
    .wrn-next--checkbox-field[data-right-aligned="true"] .wrn-next__choice-copy {
      order: 1;
    }
    .wrn-next__choice[data-variant="outlined"],
    .wrn-next__choice[data-variant="floating"] {
      padding: 0.65rem 0.8rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius-sm);
    }
    .wrn-next__choice[data-variant="pill"] {
      padding: 0.65rem 1rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
    }
    .wrn-next__choice[data-variant="ghost"] {
      padding: 0.65rem 0.8rem;
      border-radius: var(--wrn-radius-sm);
      background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
    }
    .wrn-next__choice[data-variant="underline"] {
      padding-block: 0.5rem;
      border-bottom: 1px solid var(--wrn-color-border);
    }
    .wrn-next--select .wrn-next__field-control {
      display: flex;
      align-items: center;
    }
    .wrn-next__color-control,
    .wrn-next__range-control,
    .wrn-next__input-group-control,
    .wrn-next__file-control {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 0.65rem;
    }
    .wrn-next__picker-control,
    .wrn-next--time-picker .wrn-next__field-control {
      position: relative;
      display: flex;
      min-width: 0;
      align-items: center;
    }
    .wrn-next__picker-control > button:first-of-type,
    .wrn-next__time-trigger {
      display: flex;
      width: 100%;
      min-height: 2.65rem;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.7rem 0.85rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius-sm);
      background: var(--wrn-color-surface);
      color: var(--wrn-color-text);
      font: inherit;
      text-align: left;
    }
    .wrn-next__calendar,
    .wrn-next__time-panel {
      z-index: 20;
      display: grid;
      width: min(100%, 22rem);
      gap: 0.75rem;
      padding: 0.85rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius-md);
      background: var(--wrn-color-surface);
      box-shadow: var(--wrn-shadow-3);
    }
    .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
    .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
      display: none;
    }
    .wrn-next__calendar button,
    .wrn-next__time-panel button {
      min-height: 2.25rem;
      border: 0;
      border-radius: var(--wrn-radius-sm);
      background: transparent;
      color: inherit;
    }
    .wrn-next__calendar-weekdays,
    .wrn-next__calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0.2rem;
      text-align: center;
    }
    .wrn-next__calendar-weekdays {
      color: var(--wrn-color-muted);
      font-size: 0.75rem;
    }
    .wrn-next__calendar-grid button:hover,
    .wrn-next__time-panel button:hover {
      background: var(--wrn-color-surface-2);
    }
    .wrn-next__calendar-grid button[aria-pressed="true"],
    .wrn-next__time-panel button[aria-pressed="true"] {
      background: var(--wrn-field-color);
      color: var(--wrn-color-primary-contrast, #fff);
    }
    .wrn-next__time-period {
      display: flex;
      gap: 0.35rem;
    }
    .wrn-next--file-upload-progress .wrn-next__row,
    .wrn-next__upload-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .wrn-next--file-upload-progress .wrn-next__row > span {
      display: grid;
      min-width: 0;
    }
    .wrn-next--field[data-variant="underline"]
    :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
      border-width: 0 0 1px;
      border-radius: 0;
      background: transparent;
    }
    .wrn-next--field[data-variant="outlined"]
    :is(.wrn-next__input-group-control, .wrn-next__file-control) {
      border-width: 2px;
    }
    .wrn-next--field[data-variant="pill"]
    :is(.wrn-next__input-group-control, .wrn-next__file-control) {
      border-radius: 999px;
    }
    .wrn-next--field[data-variant="ghost"]
    :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
      border-color: transparent;
      background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
    }
    @media (max-width: 640px) {
      .wrn-next--field[data-inline="true"],
      .wrn-next--choice-field[data-inline="true"] {
        grid-template-columns: 1fr;
      }

      .wrn-next--field[data-inline="true"] .wrn-next__field-error,
      .wrn-next--choice-field[data-inline="true"] .wrn-next__field-error {
        grid-column: auto;
      }
    }
    .wrn-next--toggle-password:has(input.wrn-invalid) .wrn-next__password-control > input,
    .wrn-next--toggle-password.wrn-next--invalid .wrn-next__password-control > input {
      border-color: var(--wrn-color-danger);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 14%, transparent);
    }
    .wrn-next--strong-password.wrn-next--invalid input,
    .wrn-next--strong-password input.wrn-invalid {
      border-color: var(--wrn-color-danger);
    }
  }
}