npm - @skewedaspect/sleekspace-ui - Versions diffs - 0.8.1 → 0.9.0 - Mend

@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

package/dist/components/Dropdown/SkDropdown.vue.d.ts +9 -1
package/dist/components/Dropdown/types.d.ts +2 -1
package/dist/components/NavBar/SkNavBar.vue.d.ts +9 -1
package/dist/components/NavBar/context.d.ts +2 -0
package/dist/components/NavBar/types.d.ts +5 -1
package/dist/components/Page/SkPage.vue.d.ts +9 -0
package/dist/components/ScrollArea/SkScrollArea.vue.d.ts +105 -4
package/dist/composables/useCustomColors.d.ts +18 -56
package/{src → dist}/global.d.ts +6 -2
package/dist/sleekspace-ui.css +4253 -1251
package/dist/sleekspace-ui.es.js +204 -109
package/dist/sleekspace-ui.umd.js +204 -109
package/dist/static/classes.d.ts +18 -0
package/dist/static/components/alert.d.ts +12 -0
package/dist/static/components/avatar.d.ts +9 -0
package/dist/static/components/breadcrumbs.d.ts +6 -0
package/dist/static/components/button.d.ts +13 -0
package/dist/static/components/card.d.ts +5 -0
package/dist/static/components/checkbox.d.ts +10 -0
package/dist/static/components/colorPicker.d.ts +8 -0
package/dist/static/components/divider.d.ts +8 -0
package/dist/static/components/dropdown.d.ts +8 -0
package/dist/static/components/field.d.ts +15 -0
package/dist/static/components/group.d.ts +5 -0
package/dist/static/components/input.d.ts +14 -0
package/dist/static/components/navBar.d.ts +16 -0
package/dist/static/components/numberInput.d.ts +15 -0
package/dist/static/components/page.d.ts +9 -0
package/dist/static/components/pagination.d.ts +5 -0
package/dist/static/components/panel.d.ts +11 -0
package/dist/static/components/progress.d.ts +9 -0
package/dist/static/components/radio.d.ts +11 -0
package/dist/static/components/select.d.ts +10 -0
package/dist/static/components/sidebar.d.ts +9 -0
package/dist/static/components/skeleton.d.ts +11 -0
package/dist/static/components/slider.d.ts +12 -0
package/dist/static/components/spinner.d.ts +12 -0
package/dist/static/components/switchInput.d.ts +10 -0
package/dist/static/components/table.d.ts +12 -0
package/dist/static/components/tag.d.ts +8 -0
package/dist/static/components/tagsInput.d.ts +7 -0
package/dist/static/components/textarea.d.ts +12 -0
package/dist/static/components/toolbar.d.ts +12 -0
package/dist/static/components/tooltip.d.ts +7 -0
package/dist/static/escape.d.ts +2 -0
package/dist/static/index.cjs.js +1 -0
package/dist/static/index.d.ts +68 -0
package/dist/static/index.es.js +732 -0
package/dist/static/render.d.ts +12 -0
package/dist/static/specs.d.ts +2 -0
package/dist/static/types.d.ts +43 -0
package/dist/tokens.css +322 -0
package/dist/types/index.d.ts +36 -0
package/docs/guides/installation.md +8 -2
package/docs/guides/pure-css/_meta.yaml +8 -0
package/docs/guides/pure-css/class-api.md +1070 -0
package/docs/guides/pure-css/custom-elements.md +574 -0
package/docs/guides/pure-css/index.md +86 -0
package/docs/guides/pure-css/limitations.md +152 -0
package/docs/guides/pure-css/static-helpers.md +1203 -0
package/llms-full.txt +3736 -261
package/package.json +16 -5
package/src/components/Card/SkCard.vue +1 -0
package/src/components/ContextMenu/SkContextMenuRadioGroup.vue +4 -1
package/src/components/Dropdown/SkDropdown.vue +20 -3
package/src/components/Dropdown/SkDropdownRadioGroup.vue +4 -1
package/src/components/Dropdown/types.ts +2 -1
package/src/components/NavBar/SkNavBar.vue +14 -4
package/src/components/NavBar/context.ts +4 -2
package/src/components/NavBar/types.ts +6 -1
package/src/components/Page/SkPage.vue +11 -0
package/src/components/Panel/SkPanel.vue +2 -1
package/src/components/ScrollArea/SkScrollArea.vue +78 -5
package/src/components/TreeView/SkTreeView.vue +7 -2
package/src/composables/useCustomColors.ts +86 -77
package/src/composables/usePortalContext.test.ts +0 -2
package/src/shims.d.ts +10 -0
package/src/static/__tests__/parity.test.ts +717 -0
package/src/static/__tests__/parityHarness.test.ts +98 -0
package/src/static/__tests__/parityHarness.ts +260 -0
package/src/static/classes.test.ts +82 -0
package/src/static/classes.ts +111 -0
package/src/static/components/__tests__/helpers.test.ts +837 -0
package/src/static/components/alert.ts +117 -0
package/src/static/components/avatar.ts +86 -0
package/src/static/components/breadcrumbs.ts +28 -0
package/src/static/components/button.ts +75 -0
package/src/static/components/card.ts +27 -0
package/src/static/components/checkbox.ts +48 -0
package/src/static/components/colorPicker.ts +45 -0
package/src/static/components/divider.ts +39 -0
package/src/static/components/dropdown.ts +36 -0
package/src/static/components/field.ts +86 -0
package/src/static/components/group.ts +27 -0
package/src/static/components/input.ts +55 -0
package/src/static/components/navBar.ts +94 -0
package/src/static/components/numberInput.ts +64 -0
package/src/static/components/page.ts +31 -0
package/src/static/components/pagination.ts +27 -0
package/src/static/components/panel.ts +33 -0
package/src/static/components/progress.ts +31 -0
package/src/static/components/radio.ts +53 -0
package/src/static/components/select.ts +51 -0
package/src/static/components/sidebar.ts +85 -0
package/src/static/components/skeleton.ts +66 -0
package/src/static/components/slider.ts +50 -0
package/src/static/components/spinner.ts +94 -0
package/src/static/components/switchInput.ts +49 -0
package/src/static/components/table.ts +88 -0
package/src/static/components/tag.ts +76 -0
package/src/static/components/tagsInput.ts +35 -0
package/src/static/components/textarea.ts +53 -0
package/src/static/components/toolbar.ts +74 -0
package/src/static/components/tooltip.ts +29 -0
package/src/static/escape.test.ts +53 -0
package/src/static/escape.ts +28 -0
package/src/static/generated/defaults.ts +378 -0
package/src/static/generated/propTypes.ts +425 -0
package/src/static/index.ts +116 -0
package/src/static/render.test.ts +83 -0
package/src/static/render.ts +76 -0
package/src/static/specs.test.ts +58 -0
package/src/static/specs.ts +230 -0
package/src/static/types.ts +176 -0
package/src/styles/__tests__/testHelpers.ts +97 -0
package/src/styles/base/_custom-elements.scss +51 -0
package/src/styles/base/_index.scss +4 -0
package/src/styles/components/__tests__/componentSelectors.test.ts +2575 -0
package/src/styles/components/_alert.scss +82 -39
package/src/styles/components/_avatar.scss +102 -47
package/src/styles/components/_breadcrumbs.scss +39 -37
package/src/styles/components/_button.scss +58 -5
package/src/styles/components/_card.scss +64 -2
package/src/styles/components/_checkbox.scss +35 -5
package/src/styles/components/_color-picker.scss +48 -13
package/src/styles/components/_divider.scss +86 -52
package/src/styles/components/_dropdown.scss +214 -0
package/src/styles/components/_field.scss +76 -23
package/src/styles/components/_group.scss +190 -79
package/src/styles/components/_index.scss +1 -0
package/src/styles/components/_input.scss +81 -5
package/src/styles/components/_menu.scss +1 -1
package/src/styles/components/_navbar.scss +76 -45
package/src/styles/components/_number-input.scss +88 -83
package/src/styles/components/_page.scss +82 -23
package/src/styles/components/_pagination.scss +240 -212
package/src/styles/components/_panel.scss +268 -122
package/src/styles/components/_progress.scss +120 -70
package/src/styles/components/_radio.scss +35 -5
package/src/styles/components/_scroll-area.scss +50 -22
package/src/styles/components/_select.scss +40 -9
package/src/styles/components/_sidebar.scss +59 -34
package/src/styles/components/_skeleton.scss +111 -65
package/src/styles/components/_slider.scss +34 -10
package/src/styles/components/_spinner.scss +107 -56
package/src/styles/components/_switch.scss +36 -5
package/src/styles/components/_table.scss +150 -166
package/src/styles/components/_tag.scss +244 -154
package/src/styles/components/_tags-input.scss +46 -12
package/src/styles/components/_textarea.scss +36 -5
package/src/styles/components/_toolbar.scss +85 -31
package/src/styles/components/_tooltip.scss +172 -3
package/src/styles/mixins/_cut-border.scss +18 -4
package/src/styles/mixins/_dual-selector.scss +192 -0
package/src/styles/mixins/_index.scss +1 -0
package/src/styles/mixins/dualSelector.test.ts +151 -0
package/src/styles/themes/_colorful.scss +25 -0
package/src/styles/themes/_greyscale.scss +25 -0
package/src/styles/themes/_shade-scale.scss +39 -0
package/src/styles/tokens/_semantic-color-kinds.scss +66 -0
package/src/{types.ts → types/index.ts} +19 -11
package/web-types.json +970 -137
package/dist/composables/useCustomColors.test.d.ts +0 -1
package/dist/composables/useFocusTrap.test.d.ts +0 -1
package/dist/composables/usePortalContext.test.d.ts +0 -1
package/dist/styles/mixins/fluidSize.test.d.ts +0 -1
package/dist/types.d.ts +0 -29

