@humandialog/forms.svelte 1.7.27 → 1.8.0

package/components/document/editor.svelte

@@ -29,7 +29,7 @@ import History from "@tiptap/extension-history";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { getAttributes } from "@tiptap/core";
 import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../../stores.js";
-import { informModification, pushChanges } from "../../updates.js";
+import { setjItemProperty, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
 import {
@@ -65,7 +65,6 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let compact = false;
-export let onSingleChange = void 0;
 export let onApplyChanges = void 0;
 export let onFocusCb = void 0;
 export let onBlurCb = void 0;
@@ -73,7 +72,6 @@ export let onAddImage = void 0;
 export let onRemoveImage = void 0;
 export let onLinkClick = void 0;
 export let c = "";
-export let pushChangesImmediately = true;
 export let chat = void 0;
 export let readOnly = false;
 export let extraFrontPaletteCommands = [];
@@ -602,7 +600,7 @@ onMount(() => {
     editable: !readOnly,
     editorProps: {
       attributes: {
-        class: `${cs} ${appearance_class} prose prose-base sm:prose-base dark:prose-invert ${additional_class}  whitespace-pre-wrap focus:outline-none`
+        class: `${cs} ${appearance_class} ${additional_class}  whitespace-pre-wrap focus:outline-none`
       }
     },
     element: editorElement,
@@ -660,10 +658,7 @@ onMount(() => {
       if (wasContentChanged) {
         hasChangedValue = true;
         changedValue = editor2.getHTML();
-        if (onSingleChange)
-          onSingleChange(changedValue);
-        else
-          logChanges();
+        logChanges();
         handleImagesChanges(transaction);
       }
       refreshToolbarOperations();
@@ -738,18 +733,13 @@ function saveData() {
     return true;
   } else if (item && a) {
     logChanges();
-    if (pushChangesImmediately)
-      pushChanges(refreshToolbarOperations);
+    pushChanges(refreshToolbarOperations);
     return true;
   }
   return false;
 }
 function logChanges() {
-  item[a] = changedValue;
-  if (typename)
-    informModification(item, a, typename);
-  else
-    informModification(item, a);
+  setjItemProperty(item, a, changedValue);
 }
 let palette = null;
 let is_command_palette_visible = false;
@@ -1052,50 +1042,50 @@ export function setCursorPos(num) {
   editor.commands.focus(num);
 }
 const paletteMarksCommands = () => [
-  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong,bold", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
-  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "italic,em", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
-  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", tags: "under", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
-  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", tags: "strike", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
+  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong,bold", mricon: "bold", on_choice: makeBold, is_active: () => editor?.isActive("bold") },
+  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "italic,em", mricon: "italic", on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
+  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", tags: "under", mricon: "underline", on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
+  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", tags: "strike", mricon: "strikethrough", on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
 ];
 const paletteStylesCommands = () => [
-  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1" }), description: "Description heading", tags: "h1,head", icon: IcH1, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1#" }), description: "Description heading", tags: "h1,head", mricon: "heading-1", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
     else
       editor.chain().focus().setHeading({ level: 1 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 1 }) },
-  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2,head", icon: IcH2, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2,head", mricon: "heading-2", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
     else
       editor.chain().focus().setHeading({ level: 2 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 2 }) },
-  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3,head", icon: IcH3, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3,head", mricon: "heading-3", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
     else
       editor.chain().focus().setHeading({ level: 3 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 3 }) },
-  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4,head", icon: IcH4, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4,head", mricon: "heading-4", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
     else
       editor.chain().focus().setHeading({ level: 4 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 4 }) },
-  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text,normal", icon: FaRemoveFormat, on_choice: (range) => {
+  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text,normal", mricon: "pilcrow", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();
     else
       editor.chain().focus().setParagraph().run();
   }, is_active: () => editor?.isActive("paragraph") },
-  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", tags: "code", icon: FaCode, on_choice: (range) => {
+  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", tags: "code", mricon: "code-xml", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setCodeBlock().run();
     else
       editor.chain().focus().setCodeBlock().run();
   }, is_active: () => editor?.isActive("CodeBlock") },
   //    {   caption: 'Comment',      description: 'With this you can comment the above paragraph',   icon: FaComment,                    on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsComment().run(); else editor.chain().focus().setAsComment().run() }, is_active: () => editor?.isActive('CommentBlock')  } ,
