@ulb-darmstadt/shacl-form 1.8.0 → 1.8.2

package/dist/property.d.ts

@@ -7,6 +7,7 @@ import { RokitSelect } from '@ro-kit/ui-widgets';
 export declare class ShaclProperty extends HTMLElement {
     template: ShaclPropertyTemplate;
     addButton: RokitSelect | undefined;
+    container: HTMLElement;
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode);
     addPropertyInstance(value?: Term): HTMLElement;
     updateControls(): void;

package/dist/theme.d.ts

@@ -12,7 +12,7 @@ export type Editor = HTMLElement & {
 export type InputListEntry = {
     value: Term | string;
     label?: string;
-    indent?: number;
+    children?: InputListEntry[];
 };
 export declare abstract class Theme {
     stylesheet: CSSStyleSheet;

package/dist/util.d.ts

@@ -6,8 +6,8 @@ export declare function findObjectValueByPredicate(quads: Quad[], predicate: str
 export declare function findObjectByPredicate(quads: Quad[], predicate: string, prefix?: string, languages?: string[]): Term | undefined;
 export declare function focusFirstInputElement(context: HTMLElement): void;
 export declare function findLabel(quads: Quad[], languages: string[]): string;
-export declare function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[], indent?: number): InputListEntry[];
+export declare function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[]): InputListEntry[];
 export declare function removePrefixes(id: string, prefixes: Prefixes): string;
-export declare function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate, indent?: number): InputListEntry[];
+export declare function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate): InputListEntry[];
 export declare function isURL(input: string): boolean;
 export declare function prioritizeByLanguage(languages: string[], text1?: Literal, text2?: Literal): Literal | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.8.0",
+    "version": "1.8.2",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
@@ -10,7 +10,9 @@
         ".": {
             "import": "./dist/form-default.js",
             "types": "./dist/form-default.d.ts"
-        }
+        },
+        "./*.ts": "./src/*.ts",
+        "./plugins/*.ts": "./src/plugins/*.ts"
     },
     "files": [
         "dist",
@@ -45,7 +47,7 @@
     },
     "devDependencies": {
         "@types/jsonld": "^1.5.15",
-        "@types/leaflet": "^1.9.19",
+        "@types/leaflet": "^1.9.20",
         "@types/leaflet-editable": "^1.2.6",
         "@types/leaflet.fullscreen": "^3.0.2",
         "@types/mapbox__mapbox-gl-draw": "^1.4.9",
@@ -53,8 +55,8 @@
         "@types/uuid": "^10.0.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "typescript": "^5.8.3",
-        "vite": "^6.2.5",
-        "vite-plugin-dts": "^4.5.3"
+        "vite": "^7.0.4",
+        "vite-plugin-dts": "^4.5.4"
     },
     "dependencies": {
         "@mapbox/mapbox-gl-draw": "^1.5.0",
@@ -69,7 +71,7 @@
         "uuid": "^11.1.0"
     },
     "peerDependencies": {
-        "@ro-kit/ui-widgets": "^0.0.27",
+        "@ro-kit/ui-widgets": "^0.0.29",
         "mdui": "^2.1.4"
     }
 }

package/src/constants.ts

@@ -17,12 +17,11 @@ export const DATA_GRAPH = DataFactory.namedNode('loaded-data')
 export const RDF_PREDICATE_TYPE = DataFactory.namedNode(PREFIX_RDF + 'type')
 export const DCTERMS_PREDICATE_CONFORMS_TO = DataFactory.namedNode(PREFIX_DCTERMS + 'conformsTo')
 export const RDFS_PREDICATE_SUBCLASS_OF = DataFactory.namedNode(PREFIX_RDFS + 'subClassOf')
-export const SKOS_PREDICATE_BROADER = DataFactory.namedNode(PREFIX_SKOS + 'broader')
 export const OWL_PREDICATE_IMPORTS = DataFactory.namedNode(PREFIX_OWL + 'imports')
