neba 1.7.0 → 1.8.0

package/dist/components/header/Header.d.ts

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAlign, NebaColor, NebaDensity, NebaElevation, NebaPosition, NebaSize, NebaVariant } from '../../types.js';
+export interface HeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'color' | 'title'> {
+    /**
+     * The leading slot: the logo, the product's name, the thing that is the same
+     * on every page. An [AppLogo] is what usually goes here.
+     *
+     * It is a slot rather than the first of `children` because the three regions
+     * of a bar are laid out against each other — the middle can only be centred
+     * in the bar if the two ends are measured — and a caller writing three
+     * wrappers by hand is a caller whose header drifts from the next one.
+     */
+    brand?: React.ReactNode;
+    /**
+     * The trailing slot: the account menu, the theme switch, the call to action.
+     * Laid out end-aligned, so a row of buttons needs no wrapper of its own.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Where the middle slot sits.
+     *
+     * - `start` — packed against the brand, taking whatever is left. The
+     *   arrangement of an application's toolbar, and the default.
+     * - `center` — centred in the bar itself, not in the space left over. The two
+     *   ends are given equal shares for this, so the middle stays on the bar's
+     *   own midline however wide the brand is.
+     * - `end` — packed against the actions.
+     * @default 'start'
+     */
+    align?: NebaAlign;
+    /**
+     * How the bar sits in the page's scroll, spelled the way CSS spells it.
+     * `sticky` — the default — holds it against the top of the window once the
+     * page has scrolled to it, while leaving it in the flow so nothing has to be
+     * padded out of its way. `fixed` takes it out of the flow entirely, which a
+     * [PageLayout] answers by reserving its height. `static` lets it scroll away.
+     * @default 'sticky'
+     */
+    position?: NebaPosition;
+    /**
+     * Weight of the sheet, said the way a *container* says it: the bar is never
+     * dyed, because what is on it arrives with colours of its own.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /**
+     * The bar's scale — its height floor, its gutter and the air around its
+     * slots. As on Box, `size` here is the size of the *sheet*.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /**
+     * Drop shadow depth. `0` (the default) is flat: a header is attached to the
+     * top of the window rather than floating over the middle of it, and `divider`
+     * is what separates it from the content.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Draws a hairline along the bottom edge, against the content the bar is
+     * over. On by default, for BottomNavigation's reason: a bar pinned over a
+     * scrolling page has content passing underneath it at every moment, and a
+     * translucent sheet with nothing marking its edge reads as part of that.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Holds the row of slots to a measure and centres it, while the sheet itself
+     * still spans the window. On the same ladder Container's own `maxWidth` uses,
+     * so a header and the [Container] under it line up on the same edge.
+     * @default 'none'
+     */
+    maxWidth?: NebaSize | 'none';
+    /** The gutter down each side of the row. @default true */
+    padded?: boolean;
+    /**
+     * The name the bar is announced by. Worth writing when a page has more than
+     * one `<header>` in it — an article's own header and the site's — because
+     * "banner" twice tells a reader which is which not at all.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<header>`. Base UI's own escape hatch, and
+     * rarely what you want: the bar at the top of a page is a banner, and the tag
+     * is what says so to a search engine and to a screen reader's landmark list.
+     */
+    render?: useRender.RenderProp;
+    /** The middle slot. */
+    children?: React.ReactNode;
+}
+/**
+ * The bar across the top of a page.
+ *
+ * A real `<header>`, which is the whole reason it is a component rather than a
+ * row of divs: at the top level of a document that tag is the `banner`
+ * landmark, and it is what a screen reader's landmark list, a reader mode and a
+ * search engine's understanding of the page are all built out of.
+ *
+ * Its three slots are props rather than compound sub-components, for Card's and
+ * Dialog's reason: the arrangement is fixed — brand, middle, actions — and what
+ * a caller wants to decide is what goes in each. That the middle can be centred
+ * on the bar's own midline is only possible because the ends are the
+ * component's to measure.
+ *
+ * Inside a [PageLayout] it also registers itself, so a sidebar that holds its
+ * place knows how far down the window to start. Outside one it is simply a bar,
+ * and everything above still works.
+ */
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/header/Header.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{boxPaddingXClasses as t}from"../box/Box.js";import{PageLayoutContext as s}from"../../internal/page-layout.js";import{cx as i,hasContent as l,surfaceClasses as m,surfaceSlots as o,transitionClasses as d}from"../../internal/styles.js";const c={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-20"},x={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},f={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},p={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"},u={solid:[m,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[m,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},g={static:"",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},h={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},b={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const Header=/*@__PURE__*/r.forwardRef(function({brand:m,actions:v,align:w="start",position:y="sticky",variant:j="outline",size:N="md",color:k="primary",density:z="default",elevation:C=0,divider:B=!0,maxWidth:H="none",padded:R=!0,label:W,render:q,className:A,style:D,children:E,...F},G){const I=r.useContext(s),{register:J}=I,K=r.useCallback(e=>{J("header",e),"function"==typeof G?G(e):G&&(G.current=e)},[J,G]),L=i("w-full min-w-0",u[j],B?"border-b [border-color:var(--n-line)]":"",g[y],d,A);return n({render:q??e("header",{}),ref:K,props:{"aria-label":W,className:L,style:{...o(k,C),...D},children:a("div",{className:i("flex w-full items-center",c[N],f[N],R?t[z][N]:"","none"===H?"":i(p[H],"mx-auto")),children:[l(m)?e("div",{className:i("flex min-w-0 items-center",h[w],x[N]),children:m}):"center"===w?e("div",{"aria-hidden":"true",className:h[w]}):null,l(E)?e("div",{className:i(b[w],x[N]),children:E}):null,l(v)?e("div",{className:i("flex min-w-0 items-center justify-end",h[w],x[N]),children:v}):"center"===w?e("div",{"aria-hidden":"true",className:h[w]}):null]}),...F}})});

package/dist/components/header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header.js';
+export type { HeaderProps } from './Header.js';

package/dist/components/header/index.js

@@ -0,0 +1 @@
+export{Header}from"./Header.js";

package/dist/components/how-to-steps/HowToSteps.d.ts

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaOrientation, NebaSize, NebaTransition, NebaVariant } from '../../types.js';
+/** One step of the guide. */
+export interface HowToStep {
+    /** The heading, shown both in the list and over the step's own body. */
+    title: React.ReactNode;
+    /**
+     * A glyph before the title, over the step's own body.
+     *
+     * Only there, and not in the list: a row there already carries a numbered
+     * disc, and a glyph beside it is a second mark making the same claim about
+     * the same row. What an icon is good for is telling a reader *what kind* of
+     * step this is — a terminal, a file, a warning — which is a thing to say
+     * once, where the step is stated at full size.
+     */
+    icon?: React.ReactNode;
+    /** What the reader has to do. Anything — prose, a [CodeBlock], a screenshot. */
+    content?: React.ReactNode;
+    /** A picture above the content, for a step that is easier shown than said. */
+    image?: string;
+    /** What that picture says for a reader who cannot see it. Defaults to `title`. */
+    imageAlt?: string;
+}
+export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'content'> {
+    /**
+     * The steps, in the order they are to be done.
+     *
+     * An array rather than children, and this is the one place the component
+     * genuinely could not be built the other way: the list beside the body and
+     * the body itself are two renderings of the same data, and the panel is sized
+     * against *every* step rather than the one showing. A component that had to
+     * find its steps among its children could do neither.
+     */
+    steps: HowToStep[];
+    /** The guide's own heading, over both columns. */
+    title?: React.ReactNode;
+    /** Which step is showing. Pass it to drive the guide yourself. */
+    step?: number;
+    /** Where an uncontrolled guide starts. @default 0 */
+    defaultStep?: number;
+    /** Fires with the index whenever the step changes, however it changed. */
+    onStepChange?: (step: number) => void;
+    /** Whether the guide is finished. Pass it to drive that yourself too. */
+    completed?: boolean;
+    /** Whether an uncontrolled guide starts finished. @default false */
+    defaultCompleted?: boolean;
+    /** Fires when the guide is finished, and again when it is started over. */
+    onCompletedChange?: (completed: boolean) => void;
+    /**
+     * Which way the list of steps runs.
+     *
+     * `vertical` is the default: the numbers run down one side with the body
+     * beside them, which takes any number of steps and any amount to say about
+     * each. Below `sm` it stacks, because a rail and a paragraph side by side on
+     * a phone is two columns too narrow for either. `horizontal` runs the numbers
+     * across the top, and is only honest while every title is short.
+     * @default 'vertical'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * How tall the guide may get before it scrolls. A number is pixels.
+     *
+     * Both the list and the body scroll inside it rather than the sheet growing.
+     * A guide with twenty steps is what this is for, and twenty rows that pushed
+     * the buttons off the bottom of the card would be a guide with no way
+     * forward.
+     */
+    maxHeight?: number | string;
+    /**
+     * How wide the list is while it is a column. A number is pixels.
+     * @default '15rem'
+     */
+    railWidth?: number | string;
+    /**
+     * The row of buttons under the body. Off, the list is the only way to move,
+     * which is what a guide inside a page that has navigation of its own wants.
+     * @default true
+     */
+    navigation?: boolean;
+    /**
+     * Draws a hairline between the list and the body — down the inner edge while
+     * they are two columns, along the bottom of the list once they have stacked.
+     *
+     * On by default. The two are different kinds of thing — one is a map, the
+     * other is the place the map points at — and space alone leaves that to be
+     * inferred from a gap that a narrow screen is about to take away.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * How a step arrives when the reader moves to it, from the same vocabulary
+     * `transition` uses everywhere: an effect name, or the object form for the
+     * duration, the easing and the rest. `'none'` turns it off.
+     *
+     * It runs on the panel rather than on anything that is pressed, which is what
+     * keeps it inside the library's rule against moving a control: the buttons
+     * and the list rows hold still, and what animates is the content they
+     * changed.
+     *
+     * A reduced-motion preference switches it off entirely, as it does every
+     * other effect in the library.
+     * @default 'fade'
+     */
+    transition?: NebaTransition | 'none';
+    /**
+     * Whether there is a finished state at all.
+     *
+     * On, the last step's button says "Done" and pressing it replaces the body
+     * with a panel that says so and offers to start again. Off, the last step is
+     * simply the last step.
+     * @default true
+     */
+    completion?: boolean;
+    /** What the finished panel says, in place of the `locale`'s own sentence. */
+    completedContent?: React.ReactNode;
+    /**
+     * Weight of the sheet, said the way a *container* says it: the guide is never
+     * dyed, because what is in it arrives with colours of its own.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** @default 'md' */
+    size?: NebaSize;
+    /** The family the numbers, the connector and the buttons wear. @default 'primary' */
+    color?: NebaColor;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /**
+     * Which language the guide's own words are in — the four buttons and the
+     * sentence at the end. A BCP 47 tag such as `ko`, `pt-BR` or `zh-Hant`;
+     * unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** The four button labels, written out over the `locale`. */
+    previousLabel?: string;
+    nextLabel?: string;
+    doneLabel?: string;
+    restartLabel?: string;
+}
+/**
+ * A guide the reader walks through: numbered steps down one side, one step's
+ * instructions at a time beside them, and a way forward under those.
+ *
+ * It is [Timeline]'s interactive sibling, and the two are deliberately not one
+ * component. A Timeline *reports* — this happened, then this did, and here is
+ * where things have got to — and nothing in it is pressed. A HowToSteps *asks*:
+ * the reader is meant to do the thing on the screen and then say they have,
+ * which needs a current step, a way to change it, and an end.
+ *
+ * Two things about how it is built are load-bearing rather than incidental.
+ *
+ * **Every step's body is rendered into the same grid cell**, with the ones not
+ * showing left in the document, `invisible` and `inert`. The panel is therefore
+ * as tall as the tallest step at every moment, so moving between a one-line
+ * step and a five-line one does not resize the card the guide sits in — which,
+ * on a page the reader has already scrolled, moves everything under it. The
+ * finished panel is in that cell too, for the same reason.
+ *
+ * **The list is a list of buttons and not a tablist.** A stepper looks like
+ * tabs and is not one: the panels are ordered, the reader is expected to arrive
+ * at them in that order, and `aria-current="step"` is the attribute that says
+ * so. A tablist's roving focus would tell a screen reader that these are
+ * interchangeable views of one thing.
+ */
+export declare const HowToSteps: React.ForwardRefExoticComponent<HowToStepsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/how-to-steps/HowToSteps.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as l from"react";import{Button as r}from"../button/Button.js";import{boxPaddingClasses as a}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{stepsMessages as m,useMessages as d}from"../../internal/i18n.js";import{transitionProps as p}from"../../internal/animate.js";import{cx as f,hasContent as x,iconClasses as u,metaTextClasses as b,radiusClasses as h,sheetBodyClasses as g,sheetSectionGapClasses as v,sheetTitleClasses as N,srOnlyClasses as w,surfaceClasses as k,surfaceSlots as y,toLength as j,transitionClasses as C}from"../../internal/styles.js";const z={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},S={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},L={solid:[k,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[k,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function I(e,t){return e.replace(/\{(\w+)\}/g,(e,n)=>t[n]??e)}function R(e){return"string"==typeof e?e:""}export const HowToSteps=/*@__PURE__*/l.forwardRef(function({steps:k,title:B,step:_,defaultStep:H=0,onStepChange:M,completed:T,defaultCompleted:$=!1,onCompletedChange:A,orientation:E="vertical",maxHeight:F,railWidth:W="15rem",navigation:q=!0,divider:D=!0,transition:G="fade",completion:J=!0,completedContent:K,variant:O="outline",size:P="md",color:Q="primary",density:U="default",elevation:V=0,locale:X,previousLabel:Y,nextLabel:Z,doneLabel:ee,restartLabel:te,className:ne,style:le,...re},ae){const ie=d(m,X),oe=l.useId(),[se,ce]=l.useState(H),[me,de]=l.useState($),pe=void 0!==_,fe=void 0!==T,xe=k.length,ue=Math.min(Math.max(pe?_:se,0),Math.max(xe-1,0)),be=J&&(fe?T:me),he=void 0!==F,ge="vertical"===E,ve=l.useRef(null),Ne=l.useRef(null);if(l.useEffect(()=>{const e=ve.current,t=Ne.current;if(!e||!t)return;const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();ge?l.top<n.top?e.scrollTop-=n.top-l.top:l.bottom>n.bottom&&(e.scrollTop+=l.bottom-n.bottom):l.left<n.left?e.scrollLeft-=n.left-l.left:l.right>n.right&&(e.scrollLeft+=l.right-n.right)},[ue,ge]),0===xe)return null;const we=(e,t=!1)=>{fe||de(t),be!==t&&A?.(t),t||(pe||ce(e),e!==ue&&M?.(e))},ke=0===ue,ye=ue===xe-1,je="none"===G?null:p(G),Ce=t=>{const n=be||t<ue,l=!be&&t===ue;return e("span",{"aria-hidden":"true",className:f("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",z[P].text,C,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":l?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},ze=e("ol",{ref:ve,"aria-label":ie.steps,className:f("m-0 flex list-none p-0",ge?"flex-col":"flex-row",S[U][P],he&&ge?"min-h-0 overflow-y-auto overscroll-contain":"",ge?"":"overflow-x-auto overscroll-contain"),children:k.map((n,l)=>{const r=be||l<ue,a=!be&&l===ue;return t("li",{ref:a?Ne:void 0,className:f("relative",ge?"":"min-w-0 flex-1"),children:[l<xe-1?e("span",{"aria-hidden":"true",className:f("absolute",C,r?"bg-(--n-fill)":"bg-(--n-line)",ge?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>we(l),"aria-current":a?"step":void 0,className:f("flex w-full cursor-pointer items-center p-1 text-start",ge?"gap-3":"flex-col gap-1.5 text-center",h.sm,"hover:bg-(--n-soft)",C,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),children:[Ce(l),e("span",{className:f("min-w-0",ge?"truncate":"",b[P],a?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title}),e("span",{className:w,children:I(ie.step,{index:String(l+1),title:R(n.title)})})]})]},l)})}),Se=t("div",{className:f("grid flex-1 grid-cols-1",he?"min-h-0":""),children:[k.map((n,l)=>{const r=be||l!==ue;return t("div",{"aria-hidden":r,inert:r||void 0,className:f("col-start-1 row-start-1 min-w-0",he?"overflow-y-auto overscroll-contain":"",r?"invisible":je?.className??""),style:r?void 0:je?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[x(n.icon)?e("span",{"aria-hidden":"true",className:f("flex h-[1lh] shrink-0 items-center text-(--n-accent)",N[P],u),children:n.icon}):null,e("h4",{className:f("m-0 min-w-0 flex-1 font-medium",N[P]),children:n.title}),e("span",{className:f("shrink-0 text-(--neba-muted-fg) tabular-nums",b[P]),children:I(ie.position,{index:String(l+1),total:String(xe)})})]}),n.image?e("img",{src:n.image,alt:n.imageAlt??R(n.title),className:f("mb-3 max-h-72 w-full object-contain",h[P])}):null,x(n.content)?e("div",{className:f("min-w-0",g[P]),children:n.content}):null]},l)}),J?t("div",{"aria-hidden":!be,inert:!be||void 0,className:f("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",be?je?.className??"":"invisible"),style:be?je?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:f("m-0 font-medium",g[P]),children:K??ie.completed})]}):null]});return t("div",{ref:ae,"aria-labelledby":x(B)?oe:void 0,className:f("flex min-w-0 flex-col",h[P],a[U][P],v[P],L[O],C,ne),style:{...y(Q,V),"--n-fill":`var(--neba-${Q}-fill)`,"--n-on-solid":`var(--neba-${Q}-on-solid)`,"--n-step-mark":z[P].box,"--n-step-rail":j(W),...he?{maxHeight:j(F)}:null,...le},...re,children:[x(B)?e("h3",{id:oe,className:f("m-0 shrink-0 font-medium",N[P]),children:B}):null,t("div",{className:f("flex min-w-0 flex-1 flex-col",he?"min-h-0":"",ge?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:f("flex min-w-0 flex-col",he?"min-h-0":"",ge?"sm:w-(--n-step-rail) sm:shrink-0":"",D?ge?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",D?"[border-color:var(--n-line)]":""),children:ze}),t("div",{className:f("flex min-w-0 flex-1 flex-col",he?"min-h-0":"",v[P]),children:[Se,q?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:be?e(r,{size:P,variant:"outline",color:Q,startIcon:e(s,{}),onClick:()=>we(0),children:te??ie.restart}):t(n,{children:[e(r,{size:P,variant:"outline",color:Q,disabled:ke,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>we(ue-1),children:Y??ie.previous}),e(r,ye&&J?{size:P,variant:"solid",color:Q,startIcon:e(i,{}),onClick:()=>we(ue,!0),children:ee??ie.done}:{size:P,variant:"solid",color:Q,disabled:ye,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>we(ue+1),children:Z??ie.next})]})}):null]})]})]})});

