v0.8.0

@pearpages/pulp-react 0.8.0

Minor Changes

• 9e08cc4: An open Dialog or Sheet no longer moves the page behind it. @pearpages/modals moves to ^0.5.0: Dialog (and so Sheet) used to leave an empty <div data-modal-id> where you wrote it while open, which took a slot in a grid, a flex row with a gap or a list and reflowed the layout. It now renders no element of its own, so it can sit anywhere, between grid items included.

  Breaking: DialogProps and SheetProps no longer accept className, style, data-*, aria-* or other HTML attributes, since there is no element to put them on. Move them to Dialog.Content / Sheet.Content, which render the dialog. data-modal-id moves to the dialog too, so a [data-modal-id] selector or test now matches the role="dialog" element.

Docs: https://pulp.pearpages.com · Compare: v0.7.0...v0.8.0

v0.7.0

@pearpages/pulp-tokens 0.7.0

Minor Changes

• 4654155: AppShell: the frame of an app's pages. Slots for header, sidebar, tabBar and footer around the page, which it renders in main; a slot left out takes no room, so a signed-out page passes no navigation. From 48rem the sidebar sits beside the page, below it the tab bar docks to the bottom edge, with CSS only. With a tab bar, the page (or the footer) clears it, and --app-shell-inset-block-end carries its height, which Toast now reads to stay above the bar. No hooks, so it renders on the server. Record 019. Tokens: --app-shell-* and a new semantic --size-sidebar-width (15rem).
• e2f00ef: NavList: a vertical list of links for an app's sidebar or a section's pages. A labelled nav with a list of links, the page marked aria-current="page" and its section aria-current="true", a nested list for a section's pages (sub), an optional icon and badge per link, and asChild for a router's link or a button. No hooks, so it renders on the server. Tokens: --nav-list-*.
• 180a652: TabBar: an app's primary navigation on a phone, three to five tabs docked to the bottom edge. A labelled nav with a list of links (not a tablist), the current tab aria-current="page", an icon over a visible label, a badge on the icon's corner, one prominent tab drawn as a raised round button, and the safe-area inset under it. position="static" leaves it in the flow. No hooks, so it renders on the server. Tokens: --tab-bar-*, and a new semantic --layer-navigation (900, below dialogs, toasts and popovers).

@pearpages/pulp-css 0.1.9

Patch Changes

• Updated dependencies [4654155]
• Updated dependencies [e2f00ef]
• Updated dependencies [180a652]
  • @pearpages/pulp-tokens@0.7.0

@pearpages/pulp-icons 0.3.0

Minor Changes

• 7513bd6: Eight glyphs bitepals drew by hand: Globe (language and region), Newspaper (a feed), UserPlus (a follow request, an invite), UserCheck (someone you follow), Flag (want to go), Lightbulb (a recommendation), Eye and EyeOff (shown and hidden). Same 24 grid and 2 px round stroke as the rest. For a two-tone look, set fill and color from your own CSS: the glyph's shapes take both.

@pearpages/pulp-react 0.7.0

Minor Changes

• 4654155: AppShell: the frame of an app's pages. Slots for header, sidebar, tabBar and footer around the page, which it renders in main; a slot left out takes no room, so a signed-out page passes no navigation. From 48rem the sidebar sits beside the page, below it the tab bar docks to the bottom edge, with CSS only. With a tab bar, the page (or the footer) clears it, and --app-shell-inset-block-end carries its height, which Toast now reads to stay above the bar. No hooks, so it renders on the server. Record 019. Tokens: --app-shell-* and a new semantic --size-sidebar-width (15rem).
• e2f00ef: NavList: a vertical list of links for an app's sidebar or a section's pages. A labelled nav with a list of links, the page marked aria-current="page" and its section aria-current="true", a nested list for a section's pages (sub), an optional icon and badge per link, and asChild for a router's link or a button. No hooks, so it renders on the server. Tokens: --nav-list-*.
• 180a652: TabBar: an app's primary navigation on a phone, three to five tabs docked to the bottom edge. A labelled nav with a list of links (not a tablist), the current tab aria-current="page", an icon over a visible label, a badge on the icon's corner, one prominent tab drawn as a raised round button, and the safe-area inset under it. position="static" leaves it in the flow. No hooks, so it renders on the server. Tokens: --tab-bar-*, and a new semantic --layer-navigation (900, below dialogs, toasts and popovers).

