native-document 1.0.286 → 1.0.287

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.286",
+  "version": "1.0.287",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/core/elements/anchor/Slot.js

@@ -8,7 +8,16 @@ export default function Slot(content) {
     }
     this.$anchor = Anchor();
 
-    content && this.$anchor.setContent(content);
+    if(content) {
+        if(content.__$Observable) {
+            this.$anchor.set(content.val());
+            content.subscribe((value) => {
+                this.$anchor.set(value);
+            });
+            return;
+        }
+        this.$anchor.setContent(content);
+    }
 }
 
 

package/src/core/wrappers/ElementCreator.js

@@ -1,5 +1,7 @@
 import AttributesWrapper, { bindClassAttribute, bindStyleAttribute } from './AttributesWrapper';
 import PluginsManager from '../utils/plugins-manager';
+import Slot from '../elements/anchor/Slot';
+import Ref from '../data/Ref';
 
 let $textNodeCache = null;
 

package/src/ui/components/menu/helpers.js

@@ -125,7 +125,10 @@ export const setupInteraction = (listItem, el, submenuEl, orientation, interacti
 export function applyIsActive(instance, $description, props) {
     const root = instance.getRoot();
     if(root && root.$description.active) {
-        const isActive = root.active($description);
+        if(!(typeof root.$description.active === 'function')) {
+            return;
+        }
+        const isActive = root.$description.active($description);
         props.class.add({ 'is-active': isActive });
     }
 }

package/src/ui/components/menu/menu.css

@@ -86,6 +86,11 @@
         color: var(--menu-item-color-active);
     }
 
+    .is-active > & {
+        background: var(--menu-item-bg-selected);
+        color: var(--menu-item-color-active);
+    }
+
     .is-disabled > & {
         color: var(--menu-item-color-disabled);
         pointer-events: none;

package/types/elements.d.ts

@@ -5,6 +5,7 @@ import { NDElement } from './nd-element';
 import {AnchorAttributes,
     AudioAttributes, CanvasAttributes, DetailsAttributes, DialogAttributes, GlobalAttributes, OlAttributes,
     SourceAttributes, SvgAttributes, TrackAttributes, VideoAttributes, ThAttributes, ModAttributes, TdAttributes, TimeAttributes } from './globals';
+import {SlotInterface} from "./slot";
 
 // - Re-export all attribute types and utilities from globals
 export type {
@@ -57,6 +58,7 @@ export type ValidChild =
     | ObservableItem
     | NDElement
     | BindingHydrator
+    | SlotInterface
     | ValidChild[]
     | ((...args: any[]) => ValidChild);