@c2n/text-field 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/text-field.ts","declarations":[{"kind":"class","description":"A single-line input wrapped in a themeable field. The native `<input>` keeps its behaviour (`type`, `name`,\n`autocomplete`, `maxlength`, `pattern`, `input`/`change` events); the field adds `prefix-icon` / `suffix-icon` slots\nsized by `--c2-text-field__icon--size`, an optional clear button (`clearable`), helper text (`help`), an error\nmessage (`error` + `error-text`), a character counter when `maxlength` is set, and a `help-icon` slot beside the\nfield. Pair it with `c2-label` for a caption. Give the host a `width`: the field fills it.","name":"TextField","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-text-field--min-height","default":"36px"},{"type":{"text":"pixel"},"description":"Space between the icons and the text.","name":"--c2-text-field--gap","default":"8px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-right-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-right-radius","default":"6px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-top","default":"6px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-right","default":"10px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-bottom","default":"6px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-left","default":"12px"},{"type":{"text":"border"},"name":"--c2-text-field--border-top","default":"1px solid #bcbcc6"},{"type":{"text":"border"},"name":"--c2-text-field--border-right","default":"1px solid #bcbcc6"},{"type":{"text":"border"},"name":"--c2-text-field--border-bottom","default":"1px solid #bcbcc6"},{"type":{"text":"border"},"name":"--c2-text-field--border-left","default":"1px solid #bcbcc6"},{"type":{"text":"color"},"name":"--c2-text-field--color","default":"#18181b"},{"type":{"text":"color"},"name":"--c2-text-field--background","default":"#ffffff"},{"type":{"text":"font-size"},"name":"--c2-text-field--font-size","default":"14px"},{"type":{"text":"font-weight"},"name":"--c2-text-field--font-weight"},{"type":{"text":"font-style"},"name":"--c2-text-field--font-style"},{"type":{"text":"font-family"},"name":"--c2-text-field--font-family"},{"type":{"text":"pixel"},"name":"--c2-text-field--line-height","default":"20px"},{"type":{"text":"color"},"name":"--c2-text-field__placeholder--color","default":"#71717a"},{"type":{"text":"opacity"},"name":"--c2-text-field__placeholder--opacity","default":"1"},{"type":{"text":"font-weight"},"name":"--c2-text-field__placeholder--font-weight"},{"type":{"text":"font-style"},"name":"--c2-text-field__placeholder--font-style"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-top","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-right","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-bottom","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-left","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-top","default":"1px solid #476ef9"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-right","default":"1px solid #476ef9"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-bottom","default":"1px solid #476ef9"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-left","default":"1px solid #476ef9"},{"type":{"text":"color"},"name":"--c2-text-field__focus--color"},{"type":{"text":"color"},"name":"--c2-text-field__focus--background"},{"type":{"text":"outline"},"name":"--c2-text-field__focus--outline","default":"3px solid rgba(71, 110, 249, 0.2)"},{"type":{"text":"pixel"},"name":"--c2-text-field__focus--outline-offset","default":"0px"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-top","default":"1px solid #dc2626"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-right","default":"1px solid #dc2626"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-bottom","default":"1px solid #dc2626"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-left","default":"1px solid #dc2626"},{"type":{"text":"color"},"name":"--c2-text-field__error--color"},{"type":{"text":"color"},"name":"--c2-text-field__error--background"},{"type":{"text":"outline"},"name":"--c2-text-field__error__focus--outline","default":"3px solid rgba(220, 38, 38, 0.2)"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-top","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-right","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-bottom","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-left","default":"1px solid #e4e4e7"},{"type":{"text":"color"},"name":"--c2-text-field__read-only--color"},{"type":{"text":"color"},"name":"--c2-text-field__read-only--background","default":"#fafafa"},{"type":{"text":"opacity"},"name":"--c2-text-field__disabled--opacity","default":"0.38"},{"type":{"text":"pixel"},"name":"--c2-text-field__icon--size","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__icon--color","default":"#71717a"},{"type":{"text":"pixel"},"name":"--c2-text-field__clear-icon--size","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon--color","default":"#a1a1aa"},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon__hover--color","default":"#18181b"},{"type":{"text":"pixel"},"name":"--c2-text-field__help-icon--size","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__help-icon--color","default":"#71717a"},{"type":{"text":"pixel"},"description":"Space between the field and the help icon.","name":"--c2-text-field__help-icon--gap","default":"8px"},{"type":{"text":"pixel"},"description":"Space between the field and the helper line.","name":"--c2-text-field__supporting-text--gap","default":"4px"},{"type":{"text":"font-size"},"name":"--c2-text-field__supporting-text--font-size","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-text-field__supporting-text--line-height","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text--color","default":"#71717a"},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text__error--color","default":"#dc2626"}],"slots":[{"description":"Icon (or short adornment text) at the start of the field: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`. Icons are sized by `--c2-text-field__icon--size`; an adornment keeps its own width.","name":"prefix-icon"},{"description":"Icon or adornment at the end of the field, after the clear button.","name":"suffix-icon"},{"description":"Replaces the default cross of the clear button.","name":"clear-icon"},{"description":"Icon shown beside the field, outside the border, e.g. a tooltip trigger.","name":"help-icon"},{"description":"Rich helper content below the field. `help` and `error-text` are the plain-text shortcuts.","name":"supporting-text"}],"members":[{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"default":"true"},{"kind":"field","name":"internals","privacy":"private","readonly":true},{"kind":"field","name":"customValidityMessage","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"disabledByForm","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","attribute":"readOnly","reflects":true},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","attribute":"disabled","reflects":true},{"kind":"field","name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","attribute":"error","reflects":true},{"kind":"field","name":"maxLength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","attribute":"maxLength"},{"kind":"field","name":"minLength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","attribute":"minLength"},{"kind":"field","name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","attribute":"pattern"},{"kind":"field","name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","attribute":"required","reflects":true},{"kind":"field","name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","attribute":"type"},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","attribute":"name"},{"kind":"field","name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","attribute":"autocomplete"},{"kind":"field","name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","attribute":"placeholder"},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","attribute":"aria-label"},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","attribute":"value"},{"kind":"field","name":"errorText","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","attribute":"error-text"},{"kind":"field","name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","attribute":"help"},{"kind":"field","name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","attribute":"clearable","reflects":true},{"kind":"field","name":"dirty","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"focused","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"hasSupportingSlot","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"input","type":{"text":"HTMLInputElement | null | undefined"},"privacy":"private","readonly":true},{"kind":"field","name":"form","description":"The containing form, when this control is associated with one.","readonly":true},{"kind":"field","name":"labels","description":"Labels associated with this form control.","readonly":true},{"kind":"field","name":"validity","readonly":true},{"kind":"field","name":"validationMessage","readonly":true},{"kind":"field","name":"willValidate","readonly":true},{"kind":"method","name":"reset","description":"Restores the initial value (the `value` attribute) and clears the dirty and error flags."},{"kind":"method","name":"formResetCallback"},{"kind":"method","name":"formDisabledCallback","parameters":[{"name":"disabled","type":{"text":"boolean"}}]},{"kind":"method","name":"formStateRestoreCallback","parameters":[{"name":"state","type":{"text":"string | File | FormData | null"}}]},{"kind":"method","name":"checkValidity","description":"Checks all current constraints and fires `invalid` on this element when they fail."},{"kind":"method","name":"reportValidity","description":"Checks all current constraints and asks the browser to show validation feedback."},{"kind":"method","name":"setCustomValidity","parameters":[{"name":"message","type":{"text":"string"}}],"description":"Sets or clears a custom validation error."},{"kind":"field","name":"handleFocus"},{"kind":"method","name":"isDirty","description":"True once the user has typed in the field."},{"kind":"method","name":"focus","return":{"type":{"text":"void"}},"parameters":[{"name":"options","optional":true,"type":{"text":"FocusOptions | undefined"}}]},{"kind":"method","name":"blur","return":{"type":{"text":"void"}}},{"kind":"method","name":"select","return":{"type":{"text":"void"}},"description":"Selects the whole text."},{"kind":"method","name":"handleInput","privacy":"protected","parameters":[{"name":"event","type":{"text":"InputEvent"}}]},{"kind":"method","name":"handleFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"forwardFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"description":"A click anywhere on the field (icons, padding) focuses the input."},{"kind":"method","name":"handleFocusout","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"handleClear","privacy":"protected"},{"kind":"method","name":"handleSupportingSlotChange","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"renderPrefixSlot","privacy":"protected"},{"kind":"method","name":"renderSuffixSlot","privacy":"protected"},{"kind":"method","name":"renderHelpIconSlot","privacy":"protected"},{"kind":"method","name":"renderClearButton","privacy":"protected"},{"kind":"method","name":"renderSupportingText","privacy":"protected"},{"kind":"method","name":"redispatchEvent","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"syncFormState","privacy":"private"},{"kind":"field","name":"effectiveDisabled","privacy":"private","readonly":true},{"kind":"field","name":"stateClasses","privacy":"private","readonly":true}],"events":[{"type":{"text":"InputEvent"},"description":"Re-dispatched from the inner input on every keystroke; `value` is already updated.","name":"input"},{"type":{"text":"Event"},"description":"Re-dispatched from the inner input when the value is committed (blur or Enter).","name":"change"},{"type":{"text":"Event"},"description":"Fired after the clear button emptied the field (an `input` and a `change` event follow).","name":"clear"}],"attributes":[{"name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","fieldName":"readOnly"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","fieldName":"disabled"},{"name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","fieldName":"error"},{"name":"maxLength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","fieldName":"maxLength"},{"name":"minLength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","fieldName":"minLength"},{"name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","fieldName":"pattern"},{"name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","fieldName":"required"},{"name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","fieldName":"type"},{"name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","fieldName":"name"},{"name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","fieldName":"autocomplete"},{"name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","fieldName":"placeholder"},{"name":"aria-label","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","fieldName":"ariaLabel"},{"name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","fieldName":"value"},{"name":"error-text","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","fieldName":"errorText"},{"name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","fieldName":"help"},{"name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","fieldName":"clearable"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-text-field","customElement":true}],"exports":[{"kind":"js","name":"TextField","declaration":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"custom-element-definition","name":"c2-text-field","declaration":{"name":"TextField","module":"src/text-field.ts"}}]},{"kind":"javascript-module","path":"src/text-field-clear.ts","declarations":[{"kind":"class","description":"A `c2-text-field` that always shows a clear button while it has a value. Prefer `c2-text-field` with the\n`clearable` attribute; this element remains for markup that cannot toggle attributes. Inherits every attribute,\nslot, event and CSS variable of `c2-text-field`.","name":"TextFieldClear","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-text-field-clear__clear-icon--size","default":"24px"},{"type":{"text":"color"},"name":"--c2-text-field-clear__clear-icon--color","default":"rgb(70, 70, 70)"},{"type":{"text":"pixel"},"name":"--c2-text-field--min-height","default":"36px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"description":"Space between the icons and the text.","name":"--c2-text-field--gap","default":"8px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-left-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-right-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-left-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-right-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-top","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-right","default":"10px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-bottom","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-left","default":"12px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-top","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-right","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-bottom","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-left","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field--color","default":"#18181b","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field--background","default":"#ffffff","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-size"},"name":"--c2-text-field--font-size","default":"14px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-weight"},"name":"--c2-text-field--font-weight","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-style"},"name":"--c2-text-field--font-style","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-family"},"name":"--c2-text-field--font-family","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field--line-height","default":"20px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__placeholder--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"opacity"},"name":"--c2-text-field__placeholder--opacity","default":"1","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-weight"},"name":"--c2-text-field__placeholder--font-weight","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-style"},"name":"--c2-text-field__placeholder--font-style","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-top","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-right","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-bottom","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-left","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-top","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-right","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-bottom","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-left","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__focus--color","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__focus--background","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"outline"},"name":"--c2-text-field__focus--outline","default":"3px solid rgba(71, 110, 249, 0.2)","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__focus--outline-offset","default":"0px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-top","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-right","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-bottom","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-left","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__error--color","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__error--background","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"outline"},"name":"--c2-text-field__error__focus--outline","default":"3px solid rgba(220, 38, 38, 0.2)","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-top","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-right","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-bottom","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-left","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__read-only--color","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__read-only--background","default":"#fafafa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"opacity"},"name":"--c2-text-field__disabled--opacity","default":"0.38","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__icon--size","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__icon--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__clear-icon--size","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon--color","default":"#a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon__hover--color","default":"#18181b","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__help-icon--size","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__help-icon--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"description":"Space between the field and the help icon.","name":"--c2-text-field__help-icon--gap","default":"8px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"description":"Space between the field and the helper line.","name":"--c2-text-field__supporting-text--gap","default":"4px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-size"},"name":"--c2-text-field__supporting-text--font-size","default":"12px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__supporting-text--line-height","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text__error--color","default":"#dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"slots":[{"description":"Replaces the default cross icon.","name":"clear-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Icon (or short adornment text) at the start of the field: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`. Icons are sized by `--c2-text-field__icon--size`; an adornment keeps its own width.","name":"prefix-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Icon or adornment at the end of the field, after the clear button.","name":"suffix-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Icon shown beside the field, outside the border, e.g. a tooltip trigger.","name":"help-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Rich helper content below the field. `help` and `error-text` are the plain-text shortcuts.","name":"supporting-text","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"members":[{"kind":"field","name":"showClear","type":{"text":"boolean"},"default":"false"},{"kind":"method","name":"handleInput","privacy":"protected","parameters":[{"name":"event","type":{"text":"InputEvent"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"clearHandle","privacy":"protected"},{"kind":"method","name":"renderClearIcon"},{"kind":"method","name":"renderSuffixSlot","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"default":"true","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"internals","privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"customValidityMessage","type":{"text":"string"},"privacy":"private","default":"''","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"disabledByForm","type":{"text":"boolean"},"privacy":"private","default":"false","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","attribute":"readOnly","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","attribute":"disabled","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","attribute":"error","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"maxLength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","attribute":"maxLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"minLength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","attribute":"minLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","attribute":"pattern","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","attribute":"required","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","attribute":"type","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","attribute":"name","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","attribute":"autocomplete","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","attribute":"placeholder","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","attribute":"aria-label","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","attribute":"value","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"errorText","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","attribute":"error-text","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","attribute":"help","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","attribute":"clearable","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"dirty","type":{"text":"boolean"},"privacy":"private","default":"false","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"focused","type":{"text":"boolean"},"privacy":"private","default":"false","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"hasSupportingSlot","type":{"text":"boolean"},"privacy":"private","default":"false","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"input","type":{"text":"HTMLInputElement | null | undefined"},"privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"form","description":"The containing form, when this control is associated with one.","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"labels","description":"Labels associated with this form control.","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"validity","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"validationMessage","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"willValidate","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"reset","description":"Restores the initial value (the `value` attribute) and clears the dirty and error flags.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"formResetCallback","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"formDisabledCallback","parameters":[{"name":"disabled","type":{"text":"boolean"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"formStateRestoreCallback","parameters":[{"name":"state","type":{"text":"string | File | FormData | null"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"checkValidity","description":"Checks all current constraints and fires `invalid` on this element when they fail.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"reportValidity","description":"Checks all current constraints and asks the browser to show validation feedback.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"setCustomValidity","parameters":[{"name":"message","type":{"text":"string"}}],"description":"Sets or clears a custom validation error.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"handleFocus","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"isDirty","description":"True once the user has typed in the field.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"focus","return":{"type":{"text":"void"}},"parameters":[{"name":"options","optional":true,"type":{"text":"FocusOptions | undefined"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"blur","return":{"type":{"text":"void"}},"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"select","return":{"type":{"text":"void"}},"description":"Selects the whole text.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"handleFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"forwardFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"description":"A click anywhere on the field (icons, padding) focuses the input.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"handleFocusout","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"handleClear","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"handleSupportingSlotChange","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderPrefixSlot","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderHelpIconSlot","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderClearButton","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderSupportingText","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"redispatchEvent","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"syncFormState","privacy":"private","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"effectiveDisabled","privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"stateClasses","privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"superclass":{"name":"TextField","module":"/src/text-field"},"tagName":"c2-text-field-clear","customElement":true,"attributes":[{"name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","fieldName":"readOnly","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","fieldName":"disabled","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","fieldName":"error","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"maxLength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","fieldName":"maxLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"minLength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","fieldName":"minLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","fieldName":"pattern","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","fieldName":"required","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","fieldName":"type","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","fieldName":"name","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","fieldName":"autocomplete","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","fieldName":"placeholder","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"aria-label","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","fieldName":"ariaLabel","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","fieldName":"value","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"error-text","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","fieldName":"errorText","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","fieldName":"help","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","fieldName":"clearable","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"events":[{"type":{"text":"InputEvent"},"description":"Re-dispatched from the inner input on every keystroke; `value` is already updated.","name":"input","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"Event"},"description":"Re-dispatched from the inner input when the value is committed (blur or Enter).","name":"change","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"Event"},"description":"Fired after the clear button emptied the field (an `input` and a `change` event follow).","name":"clear","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}]}],"exports":[{"kind":"js","name":"TextFieldClear","declaration":{"name":"TextFieldClear","module":"src/text-field-clear.ts"}},{"kind":"custom-element-definition","name":"c2-text-field-clear","declaration":{"name":"TextFieldClear","module":"src/text-field-clear.ts"}}]}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/text-field",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/text-field.js",
   "exports": {
@@ -25,6 +25,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -64,12 +65,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.11",
+    "@c2n/core": "0.0.13",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+  "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
 }

package/react.d.ts

@@ -6,6 +6,10 @@
 //
 // Register the elements at module scope before React renders, or React writes an object prop as an
 // attribute and it stringifies.
+//
+// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
+// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
+// set properties. Those names are listed next to the properties below.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { TextField } from '@c2n/text-field'
@@ -13,12 +17,20 @@ import type { TextFieldClear } from '@c2n/text-field/text-field-clear.js'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
+type Attribute = string | number | boolean
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'c2-text-field': C2Props<TextField>
-      'c2-text-field-clear': C2Props<TextFieldClear>
+      'c2-text-field': C2Props<TextField> & {
+        'aria-label'?: Attribute
+        'error-text'?: Attribute
+      }
+      'c2-text-field-clear': C2Props<TextFieldClear> & {
+        'aria-label'?: Attribute
+        'error-text'?: Attribute
+      }
     }
   }
 }