@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/EmptyState.stories-Ck5T6q1T.js

@@ -0,0 +1,318 @@
+import{g as u,x as e}from"./iframe-D5Uwm8Zd.js";import{o as m}from"./if-defined-C1_PRAyA.js";import{o as h}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To communicate the absence of content in tables, lists, or search results</li>
+  <li>For error states, empty dashboards, or first-run experiences</li>
+  <li>When you need a composable layout with optional graphic, heading, description, and actions</li>
+</ul>
+
+<h3>When not to use:</h3>
+<ul>
+  <li>For loading states (use a loader or skeleton instead)</li>
+  <li>For inline validation messages (use form validation)</li>
+</ul>
+
+<h3>Composition:</h3>
+<ul>
+  <li><strong>Graphic</strong> — <code>slot="graphic"</code>: accepts <code>btu-icon</code>, <code>img</code>, <code>picture</code>, or <code>svg</code></li>
+  <li><strong>Heading</strong> — via the <code>heading</code> attribute</li>
+  <li><strong>Description</strong> — via the <code>description</code> attribute</li>
+  <li><strong>Actions</strong> — <code>slot="actions"</code>: accepts buttons or links</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...g,heading:"No results found",description:"Try adjusting your search or filter criteria to find what you are looking for.",size:"md"},argTypes:{...s,"--empty-state-max-width":{table:{disable:!0}},"--empty-state-color-heading":{table:{disable:!0}},"--empty-state-color-description":{table:{disable:!0}},heading:{...s.heading,control:{type:"text"},description:"Heading text displayed in the empty state."},description:{...s.description,control:{type:"text"},description:"Description text displayed below the heading."},size:{...s.size,control:{type:"select"},options:y,description:"Size variant affecting heading size, gaps, and description text."},"heading-level":{...s["heading-level"],control:{type:"select"},options:v,description:"Heading level (1-6). When set, overrides the size-based default (sm→5, md→4, lg→3) and drives both the semantic h1-h6 tag and the visual heading size."},maxWidth:{name:"--empty-state-max-width",control:{type:"text"},description:"Maximum width of the content block (default: min(75cqw, 360px))",table:{category:"css properties"}},colorHeading:{name:"--empty-state-color-heading",control:{type:"color"},description:"Heading text color (default: gray-900)",table:{category:"css properties"}},colorDescription:{name:"--empty-state-color-description",control:{type:"color"},description:"Description text color (default: gray-500)",table:{category:"css properties"}}},render:t=>{const o={};return t.maxWidth&&(o["--empty-state-max-width"]=t.maxWidth),t.colorHeading&&(o["--empty-state-color-heading"]=t.colorHeading),t.colorDescription&&(o["--empty-state-color-description"]=t.colorDescription),e`
+      <btu-empty-state
+        heading="${t.heading}"
+        description="${t.description||""}"
+        size="${t.size}"
+        heading-level="${m(t["heading-level"])}"
+        style=${h(o)}
+      >
+        <btu-icon
+          slot="graphic"
+          symbol="search"
+          emphasize="pulse"
+          style="color: oklch(var(--btu-theme-primary-600))"
+        ></btu-icon>
+        <button slot="actions" class="btu-button-gray btu-button">Clear search</button>
+        <button slot="actions" class="btu-button-primary btu-button">
+          <btu-icon symbol="plus"></btu-icon>Create new
+        </button>
+      </btu-empty-state>
+    `}},i={args:{"heading-level":void 0}},a={args:{size:"sm",heading:"No items",description:"There are no items to display."},render:t=>e`
+    <btu-empty-state heading="${t.heading}" description="${t.description||""}" size="${t.size}">
+      <btu-icon
+        slot="graphic"
+        symbol="inbox"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-gray-500))"
+      ></btu-icon>
+      <btu-icon-button tooltip="click to reload" symbol="refresh-ccw" slot="actions" size="sm"></btu-icon-button>
+    </btu-empty-state>
+  `,parameters:{docs:{description:{story:"Small variant with compact spacing. Best for panels, sidebars, and constrained spaces where a full-size empty state would be excessive."}}}},n={args:{size:"lg",heading:"Welcome to your dashboard",description:"Get started by creating your first piece of content. You can always come back here to manage it."},render:t=>e`
+    <btu-empty-state heading="${t.heading}" description="${t.description||""}" size="${t.size}">
+      <btu-icon
+        slot="graphic"
+        symbol="layout-dashboard"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-primary-600))"
+      ></btu-icon>
+      <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+    </btu-empty-state>
+  `,parameters:{docs:{description:{story:"Large variant for full-page empty states. Ideal for dashboards, landing pages, and first-run experiences where the empty state is the primary content."}}}},r={render:()=>e`
+    <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
+      <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
+      <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+    </btu-empty-state>
+  `,parameters:{docs:{description:{story:"Uses a custom SVG in the graphic slot instead of a `btu-icon`. The graphic container automatically sizes `img`, `picture`, and `svg` elements larger than icons."}}}},c={render:()=>{const t=e`
+      <picture slot="graphic">
+        <img
+          srcset="
+            box-illustration.svg   120w,
+            cloud-illustration.svg 140w,
+            docs-illustration.svg  170w,
+            box-illustration.svg   240w,
+            cloud-illustration.svg 280w,
+            docs-illustration.svg  340w
+          "
+          sizes="auto"
+          src="box-illustration.svg"
+          alt="Responsive graphic"
+          loading="lazy"
+        />
+      </picture>
+    `;return e`
+      <div style="display: flex; align-items: flex-start; gap: 1rem;">
+        <div style="width: 240px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
+          <btu-empty-state heading="No results" description="Try a different query." size="sm">
+            ${t}
+            <button slot="actions" class="btu-button-gray btu-button-sm btu-button">Clear</button>
+          </btu-empty-state>
+        </div>
+        <div style="width: 360px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
+          <btu-empty-state
+            heading="No images uploaded"
+            description="Upload images to see them displayed here."
+            size="md"
+          >
+            ${t}
+            <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+          </btu-empty-state>
+        </div>
+        <div style="width: 520px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
+          <btu-empty-state
+            heading="Welcome to Brightspot"
+            description="Get started by creating your first piece of content."
+            size="lg"
+          >
+            ${t}
+            <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+          </btu-empty-state>
+        </div>
+      </div>
+    `},parameters:{docs:{description:{story:'Three empty-states rendered side-by-side in progressively wider containers (240 / 360 / 520px) at sizes `sm` / `md` / `lg`. Every instance uses the **same** `<picture>` markup — one `srcset` listing three SVGs (`box-illustration`, `cloud-illustration`, `docs-illustration`), each at `1x` and `2x` width descriptors, plus `sizes="auto"`. Because the graphic container sizes the `<img>` from the empty-state `size` prop (118 / 128 / 160 px), the browser selects a different SVG for each instance at both `devicePixelRatio: 1` and `2` — so all three SVGs are visible in the story regardless of display density. This demonstrates how a single `<picture>` + `srcset` can serve different sources per-instance without swapping markup.'}}}},l={render:()=>e`
+    <btu-empty-state
+      heading="No data available"
+      description="Check back later for updates."
+      size="sm"
+    ></btu-empty-state>
+  `,parameters:{docs:{description:{story:"Text-only empty state with no graphic or actions. The graphic and actions containers collapse automatically via `:empty { display: none }`. Useful in tight spaces."}}}},d={render:()=>e`
+    <btu-empty-state heading="No notifications" description="You are all caught up." size="md">
+      <btu-icon
+        slot="graphic"
+        symbol="bell-off"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-gray-500))"
+      ></btu-icon>
+    </btu-empty-state>
+  `,parameters:{docs:{description:{story:"Empty state without action buttons. The actions container collapses when empty. Useful for informational states where no user action is needed."}}}},p={render:()=>e`
+    <btu-empty-state heading="Empty" size="sm">
+      <btu-icon
+        slot="graphic"
+        symbol="inbox"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-gray-500))"
+      ></btu-icon>
+      <button slot="actions" class="btu-button-success btu-button-sm btu-button">Add item</button>
+    </btu-empty-state>
+  `,parameters:{docs:{description:{story:"Empty state with heading and actions but no description. The description is omitted by not setting the `description` attribute."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    'heading-level': undefined
+  }
+}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 'sm',
+    heading: 'No items',
+    description: 'There are no items to display.'
+  },
+  render: args => html\`
+    <btu-empty-state heading="\${args.heading}" description="\${args.description || ''}" size="\${args.size}">
+      <btu-icon
+        slot="graphic"
+        symbol="inbox"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-gray-500))"
+      ></btu-icon>
+      <btu-icon-button tooltip="click to reload" symbol="refresh-ccw" slot="actions" size="sm"></btu-icon-button>
+    </btu-empty-state>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small variant with compact spacing. Best for panels, sidebars, and constrained spaces where a full-size empty state would be excessive.'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 'lg',
+    heading: 'Welcome to your dashboard',
+    description: 'Get started by creating your first piece of content. You can always come back here to manage it.'
+  },
+  render: args => html\`
+    <btu-empty-state heading="\${args.heading}" description="\${args.description || ''}" size="\${args.size}">
+      <btu-icon
+        slot="graphic"
+        symbol="layout-dashboard"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-primary-600))"
+      ></btu-icon>
+      <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+    </btu-empty-state>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large variant for full-page empty states. Ideal for dashboards, landing pages, and first-run experiences where the empty state is the primary content.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
+      <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
+      <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+    </btu-empty-state>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Uses a custom SVG in the graphic slot instead of a \`btu-icon\`. The graphic container automatically sizes \`img\`, \`picture\`, and \`svg\` elements larger than icons.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    // Identical <picture> markup in each instance: one srcset listing 3 SVGs, each
+    // at two width descriptors (1x and 2x) so the selection holds at both DPR=1 and
+    // DPR=2. \`sizes="auto"\` makes the browser pick based on the <img>'s actual
+    // rendered width — driven by the empty-state \`size\` prop
+    // (sm=118 / md=128 / lg=160 px × devicePixelRatio).
+    const responsiveGraphic = html\`
+      <picture slot="graphic">
+        <img
+          srcset="
+            box-illustration.svg   120w,
+            cloud-illustration.svg 140w,
+            docs-illustration.svg  170w,
+            box-illustration.svg   240w,
+            cloud-illustration.svg 280w,
+            docs-illustration.svg  340w
+          "
+          sizes="auto"
+          src="box-illustration.svg"
+          alt="Responsive graphic"
+          loading="lazy"
+        />
+      </picture>
+    \`;
+    return html\`
+      <div style="display: flex; align-items: flex-start; gap: 1rem;">
+        <div style="width: 240px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
+          <btu-empty-state heading="No results" description="Try a different query." size="sm">
+            \${responsiveGraphic}
+            <button slot="actions" class="btu-button-gray btu-button-sm btu-button">Clear</button>
+          </btu-empty-state>
+        </div>
+        <div style="width: 360px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
+          <btu-empty-state
+            heading="No images uploaded"
+            description="Upload images to see them displayed here."
+            size="md"
+          >
+            \${responsiveGraphic}
+            <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+          </btu-empty-state>
+        </div>
+        <div style="width: 520px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
+          <btu-empty-state
+            heading="Welcome to Brightspot"
+            description="Get started by creating your first piece of content."
+            size="lg"
+          >
+            \${responsiveGraphic}
+            <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+          </btu-empty-state>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Three empty-states rendered side-by-side in progressively wider containers (240 / 360 / 520px) at sizes \`sm\` / \`md\` / \`lg\`. Every instance uses the **same** \`<picture>\` markup — one \`srcset\` listing three SVGs (\`box-illustration\`, \`cloud-illustration\`, \`docs-illustration\`), each at \`1x\` and \`2x\` width descriptors, plus \`sizes="auto"\`. Because the graphic container sizes the \`<img>\` from the empty-state \`size\` prop (118 / 128 / 160 px), the browser selects a different SVG for each instance at both \`devicePixelRatio: 1\` and \`2\` — so all three SVGs are visible in the story regardless of display density. This demonstrates how a single \`<picture>\` + \`srcset\` can serve different sources per-instance without swapping markup.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-empty-state
+      heading="No data available"
+      description="Check back later for updates."
+      size="sm"
+    ></btu-empty-state>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Text-only empty state with no graphic or actions. The graphic and actions containers collapse automatically via \`:empty { display: none }\`. Useful in tight spaces.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-empty-state heading="No notifications" description="You are all caught up." size="md">
+      <btu-icon
+        slot="graphic"
+        symbol="bell-off"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-gray-500))"
+      ></btu-icon>
+    </btu-empty-state>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Empty state without action buttons. The actions container collapses when empty. Useful for informational states where no user action is needed.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-empty-state heading="Empty" size="sm">
+      <btu-icon
+        slot="graphic"
+        symbol="inbox"
+        emphasize="pulse"
+        style="color: oklch(var(--btu-theme-gray-500))"
+      ></btu-icon>
+      <button slot="actions" class="btu-button-success btu-button-sm btu-button">Add item</button>
+    </btu-empty-state>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Empty state with heading and actions but no description. The description is omitted by not setting the \`description\` attribute.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};const S=["Default","Small","Large","WithImage","WithPicture","TextOnly","NoActions","NoDescription"];export{i as Default,n as Large,d as NoActions,p as NoDescription,a as Small,l as TextOnly,r as WithImage,c as WithPicture,S as __namedExportsOrder,k as default};

package/dist/storybook/assets/{Events.stories-B1ddcgpT.js → Events.stories-Cx10pvVB.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-DloIUNZz.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-D5Uwm8Zd.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-DI4w61cf.js → Heading.stories-mbkSoA5r.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-DloIUNZz.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-D5Uwm8Zd.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/{HueRipple.stories-DjhoxxEw.js → HueRipple.stories-B-DDviMh.js}

@@ -1,4 +1,4 @@
-import{x as i}from"./iframe-DloIUNZz.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-CFLAI1H9.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
+import{x as i}from"./iframe-D5Uwm8Zd.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-CQ2CjiFm.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
 Uses the **View Transition API** to create an expanding ring that reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.
 
 ### Usage
@@ -28,7 +28,7 @@ btuRipple.setDefaults({ duration: 800, contrast: 2 })
             <p class="text-sm text-gray-500">
               Click anywhere. The expanding ring shifts underlying colors and returns to normal after the ring passes.
             </p>
-            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
               ⚠ The UI is non-interactive during the view transition.
             </p>
           </div>
@@ -84,7 +84,7 @@ btuRipple.setDefaults({ duration: 800, contrast: 2 })
             <h3 class="text-sm font-medium text-gray-700">Color Swatches</h3>
             <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
               <div
-                class="bg-primary-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+                class="flex h-20 items-center justify-center rounded-lg bg-primary-500 text-sm font-medium text-white"
               >
                 Primary
               </div>
@@ -96,16 +96,16 @@ btuRipple.setDefaults({ duration: 800, contrast: 2 })
               >
                 Purple
               </div>
-              <div class="bg-error-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white">
+              <div class="flex h-20 items-center justify-center rounded-lg bg-error-500 text-sm font-medium text-white">
                 Error
               </div>
               <div
-                class="bg-success-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+                class="flex h-20 items-center justify-center rounded-lg bg-success-500 text-sm font-medium text-white"
               >
                 Success
               </div>
               <div
-                class="bg-warning-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+                class="flex h-20 items-center justify-center rounded-lg bg-warning-500 text-sm font-medium text-white"
               >
                 Warning
               </div>
@@ -136,7 +136,7 @@ btuRipple.setDefaults({ duration: 800, contrast: 2 })
             <p class="text-sm text-gray-500">
               Click anywhere. The expanding ring shifts underlying colors and returns to normal after the ring passes.
             </p>
-            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
               ⚠ The UI is non-interactive during the view transition.
             </p>
           </div>
@@ -269,7 +269,7 @@ btuRipple.setDefaults({ duration: 800, contrast: 2 })
             <h3 class="text-sm font-medium text-gray-700">Color Swatches</h3>
             <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
               <div
-                class="bg-primary-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+                class="flex h-20 items-center justify-center rounded-lg bg-primary-500 text-sm font-medium text-white"
               >
                 Primary
               </div>
@@ -281,16 +281,16 @@ btuRipple.setDefaults({ duration: 800, contrast: 2 })
               >
                 Purple
               </div>
-              <div class="bg-error-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white">
+              <div class="flex h-20 items-center justify-center rounded-lg bg-error-500 text-sm font-medium text-white">
                 Error
               </div>
               <div
-                class="bg-success-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+                class="flex h-20 items-center justify-center rounded-lg bg-success-500 text-sm font-medium text-white"
               >
                 Success
               </div>
               <div
-                class="bg-warning-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+                class="flex h-20 items-center justify-center rounded-lg bg-warning-500 text-sm font-medium text-white"
               >
                 Warning
               </div>