@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/measurements.json

@@ -0,0 +1,365 @@
+{
+  "measuredWith": {
+    "node": "v22.22.1",
+    "react": "18.3.1",
+    "method": "isolated Node ESM import of each emitted component module, including React peer startup"
+  },
+  "componentCount": 59,
+  "componentJsBytes": 35696,
+  "components": [
+    {
+      "name": "Button",
+      "moduleBytes": 215,
+      "declarationBytes": 227,
+      "coldImportMs": 5.132
+    },
+    {
+      "name": "ButtonGroup",
+      "moduleBytes": 263,
+      "declarationBytes": 338,
+      "coldImportMs": 4.936
+    },
+    {
+      "name": "CommandBar",
+      "moduleBytes": 246,
+      "declarationBytes": 332,
+      "coldImportMs": 5.165
+    },
+    {
+      "name": "CopyButton",
+      "moduleBytes": 977,
+      "declarationBytes": 383,
+      "coldImportMs": 5.143
+    },
+    {
+      "name": "Link",
+      "moduleBytes": 333,
+      "declarationBytes": 228,
+      "coldImportMs": 5.007
+    },
+    {
+      "name": "Menu",
+      "moduleBytes": 360,
+      "declarationBytes": 320,
+      "coldImportMs": 5.091
+    },
+    {
+      "name": "Accordion",
+      "moduleBytes": 403,
+      "declarationBytes": 414,
+      "coldImportMs": 5.037
+    },
+    {
+      "name": "Badge",
+      "moduleBytes": 188,
+      "declarationBytes": 204,
+      "coldImportMs": 5.018
+    },
+    {
+      "name": "Card",
+      "moduleBytes": 189,
+      "declarationBytes": 197,
+      "coldImportMs": 5.063
+    },
+    {
+      "name": "Carousel",
+      "moduleBytes": 515,
+      "declarationBytes": 424,
+      "coldImportMs": 4.958
+    },
+    {
+      "name": "Divider",
+      "moduleBytes": 190,
+      "declarationBytes": 208,
+      "coldImportMs": 4.923
+    },
+    {
+      "name": "EmptyState",
+      "moduleBytes": 411,
+      "declarationBytes": 372,
+      "coldImportMs": 5.02
+    },
+    {
+      "name": "Image",
+      "moduleBytes": 187,
+      "declarationBytes": 247,
+      "coldImportMs": 5.02
+    },
+    {
+      "name": "List",
+      "moduleBytes": 251,
+      "declarationBytes": 309,
+      "coldImportMs": 5.049
+    },
+    {
+      "name": "Rating",
+      "moduleBytes": 391,
+      "declarationBytes": 360,
+      "coldImportMs": 5.043
+    },
+    {
+      "name": "Tag",
+      "moduleBytes": 467,
+      "declarationBytes": 350,
+      "coldImportMs": 5.024
+    },
+    {
+      "name": "TagGroup",
+      "moduleBytes": 257,
+      "declarationBytes": 329,
+      "coldImportMs": 5.006
+    },
+    {
+      "name": "Text",
+      "moduleBytes": 192,
+      "declarationBytes": 259,
+      "coldImportMs": 5.001
+    },
+    {
+      "name": "DataGrid",
+      "moduleBytes": 2635,
+      "declarationBytes": 1114,
+      "coldImportMs": 4.985
+    },
+    {
+      "name": "ListView",
+      "moduleBytes": 1291,
+      "declarationBytes": 1358,
+      "coldImportMs": 6.253
+    },
+    {
+      "name": "Table",
+      "moduleBytes": 259,
+      "declarationBytes": 321,
+      "coldImportMs": 5.198
+    },
+    {
+      "name": "VirtualList",
+      "moduleBytes": 1516,
+      "declarationBytes": 596,
+      "coldImportMs": 5.079
+    },
+    {
+      "name": "Alert",
+      "moduleBytes": 210,
+      "declarationBytes": 209,
+      "coldImportMs": 5.152
+    },
+    {
+      "name": "Toast",
+      "moduleBytes": 707,
+      "declarationBytes": 424,
+      "coldImportMs": 5.055
+    },
+    {
+      "name": "Checkbox",
+      "moduleBytes": 213,
+      "declarationBytes": 238,
+      "coldImportMs": 5.004
+    },
+    {
+      "name": "ComboBox",
+      "moduleBytes": 539,
+      "declarationBytes": 379,
+      "coldImportMs": 5.044
+    },
+    {
+      "name": "DateRangePicker",
+      "moduleBytes": 794,
+      "declarationBytes": 685,
+      "coldImportMs": 5.041
+    },
+    {
+      "name": "Field",
+      "moduleBytes": 930,
+      "declarationBytes": 602,
+      "coldImportMs": 5.06
+    },
+    {
+      "name": "FileDropzone",
+      "moduleBytes": 1587,
+      "declarationBytes": 806,
+      "coldImportMs": 5.067
+    },
+    {
+      "name": "FilterBar",
+      "moduleBytes": 566,
+      "declarationBytes": 455,
+      "coldImportMs": 5.075
+    },
+    {
+      "name": "Input",
+      "moduleBytes": 189,
+      "declarationBytes": 215,
+      "coldImportMs": 5.088
+    },
+    {
+      "name": "Label",
+      "moduleBytes": 189,
+      "declarationBytes": 215,
+      "coldImportMs": 4.993
+    },
+    {
+      "name": "Radio",
+      "moduleBytes": 204,
+      "declarationBytes": 229,
+      "coldImportMs": 5.166
+    },
+    {
+      "name": "RadioGroup",
+      "moduleBytes": 268,
+      "declarationBytes": 344,
+      "coldImportMs": 4.981
+    },
+    {
+      "name": "Select",
+      "moduleBytes": 192,
+      "declarationBytes": 221,
+      "coldImportMs": 5.056
+    },
+    {
+      "name": "SwatchPicker",
+      "moduleBytes": 1089,
+      "declarationBytes": 663,
+      "coldImportMs": 4.986
+    },
+    {
+      "name": "Switch",
+      "moduleBytes": 232,
+      "declarationBytes": 238,
+      "coldImportMs": 5.073
+    },
+    {
+      "name": "TagPicker",
+      "moduleBytes": 499,
+      "declarationBytes": 473,
+      "coldImportMs": 5.121
+    },
+    {
+      "name": "TextArea",
+      "moduleBytes": 198,
+      "declarationBytes": 233,
+      "coldImportMs": 5.02
+    },
+    {
+      "name": "Breadcrumb",
+      "moduleBytes": 633,
+      "declarationBytes": 417,
+      "coldImportMs": 5.188
+    },
+    {
+      "name": "Nav",
+      "moduleBytes": 407,
+      "declarationBytes": 419,
+      "coldImportMs": 5.056
+    },
+    {
+      "name": "Pagination",
+      "moduleBytes": 821,
+      "declarationBytes": 557,
+      "coldImportMs": 4.998
+    },
+    {
+      "name": "Tabs",
+      "moduleBytes": 1950,
+      "declarationBytes": 521,
+      "coldImportMs": 5.118
+    },
+    {
+      "name": "Tree",
+      "moduleBytes": 678,
+      "declarationBytes": 470,
+      "coldImportMs": 5.056
+    },
+    {
+      "name": "ViewSwitcher",
+      "moduleBytes": 483,
+      "declarationBytes": 497,
+      "coldImportMs": 5.141
+    },
+    {
+      "name": "Dialog",
+      "moduleBytes": 901,
+      "declarationBytes": 467,
+      "coldImportMs": 5.065
+    },
+    {
+      "name": "Drawer",
+      "moduleBytes": 272,
+      "declarationBytes": 264,
+      "coldImportMs": 5.737
+    },
+    {
+      "name": "Popover",
+      "moduleBytes": 337,
+      "declarationBytes": 329,
+      "coldImportMs": 5.107
+    },
+    {
+      "name": "Avatar",
+      "moduleBytes": 401,
+      "declarationBytes": 293,
+      "coldImportMs": 5.255
+    },
+    {
+      "name": "AvatarGroup",
+      "moduleBytes": 661,
+      "declarationBytes": 462,
+      "coldImportMs": 5.749
+    },
+    {
+      "name": "Persona",
+      "moduleBytes": 444,
+      "declarationBytes": 338,
+      "coldImportMs": 5.658
+    },
+    {
+      "name": "AttachmentList",
+      "moduleBytes": 1205,
+      "declarationBytes": 618,
+      "coldImportMs": 5.091
+    },
+    {
+      "name": "LookupPicker",
+      "moduleBytes": 498,
+      "declarationBytes": 469,
+      "coldImportMs": 5.082
+    },
+    {
+      "name": "PersonPicker",
+      "moduleBytes": 568,
+      "declarationBytes": 492,
+      "coldImportMs": 5.184
+    },
+    {
+      "name": "SharePointField",
+      "moduleBytes": 3720,
+      "declarationBytes": 930,
+      "coldImportMs": 7.061
+    },
+    {
+      "name": "ViewCard",
+      "moduleBytes": 415,
+      "declarationBytes": 402,
+      "coldImportMs": 5.115
+    },
+    {
+      "name": "ProgressBar",
+      "moduleBytes": 349,
+      "declarationBytes": 307,
+      "coldImportMs": 5.111
+    },
+    {
+      "name": "Skeleton",
+      "moduleBytes": 327,
+      "declarationBytes": 353,
+      "coldImportMs": 5.112
+    },
+    {
+      "name": "Spinner",
+      "moduleBytes": 284,
+      "declarationBytes": 275,
+      "coldImportMs": 5.062
+    }
+  ]
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@spfx-fast/sharepoint-ui",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "license": "MIT",
-  "description": "Host-aware, framework-independent UI elements for SharePoint Framework",
+  "description": "Small themeable React components for SharePoint Framework",
   "homepage": "https://vystartasv.github.io/sharepoint-ui/",
   "repository": {
     "type": "git",
@@ -14,16 +14,16 @@
   "keywords": [
     "sharepoint",
     "spfx",
-    "fluent-ui",
-    "web-components",
     "react",
-    "design-system"
+    "ui"
   ],
   "publishConfig": {
     "access": "public"
   },
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/theme.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -35,64 +35,32 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
     },
-    "./elements": {
-      "types": "./dist/elements.d.ts",
-      "import": "./dist/elements.js"
-    },
-    "./elements/*": {
-      "types": "./dist/elements/*.d.ts",
-      "import": "./dist/elements/*.js"
-    },
-    "./appearance": {
-      "types": "./dist/appearance.d.ts",
-      "import": "./dist/appearance.js"
-    },
     "./theme": {
       "types": "./dist/theme.d.ts",
       "import": "./dist/theme.js"
     },
-    "./sharepoint-fields": {
-      "types": "./dist/sharepoint-fields.d.ts",
-      "import": "./dist/sharepoint-fields.js"
-    },
-    "./tokens": "./tokens.json"
+    "./components.json": "./components.json",
+    "./styles.css": "./src/theme.css"
   },
   "files": [
     "dist",
     "LICENSE",
     "README.md",
     "QUICKSTART.md",
-    "AGENTS.md",
+    "src/theme.css",
     "components.json",
-    "tokens.json",
-    "skills",
-    "scripts"
+    "measurements.json"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "prepublishOnly": "npm run build",
-    "catalog:check": "node scripts/validate-component-catalog.mjs",
-    "catalog:sync-signatures": "node scripts/sync-component-catalog-signatures.mjs",
-    "catalog:check-signatures": "node scripts/sync-component-catalog-signatures.mjs --check",
-    "tokens:generate": "node scripts/generate-token-index.mjs",
-    "tokens:check": "node scripts/generate-token-index.mjs --check"
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": ">=18.3.1",
-    "react-dom": ">=18.3.1"
+    "react": "18.3.1"
   },
   "devDependencies": {
     "@types/react": "18.3.28",
-    "@types/react-dom": "^18.3.7",
-    "react-dom": "^18.3.1",
+    "react": "18.3.1",
     "typescript": "5.8.3"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
   }
 }