Patch Changes

• Updated dependencies [4654155]
• Updated dependencies [7513bd6]
• Updated dependencies [e2f00ef]
• Updated dependencies [180a652]
  • @pearpages/pulp-tokens@0.7.0
  • @pearpages/pulp-icons@0.3.0

Docs: https://pulp.pearpages.com · Compare: v0.6.1...v0.7.0

v0.6.1

@pearpages/pulp-tokens 0.6.0

Minor Changes

• a1008ac: A third brand, data-brand="menja", for menja.bé: the Catalan palette of its design (senyera yellow actions with ink text, ochre links and focus ring, senyera red for errors and accents only, garnet as the inverse surface, cream ground; a warm dark scheme) on bitepals' radii, spacing, motion and pill buttons. Its display face is its own: Trochut (Andreu Balius, after Joan Trochut's Barcelona Bisonte), with Inter for body and controls; load it from @fontsource/trochut. tokens.css, tokens.json and native (a menja export) carry it. Every text pair meets AA in both schemes.

• 3d7075e: Every semantic token in tokens.json now carries a role: one sentence on what it exists for, the same in every brand. Before, 86 of the 114 semantic tokens had no description of their own. Where a brand's value needs explaining ("Ink, not white: white on the brand orange is 2.8:1"), the entry carries a note as well.

  Additive: description is still there, as the role and the note together. CSS, theme.css and native are unchanged.

@pearpages/pulp-css 0.1.8

Patch Changes

• Updated dependencies [a1008ac]
• Updated dependencies [3d7075e]
  • @pearpages/pulp-tokens@0.6.0

@pearpages/pulp-react 0.6.1

Patch Changes

• 3b8cb7d: Four components change category (record 018): Avatar → Data, Accordion → Layout, Link → Navigation, Chip → Forms. Only the manifest's category and the Storybook URLs change (components-utilities-avatar--docs is now components-data-avatar--docs); imports stay the same.
• Updated dependencies [a1008ac]
• Updated dependencies [3d7075e]
  • @pearpages/pulp-tokens@0.6.0

Docs: https://pulp.pearpages.com · Compare: v0.6.0...v0.6.1

v0.6.0

@pearpages/pulp-tokens 0.5.1

Patch Changes

• 190eb4a: Package metadata: keywords, homepage (the docs site) and bugs (GitHub issues) on every package, so npm search finds them and each npm page links back to the docs.

@pearpages/pulp-css 0.1.7

Patch Changes

• 190eb4a: Package metadata: keywords, homepage (the docs site) and bugs (GitHub issues) on every package, so npm search finds them and each npm page links back to the docs.
• Updated dependencies [190eb4a]
  • @pearpages/pulp-tokens@0.5.1

@pearpages/pulp-icons 0.2.1

Patch Changes

• 190eb4a: Package metadata: keywords, homepage (the docs site) and bugs (GitHub issues) on every package, so npm search finds them and each npm page links back to the docs.

@pearpages/pulp-react 0.6.0

Minor Changes

• fa83c02: Every compound part is now exported under a flat name as well: MenuTrigger, MenuContent, DialogTitle, TabsList, FieldLabel, CardHeader and so on, from the same entry as its parent (and from the barrel). The dotted form (Menu.Trigger) keeps working everywhere it did.

  Use the flat names in a React Server Component. A Server Component reaches a client entry as a client reference, which carries only the module's named exports, so <Menu.Trigger> in an App Router page failed the render with "Element type is invalid … got: undefined". Covers Accordion, Card, DataGrid, Dialog, Field, Menu, Popover, SegmentedControl, Sheet, Table and Tabs.

Patch Changes

• 190eb4a: Package metadata: keywords, homepage (the docs site) and bugs (GitHub issues) on every package, so npm search finds them and each npm page links back to the docs.
• Updated dependencies [190eb4a]
  • @pearpages/pulp-tokens@0.5.1
  • @pearpages/pulp-icons@0.2.1

