@sableui/react 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # What's new
 
+## 0.11.0
+
+- **New: `PropertyGroup`, a collapsible group inside a PanelSection.** The
+  row names the group, summarises its value while closed (a word, a few
+  swatches, or both), and opens with +/− to the rows beneath. It's sized for
+  a tool panel, where an Accordion is page furniture. Groups open
+  independently and stack with a hairline between them.
+- **sableui.com's Customize panel: the Color section is rebuilt on it.**
+  It now reads Brand color, then Primary action (with colour dots), then
+  three groups: Color palette (the families and Pull to brand), Tones (tones
+  and status) and Neutrals. Each group summarises itself with its own
+  swatches, and Tones and Neutrals are chosen from a list that previews what
+  each option would paint. The section has its own Reset.
+
 ## 0.10.0
 
 A palette generated from the theme, numbered extra tones, and sample content that isn't a marketplace.

package/dist/components/panel-section/index.js

@@ -1,8 +1,9 @@
 // src/components/panel-section/index.ts
-import { PanelSection, PropertyPair, PropertyRow } from "./panel-section.js";
+import { PanelSection, PropertyGroup, PropertyPair, PropertyRow } from "./panel-section.js";
 import { panelSectionMeta } from "./panel-section.meta.js";
 export {
   PanelSection,
+  PropertyGroup,
   PropertyPair,
   PropertyRow,
   panelSectionMeta

package/dist/components/panel-section/panel-section.js

@@ -1,8 +1,10 @@
 "use client";
 
 // src/components/panel-section/panel-section.tsx
+import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { beginScrub } from "../../lib/scrub-gesture.js";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../collapsible/collapsible.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PanelSection({
   title,
@@ -108,8 +110,21 @@ function PropertyPair({ labels, className, children, ...props }) {
   ] });
 }
 PropertyPair.displayName = "PropertyPair";
+function PropertyGroup({ label, summary, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(Collapsible, { className: cn("border-t border-hairline", className), ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group/property-group flex h-(--control-sm) w-full items-center gap-2 rounded-xs text-start motion-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-ui-md text-foreground", children: label }),
+      summary != null ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 shrink items-center gap-2 truncate text-ui-md text-muted-foreground", children: summary }) : null,
+      /* @__PURE__ */ jsx(Icon, { name: "plus", className: "shrink-0 text-xs text-muted-foreground group-data-[panel-open]/property-group:hidden" }),
+      /* @__PURE__ */ jsx(Icon, { name: "minus", className: "hidden shrink-0 text-xs text-muted-foreground group-data-[panel-open]/property-group:block" })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 pt-0.5 pb-2", children }) })
+  ] });
+}
+PropertyGroup.displayName = "PropertyGroup";
 export {
   PanelSection,
+  PropertyGroup,
   PropertyPair,
   PropertyRow
 };

package/dist/components/panel-section/panel-section.meta.js

@@ -60,6 +60,11 @@ var panelSectionMeta = {
         name: "PropertyPair",
         required: false,
         description: "Two controls side by side, with optional captions above each."
+      },
+      {
+        name: "PropertyGroup",
+        required: false,
+        description: "A set of properties folded behind one row that names the group and summarises its value, opening with +/\u2212 to the controls beneath."
       }
     ]
   },
