neba 1.13.0 → 1.15.0

package/dist/components/highlight/Highlight.js

@@ -1 +1 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{cx as t,transitionClasses as r}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const l={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-accent) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-accent)"},i={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},a=/[\p{L}\p{N}_]/u;function s(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function c(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!a.test(r)&&!a.test(o)}function u(n,e,t,r){e.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=e.exec(n));){if(""===l[0]){e.lastIndex+=1;continue}const a=l.index,s=a+l[0].length;!t||c(n,a,s)?(a>i&&o.push(n.slice(i,a)),o.push(r(l[0],`${a}`)),i=s):e.lastIndex=a+1}return 0===o.length?n:(i<n.length&&o.push(n.slice(i)),o)}function f(n,t,r,o){if("string"==typeof n)return u(n,t,r,o);if("number"==typeof n)return u(String(n),t,r,o);if(Array.isArray(n))return e.Children.map(n,n=>f(n,t,r,o));if(e.isValidElement(n)){const l=n.props.children;return void 0===l||"function"==typeof l?n:e.cloneElement(n,void 0,f(l,t,r,o))}return n}export const Highlight=/*@__PURE__*/e.forwardRef(function(a,c){const{query:u,variant:d="solid",color:m="warning",caseSensitive:p=!1,wholeWord:g=!1,underline:h=!1,weight:x,className:b,style:v,children:y,...$}=o(a,["variant"]),w=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return new RegExp(n.source,n.global?n.flags:`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>n.trim()).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(s).join("|"),e?"gu":"giu")}(u,p),[u,p]),j=t("rounded-[0.25rem] px-0.5 -mx-0.5","box-decoration-clone",l[d],h?"underline decoration-2 underline-offset-2":"",x?i[x]:"",r),E=w?f(y,w,g,(e,t)=>n("mark",{className:j,children:e},t)):y;return n("span",{ref:c,className:b,style:{"--n-fill":`var(--neba-${m}-fill)`,"--n-on-solid":`var(--neba-${m}-on-solid)`,"--n-accent":`var(--neba-${m}-accent)`,"--n-panel":`var(--neba-${m}-panel)`,"--n-line":`var(--neba-${m}-line)`,...v},...$,children:E})});
+"use client";import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{cx as t,transitionClasses as r}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const i={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-on-tint) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-on-tint)"},l={solid:"px-0.5 -mx-0.5",outline:"px-0.5 -mx-[calc(0.125rem+1px)]",text:"px-0.5 -mx-0.5"},s={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},a=/[\p{L}\p{N}_]/u,u=/[\u0300-\u036f]/g;function c(n){return n.normalize("NFD").replace(u,"").normalize("NFC")}function f(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function d(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!a.test(r)&&!a.test(o)}function m(n,e,t,r,o){e.lastIndex=0;const i=r?function(n){if(/^[\u0020-\u007e\s]*$/.test(n))return null;const e=[],t=[];let r="",o=0;for(const i of n){const n=o+i.length,l=c(i);if(""===l)for(let e=t.length-1;e>=0&&t[e]===o;e-=1)t[e]=n;else{for(let r=0;r<l.length;r+=1)e.push(o),t.push(n);r+=l}o=n}return{text:r,starts:e,ends:t}}(n):null,l=i?i.text:n,s=[];let a,u=0;for(;null!==(a=e.exec(l));){if(""===a[0]){e.lastIndex+=1;continue}const r=i?i.starts[a.index]:a.index,l=i?i.ends[a.index+a[0].length-1]:a.index+a[0].length;!t||d(n,r,l)?(r>u&&s.push(n.slice(u,r)),s.push(o(n.slice(r,l),`${r}`)),u=l):e.lastIndex=a.index+1}return 0===s.length?n:(u<n.length&&s.push(n.slice(u)),s)}function g(n,t,r,o,i){if("string"==typeof n)return m(n,t,r,o,i);if("number"==typeof n)return m(String(n),t,r,o,i);if(Array.isArray(n)){const e=n.map(n=>g(n,t,r,o,i));return e.every((e,t)=>e===n[t])?n:e}if(e.isValidElement(n)){const l=n.props.children;if(void 0===l||"function"==typeof l)return n;const s=g(l,t,r,o,i);return s===l?n:e.cloneElement(n,void 0,...p(s))}return n}function p(n){return Array.isArray(n)?n:[n]}export const Highlight=/*@__PURE__*/e.forwardRef(function Highlight(a,u){const{query:d,variant:m="solid",color:x="warning",caseSensitive:h=!1,wholeWord:b=!1,underline:y=!1,weight:v,className:$,style:E,children:A,...j}=o(a,["variant"]),w=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return new RegExp(n.source,n.global?n.flags:`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>Array.from(n.trim(),c).join("")).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(f).join("|"),e?"gu":"giu")}(d,h),[d,h]),N=t("rounded-[0.25rem]",l[m],"box-decoration-clone",i[m],y?"underline decoration-2 underline-offset-2":"",v?s[v]:"",r),R=b&&!(d instanceof RegExp),I=w?g(A,w,R,!(d instanceof RegExp),(e,t)=>n("mark",{className:N,children:e},t)):A;return e.createElement("span",{ref:u,className:$,style:{"--n-fill":`var(--neba-${x}-fill)`,"--n-on-solid":`var(--neba-${x}-on-solid)`,"--n-accent":`var(--neba-${x}-accent)`,"--n-on-tint":`var(--neba-${x}-on-tint)`,"--n-panel":`var(--neba-${x}-panel)`,"--n-line":`var(--neba-${x}-line)`,...E},...j},...p(I))});

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

@@ -108,7 +108,7 @@ export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'di
      * 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
+     * A reduced-motion preference cuts it to its last frame, as it does every
      * other effect in the library.
      * @default 'fade'
      */
@@ -150,4 +150,29 @@ export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'di
     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

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

package/dist/components/icon/Icon.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{transitionProps as i}from"../../internal/animate.js";import{cx as n,iconSizeClasses as r}from"../../internal/styles.js";const s={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=/*@__PURE__*/t.forwardRef(function({icon:t,size:l="md",color:a="inherit",label:m,transition:o,className:c,style:f,...x},d){const g=i(o),u=n("inline-flex shrink-0 items-center justify-center align-middle",r[l],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${s[l]}`,"inherit"===a?"":"text-(--n-accent)",g.className,c??"");return e("span",{ref:d,className:u,style:"inherit"===a?{...g.style,...f}:{"--n-accent":`var(--neba-${a}-accent)`,...g.style,...f},role:m?"img":void 0,"aria-label":m,"aria-hidden":!m||void 0,...x,children:t})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{transitionProps as i}from"../../internal/animate.js";import{cx as n,iconSizeClasses as r}from"../../internal/styles.js";const s={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=/*@__PURE__*/t.forwardRef(function Icon({icon:t,size:l="md",color:a="inherit",label:m,transition:o,className:c,style:f,...x},d){const g=i(o),u=n("inline-flex shrink-0 items-center justify-center align-middle",r[l],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${s[l]}`,"inherit"===a?"":"text-(--n-accent)",g.className,c??"");return e("span",{ref:d,className:u,style:"inherit"===a?{...g.style,...f}:{"--n-accent":`var(--neba-${a}-accent)`,...g.style,...f},role:m?"img":void 0,"aria-label":m,"aria-hidden":!m||void 0,...x,children:t})});

package/dist/components/icon-button/IconButton.d.ts

@@ -16,24 +16,4 @@ export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'startIc
      */
     label: string;
 }