Docs: https://pulp.pearpages.com · Compare: v0.5.0...v0.6.0

v0.5.0

@pearpages/pulp-tokens 0.5.0

Minor Changes

• 0bc8c65: New Heatmap (@pearpages/pulp-react/heatmap, Data): a GitHub-style contribution calendar built on @pearpages/heatmap, themed by pulp's tokens and following brand and data-scheme. Import @pearpages/heatmap/styles.css into the vendor layer when you use it. The entry re-exports the data helpers (groupByWeeks, createDateString, parseDateString, getLastYearPeriod, getLastMonthPeriod) and their types.

  New semantic tokens --color-data-sequential-0 … -4 in both brands: a sequential scale on the brand's own hue for density data, inverted in dark so more is always brighter (decision record 009).

@pearpages/pulp-css 0.1.6

Patch Changes

• Updated dependencies [0bc8c65]
  • @pearpages/pulp-tokens@0.5.0

@pearpages/pulp-react 0.5.0

Minor Changes

• 0bc8c65: New Heatmap (@pearpages/pulp-react/heatmap, Data): a GitHub-style contribution calendar built on @pearpages/heatmap, themed by pulp's tokens and following brand and data-scheme. Import @pearpages/heatmap/styles.css into the vendor layer when you use it. The entry re-exports the data helpers (groupByWeeks, createDateString, parseDateString, getLastYearPeriod, getLastMonthPeriod) and their types.

  New semantic tokens --color-data-sequential-0 … -4 in both brands: a sequential scale on the brand's own hue for density data, inverted in dark so more is always brighter (decision record 009).

Patch Changes

• dd04d87: Menu and Popover can be server-rendered open. With defaultOpen (or a controlled open that starts true) their content read document.body during the render, so a server render threw. The content now renders closed on the server and opens one commit after hydration, moving focus in as it does after a click.
• dd04d87: ToastProvider no longer breaks hydration. Under server rendering (Next.js), the first client render portalled the notifications region while the server had rendered nothing there, so React discarded the server HTML and re-rendered the whole app on every page load. The region now mounts one commit after hydration; no toast can be fired before then, so nothing is lost. DialogSystem was checked the same way and was already safe. Both are covered by a server-render-then-hydrate test.
• Updated dependencies [0bc8c65]
  • @pearpages/pulp-tokens@0.5.0

Docs: https://pulp.pearpages.com · Compare: v0.4.0...v0.5.0

v0.4.0

@pearpages/pulp-tokens 0.4.0

Minor Changes

• d5e1098: Eight categorical accents at the semantic tier, in both brands: --color-accent-1 … --color-accent-8, each with its text colour --color-accent-on-1 … on-8. They follow the scheme (light-dark()), every pair is in the contrast tests at 4.5:1, and the hues come in the same order in every brand (blue, orange, green, violet, red, teal, amber, pink). They are for telling things of one kind apart, people mostly; a number carries no meaning. They are in theme.css and the native output too.

  Avatar and Chip take accent?: 1 | … | 8. On an Avatar it is the colour behind the initials (a picture ignores it). A Chip with an accent is filled with it; a toggle chip shows it as the border until it is selected. The consumer hashes an id to the index, so a colour is never passed as a style.

• e5d2bd6: Badge: tone="action", the brand's colour, in the three variants. For a marker that is not a status, such as the unread dot or count on a navigation item; it reads --badge-action-*, which point at the action tokens whose contrast is already tested.

• bc49901: A subtle Badge now draws a hairline edge in the tone's own colour, the same one as its label. On a tinted surface the subtle fill alone was not a pill: measured across both brands, every *-subtle fill sits between 1.00 and 1.40:1 against the surfaces it lands on, so "Pending" read as coloured text with no shape. The edge is the label's colour, which the contrast tests already hold to 4.5:1 on every surface, and a token test keeps the two from drifting apart.

  Every badge now carries a border, transparent unless the variant is subtle, so solid, subtle and dot stay the same size as each other; box-sizing: border-box keeps the dot at exactly --badge-dot-size. A badge with text is 2px wider and taller than before. New tokens: --badge-border-width and --badge-<tone>-subtle-border.