-  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", tags: "quote", icon: FaQuoteRight, on_choice: (range) => {
+  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", tags: "quote", mricon: "text-quote", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsQuote().run();
     else
@@ -1103,7 +1093,7 @@ const paletteStylesCommands = () => [
   }, is_active: () => editor?.isActive("QuoteBlock") },
   //    {   caption: 'Warning',      description: 'An important warning to above paragraph',         icon: FaExclamationTriangle,        on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsWarning().run(); else editor.chain().focus().setAsWarning().run() }, is_active: () => editor?.isActive('WarningBlock')  } ,
   //    {   caption: 'Info',         description: 'An important info about above paragraph',         icon: FaInfo,                       on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsInfo().run(); else editor.chain().focus().setAsInfo().run() }, is_active: () => editor?.isActive('InfoBlock')  },
-  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", tags: "bullet", icon: FaListUl, on_choice: (range) => {
+  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", tags: "bullet", mricon: "list", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).toggleBulletList().run();
     else
@@ -1111,19 +1101,19 @@ const paletteStylesCommands = () => [
   }, is_active: () => editor?.isActive("bulletList") }
 ];
 const paletteInsertCommands = () => [
-  { caption: i18n({ en: "Image", es: "Imagen", pl: "Obraz" }), description: "Add image to document", tags: "img,picture", icon: FaImage, on_choice: (range) => {
+  { caption: i18n({ en: "Image", es: "Imagen", pl: "Obraz" }), description: "Add image to document", tags: "img,picture", mricon: "image", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).run();
     if (onAddImage)
       onAddImage(onAddedImageReady);
   } },
-  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", tags: "table", icon: FaTable, on_choice: (range) => {
+  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", tags: "table", mricon: "table", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).insertTable().run();
     else
       editor.chain().focus().insertTable().run();
   }, is_active: () => editor?.isActive("table") },
-  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr,line", icon: FaGripLines, on_choice: (range) => {
+  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr,line", mricon: "minus", on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHorizontalRule().run();
     else
