@brightspot/ui 0.0.0-alpha.3 → 1.0.0-alpha.1

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1747661276029,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/web-components-webpack5","options":{"builder":{"useSWC":true}}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.12","storybookVersionSpecifier":"^8.6.12","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.6.12"},"@storybook/test":{"version":"8.6.12"},"@storybook/web-components":{"version":"8.6.12"},"@storybook/web-components-webpack5":{"version":"8.6.12"},"eslint-plugin-storybook":{"version":"0.12.0"},"storybook":{"version":"8.6.12"}},"addons":{"@storybook/addon-webpack5-compiler-swc":{"version":"3.0.0"},"@storybook/addon-essentials":{"version":"8.6.12"},"@storybook/addon-styling-webpack":{"version":"1.0.1"}}}
+{"generatedAt":1749563080275,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/web-components-webpack5","options":{"builder":{"useSWC":true}}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.12","storybookVersionSpecifier":"^8.6.12","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.6.12"},"@storybook/test":{"version":"8.6.12"},"@storybook/web-components":{"version":"8.6.12"},"@storybook/web-components-webpack5":{"version":"8.6.12"},"eslint-plugin-storybook":{"version":"0.12.0"},"storybook":{"version":"8.6.12"}},"addons":{"@storybook/addon-webpack5-compiler-swc":{"version":"3.0.0"},"@storybook/addon-essentials":{"version":"8.6.12"},"@storybook/addon-styling-webpack":{"version":"1.0.1"}}}

