@record-evolution/widget-navbar 1.0.11 → 1.0.12

package/dist/widget-navbar.js

@@ -12,7 +12,7 @@ var b = Object.defineProperty, n = (c, t, e, i) => {
 };
 const h = class h extends u {
   constructor() {
-    super(...arguments), this.version = "1.0.11";
+    super(...arguments), this.version = "1.0.12";
   }
   update(t) {
     t.has("theme") && this.registerTheme(this.theme), super.update(t);
@@ -145,7 +145,7 @@ n([
 n([
   d()
 ], r.prototype, "themeTitleColor");
-window.customElements.define("widget-navbar-1.0.11", r);
+window.customElements.define("widget-navbar-1.0.12", r);
 export {
   r as WidgetNavbar
 };

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-navbar following open-wc recommendations",
     "license": "MIT",
     "author": "widget-navbar",
-    "version": "1.0.11",
+    "version": "1.0.12",
     "engines": {
         "node": ">=24.9.0",
         "npm": ">=10.0.2"

package/src/definition-schema.d.ts

@@ -5,38 +5,53 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 
+/**
+ * The main title/brand text displayed in the navigation bar, typically on the left side. Often used for logo text or application name.
+ */
 export type TitleSettings = string;
 /**
- * Navigation to perform on title click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.
+ * The route to navigate to when the title is clicked. Use relative paths (e.g., 'home', 'dashboard') that append to the current base URL, or use leadingSlash for absolute paths.
  */
 export type TitleNavigation = string;
 /**
- * Whether to add a leading slash to the navigation route.
+ * When enabled, prepends '/' to the navigation route making it absolute from the root. When disabled, routes are relative to the current location.
  */
 export type AddLeadingSlash = boolean;
 /**
- * Whether to add a trailing slash to the navigation route.
+ * When enabled, appends '/' to the end of the navigation route. Some routing systems require trailing slashes for proper page matching.
  */
 export type AddTraillingSlash = boolean;
+/**
+ * Font size in pixels for navigation item labels.
+ */
 export type FontSize = number;
+/**
+ * Font weight for navigation items (100=thin, 400=normal, 700=bold, 900=black).
+ */
 export type FontWeight = number;
+/**
+ * The text displayed for this navigation item. Should be short and descriptive (e.g., 'Dashboard', 'Settings', 'Reports').
+ */
 export type Label = string;
 /**
- * Name of the icon from https://fonts.google.com/icons
+ * Material icon name to display alongside the label. Find icon names at https://fonts.google.com/icons (e.g., 'home', 'settings', 'dashboard', 'analytics').
  */
 export type IconName = string;
 /**
- * Navigation to perform on click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.
+ * The destination path when this item is clicked. Use relative paths that append to the current URL, or enable leadingSlash for absolute paths.
  */
 export type NavigationRoute = string;
 /**
- * Whether to add a leading slash to the navigation route.
+ * When enabled, prepends '/' to this item's route making it absolute from the root.
  */
 export type AddLeadingSlash1 = boolean;
 /**
- * Whether to add a trailing slash to the navigation route.
+ * When enabled, appends '/' to the end of this item's route.
  */
 export type AddTraillingSlash1 = boolean;
+/**
+ * Array of clickable navigation links displayed in the navigation bar. Each item can have a label, icon, and destination route.
+ */
 export type NavigationItems = {
     label?: Label;
     iconName?: IconName;
@@ -46,6 +61,9 @@ export type NavigationItems = {
     [k: string]: unknown;
 }[];
 
+/**
+ * A horizontal navigation bar widget for creating top-level dashboard navigation. Use this widget to provide consistent navigation across dashboard pages with a clickable title and multiple navigation items. Each item can have an icon and routes to different dashboard sections. Supports customizable styling for font size, weight, and colors. Ideal for multi-page dashboards requiring clear navigation structure and branding.
+ */
 export interface InputData {
     title?: TitleSettings;
     route?: TitleNavigation;
@@ -55,6 +73,9 @@ export interface InputData {
     navItems?: NavigationItems;
     [k: string]: unknown;
 }
+/**
+ * Global styling options applied to all navigation items in the bar.
+ */
 export interface ItemStyle {
     fontSize?: FontSize;
     fontWeight?: FontWeight;
@@ -62,9 +83,15 @@ export interface ItemStyle {
     backgroundColor?: BackgroundColor;
     [k: string]: unknown;
 }
+/**
+ * Text color for navigation item labels.
+ */
 export interface FontColor {
     [k: string]: unknown;
 }
+/**
+ * Background color of the navigation bar.
+ */
 export interface BackgroundColor {
     [k: string]: unknown;
 }

package/src/definition-schema.json

@@ -1,57 +1,64 @@
 {
     "title": "Input Data",
+    "description": "A horizontal navigation bar widget for creating top-level dashboard navigation. Use this widget to provide consistent navigation across dashboard pages with a clickable title and multiple navigation items. Each item can have an icon and routes to different dashboard sections. Supports customizable styling for font size, weight, and colors. Ideal for multi-page dashboards requiring clear navigation structure and branding.",
     "type": "object",
     "properties": {
         "title": {
             "title": "Title Settings",
+            "description": "The main title/brand text displayed in the navigation bar, typically on the left side. Often used for logo text or application name.",
             "order": 1,
             "type": "string"
         },
         "route": {
             "title": "Title Navigation",
             "order": 3,
-            "description": "Navigation to perform on title click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.",
+            "description": "The route to navigate to when the title is clicked. Use relative paths (e.g., 'home', 'dashboard') that append to the current base URL, or use leadingSlash for absolute paths.",
             "type": "string"
         },
         "leadingSlash": {
             "title": "Add Leading Slash",
             "order": 4,
-            "description": "Whether to add a leading slash to the navigation route.",
+            "description": "When enabled, prepends '/' to the navigation route making it absolute from the root. When disabled, routes are relative to the current location.",
             "dataDrivenDisabled": true,
             "type": "boolean"
         },
         "trailingSlash": {
             "title": "Add Trailling Slash",
             "order": 5,
-            "description": "Whether to add a trailing slash to the navigation route.",
+            "description": "When enabled, appends '/' to the end of the navigation route. Some routing systems require trailing slashes for proper page matching.",
             "dataDrivenDisabled": true,
             "type": "boolean"
         },
         "style": {
             "title": "Item Style",
+            "description": "Global styling options applied to all navigation items in the bar.",
             "order": 6,
             "type": "object",
             "properties": {
                 "fontSize": {
                     "title": "Font Size",
+                    "description": "Font size in pixels for navigation item labels.",
                     "order": 1,
                     "dataDrivenDisabled": true,
                     "type": "number"
                 },
                 "fontWeight": {
                     "title": "Font Weight",
+                    "description": "Font weight for navigation items (100=thin, 400=normal, 700=bold, 900=black).",
                     "order": 3,
                     "dataDrivenDisabled": true,
                     "type": "number"
                 },
                 "color": {
                     "title": "Font Color",
+                    "description": "Text color for navigation item labels.",
                     "order": 4,
                     "type": "color",
                     "dataDrivenDisabled": true
                 },
                 "backgroundColor": {
                     "title": "Background Color",
+                    "description": "Background color of the navigation bar.",
                     "order": 4,
                     "type": "color",
                     "dataDrivenDisabled": true
@@ -60,6 +67,7 @@
         },
         "navItems": {
             "title": "Navigation Items",
+            "description": "Array of clickable navigation links displayed in the navigation bar. Each item can have a label, icon, and destination route.",
             "order": 7,
             "type": "array",
             "items": {
@@ -67,33 +75,34 @@
                 "properties": {
                     "label": {
                         "title": "Label",
+                        "description": "The text displayed for this navigation item. Should be short and descriptive (e.g., 'Dashboard', 'Settings', 'Reports').",
                         "order": 1,
                         "type": "string"
                     },
                     "iconName": {
                         "title": "Icon Name",
                         "order": 2,
-                        "description": "Name of the icon from https://fonts.google.com/icons",
+                        "description": "Material icon name to display alongside the label. Find icon names at https://fonts.google.com/icons (e.g., 'home', 'settings', 'dashboard', 'analytics').",
                         "dataDrivenDisabled": true,
                         "type": "string"
                     },
                     "route": {
                         "title": "Navigation Route",
                         "order": 3,
-                        "description": "Navigation to perform on click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.",
+                        "description": "The destination path when this item is clicked. Use relative paths that append to the current URL, or enable leadingSlash for absolute paths.",
                         "type": "string"
                     },
                     "leadingSlash": {
                         "title": "Add Leading Slash",
                         "order": 4,
-                        "description": "Whether to add a leading slash to the navigation route.",
+                        "description": "When enabled, prepends '/' to this item's route making it absolute from the root.",
                         "dataDrivenDisabled": true,
                         "type": "boolean"
                     },
                     "trailingSlash": {
                         "title": "Add Trailling Slash",
                         "order": 5,
-                        "description": "Whether to add a trailing slash to the navigation route.",
+                        "description": "When enabled, appends '/' to the end of this item's route.",
                         "dataDrivenDisabled": true,
                         "type": "boolean"
                     }