neba 1.17.1 → 1.18.1

package/dist/internal/run.d.ts

@@ -40,13 +40,18 @@ export declare function runIcon(status: NebaRunStatus): React.ReactElement;
  */
 export declare function runColor(status: NebaRunStatus, color: NebaColor): NebaColor;
 /**
- * A length of time, in the reader's own language.
+ * A length of time, in the language of the sentence around it.
  *
  * `Intl` knows the words, so none of this is in `i18n.ts`: what it decides is
  * only the unit and how many digits are worth printing. Under a second the
  * number is milliseconds, because "0.3s" is a measurement written in the wrong
  * unit; over it, seconds, to one decimal place for the first ten and then to
  * none — a step that ran for four minutes is not more informative at 247.3.
+ *
+ * With no `locale` it is English, because that is what the library's own words
+ * fall back to and a duration is printed inside them: left to the runtime, a
+ * Korean browser wrote "Thought for 2.4초". It also means the server and the
+ * browser can never disagree about it.
  */
 export declare function formatDuration(ms: number, locale?: string): string;
 /**

package/dist/internal/run.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as t from"react";import{CircleIcon as e,DangerIcon as n,SpinnerIcon as u,SuccessIcon as s}from"./icons.js";import{numberFormatter as o}from"./format.js";export function runIcon(t){switch(t){case"running":return r(u,{});case"success":return r(s,{});case"error":return r(n,{});default:return r(e,{})}}export function runColor(r,t){switch(r){case"success":return"success";case"error":return"danger";case"pending":return"secondary";default:return t}}export function formatDuration(r,t){if(!Number.isFinite(r)||r<0)return"";if(r<1e3)return o(t,{style:"unit",unit:"millisecond",unitDisplay:"narrow",maximumFractionDigits:0}).format(Math.round(r));const e=r/1e3;return o(t,{style:"unit",unit:"second",unitDisplay:"narrow",maximumFractionDigits:e<10?1:0}).format(e)}const i="undefined"==typeof document?t.useEffect:t.useLayoutEffect;export function useElapsed(r,e){const n=r&&void 0===e,[u,s]=t.useState(null),[o,c]=t.useState(n);o!==n&&(c(n),n&&s(null));const a=t.useRef(null);return i(()=>{if(!n)return;const r=Date.now(),t=setInterval(()=>s(Date.now()-r),1e3);return()=>{clearInterval(t),a.current=Date.now()-r}},[n]),i(()=>{n||null===a.current||(s(a.current),a.current=null)},[n]),e??u}
+"use client";import{jsx as r}from"react/jsx-runtime";import*as t from"react";import{useLayoutEffectOnClient as e}from"./layout-effect.js";import{CircleIcon as n,DangerIcon as u,SpinnerIcon as o,SuccessIcon as s}from"./icons.js";import{numberFormatter as i}from"./format.js";export function runIcon(t){switch(t){case"running":return r(o,{});case"success":return r(s,{});case"error":return r(u,{});default:return r(n,{})}}export function runColor(r,t){switch(r){case"success":return"success";case"error":return"danger";case"pending":return"secondary";default:return t}}export function formatDuration(r,t){if(!Number.isFinite(r)||r<0)return"";const e=t??"en";if(r<1e3)return i(e,{style:"unit",unit:"millisecond",unitDisplay:"narrow",maximumFractionDigits:0}).format(Math.round(r));const n=r/1e3;return i(e,{style:"unit",unit:"second",unitDisplay:"narrow",maximumFractionDigits:n<10?1:0}).format(n)}export function useElapsed(r,n){const u=r&&void 0===n,[o,s]=t.useState(null),[i,c]=t.useState(u);i!==u&&(c(u),u&&s(null));const a=t.useRef(null);return e(()=>{if(!u)return;const r=Date.now(),t=setInterval(()=>s(Date.now()-r),1e3);return()=>{clearInterval(t),a.current=Date.now()-r}},[u]),e(()=>{u||null===a.current||(s(a.current),a.current=null)},[u]),n??o}

package/dist/internal/sizer.d.ts

@@ -1,4 +1,14 @@
 import type * as React from 'react';
+/**
+ * The samples a `WidthSizer` needs, out of all of them.
+ *
+ * Only the widest sample decides the width, so a Select with two hundred and
+ * fifty countries was two hundred and fifty boxes laid out for the sake of one.
+ * A string is kept when it is long enough to be the widest and dropped
+ * otherwise. Anything that is not a string is kept whatever it is, since
+ * nothing short of laying it out says how wide a node is.
+ */
+export declare function widestSamples(samples: readonly React.ReactNode[]): React.ReactNode[];
 /**
  * Holds a control open at the width of the widest thing it could ever say.
  *

package/dist/internal/sizer.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";export function WidthSizer({samples:a}){return 0===a.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:a.map((a,n)=>"string"==typeof a?e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`):e("span",{className:"block whitespace-nowrap",children:a},n))})}
+import{jsx as e}from"react/jsx-runtime";const t=/[\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]/g;function a(e){return e.length+(e.match(t)?.length??0)}export function widestSamples(e){let t=0;for(const n of e)"string"==typeof n&&(t=Math.max(t,a(n)));return e.filter(e=>"string"!=typeof e||a(e)>=.4*t)}export function WidthSizer({samples:t}){return 0===t.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:t.map((t,a)=>"string"==typeof t?e("span",{"data-sample":t,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${a}:${t}`):e("span",{className:"block whitespace-nowrap",children:t},a))})}

package/dist/internal/styles.d.ts

@@ -22,7 +22,7 @@
  * Chip before anything imported them.
  */
 import type * as React from 'react';