-export const OWL_OBJECT_NAMED_INDIVIDUAL = DataFactory.namedNode(PREFIX_OWL + 'NamedIndividual')
 export const SHACL_OBJECT_NODE_SHAPE = DataFactory.namedNode(PREFIX_SHACL + 'NodeShape')
 export const SHACL_OBJECT_IRI = DataFactory.namedNode(PREFIX_SHACL + 'IRI')
 export const SHACL_PREDICATE_PROPERTY = DataFactory.namedNode(PREFIX_SHACL + 'property')
 export const SHACL_PREDICATE_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'class')
 export const SHACL_PREDICATE_TARGET_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'targetClass')
-export const SHACL_PREDICATE_NODE_KIND = DataFactory.namedNode(PREFIX_SHACL + 'nodeKind')
+export const SHACL_PREDICATE_NODE_KIND = DataFactory.namedNode(PREFIX_SHACL + 'nodeKind')
+export const XSD_DATATYPE_STRING =  DataFactory.namedNode(PREFIX_XSD + 'string')

package/src/constraints.ts

@@ -13,7 +13,6 @@ export function createShaclOrConstraint(options: Term[], context: ShaclNode | Sh
     constraintElement.classList.add('shacl-or-constraint')
 
     const optionElements: InputListEntry[] =  []
-    optionElements.push({ label: '--- please choose ---', value: '' })
 
     if (context instanceof ShaclNode) {
         const properties: ShaclProperty[][] = []

package/src/form.ts

@@ -7,6 +7,7 @@ import { Editor, Theme } from './theme'
 import { serialize } from './serialize'
 import { Validator } from 'shacl-engine'
 import { setSharedShapesGraph } from './loader'
+import { RokitCollapsible } from '@ro-kit/ui-widgets'
 
 export class ShaclForm extends HTMLElement {
     static get observedAttributes() { return Config.dataAttributes() }
@@ -88,7 +89,12 @@ export class ShaclForm extends HTMLElement {
                                             this.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
                                         } else {
                                             // focus first invalid element
-                                            (this.form.querySelector(':scope .invalid > .editor') as HTMLElement)?.focus()
+                                            let invalidEditor = this.form.querySelector(':scope .invalid > .editor')
+                                            if (invalidEditor) {
+                                                (invalidEditor as HTMLElement).focus()
+                                            } else {
+                                                this.form.querySelector(':scope .invalid')?.scrollIntoView()
+                                            }
                                         }
                                     })
                                 }