• 3743f63: Breaking (experimental component). The React Aria table is renamed DataGrid, and the name Table is freed for the plain <table> that ships alongside it. What it is called should say what it is: React Aria's is a role="grid" widget with roving focus, selection and sorting, and it costs ~52 kB and a client boundary; an HTML <table> is what most tables are.

  Rename map: Table → DataGrid, the five parts (Table.Header → DataGrid.Header, and .Column, .Body, .Row, .Cell), the types (TableProps → DataGridProps, and TableSelectionMode, TableDensity, TableSort, TableSortDirection, TableAlign), the entry point @pearpages/pulp-react/table → /data-grid, its stylesheet /table.css → /data-grid.css, and the tokens --table-* → --data-grid-*. Nothing about the behaviour or the props changed. Decision record 008.

• 5cd58f1: Dialog's width is a pulp token now, --dialog-width, from the new semantic --size-dialog-width (32.5rem, the same 520px the vendor was already using, so nothing moves). Set it in a class on Dialog.Content to size one dialog without touching the rest, the way --sheet-width already works for Sheet; @pearpages/modals' own --modal-width-md is set from it and stays pulp's business. Both are now said in the components' docs, with a story.

• 8822ba9: A brand can now override a single component token, in tokens/component/<brand>/<component>.json. The component tier is still declared once, on :root, and still reads only the semantic layer — this is for the case the semantic layer cannot express, where a component's value is itself brand. bitepals' buttons are pills, and no semantic name tells a button's radius from an input's, so --button-radius is var(--radius-full) under [data-brand="bitepals"] and bitepals drops the unlayered override it had been keeping. An override must reference the semantic layer and must name a token that already exists; both are tested, on every brand. Decision record 007.

• 2c5bb3f: New Table: a plain <table> with pulp's density and tokens. It holds no state and calls no hook, so it is a server entry — a page of rows costs no JavaScript and no client boundary, which is what the React Aria grid could never be. Compound in the same shape as DataGrid (Table.Header, Table.Column, Table.Body, Table.Row, Table.Cell), so moving between the two is mechanical.

  caption is required, because a table nobody named is a table a screen reader cannot introduce; captionHidden keeps the name without showing it. rowHeader on a cell makes it the row's th scope="row", align="end" right-aligns with tabular numerals, density="compact" tightens the rows, and Table.Body takes an emptyMessage. For rows the reader sorts or selects, reach for DataGrid. Decision record 008.

• 5096f3b: Toast: placement="bottom-center", for an app with a bottom navigation. The distance from the top or the bottom edge is now its own token, --toast-offset-block, separate from the inline --toast-offset, and the safe-area inset (env(safe-area-inset-top) / -bottom) is added to it, so a toast clears the notch and the home indicator; raise --toast-offset-block by the height of your navigation. If you had overridden --toast-offset to move the stack vertically, override --toast-offset-block too: both default to the same value.

Patch Changes

• 6681389: The bitepals brand's font.weight.medium and font.weight.semibold are 500 and 600, the weights the product has always used; they were 600 and 700, a step too heavy, and bitepals overrode both. The pulp brand is unchanged.
• b424c8d: The tokens README says how to sit next to Tailwind v4: 48 of the primitive names pulp emits are also Tailwind's defaults, layers rank by first appearance, and if Tailwind's theme layer lands after pulp's then --radius-surface resolves to Tailwind's --radius-lg and every surface loses its corners with nothing failing. Declare @layer reset, theme, tokens, … yourself. Decision record 006 has the reasoning; the tier is prefixed at 1.0.

@pearpages/pulp-css 0.1.5

Patch Changes

• Updated dependencies [d5e1098]
• Updated dependencies [e5d2bd6]
• Updated dependencies [bc49901]
• Updated dependencies [6681389]
• Updated dependencies [3743f63]
• Updated dependencies [5cd58f1]
• Updated dependencies [8822ba9]
• Updated dependencies [2c5bb3f]
• Updated dependencies [b424c8d]
• Updated dependencies [5096f3b]
  • @pearpages/pulp-tokens@0.4.0