@@ -89,9 +94,15 @@ var panelSectionMeta = {
       name: "PropertyPair",
       type: "{ labels?: [ReactNode, ReactNode] }",
       description: "Two controls side by side in a 2-up grid, with optional captions above each."
+    },
+    {
+      name: "PropertyGroup",
+      type: "{ label: ReactNode; summary?: ReactNode; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void }",
+      description: "A collapsible set of properties inside a section, at the panel's scale (an Accordion is page furniture). The row shows the label, then the summary (the group's value, readable while closed: a word, a few swatches, or both), then a + that turns to \u2212 when open. Groups open independently and stack with a hairline between them. Built on Collapsible."
     }
   ],
   a11y: [
+    "PropertyGroup's row is a real button with aria-expanded (Collapsible); its summary is part of the button's name, so a closed group still announces its value.",
     "PropertyRow renders a real <label>; pass htmlFor with the control's id so clicking the label focuses it.",
     "The section title is an h3, so panels contribute a real heading outline rather than styled divs.",
     "`hint` is exposed as the label's title attribute \u2014 keep the essential meaning in the label itself, since title text is not reliably announced.",
@@ -99,6 +110,27 @@ var panelSectionMeta = {
   ],
   tokensUsed: ["foreground", "muted-foreground", "hairline"],
   examples: [
+    {
+      label: "Groups that fold behind their value",
+      code: `<PanelSection title="Color">
+  <PropertyGroup label="Tones" summary="Brand only">
+    <PropertyRow label="Scheme">
+      <Select value="brand">
+        <SelectTrigger size="xs" />
+        <SelectContent>
+          <SelectItem value="brand">Brand only</SelectItem>
+          <SelectItem value="harmonize">Harmonize</SelectItem>
+        </SelectContent>
+      </Select>
+    </PropertyRow>
+  </PropertyGroup>
+  <PropertyGroup label="Grid" summary="8px">
+    <PropertyRow label="Size">
+      <ScrubField label="Grid size" value={8} min={1} max={64} suffix="px" />
+    </PropertyRow>
+  </PropertyGroup>
+</PanelSection>`
+    },
     {
       label: "Blending section, 2-up",
       code: `<PanelSection title="Blending">

package/dist/file-hashes.json

@@ -303,9 +303,9 @@
 	"dist/components/panel-group/index.js": "8589d6450207f608",
 	"dist/components/panel-group/panel-group.js": "c473a2d520fe8261",
 	"dist/components/panel-group/panel-group.meta.js": "01aa9dd4ecaa2f51",
-	"dist/components/panel-section/index.js": "9f8c3d0a6668ba85",
-	"dist/components/panel-section/panel-section.js": "55dd272454076682",
-	"dist/components/panel-section/panel-section.meta.js": "566e0823da5c6972",
+	"dist/components/panel-section/index.js": "055470e0a68862e6",
+	"dist/components/panel-section/panel-section.js": "63f5d7e43aa3fac5",
+	"dist/components/panel-section/panel-section.meta.js": "fd4e8f37b0edfd5e",
 	"dist/components/phone/index.js": "956a5f3563a1e665",
 	"dist/components/phone/phone.js": "72c74b0134619fdf",
 	"dist/components/phone/phone.meta.js": "6653edae4b4cb9ff",
@@ -471,8 +471,8 @@
 	"dist/icon-sets/brands.js": "9a37d8739f14f2a9",
 	"dist/icon-sets/reicon.d.ts": "52f6e41dc8137b4e",
 	"dist/icon-sets/reicon.js": "89a930f17cc90cde",
-	"dist/index.d.ts": "f8ac35e27e3846bf",
-	"dist/index.js": "ff812f2ebe7eed90",
+	"dist/index.d.ts": "798dee76b8ecf0a4",
+	"dist/index.js": "245552095995fc9c",
 	"dist/ios/chrome.css": "a7ca9e3735d8658e",
 	"dist/ios/chrome.js": "37091fef7b68bd28",
 	"dist/ios/frame.css": "dd2703c944ce575a",

package/dist/index.d.ts

@@ -2746,11 +2746,11 @@ type SeparatorProps$1 = Omit<ComponentProps<typeof Menu$1.Separator>, "className
 };
 /** A hairline rule between item runs. Bleeds past the popup padding. */
 declare function MenuSeparator({ className, ...props }: SeparatorProps$1): react.JSX.Element;
-type GroupProps$2 = Omit<ComponentProps<typeof Menu$1.Group>, "className"> & {
+type GroupProps$3 = Omit<ComponentProps<typeof Menu$1.Group>, "className"> & {
     className?: string;
 };
 /** Groups related items with a label for screen readers. */
-declare function MenuGroup({ className, ...props }: GroupProps$2): react.JSX.Element;
+declare function MenuGroup({ className, ...props }: GroupProps$3): react.JSX.Element;
 type GroupLabelProps$2 = Omit<ComponentProps<typeof Menu$1.GroupLabel>, "className"> & {
     className?: string;
 };
@@ -3989,11 +3989,11 @@ type SeparatorProps = Omit<ComponentProps<typeof ContextMenu$1.Separator>, "clas
 };
 /** A hairline rule between item runs. Bleeds past the popup padding. */
 declare function ContextMenuSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
-type GroupProps$1 = Omit<ComponentProps<typeof ContextMenu$1.Group>, "className"> & {
+type GroupProps$2 = Omit<ComponentProps<typeof ContextMenu$1.Group>, "className"> & {
     className?: string;
 };
 /** Groups related items with a label for screen readers. */
-declare function ContextMenuGroup({ className, ...props }: GroupProps$1): react.JSX.Element;
+declare function ContextMenuGroup({ className, ...props }: GroupProps$2): react.JSX.Element;
 type GroupLabelProps = Omit<ComponentProps<typeof ContextMenu$1.GroupLabel>, "className"> & {
     className?: string;
 };
@@ -4679,6 +4679,36 @@ declare function PropertyPair({ labels, className, children, ...props }: PairPro
 declare namespace PropertyPair {
     var displayName: string;
 }
+type GroupProps$1 = Omit<ComponentProps<typeof Collapsible>, "children" | "className"> & {
+    /** The group's name. */
+    label: ReactNode;
+    /**
+     * What the group is set to, readable while it is closed: a value ("Cool",
+     * "200% pull"), a few swatches, or both. Sits before the indicator.
+     */
+    summary?: ReactNode;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * PropertyGroup — a set of properties that folds behind one row, inside a
+ * PanelSection: the row names the group and summarises its value, and opens to
+ * the controls beneath it. The +/− tools use for "more here" (Figma's
+ * collapsible layer properties), at the panel's own scale — an Accordion is
+ * page furniture, its title-sized trigger twice the height of a property row.
+ *
+ * Each group opens on its own, so two can be compared side by side. Groups
+ * stack with a hairline between them; the summary is what keeps a closed
+ * group honest, so give it the value, not a restatement of the label.
+ *
+ *   <PropertyGroup label="Neutrals" summary="Cool">
+ *     <PropertyRow label="Tint">…</PropertyRow>
+ *   </PropertyGroup>
+ */
+declare function PropertyGroup({ label, summary, className, children, ...props }: GroupProps$1): react.JSX.Element;
+declare namespace PropertyGroup {
+    var displayName: string;
+}
 
 declare const panelSectionMeta: ComponentMeta;
 
@@ -8443,6 +8473,6 @@ declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info"
 /** Everything the palette names: neutral, the families, then the tone scales. */
 declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
 
-declare const SABLE_UI_VERSION: "0.10.0";
+declare const SABLE_UI_VERSION: "0.11.0";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };

package/dist/index.js

@@ -163,7 +163,7 @@ import { useScrollActivity } from "./lib/use-scroll-activity.js";
 import { useCopy } from "./lib/use-copy.js";
 import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
 import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
-var SABLE_UI_VERSION = "0.10.0";
+var SABLE_UI_VERSION = "0.11.0";
 export {
   ART_TOKENS,
   CHART_SERIES_COUNT,

package/llms/components/panel-section.md

@@ -27,6 +27,7 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 | Header | yes | The section title in the UI section tier, with an optional trailing action. |
 | PropertyRow | no | One property: label left, control right. `stacked` moves the control to its own line for full-width controls. |
 | PropertyPair | no | Two controls side by side, with optional captions above each. |
+| PropertyGroup | no | A set of properties folded behind one row that names the group and summarises its value, opening with +/− to the controls beneath. |
 
 ## Subcomponents
 
@@ -34,6 +35,7 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 | --- | --- | --- |
 | PropertyRow | { label: ReactNode; htmlFor?: string; hint?: string; stacked?: boolean; scrub?: { value, onValueChange, step?, min?, max?, onGestureStart?, onGestureEnd?, disabled? } } | One property line. `hint` becomes the label's hover explanation; `stacked` puts the control on its own line. `scrub` makes the property NAME a drag handle for its value — the Figma/Framer/Paper convention, and the answer for a numeric row with no honest glyph to put in a ScrubField (a schema-generated `levels` or `seed`, where a `#` would be noise pretending to be meaning). Opt-in and additive: a row without it is unchanged. The label stays a real `<label htmlFor>` — a 2px jitter threshold keeps a click a click, and the click synthesised after a real drag is swallowed so a scrub does not also select the field's text. |
 | PropertyPair | { labels?: [ReactNode, ReactNode] } | Two controls side by side in a 2-up grid, with optional captions above each. |
+| PropertyGroup | { label: ReactNode; summary?: ReactNode; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void } | A collapsible set of properties inside a section, at the panel's scale (an Accordion is page furniture). The row shows the label, then the summary (the group's value, readable while closed: a word, a few swatches, or both), then a + that turns to − when open. Groups open independently and stack with a hairline between them. Built on Collapsible. |
 
 ## Props
 
@@ -48,6 +50,7 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 
 ## Accessibility
 
+- PropertyGroup's row is a real button with aria-expanded (Collapsible); its summary is part of the button's name, so a closed group still announces its value.
 - PropertyRow renders a real <label>; pass htmlFor with the control's id so clicking the label focuses it.
 - The section title is an h3, so panels contribute a real heading outline rather than styled divs.
 - `hint` is exposed as the label's title attribute — keep the essential meaning in the label itself, since title text is not reliably announced.
@@ -59,6 +62,31 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 
 ## Examples
 
+### Groups that fold behind their value
+
+```tsx
+import { PanelSection, PropertyGroup, PropertyRow, ScrubField, Select, SelectContent, SelectItem, SelectTrigger } from "@sableui/react"
+
+<PanelSection title="Color">
+  <PropertyGroup label="Tones" summary="Brand only">
+    <PropertyRow label="Scheme">
+      <Select value="brand">
+        <SelectTrigger size="xs" />
+        <SelectContent>
+          <SelectItem value="brand">Brand only</SelectItem>
+          <SelectItem value="harmonize">Harmonize</SelectItem>
+        </SelectContent>
+      </Select>
+    </PropertyRow>
+  </PropertyGroup>
+  <PropertyGroup label="Grid" summary="8px">
+    <PropertyRow label="Size">
+      <ScrubField label="Grid size" value={8} min={1} max={64} suffix="px" />
+    </PropertyRow>
+  </PropertyGroup>
+</PanelSection>
+```
+
 ### Blending section, 2-up
 
 ```tsx

package/llms-full.txt

@@ -16813,6 +16813,7 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 | Header | yes | The section title in the UI section tier, with an optional trailing action. |
 | PropertyRow | no | One property: label left, control right. `stacked` moves the control to its own line for full-width controls. |
 | PropertyPair | no | Two controls side by side, with optional captions above each. |
+| PropertyGroup | no | A set of properties folded behind one row that names the group and summarises its value, opening with +/− to the controls beneath. |
 
 ## Subcomponents
 
@@ -16820,6 +16821,7 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 | --- | --- | --- |
 | PropertyRow | { label: ReactNode; htmlFor?: string; hint?: string; stacked?: boolean; scrub?: { value, onValueChange, step?, min?, max?, onGestureStart?, onGestureEnd?, disabled? } } | One property line. `hint` becomes the label's hover explanation; `stacked` puts the control on its own line. `scrub` makes the property NAME a drag handle for its value — the Figma/Framer/Paper convention, and the answer for a numeric row with no honest glyph to put in a ScrubField (a schema-generated `levels` or `seed`, where a `#` would be noise pretending to be meaning). Opt-in and additive: a row without it is unchanged. The label stays a real `<label htmlFor>` — a 2px jitter threshold keeps a click a click, and the click synthesised after a real drag is swallowed so a scrub does not also select the field's text. |
 | PropertyPair | { labels?: [ReactNode, ReactNode] } | Two controls side by side in a 2-up grid, with optional captions above each. |
+| PropertyGroup | { label: ReactNode; summary?: ReactNode; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void } | A collapsible set of properties inside a section, at the panel's scale (an Accordion is page furniture). The row shows the label, then the summary (the group's value, readable while closed: a word, a few swatches, or both), then a + that turns to − when open. Groups open independently and stack with a hairline between them. Built on Collapsible. |
 
 ## Props
 
@@ -16834,6 +16836,7 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 
 ## Accessibility
 
+- PropertyGroup's row is a real button with aria-expanded (Collapsible); its summary is part of the button's name, so a closed group still announces its value.
 - PropertyRow renders a real <label>; pass htmlFor with the control's id so clicking the label focuses it.
 - The section title is an h3, so panels contribute a real heading outline rather than styled divs.
 - `hint` is exposed as the label's title attribute — keep the essential meaning in the label itself, since title text is not reliably announced.
@@ -16845,6 +16848,31 @@ Use PanelSection to group properties inside an inspector or docked panel, with P
 
 ## Examples
 
+### Groups that fold behind their value
+
+```tsx
+import { PanelSection, PropertyGroup, PropertyRow, ScrubField, Select, SelectContent, SelectItem, SelectTrigger } from "@sableui/react"
+
+<PanelSection title="Color">
+  <PropertyGroup label="Tones" summary="Brand only">
+    <PropertyRow label="Scheme">
+      <Select value="brand">
+        <SelectTrigger size="xs" />
+        <SelectContent>
+          <SelectItem value="brand">Brand only</SelectItem>
+          <SelectItem value="harmonize">Harmonize</SelectItem>
+        </SelectContent>
+      </Select>
+    </PropertyRow>
+  </PropertyGroup>
+  <PropertyGroup label="Grid" summary="8px">
+    <PropertyRow label="Size">
+      <ScrubField label="Grid size" value={8} min={1} max={64} suffix="px" />
+    </PropertyRow>
+  </PropertyGroup>
+</PanelSection>
+```
+
 ### Blending section, 2-up
 
 ```tsx

package/llms.txt

@@ -426,7 +426,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **PageLoader** — Full-screen branded loading splash: the screen fades in, the mark breathes, and an indeterminate Progress bar pulses beneath it. → [`llms/components/page-loader.md`](./llms/components/page-loader.md)
 - **Pagination** — Page navigation built from our own Button + Icon (no Base UI). → [`llms/components/pagination.md`](./llms/components/pagination.md)
 - **PanelGroup** — A row of docked chrome panels around a flexible centre, with draggable and keyboard-resizable edges and optional persisted widths. *Parts:* Panel, PanelResizer, usePanelWidth. → [`llms/components/panel-group.md`](./llms/components/panel-group.md)
-- **PanelSection** — A flush group of property rows inside a docked panel — eyebrow header, hairline separator, rows beneath. *Parts:* PropertyRow, PropertyPair. → [`llms/components/panel-section.md`](./llms/components/panel-section.md)
+- **PanelSection** — A flush group of property rows inside a docked panel — eyebrow header, hairline separator, rows beneath. *Parts:* PropertyRow, PropertyPair, PropertyGroup. → [`llms/components/panel-section.md`](./llms/components/panel-section.md)
 - **Phone** — A current smartphone frame at iPhone proportions: a dark body with a titanium band, thin bezels, an island, an optional status bar and a scrollable screen. → [`llms/components/phone.md`](./llms/components/phone.md)
 - **PieChart** — **BETA.** Parts of a whole as slices: a pie or donut, concentric rings for several measures, a total in the hole, slice labels inside or out, and an active slice that pulls outward. → [`llms/components/pie-chart.md`](./llms/components/pie-chart.md)
 - **Pill** — A chip someone clicks: a filter, a tag choice, an option in a row. → [`llms/components/pill.md`](./llms/components/pill.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://sable.design/registry.schema.json",
   "name": "@sableui/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Sable.",
   "engine": {
     "behavior": "@base-ui/react",
@@ -13578,6 +13578,11 @@
             "name": "PropertyPair",
             "required": false,
             "description": "Two controls side by side, with optional captions above each."
+          },
+          {
+            "name": "PropertyGroup",
+            "required": false,
+            "description": "A set of properties folded behind one row that names the group and summarises its value, opening with +/− to the controls beneath."
           }
         ]
       },
@@ -13613,6 +13618,11 @@
           "name": "PropertyPair",
           "type": "{ labels?: [ReactNode, ReactNode] }",
           "description": "Two controls side by side in a 2-up grid, with optional captions above each."
+        },
+        {
+          "name": "PropertyGroup",
+          "type": "{ label: ReactNode; summary?: ReactNode; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void }",
+          "description": "A collapsible set of properties inside a section, at the panel's scale (an Accordion is page furniture). The row shows the label, then the summary (the group's value, readable while closed: a word, a few swatches, or both), then a + that turns to − when open. Groups open independently and stack with a hairline between them. Built on Collapsible."
         }
       ],
       "tokensUsed": [
@@ -13621,12 +13631,18 @@
         "hairline"
       ],
       "a11y": [
+        "PropertyGroup's row is a real button with aria-expanded (Collapsible); its summary is part of the button's name, so a closed group still announces its value.",
         "PropertyRow renders a real <label>; pass htmlFor with the control's id so clicking the label focuses it.",
         "The section title is an h3, so panels contribute a real heading outline rather than styled divs.",
         "`hint` is exposed as the label's title attribute — keep the essential meaning in the label itself, since title text is not reliably announced.",
         "A `scrub` label does not replace keyboard editing and must not be the only way to set the value: the drag is a pointer affordance, so the control it names still has to accept typing and arrow keys. It also keeps its `htmlFor` behaviour, which is the reason the gesture arms on a 2px threshold rather than on pointerdown."
       ],
       "examples": [
+        {
+          "label": "Groups that fold behind their value",
+          "code": "<PanelSection title=\"Color\">\n  <PropertyGroup label=\"Tones\" summary=\"Brand only\">\n    <PropertyRow label=\"Scheme\">\n      <Select value=\"brand\">\n        <SelectTrigger size=\"xs\" />\n        <SelectContent>\n          <SelectItem value=\"brand\">Brand only</SelectItem>\n          <SelectItem value=\"harmonize\">Harmonize</SelectItem>\n        </SelectContent>\n      </Select>\n    </PropertyRow>\n  </PropertyGroup>\n  <PropertyGroup label=\"Grid\" summary=\"8px\">\n    <PropertyRow label=\"Size\">\n      <ScrubField label=\"Grid size\" value={8} min={1} max={64} suffix=\"px\" />\n    </PropertyRow>\n  </PropertyGroup>\n</PanelSection>",
+          "imports": "import { PanelSection, PropertyGroup, PropertyRow, ScrubField, Select, SelectContent, SelectItem, SelectTrigger } from \"@sableui/react\""
+        },
         {
           "label": "Blending section, 2-up",
           "code": "<PanelSection title=\"Blending\">\n  <PropertyPair>\n    <ScrubField label=\"Opacity\" value={100} min={0} max={100} suffix=\"%\" />\n    <Select value=\"normal\">\n      <SelectTrigger size=\"xs\" />\n      <SelectContent>\n        <SelectItem value=\"normal\">Normal</SelectItem>\n        <SelectItem value=\"multiply\">Multiply</SelectItem>\n      </SelectContent>\n    </Select>\n  </PropertyPair>\n</PanelSection>",
@@ -25487,6 +25503,18 @@
         "render",
         "style"
       ],
+      "PropertyGroup": [
+        "children",
+        "className",
+        "defaultOpen",
+        "disabled",
+        "label",
+        "onOpenChange",
+        "open",
+        "render",
+        "style",
+        "summary"
+      ],
       "PropertyPair": [
         "labels"
       ],