@starci/grammar 0.4.11 → 0.4.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/common/styles.css +68 -0
- package/dist/core/composite/VerticalScrollRegion/index.d.ts +11 -0
- package/dist/core/composite/VerticalScrollRegion/index.d.ts.map +1 -1
- package/dist/core/composite/VerticalScrollRegion/index.js +3 -2
- package/dist/core/composite/VerticalScrollRegion/index.js.map +1 -1
- package/package.json +1 -1
package/dist/common/styles.css
CHANGED
|
@@ -371,6 +371,23 @@
|
|
|
371
371
|
min-width: max-content;
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
+
/*
|
|
375
|
+
* The same one scrolling axis, for the vertical region.
|
|
376
|
+
*
|
|
377
|
+
* The vendor's `.scroll-shadow--vertical` sets `overflow-y: auto` alone, and every host class
|
|
378
|
+
* this region wears - the chat conversation, the chat overlay rail, the accordion region, the
|
|
379
|
+
* form scroll viewport - names that same single axis or names none at all. A computed non-visible
|
|
380
|
+
* overflow on one axis forces the other from `visible` to `auto`, so the region rendered
|
|
381
|
+
* `overflow: auto auto`: two scrolling axes under an OVERFLOW-3 claim that promises one. Naming
|
|
382
|
+
* both axes on the region's own identity holds the render at the one axis the claim describes,
|
|
383
|
+
* and needs no `!important` to do it: no host class and no vendor rule ever names `overflow-x`,
|
|
384
|
+
* so this declaration is unopposed whichever order a consumer imports the two sheets in.
|
|
385
|
+
*/
|
|
386
|
+
[data-grammar-scroll-region="vertical"] {
|
|
387
|
+
overflow-x: hidden;
|
|
388
|
+
overflow-y: auto;
|
|
389
|
+
}
|
|
390
|
+
|
|
374
391
|
@media (min-width: 40rem) {
|
|
375
392
|
.starci-core-form-page {
|
|
376
393
|
padding-block: 2.5rem;
|
|
@@ -2309,6 +2326,57 @@
|
|
|
2309
2326
|
border-radius: var(--field-radius, calc(var(--radius, 0.5rem) * 1.5)) !important;
|
|
2310
2327
|
}
|
|
2311
2328
|
|
|
2329
|
+
/* --- Heading: the FONT rank each level stamps, drawn from the family's own sheet. --- */
|
|
2330
|
+
/*
|
|
2331
|
+
* `Heading` renders through the vendor's `Typography.Heading`, which sizes `.typography--h1`
|
|
2332
|
+
* through `--h4` from the vendor's own sheet. Until 0.4.12 the family answered that with the
|
|
2333
|
+
* Tailwind utility classes on the component alone - and a utility class exists only where the
|
|
2334
|
+
* CONSUMER's Tailwind build scanned this package's dist, which is the same debt
|
|
2335
|
+
* `shipped-geometry.spec.ts` already refuses for layout. A consumer whose scan stopped finding
|
|
2336
|
+
* the package measured 36px under a `FONT-4` stamp and 30px under `FONT-3`: the vendor's sizes,
|
|
2337
|
+
* under the family's promise. The scale is the family's, so the family's sheet draws it, the way
|
|
2338
|
+
* `.starci-core-text` above already draws its own.
|
|
2339
|
+
*
|
|
2340
|
+
* `!important` because the vendor rule has to lose in either import order - consumers import
|
|
2341
|
+
* this sheet both before and after `@heroui/styles`, so layer rank alone cannot decide it. The
|
|
2342
|
+
* values re-state what the utilities carry, so nothing moves where a scan still finds them.
|
|
2343
|
+
*
|
|
2344
|
+
* `display` is the one row a family may re-cut: `offset-pop` gives it its own weight, tracking
|
|
2345
|
+
* and 0.96 line height. So only FONT-6's SIZE is important here; its rhythm stays a normal
|
|
2346
|
+
* declaration that a later family layer can still own.
|
|
2347
|
+
*/
|
|
2348
|
+
.grammar-common-root [data-component="Heading"][data-scale="standard"][data-level="1"] {
|
|
2349
|
+
font-size: 1.25rem !important;
|
|
2350
|
+
font-weight: 600 !important;
|
|
2351
|
+
letter-spacing: -0.025em !important;
|
|
2352
|
+
line-height: 1.75rem !important;
|
|
2353
|
+
}
|
|
2354
|
+
|
|
2355
|
+
.grammar-common-root [data-component="Heading"][data-scale="standard"][data-level="2"] {
|
|
2356
|
+
font-size: 1rem !important;
|
|
2357
|
+
font-weight: 600 !important;
|
|
2358
|
+
line-height: 1.5rem !important;
|
|
2359
|
+
}
|
|
2360
|
+
|
|
2361
|
+
.grammar-common-root [data-component="Heading"][data-scale="standard"][data-level="3"] {
|
|
2362
|
+
font-size: 0.875rem !important;
|
|
2363
|
+
font-weight: 500 !important;
|
|
2364
|
+
line-height: 1.25rem !important;
|
|
2365
|
+
}
|
|
2366
|
+
|
|
2367
|
+
.grammar-common-root [data-component="Heading"][data-scale="standard"][data-level="4"] {
|
|
2368
|
+
font-size: 0.75rem !important;
|
|
2369
|
+
font-weight: 500 !important;
|
|
2370
|
+
line-height: 1rem !important;
|
|
2371
|
+
}
|
|
2372
|
+
|
|
2373
|
+
.grammar-common-root [data-component="Heading"][data-scale="display"] {
|
|
2374
|
+
font-size: 2.25rem !important;
|
|
2375
|
+
font-weight: 600;
|
|
2376
|
+
letter-spacing: -0.025em;
|
|
2377
|
+
line-height: 1.25;
|
|
2378
|
+
}
|
|
2379
|
+
|
|
2312
2380
|
/* --- Text: one resolved line of copy, drawn from the attributes it already emits. --- */
|
|
2313
2381
|
.starci-core-text {
|
|
2314
2382
|
color: var(--foreground, var(--starci-core-foreground, CanvasText));
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
import type { ComponentProps, ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Which overflow answer this region gives for its one axis.
|
|
4
|
+
*
|
|
5
|
+
* `always` is the region standing on its own: the block axis scrolls, full stop (OVERFLOW-3).
|
|
6
|
+
* `needed` is that same one axis scrolling only where the content actually overflows (OVERFLOW-4).
|
|
7
|
+
* The region is the node that carries the stamp, so the owner has to be able to say which of the two
|
|
8
|
+
* it is; a `data-contract` passed in was, and still is, silently replaced by this element's own.
|
|
9
|
+
*/
|
|
10
|
+
export type VerticalScrollRegionOverflow = "always" | "needed";
|
|
2
11
|
export type VerticalScrollRegionProps = Omit<ComponentProps<"div">, "children"> & {
|
|
3
12
|
readonly children: ReactNode;
|
|
4
13
|
readonly isScrollable: boolean;
|
|
5
14
|
/** Hide scrollbar chrome by default while retaining wheel, touch and keyboard scrolling. */
|
|
6
15
|
readonly hideScrollBar?: boolean;
|
|
16
|
+
/** The region's own overflow answer; the stamp and the render both follow it. */
|
|
17
|
+
readonly overflow?: VerticalScrollRegionOverflow;
|
|
7
18
|
};
|
|
8
19
|
/** Use HeroUI's Vertical ScrollShadow without making consumers own its DOM contract. */
|
|
9
20
|
export declare const VerticalScrollRegion: (props: VerticalScrollRegionProps) => import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/VerticalScrollRegion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,4FAA4F;IAC5F,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/VerticalScrollRegion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD;;;;;;;GAOG;AACH,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9D,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,4FAA4F;IAC5F,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,iFAAiF;IACjF,QAAQ,CAAC,QAAQ,CAAC,EAAE,4BAA4B,CAAA;CACnD,CAAA;AAED,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,gCAMpE,CAAA"}
|
|
@@ -2,9 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { ScrollShadow } from "@heroui/react";
|
|
3
3
|
/** Use HeroUI's Vertical ScrollShadow without making consumers own its DOM contract. */
|
|
4
4
|
export const VerticalScrollRegion = (props) => {
|
|
5
|
-
const { children, isScrollable, hideScrollBar = true, ...regionProps } = props;
|
|
5
|
+
const { children, isScrollable, hideScrollBar = true, overflow = "always", ...regionProps } = props;
|
|
6
|
+
const contract = overflow === "needed" ? "MEASURE-7 OVERFLOW-4" : "MEASURE-7 OVERFLOW-3";
|
|
6
7
|
return isScrollable
|
|
7
|
-
? _jsx(ScrollShadow, { ...regionProps, "data-contract": "
|
|
8
|
+
? _jsx(ScrollShadow, { ...regionProps, "data-contract": contract, "data-grammar-overflow": overflow, "data-grammar-scroll-region": "vertical", hideScrollBar: hideScrollBar, orientation: "vertical", children: children })
|
|
8
9
|
: _jsx("div", { ...regionProps, children: children });
|
|
9
10
|
};
|
|
10
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/VerticalScrollRegion/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/VerticalScrollRegion/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAqB5C,wFAAwF;AACxF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,GAAG,IAAI,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAA;IACnG,MAAM,QAAQ,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAA;IACxF,OAAO,YAAY;QACf,CAAC,CAAC,KAAC,YAAY,OAAK,WAAW,mBAAiB,QAAQ,2BAAyB,QAAQ,gCAA6B,UAAU,EAAC,aAAa,EAAE,aAAa,EAAE,WAAW,EAAC,UAAU,YAAE,QAAQ,GAAgB;QAC/M,CAAC,CAAC,iBAAS,WAAW,YAAG,QAAQ,GAAO,CAAA;AAChD,CAAC,CAAA"}
|