-import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../types.js';
+import type { NebaColor, NebaDensity, NebaElevation, NebaOrientation, NebaSize, NebaVariant } from '../types.js';
 /**
  * Corner radius. ~45% of the control height at every step, held just short of
  * the 50% that would make it a pill.
@@ -215,6 +215,31 @@ export declare const stackGapClasses: Record<NebaSize, string>;
  * use, so a card's title lines up with the buttons that end up inside it.
  */
 export declare const sheetTitleClasses: Record<NebaSize, string>;
+/**
+ * What a sheet puts on the element around its `title`.
+ *
+ * A plain string needs nothing. A sheet that belongs in the document outline is
+ * given a real heading, `title={<h2>…</h2>}`, and that heading arrives with the
+ * browser's 1.5em bold and its margins, which would ignore the scale
+ * `sheetTitleClasses` just set — so it inherits the wrapper's font and loses
+ * its margins.
+ *
+ * At two strengths, as Typography's scale is. The **guard** reaches a heading
+ * with no `class` at all, at three classes' worth, because `.prose h2` and
+ * `.vp-doc h2` are a class plus a tag: without it a `<Card title={<h2>…</h2>}>`
+ * inside rendered Markdown came out at 24px where the card asked for 15px. A
+ * heading that carries a class gets only the **floor**, at zero specificity,
+ * which still takes the browser's defaults away and loses to every class on it,
+ * so `title={<h2 className="text-xl">…</h2>}` is 20px. The heading is the
+ * caller's element, so its classes cannot be read per property the way
+ * `internal/overrides.ts` reads a component's own `className`; having one at
+ * all is where the line is drawn.
+ *
+ * These are utilities rather than a rule in `styles.css`, which in a consumer's
+ * own Tailwind build is unlayered and would beat every class on the heading.
+ * `neba-title` closes the guard's selector, and is a hook as well.
+ */
+export declare const sheetTitleHeadingClasses: string;
 /**
  * The same ladder, for a title that is a real heading element.
  *
@@ -230,8 +255,9 @@ export declare const sheetTitleClasses: Record<NebaSize, string>;
  *
  * So those three write their type through `[&.neba-heading]`, which compiles to
  * two classes, and carry `neba-heading` to close the selector. It is the same
- * arrangement `neba-link` and `neba-typography` make, and the same trade: an
- * override through `className` needs Tailwind's `!`.
+ * guard `neba-link` and `neba-typography` write, without the floor they drop
+ * to for a property a caller sets (`internal/overrides.ts`): none of the three
+ * headings takes a caller's `className`, so the host is all it holds off.
  *
  * This is a second spelling of one ladder, which is normally the thing to avoid.
  * It is checked rather than trusted — `test/package/resolution.test.ts` asserts
@@ -248,6 +274,18 @@ export declare const sheetBodyClasses: Record<NebaSize, string>;
 export declare const sheetHeaderGapClasses: Record<NebaSize, string>;
 /** Between a sheet's sections, when there are no dividers to separate them. */
 export declare const sheetSectionGapClasses: Record<NebaSize, string>;
