cx 25.11.1 → 26.0.2

package/src/widgets/grid/TreeNode.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-treenode(
    $name: "treenode",
    $icon-size: $cx-default-icon-size,
@@ -5,10 +7,10 @@
    $handle-state-style-map: $cx-input-right-icon-state-style-map,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       padding-left: $handle-size + $icon-size * 0.25;

package/src/widgets/grid/TreeNode.tsx

@@ -0,0 +1,145 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { BooleanProp, NumberProp, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface TreeNodeConfig extends StyledContainerConfig {
+   /** Indentation level of the node. */
+   level?: NumberProp;
+
+   /** Set to `true` if the node is expanded. */
+   expanded?: BooleanProp;
+
+   /** Set to `true` if the node is a leaf (has no children). */
+   leaf?: BooleanProp;
+
+   /** Text to be displayed. */
+   text?: StringProp;
+
+   /** Set to `true` if the node is loading. */
+   loading?: BooleanProp;
+
+   /** Icon to be displayed. */
+   icon?: StringProp;
+
+   /** Icon for leaf nodes. */
+   leafIcon?: StringProp;
+
+   /** Icon for open folder. */
+   openFolderIcon?: StringProp;
+
+   /** Icon for folder. */
+   folderIcon?: StringProp;
+
+   /** Set to `true` to hide the arrow. */
+   hideArrow?: BooleanProp;
+}
+
+export class TreeNode extends ContainerBase<TreeNodeConfig> {
+   declare baseClass: string;
+   declare itemIcon: string;
+   declare leafIcon: string;
+   declare loadingIcon: string;
+   declare folderIcon: string;
+   declare openFolderIcon: string;
+   declare arrowIcon: string;
+   declare hideIcon: boolean;
+
+   constructor(config?: TreeNodeConfig) {
+      super(config);
+   }
+
+   init() {
+      if (this.itemIcon) this.leafIcon = this.itemIcon;
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            level: undefined,
+            expanded: undefined,
+            leaf: undefined,
+            text: undefined,
+            loading: undefined,
+            icon: undefined,
+            leafIcon: undefined,
+            openFolderIcon: undefined,
+            folderIcon: undefined,
+            hideArrow: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: Instance) {
+      let { data } = instance;
+      data.stateMods = {
+         expanded: data.expanded,
+         loading: data.loading,
+         leaf: data.leaf,
+         folder: !data.leaf,
+         icon: !this.hideIcon,
+      };
+      data.stateMods[`level-${data.level}`] = true;
+      super.prepareData(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      let { CSS, baseClass } = this;
+
+      let icon = data.icon;
+
+      if (!data.icon) {
+         if (data.leaf) icon = data.leafIcon;
+         else {
+            if (data.loading) icon = this.loadingIcon;
+            else if (data.expanded) icon = data.openFolderIcon || data.folderIcon;
+            else icon = data.folderIcon;
+         }
+      }
+
+      let arrowIcon = this.arrowIcon;
+      if (this.hideIcon && data.loading) arrowIcon = this.loadingIcon;
+
+      return (
+         <div key={key} className={data.classNames} style={data.style}>
+            <div
+               className={CSS.element(baseClass, "handle")}
+               onClick={(e) => this.toggle(e, instance)}
+               onMouseDown={!this.hideIcon ? stopPropagation : undefined}
+            >
+               {!data.leaf && !data.hideArrow && Icon.render(arrowIcon, { className: CSS.element(baseClass, "arrow") })}
+               {!this.hideIcon &&
+                  Icon.render(icon, {
+                     className: CSS.element(baseClass, "icon"),
+                  })}
+            </div>
+            <div>{data.text || this.renderChildren(context, instance)}</div>
+         </div>
+      );
+   }
+
+   toggle(e: React.MouseEvent, instance: Instance) {
+      let { data } = instance;
+      if (!data.leaf) instance.set("expanded", !data.expanded);
+      e.preventDefault();
+      e.stopPropagation();
+   }
+}
+
+TreeNode.prototype.baseClass = "treenode";
+TreeNode.prototype.itemIcon = "file";
+TreeNode.prototype.loadingIcon = "loading";
+TreeNode.prototype.folderIcon = "folder";
+TreeNode.prototype.openFolderIcon = "folder-open";
+TreeNode.prototype.arrowIcon = "drop-down";
+TreeNode.prototype.styled = true;
+TreeNode.prototype.hideIcon = false;
+
+Widget.alias("treenode", TreeNode);

package/src/widgets/grid/createGridCellEditor.tsx

@@ -0,0 +1,18 @@
+import { ValidationGroup } from "../form/ValidationGroup";
+import { GridCellEditor } from "./GridCellEditor";
+import { BooleanProp } from "../../ui/Prop";
+
+export function createGridCellEditor(
+   className: string,
+   style: any,
+   valid: BooleanProp,
+   columnEditor: any
+) {
+   return (
+      <GridCellEditor className={className} style={style}>
+         <ValidationGroup valid={valid}>
+            {columnEditor}
+         </ValidationGroup>
+      </GridCellEditor>
+   );
+}

package/src/widgets/grid/index.ts

@@ -0,0 +1,17 @@
+export * from './Grid';
+export * from './GridRow';
+export * from './GridRowLine';
+export * from './TreeNode';
+export * from './Pagination';
+
+import { DataAdapter } from '../../ui/adapter/DataAdapter';
+import { ArrayAdapter }  from '../../ui/adapter/ArrayAdapter';
+import { GroupAdapter }  from '../../ui/adapter/GroupAdapter';
+import { TreeAdapter }  from '../../ui/adapter/TreeAdapter';
+
+export {
+   DataAdapter,
+   ArrayAdapter,
+   GroupAdapter,
+   TreeAdapter
+}

package/src/widgets/grid/variables.scss

@@ -14,6 +14,8 @@ $cx-default-grid-header-border-color: $cx-default-border-color !default;
 $cx-default-grid-header-box-shadow: null !default;
 $cx-default-grid-header-padding: null !default;
 
+@use "sass:color";
+
 $cx-grid-header-state-style-map: (
    default: (
       font-size: $cx-default-grid-header-font-size,
@@ -26,13 +28,13 @@ $cx-grid-header-state-style-map: (
       padding: $cx-default-grid-header-padding,
    ),
    hover: (
-      background-color: darken($cx-default-grid-header-background-color, 2),
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -2%),
    ),
    sorted: (
-      background-color: darken($cx-default-grid-header-background-color, 7),
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -7%),
    ),
    sorted-hover: (
-      background-color: darken($cx-default-grid-header-background-color, 5),
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -5%),
    ),
 ) !default;
 
@@ -125,7 +127,9 @@ $cx-grid-cell-cursor-style: (
    border: 2px solid rgba(green, 1),
 );
 
-$cx-dependencies: map-merge(
+@use "sass:map";
+
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/Grid": "cx/widgets/DragClone",

package/src/widgets/icons/calendar.tsx

@@ -0,0 +1,17 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('calendar', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 32 32">
+
+      <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2"/>
+      <path d="M19 21h4v4h-4z" fill="currentColor"/>
+      <path d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5" fill="none" stroke="currentColor"/>
+      <path fill="currentColor" d="M10 8h10v2H10z"/>
+      <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/check.tsx

@@ -0,0 +1,13 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('check', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 64 64">
+      <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z"
+            fill="currentColor"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/clear.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('clear', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 32 32">
+      <path fill="currentColor"
+            strokeWidth="1"
+            stroke="currentColor"
+            d="M16.9 16l4.92-4.92c.24-.24.24-.6 0-.84s-.6-.24-.84 0l-4.92 4.92-5.04-4.98c-.24-.24-.6-.24-.84 0s-.24.6 0 .84L15.16 16l-4.98 4.98c-.24.24-.24.6 0 .84s.6.24.84 0L16 16.84l4.98 4.98c.24.24.6.24.84 0s.24-.6 0-.84L16.9 16z"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/close.tsx

@@ -0,0 +1,20 @@
+/** @jsxImportSource react */
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "close",
+   (props: any) => {
+      return (
+         <svg {...props} viewBox="0 0 32 32">
+            <path
+               fill="currentColor"
+               strokeWidth="1"
+               stroke="currentColor"
+               d="M17.8 16l9.84-9.84c.48-.48.48-1.2 0-1.68s-1.2-.48-1.68 0l-9.84 9.84L6.04 4.36c-.48-.48-1.2-.48-1.68 0s-.48 1.2 0 1.68L14.32 16l-9.96 9.96c-.48.48-.48 1.2 0 1.68s1.2.48 1.68 0L16 17.68l9.96 9.96c.48.48 1.2.48 1.68 0s.48-1.2 0-1.68L17.8 16z"
+            />
+         </svg>
+      );
+   },
+   true
+);

package/src/widgets/icons/cx.tsx

@@ -0,0 +1,38 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('cx', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="-347 249.7 48 48"
+   >
+      <g>
+         <path fill="currentColor" opacity="0.7" d="M-337.1 273.16l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" d="M-318.32 273.16l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" opacity="0.7" d="M-337.53 273.43h-8.45l4.22-7.33z"/>
+         <path fill="currentColor" d="M-309.38 273.43h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" opacity="0.7" d="M-332.4 265.03l-4.22-7.33h8.46z"/>
+         <path fill="currentColor" d="M-304.24 265.03l-4.23-7.33h8.45z"/>
+         <path fill="currentColor" d="M-322.97 265.03l-4.28-7.33h8.5z"/>
+         <path fill="currentColor" opacity="0.7" d="M-332.87 265.3h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" opacity="0.7" d="M-323.45 265.3h-8.46l4.2-7.33z"/>
+         <path fill="currentColor" d="M-314.1 265.3h-8.45l4.23-7.33z"/>
+         <path fill="currentColor" d="M-308.9 273.16l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" d="M-304.67 265.3h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" d="M-314.1 281.57h-8.45l4.23-7.33z"/>
+         <path fill="currentColor" d="M-313.6 281.3l-4.24-7.33h8.46z"/>
+         <path fill="currentColor" d="M-318.32 289.43l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" d="M-304.67 281.57h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" d="M-308.9 289.43l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" opacity="0.7" d="M-341.76 281.3l-4.22-7.33h8.45z"/>
+         <path fill="currentColor" opacity="0.7" d="M-332.87 281.57h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" opacity="0.7" d="M-337.1 289.43l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" opacity="0.7" d="M-327.68 289.43l-4.23-7.33h8.43z"/>
+         <path fill="currentColor" opacity="0.7" d="M-328.16 289.7h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" d="M-318.75 289.7h-8.5l4.28-7.33z"/>
+         <path fill="currentColor" d="M-300.02 289.7h-8.45l4.23-7.33z"/>
+      </g>
+   </svg>
+}, true);
+

package/src/widgets/icons/drop-down.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('drop-down', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 20 20">
+      <path fill="currentColor"
+            strokeWidth="0"
+            stroke="currentColor"
+            d="M4.516 8.147L10.01 12.5l5.474-4.33-.473-.65-5 3.98-5-4z"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/file.tsx

@@ -0,0 +1,13 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('file', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 16 16">
+      <path d="M2 2h5v5h5v7H2z" fill="currentColor" stroke="none"/>
+      <path d="M8 2v4h4z" fill="currentColor" stroke="none"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/folder-open.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('folder-open', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 16 16">
+
+      <path d="M0 5v7l2.5-6H13V5zm1 0h6L6 3H2z" fill="currentColor" stroke="none"/>
+      <path d="M3 7h13l-3 7H0z" fill="currentColor" stroke="none"/>
+
+   </svg>
+}, true);
+

package/src/widgets/icons/folder.tsx

@@ -0,0 +1,13 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('folder', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 16 16">
+
+      <path d="M1 5h13v9H1zm1 0h6L7 3H3z" fill="currentColor" stroke="none"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/forward.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('forward', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 20 20">
+
+      <path fill="currentColor"
+         strokeWidth="0"
+         stroke="currentColor"
+         d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
+
+      <path fill="currentColor"
+         strokeWidth="0"
+         stroke="currentColor"
+         d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
+
+   </svg>
+}, true);
+

package/src/widgets/icons/loading.tsx

@@ -0,0 +1,24 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('loading', (props: any) => {
+   let style = {
+      animation: 'linear infinite 0.5s cx-rotate'
+   };
+
+   if (props && props.style)
+      Object.assign(style, props.style);
+
+   props = {
+      ...props,
+      style
+   };
+
+   return <svg
+      {...props}
+      viewBox="0 0 50 50">
+      <path fill="currentColor" d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z" />
+   </svg>
+}, true);
+

package/src/widgets/icons/menu.tsx

@@ -0,0 +1,17 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('menu', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 24 24">
+
+      <path d="M0 0h24v24H0z" 
+            fill="none" />
+      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+            fill="currentColor" />
+
+   </svg>
+}, true);
+

package/src/widgets/icons/pixel-picker.tsx

@@ -0,0 +1,18 @@
+/** @jsxImportSource react */
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "pixel-picker",
+   (props: any) => {
+      return (
+         <svg {...props} viewBox="0 0 30 30">
+            <path
+               d="M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z"
+               fill="currentColor"
+            />
+         </svg>
+      );
+   },
+   true
+);

package/src/widgets/icons/registry.ts

@@ -0,0 +1,57 @@
+import { isFunction } from '../../util/isFunction';
+
+type IconRenderer = (props: Record<string, any>) => React.ReactNode;
+type IconFactory = (name: string, props: Record<string, any>) => React.ReactNode;
+
+let icons: Record<string, IconRenderer> = {};
+let iconFactory: IconFactory | null = null;
+let defaultIcons: Record<string, IconRenderer> = {};
+
+let unregisteredDefaultIcons: Record<string, boolean> = {};
+
+export function registerIcon(name: string, icon: IconRenderer, defaultIcon = false): IconRenderer {
+   if (!defaultIcon || !unregisteredDefaultIcons[name])
+      icons[name] = icon;
+
+   if (!defaultIcon)
+      unregisteredDefaultIcons[name] = true;
+   else
+      defaultIcons[name] = icon;
+
+   return props => renderIcon(name, props);
+}
+
+export function unregisterIcon(...args: string[]): void {
+   args.forEach(name => {
+      delete icons[name];
+      unregisteredDefaultIcons[name] = true;
+   });
+}
+
+export function renderIcon(name: string | IconRenderer, props: Record<string, any> = {}): React.ReactNode {
+
+   if (isFunction(name))
+      return (name as IconRenderer)(props);
+
+   if (icons[name as string])
+      return icons[name as string](props);
+
+   if (iconFactory)
+      return iconFactory(name as string, props);
+
+   return null;
+}
+
+export function clearIcons(): void {
+   icons = {};
+}
+
+export function registerIconFactory(factory: IconFactory): void {
+   iconFactory = factory;
+}
+
+export function restoreDefaultIcons(): void {
+   icons = {
+      ...defaultIcons
+   }
+}

package/src/widgets/icons/search.tsx

@@ -0,0 +1,13 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('search', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 32 32">
+      <path fill="currentColor"
+            d="M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z" />
+   </svg>
+}, true);
+

package/src/widgets/icons/sort-asc.tsx

@@ -0,0 +1,14 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('sort-asc', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 16 16">
+      <path fill="currentColor"
+         d="M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z"
+      />
+   </svg>
+}, true);
+

package/src/widgets/icons/square.tsx

@@ -0,0 +1,18 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('square', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 64 64">
+      <rect
+         x="12"
+         y="12"
+         width="40"
+         height="40"
+         fill="currentColor"
+      />
+   </svg>
+}, true);
+

package/src/widgets/nav/Link.scss

@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-link($name: "link", $besm: $cx-besm, $state-style-map: $cx-link-state-style-map) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       &:hover {

package/src/widgets/nav/Link.ts

@@ -0,0 +1,12 @@
+import {Widget, VDOM} from '../../ui/Widget';
+import {LinkButton, LinkButtonConfig} from './LinkButton';
+
+export interface LinkConfig extends LinkButtonConfig {}
+
+export class Link extends LinkButton {
+   declare baseClass: string;
+}
+
+Link.prototype.baseClass = "link";
+
+Widget.alias('link', Link);