A stable, CSS-safe per-instance scope class name (no leading dot) for a theme instance root — e.g.
sheetxl-studio-r0. Set it as the element's className and, for the matching @scope selector, prefix a
dot: @scope (.${cls}).
id is typically a React useId() value, which is wrapped in colons (":r0:") — invalid in a class name
and, unescaped, a broken selector. Every non-[A-Za-z0-9_-] character is stripped so the result is valid
in both a class attribute and a selector, while staying unique (the colons only delimit, they don't
distinguish). Prefer a component-instance id (useId()) over data ids so the scope is stable across the
data the component renders.
A stable, CSS-safe per-instance scope class name (no leading dot) for a theme instance root — e.g.
sheetxl-studio-r0. Set it as the element'sclassNameand, for the matching@scopeselector, prefix a dot:@scope (.${cls}).idis typically a ReactuseId()value, which is wrapped in colons (":r0:") — invalid in a class name and, unescaped, a broken selector. Every non-[A-Za-z0-9_-]character is stripped so the result is valid in both aclassattribute and a selector, while staying unique (the colons only delimit, they don't distinguish). Prefer a component-instance id (useId()) over data ids so the scope is stable across the data the component renders.