package/src/static/components/alert.ts ADDED Viewed

@@ -0,0 +1,117 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Alert Static Helper
+//
+// Emits the full alert DOM structure: optional icon container + content wrapper, matching the
+// Vue component's rendered output. Icon is auto-selected by kind for the four feedback kinds
+// (info, success, warning, danger). Pass `icon: false` to suppress it, or `icon: '<html>'`
+// for a custom icon.
+//----------------------------------------------------------------------------------------------------------------------
+import type { AlertKind, StaticCustomColors } from '../types';
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+// Feedback kinds that have a default icon — mirrors FEEDBACK_KINDS in the Vue component.
+const FEEDBACK_KINDS = new Set([ 'info', 'success', 'warning', 'danger' ]);
+// Default SVG icons per feedback kind, matching the exact SVG content in SkAlert.vue.
+const DEFAULT_ICONS : Record<string, string>
+    = {
+        info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">'
+        + '<circle cx="12" cy="12" r="10"></circle>'
+        + '<line x1="12" y1="16" x2="12" y2="12"></line>'
+        + '<circle cx="12" cy="8" r="0.5" fill="currentColor"></circle>'
+        + '</svg>',
+        success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">'
+        + '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>'
+        + '<polyline points="22 4 12 14.01 9 11.01"></polyline>'
+        + '</svg>',
+        warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">'
+        + '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">'
+        + '</path>'
+        + '<line x1="12" y1="9" x2="12" y2="13"></line>'
+        + '<circle cx="12" cy="17" r="0.5" fill="currentColor"></circle>'
+        + '</svg>',
+        danger: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">'
+        + '<circle cx="12" cy="12" r="10"></circle>'
+        + '<line x1="15" y1="9" x2="9" y2="15"></line>'
+        + '<line x1="9" y1="9" x2="15" y2="15"></line>'
+        + '</svg>',
+    };
+//----------------------------------------------------------------------------------------------------------------------
+export interface AlertStaticProps extends StaticCustomColors
+{
+    kind ?: AlertKind;
+    subtle ?: boolean;
+    /**
+     * Custom icon HTML string, or `false` to suppress the icon entirely.
+     * When omitted (default), a kind-appropriate SVG is shown for feedback kinds
+     * (info, success, warning, danger); non-feedback kinds show no icon.
+     */
+    icon ?: string | false;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function alert(props : AlertStaticProps = {}, children = '') : string
+{
+    const kind = props.kind ?? 'info';
+    // Apply default kind so the class is always emitted (mirrors Vue's withDefaults({ kind: 'info' }))
+    const propsWithDefaults = { ...props, kind };
+    const classes = composeClasses(
+        {
+            base: 'sk-alert',
+            kind: true,
+            booleanFlags: [ 'subtle' ],
+        },
+        propsWithDefaults as Record<string, unknown>
+    );
+    const attrs : string[] = [ `class="${ escapeAttr(classes) }"`, 'role="alert"' ];
+    // Custom color vars — match the Vue component's useCustomColors('alert', ...) output.
+    const styleParts : string[] = [];
+    if(typeof props.baseColor === 'string')
+    {
+        styleParts.push(`--sk-alert-color-base: ${ escapeAttr(props.baseColor) };`);
+    }
+    if(typeof props.textColor === 'string')
+    {
+        styleParts.push(`--sk-alert-fg: ${ escapeAttr(props.textColor) };`);
+    }
+    if(styleParts.length > 0)
+    {
+        attrs.push(`style="${ styleParts.join(' ') }"`);
+    }
+    // Determine icon HTML: explicit false = no icon; explicit string = custom; undefined = auto
+    let iconHtml = '';
+    if(props.icon !== false)
+    {
+        const iconContent = typeof props.icon === 'string'
+            ? props.icon
+            : (FEEDBACK_KINDS.has(kind) ? (DEFAULT_ICONS[kind] ?? '') : null);
+        if(iconContent !== null)
+        {
+            iconHtml = `<div class="sk-alert-icon">${ iconContent }</div>`;
+        }
+    }
+    const contentHtml = `<div class="sk-alert-content">${ children }</div>`;
+    return `<div ${ attrs.join(' ') }>${ iconHtml }${ contentHtml }</div>`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/avatar.ts ADDED Viewed

@@ -0,0 +1,86 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Avatar Static Helper
+//
+// Emits the full avatar DOM structure matching the Vue component's rendered output:
+//   <div class="sk-avatar sk-<kind> sk-<size>" [style="..."]>
+//     <img class="sk-avatar-image" src="..." alt="...">         (when src provided)
+//     <span class="sk-avatar-initials">AB</span>                (when initials provided, no src)
+//     <svg class="sk-avatar-icon" ...>…</svg>                   (default fallback — no src or initials)
+//   </div>
+//
+// Fallback priority matches Vue: src → initials → default SVG icon.
+// No `shape` prop — Vue's SkAvatar has no shape prop; that was a prior helper addition that
+// diverged from Vue's actual API. Removed here to match Vue's class output exactly.
+//----------------------------------------------------------------------------------------------------------------------
+import type { AvatarSize, ComponentKind, StaticCustomColors } from '../types';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+export interface AvatarStaticProps extends StaticCustomColors
+{
+    kind ?: ComponentKind;
+    size ?: AvatarSize;
+    src ?: string;
+    alt ?: string;
+    initials ?: string;
+}
+//----------------------------------------------------------------------------------------------------------------------
+// Default fallback SVG — exact content from SkAvatar.vue's default #icon slot
+const DEFAULT_ICON_PATH = 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4'
+    + 'v2h16v-2c0-2.66-5.33-4-8-4z';
+const DEFAULT_ICON_SVG = '<svg class="sk-avatar-icon" viewBox="0 0 24 24" fill="currentColor">'
+    + `<path d="${ DEFAULT_ICON_PATH }"></path>`
+    + '</svg>';
+//----------------------------------------------------------------------------------------------------------------------
+export function avatar(props : AvatarStaticProps = {}) : string
+{
+    const kind = props.kind ?? 'neutral';
+    const size = props.size ?? 'md';
+    const classes = [ 'sk-avatar', `sk-${ kind }`, `sk-${ size }` ];
+    const attrs : string[] = [ `class="${ escapeAttr(classes.join(' ')) }"` ];
+    // Custom color vars — match Vue's customStyles computed property
+    const styleParts : string[] = [];
+    if(typeof props.baseColor === 'string')
+    {
+        styleParts.push(`--sk-avatar-color-base: ${ escapeAttr(props.baseColor) };`);
+    }
+    if(typeof props.textColor === 'string')
+    {
+        styleParts.push(`--sk-avatar-fg: ${ escapeAttr(props.textColor) };`);
+    }
+    if(styleParts.length > 0)
+    {
+        attrs.push(`style="${ styleParts.join(' ') }"`);
+    }
+    // Inner content: image > initials > default icon (matches Vue's v-if / v-else-if / v-else)
+    let inner : string;
+    if(props.src)
+    {
+        const alt = props.alt ?? '';
+        inner = `<img src="${ escapeAttr(props.src) }" alt="${ escapeAttr(alt) }" class="sk-avatar-image">`;
+    }
+    else if(props.initials)
+    {
+        // Truncate to 2 chars, uppercase — matches Vue's displayInitials computed
+        const display = props.initials.slice(0, 2).toUpperCase();
+        inner = `<span class="sk-avatar-initials">${ escapeAttr(display) }</span>`;
+    }
+    else
+    {
+        inner = DEFAULT_ICON_SVG;
+    }
+    return `<div ${ attrs.join(' ') }>${ inner }</div>`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/breadcrumbs.ts ADDED Viewed

@@ -0,0 +1,28 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Breadcrumbs Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <nav aria-label="Breadcrumbs">
+// with sk-breadcrumbs modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+import type { BreadcrumbsKind, StaticCustomColors } from '../types';
+import { render } from '../render';
+import { SPECS } from '../specs';
+//----------------------------------------------------------------------------------------------------------------------
+export interface BreadcrumbsStaticProps extends StaticCustomColors
+{
+    kind ?: BreadcrumbsKind;
+    separator ?: string;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function breadcrumbs(props : BreadcrumbsStaticProps = {}, children = '') : string
+{
+    return render(SPECS.breadcrumbs, props as Record<string, unknown>, children);
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/button.ts ADDED Viewed

@@ -0,0 +1,75 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Button Static Helper
+//
+// Renders <button> (default) or <a> (when href is provided) with the required chrome-wrapper
+// span. Never renders as a custom element. For router-link use cases, the consumer renders
+// their own <a> with class="sk-button" — this helper emits plain HTML only.
+//----------------------------------------------------------------------------------------------------------------------
+import type { ButtonKind, ButtonSize, ButtonType, ButtonVariant, StaticCustomColors } from '../types';
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+export interface ButtonStaticProps extends StaticCustomColors
+{
+    type ?: ButtonType;
+    kind ?: ButtonKind;
+    variant ?: ButtonVariant;
+    size ?: ButtonSize;
+    disabled ?: boolean;
+    loading ?: boolean;
+    pressed ?: boolean;
+    dense ?: boolean;
+    href ?: string;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function button(props : ButtonStaticProps = {}, children = '') : string
+{
+    const classes = composeClasses({
+        base: 'sk-button',
+        kind: true,
+        size: true,
+        variant: true,
+        booleanFlags: [ 'loading', 'pressed', 'dense' ],
+    }, props as Record<string, unknown>);
+    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+    const isAnchor = typeof props.href === 'string';
+    if(isAnchor)
+    {
+        attrs.push(`href="${ escapeAttr(props.href ?? '') }"`);
+    }
+    else
+    {
+        const buttonType = props.type ?? 'button';
+        attrs.push(`type="${ escapeAttr(buttonType) }"`);
+    }
+    if(props.disabled)
+    {
+        attrs.push(isAnchor ? 'aria-disabled="true"' : 'disabled');
+    }
+    if(props.loading)
+    {
+        attrs.push('aria-busy="true"');
+    }
+    if(props.pressed)
+    {
+        attrs.push('aria-pressed="true"');
+    }
+    const tag = isAnchor ? 'a' : 'button';
+    const inner = `<span class="sk-button-chrome">${ children }</span>`;
+    return `<${ tag } ${ attrs.join(' ') }>${ inner }</${ tag }>`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/card.ts ADDED Viewed

@@ -0,0 +1,27 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Card Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <div> with sk-card
+// modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+import type { CardKind, StaticCustomColors } from '../types';
+import { render } from '../render';
+import { SPECS } from '../specs';
+//----------------------------------------------------------------------------------------------------------------------
+export interface CardStaticProps extends StaticCustomColors
+{
+    kind ?: CardKind;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function card(props : CardStaticProps = {}, children = '') : string
+{
+    return render(SPECS.card, props as Record<string, unknown>, children);
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/checkbox.ts ADDED Viewed

@@ -0,0 +1,48 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Checkbox Static Helper
+//
+// Emits a compound <label class="sk-checkbox"><input type="checkbox" /><span class="sk-checkbox-box"></span>
+// <span class="sk-checkbox-label">children</span></label> structure for pure-CSS usage. This is
+// the static/SSG-friendly alternative to the Reka UI–based Vue component.
+//----------------------------------------------------------------------------------------------------------------------
+import type { ComponentKind, ComponentSize } from '../types';
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+export interface CheckboxStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+    checked ?: boolean;
+    disabled ?: boolean;
+    required ?: boolean;
+    name ?: string;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function checkbox(props : CheckboxStaticProps = {}, children = '') : string
+{
+    const classes = composeClasses({ base: 'sk-checkbox', kind: true, size: true }, props as Record<string, unknown>);
+    const inputAttrs : string[] = [ 'type="checkbox"' ];
+    if(props.name)
+    {
+        inputAttrs.push(`name="${ escapeAttr(props.name) }"`);
+    }
+    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 boxEl = `<span class="sk-checkbox-box"></span>`;
+    const labelEl = `<span class="sk-checkbox-label">${ children }</span>`;
+    return `<label class="${ escapeAttr(classes) }">${ inputEl }${ boxEl }${ labelEl }</label>`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/colorPicker.ts ADDED Viewed

@@ -0,0 +1,45 @@
+//----------------------------------------------------------------------------------------------------------------------
+// ColorPicker Static Helper
+//
+// Emits a void <input class="sk-color-picker" type="color" /> with passthrough attrs for
+// value and name.
+//----------------------------------------------------------------------------------------------------------------------
+import type { ComponentSize } from '../types';
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+export interface ColorPickerStaticProps
+{
+    size ?: ComponentSize;
+    value ?: string;
+    name ?: string;
+    disabled ?: boolean;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function colorPicker(props : ColorPickerStaticProps = {}) : string
+{
+    const classes = composeClasses({ base: 'sk-color-picker', size: true }, props as Record<string, unknown>);
+    const attrs : string[] = [ `class="${ escapeAttr(classes) }"`, 'type="color"' ];
+    const passthroughString = [ 'value', 'name' ] as const;
+    for(const key of passthroughString)
+    {
+        const val = props[key];
+        if(typeof val === 'string')
+        {
+            attrs.push(`${ key }="${ escapeAttr(val) }"`);
+        }
+    }
+    if(props.disabled === true) { attrs.push('disabled'); }
+    return `<input ${ attrs.join(' ') } />`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/divider.ts ADDED Viewed

@@ -0,0 +1,39 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Divider Static Helper
+//
+// Emits an <hr> element matching the Vue component's rendered output. The orientation class
+// follows Vue's pattern: sk-horizontal / sk-vertical (not sk-orientation-*). Kind and size
+// modifier classes are emitted exactly as Vue does, using the sk-${kind} and sk-${size}
+// families. The aria-orientation attribute is omitted — it's filtered by the parity harness
+// as a reka-ui runtime attribute and has no semantic value in a static context.
+//----------------------------------------------------------------------------------------------------------------------
+import type { ComponentKind, ComponentSize, DividerOrientation, DividerVariant } from '../types';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+export interface DividerStaticProps
+{
+    orientation ?: DividerOrientation;
+    kind ?: ComponentKind;
+    variant ?: DividerVariant;
+    size ?: ComponentSize;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function divider(props : DividerStaticProps = {}) : string
+{
+    const orientation = props.orientation ?? 'horizontal';
+    const kind = props.kind ?? 'neutral';
+    const size = props.size ?? 'md';
+    const classes : string[] = [ 'sk-divider', `sk-${ orientation }`, `sk-${ kind }`, `sk-${ size }` ];
+    if(props.variant === 'subtle') { classes.push('sk-subtle'); }
+    return `<hr class="${ escapeAttr(classes.join(' ')) }" role="separator">`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/dropdown.ts ADDED Viewed

@@ -0,0 +1,36 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Dropdown Static Helper (<details> disclosure)
+//
+// Note: this is the pure-CSS disclosure variant, NOT a menu. The Vue SkDropdown is a menu with
+// focus trap and keyboard navigation; this helper outputs a plain <details>/<summary>
+// disclosure styled to match Sleekspace.
+//----------------------------------------------------------------------------------------------------------------------
+import type { SemanticKind } from '../types';
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+export interface DropdownStaticProps
+{
+    summary : string;
+    kind ?: SemanticKind;
+    size ?: 'sm' | 'md' | 'lg';
+    open ?: boolean;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function dropdown(props : DropdownStaticProps, children = '') : string
+{
+    const spec = { base: 'sk-dropdown', kind: true, size: true } as const;
+    const classes = composeClasses(spec, props as unknown as Record<string, unknown>);
+    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+    if(props.open) { attrs.push('open'); }
+    return `<details ${ attrs.join(' ') }><summary>${ escapeAttr(props.summary) }</summary>${ children }</details>`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/field.ts ADDED Viewed

@@ -0,0 +1,86 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Field Static Helper
+//
+// Emits the full field DOM structure matching the Vue component's rendered output:
+//   <div class="sk-field sk-label-<position> [sk-has-error]">
+//     [<label for="<id>" class="sk-field-label">
+//       LABEL[<span class="sk-field-required">*</span>]
+//     </label>]
+//     <div class="sk-field-input-wrapper">CHILDREN</div>
+//     [<p id="<id>-description" class="sk-field-description">DESCRIPTION</p>]
+//     [<p id="<id>-error" class="sk-field-error">ERROR</p>]
+//   </div>
+//
+// Label position defaults to 'top' (sk-label-top) — matches Vue's withDefaults({ labelPosition: 'top' }).
+// The sk-field-input-wrapper div is always emitted, wrapping the children slot.
+//
+// The `id` prop mirrors Vue's `id` prop — when provided it is used for the label `for` attribute
+// and the description/error paragraph IDs, enabling DOM-accurate parity tests. When omitted, the
+// label `for` and paragraph IDs are not emitted (Vue auto-generates them at runtime).
+//----------------------------------------------------------------------------------------------------------------------
+import type { FieldLabelPosition } from '../types';
+import { escapeAttr } from '../escape';
+//----------------------------------------------------------------------------------------------------------------------
+export interface FieldStaticProps
+{
+    label ?: string;
+    description ?: string;
+    error ?: string;
+    required ?: boolean;
+    labelPosition ?: FieldLabelPosition;
+    /**
+     * Explicit field ID — forwarded to label `for` and description/error `id` attributes.
+     * Mirrors Vue's `id` prop. When omitted, Vue auto-generates the ID and the static helper
+     * skips those attributes (avoid parity tests without an explicit `id`).
+     */
+    id ?: string;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function field(props : FieldStaticProps = {}, children = '') : string
+{
+    const labelPosition = props.labelPosition ?? 'top';
+    const classes : string[] = [ 'sk-field', `sk-label-${ labelPosition }` ];
+    if(props.error) { classes.push('sk-has-error'); }
+    const attrs = `class="${ escapeAttr(classes.join(' ')) }"`;
+    // Label element (only when label prop is set)
+    let labelHtml = '';
+    if(props.label)
+    {
+        const forAttr = props.id ? ` for="${ escapeAttr(props.id) }"` : '';
+        const requiredSpan = props.required ? '<span class="sk-field-required">*</span>' : '';
+        labelHtml = `<label${ forAttr } class="sk-field-label">${ escapeAttr(props.label) }${ requiredSpan }</label>`;
+    }
+    // Input wrapper always emitted
+    const wrapperHtml = `<div class="sk-field-input-wrapper">${ children }</div>`;
+    // Description (only when set and no error)
+    let descriptionHtml = '';
+    if(props.description && !props.error)
+    {
+        const idAttr = props.id ? ` id="${ escapeAttr(props.id) }-description"` : '';
+        descriptionHtml = `<p${ idAttr } class="sk-field-description">${ escapeAttr(props.description) }</p>`;
+    }
+    // Error (only when set)
+    let errorHtml = '';
+    if(props.error)
+    {
+        const idAttr = props.id ? ` id="${ escapeAttr(props.id) }-error"` : '';
+        errorHtml = `<p${ idAttr } class="sk-field-error">${ escapeAttr(props.error) }</p>`;
+    }
+    return `<div ${ attrs }>${ labelHtml }${ wrapperHtml }${ descriptionHtml }${ errorHtml }</div>`;
+}
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/group.ts ADDED Viewed

@@ -0,0 +1,27 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Group Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <div> with sk-group
+// modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+import type { GroupOrientation } from '../types';
+import { render } from '../render';
+import { SPECS } from '../specs';
+//----------------------------------------------------------------------------------------------------------------------
+export interface GroupStaticProps
+{
+    orientation ?: GroupOrientation;
+}
+//----------------------------------------------------------------------------------------------------------------------
+export function group(props : GroupStaticProps = {}, children = '') : string
+{
+    return render(SPECS.group, props as Record<string, unknown>, children);
+}
+//----------------------------------------------------------------------------------------------------------------------