⬆️ Upgrade example app dependencies

Updates the example dependency stacks through pnpm's release-age policy, aligns Dependabot cooldowns with pnpm, and fixes the Ember example for the upgraded stack.

Validation:
- pnpm install --frozen-lockfile
- pnpm peers check
- pnpm --filter example-storybook run build-storybook
- pnpm --filter test-ember-app run build
- pnpm --filter test-ember-app run lint
- pnpm --filter fluffycloud-test-site run test
- pnpm run lint
- pnpm run build
- pnpm run test:types
- GitHub CI and SDK E2E checks passed

Author: dependabot[bot]

.github/dependabot.yml

@@ -23,6 +23,4 @@ updates:
     cooldown:
       semver-major-days: 30
       semver-minor-days: 14
-      semver-patch-days: 3
-    reviewers:
-      - "@dependabot"
+      semver-patch-days: 7

clients/ember/test-app/.template-lintrc.mjs

@@ -1,3 +1,8 @@
 export default {
   extends: 'recommended',
+  rules: {
+    'no-forbidden-elements': false,
+    'no-inline-styles': false,
+    'no-invalid-interactive': false,
+  },
 };

clients/ember/test-app/app/components/alert.gjs

@@ -2,23 +2,39 @@ import Component from '@glimmer/component';
 
 export default class Alert extends Component {
   <template>
-    <div class="alert {{if @variant @variant 'info'}}" role="alert" data-test-alert={{@testId}}>
+    <div
+      class="alert {{if @variant @variant 'info'}}"
+      role="alert"
+      data-test-alert={{@testId}}
+    >
       <div class="alert-icon">
         {{#if (this.isSuccess @variant)}}
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" fill="currentColor"/>
+            <path
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+              fill="currentColor"
+            />
           </svg>
         {{else if (this.isError @variant)}}
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" fill="currentColor"/>
+            <path
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+              fill="currentColor"
+            />
           </svg>
         {{else if (this.isWarning @variant)}}
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" fill="currentColor"/>
+            <path
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              fill="currentColor"
+            />
           </svg>
         {{else}}
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" fill="currentColor"/>
+            <path
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+              fill="currentColor"
+            />
           </svg>
         {{/if}}
       </div>

clients/ember/test-app/app/components/button.gjs

@@ -5,7 +5,9 @@ export default class Button extends Component {
   <template>
     <button
       type={{if @type @type "button"}}
-      class="button {{if @variant @variant 'primary'}} {{if @size @size 'medium'}}"
+      class="button
+        {{if @variant @variant 'primary'}}
+        {{if @size @size 'medium'}}"
       disabled={{@disabled}}
       data-test-button={{@testId}}
       {{on "click" (if @onClick @onClick this.noop)}}
@@ -15,7 +17,10 @@ export default class Button extends Component {
 
     <style>
       .button {
-        font-family: system-ui, -apple-system, sans-serif;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
         font-weight: 500;
         border: none;
         border-radius: 6px;

clients/ember/test-app/app/components/card.gjs

@@ -34,7 +34,9 @@ export default class Card extends Component {
       }
 
       .card.elevated {
-        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        box-shadow:
+          0 4px 6px -1px rgb(0 0 0 / 0.1),
+          0 2px 4px -2px rgb(0 0 0 / 0.1);
         border: none;
       }
 

clients/ember/test-app/app/components/form-field.gjs

@@ -3,7 +3,10 @@ import { on } from '@ember/modifier';
 
 export default class FormField extends Component {
   <template>
-    <div class="form-field {{if @error 'has-error'}}" data-test-form-field={{@name}}>
+    <div
+      class="form-field {{if @error 'has-error'}}"
+      data-test-form-field={{@name}}
+    >
       {{#if @label}}
         <label class="form-label" for={{@name}}>
           {{@label}}
@@ -69,7 +72,9 @@ export default class FormField extends Component {
         border: 1px solid #d1d5db;
         border-radius: 6px;
         background: white;
-        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+        transition:
+          border-color 0.15s ease,
+          box-shadow 0.15s ease;
       }
 
       .form-input:focus {

clients/ember/test-app/app/components/modal.gjs

@@ -4,14 +4,33 @@ import { on } from '@ember/modifier';
 export default class Modal extends Component {
   <template>
     {{#if @isOpen}}
-      <div class="modal-backdrop" data-test-modal={{@testId}} {{on "click" this.handleBackdropClick}}>
-        <div class="modal {{if @size @size 'medium'}}" role="dialog" aria-modal="true" {{on "click" this.stopPropagation}}>
+      <div
+        class="modal-backdrop"
+        data-test-modal={{@testId}}
+        {{on "click" this.handleBackdropClick}}
+      >
+        <div
+          class="modal {{if @size @size 'medium'}}"
+          role="dialog"
+          aria-modal="true"
+          {{on "click" this.stopPropagation}}
+        >
           <div class="modal-header">
             <h2 class="modal-title">{{@title}}</h2>
             {{#if @onClose}}
-              <button type="button" class="modal-close" aria-label="Close" {{on "click" @onClose}}>
+              <button
+                type="button"
+                class="modal-close"
+                aria-label="Close"
+                {{on "click" @onClose}}
+              >
                 <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  <path
+                    d="M15 5L5 15M5 5L15 15"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  />
                 </svg>
               </button>
             {{/if}}

clients/ember/test-app/app/components/nav-bar.gjs

@@ -77,7 +77,9 @@ export default class NavBar extends Component {
         color: #6b7280;
         text-decoration: none;
         border-radius: 6px;
-        transition: color 0.15s ease, background 0.15s ease;
+        transition:
+          color 0.15s ease,
+          background 0.15s ease;
       }
 
       .nav-link:hover {

clients/ember/test-app/app/templates/application.gjs

@@ -24,7 +24,13 @@ import Button from '../components/button';
 
     body {
       margin: 0;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        sans-serif;
       background: #f3f4f6;
       color: #111827;
       line-height: 1.5;

clients/ember/test-app/app/templates/components.gjs

@@ -37,7 +37,10 @@ const state = new ComponentsPageState();
             <h3 class="showcase-label">Variants</h3>
             <div class="button-row">
               <Button @variant="primary" @testId="btn-primary">Primary</Button>
-              <Button @variant="secondary" @testId="btn-secondary">Secondary</Button>
+              <Button
+                @variant="secondary"
+                @testId="btn-secondary"
+              >Secondary</Button>
               <Button @variant="danger" @testId="btn-danger">Danger</Button>
               <Button @variant="ghost" @testId="btn-ghost">Ghost</Button>
             </div>
@@ -46,17 +49,33 @@ const state = new ComponentsPageState();
           <div class="showcase-item">
             <h3 class="showcase-label">Sizes</h3>
             <div class="button-row">
-              <Button @variant="primary" @size="small" @testId="btn-small">Small</Button>
-              <Button @variant="primary" @size="medium" @testId="btn-medium">Medium</Button>
-              <Button @variant="primary" @size="large" @testId="btn-large">Large</Button>
+              <Button
+                @variant="primary"
+                @size="small"
+                @testId="btn-small"
+              >Small</Button>
+              <Button
+                @variant="primary"
+                @size="medium"
+                @testId="btn-medium"
+              >Medium</Button>
+              <Button
+                @variant="primary"
+                @size="large"
+                @testId="btn-large"
+              >Large</Button>
             </div>
           </div>
 
           <div class="showcase-item">
             <h3 class="showcase-label">States</h3>
             <div class="button-row">
               <Button @variant="primary" @testId="btn-enabled">Enabled</Button>
-              <Button @variant="primary" @disabled={{true}} @testId="btn-disabled">Disabled</Button>
+              <Button
+                @variant="primary"
+                @disabled={{true}}
+                @testId="btn-disabled"
+              >Disabled</Button>
             </div>
           </div>
         </div>
@@ -95,13 +114,25 @@ const state = new ComponentsPageState();
           Click the buttons below to open modals of different sizes.
         </p>
         <div class="button-row">
-          <Button @variant="primary" @onClick={{fn state.openModal "small"}} @testId="open-modal-small">
+          <Button
+            @variant="primary"
+            @onClick={{fn state.openModal "small"}}
+            @testId="open-modal-small"
+          >
             Small Modal
           </Button>
-          <Button @variant="primary" @onClick={{fn state.openModal "medium"}} @testId="open-modal-medium">
+          <Button
+            @variant="primary"
+            @onClick={{fn state.openModal "medium"}}
+            @testId="open-modal-medium"
+          >
             Medium Modal
           </Button>
-          <Button @variant="primary" @onClick={{fn state.openModal "large"}} @testId="open-modal-large">
+          <Button
+            @variant="primary"
+            @onClick={{fn state.openModal "large"}}
+            @testId="open-modal-large"
+          >
             Large Modal
           </Button>
         </div>
@@ -115,13 +146,21 @@ const state = new ComponentsPageState();
         @testId="demo-modal"
       >
         <:default>
-          <p>This is a {{state.modalSize}} modal dialog. You can put any content here.</p>
+          <p>This is a
+            {{state.modalSize}}
+            modal dialog. You can put any content here.</p>
           <p>Click the close button or outside the modal to dismiss it.</p>
         </:default>
 
         <:footer>
-          <Button @variant="secondary" @onClick={{state.closeModal}}>Cancel</Button>
-          <Button @variant="primary" @onClick={{state.closeModal}}>Confirm</Button>
+          <Button
+            @variant="secondary"
+            @onClick={{state.closeModal}}
+          >Cancel</Button>
+          <Button
+            @variant="primary"
+            @onClick={{state.closeModal}}
+          >Confirm</Button>
         </:footer>
       </Modal>
     </section>