Initial RDF forms component

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 dist
 src/versionInfo.ts
+src/types/custom-elements.d.ts
 .idea
 .vscode
 coverage

src/components/combobox/Combobox.ts

@@ -34,6 +34,9 @@ export default class Combobox extends WebComponent {
   @query('input')
   private accessor inputElement: HTMLInputElement | null = null
 
+  @property({ type: Boolean, reflect: true })
+  accessor readonly = false
+
   @state()
   private accessor filter = ''
 
@@ -117,6 +120,7 @@ export default class Combobox extends WebComponent {
             autocomplete="off"
             spellcheck="false"
             ?required=${this.required}
+            ?readonly=${this.readonly}
             .value=${this.value}
             @keydown=${this.onInputKeyDown}
             @focus=${this.onInputFocus}

src/components/input/Input.styles.css

@@ -23,5 +23,12 @@
             color: var(--solid-ui-color-gray-700);
             font-size: inherit;
         }
+
+        input:read-only {
+            border: none;
+            padding: 0;
+            cursor: not-allowed;
+        }
     }
+
 }

src/components/input/Input.ts

@@ -28,6 +28,9 @@ export default class Input extends WebComponent {
   @property({ type: Boolean, reflect: true })
   accessor required = false;
 
+  @property({ type: Boolean, reflect: true })
+  accessor readonly = false;
+
   @query('input')
   private accessor inputElement: HTMLInputElement | null = null;
 
@@ -54,6 +57,7 @@ export default class Input extends WebComponent {
           placeholder=${this.placeholder}
           ?required=${this.required}
           .value=${this.value}
+          ?readonly=${this.readonly}
           @input=${() => this.inputTrait.onInput()}
           @keydown=${this.onKeyDown}
         />