+/**
+ * Between the options of a RadioGroup or a CheckboxGroup, when no `spacing`
+ * says otherwise.
+ *
+ * A column stands on the ladder above, the one a Form and a Fieldset put
+ * between their fields, so at `md` an option is as far from the next as a
+ * field is: a column of checkboxes and a column of text fields set side by side
+ * keep one rhythm. A row keeps a wider step along it, because a label has to
+ * end visibly before the next box starts, and puts its wrapped lines on the
+ * column's step.
+ */
+export declare const optionGapClasses: Record<NebaOrientation, Record<NebaSize, string>>;
 /**
  * The frosted surface: a translucent fill over a blurred backdrop, a tile of
  * noise blended into it for tooth, and an angled sheen. The blur makes it a

package/dist/internal/styles.js

@@ -1 +1 @@
-export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const fieldHeightClasses={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"};export const controlHeightValues={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"};export const measureWidths={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"number"==typeof e?`${e}px`:measureWidths[e]??e}export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const metaTextValues={xs:"0.625rem",sm:"0.6875rem",md:"0.75rem",lg:"0.8125rem",xl:"0.875rem"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const headingTitleClasses={xs:"[&.neba-heading]:text-[0.75rem]/[1rem]",sm:"[&.neba-heading]:text-[0.8125rem]/[1.125rem]",md:"[&.neba-heading]:text-[0.9375rem]/[1.25rem]",lg:"[&.neba-heading]:text-[1.0625rem]/[1.5rem]",xl:"[&.neba-heading]:text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const ringRestClasses="[outline:0_solid_transparent]";export const transitionClasses=`${ringRestClasses} [transition-property:background-color,border-color,box-shadow,color,outline-color] [transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration),var(--neba-duration)] [transition-timing-function:var(--neba-ease)]`;export const pressTransitionClasses="active:[transition-duration:0ms]";export const popupFadeStateClasses="data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";export const popupFadeClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease)] "+popupFadeStateClasses;export const focusRingClasses=`${ringRestClasses} outline-offset-2 focus-visible:[outline:2px_solid_var(--n-ring)]`;export const insetRingClasses=`${ringRestClasses} outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]`;export const focusWithinRingClasses=`${ringRestClasses} outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] supports-[not_selector(:has(*))]:focus-within:[outline:2px_solid_var(--n-ring)]`;export const fieldRingClasses=`${ringRestClasses} outline-offset-0 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)]`;export const fieldFocusTransitionClasses="focus-within:[transition-duration:var(--neba-duration)]";export function clampClasses(e){return e>1?"line-clamp-(--n-lines)":"truncate"}export function clampSlot(e){return void 0!==e&&e>1?{"--n-lines":Math.floor(e)}:void 0}export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";const e="[transition:height_var(--neba-duration)_var(--neba-ease)] motion-reduce:[transition-duration:0ms] data-[starting-style]:h-0 data-[ending-style]:h-0";export const collapsiblePanelClasses=`h-(--collapsible-panel-height) overflow-hidden ${e}`;export const accordionPanelClasses=`h-(--accordion-panel-height) overflow-hidden ${e}`;export const disclosureTriggerClasses="group/disclosure";export const disclosureChevronClasses="flex h-[1lh] shrink-0 items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] group-data-[panel-open]/disclosure:rotate-180";export const preformattedClasses="m-0 overflow-auto rounded-(--neba-radius-sm) bg-(--neba-groove) p-2 font-mono text-[0.9em]/[1.5] whitespace-pre";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,t){const n="solid"===t;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const tintPlateClasses="neba-tint-plate";export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)] hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)] focus-within:hover:[border-color:var(--n-ring)]`,text:"text-(--neba-fg) bg-transparent hover:bg-(--n-soft) focus-within:bg-(--n-soft-hover) focus-within:hover:bg-(--n-soft-hover)"};export const fieldReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]`,text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const fieldSheetClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-hover) focus-within:bg-(--n-panel-hover)`,text:fieldRestClasses.text};export const fieldSheetReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel)`,text:"text-(--neba-fg) bg-transparent"};export const fieldSheetDisabledClasses={solid:disabledClasses.solid,outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:transparent] shadow-none",text:disabledClasses.text};export const citationMarkClasses="inline-flex shrink-0 items-center justify-center rounded-[0.3em] min-w-[1.5em] px-[0.35em] py-[0.05em] bg-(--n-soft) text-[0.8em]/[1.6] font-semibold text-(--n-on-tint) tabular-nums";export const chipRemoveClasses="relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full size-[1.15em] cursor-pointer opacity-70 neba-hit [transition:opacity_var(--neba-duration)_var(--neba-ease)] hover:opacity-100 focus-visible:opacity-100 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1 disabled:cursor-not-allowed";export const sheetCloseClasses="relative flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center rounded-full text-(--neba-muted-fg) neba-hit [&_svg]:size-[1.1em] [&_svg]:shrink-0 [transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)] hover:bg-(--n-soft) hover:text-(--neba-fg) focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const s=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function toPixels(e,n){const r=s.exec(e);if(!r)return;const a=Number(r[1]);if(!Number.isNaN(a))switch(r[2]){case"px":return a;case"%":return n.percentOf*a/100;case"em":return a*t(n.relativeTo);default:return a*t("undefined"==typeof document?null:document.documentElement)}}function t(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}
+export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const fieldHeightClasses={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"};export const controlHeightValues={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"};export const measureWidths={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"number"==typeof e?`${e}px`:measureWidths[e]??e}export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const metaTextValues={xs:"0.625rem",sm:"0.6875rem",md:"0.75rem",lg:"0.8125rem",xl:"0.875rem"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetTitleHeadingClasses="neba-title [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:[font:inherit] [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:m-0 [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit] [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:m-0";export const headingTitleClasses={xs:"[&.neba-heading]:text-[0.75rem]/[1rem]",sm:"[&.neba-heading]:text-[0.8125rem]/[1.125rem]",md:"[&.neba-heading]:text-[0.9375rem]/[1.25rem]",lg:"[&.neba-heading]:text-[1.0625rem]/[1.5rem]",xl:"[&.neba-heading]:text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const optionGapClasses={vertical:sheetSectionGapClasses,horizontal:{xs:"gap-x-5 gap-y-1.5",sm:"gap-x-5 gap-y-2",md:"gap-x-5 gap-y-3",lg:"gap-x-5 gap-y-3.5",xl:"gap-x-5 gap-y-4"}};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const ringRestClasses="[outline:0_solid_transparent]";export const transitionClasses=`${ringRestClasses} [transition-property:background-color,border-color,box-shadow,color,outline-color] [transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration),var(--neba-duration)] [transition-timing-function:var(--neba-ease)]`;export const pressTransitionClasses="active:[transition-duration:0ms]";export const popupFadeStateClasses="data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";export const popupFadeClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease)] "+popupFadeStateClasses;export const focusRingClasses=`${ringRestClasses} outline-offset-2 focus-visible:[outline:2px_solid_var(--n-ring)]`;export const insetRingClasses=`${ringRestClasses} outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]`;export const focusWithinRingClasses=`${ringRestClasses} outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] supports-[not_selector(:has(*))]:focus-within:[outline:2px_solid_var(--n-ring)]`;export const fieldRingClasses=`${ringRestClasses} outline-offset-0 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)]`;export const fieldFocusTransitionClasses="focus-within:[transition-duration:var(--neba-duration)]";export function clampClasses(e){return e>1?"line-clamp-(--n-lines)":"truncate"}export function clampSlot(e){return void 0!==e&&e>1?{"--n-lines":Math.floor(e)}:void 0}export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";const e="[transition:height_var(--neba-duration)_var(--neba-ease)] motion-reduce:[transition-duration:0ms] data-[starting-style]:h-0 data-[ending-style]:h-0";export const collapsiblePanelClasses=`h-(--collapsible-panel-height) overflow-hidden ${e}`;export const accordionPanelClasses=`h-(--accordion-panel-height) overflow-hidden ${e}`;export const disclosureTriggerClasses="group/disclosure";export const disclosureChevronClasses="flex h-[1lh] shrink-0 items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] group-data-[panel-open]/disclosure:rotate-180";export const preformattedClasses="m-0 overflow-auto rounded-(--neba-radius-sm) bg-(--neba-groove) p-2 font-mono text-[0.9em]/[1.5] whitespace-pre";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,t){const n="solid"===t;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const tintPlateClasses="neba-tint-plate";export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)] hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)] focus-within:hover:[border-color:var(--n-ring)]`,text:"text-(--neba-fg) bg-transparent hover:bg-(--n-soft) focus-within:bg-(--n-soft-hover) focus-within:hover:bg-(--n-soft-hover)"};export const fieldReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]`,text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const fieldSheetClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-hover) focus-within:bg-(--n-panel-hover)`,text:fieldRestClasses.text};export const fieldSheetReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel)`,text:"text-(--neba-fg) bg-transparent"};export const fieldSheetDisabledClasses={solid:disabledClasses.solid,outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:transparent] shadow-none",text:disabledClasses.text};export const citationMarkClasses="inline-flex shrink-0 items-center justify-center rounded-[0.3em] min-w-[1.5em] px-[0.35em] py-[0.05em] bg-(--n-soft) text-[0.8em]/[1.6] font-semibold text-(--n-on-tint) tabular-nums";export const chipRemoveClasses="relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full size-[1.15em] cursor-pointer opacity-70 neba-hit [transition:opacity_var(--neba-duration)_var(--neba-ease)] hover:opacity-100 focus-visible:opacity-100 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1 disabled:cursor-not-allowed";export const sheetCloseClasses="relative flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center rounded-full text-(--neba-muted-fg) neba-hit [&_svg]:size-[1.1em] [&_svg]:shrink-0 [transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)] hover:bg-(--n-soft) hover:text-(--neba-fg) focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const s=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function toPixels(e,n){const r=s.exec(e);if(!r)return;const a=Number(r[1]);if(!Number.isNaN(a))switch(r[2]){case"px":return a;case"%":return n.percentOf*a/100;case"em":return a*t(n.relativeTo);default:return a*t("undefined"==typeof document?null:document.documentElement)}}function t(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}

package/dist/internal/text.d.ts

@@ -13,10 +13,12 @@ export declare function textOf(node: unknown): string;
  * `👩‍👩‍👧` is seven of them, `한` typed on a Korean keyboard can be three, and an
  * effect that advances by code points spends four frames assembling an emoji
  * out of parts that mean nothing on their own. `Intl.Segmenter` knows where the
- * boundaries actually are; the spread is the fallback for a runtime that does
- * not have it.
+ * boundaries actually are; `portableGraphemesOf` is the fallback for a runtime
+ * that does not have it.
  */
 export declare function graphemesOf(text: string, locale?: string): string[];
