Added Controls testing + documentation

src/myfasthtml/assets/myfasthtml.css

@@ -3,6 +3,7 @@
     --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     --spacing: 0.25rem;
+    --text-xs: 0.6875rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-xl: 1.25rem;
@@ -11,6 +12,8 @@
     --radius-md: 0.375rem;
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --properties-font-size: var(--text-xs);
+    --mf-tooltip-zindex: 10;
 }
 
 
@@ -56,6 +59,26 @@
  * Compatible with DaisyUI 5
  */
 
+.mf-tooltip-container {
+    background: var(--color-base-200);
+    padding: 5px 10px;
+    border-radius: 4px;
+    pointer-events: none; /* Prevent interfering with mouse events */
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0; /* Default to invisible */
+    visibility: hidden; /* Prevent interaction when invisible */
+    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility removal */
+    position: fixed; /* Keep it above other content and adjust position */
+    z-index: var(--mf-tooltip-zindex); /* Ensure it's on top */
+}
+
+.mf-tooltip-container[data-visible="true"] {
+    opacity: 1;
+    visibility: visible; /* Show tooltip */
+    transition: opacity 0.3s ease; /* No delay when becoming visible */
+}
+
 /* Main layout container using CSS Grid */
 .mf-layout {
     display: grid;
@@ -632,7 +655,6 @@
 /* *************** Panel Component *************** */
 /* *********************************************** */
 
-/* Container principal du panel */
 .mf-panel {
     display: flex;
     width: 100%;
@@ -641,7 +663,6 @@
     position: relative;
 }
 
-/* Panel gauche */
 .mf-panel-left {
     position: relative;
     flex-shrink: 0;
@@ -653,15 +674,13 @@
     border-right: 1px solid var(--color-border-primary);
 }
 
-/* Panel principal (centre) */
 .mf-panel-main {
     flex: 1;
     height: 100%;
     overflow: auto;
-    min-width: 0; /* Important pour permettre le shrink du flexbox */
+    min-width: 0; /* Important to allow the shrinking of flexbox */
 }
 
-/* Panel droit */
 .mf-panel-right {
     position: relative;
     flex-shrink: 0;
@@ -671,4 +690,79 @@
     height: 100%;
     overflow: auto;
     border-left: 1px solid var(--color-border-primary);
+    padding: 0.5rem;
 }
+
+/* *********************************************** */
+/* ************* Properties Component ************ */
+/* *********************************************** */
+
+/* Properties container */
+.mf-properties {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+/* Group card - using DaisyUI card styling */
+.mf-properties-group-card {
+    background-color: var(--color-base-100);
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Group header - gradient using DaisyUI primary color */
+.mf-properties-group-header {
+    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 80%, black) 100%);
+    color: var(--color-primary-content);
+    padding: calc(var(--properties-font-size) * 0.5) calc(var(--properties-font-size) * 0.75);
+    font-weight: 700;
+    font-size: var(--properties-font-size);
+}
+
+/* Group content area */
+.mf-properties-group-content {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Property row */
+.mf-properties-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: calc(var(--properties-font-size) * 0.4) calc(var(--properties-font-size) * 0.75);
+    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);
+    transition: background-color 0.15s ease;
+    gap: calc(var(--properties-font-size) * 0.75);
+}
+
+.mf-properties-row:last-child {
+    border-bottom: none;
+}
+
+.mf-properties-row:hover {
+    background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent);
+}
+
+/* Property key - normal font */
+.mf-properties-key {
+    font-weight: 600;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    flex: 0 0 40%;
+    font-size: var(--properties-font-size);
+}
+
+/* Property value - monospace font */
+.mf-properties-value {
+    font-family: var(--default-mono-font-family);
+    color: var(--color-base-content);
+    flex: 1;
+    text-align: right;
+    font-size: var(--properties-font-size);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}