@pearpages/pulp-react 0.4.0

Minor Changes

• d5e1098: Eight categorical accents at the semantic tier, in both brands: --color-accent-1 … --color-accent-8, each with its text colour --color-accent-on-1 … on-8. They follow the scheme (light-dark()), every pair is in the contrast tests at 4.5:1, and the hues come in the same order in every brand (blue, orange, green, violet, red, teal, amber, pink). They are for telling things of one kind apart, people mostly; a number carries no meaning. They are in theme.css and the native output too.

  Avatar and Chip take accent?: 1 | … | 8. On an Avatar it is the colour behind the initials (a picture ignores it). A Chip with an accent is filled with it; a toggle chip shows it as the border until it is selected. The consumer hashes an id to the index, so a colour is never passed as a style.

• e5d2bd6: Badge: tone="action", the brand's colour, in the three variants. For a marker that is not a status, such as the unread dot or count on a navigation item; it reads --badge-action-*, which point at the action tokens whose contrast is already tested.

• bc49901: A subtle Badge now draws a hairline edge in the tone's own colour, the same one as its label. On a tinted surface the subtle fill alone was not a pill: measured across both brands, every *-subtle fill sits between 1.00 and 1.40:1 against the surfaces it lands on, so "Pending" read as coloured text with no shape. The edge is the label's colour, which the contrast tests already hold to 4.5:1 on every surface, and a token test keeps the two from drifting apart.

  Every badge now carries a border, transparent unless the variant is subtle, so solid, subtle and dot stay the same size as each other; box-sizing: border-box keeps the dot at exactly --badge-dot-size. A badge with text is 2px wider and taller than before. New tokens: --badge-border-width and --badge-<tone>-subtle-border.

• 3743f63: Breaking (experimental component). The React Aria table is renamed DataGrid, and the name Table is freed for the plain <table> that ships alongside it. What it is called should say what it is: React Aria's is a role="grid" widget with roving focus, selection and sorting, and it costs ~52 kB and a client boundary; an HTML <table> is what most tables are.

  Rename map: Table → DataGrid, the five parts (Table.Header → DataGrid.Header, and .Column, .Body, .Row, .Cell), the types (TableProps → DataGridProps, and TableSelectionMode, TableDensity, TableSort, TableSortDirection, TableAlign), the entry point @pearpages/pulp-react/table → /data-grid, its stylesheet /table.css → /data-grid.css, and the tokens --table-* → --data-grid-*. Nothing about the behaviour or the props changed. Decision record 008.

• 5cd58f1: Dialog's width is a pulp token now, --dialog-width, from the new semantic --size-dialog-width (32.5rem, the same 520px the vendor was already using, so nothing moves). Set it in a class on Dialog.Content to size one dialog without touching the rest, the way --sheet-width already works for Sheet; @pearpages/modals' own --modal-width-md is set from it and stays pulp's business. Both are now said in the components' docs, with a story.

• 2c5bb3f: New Table: a plain <table> with pulp's density and tokens. It holds no state and calls no hook, so it is a server entry — a page of rows costs no JavaScript and no client boundary, which is what the React Aria grid could never be. Compou...

v0.3.0

@pearpages/pulp-tokens 0.3.0

Minor Changes