+/** The text split into characters, the same way on every engine. */
+export declare function portableGraphemesOf(text: string): string[];
 /**
  * The text split into words, with each word keeping the space that followed it.
  *
@@ -27,6 +29,26 @@ export declare function graphemesOf(text: string, locale?: string): string[];
  *
  * `Intl.Segmenter` again where it exists — a word boundary is not a space in
  * Japanese, Thai or Chinese, and splitting those on whitespace produces one
- * piece holding the whole sentence.
+ * piece holding the whole sentence. `portableWordsOf` where it does not.
  */
 export declare function wordsOf(text: string, locale?: string): string[];
+/**
+ * Whether a character belongs to a script written without spaces, where a run
+ * of letters is not one word and a line may break inside it.
+ *
+ * `portableWordsOf` makes each one a piece of its own: a regular expression
+ * cannot tell where a Japanese or a Thai word ends, and one character at a time
+ * is never coarser than the segmenter's answer.
+ */
+export declare function standsAlone(grapheme: string): boolean;
+/**
+ * The text split into words, the same way on every engine.
+ *
+ * The same shape as `wordsOf`: a word keeps the punctuation and the space that
+ * follow it, and what comes before the first word is a piece of its own. Where
+ * it disagrees with `Intl.Segmenter` it cuts finer, never coarser — a Japanese
+ * sentence is a piece per character rather than a piece per word — so a line
+ * that is cut again once the page has hydrated only ever has pieces merged, and
+ * nothing that was already on screen arrives a second time.
+ */
+export declare function portableWordsOf(text: string): string[];

