@ceebee/ui 1.0.1 → 1.1.1

package/dist/client.d.ts

@@ -178,6 +178,7 @@ interface ChecklistProps {
 declare function Checklist({ title, tasks, completeSlot, className }: ChecklistProps): react.JSX.Element;
 
 type Tone = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
+type DecorHue = 'violet' | 'blue' | 'teal' | 'green' | 'amber' | 'rose';
 
 type ToastPosition = 'bottom-end' | 'bottom-center' | 'bottom-start' | 'top-end' | 'top-center' | 'top-start';
 interface ToastProviderProps {
@@ -275,4 +276,37 @@ interface StaggerProps {
 /** Wraps each child in a Reveal with an increasing delay — the list arrives, it does not pop. */
 declare function Stagger({ children, step, from, onView, className }: StaggerProps): react.JSX.Element;
 
-export { Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+interface StickerGroupSkeletonProps {
+    count?: number;
+    label?: string;
+}
+declare function StickerGroupSkeleton({ count, label }: StickerGroupSkeletonProps): react.JSX.Element;
+
+interface StickerItem {
+    id: string;
+    label: ReactNode;
+    /** Decorative only; use app copy to communicate meaning. */
+    hue?: DecorHue;
+    /** Accessible item name when `label` is not plain text. */
+    ariaLabel?: string;
+}
+interface StickerGroupProps {
+    items: StickerItem[];
+    onDismiss: (id: string) => void;
+    /** Names the collection when the surrounding heading does not. */
+    label?: string;
+    /** Localises the button name. */
+    getDismissLabel?: (item: StickerItem) => string;
+    motion?: boolean;
+    className?: string;
+}
+/**
+ * A controlled list of removable values. Each sticker is one native button: Tab reaches it and
+ * Enter or Space dismisses it. The collection owns only exit choreography, never product state.
+ */
+declare function StickerGroupRoot({ items, onDismiss, label, getDismissLabel, motion: motionEnabled, className, }: StickerGroupProps): react.JSX.Element;
+declare const StickerGroup: typeof StickerGroupRoot & {
+    Skeleton: typeof StickerGroupSkeleton;
+};
+
+export { Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/client.js

@@ -1,17 +1,17 @@
 "use client";
 import { theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
-import { createContext, useState, useCallback, useEffect, useMemo, useContext, Children } from 'react';
+import { createContext, useContext, useMemo, useState, useCallback, useEffect, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 export { default as enUSLocale } from 'antd/locale/en_US.js';
 export { default as enUSDatePickerLocale } from 'antd/lib/date-picker/locale/en_US.js';
 export { default as idIDLocale } from 'antd/locale/id_ID.js';
 export { default as zhCNLocale } from 'antd/locale/zh_CN.js';
 import { Dialog } from '@base-ui/react/dialog';
-import { Search, Check, ChevronRight, X, PanelLeftOpen, PanelLeftClose, Info, XCircle, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { X, Search, Check, ChevronRight, PanelLeftOpen, PanelLeftClose, Info, XCircle, AlertTriangle, CheckCircle2 } from 'lucide-react';
 import { Toast } from '@base-ui/react/toast';
 import { Popover } from '@base-ui/react/popover';
-import { motion } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 
 var SKIN_LINK_ID = "cb-skin";
 function ThemeBridge({ children, mode, theme: theme$1 }) {
@@ -596,5 +596,79 @@ function Reveal({
 function Stagger({ children, step = 0.06, from = "below", onView = false, className }) {
   return /* @__PURE__ */ jsx("div", { className, children: Children.map(children, (child, index) => /* @__PURE__ */ jsx(Reveal, { from, delay: index * step, onView, children: child })) });
 }
+function StickerGroupSkeleton({ count = 3, label = "Loading items" }) {
+  return /* @__PURE__ */ jsx("div", { className: "cb-sticker-group cb-sticker-group--skeleton", role: "status", "aria-label": label, children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx("span", { className: "cb-sticker-group__skeleton-item", "aria-hidden": "true" }, index)) });
+}
+var STICKER_VARIANTS = {
+  hidden: {
+    opacity: 0,
+    y: "var(--cb-sticker-enter-y)",
+    rotate: "var(--cb-tilt-none)",
+    scale: "var(--cb-sticker-enter-scale)"
+  },
+  visible: {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    rotate: "var(--cb-sticker-tilt)",
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    x: "var(--cb-sticker-resolved-exit-x)",
+    y: "var(--cb-sticker-enter-y)",
+    rotate: "var(--cb-sticker-resolved-exit-rotate)",
+    scale: "var(--cb-sticker-exit-scale)"
+  },
+  still: { opacity: 1, x: 0, y: 0, rotate: 0, scale: 1 },
+  stillExit: { opacity: 0, x: 0, y: 0, rotate: 0, scale: 1 }
+};
+function StickerGroupRoot({
+  items,
+  onDismiss,
+  label,
+  getDismissLabel,
+  motion: motionEnabled = true,
+  className
+}) {
+  const motionSettings = useMotionSettings();
+  const shouldMove = motionEnabled && motionSettings.enabled;
+  return /* @__PURE__ */ jsx("ul", { className: cn("cb-sticker-group", className), "aria-label": label, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.map((item, index) => {
+    const tilt = index % 3 === 0 ? "left" : index % 3 === 1 ? "right" : "none";
+    const exit = index % 2 === 0 ? "left" : "right";
+    const itemLabel = item.ariaLabel ?? (typeof item.label === "string" ? item.label : "item");
+    const dismissLabel = getDismissLabel?.(item) ?? `Remove ${itemLabel}`;
+    return /* @__PURE__ */ jsx(
+      motion.li,
+      {
+        className: "cb-sticker-group__item",
+        "data-exit": exit,
+        "data-hue": item.hue,
+        "data-tilt": tilt,
+        initial: shouldMove ? "hidden" : false,
+        animate: shouldMove ? "visible" : "still",
+        exit: shouldMove ? "exit" : "stillExit",
+        layout: shouldMove ? "position" : false,
+        transition: shouldMove ? motionSettings.spring("bouncy") : { duration: 0 },
+        variants: STICKER_VARIANTS,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "cb-sticker-group__button",
+            "aria-label": dismissLabel,
+            onClick: () => onDismiss(item.id),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "cb-sticker-group__label", children: item.label }),
+              /* @__PURE__ */ jsx(X, { className: "cb-sticker-group__icon", "aria-hidden": "true" })
+            ]
+          }
+        )
+      },
+      item.id
+    );
+  }) }) });
+}
+var StickerGroup = Object.assign(StickerGroupRoot, { Skeleton: StickerGroupSkeleton });
 
-export { Checklist, CommandPalette, DEFAULT_LABELS, LabelsProvider, MotionProvider, Reveal, Sidebar, Stagger, ThemeBridge, ThemeProvider, ToastProvider, TopBar, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { Checklist, CommandPalette, DEFAULT_LABELS, LabelsProvider, MotionProvider, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/index.d.ts

@@ -8,12 +8,15 @@ type Tone = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
 type Size = 'sm' | 'md' | 'lg';
 type DecorHue = 'violet' | 'blue' | 'teal' | 'green' | 'amber' | 'rose';
 
-type SurfaceVariant = 'plain' | 'tinted' | 'glass' | 'gradient';
+type SurfaceVariant = 'plain' | 'tinted' | 'glass' | 'gradient' | 'paper';
 type GlassStyle = 'regular' | 'clear';
+type PaperTilt = 'left' | 'none' | 'right';
 interface SurfaceProps {
     variant?: SurfaceVariant;
     /** Glass density. `clear` is reserved for bold controls over visually rich content. */
     glassStyle?: GlassStyle;
+    /** Decorative paper rotation. Only applies to the `paper` variant. */
+    paperTilt?: PaperTilt;
     /** Semantic colour for `tinted`; ignored by `plain`. */
     tone?: Tone;
     /** Decorative hue for `tinted` / `gradient` — the pastel card set. Wins over `tone`. */
@@ -32,7 +35,7 @@ interface SurfaceProps {
  * variants rather than being baked into the brand, so one Skin reproduces the
  * reference board and another produces something sober without touching a component.
  */
-declare function Surface({ variant, glassStyle, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
+declare function Surface({ variant, glassStyle, paperTilt, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
 
 type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 interface StackProps {
@@ -211,4 +214,4 @@ interface LeaderboardProps {
 declare function LeaderboardRoot({ entries, label, medals, className }: LeaderboardProps): react.JSX.Element;
 declare const Leaderboard: typeof LeaderboardRoot;
 
-export { BarMini, type BarMiniProps, Container, type ContainerProps, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, PageContainer, type PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps, type Size, Sparkline, type SparklineGeometry, type SparklineProps, type StackProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, type Tone, cn, donutArcs, sparklineGeometry };
+export { BarMini, type BarMiniProps, Container, type ContainerProps, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, PageContainer, type PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps, type PaperTilt, type Size, Sparkline, type SparklineGeometry, type SparklineProps, type StackProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, type Tone, cn, donutArcs, sparklineGeometry };

package/dist/index.js

@@ -7,6 +7,7 @@ function cn(...parts) {
 function Surface({
   variant = "plain",
   glassStyle = "regular",
+  paperTilt = "none",
   tone = "neutral",
   hue,
   elevation = "sm",
@@ -33,6 +34,7 @@ function Surface({
       "data-tone": variant === "plain" ? void 0 : tone,
       "data-hue": hue,
       "data-glass-style": variant === "glass" ? glassStyle : void 0,
+      "data-paper-tilt": variant === "paper" ? paperTilt : void 0,
       children
     }
   );

package/dist/skins/moodboard.css

@@ -0,0 +1,92 @@
+/* Moodboard: the warm taped-paper Skin first shaped for Ceebee List.
+   A Skin rewrites tokens only; paper and sticker geometry stay component-owned. */
+:root {
+  --cb-hue-brand: 348;
+
+  --cb-bg: oklch(0.9611 0.0103 67.7);
+  --cb-bg-subtle: oklch(0.9702 0.03 83.6);
+  --cb-surface: oklch(0.9942 0.0069 88.6);
+  --cb-surface-raised: oklch(1 0 0);
+  --cb-border: oklch(0.8575 0.0147 57.6);
+  --cb-border-strong: oklch(0.62 0.0264 291);
+
+  --cb-fg: oklch(0.3255 0.0264 291);
+  --cb-fg-muted: oklch(0.47 0.0264 291);
+  --cb-fg-subtle: oklch(0.54 0.022 291);
+
+  --cb-decor-violet: oklch(0.8986 0.0385 295.4);
+  --cb-decor-blue: oklch(0.9243 0.0227 233.4);
+  --cb-decor-teal: oklch(0.9184 0.0267 163.2);
+  --cb-decor-green: oklch(0.9184 0.0267 163.2);
+  --cb-decor-amber: oklch(0.9247 0.0745 96.8);
+  --cb-decor-rose: oklch(0.8816 0.0434 348);
+
+  --cb-shadow-sm: 0 var(--cb-space-1) var(--cb-space-2) oklch(0.3255 0.0264 291 / 0.09);
+  --cb-shadow-md: 0 var(--cb-space-2) var(--cb-space-5) oklch(0.3255 0.0264 291 / 0.12);
+  --cb-shadow-lg: 0 var(--cb-space-5) var(--cb-space-7) oklch(0.3255 0.0264 291 / 0.16);
+
+  --cb-paper-bg: oklch(0.9942 0.0069 88.6);
+  --cb-paper-bg-warm: oklch(0.9702 0.03 83.6);
+  --cb-paper-fg: oklch(0.3255 0.0264 291);
+  --cb-paper-border: oklch(0.8575 0.0147 57.6);
+  --cb-paper-tape: oklch(0.9247 0.0745 96.8 / 0.74);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0.3255 0.0264 291 / 0.14);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0.3255 0.0264 291 / 0.16);
+
+  --cb-tint-strength: 0.18;
+}
+
+:root[data-theme="dark"] {
+  --cb-bg: oklch(0.2117 0.0158 279.4);
+  --cb-bg-subtle: oklch(0.2811 0.0183 285.2);
+  --cb-surface: oklch(0.2811 0.0183 285.2);
+  --cb-surface-raised: oklch(0.3022 0.0113 55.9);
+  --cb-border: oklch(0.4028 0.0177 308);
+  --cb-border-strong: oklch(0.58 0.022 308);
+
+  --cb-fg: oklch(0.9524 0.0093 62.6);
+  --cb-fg-muted: oklch(0.78 0.018 62.6);
+  --cb-fg-subtle: oklch(0.68 0.018 62.6);
+
+  --cb-decor-violet: oklch(0.3447 0.0451 290.9);
+  --cb-decor-blue: oklch(0.3645 0.0299 235.5);
+  --cb-decor-teal: oklch(0.3731 0.0308 170.1);
+  --cb-decor-green: oklch(0.3731 0.0308 170.1);
+  --cb-decor-amber: oklch(0.3918 0.039 91.8);
+  --cb-decor-rose: oklch(0.3478 0.0374 349);
+
+  --cb-paper-bg: oklch(0.2811 0.0183 285.2);
+  --cb-paper-bg-warm: oklch(0.3022 0.0113 55.9);
+  --cb-paper-fg: oklch(0.9524 0.0093 62.6);
+  --cb-paper-border: oklch(0.4028 0.0177 308);
+  --cb-paper-tape: oklch(0.4773 0.0499 96.2 / 0.82);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.46);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.42);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --cb-bg: oklch(0.2117 0.0158 279.4);
+    --cb-bg-subtle: oklch(0.2811 0.0183 285.2);
+    --cb-surface: oklch(0.2811 0.0183 285.2);
+    --cb-surface-raised: oklch(0.3022 0.0113 55.9);
+    --cb-border: oklch(0.4028 0.0177 308);
+    --cb-border-strong: oklch(0.58 0.022 308);
+    --cb-fg: oklch(0.9524 0.0093 62.6);
+    --cb-fg-muted: oklch(0.78 0.018 62.6);
+    --cb-fg-subtle: oklch(0.68 0.018 62.6);
+    --cb-decor-violet: oklch(0.3447 0.0451 290.9);
+    --cb-decor-blue: oklch(0.3645 0.0299 235.5);
+    --cb-decor-teal: oklch(0.3731 0.0308 170.1);
+    --cb-decor-green: oklch(0.3731 0.0308 170.1);
+    --cb-decor-amber: oklch(0.3918 0.039 91.8);
+    --cb-decor-rose: oklch(0.3478 0.0374 349);
+    --cb-paper-bg: oklch(0.2811 0.0183 285.2);
+    --cb-paper-bg-warm: oklch(0.3022 0.0113 55.9);
+    --cb-paper-fg: oklch(0.9524 0.0093 62.6);
+    --cb-paper-border: oklch(0.4028 0.0177 308);
+    --cb-paper-tape: oklch(0.4773 0.0499 96.2 / 0.82);
+    --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.46);
+    --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.42);
+  }
+}

package/dist/styles.css

@@ -18,6 +18,11 @@
   --cb-radius-xl: 1.75rem;
   --cb-radius-full: 999px;
 
+  /* Small decorative rotations shared by paper and sticker materials. */
+  --cb-tilt-left: -1.5deg;
+  --cb-tilt-none: 0deg;
+  --cb-tilt-right: 1.5deg;
+
   --cb-text-xs: 0.75rem;
   --cb-text-sm: 0.875rem;
   --cb-text-md: 1rem;
@@ -37,6 +42,12 @@
   --cb-control-height-md: 2.5rem;
   --cb-control-height-lg: 3rem;
 
+  --cb-sticker-enter-y: var(--cb-space-3);
+  --cb-sticker-exit-x: var(--cb-space-6);
+  --cb-sticker-enter-scale: 0.94;
+  --cb-sticker-exit-scale: 0.9;
+  --cb-sticker-exit-rotate: 8deg;
+
   --cb-border-width: 1px;
   --cb-focus-width: 2px;
   /* Outside a control's own edge. */
@@ -120,6 +131,15 @@
   --cb-shadow-md: 0 4px 16px oklch(0.3 0.03 280 / 0.08);
   --cb-shadow-lg: 0 18px 48px oklch(0.3 0.03 280 / 0.12);
 
+  /* Paper is a material seam: Skins may retune it without changing Surface or StickerGroup. */
+  --cb-paper-bg: var(--cb-surface);
+  --cb-paper-bg-warm: oklch(0.98 0.018 80);
+  --cb-paper-fg: var(--cb-fg);
+  --cb-paper-border: var(--cb-border);
+  --cb-paper-tape: oklch(0.9 0.055 92 / 0.78);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0.3 0.03 280 / 0.1);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0.3 0.03 280 / 0.12);
+
   --cb-glass-bg: oklch(1 0 0 / 0.74);
   --cb-glass-bg-opaque: oklch(0.985 0.004 280);
   --cb-glass-border: oklch(1 0 0 / 0.55);
@@ -163,6 +183,14 @@
     --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
     --cb-shadow-lg: 0 22px 56px oklch(0 0 0 / 0.55);
 
+    --cb-paper-bg: var(--cb-surface);
+    --cb-paper-bg-warm: oklch(0.3 0.025 70);
+    --cb-paper-fg: var(--cb-fg);
+    --cb-paper-border: var(--cb-border);
+    --cb-paper-tape: oklch(0.46 0.05 92 / 0.82);
+    --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.42);
+    --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.38);
+
     --cb-glass-bg: oklch(0.28 0.028 280 / 0.72);
     --cb-glass-bg-opaque: oklch(0.25 0.024 280);
     --cb-glass-border: oklch(0.8 0.02 280 / 0.16);
@@ -205,6 +233,14 @@
   --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
   --cb-shadow-lg: 0 22px 56px oklch(0 0 0 / 0.55);
 
+  --cb-paper-bg: var(--cb-surface);
+  --cb-paper-bg-warm: oklch(0.3 0.025 70);
+  --cb-paper-fg: var(--cb-fg);
+  --cb-paper-border: var(--cb-border);
+  --cb-paper-tape: oklch(0.46 0.05 92 / 0.82);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.42);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.38);
+
   --cb-glass-bg: oklch(0.28 0.028 280 / 0.72);
   --cb-glass-bg-opaque: oklch(0.25 0.024 280);
   --cb-glass-border: oklch(0.8 0.02 280 / 0.16);
@@ -231,7 +267,9 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 /* Someone who asked their system for more contrast gets stronger edges and darker secondary
    text, without the palette changing hue underneath them. */
 @media (prefers-contrast: more) {
-  :root {
+  /* `html:root` deliberately outranks a Skin's later `:root` rule. Contrast is a reader
+     preference, so a brand Skin may change hue but must not weaken these accessibility edges. */
+  html:root {
     --cb-border: oklch(0.7 0.014 280);
     --cb-border-strong: oklch(0.45 0.02 280);
     --cb-fg-muted: oklch(0.35 0.02 280);
@@ -240,8 +278,8 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
     --cb-glass-border-strong: oklch(0.45 0.02 280);
   }
 
-  :root[data-theme="dark"],
-  :root:not([data-theme="light"]) {
+  html:root[data-theme="dark"],
+  html:root:not([data-theme="light"]) {
     --cb-border: oklch(0.58 0.026 280);
     --cb-border-strong: oklch(0.72 0.03 280);
     --cb-fg-muted: oklch(0.88 0.012 280);
@@ -258,6 +296,9 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   --cb-duration-base: 220ms;
   --cb-duration-slow: 380ms;
   --cb-duration-deliberate: 620ms;
+  --cb-duration-stagger-tight: 40ms;
+  --cb-duration-stagger-standard: 60ms;
+  --cb-duration-stagger-relaxed: 80ms;
 
   --cb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --cb-ease-entrance: cubic-bezier(0.05, 0.7, 0.1, 1);
@@ -272,6 +313,49 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   :root { --cb-motion-scale: 0; }
 }
 
+/* tokens/surface.css */
+/* Component Tokens shared by every platform Surface rendering. */
+:root {
+  --cb-surface-tinted-edge-strength: 0.22;
+  --cb-surface-gradient-start-strength: 0.26;
+  --cb-surface-gradient-end-strength: 0.06;
+  --cb-surface-gradient-edge-strength: 0.24;
+}
+
+/* tokens/data-visualization.css */
+/* Component Tokens shared by the web and Flutter mini-chart renderings. */
+:root {
+  --cb-mini-chart-track-strength: 0.08;
+  --cb-mini-chart-area-strength: 0.16;
+  --cb-mini-chart-bar-strength: 0.70;
+  --cb-mini-chart-line-width: 0.09375rem;
+  --cb-mini-chart-marker-radius: 0.15625rem;
+  --cb-mini-chart-bar-gap: 0.125rem;
+  --cb-mini-chart-min-bar: 0.0625rem;
+  --cb-mini-chart-bar-radius: 0.0625rem;
+  --cb-mini-chart-donut-size-sm: 4rem;
+  --cb-mini-chart-donut-size-md: 7.5rem;
+  --cb-mini-chart-donut-size-lg: 10rem;
+  --cb-mini-chart-donut-thickness-sm: 0.5rem;
+  --cb-mini-chart-donut-thickness-md: 1rem;
+  --cb-mini-chart-donut-thickness-lg: 1.5rem;
+  --cb-mini-chart-width-sm: 6rem;
+  --cb-mini-chart-width-md: 7.5rem;
+  --cb-mini-chart-width-lg: 10rem;
+  --cb-mini-chart-height-sm: 1.5rem;
+  --cb-mini-chart-height-md: 2rem;
+  --cb-mini-chart-height-lg: 3rem;
+  --cb-mini-chart-padding: 0.0625rem;
+}
+
+/* tokens/skeleton.css */
+/* Skeleton component Tokens shared by web and Flutter renderings. */
+:root {
+  --cb-skeleton-fill-strength: 0.28;
+  --cb-skeleton-opacity-min: 0.56;
+  --cb-skeleton-opacity-max: 1;
+}
+
 /* foundation/layout.css */
 .cb-flex { display: flex; gap: var(--cb-flex-gap); }
 .cb-flex--column { flex-direction: column; }
@@ -361,7 +445,11 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 /* Tint mixes the accent into the surface so one strength token retunes every tinted card. */
 .cb-surface--tinted {
   background: color-mix(in oklch, var(--cb-surface-accent) calc(var(--cb-tint-strength) * 100%), var(--cb-surface));
-  border-color: color-mix(in oklch, var(--cb-surface-accent) 22%, transparent);
+  border-color: color-mix(
+    in oklch,
+    var(--cb-surface-accent) calc(var(--cb-surface-tinted-edge-strength) * 100%),
+    transparent
+  );
 }
 
 .cb-surface--glass {
@@ -391,17 +479,58 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-surface--gradient {
   background: linear-gradient(
     var(--cb-gradient-angle),
-    color-mix(in oklch, var(--cb-surface-accent) 26%, var(--cb-surface)),
-    color-mix(in oklch, var(--cb-surface-accent) 6%, var(--cb-surface))
+    color-mix(
+      in oklch,
+      var(--cb-surface-accent) calc(var(--cb-surface-gradient-start-strength) * 100%),
+      var(--cb-surface)
+    ),
+    color-mix(
+      in oklch,
+      var(--cb-surface-accent) calc(var(--cb-surface-gradient-end-strength) * 100%),
+      var(--cb-surface)
+    )
+  );
+  border-color: color-mix(
+    in oklch,
+    var(--cb-surface-accent) calc(var(--cb-surface-gradient-edge-strength) * 100%),
+    transparent
   );
-  border-color: color-mix(in oklch, var(--cb-surface-accent) 24%, transparent);
 }
 
+.cb-surface--paper {
+  background: var(--cb-paper-bg);
+  border-color: var(--cb-paper-border);
+  color: var(--cb-paper-fg);
+  position: relative;
+  transform: rotate(var(--cb-tilt-none));
+  box-shadow: var(--cb-paper-shadow);
+}
+
+.cb-surface--paper::before {
+  background: var(--cb-paper-tape);
+  content: "";
+  height: var(--cb-space-3);
+  left: 50%;
+  pointer-events: none;
+  position: absolute;
+  top: calc(var(--cb-space-2) * -1);
+  transform: translateX(-50%) rotate(var(--cb-tilt-left));
+  width: calc(var(--cb-space-7) + var(--cb-space-2));
+}
+
+.cb-surface--paper[data-paper-tilt="left"] { transform: rotate(var(--cb-tilt-left)); }
+.cb-surface--paper[data-paper-tilt="right"] { transform: rotate(var(--cb-tilt-right)); }
+
 .cb-elevation--none { box-shadow: var(--cb-surface-material-shadow); }
 .cb-elevation--sm { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-sm); }
 .cb-elevation--md { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-md); }
 .cb-elevation--lg { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-lg); }
 
+.cb-surface--paper.cb-elevation--none,
+.cb-surface--paper.cb-elevation--sm,
+.cb-surface--paper.cb-elevation--md,
+.cb-surface--paper.cb-elevation--lg { box-shadow: var(--cb-paper-shadow); }
+
 @supports not ((backdrop-filter: blur(var(--cb-glass-blur))) or (-webkit-backdrop-filter: blur(var(--cb-glass-blur)))) {
   .cb-surface--glass { background: var(--cb-glass-opaque-fill); }
 }
@@ -432,6 +561,16 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
+
+
+  .cb-surface--paper {
+    background: Canvas;
+    border-color: CanvasText;
+    color: CanvasText;
+    transform: none;
+  }
+
+  .cb-surface--paper::before { display: none; }
 }
 
 .cb-radius--none { border-radius: var(--cb-radius-none); }
@@ -657,7 +796,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 /* data/donut.css */
 .cb-donut { position: relative; display: inline-grid; place-items: center; }
 .cb-donut svg { position: absolute; inset: 0; }
-.cb-donut__track { stroke: color-mix(in oklch, var(--cb-fg) 8%, transparent); }
+.cb-donut__track { stroke: color-mix(in oklch, var(--cb-fg) calc(var(--cb-mini-chart-track-strength) * 100%), transparent); }
 .cb-donut__arc { transition: stroke-dasharray var(--cb-duration-deliberate) var(--cb-ease-entrance); }
 /* Reduced motion: the arcs are drawn at their final length rather than growing into place. */
 @media (prefers-reduced-motion: reduce) {
@@ -690,10 +829,10 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-sparkline[data-hue="amber"] { --cb-spark-accent: var(--cb-decor-amber); }
 .cb-sparkline[data-hue="rose"] { --cb-spark-accent: var(--cb-decor-rose); }
 
-.cb-sparkline__line { stroke: var(--cb-spark-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-.cb-sparkline__area { fill: color-mix(in oklch, var(--cb-spark-accent) 16%, transparent); }
+.cb-sparkline__line { stroke: var(--cb-spark-accent); stroke-width: var(--cb-mini-chart-line-width); stroke-linecap: round; stroke-linejoin: round; }
+.cb-sparkline__area { fill: color-mix(in oklch, var(--cb-spark-accent) calc(var(--cb-mini-chart-area-strength) * 100%), transparent); }
 .cb-sparkline__last { fill: var(--cb-spark-accent); }
-.cb-sparkline__bar { fill: color-mix(in oklch, var(--cb-spark-accent) 70%, transparent); }
+.cb-sparkline__bar { fill: color-mix(in oklch, var(--cb-spark-accent) calc(var(--cb-mini-chart-bar-strength) * 100%), transparent); }
 
 /* data/leaderboard.css */
 .cb-leaderboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cb-space-1); font-family: var(--cb-font-sans); }
@@ -779,6 +918,95 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   object-fit: cover;
 }
 
+/* data/sticker-group/sticker-group.css */
+.cb-sticker-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cb-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cb-sticker-group__item {
+  --cb-sticker-fill: var(--cb-paper-bg-warm);
+  --cb-sticker-tilt: var(--cb-tilt-none);
+  --cb-sticker-resolved-exit-x: var(--cb-sticker-exit-x);
+  --cb-sticker-resolved-exit-rotate: var(--cb-sticker-exit-rotate);
+}
+
+.cb-sticker-group__item[data-tilt="left"] { --cb-sticker-tilt: var(--cb-tilt-left); }
+.cb-sticker-group__item[data-tilt="right"] { --cb-sticker-tilt: var(--cb-tilt-right); }
+.cb-sticker-group__item[data-exit="left"] {
+  --cb-sticker-resolved-exit-x: calc(var(--cb-sticker-exit-x) * -1);
+  --cb-sticker-resolved-exit-rotate: calc(var(--cb-sticker-exit-rotate) * -1);
+}
+
+.cb-sticker-group__item[data-hue="violet"] { --cb-sticker-fill: var(--cb-decor-violet); }
+.cb-sticker-group__item[data-hue="blue"] { --cb-sticker-fill: var(--cb-decor-blue); }
+.cb-sticker-group__item[data-hue="teal"] { --cb-sticker-fill: var(--cb-decor-teal); }
+.cb-sticker-group__item[data-hue="green"] { --cb-sticker-fill: var(--cb-decor-green); }
+.cb-sticker-group__item[data-hue="amber"] { --cb-sticker-fill: var(--cb-decor-amber); }
+.cb-sticker-group__item[data-hue="rose"] { --cb-sticker-fill: var(--cb-decor-rose); }
+
+.cb-sticker-group__button {
+  align-items: center;
+  appearance: none;
+  background: color-mix(in oklch, var(--cb-sticker-fill) 72%, var(--cb-paper-bg));
+  border: var(--cb-border-width) dashed color-mix(in oklch, var(--cb-paper-fg) 28%, transparent);
+  border-radius: var(--cb-radius-sm);
+  box-shadow: var(--cb-sticker-shadow);
+  color: var(--cb-paper-fg);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-weight: var(--cb-weight-semibold);
+  gap: var(--cb-space-2);
+  min-height: var(--cb-control-height-md);
+  padding: var(--cb-space-2) var(--cb-space-3);
+  text-align: start;
+}
+
+@media (hover: hover) {
+  .cb-sticker-group__button:hover {
+    background: color-mix(in oklch, var(--cb-sticker-fill) 84%, var(--cb-paper-bg));
+  }
+}
+
+.cb-sticker-group__button:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+.cb-sticker-group__icon {
+  flex: none;
+  height: var(--cb-text-sm);
+  width: var(--cb-text-sm);
+}
+
+.cb-sticker-group--skeleton { align-items: center; }
+
+.cb-sticker-group__skeleton-item {
+  background: var(--cb-bg-subtle);
+  border-radius: var(--cb-radius-sm);
+  display: block;
+  height: var(--cb-control-height-md);
+  width: calc(var(--cb-space-7) + var(--cb-space-5));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-sticker-group__item { transform: none !important; }
+}
+
+@media (forced-colors: active) {
+  .cb-sticker-group__button {
+    background: ButtonFace;
+    border-color: ButtonText;
+    box-shadow: none;
+    color: ButtonText;
+  }
+}
+
 /* nav/nav.css */
 .cb-menu-positioner {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {