@brightspot/ui 1.4.1 → 1.6.0

package/dist/storybook/assets/{Events.stories-BAgDzdyl.js → Events.stories-BsDBxh8_.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-Bl9oHz5c.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
+import{x as d}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
 <h3>EventEmitterMixin Events</h3>
 
 <p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>

package/dist/storybook/assets/{Heading.stories-CN_fPsRf.js → Heading.stories-zGzWgHVO.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-Bl9oHz5c.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),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}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{x as s}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),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}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};

package/dist/storybook/assets/{Icon.stories-CSx_2K8V.js → Icon.stories-B4T6sSwf.js}

@@ -1,4 +1,4 @@
-import{g as d,x as r}from"./iframe-Bl9oHz5c.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
+import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
 <strong>When to use:</strong>
 <ul>
   <li>To visually reinforce actions, states, or categories</li>

package/dist/storybook/assets/{LinearProgress.stories-In48DY2g.js → LinearProgress.stories-qzqmUUwY.js}

@@ -1,4 +1,4 @@
-import{g as I,E as h,x as T}from"./iframe-Bl9oHz5c.js";import"./preload-helper-PPVm8Dsz.js";const{events:D,args:V,argTypes:g}=I("btu-linear-progress"),k={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
+import{g as I,E as h,x as T}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const{events:D,args:V,argTypes:g}=I("btu-linear-progress"),k={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To show progress of a specific task with known completion percentage</li>

package/dist/storybook/assets/Pagination.stories-B6Q-7taJ.js

@@ -0,0 +1,272 @@
+import{g as m,x as o}from"./iframe-Dz6CxatW.js";import{o as c}from"./style-map-BgW9piaW.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),u=t=>{const a={};return t.customBackgroundColor&&(a["--pagination-color-background"]=t.customBackgroundColor),t.customForegroundColor&&(a["--pagination-color-foreground"]=t.customForegroundColor),a},S={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To navigate through large sets of data</li>
+  <li>For search results, tables, and lists</li>
+  <li>In widgets and calendar views</li>
+</ul>
+
+<h3>Variants:</h3>
+<ul>
+  <li><strong>Widget</strong> (default): Page size selector + total display + navigation</li>
+  <li><strong>Search</strong>: With page jumper dropdown</li>
+  <li><strong>Widget Small</strong>: Without first/last page buttons</li>
+  <li><strong>Calendar</strong>: Custom page-size slot + jumper slot</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...h,"total-items":200,"boundary-buttons":!0,"hide-on-single-page":!0,"page-size-changer":!0},argTypes:{...y,"--pagination-color-background":{table:{disable:!0}},"--pagination-color-foreground":{table:{disable:!0}},customBackgroundColor:{name:"--pagination-color-background",control:{type:"color"},description:"Custom background color for buttons and select",table:{category:"CSS Properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"CSS Properties"}}},render:t=>o`
+    <btu-pagination
+      total-items="${t["total-items"]??200}"
+      page="${t.page??1}"
+      page-size="${t["page-size"]??0}"
+      page-size-options="${t["page-size-options"]??"10, 20, 50"}"
+      ?disabled="${t.disabled}"
+      ?loading="${t.loading}"
+      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
+      .pageSizeChanger=${t["page-size-changer"]??!0}
+      .boundaryButtons=${t["boundary-buttons"]??!0}
+      ?hide-total-count=${t["hide-total-count"]}
+      style=${c(u(t))}
+    ></btu-pagination>
+  `},i={args:{},parameters:{docs:{description:{story:"Default Widget variant with page size selector, total display, and full navigation controls."}}}},s={args:{"total-items":500,"page-size-options":"10, 25, 50, 100"},render:t=>o`
+    <btu-pagination
+      total-items="${t["total-items"]??500}"
+      page="${t.page??1}"
+      page-size="${t["page-size"]??0}"
+      page-size-options="${t["page-size-options"]??"10, 25, 50, 100"}"
+      ?disabled="${t.disabled}"
+      ?loading="${t.loading}"
+      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
+      .pageSizeChanger=${t["page-size-changer"]??!0}
+      .boundaryButtons=${t["boundary-buttons"]??!0}
+      ?hide-total-count=${t["hide-total-count"]}
+      style=${c(u(t))}
+    >
+      <select
+        slot="jumper"
+        class="btu-pagination-select"
+        aria-label="Go to page"
+        @change=${a=>{const e=a.target,n=e.closest("btu-pagination");n&&(n.page=parseInt(e.value,10))}}
+      >
+        ${Array.from({length:50},(a,e)=>o`<option value="${e+1}">Page ${e+1}</option>`)}
+      </select>
+    </btu-pagination>
+  `,parameters:{docs:{description:{story:'Search variant with a page jumper dropdown placed via `slot="jumper"`. Allows direct navigation to a specific page.'}}}},r={args:{"total-items":100,"boundary-buttons":!1},parameters:{docs:{description:{story:"Compact widget variant without first/last page buttons. Suitable for tight spaces."}}}},l={args:{"total-items":52},render:t=>o`
+    <btu-pagination
+      total-items="${t["total-items"]??52}"
+      page="${t.page??1}"
+      page-size="1"
+      ?disabled="${t.disabled}"
+      ?loading="${t.loading}"
+      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
+      .pageSizeChanger=${!1}
+      .boundaryButtons=${t["boundary-buttons"]??!0}
+      ?hide-total-count=${t["hide-total-count"]}
+      style=${c(u(t))}
+    >
+      <select slot="page-size" class="btu-pagination-select" aria-label="View type">
+        <option value="week">Week</option>
+        <option value="month">Month</option>
+      </select>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=${a=>{const e=a.target.closest("btu-pagination");e&&(e.page=1)}}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  `,parameters:{docs:{description:{story:'Calendar variant using `slot="page-size"` for a week/month selector and `slot="jumper"` for a Today button.'}}}},p={args:{"total-items":200,loading:!0},parameters:{docs:{description:{story:"Loading state shows a spinner and dims the navigation controls. The `aria-busy` attribute is set on the live region."}}}},g={args:{"total-items":200,disabled:!0,page:3},parameters:{docs:{description:{story:"Disabled state prevents all interaction. All buttons and selects receive the native `disabled` attribute."}}}},d={render:()=>{const t=a=>{const e=a.target;e.loading=!0,setTimeout(()=>{e.loading=!1},1e3)};return o`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=${a=>{const e=a.target,n=e.closest(".flex.flex-col")?.querySelector("btu-pagination");n&&(n.totalItems=parseInt(e.value,10)||0)}}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=${t}
+          @btu-pagination-page-size-change=${t}
+        ></btu-pagination>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example demonstrating dynamic `totalItems` changes at runtime. Navigation triggers a simulated 1s loading state."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default Widget variant with page size selector, total display, and full navigation controls.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 500,
+    'page-size-options': '10, 25, 50, 100'
+  },
+  render: args => html\`
+    <btu-pagination
+      total-items="\${args['total-items'] ?? 500}"
+      page="\${args.page ?? 1}"
+      page-size="\${args['page-size'] ?? 0}"
+      page-size-options="\${args['page-size-options'] ?? '10, 25, 50, 100'}"
+      ?disabled="\${args.disabled}"
+      ?loading="\${args.loading}"
+      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
+      .pageSizeChanger=\${args['page-size-changer'] ?? true}
+      .boundaryButtons=\${args['boundary-buttons'] ?? true}
+      ?hide-total-count=\${args['hide-total-count']}
+      style=\${styleMap(paginationStyles(args))}
+    >
+      <select
+        slot="jumper"
+        class="btu-pagination-select"
+        aria-label="Go to page"
+        @change=\${(e: Event) => {
+    const select = e.target as HTMLSelectElement;
+    const pagination = select.closest('btu-pagination');
+    if (pagination) {
+      pagination.page = parseInt(select.value, 10);
+    }
+  }}
+      >
+        \${Array.from({
+    length: 50
+  }, (_, i) => html\`<option value="\${i + 1}">Page \${i + 1}</option>\`)}
+      </select>
+    </btu-pagination>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Search variant with a page jumper dropdown placed via \`slot="jumper"\`. Allows direct navigation to a specific page.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 100,
+    'boundary-buttons': false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact widget variant without first/last page buttons. Suitable for tight spaces.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 52
+  },
+  render: args => html\`
+    <btu-pagination
+      total-items="\${args['total-items'] ?? 52}"
+      page="\${args.page ?? 1}"
+      page-size="1"
+      ?disabled="\${args.disabled}"
+      ?loading="\${args.loading}"
+      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
+      .pageSizeChanger=\${false}
+      .boundaryButtons=\${args['boundary-buttons'] ?? true}
+      ?hide-total-count=\${args['hide-total-count']}
+      style=\${styleMap(paginationStyles(args))}
+    >
+      <select slot="page-size" class="btu-pagination-select" aria-label="View type">
+        <option value="week">Week</option>
+        <option value="month">Month</option>
+      </select>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=\${(e: Event) => {
+    const pagination = (e.target as HTMLElement).closest('btu-pagination');
+    if (pagination) pagination.page = 1;
+  }}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Calendar variant using \`slot="page-size"\` for a week/month selector and \`slot="jumper"\` for a Today button.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    loading: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading state shows a spinner and dims the navigation controls. The \`aria-busy\` attribute is set on the live region.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    disabled: true,
+    page: 3
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state prevents all interaction. All buttons and selects receive the native \`disabled\` attribute.'
+      }
+    }
+  }
+}`,...g.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const simulateLoading = (e: CustomEvent) => {
+      const pagination = e.target as HTMLElement & {
+        loading: boolean;
+      };
+      pagination.loading = true;
+      setTimeout(() => {
+        pagination.loading = false;
+      }, 1000);
+    };
+    return html\`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=\${(e: Event) => {
+      const input = e.target as HTMLInputElement;
+      const pagination = (input.closest('.flex.flex-col') as HTMLElement)?.querySelector('btu-pagination') as HTMLElement & {
+        totalItems: number;
+      };
+      if (pagination) pagination.totalItems = parseInt(input.value, 10) || 0;
+    }}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=\${simulateLoading}
+          @btu-pagination-page-size-change=\${simulateLoading}
+        ></btu-pagination>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive example demonstrating dynamic \`totalItems\` changes at runtime. Navigation triggers a simulated 1s loading state.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const z=["Default","Search","WidgetSmall","Calendar","Loading","Disabled","DynamicTotal"];export{l as Calendar,i as Default,g as Disabled,d as DynamicTotal,p as Loading,s as Search,r as WidgetSmall,z as __namedExportsOrder,S as default};