@@ -176,10 +182,16 @@ export class ShaclForm extends HTMLElement {
                         if (result.path?.length) {
                             const path = result.path[0].predicates[0]
                             // try to find most specific editor elements first
-                            let invalidElements = this.form.querySelectorAll(`:scope shacl-node[data-node-id='${focusNode.id}'] > shacl-property > .property-instance[data-path='${path.id}'] > .editor, :scope shacl-node[data-node-id='${focusNode.id}'] > .shacl-group > shacl-property > .property-instance[data-path='${path.id}'] > .editor`)
+                            let invalidElements = this.form.querySelectorAll(`
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > shacl-property > .property-instance[data-path='${path.id}'] > .editor,
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > shacl-property > .shacl-group > .property-instance[data-path='${path.id}'] > .editor,
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > .shacl-group > shacl-property > .property-instance[data-path='${path.id}'] > .editor,
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > .shacl-group > shacl-property > .shacl-group > .property-instance[data-path='${path.id}'] > .editor`)
                             if (invalidElements.length === 0) {
                                 // if no editors found, select respective node. this will be the case for node shape violations.
-                                invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${focusNode.id}']  > * > [data-path='${path.id}']`)
+                                invalidElements = this.form.querySelectorAll(`
+                                    :scope [data-node-id='${focusNode.id}']  > shacl-property > .property-instance[data-path='${path.id}'],
+                                    :scope [data-node-id='${focusNode.id}']  > shacl-property > .shacl-group > .property-instance[data-path='${path.id}']`)
                             }
 
                             for (const invalidElement of invalidElements) {
@@ -191,8 +203,8 @@ export class ShaclForm extends HTMLElement {
                                         parent.classList.remove('valid')
                                         parent.appendChild(this.createValidationErrorDisplay(result))
                                         do {
-                                            if (parent.classList.contains('collapsible')) {
-                                                parent.classList.add('open')
+                                            if (parent instanceof RokitCollapsible) {
+                                                parent.open = true
                                             }
                                             parent = parent.parentElement
                                         } while (parent)

package/src/group.ts

@@ -1,35 +1,34 @@
 import { PREFIX_RDFS } from './constants'
 import { Config } from './config'
 import { findObjectValueByPredicate } from './util'
+import { RokitCollapsible } from '@ro-kit/ui-widgets'
 
 export function createShaclGroup(groupSubject: string, config: Config): HTMLElement {
-    const group = document.createElement('div')
-    group.dataset['subject'] = groupSubject
-    group.classList.add('shacl-group')
     let name = groupSubject
     const quads = config.store.getQuads(groupSubject, null, null, null)
     const label = findObjectValueByPredicate(quads, "label", PREFIX_RDFS, config.languages)
     if (label) {
         name = label
     }
-    const order = findObjectValueByPredicate(quads, "order")
-    if (order) {
-        group.style.order = order
-    }
-    const header = document.createElement('h1')
-    header.innerText = name
-    group.appendChild(header)
 
+    let group: HTMLElement
     if (config.attributes.collapse !== null) {
-        group.classList.add('collapsible')
-        if (config.attributes.collapse === 'open') {
-            group.classList.add('open')
-        }
-        header.classList.add('activator')
-        header.addEventListener('click', () => {
-            group.classList.toggle('open')
-        })
+        group = new RokitCollapsible()
+        group.classList.add('collapsible');
+        (group as RokitCollapsible).open = config.attributes.collapse === 'open';
+        (group as RokitCollapsible).label = name
+    } else {
+        group = document.createElement('div')
+        const header = document.createElement('h1')
+        header.innerText = name
+        group.appendChild(header)
+    }
 
+    group.dataset['subject'] = groupSubject
+    group.classList.add('shacl-group')
+    const order = findObjectValueByPredicate(quads, "order")
+    if (order) {
+        group.style.order = order
     }
     return group
 }

package/src/property-template.ts

@@ -135,6 +135,7 @@ export class ShaclPropertyTemplate {
     clone(): ShaclPropertyTemplate {
         const copy = Object.assign({}, this)
         // arrays are not cloned but referenced, so create them manually
+        copy.extendedShapes = [ ...this.extendedShapes ]
         copy.owlImports = [ ...this.owlImports ]
         if (this.languageIn) {
             copy.languageIn = [ ...this.languageIn ]

package/src/property.ts

@@ -1,4 +1,4 @@
-import { BlankNode, DataFactory, NamedNode, Quad, Store } from 'n3'
+import { BlankNode, DataFactory, Literal, NamedNode, Quad, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { ShaclNode } from './node'
 import { createShaclOrConstraint, resolveShaclOrConstraintOnProperty } from './constraints'
@@ -9,15 +9,25 @@ import { Editor, fieldFactory, InputListEntry } from './theme'
 import { toRDF } from './serialize'
 import { findPlugin } from './plugin'
 import { DATA_GRAPH, RDF_PREDICATE_TYPE, SHACL_PREDICATE_TARGET_CLASS } from './constants'
-import { RokitButton, RokitSelect } from '@ro-kit/ui-widgets'
+import { RokitButton, RokitCollapsible, RokitSelect } from '@ro-kit/ui-widgets'
 
 export class ShaclProperty extends HTMLElement {
     template: ShaclPropertyTemplate
     addButton: RokitSelect | undefined
+    container: HTMLElement
 
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode) {
         super()
         this.template = new ShaclPropertyTemplate(config.store.getQuads(shaclSubject, null, null, null), parent, config)
+        if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
+            const collapsible = new RokitCollapsible()
+            collapsible.classList.add('collapsible', 'shacl-group');
+            collapsible.open = config.attributes.collapse === 'open';
+            collapsible.label = this.template.label;
+            this.container = collapsible
+        } else {
+            this.container = this
+        }
 
         if (this.template.order !== undefined) {
             this.style.order = `${this.template.order}`
@@ -28,7 +38,7 @@ export class ShaclProperty extends HTMLElement {
 
         if (config.editMode && !parent.linked) {
             this.addButton = this.createAddButton()
-            this.appendChild(this.addButton)
+            this.container.appendChild(this.addButton)
         }
 
         // bind existing values
@@ -65,21 +75,10 @@ export class ShaclProperty extends HTMLElement {
             this.updateControls()
         }
 
-        if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
+        if (this.container instanceof RokitCollapsible) {
             // in view mode, show collapsible only when we have something to show
-            if ((config.editMode && !parent.linked) || this.childElementCount > 0) {
-                const collapsible = this
-                collapsible.classList.add('collapsible')
-                if (this.template.config.attributes.collapse === 'open') {
-                    collapsible.classList.add('open')
-                }
-                const activator = document.createElement('h1')
-                activator.classList.add('activator')
-                activator.innerText = this.template.label
-                activator.addEventListener('click', () => {
-                    collapsible.classList.toggle('open')
-                })
-                this.prepend(activator)
+            if ((config.editMode && !parent.linked) || this.container.childElementCount > 0) {
+                this.appendChild(this.container)
             }
         }
     }
@@ -103,7 +102,7 @@ export class ShaclProperty extends HTMLElement {
         } else {
             // check if value is part of the data graph. if not, create a linked resource
             let linked = false
-            if (value) {
+            if (value && !(value instanceof Literal)) {
                 const clazz = this.getRdfClassToLinkOrCreate()
                 if (clazz && this.template.config.store.countQuads(value, RDF_PREDICATE_TYPE, clazz, DATA_GRAPH) === 0) {
                     // value is not in data graph, so must be a link in the shapes graph
@@ -113,9 +112,9 @@ export class ShaclProperty extends HTMLElement {
             instance = createPropertyInstance(this.template, value, undefined, linked || this.template.parent.linked)
         }
         if (this.addButton) {
-            this.insertBefore(instance!, this.addButton)
+            this.container.insertBefore(instance!, this.addButton)
         } else {
-            this.appendChild(instance!)
+            this.container.appendChild(instance!)
         }
         return instance!
     }
@@ -136,10 +135,13 @@ export class ShaclProperty extends HTMLElement {
         const mayAdd = this.template.maxCount === undefined || instanceCount < this.template.maxCount
         this.classList.toggle('may-remove', mayRemove)
         this.classList.toggle('may-add', mayAdd)
+        if (mayAdd && this.addButton?.input) {
+            this.addButton.input.updateMinWidth()
+        }
     }
 
     toRDF(graph: Store, subject: NamedNode | BlankNode) {
-        for (const instance of this.querySelectorAll(':scope > .property-instance')) {
+        for (const instance of this.querySelectorAll(':scope > .property-instance, :scope > .collapsible > .property-instance')) {
             const pathNode = DataFactory.namedNode((instance as HTMLElement).dataset.path!)
             if (instance.firstChild instanceof ShaclNode) {
                 const shapeSubject = instance.firstChild.toRDF(graph)
@@ -247,7 +249,7 @@ export class ShaclProperty extends HTMLElement {
                 } else {
                     // user wants to link existing instance
                     const value = JSON.parse(addButton.value) as Term
-                    this.insertBefore(createPropertyInstance(this.template, value, true, true), addButton)
+                    this.container.insertBefore(createPropertyInstance(this.template, value, true, true), addButton)
                 }
                 addButton.value = ''
             })

package/src/styles.css

@@ -1,30 +1,28 @@
-form { box-sizing: border-box; display:block; --label-width: 8em; --caret-size: 10px; }
+form { display:block; --label-width: 8em; --caret-size: 10px; }
 form.mode-edit { padding-left: 1em;  }
-form *, form ::after, form ::before { box-sizing: inherit; }
-shacl-node, .shacl-group { display: flex; flex-direction: column; width: 100%; position: relative; }
+form, form * { box-sizing: border-box; }
+shacl-node, .collapsible::part(content) { display: flex; flex-direction: column; width: 100%; position: relative; }
 shacl-node .remove-button { margin-left: 4px; margin-top: 1px; }
 shacl-node .add-button { color: #555; background-color: transparent; margin: 4px 24px 0 0; border: 0; }
 shacl-node .add-button:hover { color:#222; }
 shacl-node .add-button:focus { box-shadow: none; }
-shacl-node h1 { font-size: 1.1rem; border-bottom: 1px solid; margin-top: 4px; color: #555; }
-shacl-property { display: flex; flex-direction: column; align-items: end; position: relative; }
+shacl-node h1 { font-size: 16px; border-bottom: 1px solid #AAA; margin-top: 4px; color: #555; }
+shacl-property:not(:has(>.collapsible)), shacl-property>.collapsible::part(content) { display: flex; flex-direction: column; align-items: end; position: relative; }
 shacl-property:not(.may-add) > .add-button { display: none; }
 shacl-property:not(.may-remove) > .property-instance > .remove-button:not(.persistent) { visibility: hidden; }
 shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.persistent) { visibility: hidden; }
 .mode-view .shacl-group:not(:has(shacl-property)) { display: none; }
 .property-instance, .shacl-or-constraint { display: flex; align-items: flex-start; padding: 4px 0; width: 100%; position: relative; }
+.shacl-or-constraint > div { display: flex; flex-grow: 1; }
 .shacl-or-constraint label { display: inline-block; word-break: break-word; width: var(--label-width); line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
 .property-instance label[title] { cursor: help; text-decoration: underline dashed #AAA; }
 .property-instance.linked label:after, label.linked:after { content: '\1F517'; font-size: 0.6em; padding-left: 6px; }
 .mode-edit .property-instance label.required::before { color: red; content: '\2736'; font-size: 0.6rem; position: absolute; left: -1.4em; top: 0.15rem; }
-.property-instance.valid::before { position: absolute; left: calc(var(--label-width) - 1em); top: 3px; color: green; content: '\2713'; }
-.editor:not([type='checkbox']), .shacl-or-constraint select { flex-grow: 1; }
-.shacl-or-constraint select { border: 1px solid #DDD; padding: 2px 4px; }
-select { overflow: hidden; text-overflow: ellipsis; }
+.property-instance.valid::before { content: ''; position: absolute; left: calc(var(--label-width) - 1em); top:0.5em; width: 0.9em; height: 0.9em; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" fill="green" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z"/></svg>'); }
+.editor:not([type='checkbox']) { flex-grow: 1; }
 textarea.editor { resize: vertical; }
-.lang-chooser { position: absolute; top: 6px; right: 26px; border: 0; background-color: #e9e9ed; padding: 2px 4px; max-width: 40px; width: 40px; box-sizing: content-box; }
-.lang-chooser+.editor { padding-right: 55px; }
-.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 3px; color: red; cursor: help; }
+.lang-chooser { border: 0; background-color: #e9e9ed; padding: 2px 4px; align-self: flex-start; }
+.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 0.5em; color: red; cursor: help; }
 .validation-error::before { content: '\26a0' }
 .validation-error.node { left: -1em; }
 .invalid > .editor { border-color: red !important; }
@@ -43,15 +41,9 @@ a, a:visited { color: inherit; }
     0% { opacity: 0; transform: scaleY(0.8); }
     100% { opacity: 1; transform: scaleY(1); }
 }
-  
-.collapsible > .activator { display: flex; justify-content: space-between; align-items: center; cursor: pointer; width: 100%; border: 0; padding: 8px 0; transition: 0.2s; }
-.collapsible > .activator:hover, .collapsible.open > .activator { background-color: #F5F5F5; }
-.collapsible > .activator::after { content:''; width: var(--caret-size); height: var(--caret-size); border-style: none solid solid none; border-width: calc(0.3 * var(--caret-size)); transform: rotate(45deg); transition: transform .15s ease-out; margin-right: calc(0.5 * var(--caret-size)); }
-.collapsible.open > .activator::after { transform: rotate(225deg); }
-.collapsible > *:not(.activator) { transition: all 0.2s ease-out; opacity: 1; }
-.collapsible:not(.open) > *:not(.activator) { max-height: 0; padding: 0; opacity: 0; overflow: hidden; }
+.collapsible::part(label) { font-weight: 600; }
+.collapsible > .property-instance:nth-child(even) { background-color: #F8F8F8; }
 .collapsible > .property-instance > shacl-node > h1 { display: none; }
-.collapsible.open > .property-instance:nth-child(odd) { background-color: #F5F5F5; }
 .ref-link { cursor: pointer; }
 .ref-link:hover { text-decoration: underline; }
 .node-id-display { color: #999; font-size: 11px; }

package/src/theme.ts

@@ -6,7 +6,7 @@ import { ShaclPropertyTemplate } from './property-template'
 import css from './styles.css?raw'
 
 export type Editor = HTMLElement & { value: string, type?: string, shaclDatatype?: NamedNode<string>, binaryData?: string, checked?: boolean, disabled?: boolean }
-export type InputListEntry = { value: Term | string, label?: string, indent?: number }
+export type InputListEntry = { value: Term | string, label?: string, children?: InputListEntry[] }
 
 export abstract class Theme {
     stylesheet: CSSStyleSheet

package/src/themes/default.css

@@ -1,4 +1,4 @@
-.editor:not([type='checkbox']) { border: 1px solid #DDD; padding: 2px 4px; }
+.editor:not([type='checkbox']) { border: 1px solid #DDD; }
 .property-instance label { display: inline-flex; word-break: break-word; line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
 .property-instance:not(:first-child) > label:not(.persistent) { visibility: hidden; max-height: 0; }
 .mode-edit .property-instance label { width: var(--label-width); }

package/src/themes/default.ts

@@ -1,10 +1,11 @@
 import { Term } from '@rdfjs/types'
 import { ShaclPropertyTemplate } from "../property-template"
 import { Editor, InputListEntry, Theme } from "../theme"
-import { PREFIX_XSD } from '../constants'
-import { Literal } from 'n3'
+import { PREFIX_SHACL, PREFIX_XSD, XSD_DATATYPE_STRING } from '../constants'
+import { Literal, NamedNode } from 'n3'
 import { Term as N3Term }  from 'n3'
 import css from './default.css?raw'
+import { RokitInput, RokitSelect, RokitTextArea } from '@ro-kit/ui-widgets'
 
 export class DefaultTheme extends Theme {
     idCtr = 0
@@ -30,6 +31,8 @@ export class DefaultTheme extends Theme {
         }
         if (template?.nodeKind) {
             editor.dataset.nodeKind = template.nodeKind.value
+        } else if (value instanceof NamedNode) {
+            editor.dataset.nodeKind = PREFIX_SHACL + 'IRI'
         }
         if (template?.hasValue || template?.readonly) {
             editor.disabled = true
@@ -59,7 +62,7 @@ export class DefaultTheme extends Theme {
     }
 
     createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
-        const editor: Editor = document.createElement('input')
+        const editor = new RokitInput()
         if (template.datatype?.value  === PREFIX_XSD + 'dateTime') {
             editor.type = 'datetime-local'
             // this enables seconds in dateTime input
@@ -68,6 +71,8 @@ export class DefaultTheme extends Theme {
         else {
             editor.type = 'date'
         }
+        editor.clearable = true
+        editor.dense = true
         editor.classList.add('pr-0')
         const result = this.createDefaultTemplate(label, null, required, editor, template)
         if (value) {
@@ -89,17 +94,16 @@ export class DefaultTheme extends Theme {
     createTextEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
         let editor
         if (template.singleLine === false) {
-            editor = document.createElement('textarea')
-            editor.rows = 5
+            editor = new RokitTextArea()
+            editor.resize = 'auto'
         }
         else {
-            editor = document.createElement('input')
-            editor.type = 'text'
-            if (template.pattern) {
-                editor.pattern = template.pattern
-            }
+            editor = new RokitInput()
+        }
+        editor.dense = true
+        if (template.pattern) {
+            editor.pattern = template.pattern
         }
-    
         if (template.minLength) {
             editor.minLength = template.minLength
         }
@@ -123,10 +127,12 @@ export class DefaultTheme extends Theme {
         } else {
             langChooser = document.createElement('input')
             langChooser.maxLength = 5 // e.g. en-US
+            langChooser.size = 5
             langChooser.placeholder = 'lang?'
         }
         langChooser.title = 'Language of the text'
         langChooser.classList.add('lang-chooser')
+        langChooser.slot = 'suffix'
         // if lang chooser changes, fire a change event on the text input instead. this is for shacl validation handling.
         langChooser.addEventListener('change', (ev) => {
             ev.stopPropagation();
@@ -139,7 +145,7 @@ export class DefaultTheme extends Theme {
             langChooser.value = value.language
         }
         editor.dataset.lang = langChooser.value
-        editor.after(langChooser)
+        editor.appendChild(langChooser)
         return result
     }
 
@@ -179,8 +185,10 @@ export class DefaultTheme extends Theme {
     }
 
     createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
-        const editor = document.createElement('input')
+        const editor = new RokitInput()
         editor.type = 'number'
+        editor.clearable = true
+        editor.dense = true
         editor.classList.add('pr-0')
         const min = template.minInclusive !== undefined ? template.minInclusive : template.minExclusive !== undefined ? template.minExclusive + 1 : undefined
         const max = template.maxInclusive !== undefined ? template.maxInclusive : template.maxExclusive !== undefined ? template.maxExclusive - 1 : undefined
@@ -197,43 +205,46 @@ export class DefaultTheme extends Theme {
     }
 
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
-        const editor = document.createElement('select')
+        const editor = new RokitSelect()
+        editor.clearable = true
+        editor.dense = true
         const result = this.createDefaultTemplate(label, null, required, editor, template)
-        let addEmptyOption = true
-    
-        for (const item of listEntries) {
-            const option = document.createElement('option')
-            let itemValue = ''
-            if (typeof item.value === 'string') {
-                itemValue = item.value
+        const ul = document.createElement('ul')
+        let isFlatList = true
+
+        const appendListEntry = (entry: InputListEntry, parent: HTMLUListElement) => {
+            const li = document.createElement('li')
+            if (typeof entry.value === 'string') {
+                li.dataset.value = entry.value
+                li.innerText = entry.label ? entry.label : entry.value
             } else {
-                // this is needed for typed rdf literals
-                itemValue = (item.value as N3Term).id
-            }
-            option.innerHTML = item.label ? item.label : itemValue
-            option.value = itemValue
-            if (item.indent) {
-                for (let i = 0; i < item.indent; i++) {
-                    option.innerHTML = '&#160;&#160;' + option.innerHTML
+                if (entry.value instanceof Literal && entry.value.datatype.equals(XSD_DATATYPE_STRING)) {
+                    li.dataset.value = entry.value.value
+                } else {
+                    // this is needed for typed rdf literals
+                    li.dataset.value = (entry.value as N3Term).id
                 }
+                li.innerText = entry.label ? entry.label : entry.value.value
             }
-            if (value && value.value === itemValue) {
-                option.selected = true
-            }
-            if (itemValue === '') {
-                addEmptyOption = false
-            }
-            editor.appendChild(option)
-        }
-        if (addEmptyOption) {
-            // add an empty element
-            const emptyOption = document.createElement('option')
-            emptyOption.value = ''
-            if (!value) {
-                emptyOption.selected = true
+            parent.appendChild(li)
+            if (entry.children?.length) {
+                isFlatList = false
+                const ul = document.createElement('ul')
+                li.appendChild(ul)
+                for (const child of entry.children) {
+                    appendListEntry(child, ul)
+                }
             }
-            editor.prepend(emptyOption)
         }
+
+        for (const item of listEntries) {
+            appendListEntry(item, ul)
+        }
+        if (!isFlatList) {
+            editor.collapse = true
+        }
+
+        editor.appendChild(ul)
         if (value) {
             editor.value = value.value
         }