voa-ds-core 1.0.4

package/dist/collection/Stories/SaasDashboard.stories.js

@@ -0,0 +1,527 @@
+import { html } from "lit";
+import "./styles/saas-dashboard.css";
+// Import external CSS for all components used in this template
+import "./styles/voa-button.external.css";
+import "./styles/voa-input.external.css";
+import "./styles/voa-select.external.css";
+import "./styles/voa-pagination.external.css";
+import "./styles/voa-badge.external.css";
+import "./styles/voa-avatar.external.css";
+import "./styles/voa-breadcrumbs.external.css";
+import "./styles/voa-tab.external.css";
+import "./styles/voa-switch.external.css";
+import "./styles/voa-tooltip.external.css";
+import "./styles/voa-checkbox.external.css";
+import "./styles/voa-radio.external.css";
+import "./styles/voa-tag.external.css";
+import "./styles/voa-text-area.external.css";
+// Import icons
+import checkIcon from "../icons/check.svg";
+import searchIcon from "../icons/search.svg";
+import settingsIcon from "../icons/settings.svg";
+import bellIcon from "../icons/bell.svg";
+const meta = {
+    title: 'SaaS Dashboard',
+    parameters: {
+        layout: 'fullscreen',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System',
+        },
+    },
+};
+export default meta;
+const dashboardTemplate = () => html `
+  <div class="saas-dashboard" part="dashboard">
+    <!-- Header -->
+    <header class="dashboard-header" part="header">
+      <div class="header-top">
+        <div class="header-left">
+          <h1 class="app-logo">VoaSaaS</h1>
+          <nav class="breadcrumbs-nav">
+            <voa-breadcrumbs type="outline">
+              <voa-breadcrumbs-item href="#dashboard">Dashboard</voa-breadcrumbs-item>
+              <voa-breadcrumbs-item href="#analytics">Analytics</voa-breadcrumbs-item>
+              <voa-breadcrumbs-item active>Reports</voa-breadcrumbs-item>
+            </voa-breadcrumbs>
+          </nav>
+        </div>
+        <div class="header-right">
+          <div class="search-box">
+            <voa-input
+              placeholder="Search projects..."
+              variant="outline"
+              size="md"
+            >
+              <span slot="start-addon">
+                <img src="${searchIcon}" alt="search" width="16" height="16" />
+              </span>
+            </voa-input>
+          </div>
+          <div class="header-actions">
+            <!-- Fixed: Using attributes instead of properties for consistency -->
+            <voa-tooltip text="Notifications" position="bottom">
+              <button class="icon-button">
+                <img src="${bellIcon}" alt="notifications" width="20" height="20" />
+                <voa-badge variant="solid" size="sm" value="3"></voa-badge>
+              </button>
+            </voa-tooltip>
+            <voa-tooltip text="Settings" position="bottom">
+              <button class="icon-button">
+                <img src="${settingsIcon}" alt="settings" width="20" height="20" />
+              </button>
+            </voa-tooltip>
+            <div class="user-menu">
+              <voa-tooltip text="User Profile" position="bottom">
+                <voa-avatar
+                  initials="JD"
+                  variant="circle"
+                  size="md"
+                  background-color="primary"
+                ></voa-avatar>
+              </voa-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tabs Navigation -->
+      <div class="header-tabs">
+        <voa-tab>
+          <voa-tab-item name="overview" active>
+            <span slot="label">Overview</span>
+          </voa-tab-item>
+          <voa-tab-item name="analytics">
+            <span slot="label">Analytics</span>
+          </voa-tab-item>
+          <voa-tab-item name="reports">
+            <span slot="label">Reports</span>
+          </voa-tab-item>
+          <voa-tab-item name="settings">
+            <span slot="label">Settings</span>
+          </voa-tab-item>
+        </voa-tab>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="dashboard-main">
+      <!-- Filters Section -->
+      <section class="filters-section" part="filters">
+        <div class="filter-group">
+          <label>Status:</label>
+          <voa-select placeholder="Select status" variant="outline">
+            <voa-option value="all">All Status</voa-option>
+            <voa-option value="active" selected>Active</voa-option>
+            <voa-option value="inactive">Inactive</voa-option>
+            <voa-option value="pending">Pending</voa-option>
+          </voa-select>
+        </div>
+
+        <div class="filter-group">
+          <label>Team:</label>
+          <voa-select placeholder="Select team" variant="outline">
+            <voa-option value="all" selected>All Teams</voa-option>
+            <voa-option value="design">Design Team</voa-option>
+            <voa-option value="development">Development</voa-option>
+            <voa-option value="marketing">Marketing</voa-option>
+          </voa-select>
+        </div>
+
+        <div class="filter-group">
+          <label>Date Range:</label>
+          <!-- Fixed: Explicitly closed the custom element tag to prevent swallowing siblings -->
+          <voa-input type="date" variant="outline"></voa-input>
+        </div>
+
+        <div class="filter-actions">
+          <voa-button variant="secondary" size="md">Reset</voa-button>
+          <voa-button variant="primary" size="md">Apply Filters</voa-button>
+        </div>
+      </section>
+
+      <!-- Stats Cards -->
+      <section class="stats-section" part="stats">
+        <div class="stat-card">
+          <div class="stat-content">
+            <h3>Total Projects</h3>
+            <p class="stat-value">24</p>
+            <span class="stat-trend positive">
+              <img src="${checkIcon}" alt="up" width="12" height="12" />
+              +12% this month
+            </span>
+          </div>
+          <voa-badge variant="solid" value="24"></voa-badge>
+        </div>
+
+        <div class="stat-card">
+          <div class="stat-content">
+            <h3>Active Users</h3>
+            <p class="stat-value">1,234</p>
+            <span class="stat-trend positive">
+              +5% increase
+            </span>
+          </div>
+          <voa-badge variant="outline" value="1.2k"></voa-badge>
+        </div>
+
+        <div class="stat-card">
+          <div class="stat-content">
+            <h3>Revenue</h3>
+            <p class="stat-value">$24,500</p>
+            <span class="stat-trend negative">
+              -3% from last month
+            </span>
+          </div>
+          <voa-badge variant="tonal" value="$24k"></voa-badge>
+        </div>
+
+        <div class="stat-card">
+          <div class="stat-content">
+            <h3>Conversion Rate</h3>
+            <p class="stat-value">3.42%</p>
+            <span class="stat-trend positive">
+              +0.5% improvement
+            </span>
+          </div>
+          <voa-badge variant="solid" value="3.42%"></voa-badge>
+        </div>
+      </section>
+
+      <!-- Table Section -->
+      <section class="table-section" part="table">
+        <div class="table-header">
+          <h2>Recent Projects</h2>
+          <voa-button variant="primary" size="md">New Project</voa-button>
+        </div>
+
+        <div class="table-wrapper">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th>
+                  <voa-checkbox></voa-checkbox>
+                </th>
+                <th>Project Name</th>
+                <th>Team</th>
+                <th>Status</th>
+                <th>Progress</th>
+                <th>Owner</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <voa-checkbox></voa-checkbox>
+                </td>
+                <td>
+                  <span class="project-name">Mobile App Redesign</span>
+                </td>
+                <td>
+                  <voa-tag variant="solid" size="sm">Design</voa-tag>
+                </td>
+                <td>
+                  <voa-badge variant="solid" value="In Progress"></voa-badge>
+                </td>
+                <td>
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 75%"></div>
+                  </div>
+                </td>
+                <td>
+                  <div class="owner-cell">
+                    <voa-avatar initials="SD" size="sm"></voa-avatar>
+                    <span>Sarah Design</span>
+                  </div>
+                </td>
+                <td>
+                  <voa-button variant="ghost" size="sm">View</voa-button>
+                </td>
+              </tr>
+
+              <tr>
+                <td>
+                  <voa-checkbox></voa-checkbox>
+                </td>
+                <td>
+                  <span class="project-name">API Integration</span>
+                </td>
+                <td>
+                  <voa-tag variant="solid" size="sm">Development</voa-tag>
+                </td>
+                <td>
+                  <voa-badge variant="solid" value="Completed"></voa-badge>
+                </td>
+                <td>
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 100%"></div>
+                  </div>
+                </td>
+                <td>
+                  <div class="owner-cell">
+                    <voa-avatar initials="JD" size="sm"></voa-avatar>
+                    <span>John Dev</span>
+                  </div>
+                </td>
+                <td>
+                  <voa-button variant="ghost" size="sm">View</voa-button>
+                </td>
+              </tr>
+
+              <tr>
+                <td>
+                  <voa-checkbox></voa-checkbox>
+                </td>
+                <td>
+                  <span class="project-name">Marketing Campaign</span>
+                </td>
+                <td>
+                  <voa-tag variant="solid" size="sm">Marketing</voa-tag>
+                </td>
+                <td>
+                  <voa-badge variant="outline" value="Pending"></voa-badge>
+                </td>
+                <td>
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 45%"></div>
+                  </div>
+                </td>
+                <td>
+                  <div class="owner-cell">
+                    <voa-avatar initials="MC" size="sm"></voa-avatar>
+                    <span>Marketing Chief</span>
+                  </div>
+                </td>
+                <td>
+                  <voa-button variant="ghost" size="sm">View</voa-button>
+                </td>
+              </tr>
+
+              <tr>
+                <td>
+                  <voa-checkbox></voa-checkbox>
+                </td>
+                <td>
+                  <span class="project-name">Security Audit</span>
+                </td>
+                <td>
+                  <voa-tag variant="tonal" size="sm">Security</voa-tag>
+                </td>
+                <td>
+                  <voa-badge variant="tonal" value="On Hold"></voa-badge>
+                </td>
+                <td>
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 30%"></div>
+                  </div>
+                </td>
+                <td>
+                  <div class="owner-cell">
+                    <voa-avatar initials="SA" size="sm"></voa-avatar>
+                    <span>Security Analyst</span>
+                  </div>
+                </td>
+                <td>
+                  <voa-button variant="ghost" size="sm">View</voa-button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="table-footer">
+          <span class="results-info">Showing 1 to 4 of 24 results</span>
+          <voa-pagination current="1" total="6" @dsPaginationChange="${(e) => console.log('Page changed:', e.detail)}"></voa-pagination>
+        </div>
+      </section>
+
+      <!-- Settings Section -->
+      <section class="settings-section" part="settings">
+        <h2>Quick Settings</h2>
+        <div class="settings-grid">
+          <div class="setting-item">
+            <label for="notifications-toggle">Enable Notifications</label>
+            <voa-switch id="notifications-toggle" checked></voa-switch>
+          </div>
+          <div class="setting-item">
+            <label for="email-toggle">Email Updates</label>
+            <voa-switch id="email-toggle" checked></voa-switch>
+          </div>
+          <div class="setting-item">
+            <label for="public-toggle">Public Profile</label>
+            <voa-switch id="public-toggle"></voa-switch>
+          </div>
+          <div class="setting-item">
+            <label for="analytics-toggle">Share Analytics</label>
+            <voa-switch id="analytics-toggle" checked></voa-switch>
+          </div>
+        </div>
+      </section>
+
+      <!-- Radio Selection -->
+      <section class="preferences-section" part="preferences">
+        <h2>Theme Preference</h2>
+        <div class="radio-group">
+          <label class="radio-item">
+            <voa-radio name="theme" value="light" checked></voa-radio>
+            <span>Light Mode</span>
+          </label>
+          <label class="radio-item">
+            <voa-radio name="theme" value="dark"></voa-radio>
+            <span>Dark Mode</span>
+          </label>
+          <label class="radio-item">
+            <voa-radio name="theme" value="auto"></voa-radio>
+            <span>Auto (System)</span>
+          </label>
+        </div>
+      </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="dashboard-footer" part="footer">
+      <div class="footer-content">
+        <p>&copy; 2024 VoaSaaS. All rights reserved.</p>
+        <div class="footer-links">
+          <a href="#privacy">Privacy Policy</a>
+          <a href="#terms">Terms of Service</a>
+          <a href="#help">Help Center</a>
+        </div>
+      </div>
+    </footer>
+  </div>
+`;
+export const Dashboard = {
+    render: dashboardTemplate,
+};
+export const CompactView = {
+    render: () => html `
+    <div class="saas-dashboard compact">
+      <header class="dashboard-header compact">
+        <div class="header-top">
+          <h1 class="app-logo">VoaSaaS</h1>
+          <div class="header-actions">
+            <voa-button variant="primary" size="sm">New Project</voa-button>
+          </div>
+        </div>
+      </header>
+
+      <main class="dashboard-main">
+        <section class="stats-section compact">
+          <div class="stat-card compact">
+            <h3>Active Projects</h3>
+            <p class="stat-value">18</p>
+          </div>
+          <div class="stat-card compact">
+            <h3>Team Members</h3>
+            <p class="stat-value">42</p>
+          </div>
+          <div class="stat-card compact">
+            <h3>Completed Tasks</h3>
+            <p class="stat-value">156</p>
+          </div>
+        </section>
+
+        <section class="table-section compact">
+          <div class="table-header">
+            <h2>Quick Overview</h2>
+          </div>
+          <div class="quick-list">
+            <div class="list-item">
+              <span class="item-name">Project Alpha</span>
+              <voa-badge variant="solid" value="Active"></voa-badge>
+            </div>
+            <div class="list-item">
+              <span class="item-name">Project Beta</span>
+              <voa-badge variant="outline" value="Pending"></voa-badge>
+            </div>
+            <div class="list-item">
+              <span class="item-name">Project Gamma</span>
+              <voa-badge variant="solid" value="Active"></voa-badge>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  `,
+};
+export const DataEntryForm = {
+    render: () => html `
+    <div class="saas-dashboard form-only">
+      <header class="dashboard-header">
+        <h1 class="app-logo">New Project Setup</h1>
+      </header>
+
+      <main class="dashboard-main">
+        <section class="form-section">
+          <form class="data-form">
+            <div class="form-group">
+              <label for="project-name">Project Name *</label>
+              <voa-input
+                id="project-name"
+                placeholder="Enter project name"
+                variant="outline"
+                required
+              ></voa-input>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label for="project-team">Team *</label>
+                <voa-select placeholder="Select team" variant="outline">
+                  <voa-option value="design">Design</voa-option>
+                  <voa-option value="development">Development</voa-option>
+                  <voa-option value="marketing">Marketing</voa-option>
+                </voa-select>
+              </div>
+
+              <div class="form-group">
+                <label for="project-status">Status</label>
+                <voa-select placeholder="Select status" variant="outline">
+                  <voa-option value="active" selected>Active</voa-option>
+                  <voa-option value="pending">Pending</voa-option>
+                  <voa-option value="inactive">Inactive</voa-option>
+                </voa-select>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label for="project-description">Description</label>
+              <voa-text-area
+                id="project-description"
+                placeholder="Describe the project..."
+                variant="outline"
+              ></voa-text-area>
+            </div>
+
+            <div class="form-group">
+              <label>Options</label>
+              <div class="checkbox-group">
+                <label class="checkbox-item">
+                  <voa-checkbox checked></voa-checkbox>
+                  <span>Make this project public</span>
+                </label>
+                <label class="checkbox-item">
+                  <voa-checkbox></voa-checkbox>
+                  <span>Enable notifications</span>
+                </label>
+                <label class="checkbox-item">
+                  <voa-checkbox checked></voa-checkbox>
+                  <span>Add to favorites</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="form-actions">
+              <voa-button variant="secondary" size="md">Cancel</voa-button>
+              <voa-button variant="primary" size="md">Create Project</voa-button>
+            </div>
+          </form>
+        </section>
+      </main>
+    </div>
+  `,
+};
+//# sourceMappingURL=SaasDashboard.stories.js.map