-/**
- * A round button with a glyph in it and nothing else.
- *
- * A [Button] with an icon and no children already goes square — the same height,
- * the same width, the acrylic corners cut off it. This is the other shape: a
- * disc.
- *
- * That disc is a deliberate exception to the house radius rule, which holds
- * every corner just short of the 50% that would make a control a pill, because
- * the flat run along the top and bottom edge is what still reads as a sheet with
- * its corners cut. The rule is about *labelled* controls: the flat run is there
- * for the line of text to sit on, and a glyph has no line of text. A circle with
- * a single mark centred in it is a punched token rather than a moulded key, so
- * it says the thing the rule exists to protect by a different route.
- *
- * Everything else is Button's, unchanged and on purpose: the variants, the
- * elevation ladder, the pointer light, `loading`, `readOnly`, and the values a
- * surrounding ButtonGroup sets. Two components that draw the same surface from
- * two copies of the same table are two components that will eventually disagree.
- */
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/icon-button/IconButton.js

@@ -1 +1 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../button/Button.js";export const IconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:e,style:n,...a},s){return t(o,{ref:s,"aria-label":e,startIcon:r,style:{borderRadius:"9999px",...n},...a})});
+"use client";import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as a}from"../button/Button.js";const n={"--neba-radius-xs":"9999px","--neba-radius-sm":"9999px","--neba-radius-md":"9999px","--neba-radius-lg":"9999px","--neba-radius-xl":"9999px"};export const IconButton=/*@__PURE__*/r.forwardRef(function IconButton({icon:r,label:o,style:e,...s},i){return t(a,{ref:i,"aria-label":o,startIcon:r,style:{...n,...e},...s})});

package/dist/components/image/Image.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { NebaAspectFit } from '../aspect-ratio/AspectRatio.js';
-import type { NebaCorner, NebaElevation, NebaSize, NebaSlots } from '../../types.js';
+import type { NebaCorner, NebaElevation, NebaSide, NebaSize, NebaSlots } from '../../types.js';
 /** The parts an Image draws behind its root. */
 export type ImageSlot = 'image' | 'placeholder' | 'fallback' | 'frame' | 'watermark';
 /**
@@ -12,8 +12,61 @@ export type ImageSlot = 'image' | 'placeholder' | 'fallback' | 'frame' | 'waterm
  * valid value.
  */
 export type NebaImageFilter = 'none' | 'grayscale' | 'sepia' | 'invert' | 'saturate' | 'mute' | 'contrast';
+/**
+ * How far the picture is turned, clockwise, in degrees.
+ *
+ * Quarter turns and nothing between them. A picture turned by anything else no
+ * longer covers its own box, and filling the corners that leaves means
+ * enlarging it by an amount a caller would then want to tune — which is a photo
+ * editor, and the same line `filter` draws.
+ */
+export type NebaImageRotation = 0 | 90 | 180 | 270;
+/**
+ * Which way the picture is mirrored, along the axes it is shown on — so
+ * `horizontal` swaps left and right whatever `rotate` has done to it.
+ */
+export type NebaImageFlip = 'none' | 'horizontal' | 'vertical' | 'both';
+/**
+ * Where the picture sits in its box, spelled the way `object-position` spells
+ * it: a side, a corner, the centre, or two percentages across and down.
+ *
+ * Physical rather than logical, and on purpose. `NebaCorner` says `top-start`
+ * because a mark placed on a page belongs to the page's writing direction; the
+ * subject of a photograph is on the left of it in every language, so a crop
+ * that keeps it must not move to the other side on a right-to-left page.
+ */
+export type NebaImagePosition = 'center' | NebaSide | 'top left' | 'top right' | 'bottom left' | 'bottom right' | `${number}% ${number}%`;
+/**
+ * What fills the part of the box a picture leaves empty.
+ *
+ * `blur` is the picture itself, covering the box and blurred behind it — what a
+ * video player does with a portrait clip in a landscape frame, and the one fill
+ * that never reads as a gap. Any other string is a CSS `background`.
+ */
+export type NebaImageLetterbox = 'none' | 'blur';
 /** The silhouette a frame cuts the picture to. */
 export type NebaImageFrameShape = 'rect' | 'rounded' | 'circle' | 'cut' | 'arch';