package/src/theme.css

@@ -0,0 +1,125 @@
+.spui-theme{--spui-accent:var(--themePrimary,#0f6cbd);--spui-accentText:var(--white,#fff);--spui-background:var(--neutralLighterAlt,#f5f5f5);--spui-border:var(--neutralQuaternaryAlt,#d1d1d1);--spui-surface:var(--white,#fff);--spui-text:var(--neutralPrimary,#242424);--spui-muted:var(--neutralSecondary,#616161);--spui-radius:4px;color:var(--spui-text);font:inherit}
+.spui-button{appearance:none;border:1px solid var(--spui-accent);border-radius:var(--spui-radius);background:var(--spui-accent);color:var(--spui-accentText);font:inherit;font-weight:600;min-height:2.25rem;padding:.45rem .85rem;cursor:pointer}
+.spui-button:hover{filter:brightness(.94)}
+.spui-button-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem}
+.spui-command-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
+.spui-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.spui-link{color:var(--spui-accent);text-decoration:underline;text-underline-offset:.15em}
+.spui-menu{position:relative;display:inline-block}
+.spui-menu>summary{cursor:pointer}
+.spui-menu-items{position:absolute;z-index:1;inset-block-start:100%;inset-inline-start:0;min-width:10rem;padding:.5rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);box-shadow:0 4px 12px #0002}
+.spui-popover{position:relative;display:inline-block}
+.spui-popover>summary{cursor:pointer}
+.spui-popover>div{position:absolute;z-index:1;inset-block-start:calc(100% + .35rem);inset-inline-start:0;min-width:12rem;max-width:min(24rem,calc(100vw - 2rem));padding:.75rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);box-shadow:0 4px 12px #0002}
+.spui-button:focus-visible,.spui-input:focus-visible{outline:2px solid var(--spui-accent);outline-offset:2px}
+.spui-input,.spui-textarea,.spui-select{box-sizing:border-box;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);color:var(--spui-text);font:inherit;padding:.45rem .65rem}
+.spui-input{min-height:2.25rem}
+.spui-textarea{min-height:5rem;resize:vertical}
+.spui-checkbox,.spui-radio,.spui-switch{accent-color:var(--spui-accent)}
+.spui-checkbox:focus-visible,.spui-radio:focus-visible,.spui-switch:focus-visible{outline:2px solid var(--spui-accent);outline-offset:2px}
+.spui-switch{appearance:none;width:2.35rem;height:1.3rem;border:1px solid var(--spui-border);border-radius:99px;background:radial-gradient(circle at .6rem center,var(--spui-muted) .34rem,transparent .37rem),var(--spui-surface);vertical-align:middle;cursor:pointer}
+.spui-switch:checked{background:radial-gradient(circle at calc(100% - .6rem) center,var(--spui-accentText) .34rem,transparent .37rem),var(--spui-accent);border-color:var(--spui-accent)}
+.spui-switch:disabled{cursor:not-allowed;opacity:.55}
+.spui-field{display:grid;justify-items:start;gap:.35rem}
+.spui-filter-bar{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem}
+.spui-filter-controls{display:flex;flex:1 1 20rem;flex-wrap:wrap;align-items:end;gap:.75rem}
+.spui-filter-clear{min-height:2.25rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);color:var(--spui-text);font:inherit;padding:.4rem .7rem;cursor:pointer}
+.spui-filter-clear:disabled{opacity:.55;cursor:not-allowed}
+.spui-filter-clear:focus-visible{outline:2px solid var(--spui-accent);outline-offset:2px}
+.spui-file-dropzone{display:grid;justify-items:start;gap:.5rem;border:1px dashed var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);padding:1rem}
+.spui-file-dropzone:focus-within{outline:2px solid var(--spui-accent);outline-offset:2px}
+.spui-file-dropzone p{margin:0}
+.spui-file-input{max-width:100%;font:inherit;color:var(--spui-text)}
+.spui-file-drop-hint{color:var(--spui-muted);font-size:.875rem}
+.spui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.spui-list-view{display:grid;gap:1rem}
+.spui-list-view-tools{display:grid;gap:.75rem}
+.spui-attachment-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
+.spui-attachment{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem}
+.spui-attachment progress{flex:1 1 8rem;max-width:16rem}
+.spui-attachment button{min-height:2rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);color:var(--spui-text);font:inherit;padding:.25rem .55rem;cursor:pointer}
+.spui-attachment button:disabled{opacity:.55;cursor:not-allowed}
+.spui-view-switcher{display:inline-flex;flex-wrap:wrap;gap:.25rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);padding:.2rem}
+.spui-view-switcher button{min-height:2rem;border:0;border-radius:calc(var(--spui-radius) - 2px);background:transparent;color:var(--spui-text);font:inherit;padding:.3rem .65rem;cursor:pointer}
+.spui-view-switcher button[aria-pressed="true"]{background:var(--spui-accent);color:var(--spui-accentText)}
+.spui-view-switcher button:focus-visible{outline:2px solid var(--spui-accent);outline-offset:1px}
+.spui-label{font-weight:600}
+.spui-radio-group{display:grid;gap:.5rem;border:0;padding:0}
+.spui-radio-group legend{margin-bottom:.35rem;font-weight:600}
+.spui-date-range{display:flex;flex-wrap:wrap;gap:.75rem;border:0;padding:0}
+.spui-date-range legend{margin-bottom:.35rem;font-weight:600}
+.spui-date-range label{display:grid;gap:.35rem}
+.spui-hint{color:var(--spui-muted);font-size:.875em}
+.spui-error{color:#b10e1e;font-size:.875em}
+.spui-card{border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);padding:1rem}
+.spui-view-card{border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);padding:1rem}
+.spui-view-card h2{margin:0 0 .35rem;font-size:1.1rem}
+.spui-view-card p{margin:.35rem 0}
+.spui-view-subtitle{color:var(--spui-muted)}
+.spui-empty-state{padding:1.5rem;text-align:center}
+.spui-empty-state h2{margin:0 0 .4rem;font-size:1.25rem}
+.spui-empty-state p{color:var(--spui-muted)}
+.spui-divider{height:0;border:0;border-top:1px solid var(--spui-border);margin-block:1rem}
+.spui-list{padding-inline-start:1.5rem}
+.spui-accordion>details{border-bottom:1px solid var(--spui-border);padding-block:.6rem}
+.spui-accordion summary{cursor:pointer;font-weight:600}
+.spui-accordion-content{padding-block:.6rem}
+.spui-tabs [role=tablist]{display:flex;gap:.25rem;border-bottom:1px solid var(--spui-border)}
+.spui-tabs [role=tab]{border:0;border-bottom:2px solid transparent;background:none;color:inherit;font:inherit;padding:.55rem .8rem;cursor:pointer}
+.spui-tabs [role=tab][aria-selected=true]{border-bottom-color:var(--spui-accent);color:var(--spui-accent)}
+.spui-tabs [role=tabpanel]{padding:.75rem 0}
+.spui-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
+.spui-breadcrumb li+li::before{content:"/";margin-inline-end:.5rem;color:var(--spui-muted)}
+.spui-pagination{display:flex;align-items:center;gap:.75rem}
+.spui-pagination button{min-height:2rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);color:var(--spui-text);font:inherit;padding:.3rem .6rem;cursor:pointer}
+.spui-pagination button:disabled{opacity:.55;cursor:not-allowed}
+.spui-progress{display:grid;gap:.35rem}
+.spui-progress-bar{width:100%;height:.65rem;accent-color:var(--spui-accent)}
+.spui-spinner{display:inline-block;width:1.25rem;height:1.25rem}
+.spui-spinner>span{display:block;width:100%;height:100%;border:2px solid var(--spui-border);border-top-color:var(--spui-accent);border-radius:50%;animation:spui-spin .8s linear infinite}
+@keyframes spui-spin{to{transform:rotate(1turn)}}
+@media(prefers-reduced-motion:reduce){.spui-spinner>span{animation:none;border-top-color:var(--spui-border);border-inline-end-color:var(--spui-accent)}}
+.spui-skeleton{display:inline-block;max-width:100%;border-radius:var(--spui-radius);background:var(--spui-background);vertical-align:middle;animation:spui-pulse 1.4s ease-in-out infinite alternate}
+@keyframes spui-pulse{to{opacity:.5}}
+@media(prefers-reduced-motion:reduce){.spui-skeleton{animation:none}}
+.spui-alert{padding:.75rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface)}
+.spui-toast{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem;border:1px solid var(--spui-border);border-radius:var(--spui-radius);background:var(--spui-surface);box-shadow:0 4px 12px #0002}
+.spui-table{width:100%;border-collapse:collapse;text-align:start}
+.spui-table caption{text-align:start;font-weight:600;padding:.5rem 0}
+.spui-table th,.spui-table td{padding:.5rem .65rem;border-bottom:1px solid var(--spui-border);text-align:start}
+.spui-table thead th{font-weight:600}
+.spui-tree,.spui-tree ul{list-style:none;padding-inline-start:1.1rem}
+.spui-tree{padding-inline-start:0}
+.spui-tree summary{cursor:pointer}
+.spui-nav ul{list-style:none;margin:0;padding:0}
+.spui-nav a[aria-current=page]{font-weight:700;text-decoration-thickness:2px}
+.spui-carousel{overflow:hidden}
+.spui-carousel:focus-visible{outline:2px solid var(--spui-accent);outline-offset:2px}
+.spui-carousel ul{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:inline mandatory;list-style:none;margin:0;padding:.25rem 0 .75rem}
+.spui-carousel li{flex:0 0 min(80vw,32rem);scroll-snap-align:start}
+.spui-tag-picker{min-width:min(100%,16rem);min-height:6rem}
+.spui-swatch-picker{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0}
+.spui-swatch-picker legend{width:100%;margin-bottom:.35rem;font-weight:600}
+.spui-swatch-option{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer}
+.spui-swatch-dot{flex:none;width:1.25rem;height:1.25rem;border:1px solid var(--spui-border);border-radius:50%;object-fit:cover}
+.spui-virtual-list{overscroll-behavior:contain}
+.spui-virtual-list-item{box-sizing:border-box}
+@media(prefers-reduced-motion:reduce){.spui-carousel ul{scroll-behavior:auto}}
+.spui-dialog{width:min(36rem,calc(100% - 2rem));max-height:calc(100% - 2rem);overflow:auto;border:1px solid var(--spui-border);border-radius:8px;background:var(--spui-surface);color:var(--spui-text);padding:1rem}
+.spui-dialog::backdrop{background:#0007}
+.spui-dialog>header{display:flex;align-items:start;justify-content:space-between;gap:1rem}
+.spui-dialog h2{margin:0;font-size:1.25rem}
+.spui-dialog.spui-drawer{position:fixed;inset-block:0;inset-inline-end:0;margin:0;width:min(28rem,100%);height:100dvh;max-height:none;border-radius:0}
+.spui-dialog.spui-drawer-start{inset-inline-start:0;inset-inline-end:auto}
+.spui-badge{display:inline-block;border:1px solid var(--spui-border);border-radius:999px;padding:.1rem .5rem;font-size:.8em}
+.spui-tag{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--spui-border);border-radius:999px;padding:.2rem .55rem;background:var(--spui-surface)}
+.spui-tag-remove{border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
+.spui-tag-group{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
+.spui-image{display:block;max-width:100%;height:auto}
+.spui-avatar{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;overflow:hidden;border-radius:50%;background:var(--spui-background);color:var(--spui-text);font-weight:600}
+.spui-avatar img{width:100%;height:100%;object-fit:cover}
+.spui-persona{display:flex;align-items:center;gap:.65rem}
+.spui-persona-copy{display:grid;gap:.1rem}
+.spui-avatar-group{display:flex;align-items:center}
+.spui-avatar-group>.spui-avatar+.spui-avatar{margin-inline-start:-.45rem;border:2px solid var(--spui-surface)}
+.spui-avatar-overflow{margin-inline-start:.4rem;font-size:.875em}