package/dist/collection/Stories/SaasDashboard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaasDashboard.stories.js","sourceRoot":"","sources":["../../src/Stories/SaasDashboard.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,6BAA6B,CAAC;AAErC,+DAA+D;AAC/D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AACzC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,iCAAiC,CAAC;AACzC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAE7C,eAAe;AACf,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,gBAAgB;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;QACpB,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uEAAuE;SAC7E;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;4BAuBR,UAAU;;;;;;;;4BAQV,QAAQ;;;;;;4BAMR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+Ed,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEA0LoC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DnH,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM,EAAE,iBAAiB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EjB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\r\nimport type { Meta, StoryObj } from '@storybook/web-components';\r\nimport './styles/saas-dashboard.css';\r\n\r\n// Import external CSS for all components used in this template\r\nimport './styles/voa-button.external.css';\r\nimport './styles/voa-input.external.css';\r\nimport './styles/voa-select.external.css';\r\nimport './styles/voa-pagination.external.css';\r\nimport './styles/voa-badge.external.css';\r\nimport './styles/voa-avatar.external.css';\r\nimport './styles/voa-breadcrumbs.external.css';\r\nimport './styles/voa-tab.external.css';\r\nimport './styles/voa-switch.external.css';\r\nimport './styles/voa-tooltip.external.css';\r\nimport './styles/voa-checkbox.external.css';\r\nimport './styles/voa-radio.external.css';\r\nimport './styles/voa-tag.external.css';\r\nimport './styles/voa-text-area.external.css';\r\n\r\n// Import icons\r\nimport checkIcon from '../icons/check.svg';\r\nimport searchIcon from '../icons/search.svg';\r\nimport settingsIcon from '../icons/settings.svg';\r\nimport bellIcon from '../icons/bell.svg';\r\n\r\nconst meta: Meta = {\r\n  title: 'SaaS Dashboard',\r\n  parameters: {\r\n    layout: 'fullscreen',\r\n    design: {\r\n      type: 'figma',\r\n      url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System',\r\n    },\r\n  },\r\n};\r\n\r\nexport default meta;\r\ntype Story = StoryObj;\r\n\r\nconst dashboardTemplate = () => html`\r\n  <div class=\"saas-dashboard\" part=\"dashboard\">\r\n    <!-- Header -->\r\n    <header class=\"dashboard-header\" part=\"header\">\r\n      <div class=\"header-top\">\r\n        <div class=\"header-left\">\r\n          <h1 class=\"app-logo\">VoaSaaS</h1>\r\n          <nav class=\"breadcrumbs-nav\">\r\n            <voa-breadcrumbs type=\"outline\">\r\n              <voa-breadcrumbs-item href=\"#dashboard\">Dashboard</voa-breadcrumbs-item>\r\n              <voa-breadcrumbs-item href=\"#analytics\">Analytics</voa-breadcrumbs-item>\r\n              <voa-breadcrumbs-item active>Reports</voa-breadcrumbs-item>\r\n            </voa-breadcrumbs>\r\n          </nav>\r\n        </div>\r\n        <div class=\"header-right\">\r\n          <div class=\"search-box\">\r\n            <voa-input\r\n              placeholder=\"Search projects...\"\r\n              variant=\"outline\"\r\n              size=\"md\"\r\n            >\r\n              <span slot=\"start-addon\">\r\n                <img src=\"${searchIcon}\" alt=\"search\" width=\"16\" height=\"16\" />\r\n              </span>\r\n            </voa-input>\r\n          </div>\r\n          <div class=\"header-actions\">\r\n            <!-- Fixed: Using attributes instead of properties for consistency -->\r\n            <voa-tooltip text=\"Notifications\" position=\"bottom\">\r\n              <button class=\"icon-button\">\r\n                <img src=\"${bellIcon}\" alt=\"notifications\" width=\"20\" height=\"20\" />\r\n                <voa-badge variant=\"solid\" size=\"sm\" value=\"3\"></voa-badge>\r\n              </button>\r\n            </voa-tooltip>\r\n            <voa-tooltip text=\"Settings\" position=\"bottom\">\r\n              <button class=\"icon-button\">\r\n                <img src=\"${settingsIcon}\" alt=\"settings\" width=\"20\" height=\"20\" />\r\n              </button>\r\n            </voa-tooltip>\r\n            <div class=\"user-menu\">\r\n              <voa-tooltip text=\"User Profile\" position=\"bottom\">\r\n                <voa-avatar\r\n                  initials=\"JD\"\r\n                  variant=\"circle\"\r\n                  size=\"md\"\r\n                  background-color=\"primary\"\r\n                ></voa-avatar>\r\n              </voa-tooltip>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Tabs Navigation -->\r\n      <div class=\"header-tabs\">\r\n        <voa-tab>\r\n          <voa-tab-item name=\"overview\" active>\r\n            <span slot=\"label\">Overview</span>\r\n          </voa-tab-item>\r\n          <voa-tab-item name=\"analytics\">\r\n            <span slot=\"label\">Analytics</span>\r\n          </voa-tab-item>\r\n          <voa-tab-item name=\"reports\">\r\n            <span slot=\"label\">Reports</span>\r\n          </voa-tab-item>\r\n          <voa-tab-item name=\"settings\">\r\n            <span slot=\"label\">Settings</span>\r\n          </voa-tab-item>\r\n        </voa-tab>\r\n      </div>\r\n    </header>\r\n\r\n    <!-- Main Content -->\r\n    <main class=\"dashboard-main\">\r\n      <!-- Filters Section -->\r\n      <section class=\"filters-section\" part=\"filters\">\r\n        <div class=\"filter-group\">\r\n          <label>Status:</label>\r\n          <voa-select placeholder=\"Select status\" variant=\"outline\">\r\n            <voa-option value=\"all\">All Status</voa-option>\r\n            <voa-option value=\"active\" selected>Active</voa-option>\r\n            <voa-option value=\"inactive\">Inactive</voa-option>\r\n            <voa-option value=\"pending\">Pending</voa-option>\r\n          </voa-select>\r\n        </div>\r\n\r\n        <div class=\"filter-group\">\r\n          <label>Team:</label>\r\n          <voa-select placeholder=\"Select team\" variant=\"outline\">\r\n            <voa-option value=\"all\" selected>All Teams</voa-option>\r\n            <voa-option value=\"design\">Design Team</voa-option>\r\n            <voa-option value=\"development\">Development</voa-option>\r\n            <voa-option value=\"marketing\">Marketing</voa-option>\r\n          </voa-select>\r\n        </div>\r\n\r\n        <div class=\"filter-group\">\r\n          <label>Date Range:</label>\r\n          <!-- Fixed: Explicitly closed the custom element tag to prevent swallowing siblings -->\r\n          <voa-input type=\"date\" variant=\"outline\"></voa-input>\r\n        </div>\r\n\r\n        <div class=\"filter-actions\">\r\n          <voa-button variant=\"secondary\" size=\"md\">Reset</voa-button>\r\n          <voa-button variant=\"primary\" size=\"md\">Apply Filters</voa-button>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Stats Cards -->\r\n      <section class=\"stats-section\" part=\"stats\">\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-content\">\r\n            <h3>Total Projects</h3>\r\n            <p class=\"stat-value\">24</p>\r\n            <span class=\"stat-trend positive\">\r\n              <img src=\"${checkIcon}\" alt=\"up\" width=\"12\" height=\"12\" />\r\n              +12% this month\r\n            </span>\r\n          </div>\r\n          <voa-badge variant=\"solid\" value=\"24\"></voa-badge>\r\n        </div>\r\n\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-content\">\r\n            <h3>Active Users</h3>\r\n            <p class=\"stat-value\">1,234</p>\r\n            <span class=\"stat-trend positive\">\r\n              +5% increase\r\n            </span>\r\n          </div>\r\n          <voa-badge variant=\"outline\" value=\"1.2k\"></voa-badge>\r\n        </div>\r\n\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-content\">\r\n            <h3>Revenue</h3>\r\n            <p class=\"stat-value\">$24,500</p>\r\n            <span class=\"stat-trend negative\">\r\n              -3% from last month\r\n            </span>\r\n          </div>\r\n          <voa-badge variant=\"tonal\" value=\"$24k\"></voa-badge>\r\n        </div>\r\n\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-content\">\r\n            <h3>Conversion Rate</h3>\r\n            <p class=\"stat-value\">3.42%</p>\r\n            <span class=\"stat-trend positive\">\r\n              +0.5% improvement\r\n            </span>\r\n          </div>\r\n          <voa-badge variant=\"solid\" value=\"3.42%\"></voa-badge>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Table Section -->\r\n      <section class=\"table-section\" part=\"table\">\r\n        <div class=\"table-header\">\r\n          <h2>Recent Projects</h2>\r\n          <voa-button variant=\"primary\" size=\"md\">New Project</voa-button>\r\n        </div>\r\n\r\n        <div class=\"table-wrapper\">\r\n          <table class=\"data-table\">\r\n            <thead>\r\n              <tr>\r\n                <th>\r\n                  <voa-checkbox></voa-checkbox>\r\n                </th>\r\n                <th>Project Name</th>\r\n                <th>Team</th>\r\n                <th>Status</th>\r\n                <th>Progress</th>\r\n                <th>Owner</th>\r\n                <th>Actions</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr>\r\n                <td>\r\n                  <voa-checkbox></voa-checkbox>\r\n                </td>\r\n                <td>\r\n                  <span class=\"project-name\">Mobile App Redesign</span>\r\n                </td>\r\n                <td>\r\n                  <voa-tag variant=\"solid\" size=\"sm\">Design</voa-tag>\r\n                </td>\r\n                <td>\r\n                  <voa-badge variant=\"solid\" value=\"In Progress\"></voa-badge>\r\n                </td>\r\n                <td>\r\n                  <div class=\"progress-bar\">\r\n                    <div class=\"progress-fill\" style=\"width: 75%\"></div>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"owner-cell\">\r\n                    <voa-avatar initials=\"SD\" size=\"sm\"></voa-avatar>\r\n                    <span>Sarah Design</span>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <voa-button variant=\"ghost\" size=\"sm\">View</voa-button>\r\n                </td>\r\n              </tr>\r\n\r\n              <tr>\r\n                <td>\r\n                  <voa-checkbox></voa-checkbox>\r\n                </td>\r\n                <td>\r\n                  <span class=\"project-name\">API Integration</span>\r\n                </td>\r\n                <td>\r\n                  <voa-tag variant=\"solid\" size=\"sm\">Development</voa-tag>\r\n                </td>\r\n                <td>\r\n                  <voa-badge variant=\"solid\" value=\"Completed\"></voa-badge>\r\n                </td>\r\n                <td>\r\n                  <div class=\"progress-bar\">\r\n                    <div class=\"progress-fill\" style=\"width: 100%\"></div>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"owner-cell\">\r\n                    <voa-avatar initials=\"JD\" size=\"sm\"></voa-avatar>\r\n                    <span>John Dev</span>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <voa-button variant=\"ghost\" size=\"sm\">View</voa-button>\r\n                </td>\r\n              </tr>\r\n\r\n              <tr>\r\n                <td>\r\n                  <voa-checkbox></voa-checkbox>\r\n                </td>\r\n                <td>\r\n                  <span class=\"project-name\">Marketing Campaign</span>\r\n                </td>\r\n                <td>\r\n                  <voa-tag variant=\"solid\" size=\"sm\">Marketing</voa-tag>\r\n                </td>\r\n                <td>\r\n                  <voa-badge variant=\"outline\" value=\"Pending\"></voa-badge>\r\n                </td>\r\n                <td>\r\n                  <div class=\"progress-bar\">\r\n                    <div class=\"progress-fill\" style=\"width: 45%\"></div>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"owner-cell\">\r\n                    <voa-avatar initials=\"MC\" size=\"sm\"></voa-avatar>\r\n                    <span>Marketing Chief</span>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <voa-button variant=\"ghost\" size=\"sm\">View</voa-button>\r\n                </td>\r\n              </tr>\r\n\r\n              <tr>\r\n                <td>\r\n                  <voa-checkbox></voa-checkbox>\r\n                </td>\r\n                <td>\r\n                  <span class=\"project-name\">Security Audit</span>\r\n                </td>\r\n                <td>\r\n                  <voa-tag variant=\"tonal\" size=\"sm\">Security</voa-tag>\r\n                </td>\r\n                <td>\r\n                  <voa-badge variant=\"tonal\" value=\"On Hold\"></voa-badge>\r\n                </td>\r\n                <td>\r\n                  <div class=\"progress-bar\">\r\n                    <div class=\"progress-fill\" style=\"width: 30%\"></div>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"owner-cell\">\r\n                    <voa-avatar initials=\"SA\" size=\"sm\"></voa-avatar>\r\n                    <span>Security Analyst</span>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <voa-button variant=\"ghost\" size=\"sm\">View</voa-button>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n\r\n        <!-- Pagination -->\r\n        <div class=\"table-footer\">\r\n          <span class=\"results-info\">Showing 1 to 4 of 24 results</span>\r\n          <voa-pagination current=\"1\" total=\"6\" @dsPaginationChange=\"${(e) => console.log('Page changed:', e.detail)}\"></voa-pagination>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Settings Section -->\r\n      <section class=\"settings-section\" part=\"settings\">\r\n        <h2>Quick Settings</h2>\r\n        <div class=\"settings-grid\">\r\n          <div class=\"setting-item\">\r\n            <label for=\"notifications-toggle\">Enable Notifications</label>\r\n            <voa-switch id=\"notifications-toggle\" checked></voa-switch>\r\n          </div>\r\n          <div class=\"setting-item\">\r\n            <label for=\"email-toggle\">Email Updates</label>\r\n            <voa-switch id=\"email-toggle\" checked></voa-switch>\r\n          </div>\r\n          <div class=\"setting-item\">\r\n            <label for=\"public-toggle\">Public Profile</label>\r\n            <voa-switch id=\"public-toggle\"></voa-switch>\r\n          </div>\r\n          <div class=\"setting-item\">\r\n            <label for=\"analytics-toggle\">Share Analytics</label>\r\n            <voa-switch id=\"analytics-toggle\" checked></voa-switch>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Radio Selection -->\r\n      <section class=\"preferences-section\" part=\"preferences\">\r\n        <h2>Theme Preference</h2>\r\n        <div class=\"radio-group\">\r\n          <label class=\"radio-item\">\r\n            <voa-radio name=\"theme\" value=\"light\" checked></voa-radio>\r\n            <span>Light Mode</span>\r\n          </label>\r\n          <label class=\"radio-item\">\r\n            <voa-radio name=\"theme\" value=\"dark\"></voa-radio>\r\n            <span>Dark Mode</span>\r\n          </label>\r\n          <label class=\"radio-item\">\r\n            <voa-radio name=\"theme\" value=\"auto\"></voa-radio>\r\n            <span>Auto (System)</span>\r\n          </label>\r\n        </div>\r\n      </section>\r\n    </main>\r\n\r\n    <!-- Footer -->\r\n    <footer class=\"dashboard-footer\" part=\"footer\">\r\n      <div class=\"footer-content\">\r\n        <p>&copy; 2024 VoaSaaS. All rights reserved.</p>\r\n        <div class=\"footer-links\">\r\n          <a href=\"#privacy\">Privacy Policy</a>\r\n          <a href=\"#terms\">Terms of Service</a>\r\n          <a href=\"#help\">Help Center</a>\r\n        </div>\r\n      </div>\r\n    </footer>\r\n  </div>\r\n`;\r\n\r\nexport const Dashboard: Story = {\r\n  render: dashboardTemplate,\r\n};\r\n\r\nexport const CompactView: Story = {\r\n  render: () => html`\r\n    <div class=\"saas-dashboard compact\">\r\n      <header class=\"dashboard-header compact\">\r\n        <div class=\"header-top\">\r\n          <h1 class=\"app-logo\">VoaSaaS</h1>\r\n          <div class=\"header-actions\">\r\n            <voa-button variant=\"primary\" size=\"sm\">New Project</voa-button>\r\n          </div>\r\n        </div>\r\n      </header>\r\n\r\n      <main class=\"dashboard-main\">\r\n        <section class=\"stats-section compact\">\r\n          <div class=\"stat-card compact\">\r\n            <h3>Active Projects</h3>\r\n            <p class=\"stat-value\">18</p>\r\n          </div>\r\n          <div class=\"stat-card compact\">\r\n            <h3>Team Members</h3>\r\n            <p class=\"stat-value\">42</p>\r\n          </div>\r\n          <div class=\"stat-card compact\">\r\n            <h3>Completed Tasks</h3>\r\n            <p class=\"stat-value\">156</p>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"table-section compact\">\r\n          <div class=\"table-header\">\r\n            <h2>Quick Overview</h2>\r\n          </div>\r\n          <div class=\"quick-list\">\r\n            <div class=\"list-item\">\r\n              <span class=\"item-name\">Project Alpha</span>\r\n              <voa-badge variant=\"solid\" value=\"Active\"></voa-badge>\r\n            </div>\r\n            <div class=\"list-item\">\r\n              <span class=\"item-name\">Project Beta</span>\r\n              <voa-badge variant=\"outline\" value=\"Pending\"></voa-badge>\r\n            </div>\r\n            <div class=\"list-item\">\r\n              <span class=\"item-name\">Project Gamma</span>\r\n              <voa-badge variant=\"solid\" value=\"Active\"></voa-badge>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </main>\r\n    </div>\r\n  `,\r\n};\r\n\r\nexport const DataEntryForm: Story = {\r\n  render: () => html`\r\n    <div class=\"saas-dashboard form-only\">\r\n      <header class=\"dashboard-header\">\r\n        <h1 class=\"app-logo\">New Project Setup</h1>\r\n      </header>\r\n\r\n      <main class=\"dashboard-main\">\r\n        <section class=\"form-section\">\r\n          <form class=\"data-form\">\r\n            <div class=\"form-group\">\r\n              <label for=\"project-name\">Project Name *</label>\r\n              <voa-input\r\n                id=\"project-name\"\r\n                placeholder=\"Enter project name\"\r\n                variant=\"outline\"\r\n                required\r\n              ></voa-input>\r\n            </div>\r\n\r\n            <div class=\"form-row\">\r\n              <div class=\"form-group\">\r\n                <label for=\"project-team\">Team *</label>\r\n                <voa-select placeholder=\"Select team\" variant=\"outline\">\r\n                  <voa-option value=\"design\">Design</voa-option>\r\n                  <voa-option value=\"development\">Development</voa-option>\r\n                  <voa-option value=\"marketing\">Marketing</voa-option>\r\n                </voa-select>\r\n              </div>\r\n\r\n              <div class=\"form-group\">\r\n                <label for=\"project-status\">Status</label>\r\n                <voa-select placeholder=\"Select status\" variant=\"outline\">\r\n                  <voa-option value=\"active\" selected>Active</voa-option>\r\n                  <voa-option value=\"pending\">Pending</voa-option>\r\n                  <voa-option value=\"inactive\">Inactive</voa-option>\r\n                </voa-select>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n              <label for=\"project-description\">Description</label>\r\n              <voa-text-area\r\n                id=\"project-description\"\r\n                placeholder=\"Describe the project...\"\r\n                variant=\"outline\"\r\n              ></voa-text-area>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n              <label>Options</label>\r\n              <div class=\"checkbox-group\">\r\n                <label class=\"checkbox-item\">\r\n                  <voa-checkbox checked></voa-checkbox>\r\n                  <span>Make this project public</span>\r\n                </label>\r\n                <label class=\"checkbox-item\">\r\n                  <voa-checkbox></voa-checkbox>\r\n                  <span>Enable notifications</span>\r\n                </label>\r\n                <label class=\"checkbox-item\">\r\n                  <voa-checkbox checked></voa-checkbox>\r\n                  <span>Add to favorites</span>\r\n                </label>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"form-actions\">\r\n              <voa-button variant=\"secondary\" size=\"md\">Cancel</voa-button>\r\n              <voa-button variant=\"primary\" size=\"md\">Create Project</voa-button>\r\n            </div>\r\n          </form>\r\n        </section>\r\n      </main>\r\n    </div>\r\n  `,\r\n};\r\n"]}