+/**
+ * A picture to stand in while the file arrives, rather than a Skeleton.
+ *
+ * Drawn the way the picture will be — the same `fit`, `position`, `rotate`
+ * and `flip` — which is what it is for: a small copy of the same file, a few
+ * hundred bytes inlined as a data URI or already in memory as a `Blob`, so the
+ * reader sees the picture's colours and shape before its detail.
+ */
+export interface NebaImagePlaceholderOptions {
+    /**
+     * The stand-in: a URL, a data URI, or a `Blob`. A Blob is turned into an
+     * object URL for as long as it is shown and released when it is not.
+     */
+    src: string | Blob;
+    /**
+     * Blurs the stand-in, by this many pixels or by 20 for `true` — a copy
+     * stretched up from a few pixels is blocky without it.
+     * @default false
+     */
+    blur?: boolean | number;
+}
 export interface NebaImageFrameOptions {
     /** @default 'rounded' */
     shape?: NebaImageFrameShape;
@@ -105,29 +158,61 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      */
     ratio?: number | string | 'auto';
     /**
-     * The file's own pixel dimensions, as an `<img>` takes them.
+     * The file's own pixel dimensions, as an `<img>` takes them — or, given one
+     * at a time, the size of the box.
      *
-     * They are the platform's own answer to layout shift, and they are what to
-     * reach for when the proportion is the picture's rather than the layout's:
-     * `ratio` says "hold this shape whatever arrives", these two say "this is
-     * what will arrive". Give both and an `'auto'` ratio becomes their
+     * Together they are the platform's own answer to layout shift, and they are
+     * what to reach for when the proportion is the picture's rather than the
+     * layout's: `ratio` says "hold this shape whatever arrives", these two say
+     * "this is what will arrive". Give both and an `'auto'` ratio becomes their
      * proportion, so the box is reserved without anybody working out that 1200 by
      * 800 is 3/2.
      *
-     * They reach the `<img>` either way. One on its own reserves nothing, since
-     * a proportion needs two numbers.
+     * One on its own is not a proportion, so it is read as the length it looks
+     * like. `height={200}` is a box 200 pixels tall across whatever width it is
+     * given, and `width={320}` is one 320 wide — never wider than its container —
+     * and as tall as the picture makes it. A number is pixels and a string is a
+     * CSS length, and `fit` decides what the picture does inside. With a `ratio`
+     * as well, a lone `height` takes its width from the ratio.
+     *
+     * They reach the `<img>` either way.
      */
     width?: number | string;
     height?: number | string;
     /** How the picture fills that box. @default 'cover' */
     fit?: NebaAspectFit;
+    /**
+     * Where the picture sits in that box: which part survives a `cover` crop, and
+     * where `contain`, `none` and `scale-down` leave their empty space.
+     *
+     * Read on the picture as it is shown, so it holds through `rotate` and
+     * `flip` — `position="top"` keeps the top of what the reader sees, not the
+     * top of the file.
+     * @default 'center'
+     */
+    position?: NebaImagePosition;
+    /**
+     * What fills the box where `contain`, `none` or `scale-down` leave it empty:
+     * `blur` for the picture itself, blurred and covering the box behind it, or a
+     * CSS `background` — a colour, a token, a gradient.
+     *
+     * The blurred copy is the same file, so it is not a second download, and it
+     * is only drawn under a `fit` that can leave space; under `cover` and `fill`
+     * there is nothing for it to show through.
+     * @default 'none'
+     */
+    letterbox?: NebaImageLetterbox | (string & {});
     /** Rounds the corners at this step of the radius ladder. `false` for square. */
     rounded?: NebaSize | boolean;
     /**
      * What stands in while the file is arriving. A Skeleton of the right shape by
-     * default, `false` for nothing at all.
+     * default, a node of your own, `{ src }` for a picture — a small copy of the
+     * same file, as a URL or a `Blob` — or `false` for nothing at all.
+     *
+     * Like the Skeleton, a stand-in fills the box, so it needs one to fill: a
+     * `ratio`, or `width` and `height`.
      */
-    placeholder?: React.ReactNode | false;
+    placeholder?: React.ReactNode | false | NebaImagePlaceholderOptions;
     /**
      * What is drawn instead when the file does not arrive.
      *
@@ -136,8 +221,30 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * what was meant to be there is a better answer than a blank space.
      */
     fallback?: React.ReactNode;
-    /** Called when the file fails. Useful for swapping a `src` you control. */
+    /**
+     * Called with `loading` when a file is asked for, then `loaded` or `failed`
+     * once it settles. `failed` is the moment to swap a `src` you control.
+     */
     onLoadingStatusChange?: (status: Phase) => void;
+    /**
+     * Marks the picture a page is judged by — usually the largest thing above
+     * the fold, which is what Largest Contentful Paint measures — so it is
+     * fetched early and never lazily: `loading="eager"` and a high fetch
+     * priority.
+     *
+     * Everything else about when a picture loads belongs to the `<img>` and
+     * passes straight through: `loading="lazy"` for one below the fold,
+     * `decoding`, `fetchPriority`. An attribute written out wins over what this
+     * implies.
+     *
+     * It also draws the picture from the first paint: no fade, and no Skeleton
+     * over it. A server-rendered page shows the `<img>` as soon as the browser
+     * has the file, rather than waiting for hydration to lift a cover and start a
+     * fade, which is exactly what Largest Contentful Paint would otherwise wait
+     * on. A `placeholder` picture still stands beneath it while it arrives.
+     * @default false
+     */
+    priority?: boolean;
     /**
      * Opens the full picture in a Dialog when it is clicked.
      *
@@ -154,6 +261,25 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * @default 'none'
      */
     filter?: NebaImageFilter | (string & {});
+    /**
+     * Turns the picture clockwise, a quarter at a time.
+     *
+     * A picture on its side is laid out on its side: `width` and `height` still
+     * describe the file, so `width={1200} height={800} rotate={90}` reserves a
+     * box two wide by three tall, and a `ratio` of `'auto'` with neither takes
+     * the turned shape once the file has said what it is. An explicit `ratio` is
+     * the layout's and is kept, with `fit` deciding how the turned picture fills
+     * it.
+     * @default 0
+     */
+    rotate?: NebaImageRotation;
+    /**
+     * Mirrors the picture, along the axes it is shown on. The two props commute
+     * as a reader sees them: `flip="horizontal"` swaps left and right on the
+     * screen whether or not the picture has been turned.
+     * @default 'none'
+     */
+    flip?: NebaImageFlip;
     /**
      * How the picture is mounted: the silhouette it is cut to, and the line, the
      * mount, the shadow and the softened edge around it.

package/dist/components/image/Image.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as a from"react";import{AspectRatio as o}from"../aspect-ratio/AspectRatio.js";import{Skeleton as r}from"../skeleton/Skeleton.js";import{useStyleDefaults as l}from"../../internal/defaults.js";import{imageMessages as s,useMessages as i}from"../../internal/i18n.js";import{cx as c,metaTextValues as u,radiusClasses as d,toLength as f}from"../../internal/styles.js";const m={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"},p={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},b={"top-start":"items-start justify-start","top-end":"items-start justify-end","bottom-start":"items-end justify-start","bottom-end":"items-end justify-end",center:"items-center justify-center"},g=a.lazy(()=>import("../dialog/Dialog.js").then(e=>({default:e.Dialog})));function h(e,t){switch(e){case"rect":return{borderRadius:"0px"};case"circle":return{borderRadius:"50%"};case"arch":return{borderRadius:`50% 50% ${t} ${t} / 55% 55% ${t} ${t}`};case"cut":return{clipPath:`polygon(${t} 0, calc(100% - ${t}) 0, 100% ${t}, 100% calc(100% - ${t}), calc(100% - ${t}) 100%, ${t} 100%, 0 calc(100% - ${t}), 0 ${t})`};default:return{borderRadius:t}}}function v(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}export const Image=/*@__PURE__*/a.forwardRef(function(y,x){const{alt:$,ratio:k="auto",width:w,height:N,fit:j="cover",rounded:S=!1,placeholder:C,fallback:z,onLoadingStatusChange:M,preview:R=!1,filter:D="none",frame:_,watermark:I,protect:W=!1,locale:E,unavailableLabel:F,className:L,classNames:A,style:H,src:O,...P}=l(y,["locale"]),T=i(s,E),[U,q]=a.useState("loading"),[B,G]=a.useState(!1),J=a.useRef(null),K=a.useRef(M);a.useEffect(()=>{K.current=M});const Q=a.useCallback(e=>{J.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]);a.useEffect(()=>{const e=J.current,t=O&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;q(t??"loading"),t&&K.current?.(t)},[O]);const V=e=>{q(e),M?.(e)},X=!1===S?"":d[!0===S?"md":S],Y=D in p?p[D]:D,Z=!0===W?{}:!1===W?null:W,ee=null!==Z&&!1!==Z.contextMenu,te=null!==Z&&!1!==Z.drag,ne=null!==Z&&!1!==Z.select,ae=e=>e.preventDefault(),oe=Z?{onContextMenu:ee?ae:void 0,onDragStart:te?ae:void 0,draggable:!te&&void 0,className:ne?"select-none":"",style:ne?{WebkitTouchCallout:"none"}:void 0}:null,re=e("img",{ref:Q,src:O,alt:$,width:w,height:N,className:c("block size-full",m[j],X,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease)]","loaded"===U?"opacity-100":"opacity-0",oe?.className,A?.image),style:{filter:"none"===Y?void 0:Y,...oe?.style},onLoad:()=>V("loaded"),onError:()=>V("failed"),onContextMenu:oe?.onContextMenu,onDragStart:oe?.onDragStart,draggable:oe?.draggable,...P}),le="failed"===U?e("span",{className:c("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",X,A?.fallback),children:z??e("span",{className:"px-2 text-center text-sm",children:$||F||T.unavailable})}):"loading"===U&&!1!==C?e("span",{className:c("absolute inset-0",A?.placeholder),children:C??e(r,{shape:"rect",className:c("size-full",X)})}):null,se=void 0===I?null:function(t,n){const a="string"==typeof t?{content:t}:t,{content:o,position:r="bottom-end",repeat:l=!1,opacity:s=.35,size:i="xs",color:d="#ffffff"}=a,m="string"==typeof i&&i in u?u[i]:f(i)??u.xs,p=a.rotate??(l&&"string"==typeof o?-24:0);if(l&&"string"==typeof o){const t=function(e,t){let n=0;for(const t of e)n+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(t)?1:.6;const a=Math.max(16,Math.round(16*(n+2.4))),o=e.replace(/[&<>]/g,e=>"&"===e?"&amp;":"<"===e?"&lt;":"&gt;");return{uri:`data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${a}" height="52"><text x="0" y="32" font-family="system-ui, sans-serif" font-size="16" fill="${t}" stroke="rgba(0,0,0,0.28)" stroke-width="0.6" paint-order="stroke">${o}</text></svg>`)}`,width:a,height:52}}(o,d);return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute select-none",n),style:{inset:"-40%",opacity:s,transform:`rotate(${p}deg)`,backgroundImage:`url("${t.uri}")`,backgroundSize:`calc(${m} * ${t.width/16}) calc(${m} * ${t.height/16})`}})}return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute inset-0 flex select-none p-2",b[r],n),children:e("span",{style:{color:d,opacity:s,fontSize:m,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:o})})}(I,A?.watermark),ie=t("span",{className:"relative block size-full",children:[re,le,se]}),ce="auto"===k?function(e,t){const n="number"==typeof e?e:Number(e),a="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(a)&&n>0&&a>0?n/a:null}(w,N):null,ue=ce??k,de=void 0===_?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(_,S),fe=null===de?"0px":function(e){return"string"==typeof e&&e in d?`var(--neba-radius-${e})`:f(e)??"0px"}(de.corner??"md"),me=null===de?void 0:f(de.mat),pe=null===de?void 0:f(de.feather),be={...null===de?null:h(de.shape,fe),...void 0===pe?null:v(pe),...null===de?H:null},ge="auto"===ue?e("span",{className:c("relative block overflow-hidden",null===de?X:"",null===de?L:""),style:be,children:ie}):e(o,{ratio:ue,className:c("overflow-hidden",null===de?X:"",null===de?L:""),style:be,children:ie}),he=null===de?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":f(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(de),ve=void 0===me?fe:`calc(${fe} + ${me})`,ye=null===de?ge:t("span",{className:c("relative block",A?.frame,L),style:{...h(de.shape,ve),padding:me,background:de.background??(void 0===me?void 0:"var(--neba-surface)"),boxShadow:de.elevation?`var(--neba-shadow-${de.elevation})`:void 0,...H},children:[ge,void 0===he?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...h(de.shape,ve),boxShadow:he}})]});return R?t(n,{children:[e("button",{type:"button","aria-label":$,className:c("block w-full cursor-zoom-in [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:2px]",X),onClick:()=>G(!0),children:ye}),e(a.Suspense,{fallback:null,children:e(g,{open:B,onOpenChange:G,size:"xl",title:$,children:t("span",{className:"relative mx-auto block w-fit",children:[e("img",{src:O,alt:$,className:c("mx-auto block max-h-[70vh] w-auto max-w-full",oe?.className),style:{filter:"none"===Y?void 0:Y,...oe?.style},onContextMenu:oe?.onContextMenu,onDragStart:oe?.onDragStart,draggable:oe?.draggable}),se]})})})]}):ye});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{AspectRatio as r}from"../aspect-ratio/AspectRatio.js";import{Skeleton as i}from"../skeleton/Skeleton.js";import{useStyleDefaults as a}from"../../internal/defaults.js";import{imageMessages as l,useMessages as s}from"../../internal/i18n.js";import{cx as c,metaTextValues as u,radiusClasses as d,toLength as f,transitionClasses as h}from"../../internal/styles.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},b={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},m={"top-start":"items-start justify-start","top-end":"items-start justify-end","bottom-start":"items-end justify-start","bottom-end":"items-end justify-end",center:"items-center justify-center"},g=Number.parseInt(o.version,10)>=19?"fetchPriority":"fetchpriority",v=o.lazy(()=>import("../dialog/Dialog.js").then(e=>({default:e.Dialog})));function y(e){const t="number"==typeof e?e:""===e.trim()?NaN:Number(e);return Number.isFinite(t)?`${t}px`:String(e)}const x=/^(-?\d*\.?\d+)%$/;function w(e,t,n){const o=function(e){let t=.5,n=.5;for(const[o,r]of e.trim().toLowerCase().split(/\s+/).entries()){const e=x.exec(r);if("left"===r||"right"===r)t="left"===r?0:1;else if("top"===r||"bottom"===r)n="top"===r?0:1;else if(null!==e)0===o?t=Number(e[1])/100:n=Number(e[1])/100;else if("center"!==r)return null}return[t,n]}(e);if(null===o)return e;let[r,i]=o;"horizontal"!==n&&"both"!==n||(r=1-r),"vertical"!==n&&"both"!==n||(i=1-i);for(let e=0;e<t;e+=1)[r,i]=[i,1-r];const a=e=>Math.round(1e4*e)/100+"%";return`${a(r)} ${a(i)}`}function $(e,t,n){const o=e=>0===n?e:`calc(${e} + ${2*n}px)`;return t?{...e,width:o("100cqh"),height:o("100cqw")}:{...e,position:"absolute",top:-n+"px",left:-n+"px",width:o("100%"),height:o("100%"),maxWidth:"none"}}function k(e,t){switch(e){case"rect":return{borderRadius:"0px"};case"circle":return{borderRadius:"50%"};case"arch":return{borderRadius:`50% 50% ${t} ${t} / 55% 55% ${t} ${t}`};case"cut":return{clipPath:`polygon(${t} 0, calc(100% - ${t}) 0, 100% ${t}, 100% calc(100% - ${t}), calc(100% - ${t}) 100%, ${t} 100%, 0 calc(100% - ${t}), 0 ${t})`};default:return{borderRadius:t}}}function N(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}function TiledMark({text:n,color:r,opacity:i,rotate:a,fontSize:l,slot:s}){const u=`neba-mark-${o.useId().replace(/[^\w-]/g,"")}`,d=function(e){let t=0;for(const n of e)t+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(n)?1:.6;return{width:Math.max(16,Math.round(16*(t+2.4))),height:52}}(n);return t("svg",{"aria-hidden":"true",className:c("pointer-events-none absolute select-none",s),style:{top:"-40%",left:"-40%",width:"180%",height:"180%",opacity:i,fontSize:l,transform:`rotate(${a}deg)`},children:[e("defs",{children:e("pattern",{id:u,patternUnits:"userSpaceOnUse",width:d.width/16+"em",height:d.height/16+"em",children:e("text",{x:"0",y:"2em",style:{fill:r,fontFamily:"system-ui, sans-serif",stroke:"rgba(0, 0, 0, 0.28)",strokeWidth:"0.0375em",paintOrder:"stroke"},children:n})})}),e("rect",{width:"100%",height:"100%",fill:`url(#${u})`})]})}export const Image=/*@__PURE__*/o.forwardRef(function Image(x,S){const{alt:z,ratio:R="auto",width:C,height:M,fit:_="cover",position:W,letterbox:L="none",rounded:O=!1,placeholder:P,fallback:D,onLoadingStatusChange:T,preview:E=!1,priority:F=!1,filter:I="none",rotate:U=0,flip:q="none",frame:H,watermark:B,protect:A=!1,locale:V,unavailableLabel:G,className:J,classNames:K,style:Q,src:X,onLoad:Y,onError:Z,onContextMenu:ee,onDragStart:te,draggable:ne,...oe}=a(x,["locale"]),re=s(l,V),ie=!1!==P&&function(e){return"object"==typeof e&&null!==e&&!o.isValidElement(e)&&"src"in e}(P)?P:null,ae=function(e){const[t,n]=o.useState(null);return o.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return n({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(ie?.src),[le,se]=o.useState("loading"),[ce,ue]=o.useState(!1),[de,fe]=o.useState(null),he=o.useRef(null),pe=o.useRef(T);o.useEffect(()=>{pe.current=T});const be=o.useCallback(e=>{he.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]);o.useEffect(()=>{const e=he.current,t=X&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;se(t??"loading"),fe("loaded"===t&&e?{width:e.naturalWidth,height:e.naturalHeight}:null),pe.current?.(t??"loading")},[X]);const me=(e,t)=>{se(e),"loaded"===e&&fe({width:t.naturalWidth,height:t.naturalHeight}),T?.(e)},ge=!1===O?"":d[!0===O?"md":O],ve=I in b?b[I]:I,ye=!0===A?{}:!1===A?null:A,xe=null!==ye&&!1!==ye.contextMenu,we=null!==ye&&!1!==ye.drag,$e=null!==ye&&!1!==ye.select,ke=e=>e.preventDefault(),Ne=function(e){return Number.isFinite(e)?(Math.round(e/90)%4+4)%4:0}(U),je=Ne%2==1,Se=function(e,t){const n=e%2==1,o="horizontal"===t||"both"===t,r="vertical"===t||"both"===t,i=n?r:o,a=n?o:r;return{scale:i||a?`${i?-1:1} ${a?-1:1}`:void 0,rotate:0===e?void 0:90*e+"deg",...n?{position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"}:null}}(Ne,q),ze=void 0===W?void 0:w(W,Ne,q),Re="blur"===L&&"cover"!==_&&"fill"!==_,Ce="none"!==L&&"blur"!==L?L:void 0,Me=ye?{onContextMenu:xe?ke:void 0,onDragStart:we?ke:void 0,draggable:!we&&void 0,className:$e?"select-none":"",style:$e?{WebkitTouchCallout:"none"}:void 0}:null,_e=e("img",{ref:be,src:X,alt:z,width:C,height:M,className:c("block size-full",p[_],ge,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]",F||"loaded"===le?"opacity-100":"opacity-0",Re||null!==ie?"relative":"",Me?.className,K?.image),style:{filter:"none"===ve?void 0:ve,objectPosition:ze,...Se,...Me?.style},onLoad:e=>{me("loaded",e.currentTarget),Y?.(e)},onError:e=>{me("failed",e.currentTarget),Z?.(e)},onContextMenu:e=>{xe&&ke(e),ee?.(e)},onDragStart:e=>{we&&ke(e),te?.(e)},draggable:!we&&ne,...F?{loading:"eager",[g]:"high"}:null,...oe}),We=Re?e("img",{src:X,srcSet:oe.srcSet,sizes:oe.sizes,loading:oe.loading,decoding:oe.decoding,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block object-cover select-none","[transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]","loaded"===le?"opacity-100":"opacity-0"),style:{...$(Se,je,48),objectPosition:ze,filter:("none"===ve?"":`${ve} `)+"blur(24px)"}}):null,Le=null!==ie&&ie.blur?!0===ie.blur?20:ie.blur:0,Oe=null===ie||"failed"===le||void 0===ae?null:e("img",{src:ae,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block select-none",p[_],"loaded"===le?"opacity-0 [transition:opacity_0ms_linear_var(--neba-duration-fill)]":"opacity-100",K?.placeholder),style:{...$(Se,je,2*Le),objectPosition:ze,filter:0===Le?void 0:`blur(${Le}px)`}}),Pe="failed"===le?e("span",{className:c("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",ge,K?.fallback),children:D??e("span",{className:"px-2 text-center text-sm","aria-hidden":!!z||void 0,children:z||G||re.unavailable})}):"loading"!==le||!1===P||null!==ie||F?null:e("span",{className:c("absolute inset-0",K?.placeholder),children:P??e(i,{render:e("span",{}),shape:"rect",className:c("block size-full",ge)})}),De=void 0===B?null:function(t,n){const o="string"==typeof t?{content:t}:t,{content:r,position:i="bottom-end",repeat:a=!1,opacity:l=.35,size:s="xs",color:d="#ffffff"}=o,h="string"==typeof s&&s in u?u[s]:f(s)??u.xs,p=o.rotate??(a&&"string"==typeof r?-24:0);if(a&&"string"==typeof r)return e(TiledMark,{text:r,color:d,opacity:l,rotate:p,fontSize:h,slot:n});return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute inset-0 flex select-none p-2",m[i],n),children:e("span",{style:{color:d,opacity:l,fontSize:h,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:r})})}(B,K?.watermark),Te=t("span",{className:"relative block size-full",style:je||void 0!==Ce?{containerType:je?"size":void 0,background:Ce}:void 0,children:[We,Oe,_e,Pe,De]}),Ee=function(e,t){const n="number"==typeof e?e:Number(e),o="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(o)&&n>0&&o>0?{width:n,height:o}:null}(C,M),Fe="auto"===R&&null!==Ee?Ee.width/Ee.height:null,Ie=null===Fe?R:je?1/Fe:Fe,Ue=void 0===M&&void 0!==C?y(C):void 0,qe=void 0===C&&void 0!==M?y(M):void 0,He=void 0!==Ue?{width:Ue,maxWidth:"100%"}:void 0!==qe?{height:qe,..."auto"===Ie?null:{width:"auto",maxWidth:"100%"}}:null,Be=void 0!==Ue||void 0!==qe&&"auto"!==Ie,Ae="auto"===Ie&&je&&null!==de&&void 0===qe?de.height/de.width:null,Ve=void 0===H?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(H,O),Ge=null===Ve?"0px":function(e){return"string"==typeof e&&e in d?`var(--neba-radius-${e})`:f(e)??"0px"}(Ve.corner??"md"),Je=null===Ve?void 0:f(Ve.mat),Ke=null===Ve?void 0:f(Ve.feather),Qe={...He,...null===Ve?null:k(Ve.shape,Ge),...void 0===Ke?null:N(Ke),...null!==Ve||E?null:Q},Xe="auto"===Ie?e("span",{className:c("relative block overflow-hidden",null===Ve?ge:"",null!==Ve||E?"":J),style:null===Ae?Qe:{aspectRatio:Ae,...Qe},children:Te}):e(r,{render:e("span",{}),ratio:Ie,className:c("block overflow-hidden",null===Ve?ge:"",null!==Ve||E?"":J),style:Qe,children:Te}),Ye=null===Ve?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":f(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(Ve),Ze=void 0===Je?Ge:`calc(${Ge} + ${Je})`,et=null===Ve?Xe:t("span",{className:c("relative block",K?.frame,E?"":J),style:{...k(Ve.shape,Ze),padding:Je,background:Ve.background??(void 0===Je?void 0:"var(--neba-surface)"),boxShadow:Ve.elevation?`var(--neba-shadow-${Ve.elevation})`:void 0,width:Be?"fit-content":void 0,maxWidth:Be?"100%":void 0,...E?null:Q},children:[Xe,void 0===Ye?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...k(Ve.shape,Ze),boxShadow:Ye}})]});return E?t(n,{children:[e("button",{type:"button","aria-label":z||re.preview,className:c("block cursor-zoom-in",h,Be?"[:where(&)]:w-fit [:where(&)]:max-w-full":"[:where(&)]:w-full","focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ge,J),style:Q,onClick:()=>ue(!0),children:et}),e(o.Suspense,{fallback:null,children:e(v,{open:ce,onOpenChange:ue,size:"xl",title:z||re.preview,children:t("span",{className:c("relative mx-auto block",je?"":"w-fit"),style:je?j(de??Ee):void 0,children:[e("img",{src:X,srcSet:oe.srcSet,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:z,className:c(je?"block object-contain":"mx-auto block max-h-[70vh] w-auto max-w-full",Me?.className),style:{filter:"none"===ve?void 0:ve,...Se,...Me?.style},onContextMenu:Me?.onContextMenu,onDragStart:Me?.onDragStart,draggable:Me?.draggable}),De]})})})]}):et});function j(e){if(null===e)return{aspectRatio:"1",width:"min(100%, 70vh)",containerType:"size"};const t=e.height/e.width;return{aspectRatio:`${e.height} / ${e.width}`,width:`min(100%, ${e.height}px, calc(70vh * ${t}))`,containerType:"size"}}

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

@@ -1,2 +1,2 @@
 export { Image } from './Image.js';
-export type { ImageProps, ImageSlot, NebaImageFilter, NebaImageFrame, NebaImageFrameOptions, NebaImageFrameShape, NebaImageProtection, NebaImageWatermark, NebaImageWatermarkOptions } from './Image.js';
+export type { ImageProps, ImageSlot, NebaImageFilter, NebaImageFlip, NebaImageFrame, NebaImageFrameOptions, NebaImageFrameShape, NebaImageLetterbox, NebaImagePlaceholderOptions, NebaImagePosition, NebaImageProtection, NebaImageRotation, NebaImageWatermark, NebaImageWatermarkOptions } from './Image.js';

package/dist/components/inline-citation/InlineCitation.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type SourcesMessages } from '../../internal/i18n.js';
+import type { NebaColor, NebaSize } from '../../types.js';
+export interface InlineCitationProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title' | 'children'> {
+    /**
+     * Which source this is, and the only thing the mark itself says. It is the
+     * caller's number rather than one counted here: a citation sits in a
+     * paragraph, and the list it points at is somewhere else on the page.
+     */
+    index: number;
+    /** The heading of the preview. Without it there is nothing to preview. */
+    title?: React.ReactNode;
+    /** The line under it — the passage that was used, the publisher, a date. */
+    description?: React.ReactNode;
+    /** Where it came from, set beside the title in the preview. */
+    site?: React.ReactNode;
+    /**
+     * Where the citation points. A scheme outside `http`, `https`, `mailto` and
+     * `tel` leaves the mark as plain text rather than writing the URL out.
+     */
+    href?: string;
+    /** Where the link opens. `rel` gains `noopener noreferrer` whenever it leaves the tab. */
+    target?: string;
+    /**
+     * Shows the preview on hover and on focus. Off, the mark is a bare link, and
+     * the reader has the list at the bottom of the answer and nothing else.
+     * @default true
+     */
+    preview?: boolean;
+    /** The type scale of the preview. The mark itself is sized in `em`. @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** Which language the mark's accessible name is written in, as a BCP 47 tag. */
+    locale?: string;
+    /** That sentence, written out. Overrides the `locale`'s. */
+    labels?: Partial<SourcesMessages>;
+}
+/**
+ * A numbered footnote in the body of an answer, with the source behind it a
+ * hover away.
+ *
+ * The mark is the same square a [Sources](./sources) row draws, and that is the
+ * whole arrangement: a reader sees `2` in a sentence and finds `2` in the list
+ * underneath. Both read one class from `internal/styles.ts`, because two
+ * drawings of one number is two chances for the pair to stop matching.
+ *
+ * `index` is the caller's rather than counted here. A citation sits inside a
+ * paragraph and the list it points at is somewhere else on the page, so there
+ * is no parent that could number it — and a component that numbered itself by
+ * render order would renumber the whole answer whenever a sentence moved.
+ */
+export declare const InlineCitation: React.ForwardRefExoticComponent<InlineCitationProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/inline-citation/InlineCitation.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{HoverCard as t}from"../hover-card/HoverCard.js";import{TextLink as n}from"../text-link/TextLink.js";import{fillMessage as i,sourcesMessages as o,useMessages as a}from"../../internal/i18n.js";import{safeHref as l,safeRel as s}from"../../internal/link.js";import{citationMarkClasses as m,cx as c,focusRingClasses as f,hasContent as d,metaTextClasses as p,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";export const InlineCitation=/*@__PURE__*/r.forwardRef(function InlineCitation(r,u){const{index:g,title:b,description:j,site:x,href:y,target:$,rel:k,preview:z=!0,size:C="md",color:N="primary",locale:w,labels:I,className:H,style:L,...R}=v(r,["size","locale"]),S={...a(o,w),...I},T=i(S.citation,{index:String(g)}),q=l(y),A=e("a",{ref:u,href:q,target:q?$:void 0,rel:s($,k),"aria-label":T,className:c(m,"align-[0.15em] no-underline",q?"cursor-pointer":"cursor-default","hover:bg-(--n-soft-hover)",f,h,H??""),style:{"--n-soft":`var(--neba-${N}-soft)`,"--n-soft-hover":`var(--neba-${N}-soft-hover)`,"--n-on-tint":`var(--neba-${N}-on-tint)`,"--n-ring":`var(--neba-${N}-ring)`,...L},...R,children:g});return z&&d(b)?e(t,{size:C,color:N,trigger:A,title:q?e(n,{href:q,underline:"hover",target:$,rel:s($,k),children:b}):b,description:x,children:d(j)?e("span",{className:c("text-(--neba-muted-fg)",p[C]),children:j}):null}):A});

package/dist/components/inline-citation/index.d.ts

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

package/dist/components/inline-citation/index.js

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

package/dist/components/list/List.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r,Fragment as s}from"react/jsx-runtime";import*as n from"react";import{useRender as t}from"@base-ui/react/use-render";import{boxPaddingXClasses as l}from"../box/Box.js";import{cx as a,focusRingClasses as i,gapClasses as o,hasContent as d,iconClasses as c,metaTextClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceClasses as p,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v=/*@__PURE__*/n.createContext({size:"md",density:"default",dividers:!1}),y={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"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"},g={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const List=/*@__PURE__*/n.forwardRef(function(r,s){const{variant:l="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:x,className:p,style:g,children:N,...w}=b(r,["size","density","variant"]),j=n.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",f[i],y[l],h,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",p??""),z=t({render:x,ref:s,props:{role:"list",className:k,style:{...u(o,c),...g},children:N,...w}});return e(v.Provider,{value:j,children:z})});export const ListItem=/*@__PURE__*/n.forwardRef(function({startIcon:t,endIcon:f,description:p,action:u,href:b,selected:y=!1,disabled:w=!1,className:j,children:k,onClick:z,...C},I){const{size:$,density:B,dividers:L}=n.useContext(v),R=Boolean(z||b)&&!w,F=l[B][$],M=g[B][$],P=a("flex min-w-0 flex-1 items-center text-start",F,M,o[$],x[$],h,c,L?"":N[$],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-accent)":"",R?`cursor-pointer ${i}`:"",R&&!y?"hover:bg-(--n-soft)":"",R&&y?"hover:bg-(--n-soft-press)":""),q=r(s,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:t}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(k)?e("span",{className:"truncate",children:k}):null,d(p)?e("span",{className:`truncate text-(--neba-muted-fg) ${m[$]}`,children:p}):null]}),d(f)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:f}):null]});return r("li",{ref:I,className:a("flex w-full items-center",j??""),...C,children:[R&&b?e("a",{href:b,className:P,"aria-current":y?"page":void 0,onClick:z,children:q}):R?e("button",{type:"button",className:P,"aria-current":!!y||void 0,onClick:z,children:q}):e("div",{className:P,"aria-disabled":w||void 0,children:q}),d(u)?e("div",{className:`flex shrink-0 items-center ${F}`,children:u}):null]})});
+"use client";import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{safeHref as s}from"../../internal/link.js";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as i}from"../box/Box.js";import{cx as a,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as f,radiusClasses as p,sheetBodyClasses as x,surfaceClasses as u,surfaceSlots as h,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const g=/*@__PURE__*/t.createContext({size:"md",density:"default",dividers:!1}),y={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"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"},N={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},j={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md};export const List=/*@__PURE__*/t.forwardRef(function List(n,r){const{variant:s="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:f,className:x,style:u,children:N,...j}=b(n,["size","density","variant"]),w=t.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",p[i],y[s],v,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",x??""),z=l({render:f,ref:r,props:{role:"list",className:k,style:{...h(o,c),...u},children:N,...j}});return e(g.Provider,{value:w,children:z})});export const ListItem=/*@__PURE__*/t.forwardRef(function ListItem({startIcon:l,endIcon:p,description:u,action:h,href:b,selected:y=!1,disabled:w=!1,className:k,children:z,onClick:C,...I},L){const{size:_,density:B,dividers:R}=t.useContext(g),$=s(b),F=Boolean(C||$)&&!w,M=i[B][_],P=N[B][_],q=a("flex min-w-0 flex-1 items-center text-start",M,P,d[_],x[_],v,m,R?"":j[_],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-on-tint)":"",F?`cursor-pointer ${R?"[outline:0_solid_var(--n-ring)] outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]":o}`:"",F&&!y?"hover:bg-(--n-soft)":"",F&&y?"hover:bg-(--n-soft-press)":""),A=n(r,{children:[c(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:l}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(z)?e("span",{className:"truncate",children:z}):null,c(u)?e("span",{className:a("truncate",f[_],y?"":"text-(--neba-muted-fg)"),children:u}):null]}),c(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:p}):null]});return n("li",{ref:L,className:a("flex w-full items-center",k??""),...I,children:[F&&$?e("a",{href:$,className:q,"aria-current":y?"page":void 0,onClick:C,children:A}):F?e("button",{type:"button",className:q,"aria-current":!!y||void 0,onClick:C,children:A}):e("div",{className:q,"aria-disabled":w||void 0,"aria-current":!!y||void 0,children:A}),c(h)?e("div",{className:`flex shrink-0 items-center ${M}`,children:h}):null]})});

