Add initial Nebula Core packages and docs
Import initial monorepo structure for Nebula Core: add packages (@nebula/core, core-glyphs, core-input, core-navigation, core-theme, core-ui, core-utils) with source, dist, tests and assets. Expand README with overview, quick start and API snippets, and add package-level documentation files. Add jsconfig.json for path mapping, package.json and lockfiles to bootstrap the repo. This commit sets up the project layout, docs, and local package links for further development.
This commit is contained in:
+43
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* Recommended hit target sizes for controller-first UI.
|
||||
* Values are in pixels at 100% scale.
|
||||
* @type {{ minSize: number, minHeight: number, minWidth: number }}
|
||||
*/
|
||||
export const hitTarget = {
|
||||
minSize: 48,
|
||||
minHeight: 48,
|
||||
minWidth: 48
|
||||
};
|
||||
|
||||
/**
|
||||
* Focus ring style tokens for UI libraries or CSS-in-JS.
|
||||
* @type {{ outlineWidth: number, outlineOffset: number, outlineColor: string }}
|
||||
*/
|
||||
export const focusRing = {
|
||||
outlineWidth: 3,
|
||||
outlineOffset: 3,
|
||||
outlineColor: "#8ddcff"
|
||||
};
|
||||
|
||||
/**
|
||||
* Build a minimal set of focusable attributes for controller navigation.
|
||||
* Works with DOM, React, or any rendering layer that accepts plain props.
|
||||
* @param {{ role?: string, tabIndex?: number, focusKey?: string }} [options]
|
||||
* @returns {Record<string, string | number>}
|
||||
*/
|
||||
export function getFocusableAttributes(options = {}) {
|
||||
const role = options.role ?? "button";
|
||||
const tabIndex = options.tabIndex ?? 0;
|
||||
/** @type {Record<string, string | number>} */
|
||||
const attrs = {
|
||||
role,
|
||||
tabIndex,
|
||||
"data-nebula-focus": "true"
|
||||
};
|
||||
|
||||
if (options.focusKey) {
|
||||
attrs["data-nebula-focus-key"] = options.focusKey;
|
||||
}
|
||||
|
||||
return attrs;
|
||||
}
|
||||
Reference in New Issue
Block a user