@brightspot/ui 6.8.0 → 6.8.2

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.8.0",
+  "version": "6.8.2",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
+  "homepage": "https://ui.brightspot.com",
   "main": "./dist/tailwind.config.js",
   "customElements": "dist/custom-elements.json",
   "exports": {
@@ -22,9 +23,9 @@
     "cem:docs": "yarn cem && node scripts/generate-docs.mjs",
     "build": "yarn clean && tsc --noEmitOnError && yarn cem && node scripts/copy-component-css.mjs && shx cp ./src/*.ts ./dist && shx rm ./dist/tailwind.storybook.config* && shx rm -Rf ./dist/stories && node scripts/check-dist-imports.mjs",
     "build:cms-ui": "yarn build && (cd src/legacy/tool-ui && yarn install --frozen-lockfile && yarn build) && (cd tool-ui && yarn install && yarn build)",
-    "prepack": "yarn build && yarn build-storybook && (cd src/legacy/tool-ui && yarn build)",
+    "prepack": "yarn build && node scripts/generate-docs.mjs && yarn build-storybook && (cd src/legacy/tool-ui && yarn build)",
     "storybook": "yarn cem && storybook dev -p 6006",
-    "build-storybook": "yarn cem && storybook build -o ./dist/storybook",
+    "build-storybook": "yarn cem && storybook build -o ./dist/storybook && node scripts/generate-docs.mjs --site dist/storybook",
     "test:storybook": "vitest --project=storybook",
     "test:css-bloat": "vitest run --project=css-bloat",
     "test:combo-input": "vitest run --project=combo-input",
@@ -40,7 +41,6 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@eslint/js": "^9.23.0",
     "@storybook/addon-docs": "10.2.12",
     "@storybook/addon-themes": "10.2.12",
@@ -98,11 +98,14 @@
   "sideEffects": [
     "dist/components/**/*.js",
     "dist/components/**/*.css",
+    "src/components/**/*",
     "src/legacy/**/*"
   ],
   "files": [
     "dist/**/*",
     "docs/**/*",
+    "llms.txt",
+    "CHANGELOG.md",
     "src/legacy/tool-ui/src/**/*",
     "!src/legacy/tool-ui/src/main/webapp/WEB-INF",
     "!src/legacy/tool-ui/src/main/webapp/v4/__mocks__",
@@ -119,10 +122,10 @@
     "!src/legacy/tool-ui/src/main/webapp/script/**/*.d.ts"
   ],
   "lint-staged": {
-    "src/components/**/*.ts": [
+    "{src/components/**/*.ts,src/util/**/*.ts,src/stories/*.stories.ts,src/tailwind-plugin-*.ts,scripts/generate-docs.mjs}": [
       "node scripts/run-cem.cjs",
       "node scripts/generate-docs.mjs",
-      "git add docs/components/"
+      "git add docs/components/ llms.txt"
     ],
     "*": "prettier --write --ignore-unknown"
   }

package/dist/storybook/assets/AiSparkle.stories-BfjT5jrJ.js

@@ -1,72 +0,0 @@
-import{g as l,x as t}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:d,argTypes:i}=l("btu-ai-sparkle"),n=["xs","sm","md","lg","xl"],g={title:"Components/AI/Sparkle",component:"btu-ai-sparkle",tags:["autodocs"],parameters:{docs:{subtitle:"The animated AI-branding sparkle",description:{component:`
-<h3>When to use:</h3>
-<ul>
-  <li>On the control that opens an AI surface (e.g. the button that opens the Esca assistant), to draw the eye to it</li>
-</ul>
-
-<p>Drive it with the <code>playing</code> boolean: <code>true</code> loops the clip while the AI surface is closed; set it <code>false</code> once the surface is open so it holds a static frame and stops competing for attention. Reduced-motion users always get the frozen frame.</p>
-
-<h3>Accessibility:</h3>
-<ul>
-  <li>Decorative by default (<code>aria-hidden="true"</code>, set only when absent) — the control it sits in owns the accessible name.</li>
-</ul>
-        `}},actions:{handles:c},controls:{expanded:!0}},args:{...d,playing:!0,size:"md"},argTypes:{...i,"--ai-sparkle-size":{table:{disable:!0}},playing:{...i.playing,control:{type:"boolean"},description:"Whether the sparkle animates. `false` (default) holds the last (fully-formed) frame.",table:{category:"Attributes",defaultValue:{summary:"false"}}},size:{...i.size,control:{type:"select"},options:n,description:"Sparkle size scale (mirrors btu-avatar). Overridden by `--ai-sparkle-size`.",table:{category:"Attributes",defaultValue:{summary:"md"}}},customSize:{name:"--ai-sparkle-size",control:{type:"text"},description:'Width/height override (e.g. "20px"). Beats the `size` attribute; default box is 2.5rem (md).',table:{category:"css properties"}}},render:e=>{const o={};return e.customSize&&(o["--ai-sparkle-size"]=e.customSize),t`<btu-ai-sparkle
-      ?playing=${e.playing}
-      size="${e.size}"
-      style=${p(o)}
-    ></btu-ai-sparkle>`}},s={args:{},parameters:{docs:{description:{story:"Toggle `playing` to switch between the looping animation and the static frame, and resize with `size`."}}}},a={render:()=>t`<div class="flex flex-row items-start gap-8">
-      ${[!0,!1].map(e=>t`
-          <div class="flex flex-col items-center gap-2">
-            <btu-ai-sparkle ?playing=${e} size="xl"></btu-ai-sparkle>
-            <span class="text-xs font-medium text-gray-700">${e?"playing":"static"}</span>
-          </div>
-        `)}
-    </div>`,parameters:{docs:{description:{story:'The looping state (left) next to the frozen frame (right) that `playing="false"` holds.'}}}},r={render:()=>t`<div class="flex flex-row items-center gap-6">
-      ${n.map(e=>t`
-          <div class="flex flex-col items-center gap-2">
-            <btu-ai-sparkle size="${e}"></btu-ai-sparkle>
-            <span class="text-xs text-gray-600">${e}</span>
-          </div>
-        `)}
-    </div>`,parameters:{docs:{description:{story:"The `size` scale (`xs`–`xl`), mirroring `<btu-avatar>`. For an arbitrary size, override with the `--ai-sparkle-size` custom property."}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story: 'Toggle \`playing\` to switch between the looping animation and the static frame, and resize with \`size\`.'
-      }
-    }
-  }
-}`,...s.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex flex-row items-start gap-8">
-      \${([true, false] as const).map(playing => html\`
-          <div class="flex flex-col items-center gap-2">
-            <btu-ai-sparkle ?playing=\${playing} size="xl"></btu-ai-sparkle>
-            <span class="text-xs font-medium text-gray-700">\${playing ? 'playing' : 'static'}</span>
-          </div>
-        \`)}
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The looping state (left) next to the frozen frame (right) that \`playing="false"\` holds.'
-      }
-    }
-  }
-}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex flex-row items-center gap-6">
-      \${sizeOptions.map(size => html\`
-          <div class="flex flex-col items-center gap-2">
-            <btu-ai-sparkle size="\${size}"></btu-ai-sparkle>
-            <span class="text-xs text-gray-600">\${size}</span>
-          </div>
-        \`)}
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The \`size\` scale (\`xs\`–\`xl\`), mirroring \`<btu-avatar>\`. For an arbitrary size, override with the \`--ai-sparkle-size\` custom property.'
-      }
-    }
-  }
-}`,...r.parameters?.docs?.source}}};const f=["Default","PlayingVsStatic","Sizes"];export{s as Default,a as PlayingVsStatic,r as Sizes,f as __namedExportsOrder,g as default};