@@ -1266,7 +1256,7 @@ function getPaletteCommands() {
 
 
 
-<div on:click 
+<div on:click
     bind:this={editorElement} />
 
 <Palette    commands={getPaletteCommands()}

package/components/document/editor.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         compact?: boolean | undefined;
-        onSingleChange?: Function | undefined;
         onApplyChanges?: Function | undefined;
         onFocusCb?: undefined;
         onBlurCb?: undefined;
@@ -17,7 +16,6 @@ declare const __propDef: {
         onRemoveImage?: undefined;
         onLinkClick?: Function | undefined;
         c?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
         chat?: object | undefined;
         readOnly?: boolean | undefined;
         extraFrontPaletteCommands?: any[] | undefined;

package/components/document/internal/palette.row.svelte

@@ -1,5 +1,6 @@
 <svelte:options accessors={true}/>
 <script>import Icon from "../../icon.svelte";
+import Ricon from "../../r.icon.svelte";
 export let id;
 export let cmd;
 export let width_px = 400;
@@ -31,17 +32,18 @@ export function scrollToView() {
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div id={id} class="w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" 
-     on:click 
+<div id={id} class="w-full text-left flex flew-row justify-between cursor-context-menu {active_class} {cl}"
+     on:click
      on:mousemove
      on:mousedown
      bind:this={element}>
+
+
     <div class="flex items-center justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
-        {#if cmd.icon}
-            <Icon s="md" component={cmd.icon}/>
-        {/if}
+        <Ricon icon = {cmd.mricon} s/>
+    </div>
+    <div class="py-2 grow">
+    <span>{cmd.caption}</span>
     </div>
-    
-    <h4>{cmd.caption}</h4>
-</div>
 
+</div>

package/components/document/internal/palette.svelte

@@ -273,7 +273,7 @@ function isRowActive(cmd) {
 </script>
 
 {#if isToolbox}
-    <menu   class="  bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
+    <menu   class="  bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md
                     z-40
                     flex flex-row flex-nowrap fixed"
             style={css_style}
@@ -291,12 +291,12 @@ function isRowActive(cmd) {
                     {@const active=isRowActive(cmd)}
                     <button class="font-medium m-0 py-2 mr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu focus:outline-none"
                             class:dark:bg-stone-700={active}
-                            class:bg-stone-300={active}
+                            class:bg-stone-200={active}
                             {id}
                             bind:this={rows[idx]}
                             on:click={ () => { execute_mouse_click(cmd.on_choice); }}
                             on:mousedown={buttonMousedown}>
-                    
+
                         <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
                             {#if cmd.icon}
                                 {@const cc = mobile ? 7 : 6}
@@ -314,7 +314,7 @@ function isRowActive(cmd) {
     <!--div hidden={!visible}-->
 
         <div    hidden={!visible}
-                class=" bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
+                class=" bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md
                         z-40 fixed"
                 id="__hd_FormattingPalette"
                 bind:this={paletteElement}
@@ -324,7 +324,7 @@ function isRowActive(cmd) {
                 {#key closeButtonPos}
                     <button class="     text-stone-800 dark:text-stone-400
                                         fixed w-6 h-6 flex items-center justify-center
-                                        focus:outline-none font-medium  text-sm text-center" 
+                                        focus:outline-none font-medium  text-sm text-center"
                             style={closeButtonPos}
                             on:mousedown={buttonMousedown}
                             on:click={ () => hide() }>  <!-- rounded-full text-stone-500 bg-stone-200/70 hover:bg-stone-200  dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 -->
@@ -362,7 +362,6 @@ function isRowActive(cmd) {
 
         </div>
     <!---/div-->
-    
-    
-{/if}
 
+
+{/if}

package/components/document/rich.edit.svelte

@@ -62,8 +62,8 @@ let appearance_class;
 if (compact)
   appearance_class = "";
 else
-  appearance_class = `bg-stone-50 border border-stone-300 rounded-md 
-                            dark:bg-stone-700 dark:border-stone-600 
+  appearance_class = `bg-stone-50 border border-stone-300 rounded-md
+                            dark:bg-stone-700 dark:border-stone-600
                             px-2.5`;
 let last_tick = -1;
 $: {
@@ -994,21 +994,21 @@ function saveData() {
   return false;
 }
 let commands = [
-  { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: () => {
+  { caption: "Normal", description: "This is normal text style", tags: "text", mricon: "pilcrow", on_choice: () => {
     do_format("p", "");
   } },
   //   {   caption: 'Heading 1',    description: 'Big section heading',            tags: 'h1',      icon: FaHead,    icon_size: 6,      on_choice: () => { do_format('h2', '') } } ,
   //   {   caption: 'Heading 2',    description: 'Medium section heading',         tags: 'h2',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
   //   {   caption: 'Heading 3',    description: 'Small section heading',          tags: 'h3',      icon: FaHead,    icon_size: 4,      on_choice: () => { do_format('h4', '') } } ,
-  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: IcH1, on_choice: () => {
+  { caption: "Heading 1", description: "Description heading", tags: "h1", mricon: "heading-1", on_choice: () => {
     do_format("h1", "");
   } },
-  { caption: "Heading 2", description: "Description heading", tags: "h2", icon: IcH2, on_choice: () => {
+  { caption: "Heading 2", description: "Description heading", tags: "h2", mricon: "heading-2", on_choice: () => {
     do_format("h2", "");
   } },
   //   {   caption: 'Heading 2',      description: 'Medium description heading',     tags: 'h3',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
   //   {   caption: 'Heading 3',      description: 'Small description heading',      tags: 'h4',      icon: FaHead,    icon_size: 4,      on_choice: () => { do_format('h4', '') } } ,
-  { caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: () => {
+  { caption: "Code", description: "Source code monospace text", mricon: "code-xml", on_choice: () => {
     do_format("p", "ml-6 text-sm font-mono break-normal text-pink-700 dark:text-pink-600");
   } },
   { caption: "Comment", description: "With this you can comment the above paragraph", icon: FaComments, on_choice: () => {
@@ -1026,12 +1026,12 @@ let commands = [
 ];
 </script>
 
-<div    contenteditable="true" 
+<div    contenteditable="true"
         bind:this={editable_div}
         on:keyup={on_keyup}
         on:keydown={on_keydown}
         on:mouseup={on_mouseup}
-        class="{cs}     {appearance_class} 
+        class="{cs}     {appearance_class}
                         prose prose-base sm:prose-base dark:prose-invert {additional_class} overflow-y-auto whitespace-pre-wrap"
         on:blur={on_blur}
         on:focus={on_focus}
@@ -1041,8 +1041,8 @@ let commands = [
    {@html value}
 </div>
 
-<Palette    commands={commands} 
-            bind:this={palette} 
+<Palette    commands={commands}
+            bind:this={palette}
             on:palette_shown={on_palette_shown}
             on:palette_hidden={on_palette_hidden}
             on:palette_mouse_click={on_palette_mouse_click}/>

package/components/edit.field.svelte

@@ -12,7 +12,7 @@ export let context = "";
 export let typename = "";
 export let inserter = false;
 export let c = "";
-export let pushChangesImmediately = true;
+export let pushChangesImmediately = false;
 let is_table_component = getContext("rIs-table-component");
 let item = null;
 let input_box_is_active = false;

package/components/input.text.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  InputEvents */
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
-    i?: null | undefined;
     s?: string | undefined;
+    i?: null | undefined;
     placeholder?: string | undefined;
     fld?: string | undefined;
 }, {
@@ -16,8 +16,8 @@ export type InputSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        i?: null | undefined;
         s?: string | undefined;
+        i?: null | undefined;
         placeholder?: string | undefined;
         fld?: string | undefined;
     };

package/components/inputbox.ltop.svelte

@@ -18,7 +18,7 @@
     export let val = ''
         
     export let placeholder = 'pl'
-    export let pushChangesImmediately = true;
+    export let pushChangesImmediately = false;
 
     export let required = false;
     export let readonly = false;

package/components/inputbox.ltop.svelte.d.ts

@@ -4,18 +4,18 @@
 export default class Inputbox extends SvelteComponentTyped<{
     [x: string]: any;
     a?: string | undefined;
-    label?: string | undefined;
-    s?: string | undefined;
-    self?: null | undefined;
-    invalid?: boolean | undefined;
-    placeholder?: string | undefined;
     context?: string | undefined;
+    self?: null | undefined;
     typename?: string | undefined;
     c?: string | undefined;
+    invalid?: boolean | undefined;
+    label?: string | undefined;
+    s?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
     pushChangesImmediately?: boolean | undefined;
     itype?: string | undefined;
     val?: string | undefined;
-    required?: boolean | undefined;
     readonly?: boolean | undefined;
     validation?: any;
     validate?: (() => boolean) | undefined;
@@ -36,18 +36,18 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         a?: string | undefined;
-        label?: string | undefined;
-        s?: string | undefined;
-        self?: null | undefined;
-        invalid?: boolean | undefined;
-        placeholder?: string | undefined;
         context?: string | undefined;
+        self?: null | undefined;
         typename?: string | undefined;
         c?: string | undefined;
+        invalid?: boolean | undefined;
+        label?: string | undefined;
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
         pushChangesImmediately?: boolean | undefined;
         itype?: string | undefined;
         val?: string | undefined;
-        required?: boolean | undefined;
         readonly?: boolean | undefined;
         validation?: any;
         validate?: (() => boolean) | undefined;

package/components/kanban/internal/kanban.card.svelte

@@ -10,7 +10,8 @@ import {
   showFloatingToolbar,
   informModification,
   pushChanges,
-  startEditing
+  startEditing,
+  Ricon
 } from "../../..";
 import { FaRegFileAlt } from "svelte-icons/fa";
 import Properties from "./kanban.props.svelte";
@@ -24,7 +25,7 @@ $:
 $:
   selectedClass = isCardSelected ? "!border-blue-300 dark:!border-blue-300/50" : "";
 $:
-  focusedClass = isCardActive ? "bg-stone-100 dark:bg-stone-700" : "";
+  focusedClass = isCardActive ? "bg-stone-200 dark:bg-stone-700 outline outline-8 outline-stone-200 dark:outline-stone-700 ring-1 ring-offset-8 ring-stone-300 dark:ring-stone-700" : "";
 $:
   isLinkLike = isCardActive && (!!definition.titleHref || !!definition.titleHrefFunc);
 function calculate_active(...args) {
@@ -175,10 +176,9 @@ function showAttachementIcon() {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
-<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selectedClass} {focusedClass} scroll-mt-[50px] sm:scroll-mt-[40px]"
-     class:cursor-pointer={!isCardActive}
+<figure class="{selectedClass} {focusedClass} "
      on:click={activate}
-     use:selectable={item} 
+     use:selectable={item}
      bind:this={card}>
 
     <!--  -->
@@ -189,7 +189,7 @@ function showAttachementIcon() {
                 bind:this={moveButton}>
             <FaArrowsAlt/>
         </button>
-        
+
         {#if $$slots.kanbanCardTopProps}
             <div class="ml-auto flex flex-row gap-2">
                 <slot name="kanbanCardTopProps" element={item}/>
@@ -198,37 +198,31 @@ function showAttachementIcon() {
     </section-->
 
     {#if $$slots.kanbanCardTopProps}
-        <section class="flex flex-row justify-between">
             <slot name="kanbanCardTopProps" element={item}/>
-        </section>
     {/if}
     <Properties position={KanbanCardTop} {item} bind:this={topProps}/>
-    
+
 
     {#if isCardActive}
         {@const hasOpen = !!definition.onOpen}
         {@const canOpen = isLinkLike || hasOpen}
-        {@const openableClass = canOpen ? "sm:hover:cursor-pointer underline" : ""}
         {@const showIcon = showAttachementIcon()}
             <!-- whitespace-nowrap overflow-clip  -->
-            <h3 class=" h3 text-base font-semibold pb-1
-                         w-full sm:flex-none
-                        relative {openableClass}"
-                use:editable={{
-                    action: (text) => onTitleChanged(text), 
+            <h4     class = "font-semibold relative"
+                    use:editable={{
+                    action: (text) => onTitleChanged(text),
                     active: false,
                     readonly: definition.titleReadOnly,
                     onFinish: (d) => {titleElement.blur()},
                     onSoftEnter: async (text) => { onTitleChanged(text); await editProperty('Summary') }
                     }}
                 use:conditionalClick={{
-                    condition: hasOpen, 
+                    condition: hasOpen,
                     callback: performOpen}}
                 bind:this={titleElement}>
-
                 {#if isLinkLike}
-                    <a href={getHRef()} use:link>
-                        {item[definition.titleAttrib]}    
+                    <a class= "font-semibold" href={getHRef()} use:link>
+                        {item[definition.titleAttrib]}
                     </a>
                 {:else}
                     {item[definition.titleAttrib]}
@@ -236,32 +230,27 @@ function showAttachementIcon() {
 
 
                 {#if showIcon}
-                    <span id="attachement" class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3">
-                        <FaRegFileAlt/>
+                    <span id="attachement" class="absolute top-1 right-0">
+                        <Ricon icon="file-text" xs/>
                     </span>
                 {/if}
-            </h3>
 
+            </h4>
             <!--Tooltip type='light' triggeredBy="#attachement">Has attachement</Tooltip-->
-        
-          
-                        
+
+
+
     {:else}
         <!-- whitespace-nowrap overflow-clip  -->
-        <h3  class=" text-base font-semibold pb-1
-                    sm:text-base sm:font-semibold 
-                    w-full sm:flex-none
-                    relative">
+        <h4>
             {item[definition.titleAttrib]}
 
-        </h3>
+        </h4>
     {/if}
 
 
     {#if $$slots.kanbanCardMiddleProps}
-        <section class="w-full flex flex-row">
              <slot name="kanbanCardMiddleProps" element={item} />
-        </section>
     {/if}
 
     <Properties position={KanbanCardMiddle} {item} bind:this={middleProps}/>
@@ -269,27 +258,18 @@ function showAttachementIcon() {
     {#if item[definition.summaryAttrib] || summaryPlaceholder}
         {#key item[definition.summaryAttrib]}
             {#if isCardActive}
-                <p class="  text-sm sm:text-sm 
-                            
-                            text-stone-600 dark:text-stone-400
-                            
-                            overflow-hidden"
-                            use:editable={{
-                                action: (text) => onSummaryChanged(text), 
+                <figcaption use:editable={{
+                                action: (text) => onSummaryChanged(text),
                                 active: true,
                                 readonly: definition.summaryReadOnly,
                                 onFinish: (d) => {summaryPlaceholder = false}}}
                             bind:this={summaryElement}>
                     {item[definition.summaryAttrib]}
-                </p>
+                </figcaption>
             {:else}
-                <p class=" text-sm  sm:text-sm 
-                               
-                                text-stone-600 dark:text-stone-400
-                                
-                                overflow-hidden">
+                <figcaption>
                     {item[definition.summaryAttrib]}
-                </p>
+                </figcaption>
             {/if}
         {/key}
     {/if}
@@ -299,4 +279,4 @@ function showAttachementIcon() {
     {/if}
 
     <Properties position={KanbanCardBottom} {item} bind:this={bottomProps}/>
-</li>
+</figure>