package/dist/internal/text.js

@@ -1 +1 @@
-import{segmenter as t}from"./format.js";export function textOf(t){return"string"==typeof t||"number"==typeof t?String(t):Array.isArray(t)?t.map(textOf).join(""):null!==t&&"object"==typeof t&&"props"in t?textOf(t.props.children):""}export function graphemesOf(e,r){const n=t(r,"grapheme");return n?[...n.segment(e)].map(t=>t.segment):[...e]}export function wordsOf(e,r){const n=t(r,"word");if(n){const t=[];for(const{segment:r,isWordLike:o}of n.segment(e))o||0===t.length?t.push(r):t[t.length-1]+=r;return t.filter(t=>t.length>0)}return e.split(/(\s+)/).reduce((t,e,r)=>(r%2==0?e&&t.push(e):t.length>0&&(t[t.length-1]+=e),t),[])}
+import{segmenter as t}from"./format.js";export function textOf(t){return"string"==typeof t||"number"==typeof t?String(t):Array.isArray(t)?t.map(textOf).join(""):null!==t&&"object"==typeof t&&"props"in t?textOf(t.props.children):""}export function graphemesOf(e,r){const u=t(r,"grapheme");return u?[...u.segment(e)].map(t=>t.segment):portableGraphemesOf(e)}const e=/\r\n|\p{RI}\p{RI}|[\u1100-\u115F\uA960-\uA97C]*(?:[\uAC00-\uD7A3]|[\u1160-\u11A7\uD7B0-\uD7C6])[\u1160-\u11A7\uD7B0-\uD7C6]*[\u11A8-\u11FF\uD7CB-\uD7FB]*|[\u1100-\u115F\uA960-\uA97C]+|[\s\S](?:[\u094D\u09CD\u0ACD\u0B4D\u0C4D\u0D4D\u17D2]\p{L}|[\p{Gr_Ext}\p{EMod}\p{Mc}\u0E33\u0EB3]|\u200D\p{ExtPict}|\u200D)*/gu;export function portableGraphemesOf(t){return t.match(e)??[]}export function wordsOf(e,r){const u=t(r,"word");if(u){const t=[];for(const{segment:r,isWordLike:n}of u.segment(e))n||0===t.length?t.push(r):t[t.length-1]+=r;return t.filter(t=>t.length>0)}return portableWordsOf(e)}const r=/^(?=\p{L})[\p{scx=Han}\p{scx=Hiragana}\p{scx=Katakana}\p{scx=Thai}\p{scx=Lao}\p{scx=Khmer}\p{scx=Myanmar}]/u;export function standsAlone(t){return r.test(t)}const u=/^[\p{Alphabetic}\p{Pc}]/u,n=/^\p{Nd}/u,o=/^['\u2019]$/u,p=/^[.',;\u2019]$/u;function s(t){return standsAlone(t)?"alone":u.test(t)?"letter":n.test(t)?"digit":"other"}export function portableWordsOf(t){const e=portableGraphemesOf(t),r=e.map(s),u=[];let n=!1;return e.forEach((t,e)=>{const s=r[e],a="other"===s&&r[e-1]===r[e+1]&&("letter"===r[e-1]&&o.test(t)||"digit"===r[e-1]&&p.test(t)),c="letter"===s||"digit"===s||a;0===u.length||"alone"===s||c&&!n?u.push(t):u[u.length-1]+=t,n=c}),u}