• a67db76: Avatar (experimental): a person as a picture or as initials. name, src, alt, size (sm–xl), and an image element as the child so a framework's image component (next/image) takes the styles. The initials take over when there is no image and when the image fails to load. One token background for everyone, never a colour hashed from the name. Tokens: --avatar-*.
• b67331b: Badge: variant="dot", a presence mark with no visible text whose label is rendered for assistive technology, and count with max (default 99, shown as "99+"; zero or less renders nothing). With a count, label says what is counted ("3 unread"). Token: --badge-dot-size.
• 087fc7c: Button and IconButton: tone="danger" for actions that destroy something. It recolours whichever variant is in use (variant="ghost" tone="danger" is a quiet delete). Two new semantic tokens in both brands, --color-status-error-hover and --color-status-error-active, for a filled error surface under the pointer and while pressed; component tokens --button-danger-*.
• f339ace: Chip (experimental): a pill for a filter that toggles (selected / defaultSelected / onSelectedChange, a native button with aria-pressed) or a value that can be removed (onRemove), or both. The remove control is a second button beside the label, never inside it, named "Remove" plus the chip's label. size (sm–lg), tone (neutral, action), disabled. Tokens: --chip-*.
• 9cb4d70: Divider (experimental): a hairline between two groups, horizontal or vertical, with spacing on the spacing scale. Decorative by default (role="none"); decorative={false} makes it a separator. Tokens: --divider-color, --divider-thickness, --divider-spacing-{sm,md,lg}.
• a33cd6d: EmptyState (experimental): what a list, a search or a page shows instead of its content. title (a real heading at headingLevel), description, a decorative icon in a tinted disc, one action, and tone (neutral, error). Composes Heading, Text and Stack. It announces nothing by itself: pass role="status" or role="alert" when it replaces content after the user did something. Tokens: --empty-state-*.
• 7faf287: Link (experimental): a text link with tone (action, default, muted), underline (always, hover) and asChild, so a router's own link component takes the styles and keeps client-side navigation. Underlined by default: colour alone does not tell a link from the text around it. Tokens: --link-*.
• 739b6a4: SegmentedControl (experimental): one choice out of a few, all visible. Generic over a string union (options, value / defaultValue, onValueChange), look (segmented, chips), size, fullWidth, name. Native radio inputs underneath, so the keyboard, the single tab stop and form submission are the browser's. SegmentedControl.Nav and SegmentedControl.NavItem give the same look to links that navigate: a labelled nav with aria-current="page", and asChild for a router's link. Tokens: --segmented-control-*.
• bb65f9b: Sheet: a bottom sheet can be dragged down to close it. Sheet.Content renders a grab handle when placement="bottom" (dragToDismiss, on by default); past a quarter of the sheet's height, or with a flick, it closes through the dialog's own path, so onOpenChange fires and focus returns to the trigger. Pointer and touch only, hidden from assistive technology, and off under prefers-reduced-motion. Tokens: --sheet-handle-*.
• d65c52a: New semantic token --color-surface-overlay in both brands: the surface of what floats above the page. In dark schemes it is one step lighter than --color-surface-raised, so a menu or a dialog reads as above a card without relying on a shadow; in light it may equal it. Dialog, Sheet, Menu, Popover and the DatePicker, Combobox and Picker popovers now paint with it (--combobox-popover-bg and --picker-popover-bg are new). Light schemes look the same as before in pulp.
• c98e287: TextField: the search affordance. iconStart puts a decorative glyph inside the field (type="search" gets the Search glyph by default), onClear adds a clear button that appears once there is a value (named by clearLabel), Escape clears too and keeps the event from a surrounding dialog, and hideLabel keeps the label for assistive technology only. A plain TextField renders exactly as before. Tokens: --text-field-icon-*.
• d746f6c: Two new outputs, both views of the semantic tier (decision record 005). @pearpages/pulp-tokens/theme.css is a Tailwind v4 @theme inline reference block, so utilities such as bg-surface-base and rounded-control read pulp's variables and follow brand and scheme at run time. @pearpages/pulp-tokens/native exports, per brand, { colors, radius, space, themeVars: { light, dark } } with resolved hex and px values, as ESM and CommonJS, for React Native / NativeWind and a Tailwind v3 config.

@pearpages/pulp-css 0.1.4

Patch Changes

• Updated dependencies [a67db76]
• Updated dependencies [b67331b]
• Updated dependencies [087fc7c]
• Updated dependencies [f339ace]
• Updated dependencies [9cb4d70]
• Updated dependencies [a33cd6d]
• Updated dependencies [7faf287]
• Updated dependencies [739b6a4]
• Updated dependencies [bb65f9b]
• Updated dependencies [d65c52a]
• Updated dependencies [c98e287]
• Updated dependencies [d746f6c]
  • @pearpages/pulp-tokens@0.3.0

