@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0

package/src/static/components/inputGroupAddon.ts

@@ -0,0 +1,29 @@
+//----------------------------------------------------------------------------------------------------------------------
+// InputGroupAddon Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <span> with
+// sk-input-group-addon modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '../types';
+
+import type { H } from '../h';
+import { render } from '../render';
+import { SPECS } from '../specs';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface InputGroupAddonStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function inputGroupAddon<T>(h : H<T>, props : InputGroupAddonStaticProps = {}, children ?: T | T[]) : T
+{
+    return render(h, SPECS.inputGroupAddon, props as Record<string, unknown>, children);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/navBar.ts

@@ -17,8 +17,8 @@
 
 import type { NavBarKind, StaticCustomColors } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -44,7 +44,7 @@ export interface NavBarStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function navBar(props : NavBarStaticProps = {}, children = '') : string
+export function navBar<T>(h : H<T>, props : NavBarStaticProps = {}, children ?: T | T[]) : T
 {
     // Sticky defaults to true — matches Vue's withDefaults({ sticky: true })
     const sticky = props.sticky !== false;
@@ -62,33 +62,46 @@ export function navBar(props : NavBarStaticProps = {}, children = '') : string
     // Append sk-sticky when sticky is enabled
     const fullClasses = sticky ? `${ classes } sk-sticky` : classes;
 
-    const attrs : string[] = [ `class="${ escapeAttr(fullClasses) }"` ];
+    const navAttrs : Record<string, unknown> = { class: fullClasses };
 
     // Custom color vars
     const styleParts : string[] = [];
     if(typeof props.baseColor === 'string')
     {
-        styleParts.push(`--sk-navbar-color-base: ${ escapeAttr(props.baseColor) };`);
+        styleParts.push(`--sk-navbar-color-base: ${ props.baseColor };`);
     }
     if(typeof props.textColor === 'string')
     {
-        styleParts.push(`--sk-navbar-fg: ${ escapeAttr(props.textColor) };`);
+        styleParts.push(`--sk-navbar-fg: ${ props.textColor };`);
     }
-    if(styleParts.length > 0)
+    if(styleParts.length > 0) { navAttrs.style = styleParts.join(' '); }
+
+    // Build inner slot regions — each only emitted when content is non-empty, matching Vue's v-if
+    const inner : T[] = [];
+    if(props.leading)
     {
-        attrs.push(`style="${ styleParts.join(' ') }"`);
+        inner.push(h('div', { class: 'sk-navbar-leading', innerHTML: props.leading }));
+    }
+    if(props.brand)
+    {
+        inner.push(h('div', { class: 'sk-navbar-brand', innerHTML: props.brand }));
+    }
+    if(children !== undefined)
+    {
+        // Only emit sk-navbar-nav when children is truthy (non-empty string / non-empty array)
+        const hasChildren = Array.isArray(children) ? children.length > 0 : Boolean(children);
+        if(hasChildren)
+        {
+            inner.push(h('div', { class: 'sk-navbar-nav' }, children));
+        }
+    }
+    if(props.actions)
+    {
+        inner.push(h('div', { class: 'sk-navbar-actions', innerHTML: props.actions }));
     }
 
-    // Build inner slot regions — each is only emitted when content is non-empty, matching Vue's v-if
-    let inner = '';
-    if(props.leading) { inner += `<div class="sk-navbar-leading">${ props.leading }</div>`; }
-    if(props.brand) { inner += `<div class="sk-navbar-brand">${ props.brand }</div>`; }
-    if(children) { inner += `<div class="sk-navbar-nav">${ children }</div>`; }
-    if(props.actions) { inner += `<div class="sk-navbar-actions">${ props.actions }</div>`; }
-
-    const content = `<div class="sk-navbar-content">${ inner }</div>`;
-
-    return `<nav ${ attrs.join(' ') }>${ content }</nav>`;
+    const contentEl = h('div', { class: 'sk-navbar-content' }, inner);
+    return h('nav', navAttrs, contentEl);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/numberInput.ts

@@ -7,10 +7,10 @@
 // meaningful in a static/SSG context.
 //----------------------------------------------------------------------------------------------------------------------
 
-import type { ComponentKind, ComponentSize } from '../types';
+import type { ComponentKind, ComponentSize, NumberInputCorner } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -18,6 +18,7 @@ export interface NumberInputStaticProps
 {
     kind ?: ComponentKind;
     size ?: ComponentSize;
+    corners ?: NumberInputCorner[];
     value ?: string;
     min ?: string;
     max ?: string;
@@ -31,34 +32,33 @@ export interface NumberInputStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function numberInput(props : NumberInputStaticProps = {}) : string
+export function numberInput<T>(h : H<T>, props : NumberInputStaticProps = {}) : T
 {
     const wrapperClasses = composeClasses(
-        { base: 'sk-number-input-wrapper', kind: true, size: true },
+        {
+            base: 'sk-number-input-wrapper',
+            kind: true,
+            size: true,
+            listFlags: [ { prop: 'corners', family: 'cut' } ],
+        },
         props as Record<string, unknown>
     );
 
-    const inputAttrs : string[] = [ 'class="sk-number-input-field"', 'type="number"' ];
+    const inputAttrs : Record<string, unknown> = { class: 'sk-number-input-field', type: 'number' };
 
     const passthroughString = [ 'value', 'min', 'max', 'step', 'name', 'placeholder' ] as const;
     for(const key of passthroughString)
     {
         const val = props[key];
-        if(typeof val === 'string')
-        {
-            inputAttrs.push(`${ key }="${ escapeAttr(val) }"`);
-        }
-    }
-
-    const passthroughBool = [ 'disabled', 'readonly', 'required' ] as const;
-    for(const key of passthroughBool)
-    {
-        if(props[key] === true) { inputAttrs.push(key); }
+        if(typeof val === 'string') { inputAttrs[key] = val; }
     }
 
-    const inputEl = `<input ${ inputAttrs.join(' ') } />`;
+    if(props.disabled === true) { inputAttrs.disabled = true; }
+    if(props.readonly === true) { inputAttrs.readonly = true; }
+    if(props.required === true) { inputAttrs.required = true; }
 
-    return `<div class="${ escapeAttr(wrapperClasses) }">${ inputEl }</div>`;
+    const inputEl = h('input', inputAttrs);
+    return h('div', { class: wrapperClasses }, inputEl);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/page.ts

@@ -7,6 +7,7 @@
 
 import type { PagePanelMode } from '../types';
 
+import type { H } from '../h';
 import { render } from '../render';
 import { SPECS } from '../specs';
 
@@ -23,9 +24,9 @@ export interface PageStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function page(props : PageStaticProps = {}, children = '') : string
+export function page<T>(h : H<T>, props : PageStaticProps = {}, children ?: T | T[]) : T
 {
-    return render(SPECS.page, props as Record<string, unknown>, children);
+    return render(h, SPECS.page, props as Record<string, unknown>, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/pagination.ts

@@ -7,6 +7,7 @@
 
 import type { PaginationKind, StaticCustomColors } from '../types';
 
+import type { H } from '../h';
 import { render } from '../render';
 import { SPECS } from '../specs';
 
@@ -19,9 +20,9 @@ export interface PaginationStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function pagination(props : PaginationStaticProps = {}, children = '') : string
+export function pagination<T>(h : H<T>, props : PaginationStaticProps = {}, children ?: T | T[]) : T
 {
-    return render(SPECS.pagination, props as Record<string, unknown>, children);
+    return render(h, SPECS.pagination, props as Record<string, unknown>, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/panel.ts

@@ -7,6 +7,7 @@
 
 import type { PanelCorner, PanelKind, PanelSize, StaticCustomColors } from '../types';
 
+import type { H } from '../h';
 import { render } from '../render';
 import { SPECS } from '../specs';
 
@@ -25,9 +26,9 @@ export interface PanelStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function panel(props : PanelStaticProps = {}, children = '') : string
+export function panel<T>(h : H<T>, props : PanelStaticProps = {}, children ?: T | T[]) : T
 {
-    return render(SPECS.panel, props as Record<string, unknown>, children);
+    return render(h, SPECS.panel, props as Record<string, unknown>, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/progress.ts

@@ -7,6 +7,7 @@
 
 import type { ComponentKind, ProgressSize } from '../types';
 
+import type { H } from '../h';
 import { render } from '../render';
 import { SPECS } from '../specs';
 
@@ -23,9 +24,9 @@ export interface ProgressStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function progress(props : ProgressStaticProps = {}, children = '') : string
+export function progress<T>(h : H<T>, props : ProgressStaticProps = {}, children ?: T | T[]) : T
 {
-    return render(SPECS.progress, props as Record<string, unknown>, children);
+    return render(h, SPECS.progress, props as Record<string, unknown>, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/radio.ts

@@ -8,8 +8,8 @@
 
 import type { ComponentKind, ComponentSize } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -26,28 +26,22 @@ export interface RadioStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function radio(props : RadioStaticProps = {}, children = '') : string
+export function radio<T>(h : H<T>, props : RadioStaticProps = {}, children ?: T | T[]) : T
 {
     const classes = composeClasses({ base: 'sk-radio', kind: true, size: true }, props as Record<string, unknown>);
 
-    const inputAttrs : string[] = [ 'type="radio"' ];
-    if(props.name)
-    {
-        inputAttrs.push(`name="${ escapeAttr(props.name) }"`);
-    }
-    if(props.value !== undefined)
-    {
-        inputAttrs.push(`value="${ escapeAttr(props.value) }"`);
-    }
-    if(props.checked === true) { inputAttrs.push('checked'); }
-    if(props.disabled === true) { inputAttrs.push('disabled'); }
-    if(props.required === true) { inputAttrs.push('required'); }
-
-    const inputEl = `<input ${ inputAttrs.join(' ') } />`;
-    const dotEl = `<span class="sk-radio-dot"></span>`;
-    const labelEl = `<span class="sk-radio-label">${ children }</span>`;
-
-    return `<label class="${ escapeAttr(classes) }">${ inputEl }${ dotEl }${ labelEl }</label>`;
+    const inputAttrs : Record<string, unknown> = { type: 'radio' };
+    if(props.name) { inputAttrs.name = props.name; }
+    if(props.value !== undefined) { inputAttrs.value = props.value; }
+    if(props.checked === true) { inputAttrs.checked = true; }
+    if(props.disabled === true) { inputAttrs.disabled = true; }
+    if(props.required === true) { inputAttrs.required = true; }
+
+    const inputEl = h('input', inputAttrs);
+    const dotEl = h('span', { class: 'sk-radio-dot' });
+    const labelEl = h('span', { class: 'sk-radio-label' }, children);
+
+    return h('label', { class: classes }, [ inputEl, dotEl, labelEl ]);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/select.ts

@@ -5,10 +5,10 @@
 // composed by the caller. Passthrough attrs: name, id; booleans: disabled, required.
 //----------------------------------------------------------------------------------------------------------------------
 
-import type { ComponentKind, ComponentSize } from '../types';
+import type { ComponentKind, ComponentSize, SelectCorner } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -16,6 +16,7 @@ export interface SelectStaticProps
 {
     kind ?: ComponentKind;
     size ?: ComponentSize;
+    corners ?: SelectCorner[];
     name ?: string;
     id ?: string;
     disabled ?: boolean;
@@ -24,28 +25,30 @@ export interface SelectStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function select(props : SelectStaticProps = {}, children = '') : string
+export function select<T>(h : H<T>, props : SelectStaticProps = {}, children ?: T | T[]) : T
 {
-    const classes = composeClasses({ base: 'sk-select', kind: true, size: true }, props as Record<string, unknown>);
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+    const classes = composeClasses(
+        {
+            base: 'sk-select',
+            kind: true,
+            size: true,
+            listFlags: [ { prop: 'corners', family: 'cut' } ],
+        },
+        props as Record<string, unknown>
+    );
+    const attrs : Record<string, unknown> = { class: classes };
 
     const passthroughString = [ 'name', 'id' ] as const;
     for(const key of passthroughString)
     {
         const val = props[key];
-        if(typeof val === 'string')
-        {
-            attrs.push(`${ key }="${ escapeAttr(val) }"`);
-        }
+        if(typeof val === 'string') { attrs[key] = val; }
     }
 
-    const passthroughBool = [ 'disabled', 'required' ] as const;
-    for(const key of passthroughBool)
-    {
-        if(props[key] === true) { attrs.push(key); }
-    }
+    if(props.disabled === true) { attrs.disabled = true; }
+    if(props.required === true) { attrs.required = true; }
 
-    return `<select ${ attrs.join(' ') }>${ children }</select>`;
+    return h('select', attrs, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/sidebar.ts

@@ -20,7 +20,7 @@
 
 import type { SidebarKind, SidebarSide, StaticCustomColors } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -36,7 +36,7 @@ export interface SidebarStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function sidebar(props : SidebarStaticProps = {}, children = '') : string
+export function sidebar<T>(h : H<T>, props : SidebarStaticProps = {}, children ?: T | T[]) : T
 {
     const kind = props.kind ?? 'neutral';
     const side = props.side ?? 'left';
@@ -61,25 +61,21 @@ export function sidebar(props : SidebarStaticProps = {}, children = '') : string
         'sk-sidebar-panel', // extra class SkSidebar adds to SkPanel
     ];
 
-    const asideAttrs = `class="${ escapeAttr(asideParts.join(' ')) }"`;
-    const panelAttrs = `class="${ escapeAttr(panelParts.join(' ')) }"`;
+    const asideAttrs : Record<string, unknown> = { class: asideParts.join(' ') };
 
     // Custom color styles go on the aside element (matching SkSidebar's sidebarStyles)
     const asideStyleParts : string[] = [];
     if(typeof props.baseColor === 'string')
     {
-        asideStyleParts.push(`--sk-sidebar-color-base: ${ escapeAttr(props.baseColor) };`);
+        asideStyleParts.push(`--sk-sidebar-color-base: ${ props.baseColor };`);
     }
+    if(asideStyleParts.length > 0) { asideAttrs.style = asideStyleParts.join(' '); }
 
-    const asideStyle = asideStyleParts.length > 0
-        ? ` style="${ asideStyleParts.join(' ') }"`
-        : '';
+    const navEl = h('nav', { class: 'sk-sidebar-nav' }, children);
+    const scrollEl = h('div', { class: 'sk-panel-scroll-content' }, navEl);
+    const panelEl = h('div', { class: panelParts.join(' ') }, scrollEl);
 
-    const inner = `<div class="sk-panel-scroll-content"><nav class="sk-sidebar-nav">${ children }</nav></div>`;
-
-    return `<aside ${ asideAttrs }${ asideStyle }>`
-        + `<div ${ panelAttrs }>${ inner }</div>`
-        + '</aside>';
+    return h('aside', asideAttrs, panelEl);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/skeleton.ts

@@ -16,7 +16,7 @@
 // when needed.
 //----------------------------------------------------------------------------------------------------------------------
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -37,7 +37,7 @@ export interface SkeletonStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function skeleton(props : SkeletonStaticProps = {}) : string
+export function skeleton<T>(h : H<T>, props : SkeletonStaticProps = {}) : T
 {
     const variant = props.variant ?? 'text';
     const animation = props.animation ?? 'shimmer';
@@ -45,7 +45,7 @@ export function skeleton(props : SkeletonStaticProps = {}) : string
     const classes : string[] = [ 'sk-skeleton', `sk-${ variant }` ];
     if(animation !== 'none') { classes.push(`sk-${ animation }`); }
 
-    const attrs : string[] = [ `class="${ escapeAttr(classes.join(' ')) }"` ];
+    const attrs : Record<string, unknown> = { class: classes.join(' ') };
 
     // Inline style: forward width/height when provided.
     // For circular/square variants, height = width when only width is set — mirrors Vue's styles computed.
@@ -53,14 +53,11 @@ export function skeleton(props : SkeletonStaticProps = {}) : string
     const resolvedHeight = props.height
         ?? ((variant === 'circular' || variant === 'square') && props.width ? props.width : undefined);
 
-    if(typeof props.width === 'string') { styleParts.push(`width: ${ escapeAttr(props.width) };`); }
-    if(typeof resolvedHeight === 'string') { styleParts.push(`height: ${ escapeAttr(resolvedHeight) };`); }
-    if(styleParts.length > 0)
-    {
-        attrs.push(`style="${ styleParts.join(' ') }"`);
-    }
+    if(typeof props.width === 'string') { styleParts.push(`width: ${ props.width };`); }
+    if(typeof resolvedHeight === 'string') { styleParts.push(`height: ${ resolvedHeight };`); }
+    if(styleParts.length > 0) { attrs.style = styleParts.join(' '); }
 
-    return `<div ${ attrs.join(' ') }></div>`;
+    return h('div', attrs);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/slider.ts

@@ -8,8 +8,8 @@
 
 import type { ComponentKind, ComponentSize } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -27,24 +27,22 @@ export interface SliderStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function slider(props : SliderStaticProps = {}) : string
+export function slider<T>(h : H<T>, props : SliderStaticProps = {}) : T
 {
     const classes = composeClasses({ base: 'sk-slider', kind: true, size: true }, props as Record<string, unknown>);
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"`, 'type="range"' ];
+    const attrs : Record<string, unknown> = { class: classes, type: 'range' };
 
     const passthroughString = [ 'min', 'max', 'step', 'value', 'name' ] as const;
     for(const key of passthroughString)
     {
         const val = props[key];
-        if(typeof val === 'string')
-        {
-            attrs.push(`${ key }="${ escapeAttr(val) }"`);
-        }
+        if(typeof val === 'string') { attrs[key] = val; }
     }
 
-    if(props.disabled === true) { attrs.push('disabled'); }
+    if(props.disabled === true) { attrs.disabled = true; }
 
-    return `<input ${ attrs.join(' ') } />`;
+    // void element — no children
+    return h('input', attrs);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/spinner.ts

@@ -23,7 +23,7 @@
 
 import type { ComponentKind, SpinnerSize, SpinnerVariant } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -42,32 +42,32 @@ export interface SpinnerStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-// Inner HTML per variant — mirrors Vue's v-if/v-else-if blocks.
-function innerHtml(variant : SpinnerVariant) : string
+// Inner element per variant — mirrors Vue's v-if/v-else-if blocks.
+function innerEl<T>(h : H<T>, variant : SpinnerVariant) : T
 {
     switch (variant)
     {
         case 'circular':
-            return '<div class="sk-spinner-circular">'
-                + '<div class="sk-arc sk-arc-large"></div>'
-                + '<div class="sk-arc sk-arc-small"></div>'
-                + '</div>';
+            return h('div', { class: 'sk-spinner-circular' }, [
+                h('div', { class: 'sk-arc sk-arc-large' }),
+                h('div', { class: 'sk-arc sk-arc-small' }),
+            ]);
 
         case 'dots':
-            return '<div class="sk-spinner-dots">'
-                + '<div class="sk-dot"></div>'
-                + '<div class="sk-dot"></div>'
-                + '<div class="sk-dot"></div>'
-                + '</div>';
+            return h('div', { class: 'sk-spinner-dots' }, [
+                h('div', { class: 'sk-dot' }),
+                h('div', { class: 'sk-dot' }),
+                h('div', { class: 'sk-dot' }),
+            ]);
 
         case 'crosshair':
-            return '<div class="sk-crosshair-loader"></div>';
+            return h('div', { class: 'sk-crosshair-loader' });
     }
 }
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function spinner(props : SpinnerStaticProps = {}) : string
+export function spinner<T>(h : H<T>, props : SpinnerStaticProps = {}) : T
 {
     const kind = props.kind ?? 'primary';
     const size = props.size ?? 'md';
@@ -75,20 +75,20 @@ export function spinner(props : SpinnerStaticProps = {}) : string
 
     const classes = [ 'sk-spinner', `sk-${ kind }`, `sk-${ size }`, `sk-variant-${ variant }` ];
 
-    const attrs : string[] = [
-        `class="${ escapeAttr(classes.join(' ')) }"`,
-        'role="status"',
-        'aria-live="polite"',
-        'aria-label="Loading"',
-    ];
+    const attrs : Record<string, unknown> = {
+        'class': classes.join(' '),
+        'role': 'status',
+        'aria-live': 'polite',
+        'aria-label': 'Loading',
+    };
 
     // Custom color var — emitted as inline style when `color` prop is provided.
     if(typeof props.color === 'string')
     {
-        attrs.push(`style="--sk-spinner-color: ${ escapeAttr(props.color) };"`);
+        attrs.style = `--sk-spinner-color: ${ props.color };`;
     }
 
-    return `<div ${ attrs.join(' ') }>${ innerHtml(variant) }</div>`;
+    return h('div', attrs, innerEl(h, variant));
 }
 
 //----------------------------------------------------------------------------------------------------------------------