package/dist/storybook/runtime~main.4a7b6ddf.iframe.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({123:"stories-Heading-stories",264:"stories-ScrollShadow-stories",471:"stories-Colors-stories",544:"stories-Badge-stories",791:"stories-Button-stories",894:"stories-Loader-stories"}[chunkId]||chunkId)+"."+{123:"b41961f8",264:"252ec9e7",364:"84b2a293",471:"324d20d0",544:"52b61cf3",648:"0f0c2ea1",689:"b6901a43",791:"5286bed3",894:"cd5e8fb5",936:"7e4d4897",980:"2bfde12a"}[chunkId]+".iframe.bundle.js"),__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@brightspot/ui:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@brightspot/ui:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.p="",(()=>{__webpack_require__.b=document.baseURI||self.location.href;var installedChunks={354:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(354!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/dist/storybook/stories-Badge-stories.52b61cf3.iframe.bundle.js

@@ -0,0 +1,8 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[544],{"./src/stories/Badge.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Badge_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Badge_stories={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"btu-badge"},controls:{expanded:!0}},render:args=>(({color="gray",affordance,size="sm",label})=>{let dot=!1,icon=!1;return"dot"===affordance?dot=!0:"icon"===affordance&&(icon=!0),lit.qy`
+    <div
+      class=${["btu-badge",`btu-badge-${size}`,`btu-badge-${color}`,dot?"before:size-2 before:rounded-lg before:bg-[currentColor]":"",icon?"before:btu-icon before:btu-icon-xs before:btu-icon-salad":""].join(" ")}
+    >
+      ${label}
+    </div>
+  `})(args),argTypes:{color:{control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"]},affordance:{control:{type:"select"},options:["dot","icon"],description:"Display a design affordance next to the label"},size:{control:{type:"select"},options:["sm","md","lg"]}},args:{color:"purple",affordance:"dot",size:"sm",label:"Badge"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Badge-stories.52b61cf3.iframe.bundle.js.map

package/dist/storybook/stories-Badge-stories.52b61cf3.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Badge-stories.52b61cf3.iframe.bundle.js","mappings":";;AA0BA;;AAQA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Badge.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { ThemeColors } from '../tailwind-plugin-theme'\n\nexport interface BadgeProps {\n  color?: ThemeColors\n  affordance?: 'dot' | 'icon'\n  size?: 'sm' | 'md' | 'lg'\n  label: string\n}\n\nexport const Badge = ({\n  color = 'gray',\n  affordance,\n  size = 'sm',\n  label,\n}: BadgeProps) => {\n  let dot = false\n  let icon = false\n  if (affordance === 'dot') {\n    dot = true\n  } else if (affordance === 'icon') {\n    icon = true\n  }\n\n  return html`\n    <div\n      class=${[\n        'btu-badge',\n        `btu-badge-${size}`,\n        `btu-badge-${color}`,\n        dot ? 'before:size-2 before:rounded-lg before:bg-[currentColor]' : '',\n        icon ? 'before:btu-icon before:btu-icon-xs before:btu-icon-salad' : '',\n      ].join(' ')}\n    >\n      ${label}\n    </div>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Button-stories.5286bed3.iframe.bundle.js

@@ -0,0 +1,9 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[791],{"./src/stories/Button.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Button_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Button_stories={title:"Components/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button"},controls:{expanded:!0}},render:args=>(({color="primary",pressed,fill,contained,outlined,size="sm",label})=>{const depressed=pressed?"btu-button-pressed":"",filled=fill?"btu-button-fill":"btu-button-fill-none",container=contained?"":"btu-button-container-none",outline=outlined?"btu-button-outline":"";return lit.qy`
+    <button
+      type="button"
+      class=${["btu-button",`btu-button-${color}`,`btu-button-${size}`,filled,container,outline,depressed].join(" ")}
+    >
+      ${label}
+    </button>
+  `})(args),argTypes:{size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]},color:{control:{type:"select"},options:["primary","gray","error"]},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},contained:{control:{type:"boolean"},description:"Does the button have a container?"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"}},args:{color:"primary",label:"Button",pressed:!1,fill:!0,contained:!0,outlined:!1,size:"md"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Button-stories.5286bed3.iframe.bundle.js.map

package/dist/storybook/stories-Button-stories.5286bed3.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Button-stories.5286bed3.iframe.bundle.js","mappings":";;;AAkCA;;AAUA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Button.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport interface ButtonProps {\n  color?: 'primary' | 'gray' | 'error'\n  /** Is the button depressed or not? */\n  pressed?: boolean\n  /** Should the button have a background? */\n  fill?: boolean\n  /** Should the button have a container? */\n  contained?: boolean\n  /** Should the button be outlined? */\n  outlined?: boolean\n  /** How large should the button be? */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  label: string\n}\n\nexport const Button = ({\n  color = 'primary',\n  pressed,\n  fill,\n  contained,\n  outlined,\n  size = 'sm',\n  label,\n}: ButtonProps) => {\n  const depressed = pressed ? 'btu-button-pressed' : ''\n  const filled = fill ? 'btu-button-fill' : 'btu-button-fill-none'\n  const container = contained ? '' : 'btu-button-container-none'\n  const outline = outlined ? 'btu-button-outline' : ''\n\n  return html`\n    <button\n      type=\"button\"\n      class=${[\n        'btu-button',\n        `btu-button-${color}`,\n        `btu-button-${size}`,\n        filled,\n        container,\n        outline,\n        depressed,\n      ].join(' ')}\n    >\n      ${label}\n    </button>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Heading-stories.b41961f8.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[123],{"./src/stories/Heading.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Heading_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Heading_stories={title:"Components/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"btu-heading"},controls:{expanded:!0}},render:args=>(({size})=>lit.qy` <div class=${[`btu-heading-${size}`].join(" ")}>Heading</div> `)(args),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);

package/dist/storybook/stories-Loader-stories.cd5e8fb5.iframe.bundle.js

@@ -0,0 +1,6 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[894],{"./src/stories/Loader.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Loader_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Loader_stories={title:"Components/Loader",component:"btu-loader",tags:["autodocs"],parameters:{docs:{subtitle:'To avoid changing the markup, btu-loaders work by assigning the "--tw-content" property of a pseudo element the SVG data as a URI for it\'s background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)'},controls:{expanded:!0}},render:args=>lit.qy`
+    <div
+      class=${["before:btu-loader","before:size-[--Loader-size]"].join(" ")}
+    ></div>
+  `,argTypes:{},args:{}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Loader-stories.cd5e8fb5.iframe.bundle.js.map

package/dist/storybook/stories-Loader-stories.cd5e8fb5.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Loader-stories.cd5e8fb5.iframe.bundle.js","mappings":";;AAKA;;ACSA","sources":["webpack://@brightspot/ui/./src/stories/Loader.ts","webpack://@brightspot/ui/./src/stories/Loader.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport const Loader = () => {\n  return html`\n    <div\n      class=${[`before:btu-loader`, 'before:size-[--Loader-size]'].join(' ')}\n    ></div>\n  `\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Loader } from './Loader'\n\nconst meta: Meta = {\n  title: 'Components/Loader',\n  component: 'btu-loader',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      subtitle: `To avoid changing the markup, btu-loaders work by assigning the \"--tw-content\" property of a pseudo element the SVG data as a URI for it's background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)`,\n    },\n    controls: { expanded: true },\n  },\n  render: (args) => Loader(),\n  argTypes: {},\n  args: {},\n}\nexport default meta\n\ntype Story = StoryObj\nexport const Default: Story = {\n  args: {},\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js

@@ -0,0 +1,16 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[264],{"./src/stories/ScrollShadow.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ScrollShadow_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const ScrollShadow_stories={title:"Components/ScrollShadow",component:"btu-scrollshadow",tags:["autodocs"],parameters:{docs:{subtitle:"This plugin adds shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling."},controls:{expanded:!0}},render:args=>(({theme="btu-scrollshadow-25"})=>{const items=new Array(100).fill(0).map(((_,i)=>`Item ${i+1}`));return lit.qy`
+    <style>
+      :root {
+        --can-scroll:   ;
+      }
+    </style>
+    <div class=${["flex","gap-2","bg-gray-500",theme].join(" ")}>
+      ${items.map(((i,idx)=>lit.qy`<div
+            class="text-md flex aspect-square h-[100px] items-center justify-center"
+            style="background:oklch(80% 50% ${Math.floor(710*Math.random())+10});"
+          >
+            ${i}
+          </div>`))}
+    </div>
+  `})(args),argTypes:{theme:{control:{type:"select"},description:"Choose a shade of gray for the scroll shadow. 25 is almost white, and 900 is almost black.",options:["btu-scrollshadow-25","btu-scrollshadow-50","btu-scrollshadow-100","btu-scrollshadow-200","btu-scrollshadow-300","btu-scrollshadow-400","btu-scrollshadow-500","btu-scrollshadow-600","btu-scrollshadow-700","btu-scrollshadow-800","btu-scrollshadow-900"]}},args:{}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js.map

package/dist/storybook/stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js","mappings":";;;;;;AA4BA;AACA;;AAIA;;AAIA;;;AAIA","sources":["webpack://@brightspot/ui/./src/stories/ScrollShadow.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport interface ScrollShadowProps {\n  theme?:\n    | 'btu-scrollshadow-25'\n    | 'btu-scrollshadow-50'\n    | 'btu-scrollshadow-100'\n    | 'btu-scrollshadow-200'\n    | 'btu-scrollshadow-300'\n    | 'btu-scrollshadow-400'\n    | 'btu-scrollshadow-500'\n    | 'btu-scrollshadow-600'\n    | 'btu-scrollshadow-700'\n    | 'btu-scrollshadow-800'\n    | 'btu-scrollshadow-900'\n}\n\nexport const ScrollShadow = ({\n  theme = 'btu-scrollshadow-25',\n}: ScrollShadowProps) => {\n  const items = new Array(100).fill(0).map((_, i) => `Item ${i + 1}`)\n\n  return html`\n    <style>\n      :root {\n        --can-scroll:   ;\n      }\n    </style>\n    <div class=${['flex', 'gap-2', 'bg-gray-500', theme].join(' ')}>\n      ${items.map(\n        (i, idx) =>\n          html`<div\n            class=\"text-md flex aspect-square h-[100px] items-center justify-center\"\n            style=\"background:oklch(80% 50% ${Math.floor(\n              Math.random() * (720 - 10),\n            ) + 10});\"\n          >\n            ${i}\n          </div>`,\n      )}\n    </div>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/tailwind-plugin-badge.js

@@ -30,12 +30,15 @@ module.exports = plugin(function ({ addComponents, theme, e }) {
             if (fontSize) {
                 badgeSizes.push({
                     [`${className}-${e(key)}`]: {
+                        alignItems: 'center',
                         gap: '0.38rem',
                         ...fontSizeStyles,
                         fontSize: fontSize[0],
                         lineHeight: fontSize[1],
                         padding: `${size.paddingTop} ${size.paddingRight}`,
                         minWidth: size.minWidth,
+                        maxWidth: 'max-content',
+                        display: 'flex',
                     },
                 });
             }

package/dist/tailwind-plugin-badge.ts

@@ -63,12 +63,15 @@ module.exports = plugin(
         if (fontSize) {
           badgeSizes.push({
             [`${className}-${e(key)}`]: {
+              alignItems: 'center',
               gap: '0.38rem',
               ...fontSizeStyles,
               fontSize: fontSize[0],
               lineHeight: fontSize[1],
               padding: `${size.paddingTop} ${size.paddingRight}`,
               minWidth: size.minWidth,
+              maxWidth: 'max-content',
+              display: 'flex',
             },
           })
         }

package/dist/tailwind-plugin-scroll-shadow.js

@@ -1,8 +1,8 @@
 import plugin from 'tailwindcss/plugin';
 /**
  * This plugin adds shadows to the edges of a scrollable container when the content
- * of the container is overflowing.
- * You can choose a light or dark shadow.
+ * of the container overflows.
+ * The shadows use our gray color palette. You can choose which shade of gray you want.
  * Your container must not already use before & after pseudo elements.
  * If you use TWCSS before/after modifiers on this element, make sure you also manually
  * set the content property to the `--whitespace` variable. This is a workaround for TWCSS
@@ -10,21 +10,22 @@ import plugin from 'tailwindcss/plugin';
  * overrides the `--whitespace` variable by default.
  *
  * Class Names:
- *  btu-scrollshadow-light - light shadow.
- *  btu-scrollshadow-dark - dark shadow.
+ *  btu-scrollshadow-25 - almost white.
+ *  btu-scrollshadow-900 - almost black.
  *
  * Typical Usage:
- *  @apply btu-scrollshadow-light;
+ *  @apply btu-scrollshadow-25;
  *
  * Custom usage for when you need to style before/after pseudo-elements:
- *  @apply btu-scrollshadow-light before:absolute before:content-[--whitespace] <-- must do this (see more info above);
+ *  @apply btu-scrollshadow-25 before:absolute before:content-[--whitespace] <-- must do this (see more info above);
  */
-module.exports = plugin(function ({ addComponents }) {
+module.exports = plugin(function ({ addComponents, addBase }) {
     const shared = {
         /* these 3 whitespaces dictate the width of the shadow (necessary to give the pseudo elements an intrinsic size). */
         '--whitespace': '"\u2002\u2002\u2002"',
         animation: 'detect-scroll',
         'overflow-x': 'auto',
+        'overscroll-behavior-x': 'contain',
         'animation-fill-mode': 'none',
         'animation-timeline': '--scroll-timeline',
         'scroll-timeline': '--scroll-timeline x',
@@ -44,34 +45,37 @@ module.exports = plugin(function ({ addComponents }) {
             'z-index': '10',
         },
     };
-    const light = Object.assign({}, shared, {
-        '&:before': {
-            left: '0px',
-            'background-image': 'linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-            'animation-range': '0ch 3ch',
+    addBase({
+        '@keyframes fade-in': {
+            '0%': { opacity: '0' },
+            '100%': { opacity: '1' },
         },
-        '&:after': {
-            right: '0px',
-            'background-image': 'linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-            'animation-direction': 'reverse',
-            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+        /* Space-toggle used to track when a scrollable element has reached the end of its scroll in either direction. */
+        '@keyframes detect-scroll': {
+            from: {
+                '--can-scroll': '   ',
+            },
+            to: {
+                '--can-scroll': '   ',
+            },
         },
     });
-    const dark = Object.assign({}, shared, {
-        '&:before': {
-            left: '0px',
-            'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-            'animation-range': '0ch 3ch',
-        },
-        '&:after': {
-            right: '0px',
-            'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-            'animation-direction': 'reverse',
-            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
-        },
-    });
-    addComponents({
-        '.btu-scrollshadow-light': light,
-        '.btu-scrollshadow-dark': dark,
+    const stops = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].forEach((n) => {
+        const key = `.btu-scrollshadow-${n}`;
+        addComponents({
+            [key]: Object.assign({}, shared, {
+                '&:before': {
+                    left: '0px',
+                    'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+                    'animation-range': '0ch 3ch',
+                },
+                '&:after': {
+                    right: '0px',
+                    'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+                    'animation-direction': 'reverse',
+                    'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+                },
+            }),
+        });
     });
 });

package/dist/tailwind-plugin-scroll-shadow.ts

@@ -3,8 +3,8 @@ declare let module: any
 
 /**
  * This plugin adds shadows to the edges of a scrollable container when the content
- * of the container is overflowing.
- * You can choose a light or dark shadow.
+ * of the container overflows.
+ * The shadows use our gray color palette. You can choose which shade of gray you want.
  * Your container must not already use before & after pseudo elements.
  * If you use TWCSS before/after modifiers on this element, make sure you also manually
  * set the content property to the `--whitespace` variable. This is a workaround for TWCSS
@@ -12,22 +12,23 @@ declare let module: any
  * overrides the `--whitespace` variable by default.
  *
  * Class Names:
- *  btu-scrollshadow-light - light shadow.
- *  btu-scrollshadow-dark - dark shadow.
+ *  btu-scrollshadow-25 - almost white.
+ *  btu-scrollshadow-900 - almost black.
  *
  * Typical Usage:
- *  @apply btu-scrollshadow-light;
+ *  @apply btu-scrollshadow-25;
  *
  * Custom usage for when you need to style before/after pseudo-elements:
- *  @apply btu-scrollshadow-light before:absolute before:content-[--whitespace] <-- must do this (see more info above);
+ *  @apply btu-scrollshadow-25 before:absolute before:content-[--whitespace] <-- must do this (see more info above);
  */
 
-module.exports = plugin(function ({ addComponents }) {
+module.exports = plugin(function ({ addComponents, addBase }) {
   const shared = {
     /* these 3 whitespaces dictate the width of the shadow (necessary to give the pseudo elements an intrinsic size). */
     '--whitespace': '"\u2002\u2002\u2002"',
     animation: 'detect-scroll',
     'overflow-x': 'auto',
+    'overscroll-behavior-x': 'contain',
     'animation-fill-mode': 'none',
     'animation-timeline': '--scroll-timeline',
     'scroll-timeline': '--scroll-timeline x',
@@ -49,38 +50,40 @@ module.exports = plugin(function ({ addComponents }) {
     },
   }
 
-  const light = Object.assign({}, shared, {
-    '&:before': {
-      left: '0px',
-      'background-image':
-        'linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-      'animation-range': '0ch 3ch',
+  addBase({
+    '@keyframes fade-in': {
+      '0%': { opacity: '0' },
+      '100%': { opacity: '1' },
     },
-    '&:after': {
-      right: '0px',
-      'background-image':
-        'linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-      'animation-direction': 'reverse',
-      'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+    /* Space-toggle used to track when a scrollable element has reached the end of its scroll in either direction. */
+    '@keyframes detect-scroll': {
+      from: {
+        '--can-scroll': '   ',
+      },
+      to: {
+        '--can-scroll': '   ',
+      },
     },
   })
 
-  const dark = Object.assign({}, shared, {
-    '&:before': {
-      left: '0px',
-      'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-      'animation-range': '0ch 3ch',
+  const stops = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].forEach(
+    (n) => {
+      const key = `.btu-scrollshadow-${n}`
+      addComponents({
+        [key]: Object.assign({}, shared, {
+          '&:before': {
+            left: '0px',
+            'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+            'animation-range': '0ch 3ch',
+          },
+          '&:after': {
+            right: '0px',
+            'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+            'animation-direction': 'reverse',
+            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+          },
+        }),
+      })
     },
-    '&:after': {
-      right: '0px',
-      'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-      'animation-direction': 'reverse',
-      'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
-    },
-  })
-
-  addComponents({
-    '.btu-scrollshadow-light': light,
-    '.btu-scrollshadow-dark': dark,
-  })
+  )
 })

package/dist/tailwind-plugin-theme.ts

@@ -1,6 +1,18 @@
 import plugin from 'tailwindcss/plugin'
 declare let module: any
 
+export type ThemeColors =
+  | 'black'
+  | 'white'
+  | 'primary'
+  | 'teal'
+  | 'gray'
+  | 'purple'
+  | 'rose'
+  | 'error'
+  | 'warning'
+  | 'success'
+
 /**
  * Generates all the CSS color properties from the Tailwind configuration.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "0.0.0-alpha.3",
+  "version": "1.0.0-alpha.1",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
   "main": "./dist/tailwind.config.ts",