@pearpages/pulp-icons 0.2.0

Minor Changes

• 6aa8b0b: 40 new glyphs (52 in the set), all drawn for pulp on the 24 grid: AlertCircle, Archive, Ban, Bookmark, Car, Chain, CheckCircle, Compass, Crosshair, Export, Filter, GripVertical, Heart, HelpCircle, MapFolded, MapPin, Meh, Message, Moon, Note, Page, Pencil, Picture, Send, Settings, Share, ShieldCheck, Star, Sun, Tag, Trash, TrendingUp, Trophy, Umbrella, Undo, User, Users, Utensils, ZoomIn, Mail. Outline only: set fill: currentColor from CSS for a filled state.

@pearpages/pulp-react 0.3.0

Minor Changes

• a67db76: Avatar (experimental): a person as a picture or as initials. name, src, alt, size (sm–xl), and an image element as the child so a framework's image component (next/image) takes the styles. The initials take over when there is no image and when the image fails to load. One token background for everyone, never a colour hashed from the name. Tokens: --avatar-*.
• b67331b: Badge: variant="dot", a presence mark with no visible text whose label is rendered for assistive technology, and count with max (default 99, shown as "99+"; zero or less renders nothing). With a count, label says what is counted ("3 unread"). Token: --badge-dot-size.
• 087fc7c: Button and IconButton: tone="danger" for actions that destroy something. It recolours whichever variant is in use (variant="ghost" tone="danger" is a quiet delete). Two new semantic tokens in both brands, --color-status-error-hover and --color-status-error-active, for a filled error surface under the pointer and while pressed; component tokens --button-danger-*.
• f339ace: Chip (experimental): a pill for a filter that toggles (selected / defaultSelected / onSelectedChange, a native button with aria-pressed) or a value that can be removed (onRemove), or both. The remove control is a second button beside the label, never inside it, named "Remove" plus the chip's label. size (sm–lg), tone (neutral, action), disabled. Tokens: --chip-*.
• 9cb4d70: Divider (experimental): a hairline between two groups, horizontal or vertical, with spacing on the spacing scale. Decorative by default (role="none"); decorative={false} makes it a separator. Tokens: --divider-color, --divider-thickness, --divider-spacing-{sm,md,lg}.
• a33cd6d: EmptyState (experimental): what a list, a search or a page shows instead of its content. title (a real heading at headingLevel), description, a decorative icon in a tinted disc, one action, and tone (neutral, error). Composes Heading, Text and Stack. It announces nothing by itself: pass role="status" or role="alert" when it replaces content after the user did something. Tokens: --empty-state-*.
• 7faf287: Link (experimental): a text link with tone (action, default, muted), underline (always, hover) and asChild, so a router's own link component takes the styles and keeps client-side navigation. Underlined by default: colour alone does not tell a link from the text around it. Tokens: --link-*.
• 739b6a4: SegmentedControl (experimental): one choice out of a few, all visible. Generic over a string union (options, value / defaultValue, onValueChange), look (segmented, chips), size, fullWidth, name. Native radio inputs underneath, so the keyboard, the single tab stop and form submission are the browser's. SegmentedControl.Nav and SegmentedControl.NavItem give the same look to links that navigate: a labelled nav with aria-current="page", and asChild for a router's link. Tokens: --segmented-control-*.
• bb65f9b: Sheet: a bottom sheet can be dragged down to close it. Sheet.Content renders a grab handle when placement="bottom" (dragToDismiss, on by default); past a quarter of the sheet's height, or with a flick, it closes through the dialog's own path, so onOpenChange fires and focus returns to the trigger. Pointer and touch only, hidden from assistive technology, and off under prefers-reduced-motion. Tokens: --sheet-handle-*.
• d65c52a: New semantic token --color-surface-overlay in both brands: the surface of what floats above the page. In dark schemes it is one step lighter than --color-surface-raised, so a menu or a dialog reads as above a card without relying on a shadow; in light it may equal it. Dialog, Sheet, Menu, Popover and the DatePicker, Combobox and Picker popovers now paint with it (--combobox-popover-bg and --picker-popover-bg...

v0.2.2

@pearpages/pulp-tokens 0.2.1

Patch Changes

• a6731f0: Every stylesheet now starts by restating the cascade-layer order (@layer reset, tokens, vendor, base, components, utilities;). Layers rank by first appearance, and a bundler decides which file loads first: when a component stylesheet was linked before the reset, components became the weakest layer and the reset won, so a primary Button painted as bare text. That is what the deployed Storybook was doing. Importing @pearpages/pulp-css first is still the recommended setup, but correct rendering no longer depends on it.

@pearpages/pulp-css 0.1.3

Patch Changes

• a6731f0: Every stylesheet now starts by restating the cascade-layer order (@layer reset, tokens, vendor, base, components, utilities;). Layers rank by first appearance, and a bundler decides which file loads first: when a component stylesheet was linked before the reset, components became the weakest layer and the reset won, so a primary Button painted as bare text. That is what the deployed Storybook was doing. Importing @pearpages/pulp-css first is still the recommended setup, but correct rendering no longer depends on it.
• Updated dependencies [a6731f0]
  • @pearpages/pulp-tokens@0.2.1

@pearpages/pulp-react 0.2.2

Patch Changes

• a6731f0: Every stylesheet now starts by restating the cascade-layer order (@layer reset, tokens, vendor, base, components, utilities;). Layers rank by first appearance, and a bundler decides which file loads first: when a component stylesheet was linked before the reset, components became the weakest layer and the reset won, so a primary Button painted as bare text. That is what the deployed Storybook was doing. Importing @pearpages/pulp-css first is still the recommended setup, but correct rendering no longer depends on it.
• Updated dependencies [a6731f0]
  • @pearpages/pulp-tokens@0.2.1

Docs: https://pulp.pearpages.com · Compare: v0.2.1...v0.2.2

v0.2.1

@pearpages/pulp-css 0.1.2

Patch Changes

• 63b6449: The reset now declares -webkit-text-size-adjust and -moz-text-size-adjust next to text-size-adjust: none. iOS Safari and Firefox for Android only know the prefixed property, so text was still inflated in landscape there. Found by the new support-floor check.

@pearpages/pulp-react 0.2.1

Patch Changes

• 63b6449: Button (and everything built on it: IconButton, Alert, Pagination, Toast) now declares -webkit-user-select: none next to user-select: none. Safari has no unprefixed user-select, so on the declared support floor the label stayed selectable. Found by the new support-floor check.

Docs: https://pulp.pearpages.com · Compare: v0.2.0...v0.2.1

v0.2.0

@pearpages/pulp-tokens 0.2.0

Minor Changes

• 56c2390: Add Sheet: a dialog docked to an edge (placement: start | end | top | bottom, default
  end), with Dialog's parts, focus trap, stacking and dismissal. It needs DialogSystem and the
  @pearpages/modals stylesheet, as Dialog does. @pearpages/modals moves to ^0.3.0, which added
  the docking. New semantic tokens size.sheet-width (24rem) and size.sheet-height (60vh), and
  --sheet-width, --sheet-height and --sheet-motion-translate component tokens.

@pearpages/pulp-css 0.1.1

Patch Changes

• Updated dependencies [56c2390]
  • @pearpages/pulp-tokens@0.2.0

@pearpages/pulp-react 0.2.0

Minor Changes

• 56c2390: Add Sheet: a dialog docked to an edge (placement: start | end | top | bottom, default
  end), with Dialog's parts, focus trap, stacking and dismissal. It needs DialogSystem and the
  @pearpages/modals stylesheet, as Dialog does. @pearpages/modals moves to ^0.3.0, which added
  the docking. New semantic tokens size.sheet-width (24rem) and size.sheet-height (60vh), and
  --sheet-width, --sheet-height and --sheet-motion-translate component tokens.

Patch Changes

• Updated dependencies [56c2390]
  • @pearpages/pulp-tokens@0.2.0

Docs: https://pulp.pearpages.com · Compare: v0.1.0...v0.2.0