package/dist/storybook/assets/Avatar.stories-D8lnIZaY.js

@@ -1,213 +0,0 @@
-import{g as A,x as n}from"./iframe-B9buZjP7.js";import{o as c}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:p,args:g,argTypes:a}=A("btu-avatar"),f=["xs","sm","md","lg","xl","xxl"],r="data:image/jpeg;base64,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",u={title:"Components/Avatar",component:"btu-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"Display user avatars with image loading and fallback text",description:{component:`
-<h3>When to use:</h3>
-<ul>
-  <li>To represent a user or entity with a profile picture</li>
-  <li>In user lists, comment threads, or navigation bars</li>
-  <li>When you need graceful fallback to initials</li>
-</ul>
-
-<h3>When not to use:</h3>
-<ul>
-  <li>For decorative images (use img tag instead)</li>
-  <li>For non-user entities without fallback text</li>
-</ul>
-
-<h3>Use Cases in the CMS:</h3>
-<ul>
-  <li>The user profile control in the main navigation bar</li>
-  <li>Viewers in a search result item</li>
-  <li>Viewers in the recent activity dashboard widget</li>
-  <li>Used by [AvatarGroup](?path=/docs/components-avatargroup--docs)</li>
-</ul>
-        `}},actions:{handles:p},controls:{expanded:!0}},args:{...g,alt:"Dylan",fallback:"DG",size:"md",tooltip:"Dylan G.","tooltip-position":"top"},argTypes:{...a,"--avatar-size":{table:{disable:!0}},"--avatar-bg-color":{table:{disable:!0}},"--avatar-corner-rounding":{table:{disable:!0}},"--avatar-ring-color":{table:{disable:!0}},"--avatar-ring-width":{table:{disable:!0}},src:{...a.src,control:{type:"text"},description:"Image source URL"},alt:{...a.alt,control:{type:"text"},description:"Alt text for the image"},fallback:{...a.fallback,control:{type:"text"},description:"Fallback text (typically initials)"},size:{...a.size,control:{type:"select"},options:f},tooltip:{...a.tooltip,control:{type:"text"},description:"Tooltip text shown on hover (via TooltipMixin)",table:{category:"Tooltip"}},"tooltip-position":{...a["tooltip-position"],control:{type:"select"},options:["top","bottom","left","right"],description:"Tooltip placement",table:{category:"Tooltip"}},customSize:{name:"--avatar-size",control:{type:"text"},description:'Custom size - overrides the size prop (e.g., "5rem")',table:{category:"css properties"}},customBgColor:{name:"--avatar-bg-color",control:{type:"color"},description:"Custom background color for fallback",table:{category:"css properties"}},customCornerRounding:{name:"--avatar-corner-rounding",control:{type:"text"},description:"Custom corner rounding for avatar shape",table:{category:"css properties"}},customRingColor:{name:"--avatar-ring-color",control:{type:"color"},description:"Optional ring border color",table:{category:"css properties"}},customRingWidth:{name:"--avatar-ring-width",control:{type:"text"},description:"Ring border width (default: 2px)",table:{category:"css properties"}}},render:t=>{const e={};return t.customSize&&(e["--avatar-size"]=t.customSize),t.customBgColor&&(e["--avatar-bg-color"]=t.customBgColor),t.customCornerRounding&&(e["--avatar-corner-rounding"]=t.customCornerRounding),t.customRingColor&&(e["--avatar-ring-color"]=t.customRingColor),t.customRingWidth&&(e["--avatar-ring-width"]=t.customRingWidth),n`<btu-avatar
-      style=${c(e)}
-      src="${t.src}"
-      alt="${t.alt}"
-      fallback="${t.fallback}"
-      size="${t.size}"
-      tooltip="${t.tooltip}"
-      tooltip-position="${t["tooltip-position"]}"
-    ></btu-avatar>`}},o={args:{}},s={render:()=>n`<div class="flex flex-row items-center gap-4">
-      <btu-avatar src=${r} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
-      <btu-avatar src=${r} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
-      <btu-avatar src=${r} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
-      <btu-avatar src=${r} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
-      <btu-avatar src=${r} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
-      <btu-avatar src=${r} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
-    </div>`,parameters:{docs:{description:{story:"Avatar supports six size variants: xs (1.5rem), sm (2.25rem), md (2.5rem), lg (3rem), xl (3.5rem), and xxl (4rem)."}}}},i={render:()=>n`<div class="flex flex-row items-center gap-4">
-      <div class="flex flex-col items-center gap-2">
-        <btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
-        <span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-avatar
-          src="https://invalid-url-that-will-fail.example.com/image.jpg"
-          alt="Failed load"
-          fallback="FL"
-          size="lg"
-          tooltip="Failed Load"
-        ></btu-avatar>
-        <span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
-      </div>
-    </div>`,parameters:{docs:{description:{story:"Avatars automatically display fallback text when no image source is provided or when an image fails to load. The failed image is removed from the DOM."}}}},l={render:()=>{const t=`data:image/svg+xml;base64,${btoa(`
-      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-        <defs>
-          <linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
-            <stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
-          </linearGradient>
-        </defs>
-        <!-- Star shape with gradient fill, transparent background -->
-        <polygon
-          points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
-          fill="url(#starGrad)"
-          stroke="rgb(251,191,36)"
-          stroke-width="2"
-        />
-      </svg>
-    `)}`;return n`<div class="flex flex-col gap-4">
-      <div class="flex items-center gap-2">
-        <strong>Transparent Image:</strong>
-        <btu-avatar src=${t} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
-      </div>
-      <div class="story-custom-colors flex items-center gap-2">
-        <strong>Custom Colors:</strong>
-        <btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
-      </div>
-      <div class="story-custom-colors flex items-center gap-2">
-        <strong>Custom Shape:</strong>
-        <btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
-      </div>
-      <div class="flex items-center gap-2">
-        <strong>With Ring:</strong>
-        <btu-avatar
-          src=${r}
-          alt="dg"
-          fallback="DG"
-          size="lg"
-          style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
-        ></btu-avatar>
-        <btu-avatar
-          fallback="DG"
-          size="lg"
-          style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
-        ></btu-avatar>
-      </div>
-    </div>`},parameters:{docs:{description:{story:`
-Avatars support advanced customization through CSS properties and content composition:
-
-**Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
-
-**Custom Color:** Override the fallback background color using the \`--avatar-bg-color\` CSS property.
-
-**Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \`--avatar-corner-rounding\` CSS property.
-
-**With Ring:** Add a colored ring border using \`--avatar-ring-color\` and \`--avatar-ring-width\` CSS properties. Useful for indicating status or highlighting specific users.`}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
-  args: {}
-}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex flex-row items-center gap-4">
-      <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
-      <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
-      <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
-      <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
-      <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
-      <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Avatar supports six size variants: xs (1.5rem), sm (2.25rem), md (2.5rem), lg (3rem), xl (3.5rem), and xxl (4rem).'
-      }
-    }
-  }
-}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex flex-row items-center gap-4">
-      <div class="flex flex-col items-center gap-2">
-        <btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
-        <span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-avatar
-          src="https://invalid-url-that-will-fail.example.com/image.jpg"
-          alt="Failed load"
-          fallback="FL"
-          size="lg"
-          tooltip="Failed Load"
-        ></btu-avatar>
-        <span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
-      </div>
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Avatars automatically display fallback text when no image source is provided or when an image fails to load. The failed image is removed from the DOM.'
-      }
-    }
-  }
-}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    // SVG star shape with transparent background - demonstrates that fallback doesn't show through
-    const transparentAvatarSvg = \`data:image/svg+xml;base64,\${btoa(\`
-      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-        <defs>
-          <linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
-            <stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
-          </linearGradient>
-        </defs>
-        <!-- Star shape with gradient fill, transparent background -->
-        <polygon
-          points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
-          fill="url(#starGrad)"
-          stroke="rgb(251,191,36)"
-          stroke-width="2"
-        />
-      </svg>
-    \`)}\`;
-    return html\`<div class="flex flex-col gap-4">
-      <div class="flex items-center gap-2">
-        <strong>Transparent Image:</strong>
-        <btu-avatar src=\${transparentAvatarSvg} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
-      </div>
-      <div class="story-custom-colors flex items-center gap-2">
-        <strong>Custom Colors:</strong>
-        <btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
-      </div>
-      <div class="story-custom-colors flex items-center gap-2">
-        <strong>Custom Shape:</strong>
-        <btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
-      </div>
-      <div class="flex items-center gap-2">
-        <strong>With Ring:</strong>
-        <btu-avatar
-          src=\${DGDATA}
-          alt="dg"
-          fallback="DG"
-          size="lg"
-          style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
-        ></btu-avatar>
-        <btu-avatar
-          fallback="DG"
-          size="lg"
-          style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
-        ></btu-avatar>
-      </div>
-    </div>\`;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: \`
-Avatars support advanced customization through CSS properties and content composition:
-
-**Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
-
-**Custom Color:** Override the fallback background color using the \\\`--avatar-bg-color\\\` CSS property.
-
-**Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \\\`--avatar-corner-rounding\\\` CSS property.
-
-**With Ring:** Add a colored ring border using \\\`--avatar-ring-color\\\` and \\\`--avatar-ring-width\\\` CSS properties. Useful for indicating status or highlighting specific users.\`
-      }
-    }
-  }
-}`,...l.parameters?.docs?.source}}};const w=["Default","Sizes","FallbackStates","AdvancedUsage"];export{l as AdvancedUsage,o as Default,i as FallbackStates,s as Sizes,w as __namedExportsOrder,u as default};