package/dist/components/menu/Menu.d.ts

@@ -120,7 +120,10 @@ export interface MenuSubmenuProps {
     label?: React.ReactNode;
     startIcon?: React.ReactNode;
     disabled?: boolean;
-    /** Which edge of the parent row it opens against. @default 'right' */
+    /**
+     * Which edge of the parent row it opens against. Left out, it opens at the
+     * row's inline end: to the right, or to the left under RTL.
+     */
     side?: NebaSide;
     /** Distance from the parent menu, in pixels. @default 4 */
     sideOffset?: number;
@@ -170,7 +173,7 @@ export type MenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * links that are not links cannot be opened in a new tab, cannot be copied, and
  * tells a screen reader the wrong thing about every one of them.
  */
-export declare function MenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
+export declare function MenuItem({ onClick, href: hrefProp, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the same slot a `startIcon` would. */
 export declare function MenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */
@@ -214,7 +217,7 @@ export declare function MenuSubmenu({ label, startIcon, disabled, side, sideOffs
  * shape a row can take, which is a component tree spelled as a discriminated
  * union.
  */
-export declare function Menu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MenuProps): React.JSX.Element;
+export declare function Menu(rawProps: MenuProps): React.JSX.Element;
 /**
  * The same menu, opened by a right-click or a long press instead of by a button.
  *
@@ -224,5 +227,5 @@ export declare function Menu({ size, color, density, trigger, open, defaultOpen,
  * wrapped. Base UI positions the popup at the pointer rather than against an
  * anchor, and the long press is what makes it reachable on a touch screen at all.
  */
-export declare function ContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu(rawProps: ContextMenuProps): React.JSX.Element;
 export {};

package/dist/components/menu/Menu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as s}from"@base-ui/react/context-menu";import{MenuContext as o}from"../../internal/menu.js";import{CheckIcon as r,ChevronIcon as i,DotIcon as c}from"../../internal/icons.js";import{safeRel as d}from"../../internal/link.js";import{controlTextLeadingClasses as u,cx as m,gapClasses as p,hasContent as h,iconClasses as x,metaTextClasses as b,popupFadeClasses as f,radiusClasses as g,surfaceClasses as N,surfaceSlots as y,transitionClasses as C}from"../../internal/styles.js";const k=[N,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",f].join(" "),v={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},O={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function z(e,n,l,t){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--n-accent)":"text-(--neba-fg)",v[n][e],O[e],p[e],u[e],C,x,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",t??"")}const I="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function M({children:l,description:t,size:a}){return h(t)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:`truncate text-(--neba-muted-fg) ${b[a]}`,children:t})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function MenuItem({onClick:s,href:r,target:i,rel:c,startIcon:u,endIcon:m,shortcut:p,description:x,color:f,closeOnClick:g=!0,disabled:N=!1,label:C,children:k,className:v,style:O}){const j=t.useContext(o),{size:$,density:w}=j,P=n(l,{children:[h(u)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:u}):null,e(M,{description:x,size:$,children:k}),h(m)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:m}):null,h(p)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${b[$]}`,children:p}):null]}),R=f?y(f,0):void 0,F=R||O?{...R,...O}:void 0;return void 0!==r?e(a.LinkItem,{href:r,target:i,rel:d(i,c),label:C,closeOnClick:g,onClick:s,className:z($,w,Boolean(f),v),style:F,children:P}):e(a.Item,{disabled:N,label:C,closeOnClick:g,onClick:s,className:z($,w,Boolean(f),v),style:F,children:P})}export function MenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:i,endIcon:c,shortcut:d,description:u,color:m,closeOnClick:p=!1,disabled:x=!1,label:f,children:g,className:N,style:C}){const{size:k,density:v}=t.useContext(o),O=m?y(m,0):void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>i?.(e),disabled:x,label:f,closeOnClick:p,className:z(k,v,Boolean(m),N),style:O||C?{...O,...C}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{})})}),e(M,{description:u,size:k,children:g}),h(c)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:c}):null,h(d)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${b[k]}`,children:d}):null]})}export function MenuRadioGroup({value:n,defaultValue:l,onValueChange:t,disabled:s=!1,children:o,className:r}){return e(a.RadioGroup,{value:n,defaultValue:l,onValueChange:e=>t?.(e),disabled:s,className:r,children:o})}export function MenuRadioItem({value:l,endIcon:s,shortcut:r,description:i,color:d,closeOnClick:u=!1,disabled:m=!1,label:p,children:x,className:f,style:g}){const{size:N,density:C}=t.useContext(o),k=d?y(d,0):void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:u,className:z(N,C,Boolean(d),f),style:k||g?{...k,...g}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(M,{description:i,size:N,children:x}),h(s)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:s}):null,h(r)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${b[N]}`,children:r}):null]})}export function MenuGroup({label:l,children:s,className:r}){const{size:i,density:c}=t.useContext(o);return n(a.Group,{className:r,children:[h(l)?e(a.GroupLabel,{className:[v[c][i],b[i],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:l}):null,s]})}export function MenuSeparator({className:n,...l}){return e(a.Separator,{className:m("-mx-1 my-1 h-px bg-(--n-line)",n??""),...l})}export function MenuSubmenu({label:l,startIcon:s,disabled:r=!1,side:c="right",sideOffset:d=4,children:p,className:x,style:b}){const f=t.useContext(o),{size:N,density:C,color:v}=f;return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:r,className:z(N,C,!1),children:[h(s)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:s}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${I} text-(--neba-muted-fg) -rotate-90`,children:e(i,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:c,sideOffset:d,align:"start",children:e(a.Popup,{className:m(k,g[N],u[N],x??""),style:{...y(v,3),...b},children:p})})})]})}export function Menu({size:l="md",color:s="primary",density:r="default",trigger:i,open:c,defaultOpen:d,onOpenChange:p,side:h="bottom",align:x="start",sideOffset:b=6,modal:f,openOnHover:N=!1,loopFocus:C=!0,disabled:v=!1,className:O,style:z,children:I}){const M=t.useMemo(()=>({size:l,color:s,density:r}),[l,s,r]);return e(o.Provider,{value:M,children:n(a.Root,{open:c,defaultOpen:d,onOpenChange:e=>p?.(e),modal:f,loopFocus:C,disabled:v,children:[i?e(a.Trigger,{render:i,openOnHover:N,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:h,align:x,sideOffset:b,children:e(a.Popup,{className:m(k,g[l],u[l],O??""),style:{...y(s,3),...z},children:I})})})]})})}export function ContextMenu({size:l="md",color:a="primary",density:r="default",content:i,children:c,open:d,defaultOpen:p,onOpenChange:h,loopFocus:x=!0,disabled:b=!1,className:f,style:N}){const C=t.useMemo(()=>({size:l,color:a,density:r}),[l,a,r]);return e(o.Provider,{value:C,children:n(s.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),loopFocus:x,disabled:b,children:[e(s.Trigger,{children:c}),e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",children:e(s.Popup,{className:m(k,g[l],u[l],f??""),style:{...y(a,3),...N},children:i})})})]})})}
+"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowClasses as a,spotlightSlot as s,trackPointer as o}from"../../internal/glow.js";import{Menu as r}from"@base-ui/react/menu";import{useDirection as i}from"@base-ui/react/direction-provider";import{ContextMenu as c}from"@base-ui/react/context-menu";import{MenuContext as d}from"../../internal/menu.js";import{CheckIcon as u,ChevronIcon as m,DotIcon as p}from"../../internal/icons.js";import{safeHref as h,safeRel as f}from"../../internal/link.js";import{controlTextLeadingClasses as x,cx as b,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as v,popupFadeClasses as C,radiusClasses as k,surfaceClasses as z,surfaceSlots as O,transitionClasses as M}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const I=[z,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",C].join(" "),P={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},j={xs:k.xs,sm:k.xs,md:k.sm,lg:k.sm,xl:k.md};function $(e,n,t,l,s){return b("relative flex w-full cursor-pointer items-center select-none",l?a:"",t?"text-(--n-on-tint)":"text-(--neba-fg)",P[n][e],j[e],g[e],x[e],M,N,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",s??"")}const R="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function RowBody({children:t,description:l,size:a}){return y(l)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`truncate text-(--neba-muted-fg) ${v[a]}`,children:l})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:t})}export function MenuItem({onClick:a,href:i,target:c,rel:u,startIcon:m,endIcon:p,shortcut:x,description:b,color:g,closeOnClick:N=!0,disabled:C=!1,label:k,children:z,className:M,style:w}){const I=l.useContext(d),{size:P,density:j}=I,B=n(t,{children:[y(m)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:m}):null,e(RowBody,{description:b,size:P,children:z}),y(p)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:p}):null,y(x)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[P]}`,children:x}):null]}),F={...g?O(g,0):void 0,...s,...w},G=h(i);return void 0===G||C?e(r.Item,{disabled:C,label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!C),children:B}):e(r.LinkItem,{href:G,target:c,rel:f(c,u),label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!0),children:B})}export function MenuCheckboxItem({checked:t,defaultChecked:a,onCheckedChange:i,endIcon:c,shortcut:m,description:p,color:h,closeOnClick:f=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:k,density:z}=l.useContext(d),M=h?O(h,0):void 0;return n(r.CheckboxItem,{checked:t,defaultChecked:a,onCheckedChange:e=>i?.(e),disabled:x,label:b,closeOnClick:f,className:$(k,z,Boolean(h),!x,N),style:{...M,...s,...C},onPointerMove:o(void 0,!x),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(u,{})})}),e(RowBody,{description:p,size:k,children:g}),y(c)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:c}):null,y(m)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[k]}`,children:m}):null]})}export function MenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:a=!1,children:s,className:o}){return e(r.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:a,className:o,children:s})}export function MenuRadioItem({value:t,endIcon:a,shortcut:i,description:c,color:u,closeOnClick:m=!1,disabled:h=!1,label:f,children:x,className:b,style:g}){const{size:N,density:C}=l.useContext(d),k=u?O(u,0):void 0;return n(r.RadioItem,{value:t,disabled:h,label:f,closeOnClick:m,className:$(N,C,Boolean(u),!h,b),style:{...k,...s,...g},onPointerMove:o(void 0,!h),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:c,size:N,children:x}),y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,y(i)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[N]}`,children:i}):null]})}export function MenuGroup({label:t,children:a,className:s}){const{size:o,density:i}=l.useContext(d);return n(r.Group,{className:s,children:[y(t)?e(r.GroupLabel,{className:[P[i][o],v[o],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:t}):null,a]})}export function MenuSeparator({className:n,...t}){return e(r.Separator,{className:b("-mx-1 my-1 h-px bg-(--n-line)",n??""),...t})}export function MenuSubmenu({label:t,startIcon:a,disabled:c=!1,side:u,sideOffset:p=4,children:h,className:f,style:g}){const N=l.useContext(d),{size:v,density:C,color:z}=N,M=i();return n(r.SubmenuRoot,{children:[n(r.SubmenuTrigger,{disabled:c,className:$(v,C,!1,!c),style:s,onPointerMove:o(void 0,!c),children:[y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:t}),e("span",{className:`${R} text-(--neba-muted-fg) ${"rtl"===M?"rotate-90":"-rotate-90"}`,children:e(m,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:u??"inline-end",sideOffset:p,align:"start",children:e(r.Popup,{className:b(I,k[v],x[v],f??""),style:{...O(z,3),...g},children:h})})})]})}export function Menu(t){const{size:a="md",color:s="primary",density:o="default",trigger:i,open:c,defaultOpen:u,onOpenChange:m,side:p="bottom",align:h="start",sideOffset:f=6,modal:g,openOnHover:y=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:z,children:M}=w(t,["size","density"]),P=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:P,children:n(r.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:g,loopFocus:N,disabled:v,children:[i?e(r.Trigger,{render:i,openOnHover:y,disabled:v}):null,e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:p,align:h,sideOffset:f,children:e(r.Popup,{className:b(I,k[a],x[a],C??""),style:{...O(s,3),...z},children:M})})})]})})}export function ContextMenu(t){const{size:a="md",color:s="primary",density:o="default",content:r,children:i,open:u,defaultOpen:m,onOpenChange:p,loopFocus:h=!0,disabled:f=!1,className:g,style:y}=w(t,["size","density"]),N=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:N,children:n(c.Root,{open:u,defaultOpen:m,onOpenChange:e=>p?.(e),loopFocus:h,disabled:f,children:[e(c.Trigger,{children:i}),e(c.Portal,{children:e(c.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",children:e(c.Popup,{className:b(I,k[a],x[a],g??""),style:{...O(s,3),...y},children:r})})})]})})}