package/dist/components/how-to-steps/index.d.ts

@@ -0,0 +1,2 @@
+export { HowToSteps } from './HowToSteps.js';
+export type { HowToStep, HowToStepsProps } from './HowToSteps.js';

package/dist/components/how-to-steps/index.js

@@ -0,0 +1 @@
+export{HowToSteps}from"./HowToSteps.js";

package/dist/components/page-layout/PageLayout.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { type PageLayoutCollapse, type PageLayoutScroll, type PageLayoutSpan } from '../../internal/page-layout.js';
+import type { NebaColor } from '../../types.js';
+export type { PageLayoutCollapse, PageLayoutScroll, PageLayoutSpan } from '../../internal/page-layout.js';
+export interface PageLayoutProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** The bar across the top. A [Header], usually. */
+    header?: React.ReactNode;
+    /** The sheet at the end. A [Footer], usually. */
+    footer?: React.ReactNode;
+    /**
+     * The leading column — the left of an English page, the right of an Arabic
+     * one. A [Sidebar], which is told which end it is on and needs no `side` prop
+     * of its own here.
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * The trailing column, for the layouts that have two: navigation down one
+     * side and a table of contents, an inspector or a filter panel down the
+     * other. Each is a Sidebar with its own width, its own drawer and its own
+     * trigger.
+     */
+    endSidebar?: React.ReactNode;
+    /**
+     * Which of the header and the sidebars takes the top corner.
+     *
+     * - `full` — the header spans the whole width and the sidebars begin
+     *   underneath it. The arrangement of a website. The default.
+     * - `content` — the sidebars run the full height of the window and the header
+     *   sits between them, belonging to the view rather than to the site. The
+     *   arrangement of an application.
+     * @default 'full'
+     */
+    headerSpan?: PageLayoutSpan;
+    /**
+     * The same question for the footer, and it is worth answering separately: a
+     * dashboard with a full-height navigation rail still usually wants its
+     * copyright line under the content rather than under the rail.
+     * @default 'full'
+     */
+    footerSpan?: PageLayoutSpan;
+    /**
+     * What scrolls: the document, or only the region between the header and the
+     * footer.
+     *
+     * `page` is the default and is what almost every page wants — the browser's
+     * own address bar hides on a phone, the scroll position is restored on a back
+     * navigation, and the header holds its place with `position: sticky` without
+     * anything having to be padded out of its way. Reach for `content` when the
+     * page is a workspace rather than a document.
+     * @default 'page'
+     */
+    scroll?: PageLayoutScroll;
+    /**
+     * How tall the layout is.
+     *
+     * - `viewport` — the window's, which is what a page wants: a short page still
+     *   pushes its footer to the bottom of the screen, and with `scroll="content"`
+     *   the layout is exactly one screen tall. The default.
+     * - `auto` — its parent's, for a layout that is not the page. An app shell
+     *   inside a [Mockup]'s screen, a preview, a pane of a larger tool.
+     * - a length — a number in pixels, or any CSS length.
+     *
+     * It sets a floor while the page scrolls and an exact height while only the
+     * content does, which is the same difference `scroll` makes everywhere else.
+     * @default 'viewport'
+     */
+    height?: 'viewport' | 'auto' | number | string;
+    /**
+     * The window width below which the sidebars stop being columns and become
+     * drawers, with a [SidebarTrigger] as the way to open them. `none` keeps them
+     * as columns at every width.
+     * @default 'md'
+     */
+    collapseBelow?: PageLayoutCollapse;
+    /**
+     * Whether the leading sidebar's drawer is open. Use with
+     * `onSidebarOpenChange` for a controlled layout — a route change that should
+     * close the drawer behind it, a state the app already stores.
+     */
+    sidebarOpen?: boolean;
+    /** Which state it starts in. @default false */
+    defaultSidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    /** The same three for the trailing sidebar. */
+    endSidebarOpen?: boolean;
+    defaultEndSidebarOpen?: boolean;
+    onEndSidebarOpenChange?: (open: boolean) => void;
+    /**
+     * Puts a "Skip to content" link first in the document, drawn only while it
+     * holds the focus.
+     *
+     * On by default, and it is the one thing here that is not a style decision. A
+     * keyboard reader arriving on a page whose navigation holds forty links has
+     * to walk past all forty on every page before reaching the article, and this
+     * is the one link that spares them. It costs a sighted reader nothing,
+     * because it is invisible until it is tabbed to.
+     * @default true
+     */
+    skipLink?: boolean;
+    /** What that link says. Defaults to the `locale`'s word for it. */
+    skipLabel?: string;
+    /**
+     * The `id` the skip link jumps to, put on the `<main>`.
+     * @default 'main'
+     */
+    mainId?: string;
+    /** Anything else the `<main>` needs — a `className`, an `aria-label`. */
+    mainProps?: Omit<React.ComponentPropsWithoutRef<'main'>, 'id' | 'children'>;
+    /**
+     * Which language the layout's own words are in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`. Inherited by every Sidebar and SidebarTrigger inside
+     * it, so it is written once per page.
+     */
+    locale?: string;
+    /** The colour family the skip link and the focus rings light up in. @default 'primary' */
+    color?: NebaColor;
+    /** The page. Rendered inside the `<main>`. */
+    children?: React.ReactNode;
+}
+/**
+ * The skeleton a page is hung on: a header, a footer, one sidebar or two, and
+ * the content between them.
+ *
+ * What it is really for is the landmarks. A page assembled out of divs is a
+ * page a screen reader offers as one undifferentiated region and a search
+ * engine reads as one undifferentiated blob; the same page built out of
+ * `<header>`, `<nav>`, `<aside>`, `<main>` and `<footer>` is a page with a
+ * table of contents. Those tags come from the four components this one arranges
+ * — it draws no surface of its own and contributes exactly one element to the
+ * document, plus the `<main>` and the skip link that jumps to it.
+ *
+ * The arrangement is flexbox and media queries, which is deliberate rather than
+ * incidental: everything that decides where a column goes is stated in CSS, so
+ * the layout is right in the first frame the browser paints and right in a page
+ * with JavaScript turned off. The only things measured are the header's and the
+ * footer's heights, and only because a sidebar that holds its place has to
+ * start below a bar whose height nobody but the bar knows.
+ *
+ * It draws no gutter and no measure. That is [Container]'s job, and a layout
+ * that also did it would be a second spelling of one idea — put a Container
+ * inside, where a page can have a wide dashboard on one route and a narrow
+ * article on the next.
+ */
+export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/page-layout/PageLayout.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{layoutMessages as l,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const d=["header","footer"];export const PageLayout=/*@__PURE__*/o.forwardRef(function({header:f,footer:p,sidebar:h,endSidebar:m,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:w="md",sidebarOpen:g,defaultSidebarOpen:S=!1,onSidebarOpenChange:k,endSidebarOpen:C,defaultEndSidebarOpen:P=!1,onEndSidebarOpenChange:O,skipLink:N=!0,skipLabel:j,mainId:$="main",mainProps:R,locale:z,color:E="primary",className:L,style:B,children:H,...M},_){const I=t(l,z),[T,q]=o.useState(S),[A,D]=o.useState(P),F=o.useMemo(()=>({start:g??T,end:C??A}),[g,T,C,A]),G=o.useCallback((e,n)=>{if("start"===e)return void 0===g&&q(n),void k?.(n);void 0===C&&D(n),O?.(n)},[g,C,k,O]),J=o.useRef(null),K=o.useCallback(e=>{J.current=e,"function"==typeof _?_(e):_&&(_.current=e)},[_]),Q=o.useRef({header:null,footer:null}),U=o.useRef(null),V=o.useCallback(()=>{const e=J.current;if(e)for(const n of d){const o=Q.current[n],l="header"===n?v:x;if(!o){e.style.setProperty(`--n-layout-${n}`,"0px"),e.style.setProperty(`--n-layout-${n}-inset`,"0px");continue}const t=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${n}`,s&&"full"===l?r:"0px"),e.style.setProperty(`--n-layout-${n}-inset`,"fixed"===t?r:"0px")}},[v,x]),W=o.useCallback(()=>{const e=U.current;if(e){e.disconnect();for(const n of d){const o=Q.current[n];o&&e.observe(o)}}V()},[V]);o.useEffect(()=>(U.current=new ResizeObserver(()=>V()),W(),()=>{U.current?.disconnect(),U.current=null}),[V,W]);const X=o.useCallback((e,n)=>{Q.current[e]=n,W()},[W]),Y=o.useMemo(()=>({present:!0,register:X,collapseBelow:w,open:F,setOpen:G,scroll:y,locale:z}),[X,w,F,G,y,z]),Z="content"===y,ee=c("viewport"===b||"auto"===b?void 0:b),ne=void 0!==ee?"":"auto"===b?Z?"h-full":"min-h-full":Z?"h-dvh":"min-h-dvh",oe=u(f)?f:null,le=u(p)?p:null;return e(r.Provider,{value:Y,children:n("div",{ref:K,className:i("relative flex w-full flex-col",Z?"overflow-hidden":"",ne,"full"===v?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===x?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",L),style:void 0===ee?B:{...Z?{height:ee}:{minHeight:ee},...B},...M,children:[N?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:a(E,2,"solid"),children:j??I.skipToContent}):null,"full"===v?oe:null,n("div",{className:i("flex w-full flex-1",Z?"min-h-0":""),children:[u(h)?e(s.Provider,{value:"start",children:h}):null,n("div",{className:i("flex min-w-0 flex-1 flex-col",Z?"min-h-0":"","content"===v?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===x?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===v?oe:null,e("main",{...R,id:$,className:i("min-w-0 flex-1",Z?"min-h-0 overflow-y-auto":"",R?.className),children:H}),"content"===x?le:null]}),u(m)?e(s.Provider,{value:"end",children:m}):null]}),"full"===x?le:null]})})});

package/dist/components/page-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { PageLayout } from './PageLayout.js';
+export type { PageLayoutCollapse, PageLayoutProps, PageLayoutScroll, PageLayoutSpan } from './PageLayout.js';

package/dist/components/page-layout/index.js

@@ -0,0 +1 @@
+export{PageLayout}from"./PageLayout.js";

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import type { PageLayoutCollapse, SidebarSide } from '../../internal/page-layout.js';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../../types.js';
+export type { SidebarSide } from '../../internal/page-layout.js';
+export interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'color' | 'title'> {
+    /**
+     * Which end of the band it takes. Logical rather than physical — `start` is
+     * the left of an English page and the right of an Arabic one — because a
+     * navigation rail is beside the text it belongs to in every writing
+     * direction.
+     *
+     * Inside a [PageLayout] this is already decided by which slot the sidebar was
+     * handed to, and setting it again is only a way of disagreeing with the
+     * layout.
+     * @default 'start'
+     */
+    side?: SidebarSide;
+    /**
+     * How wide the column is — a number in pixels or any CSS length. Left out, it
+     * is the width `size` implies.
+     *
+     * With `resizable` it is only the width the sidebar *starts* at: dragging
+     * writes over it, and the caller hears about it through `onResize`.
+     */
+    width?: number | string;
+    /** How narrow it may be dragged. @default 160 */
+    minWidth?: number | string;
+    /** And how wide. @default 480 */
+    maxWidth?: number | string;
+    /**
+     * Lets the reader drag the inner edge to change the column's width.
+     *
+     * Off by default. A sidebar that can be resized is a sidebar whose width is
+     * the reader's to remember, which means a caller who turns this on usually
+     * also wants to store what `onResizeEnd` reports.
+     * @default false
+     */
+    resizable?: boolean;
+    /** Fires with the width in pixels while the edge is being dragged. */
+    onResize?: (width: number) => void;
+    /** Fires once, with the same number, when it is let go. */
+    onResizeEnd?: (width: number) => void;
+    /**
+     * The window width below which the sidebar stops being a column and becomes a
+     * drawer that is opened — with a [SidebarTrigger] somewhere on the page as
+     * the way to open it. `none` keeps it a column at every width.
+     *
+     * Defaults to the [PageLayout]'s own `collapseBelow`, and to `none` outside
+     * one: a sidebar that collapsed with nothing on the page able to bring it
+     * back would be a sidebar the reader has lost.
+     */
+    collapseBelow?: PageLayoutCollapse;
+    /**
+     * Whether the drawer is open. Only meaningful once the sidebar has collapsed;
+     * a column is not opened, it is there.
+     *
+     * Inside a [PageLayout] the layout owns this — it is what a SidebarTrigger
+     * anywhere on the page talks to — so control it there rather than here.
+     * `onOpenChange` still fires either way.
+     */
+    open?: boolean;
+    /** Which state it starts in, for an uncontrolled standalone sidebar. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the column holds its place while the page scrolls past it.
+     *
+     * On by default, and it costs nothing when it is not needed: with the page
+     * scrolling it becomes a `sticky` column as tall as what is left of the
+     * window under the header, and with only the content scrolling it is already
+     * as tall as the layout and this changes nothing.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * The heading, drawn only while the sidebar is a drawer. A column has the
+     * page around it to say what it is; a panel that has covered the page does
+     * not.
+     */
+    title?: React.ReactNode;
+    /**
+     * Weight of the sheet, said the way a *container* says it: the panel is never
+     * dyed, because what is on it arrives with colours of its own.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** The panel's scale — its default width and the air around its content. @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /**
+     * Draws a hairline down the inner edge — the one facing the content. The
+     * outer edge is against the window, where there is nothing on the other side
+     * to be separated from.
+     * @default true
+     */
+    divider?: boolean;
+    /** The gutter and the air above and below the content. @default true */
+    padded?: boolean;
+    /**
+     * The name the region is announced by. Every `<aside>` on a page should have
+     * one, and a page with two sidebars *must*, or a screen reader offers two
+     * regions called "complementary".
+     *
+     * Defaults to the `locale`'s word for "Sidebar".
+     */
+    label?: string;
+    /**
+     * Which language the sidebar's own words are in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`. Unsupported tags fall back to English. Inherited from
+     * the [PageLayout] when there is one.
+     */
+    locale?: string;
+    /** Everything in it: a nav, a filter panel, a table of contents. */
+    children?: React.ReactNode;
+}
+/**
+ * A column beside the page's content, and a drawer once the window is too
+ * narrow to hold one.
+ *
+ * Two presentations of one panel, exactly as [Drawer] is: above `collapseBelow`
+ * it is an `<aside>` in the layout that the content is laid out around, and
+ * below it the same children are a drawer over a scrim with a focus trap, an
+ * Escape and a way back to the trigger. They are one component because they are
+ * one thing — a caller should not have to swap components at a breakpoint — and
+ * because the children only exist once either way, so nothing inside is
+ * rendered twice into the document for a screen reader to read twice.
+ *
+ * Which of the two is showing is a media query, and it is answered in CSS for
+ * the first paint and in JavaScript from then on. That split is deliberate: the
+ * markup a server sends is the column, so a narrow screen would draw a full
+ * width sidebar and throw it away a moment later — the class that hides it
+ * below the breakpoint is what stops that, and `matchMedia` is what decides,
+ * once there is a window to ask, that the drawer should exist at all.
+ *
+ * A real `<aside>`, which is the `complementary` landmark: the region a screen
+ * reader offers as "related to the page but not the page", and what a search
+ * engine reads as navigation chrome rather than as the article.
+ */
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{Drawer as s}from"../drawer/Drawer.js";import{layoutMessages as i,useMessages as a}from"../../internal/i18n.js";import{drawerSide as l,expandedOnlyClasses as d,PageLayoutContext as c,SidebarSideContext as u,useCollapsed as p}from"../../internal/page-layout.js";import{cx as m,surfaceClasses as f,surfaceSlots as b,toLength as v,transitionClasses as y}from"../../internal/styles.js";const g={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},w={solid:[f,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[f,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function x(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const Sidebar=/*@__PURE__*/r.forwardRef(function({side:f,width:h,minWidth:k=160,maxWidth:C=480,resizable:j=!1,onResize:z,onResizeEnd:E,collapseBelow:N,open:R,defaultOpen:L=!1,onOpenChange:S,sticky:P=!0,title:B,variant:D="outline",size:O="md",color:A="primary",density:M="default",elevation:W=0,divider:I=!0,padded:T=!0,label:X,locale:$,className:_,style:F,children:K,...V},q){const G=r.useContext(c),H=r.useContext(u),J=f??H??"start",Q=$??G.locale,U=a(i,Q),Y=N??(G.present?G.collapseBelow:"none"),Z=p(Y),[ee,te]=r.useState(L),re=void 0!==R,ne=re?R:G.present?G.open[J]:ee,oe=e=>{re||(G.present?G.setOpen(J,e):te(e)),S?.(e)},se=v(h)??g[O],ie=r.useRef(null),ae=r.useCallback(e=>{ie.current=e,"function"==typeof q?q(e):q&&(q.current=e)},[q]),le=r.useRef(null);r.useEffect(()=>()=>le.current?.(),[]);const de=e=>{const t=ie.current;if(!t)return e;const r=Math.min(x(C,480),Math.max(x(k,160),Math.round(e)));return t.style.setProperty("--n-sidebar-w",`${r}px`),r},ce=e("div",{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?m(n[M][O],o[M][O]):""),children:K});return Z?e(s,{side:l(J),mode:"overlay",open:ne,onOpenChange:oe,title:B,size:O,color:A,density:M,locale:Q,closeLabel:U.closeSidebar,extent:void 0===h?void 0:se,"aria-label":B?void 0:X??U.sidebar,className:_,style:F,children:K}):t("aside",{ref:ae,"aria-label":X??U.sidebar,className:m("relative flex min-w-0 shrink-0 flex-col","w-(--n-sidebar-w)",w[D],I?m("start"===J?"border-e":"border-s","[border-color:var(--n-line)]"):"","content"===G.scroll?"h-full":P?m("self-start","sticky [top:var(--n-layout-header,0px)]","[height:calc(100dvh-var(--n-layout-header,0px)-var(--n-layout-footer,0px))]"):"",d[Y],y,_),style:{...b(A,W),"--n-sidebar-w":se,...F},...V,children:[ce,j?e("div",{role:"separator","aria-orientation":"vertical","aria-label":U.resizeSidebar,tabIndex:0,className:m("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===J?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)",y,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0"),onPointerDown:e=>{const t=ie.current;if(!t||0!==e.button)return;const r=e.currentTarget;r.setPointerCapture(e.pointerId),r.dataset.dragging="true";const n=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=e.clientX,s=t.getBoundingClientRect().width,i="rtl"===getComputedStyle(t).direction,a="start"===J===i?-1:1;let l=s;const d=e=>{l=de(s+(e.clientX-o)*a),z?.(l)},c=()=>{le.current=null,r.removeEventListener("pointermove",d),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,n?document.body.style.setProperty("-webkit-user-select",n):document.body.style.removeProperty("-webkit-user-select")},u=()=>{c(),E?.(l)};le.current=c,r.addEventListener("pointermove",d),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===J===t?-1:1;(e=>{const t=ie.current;if(!t)return;const r=de(t.getBoundingClientRect().width+e);z?.(r),E?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});