@navecss/core 0.1.0

package/dist/atoms.d.ts

@@ -0,0 +1,413 @@
+type CSSDeclarations = Record<string, string>;
+type PseudoMap = Record<string, CSSDeclarations>;
+interface MediaBlock {
+    declarations?: CSSDeclarations;
+    pseudos?: PseudoMap;
+}
+interface AtomDefinition {
+    declarations: CSSDeclarations;
+    pseudos?: PseudoMap;
+    media?: Record<string, MediaBlock>;
+    container?: Record<string, MediaBlock>;
+}
+declare const atoms: {
+    readonly flex: {
+        readonly declarations: {
+            readonly display: "flex";
+        };
+    };
+    readonly inlineFlex: {
+        readonly declarations: {
+            readonly display: "inline-flex";
+        };
+    };
+    readonly grid: {
+        readonly declarations: {
+            readonly display: "grid";
+        };
+    };
+    readonly block: {
+        readonly declarations: {
+            readonly display: "block";
+        };
+    };
+    readonly inlineBlock: {
+        readonly declarations: {
+            readonly display: "inline-block";
+        };
+    };
+    readonly hidden: {
+        readonly declarations: {
+            readonly display: "none";
+        };
+    };
+    readonly flexCol: {
+        readonly declarations: {
+            readonly 'flex-direction': "column";
+        };
+    };
+    readonly flexWrap: {
+        readonly declarations: {
+            readonly 'flex-wrap': "wrap";
+        };
+    };
+    readonly itemsCenter: {
+        readonly declarations: {
+            readonly 'align-items': "center";
+        };
+    };
+    readonly itemsStart: {
+        readonly declarations: {
+            readonly 'align-items': "flex-start";
+        };
+    };
+    readonly itemsEnd: {
+        readonly declarations: {
+            readonly 'align-items': "flex-end";
+        };
+    };
+    readonly justifyCenter: {
+        readonly declarations: {
+            readonly 'justify-content': "center";
+        };
+    };
+    readonly justifyBetween: {
+        readonly declarations: {
+            readonly 'justify-content': "space-between";
+        };
+    };
+    readonly justifyEnd: {
+        readonly declarations: {
+            readonly 'justify-content': "flex-end";
+        };
+    };
+    readonly flexGrow: {
+        readonly declarations: {
+            readonly 'flex-grow': "1";
+        };
+    };
+    readonly flexShrink0: {
+        readonly declarations: {
+            readonly 'flex-shrink': "0";
+        };
+    };
+    readonly gap: {
+        readonly declarations: {
+            readonly gap: "var(--nave-spacing-content-md)";
+        };
+    };
+    readonly relative: {
+        readonly declarations: {
+            readonly position: "relative";
+        };
+    };
+    readonly absolute: {
+        readonly declarations: {
+            readonly position: "absolute";
+        };
+    };
+    readonly insetFull: {
+        readonly declarations: {
+            readonly inset: "0";
+        };
+    };
+    readonly wFull: {
+        readonly declarations: {
+            readonly width: "100%";
+        };
+    };
+    readonly hFull: {
+        readonly declarations: {
+            readonly height: "100%";
+        };
+    };
+    readonly minW0: {
+        readonly declarations: {
+            readonly 'min-width': "0";
+        };
+    };
+    readonly truncate: {
+        readonly declarations: {
+            readonly overflow: "hidden";
+            readonly 'text-overflow': "ellipsis";
+            readonly 'white-space': "nowrap";
+        };
+    };
+    /**
+     * srOnly — visually hidden, accessible to screen readers.
+     * Every property in the shared declaration set is load-bearing: the 1x1 box
+     * stays in the accessibility tree where display: none would not, the box is
+     * 1px rather than 0 because a zero-size box is dropped from that tree by some
+     * assistive technology, the negative margin cancels it out of layout flow,
+     * clip-path is used rather than clip so it keeps working if a consumer
+     * overrides position, and nowrap stops long text rendering as a visible
+     * column of single characters. Do not simplify.
+     */
+    readonly srOnly: {
+        readonly declarations: CSSDeclarations;
+    };
+    /**
+     * srOnlyFocusable — srOnly that reveals itself when it (or a descendant)
+     * receives keyboard focus. The skip-link pattern needs this: an element
+     * hidden until it receives keyboard focus. Plain srOnly on a skip link
+     * produces a focusable element that is permanently invisible, so a
+     * keyboard user tabs into apparent nothingness.
+     *
+     * :focus-visible — the element itself is the focusable (e.g. the skip
+     *   link anchor carries this atom directly).
+     * :focus-within  — the hidden element wraps the focusable rather than
+     *   being it.
+     */
+    readonly srOnlyFocusable: {
+        readonly declarations: CSSDeclarations;
+        readonly pseudos: {
+            readonly ':focus-visible': CSSDeclarations;
+            readonly ':focus-within': CSSDeclarations;
+        };
+    };
+    readonly noWrap: {
+        readonly declarations: {
+            readonly 'white-space': "nowrap";
+        };
+    };
+    readonly breakWord: {
+        readonly declarations: {
+            readonly 'overflow-wrap': "break-word";
+        };
+    };
+    readonly textLeft: {
+        readonly declarations: {
+            readonly 'text-align': "left";
+        };
+    };
+    readonly textCenter: {
+        readonly declarations: {
+            readonly 'text-align': "center";
+        };
+    };
+    readonly textRight: {
+        readonly declarations: {
+            readonly 'text-align': "right";
+        };
+    };
+    /**
+     * interactive — base for any clickable non-button element.
+     * -webkit-tap-highlight-color removes the grey tap flash on iOS/Android.
+     * -webkit-user-select is required alongside user-select: every released Safari and every
+     * iOS browser (all WebKit-based, regardless of the label on the tin) reads only the
+     * prefixed property; the unprefixed one is Safari-preview-only per BCD.
+     */
+    readonly interactive: {
+        readonly declarations: {
+            readonly cursor: "pointer";
+            readonly '-webkit-user-select': "none";
+            readonly 'user-select': "none";
+            readonly '-webkit-tap-highlight-color': "transparent";
+        };
+    };
+    /**
+     * focusRing — keyboard focus indicator.
+     * :focus-visible — keyboard users see it, mouse users do not.
+     */
+    readonly focusRing: {
+        readonly declarations: {
+            readonly outline: "none";
+        };
+        readonly pseudos: {
+            readonly ':focus-visible': {
+                readonly outline: "var(--nave-border-width-focus) solid var(--nave-color-border-focus)";
+                readonly 'outline-offset': "2px";
+            };
+        };
+    };
+    /**
+     * disabledState — visual + behavioural disabled treatment.
+     * Applies from either the native `disabled` attribute or
+     * `aria-disabled="true"`. On the aria-disabled branch the element stays
+     * focusable by design: this atom only blocks pointer activation
+     * (pointer-events: none), so the component's own activation handler must
+     * also check the attribute and no-op on Enter and Space, since CSS cannot
+     * prevent keyboard activation.
+     *
+     * Expresses disablement through the dedicated disabled colour tokens
+     * (content.disabled, border.disabled) rather than a blanket opacity: a
+     * uniform dim composites everything the element paints, including a
+     * focusRing outline on the aria-disabled branch.
+     * `color` also carries inline icons (reset.css's `svg:not([fill])
+     * { fill: currentcolor }`); `border-color` is inert on a borderless
+     * element. Deliberately silent on `background-color`: the atom cannot
+     * know whether the element is a filled control, a ghost button, a link
+     * or a label, so a filled control's disabled fill is a component
+     * obligation, not this atom's.
+     *
+     * No `cursor` here: `pointer-events: none` stops the element from ever being hit-tested,
+     * so a `cursor` declared on it can never paint (the browser resolves the pointer against
+     * whatever is underneath instead). That is equally true of reset.css's
+     * `[disabled], [aria-disabled='true'] { cursor: not-allowed }` on an element carrying this
+     * atom: while the atom applies, no cursor paints on that element at all. The reset rule
+     * serves the disabled elements that do NOT carry this atom. What is removed here is a
+     * declaration that never rendered, so nothing a user sees changes.
+     */
+    readonly disabledState: {
+        readonly declarations: {};
+        readonly pseudos: {
+            readonly ':disabled, [aria-disabled="true"]': {
+                readonly color: "var(--nave-color-content-disabled)";
+                readonly 'border-color': "var(--nave-color-border-disabled)";
+                readonly 'pointer-events': "none";
+            };
+        };
+    };
+    readonly rounded: {
+        readonly declarations: {
+            readonly 'border-radius': "var(--nave-radius-control)";
+        };
+    };
+    readonly roundedCard: {
+        readonly declarations: {
+            readonly 'border-radius': "var(--nave-radius-card)";
+        };
+    };
+    readonly roundedFull: {
+        readonly declarations: {
+            readonly 'border-radius': "var(--nave-radius-full)";
+        };
+    };
+    readonly border: {
+        readonly declarations: {
+            readonly border: "var(--nave-border-width-sm) solid var(--nave-color-border-default)";
+        };
+    };
+    readonly overflowHidden: {
+        readonly declarations: {
+            readonly overflow: "hidden";
+        };
+    };
+    readonly overflowAuto: {
+        readonly declarations: {
+            readonly overflow: "auto";
+        };
+    };
+    readonly transition: {
+        readonly declarations: {
+            readonly 'transition-property': "color, background-color, border-color, opacity, box-shadow";
+            readonly 'transition-duration': "var(--nave-motion-duration-base)";
+            readonly 'transition-timing-function': "var(--nave-motion-easing-standard)";
+        };
+    };
+    /**
+     * container
+     * Establishes an inline-size containment context.
+     * Apply to the wrapper of any component that uses @container queries.
+     * Required — container queries have no effect without a containment ancestor.
+     */
+    readonly container: {
+        readonly declarations: {
+            readonly 'container-type': "inline-size";
+        };
+    };
+    /**
+     * hidePhoneOnly
+     * Hidden on phone. Visible on tablet portrait and above.
+     * Use for: elements that have a dedicated phone replacement.
+     */
+    readonly hidePhoneOnly: {
+        readonly declarations: {};
+        readonly media: {
+            readonly "(width < 37.5em)": {
+                readonly declarations: {
+                    readonly display: "none";
+                };
+            };
+        };
+    };
+    /**
+     * hideTabletPortraitUp
+     * Hidden on tablet portrait and above. Visible on phone only.
+     * Use for: mobile-only elements (hamburger triggers, bottom nav, etc.)
+     */
+    readonly hideTabletPortraitUp: {
+        readonly declarations: {};
+        readonly media: {
+            readonly "(width >= 37.5em)": {
+                readonly declarations: {
+                    readonly display: "none";
+                };
+            };
+        };
+    };
+    /**
+     * hideTabletLandscapeUp
+     * Hidden on tablet landscape and above. Visible on phone and tablet portrait.
+     * Use for: compact tablet navigation that gives way to a full desktop nav.
+     */
+    readonly hideTabletLandscapeUp: {
+        readonly declarations: {};
+        readonly media: {
+            readonly "(width >= 56.25em)": {
+                readonly declarations: {
+                    readonly display: "none";
+                };
+            };
+        };
+    };
+    /**
+     * hideDesktopUp
+     * Hidden on desktop and above. Visible on tablet landscape and below.
+     * Use for: mobile/tablet UI that has a desktop structural replacement.
+     */
+    readonly hideDesktopUp: {
+        readonly declarations: {};
+        readonly media: {
+            readonly "(width >= 75em)": {
+                readonly declarations: {
+                    readonly display: "none";
+                };
+            };
+        };
+    };
+    /**
+     * stackPhoneOnly
+     * flex-direction: column on phone. Assumes the element is display: flex.
+     * Use for: button groups, form rows, icon+label pairs that stack on mobile.
+     */
+    readonly stackPhoneOnly: {
+        readonly declarations: {};
+        readonly media: {
+            readonly "(width < 37.5em)": {
+                readonly declarations: {
+                    readonly 'flex-direction': "column";
+                };
+            };
+        };
+    };
+    /**
+     * wFullPhoneOnly
+     * width: 100% on phone only.
+     * Use for: buttons and inputs that should be full-width on mobile.
+     */
+    readonly wFullPhoneOnly: {
+        readonly declarations: {};
+        readonly media: {
+            readonly "(width < 37.5em)": {
+                readonly declarations: {
+                    readonly width: "100%";
+                };
+            };
+        };
+    };
+};
+type AtomName = keyof typeof atoms;
+/**
+ * Converts a camelCase atom name to its nave-kebab-case CSS class name.
+ * focusRing → nave-focus-ring
+ */
+declare const toClassName: (name: AtomName) => string;
+/**
+ * Map of atom name → global CSS class name.
+ * Used by cx() and the PostCSS plugin.
+ * Only covers Nave built-in atoms — consumer atoms are @nave-directive only.
+ */
+declare const atomClassMap: Record<AtomName, string>;
+
+export { type AtomDefinition, type AtomName, atomClassMap, atoms, toClassName };

package/dist/atoms.js

@@ -0,0 +1 @@
+export { atomClassMap, atoms, toClassName } from './chunk-BVON7XKC.js';