voa-ds-core 1.0.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"SaasDashboard.stories.js","sourceRoot":"","sources":["../../../src/components/SaasDashboard/SaasDashboard.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,8CAA8C,CAAC;AACtD,OAAO,6CAA6C,CAAC;AACrD,OAAO,8CAA8C,CAAC;AACtD,OAAO,6CAA6C,CAAC;AACrD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,2CAA2C,CAAC;AACnD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,8CAA8C,CAAC;AACtD,OAAO,+CAA+C,CAAC;AAEvD,eAAe;AACf,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAClD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAE/C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAobqB,aAAa;;;gDAGb,aAAa;;;gDAGb,aAAa;;;gDAGb,YAAY;;;gDAGZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sDAiCN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDA+BZ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0I3D,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;QACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACjE,IAAI,MAAM,IAAI,SAAS,EAAE,CAAC;YACxB,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAM,EAAE,EAAE;gBAC7C,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;oBACb,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;gBACvC,CAAC;qBAAM,CAAC;oBACN,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC1C,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,CAAC,CAAC;IACN,OAAO,QAAQ,EAAE,CAAC;AACpB,CAAC,CAAC","sourcesContent":["import { html } from 'lit-html';\r\nimport '../../Stories/styles/voa-button.external.css';\r\nimport '../../Stories/styles/voa-input.external.css';\r\nimport '../../Stories/styles/voa-avatar.external.css';\r\nimport '../../Stories/styles/voa-badge.external.css';\r\nimport '../../Stories/styles/voa-pagination.external.css';\r\nimport '../../Stories/styles/voa-tag.external.css';\r\nimport '../../Stories/styles/voa-breadcrumbs.external.css';\r\nimport '../../Stories/styles/voa-switch.external.css';\r\nimport '../../Stories/styles/voa-tooltip.external.css';\r\n\r\n// Import icons\r\nimport dashboardIcon from '../../icons/circle.svg';\r\nimport analyticsIcon from '../../icons/arrow.svg';\r\nimport customersIcon from '../../icons/person.svg';\r\nimport productsIcon from '../../icons/info.svg';\r\nimport settingsIcon from '../../icons/settings.svg';\r\nimport bellIcon from '../../icons/bell.svg';\r\nimport exportIcon from '../../icons/arrow.svg';\r\n\r\nexport default {\r\n  title: 'Exemplos/SaaS Dashboard',\r\n  parameters: {\r\n    layout: 'fullscreen',\r\n  },\r\n};\r\n\r\nconst Template = () => html`\r\n  <style>\r\n    /* Layout Styles */\r\n    .dashboard-container {\r\n      display: grid;\r\n      grid-template-columns: 250px 1fr;\r\n      grid-template-rows: 60px 1fr;\r\n      height: 100vh;\r\n      font-family: var(--font-family-sans, 'Inter', sans-serif);\r\n      background-color: var(--structure-colors-bg-container, #f9fafb);\r\n      color: var(--text-primary, #111827);\r\n    }\r\n\r\n    .sidebar {\r\n      grid-row: 1 / -1;\r\n      background-color: var(--structure-colors-bg-base, #ffffff);\r\n      border-right: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n      padding: var(--spacing-spacing-lg, 24px);\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--spacing-spacing-lg, 24px);\r\n    }\r\n\r\n    .logo {\r\n      font-size: 20px;\r\n      font-weight: var(--typography-font-weight-bold, 700);\r\n      color: var(--text-primary, #111827);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--spacing-spacing-rg, 12px);\r\n      padding-bottom: var(--spacing-spacing-rg, 12px);\r\n    }\r\n\r\n    .nav-menu {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--spacing-spacing-sm, 8px);\r\n    }\r\n\r\n    .header {\r\n      background-color: var(--structure-colors-bg-base, #ffffff);\r\n      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      padding: 0 var(--spacing-spacing-xl, 32px);\r\n    }\r\n\r\n    .header-left {\r\n      width: 320px;\r\n    }\r\n\r\n    .header-right {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--spacing-spacing-lg, 24px);\r\n    }\r\n\r\n    .user-profile {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--spacing-spacing-rg, 12px);\r\n      cursor: pointer;\r\n    }\r\n\r\n    .main-content {\r\n      padding: var(--spacing-spacing-xl, 32px);\r\n      overflow-y: auto;\r\n    }\r\n\r\n    .page-header {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: flex-start;\r\n      margin-bottom: var(--spacing-spacing-xl, 32px);\r\n    }\r\n\r\n    .stats-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n      gap: var(--spacing-spacing-lg, 24px);\r\n      margin-bottom: var(--spacing-spacing-xl, 32px);\r\n    }\r\n\r\n    .stat-card {\r\n      background: var(--structure-colors-bg-base, white);\r\n      padding: var(--spacing-spacing-lg, 24px);\r\n      border-radius: var(--radius-lg, 12px);\r\n      box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n      border: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n    }\r\n\r\n    .stat-title {\r\n      color: var(--text-secondary, #6b7280);\r\n      font-size: 14px;\r\n      font-weight: var(--typography-font-weight-medium, 500);\r\n      margin-bottom: var(--spacing-spacing-sm, 8px);\r\n    }\r\n\r\n    .stat-value {\r\n      font-size: 30px;\r\n      font-weight: var(--typography-font-weight-bold, 700);\r\n      color: var(--text-primary, #111827);\r\n      margin-bottom: var(--spacing-spacing-xs, 4px);\r\n    }\r\n\r\n    .stat-change {\r\n      font-size: 13px;\r\n      font-weight: var(--typography-font-weight-medium, 500);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--spacing-spacing-xs, 4px);\r\n    }\r\n    .stat-change.positive { color: var(--semantic-colors-success, #059669); }\r\n    .stat-change.negative { color: var(--semantic-colors-danger, #dc2626); }\r\n\r\n    .content-section {\r\n      background: var(--structure-colors-bg-base, white);\r\n      border-radius: var(--radius-lg, 12px);\r\n      border: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n      box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .section-header {\r\n      padding: 20px var(--spacing-spacing-lg, 24px);\r\n      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    .table-container {\r\n      overflow-x: auto;\r\n    }\r\n\r\n    table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      font-size: 14px;\r\n    }\r\n    \r\n    th {\r\n      text-align: left;\r\n      padding: var(--spacing-spacing-rg, 12px) var(--spacing-spacing-lg, 24px);\r\n      background-color: var(--structure-colors-bg-container, #f9fafb);\r\n      color: var(--text-secondary, #6b7280);\r\n      font-weight: var(--typography-font-weight-medium, 500);\r\n      font-size: 12px;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.05em;\r\n      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n    }\r\n\r\n    td {\r\n      padding: var(--spacing-spacing-md, 16px) var(--spacing-spacing-lg, 24px);\r\n      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n      color: var(--text-secondary, #374151);\r\n    }\r\n\r\n    tr:last-child td {\r\n      border-bottom: none;\r\n    }\r\n\r\n    .user-cell {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--spacing-spacing-rg, 12px);\r\n    }\r\n\r\n    .pagination-container {\r\n      padding: var(--spacing-spacing-md, 16px) var(--spacing-spacing-lg, 24px);\r\n      border-top: 1px solid var(--structure-colors-border-color, #e5e7eb);\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    /* Extracted Inline Styles */\r\n    .logo-icon {\r\n      width: 32px;\r\n      height: 32px;\r\n      background: var(--brand-base, #2563eb);\r\n      border-radius: var(--radius-sm, 8px);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: white;\r\n    }\r\n\r\n    .sidebar-footer {\r\n      margin-top: auto;\r\n    }\r\n\r\n    .pro-plan-card {\r\n      background: var(--brand-light, #eff6ff);\r\n      padding: var(--spacing-spacing-md, 16px);\r\n      border-radius: var(--radius-sm, 8px);\r\n      border: 1px solid var(--brand-light-hover, #dbeafe);\r\n    }\r\n\r\n    .pro-plan-title {\r\n      font-size: 14px;\r\n      margin: 0 0 var(--spacing-spacing-sm, 8px) 0;\r\n      font-weight: var(--typography-font-weight-semibold, 600);\r\n      color: var(--brand-dark, #1e40af);\r\n    }\r\n\r\n    .pro-plan-text {\r\n      font-size: 12px;\r\n      margin: 0 0 var(--spacing-spacing-rg, 12px) 0;\r\n      color: #60a5fa; /* Keep specific color or find token */\r\n    }\r\n\r\n    .pro-plan-progress-track {\r\n      height: 6px;\r\n      background: #bfdbfe;\r\n      border-radius: 3px;\r\n      margin-bottom: var(--spacing-spacing-rg, 12px);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .pro-plan-progress-bar {\r\n      width: 80%;\r\n      height: 100%;\r\n      background: var(--brand-base, #2563eb);\r\n    }\r\n\r\n    .notification-btn {\r\n      position: relative;\r\n    }\r\n\r\n    .notification-icon {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .notification-badge {\r\n      position: absolute;\r\n      top: 8px;\r\n      right: 8px;\r\n      width: 8px;\r\n      height: 8px;\r\n      background: var(--semantic-colors-danger, #ef4444);\r\n      border-radius: 50%;\r\n      border: 2px solid white;\r\n    }\r\n\r\n    .user-info {\r\n      text-align: right;\r\n    }\r\n\r\n    .user-name {\r\n      font-size: 14px;\r\n      font-weight: var(--typography-font-weight-semibold, 600);\r\n      color: var(--text-primary, #111827);\r\n    }\r\n\r\n    .user-role {\r\n      font-size: 12px;\r\n      color: var(--text-secondary, #6b7280);\r\n    }\r\n\r\n    .page-title {\r\n      margin: 0;\r\n      font-size: 24px;\r\n      font-weight: var(--typography-font-weight-bold, 700);\r\n      color: var(--text-primary, #111827);\r\n    }\r\n\r\n    .page-subtitle {\r\n      margin: var(--spacing-spacing-xs, 4px) 0 0;\r\n      color: var(--text-secondary, #6b7280);\r\n    }\r\n\r\n    .page-actions {\r\n      display: flex;\r\n      gap: var(--spacing-spacing-rg, 12px);\r\n    }\r\n\r\n    .section-title {\r\n      margin: 0;\r\n      font-size: 18px;\r\n      font-weight: var(--typography-font-weight-semibold, 600);\r\n      color: var(--text-primary, #111827);\r\n    }\r\n\r\n    .section-actions {\r\n      display: flex;\r\n      gap: var(--spacing-spacing-rg, 12px);\r\n      align-items: center;\r\n    }\r\n\r\n    .search-input-wrapper {\r\n      width: 200px;\r\n    }\r\n\r\n    .table-user-name {\r\n      font-weight: var(--typography-font-weight-medium, 500);\r\n      color: var(--text-primary, #111827);\r\n    }\r\n\r\n    .table-user-email {\r\n      font-size: 12px;\r\n      color: var(--text-secondary, #6b7280);\r\n    }\r\n\r\n    .table-amount {\r\n      font-weight: var(--typography-font-weight-medium, 500);\r\n    }\r\n\r\n    /* Component Overrides / Styles */\r\n    \r\n    /* Dark Mode Overrides */\r\n    .dashboard-container.dark-mode {\r\n      --structure-colors-bg-container: #111827;\r\n      --structure-colors-bg-base: #1f2937;\r\n      --structure-colors-border-color: #374151;\r\n      --text-primary: #f9fafb;\r\n      --text-secondary: #9ca3af;\r\n      --brand-light: #1e3a8a;\r\n      --brand-light-hover: #1e40af;\r\n      --brand-dark: #bfdbfe;\r\n    }\r\n\r\n    .dashboard-container.dark-mode .logo-icon {\r\n      color: white;\r\n    }\r\n\r\n    .dashboard-container.dark-mode .nav-btn::part(base):hover {\r\n      background-color: #374151;\r\n      color: #f3f4f6;\r\n    }\r\n\r\n    .dashboard-container.dark-mode .nav-btn.active::part(base) {\r\n      background-color: #1e3a8a;\r\n      color: #60a5fa;\r\n    }\r\n\r\n    .dashboard-container.dark-mode .stat-card,\r\n    .dashboard-container.dark-mode .content-section {\r\n      background-color: #1f2937;\r\n      border-color: #374151;\r\n    }\r\n\r\n    .dashboard-container.dark-mode th {\r\n      background-color: #111827;\r\n      color: #9ca3af;\r\n      border-color: #374151;\r\n    }\r\n\r\n    .dashboard-container.dark-mode td {\r\n      border-color: #374151;\r\n      color: #d1d5db;\r\n    }\r\n\r\n    .dashboard-container.dark-mode .table-user-name {\r\n      color: #f9fafb;\r\n    }\r\n\r\n    .dashboard-container.dark-mode .table-user-email {\r\n      color: #9ca3af;\r\n    }\r\n\r\n    .dashboard-container.dark-mode voa-input::part(container) {\r\n      background-color: #1f2937;\r\n      border-color: #374151;\r\n      color: #f9fafb;\r\n    }\r\n\r\n    .dashboard-container.dark-mode voa-input::part(input) {\r\n      color: #f9fafb;\r\n    }\r\n\r\n    .dashboard-container.dark-mode voa-button[variant=\"secondary\"]::part(base) {\r\n      background-color: #1f2937;\r\n      border-color: #374151;\r\n      color: #e5e7eb;\r\n    }\r\n\r\n    .dashboard-container.dark-mode voa-button[variant=\"secondary\"]::part(base):hover {\r\n      background-color: #374151;\r\n    }\r\n\r\n    /* Sidebar Buttons - Specific to Dashboard Layout */\r\n    .nav-btn {\r\n      width: 100%;\r\n    }\r\n    .nav-btn::part(base) {\r\n      justify-content: flex-start;\r\n      color: var(--text-secondary, #4b5563);\r\n      padding: 10px var(--spacing-spacing-rg, 12px);\r\n      width: 100%;\r\n    }\r\n    .nav-btn::part(base):hover {\r\n      background-color: var(--structure-colors-bg-container, #f3f4f6);\r\n      color: var(--text-primary, #111827);\r\n    }\r\n    .nav-btn.active::part(base) {\r\n      background-color: var(--brand-light, #eff6ff);\r\n      color: var(--brand-base, #2563eb);\r\n    }\r\n\r\n    /* Tag Status Colors - Specific to Dashboard Content */\r\n    .tag-success::part(base) {\r\n      background-color: var(--semantic-colors-success-light, #dcfce7);\r\n      color: var(--semantic-colors-success-dark, #166534);\r\n      border-color: transparent;\r\n    }\r\n    .tag-warning::part(base) {\r\n      background-color: var(--semantic-colors-warning-light, #fef9c3);\r\n      color: var(--semantic-colors-warning-dark, #854d0e);\r\n      border-color: transparent;\r\n    }\r\n    .tag-error::part(base) {\r\n      background-color: var(--semantic-colors-danger-light, #fee2e2);\r\n      color: var(--semantic-colors-danger-dark, #991b1b);\r\n      border-color: transparent;\r\n    }\r\n    \r\n    /* Avatar Customization for Table */\r\n    .user-cell voa-avatar::part(base) {\r\n      font-size: 12px;\r\n    }\r\n  </style>\r\n\r\n  <div class=\"dashboard-container\">\r\n    <!-- Sidebar -->\r\n    <aside class=\"sidebar\">\r\n      <div class=\"logo\">\r\n        <div class=\"logo-icon\">\r\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"/></svg>\r\n        </div>\r\n        <span>VOA SaaS</span>\r\n      </div>\r\n      \r\n      <nav class=\"nav-menu\">\r\n        <voa-button class=\"nav-btn active\" variant=\"tonal\" full-width>\r\n          <span slot=\"icon-leading\"><img src=\"${dashboardIcon}\" alt=\"dashboard\" width=\"18\" height=\"18\" style=\"filter: grayscale(100%); opacity: 0.7;\" /></span> Dashboard\r\n        </voa-button>\r\n        <voa-button class=\"nav-btn\" variant=\"tonal\" full-width>\r\n          <span slot=\"icon-leading\"><img src=\"${analyticsIcon}\" alt=\"analytics\" width=\"18\" height=\"18\" style=\"filter: grayscale(100%); opacity: 0.7;\" /></span> Analytics\r\n        </voa-button>\r\n        <voa-button class=\"nav-btn\" variant=\"tonal\" full-width>\r\n          <span slot=\"icon-leading\"><img src=\"${customersIcon}\" alt=\"customers\" width=\"18\" height=\"18\" style=\"filter: grayscale(100%); opacity: 0.7;\" /></span> Customers\r\n        </voa-button>\r\n        <voa-button class=\"nav-btn\" variant=\"tonal\" full-width>\r\n          <span slot=\"icon-leading\"><img src=\"${productsIcon}\" alt=\"products\" width=\"18\" height=\"18\" style=\"filter: grayscale(100%); opacity: 0.7;\" /></span> Products\r\n        </voa-button>\r\n        <voa-button class=\"nav-btn\" variant=\"tonal\" full-width>\r\n          <span slot=\"icon-leading\"><img src=\"${settingsIcon}\" alt=\"settings\" width=\"18\" height=\"18\" style=\"filter: grayscale(100%); opacity: 0.7;\" /></span> Settings\r\n        </voa-button>\r\n      </nav>\r\n\r\n      <div class=\"sidebar-footer\">\r\n        <div style=\"margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between;\">\r\n          <span style=\"font-size: 14px; font-weight: 500; color: var(--text-secondary, #6b7280);\">Dark Mode</span>\r\n          <voa-switch id=\"theme-toggle\"></voa-switch>\r\n        </div>\r\n        <div class=\"pro-plan-card\">\r\n          <p class=\"pro-plan-title\">Pro Plan</p>\r\n          <voa-tooltip \r\n            text=\"You have used 800GB of your 1TB storage limit\" \r\n            position=\"top\"\r\n            theme=\"default\"\r\n          >\r\n            <p class=\"pro-plan-text\" style=\"cursor: help;\">80% of storage used</p>\r\n          </voa-tooltip>\r\n          <div class=\"pro-plan-progress-track\">\r\n            <div class=\"pro-plan-progress-bar\"></div>\r\n          </div>\r\n          <voa-button size=\"sm\" variant=\"secondary\" full-width>Upgrade</voa-button>\r\n        </div>\r\n      </div>\r\n    </aside>\r\n\r\n    <!-- Header -->\r\n    <header class=\"header\">\r\n      <div class=\"header-left\">\r\n        <voa-input placeholder=\"Search anything...\" icon-leading=\"search\"></voa-input>\r\n      </div>\r\n      <div class=\"header-right\">\r\n        <voa-button variant=\"link\" size=\"sm\" class=\"notification-btn\">\r\n          <span class=\"notification-icon\"><img src=\"${bellIcon}\" alt=\"notifications\" width=\"20\" height=\"20\" style=\"filter: grayscale(100%); opacity: 0.7;\" /></span>\r\n          <span class=\"notification-badge\"></span>\r\n        </voa-button>\r\n        \r\n        <div class=\"user-profile\">\r\n          <div class=\"user-info\">\r\n            <div class=\"user-name\">Jane Doe</div>\r\n            <div class=\"user-role\">Administrator</div>\r\n          </div>\r\n          <voa-avatar size=\"md\" initials=\"JD\"></voa-avatar>\r\n        </div>\r\n      </div>\r\n    </header>\r\n\r\n    <!-- Main Content -->\r\n    <main class=\"main-content\">\r\n      <div style=\"margin-bottom: 24px;\">\r\n        <voa-breadcrumbs>\r\n          <voa-breadcrumbs-item href=\"#\">Home</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"#\">Dashboard</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Overview</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <div class=\"page-header\">\r\n        <div>\r\n          <h1 class=\"page-title\">Dashboard Overview</h1>\r\n          <p class=\"page-subtitle\">Welcome back! Here's what's happening with your store today.</p>\r\n        </div>\r\n        <div class=\"page-actions\">\r\n          <voa-button variant=\"secondary\">\r\n            <span slot=\"icon-leading\"><img src=\"${exportIcon}\" alt=\"export\" width=\"18\" height=\"18\" style=\"filter: grayscale(100%); opacity: 0.7;\" /></span> Export\r\n          </voa-button>\r\n          <voa-button variant=\"primary\">\r\n            <span slot=\"icon-leading\">➕</span> New Report\r\n          </voa-button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Stats -->\r\n      <div class=\"stats-grid\">\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-title\">Total Revenue</div>\r\n          <div class=\"stat-value\">$54,239</div>\r\n          <div class=\"stat-change positive\">\r\n            <span>↑ 12%</span>\r\n            <span style=\"color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;\">from last month</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-title\">Active Users</div>\r\n          <div class=\"stat-value\">1,234</div>\r\n          <div class=\"stat-change positive\">\r\n            <span>↑ 5%</span>\r\n            <span style=\"color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;\">from last month</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-title\">Bounce Rate</div>\r\n          <div class=\"stat-value\">42.3%</div>\r\n          <div class=\"stat-change negative\">\r\n            <span>↓ 2%</span>\r\n            <span style=\"color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;\">from last month</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-title\">New Signups</div>\r\n          <div class=\"stat-value\">342</div>\r\n          <div class=\"stat-change positive\">\r\n            <span>↑ 18%</span>\r\n            <span style=\"color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;\">from last month</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Recent Orders Table -->\r\n      <div class=\"content-section\">\r\n        <div class=\"section-header\">\r\n          <h2 class=\"section-title\">Recent Transactions</h2>\r\n          <div class=\"section-actions\">\r\n             <div class=\"search-input-wrapper\">\r\n               <voa-input placeholder=\"Filter transactions...\" size=\"sm\"></voa-input>\r\n             </div>\r\n             <voa-button variant=\"secondary\" size=\"sm\">Filter</voa-button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"table-container\">\r\n          <table>\r\n            <thead>\r\n              <tr>\r\n                <th>Customer</th>\r\n                <th>Date</th>\r\n                <th>Amount</th>\r\n                <th>Status</th>\r\n                <th>Action</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr>\r\n                <td>\r\n                  <div class=\"user-cell\">\r\n                    <voa-avatar size=\"sm\" initials=\"JD\" style=\"--voa-avatar-bg: #dbeafe; --voa-avatar-color: #1e40af;\"></voa-avatar>\r\n                    <div>\r\n                      <div class=\"table-user-name\">John Doe</div>\r\n                      <div class=\"table-user-email\">john@example.com</div>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n                <td>Oct 24, 2023</td>\r\n                <td class=\"table-amount\">$120.00</td>\r\n                <td><voa-tag class=\"tag-success\" label=\"Completed\" size=\"sm\"></voa-tag></td>\r\n                <td><voa-button variant=\"ghost\" size=\"sm\">View</voa-button></td>\r\n              </tr>\r\n              <tr>\r\n                <td>\r\n                  <div class=\"user-cell\">\r\n                    <voa-avatar size=\"sm\" initials=\"AS\" style=\"--voa-avatar-bg: #fce7f3; --voa-avatar-color: #9d174d;\"></voa-avatar>\r\n                    <div>\r\n                      <div class=\"table-user-name\">Alice Smith</div>\r\n                      <div class=\"table-user-email\">alice@example.com</div>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n                <td>Oct 24, 2023</td>\r\n                <td class=\"table-amount\">$85.50</td>\r\n                <td><voa-tag class=\"tag-warning\" label=\"Pending\" size=\"sm\"></voa-tag></td>\r\n                <td><voa-button variant=\"ghost\" size=\"sm\">View</voa-button></td>\r\n              </tr>\r\n              <tr>\r\n                <td>\r\n                  <div class=\"user-cell\">\r\n                    <voa-avatar size=\"sm\" initials=\"RJ\" style=\"--voa-avatar-bg: #e0e7ff; --voa-avatar-color: #4338ca;\"></voa-avatar>\r\n                    <div>\r\n                      <div class=\"table-user-name\">Robert Johnson</div>\r\n                      <div class=\"table-user-email\">robert@example.com</div>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n                <td>Oct 23, 2023</td>\r\n                <td class=\"table-amount\">$240.00</td>\r\n                <td><voa-tag class=\"tag-success\" label=\"Completed\" size=\"sm\"></voa-tag></td>\r\n                <td><voa-button variant=\"ghost\" size=\"sm\">View</voa-button></td>\r\n              </tr>\r\n               <tr>\r\n                <td>\r\n                  <div class=\"user-cell\">\r\n                    <voa-avatar size=\"sm\" initials=\"MG\" style=\"--voa-avatar-bg: #ffedd5; --voa-avatar-color: #9a3412;\"></voa-avatar>\r\n                    <div>\r\n                      <div class=\"table-user-name\">Maria Garcia</div>\r\n                      <div class=\"table-user-email\">maria@example.com</div>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n                <td>Oct 23, 2023</td>\r\n                <td class=\"table-amount\">$45.00</td>\r\n                <td><voa-tag class=\"tag-error\" label=\"Failed\" size=\"sm\"></voa-tag></td>\r\n                <td><voa-button variant=\"ghost\" size=\"sm\">View</voa-button></td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n\r\n        <div class=\"pagination-container\">\r\n          <voa-pagination total=\"10\" current=\"1\"></voa-pagination>\r\n        </div>\r\n      </div>\r\n    </main>\r\n  </div>\r\n`;\r\n\r\nexport const Dashboard = () => {\r\n  setTimeout(() => {\r\n    const toggle = document.getElementById('theme-toggle');\r\n    const container = document.querySelector('.dashboard-container');\r\n    if (toggle && container) {\r\n      toggle.addEventListener('dsChange', (e: any) => {\r\n        if (e.detail) {\r\n          container.classList.add('dark-mode');\r\n        } else {\r\n          container.classList.remove('dark-mode');\r\n        }\r\n      });\r\n    }\r\n  }, 0);\r\n  return Template();\r\n};\r\n"]}

package/dist/collection/components/Theme/ThemeProvider.js

@@ -0,0 +1,71 @@
+import { brandingTokens } from "../../token/branding";
+import { generateCSSVariables } from "./generate-css-variables";
+class ThemeProvider {
+    constructor() {
+        this.observers = [];
+        this.theme = 'light';
+        this.brand = 'Devops';
+        this.styleSheet = null;
+        this.initializeStyleSheet();
+        this.updateTheme();
+    }
+    initializeStyleSheet() {
+        this.styleSheet = document.createElement('style');
+        this.styleSheet.id = 'ds-theme-variables';
+        document.head.appendChild(this.styleSheet);
+    }
+    static getInstance() {
+        if (!ThemeProvider.instance) {
+            ThemeProvider.instance = new ThemeProvider();
+        }
+        return ThemeProvider.instance;
+    }
+    setTheme(theme) {
+        this.theme = theme;
+        this.updateTheme();
+        this.notifyObservers();
+    }
+    setBrand(brand) {
+        this.brand = brand;
+        this.updateTheme();
+        this.notifyObservers();
+    }
+    getTheme() {
+        return this.theme;
+    }
+    getBrand() {
+        return this.brand;
+    }
+    getCurrentTokens() {
+        return brandingTokens[this.brand];
+    }
+    updateTheme() {
+        if (!this.styleSheet) {
+            this.initializeStyleSheet();
+        }
+        console.log('updateTheme', this.theme, this.brand);
+        const tokens = this.getCurrentTokens();
+        const cssVariables = generateCSSVariables(tokens, this.theme);
+        if (this.styleSheet) {
+            this.styleSheet.textContent = `:root {\n${cssVariables}}`;
+        }
+        document.documentElement.setAttribute('data-theme', this.theme);
+        document.documentElement.setAttribute('data-brand', this.brand.toLowerCase());
+    }
+    registerObserver(callback) {
+        this.observers.push(callback);
+    }
+    unregisterObserver(callback) {
+        this.observers = this.observers.filter(cb => cb !== callback);
+    }
+    notifyObservers() {
+        this.observers.forEach(callback => callback());
+    }
+    destroy() {
+        var _a;
+        (_a = this.styleSheet) === null || _a === void 0 ? void 0 : _a.remove();
+        this.styleSheet = null;
+    }
+}
+export const themeProvider = ThemeProvider.getInstance();
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/collection/components/Theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/components/Theme/ThemeProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { brandingTokens } from \"../../token/branding\";\r\nimport { Theme } from \"../../token/branding/type\";\r\nimport { generateCSSVariables } from \"./generate-css-variables\";\r\n\r\n\r\ntype ThemeMode = 'light' | 'dark';\r\ntype Brand = 'Devops' | 'Coi' | 'Godrive';\r\ntype ThemeChangeCallback = () => void;\r\n\r\nclass ThemeProvider {\r\n  private static instance: ThemeProvider;\r\n  private observers: ThemeChangeCallback[] = [];\r\n  private theme: ThemeMode = 'light';\r\n  private brand: Brand = 'Devops';\r\n  private styleSheet: HTMLStyleElement | null = null;\r\n\r\n  private constructor() {\r\n    this.initializeStyleSheet();\r\n    this.updateTheme();\r\n  }\r\n\r\n  private initializeStyleSheet() {\r\n    this.styleSheet = document.createElement('style');\r\n    this.styleSheet.id = 'ds-theme-variables';\r\n    document.head.appendChild(this.styleSheet);\r\n  }\r\n\r\n  public static getInstance(): ThemeProvider {\r\n    if (!ThemeProvider.instance) {\r\n      ThemeProvider.instance = new ThemeProvider();\r\n    }\r\n    return ThemeProvider.instance;\r\n  }\r\n\r\n  public setTheme(theme: ThemeMode) {\r\n    this.theme = theme;\r\n    this.updateTheme();\r\n    this.notifyObservers();\r\n  }\r\n\r\n  public setBrand(brand: Brand) {\r\n    this.brand = brand;\r\n    this.updateTheme();\r\n    this.notifyObservers();\r\n  }\r\n\r\n  public getTheme(): ThemeMode {\r\n    return this.theme;\r\n  }\r\n\r\n  public getBrand(): Brand {\r\n    return this.brand;\r\n  }\r\n\r\n  public getCurrentTokens(): Theme {\r\n    return brandingTokens[this.brand];\r\n  }\r\n\r\n  private updateTheme() {\r\n    if (!this.styleSheet) {\r\n      this.initializeStyleSheet();\r\n    }\r\n\r\n    console.log('updateTheme', this.theme, this.brand);\r\n\r\n    const tokens = this.getCurrentTokens();\r\n    const cssVariables = generateCSSVariables(tokens, this.theme);\r\n    \r\n    if (this.styleSheet) {\r\n      this.styleSheet.textContent = `:root {\\n${cssVariables}}`;\r\n    }\r\n\r\n    document.documentElement.setAttribute('data-theme', this.theme);\r\n    document.documentElement.setAttribute('data-brand', this.brand.toLowerCase());\r\n  }\r\n\r\n  public registerObserver(callback: ThemeChangeCallback) {\r\n    this.observers.push(callback);\r\n  }\r\n\r\n  public unregisterObserver(callback: ThemeChangeCallback) {\r\n    this.observers = this.observers.filter(cb => cb !== callback);\r\n  }\r\n\r\n  private notifyObservers() {\r\n    this.observers.forEach(callback => callback());\r\n  }\r\n\r\n  public destroy() {\r\n    this.styleSheet?.remove();\r\n    this.styleSheet = null;\r\n  }\r\n}\r\n\r\nexport const themeProvider = ThemeProvider.getInstance();\r\n"]}

package/dist/collection/components/Theme/generate-css-variables.js

@@ -0,0 +1,32 @@
+export function generateCSSVariables(tokens, theme) {
+    let cssVariables = '';
+    // Brand colors
+    const brandColors = tokens.colors[theme];
+    Object.entries(brandColors).forEach(([key, value]) => {
+        cssVariables += `--${key}: ${value};\n`;
+    });
+    // Base colors
+    Object.entries(tokens.base.colors).forEach(([group, values]) => {
+        Object.entries(values).forEach(([key, value]) => {
+            cssVariables += `--${group}-${key}: ${value};\n`;
+        });
+    });
+    // Spacing
+    Object.entries(tokens.base.spacing).forEach(([key, value]) => {
+        cssVariables += `--spacing-${key}: ${value};\n`;
+    });
+    // Border radius
+    Object.entries(tokens.base.borderRadius).forEach(([key, value]) => {
+        cssVariables += `--radius-${key}: ${value};\n`;
+    });
+    // Media queries
+    Object.entries(tokens.base.mediaQueries).forEach(([key, value]) => {
+        cssVariables += `--media-${key}: ${value};\n`;
+    });
+    // Typography
+    Object.entries(tokens.type).forEach(([key, value]) => {
+        cssVariables += `--font-${key}: ${value};\n`;
+    });
+    return cssVariables;
+}
+//# sourceMappingURL=generate-css-variables.js.map

package/dist/collection/components/Theme/generate-css-variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-css-variables.js","sourceRoot":"","sources":["../../../src/components/Theme/generate-css-variables.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,oBAAoB,CAAC,MAAa,EAAE,KAAuB;IACzE,IAAI,YAAY,GAAG,EAAE,CAAC;IAEtB,eAAe;IACf,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,YAAY,IAAI,KAAK,GAAG,KAAK,KAAK,KAAK,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,cAAc;IACd,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE;QAC7D,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAC9C,YAAY,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,UAAU;IACV,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC3D,YAAY,IAAI,aAAa,GAAG,KAAK,KAAK,KAAK,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,gBAAgB;IAChB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAChE,YAAY,IAAI,YAAY,GAAG,KAAK,KAAK,KAAK,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,gBAAgB;IAChB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAChE,YAAY,IAAI,WAAW,GAAG,KAAK,KAAK,KAAK,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,aAAa;IACb,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,YAAY,IAAI,UAAU,GAAG,KAAK,KAAK,KAAK,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { Theme } from \"../../token/branding/type\";\r\n\r\nexport function generateCSSVariables(tokens: Theme, theme: 'light' | 'dark'): string {\r\n  let cssVariables = '';\r\n\r\n  // Brand colors\r\n  const brandColors = tokens.colors[theme];\r\n  Object.entries(brandColors).forEach(([key, value]) => {\r\n    cssVariables += `--${key}: ${value};\\n`;\r\n  });\r\n\r\n  // Base colors\r\n  Object.entries(tokens.base.colors).forEach(([group, values]) => {\r\n    Object.entries(values).forEach(([key, value]) => {\r\n      cssVariables += `--${group}-${key}: ${value};\\n`;\r\n    });\r\n  });\r\n\r\n  // Spacing\r\n  Object.entries(tokens.base.spacing).forEach(([key, value]) => {\r\n    cssVariables += `--spacing-${key}: ${value};\\n`;\r\n  });\r\n\r\n  // Border radius\r\n  Object.entries(tokens.base.borderRadius).forEach(([key, value]) => {\r\n    cssVariables += `--radius-${key}: ${value};\\n`;\r\n  });\r\n\r\n  // Media queries\r\n  Object.entries(tokens.base.mediaQueries).forEach(([key, value]) => {\r\n    cssVariables += `--media-${key}: ${value};\\n`;\r\n  });\r\n\r\n  // Typography\r\n  Object.entries(tokens.type).forEach(([key, value]) => {\r\n    cssVariables += `--font-${key}: ${value};\\n`;\r\n  });\r\n\r\n  return cssVariables;\r\n}"]}

package/dist/collection/components/voa-accordion/voa-accordion.css

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.voa-accordion {
+  display: flex;
+  flex-direction: column;
+}
+
+.voa-accordion__trigger {
+  appearance: none;
+  background: transparent;
+  border: none;
+  width: 100%;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.voa-accordion__header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.voa-accordion__title {
+  flex-grow: 1;
+}
+
+.voa-accordion__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Removed fixed width/height. Let the SVG or the Part define it. */
+  flex-shrink: 0;
+}
+
+/* ============================================
+   ANIMATION ARCHITECTURE
+   ============================================
+   
+   This component uses CSS Grid to enable smooth height animations.
+   
+   STRUCTURAL (Internal CSS):
+   - Sets up grid context: display: grid; grid-template-rows: 1fr;
+   - Provides .voa-accordion__content-inner wrapper for height calculation
+   
+   ANIMATION (External CSS):
+   - Consumer controls transition timing via ::part(content)
+   - Consumer defines closed state: grid-template-rows: 0fr;
+   - Consumer handles prefers-reduced-motion
+   
+   Why? Performance, Accessibility, and Brand Flexibility.
+   ============================================ */
+
+.voa-accordion__content {
+  /* STRUCTURAL PREP FOR ANIMATION */
+  display: grid;
+  
+  /* Default state is open structurally to allow the 'fr' transition to work.
+     We control the 'closed' state via the grid-template-rows property. */
+  grid-template-rows: 1fr;
+  
+  /* IMPORTANT: We do NOT use display: none here.
+     If we did, the external CSS couldn't animate the opening. */
+}
+
+.voa-accordion__content-inner {
+  /* This inner wrapper is required for the grid trick to work.
+     The parent animates the grid track, this container calculates the height. */
+  overflow: hidden;
+  min-height: 0;
+}

package/dist/collection/components/voa-accordion/voa-accordion.js

@@ -0,0 +1,188 @@
+import { h, Host } from "@stencil/core";
+// Helper for unique IDs
+let accordionIds = 0;
+export class VoaAccordion {
+    constructor() {
+        this.componentId = `voa-accordion-${accordionIds++}`;
+        /**
+         * If true, the accordion is expanded.
+         */
+        this.open = false;
+        /**
+         * Size variant.
+         */
+        this.size = 'md';
+        /**
+         * Shows the top divider.
+         */
+        this.divider = true;
+        // Internal state ensures the component works even if the parent doesn't update the prop immediately
+        this.isExpanded = false;
+        this.handleToggle = () => {
+            // Invert internal state immediately for UI responsiveness
+            this.isExpanded = !this.isExpanded;
+            // Update the open prop to reflect in the DOM attribute (for CSS selectors)
+            this.open = this.isExpanded;
+            // Tell the world what happened
+            this.voaToggle.emit(this.isExpanded);
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.handleToggle();
+            }
+        };
+    }
+    watchOpenHandler(newValue) {
+        this.isExpanded = newValue;
+    }
+    componentWillLoad() {
+        this.isExpanded = this.open;
+    }
+    async setFocus() {
+        var _a;
+        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+        button === null || button === void 0 ? void 0 : button.focus();
+    }
+    render() {
+        const headerId = `${this.componentId}-header`;
+        const contentId = `${this.componentId}-content`;
+        return (h(Host, { key: '9e50265508e1515149432b8d619a780735bf88d2' }, h("div", { key: 'b6ce00c6185e8fc23e3263eb926cf6f40696a3a4', part: "base", class: {
+                'voa-accordion': true,
+                [`voa-accordion--${this.size}`]: true,
+                'voa-accordion--open': this.isExpanded,
+                'voa-accordion--closed': !this.isExpanded,
+                'voa-accordion--divider': this.divider,
+            } }, h("div", { key: '57ed4fa16a27073d90106ffd92c5c1192ad14327', class: "voa-accordion__header-wrapper" }, h("button", { key: '08ed553d1436df26f636b1b2756c00f4a2911a25', part: "header", id: headerId, class: "voa-accordion__trigger", onClick: this.handleToggle, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": contentId }, h("div", { key: 'a5af08c83ebad9df32032d7dac6ff99234a08069', part: "header-content", class: "voa-accordion__header-content" }, h("span", { key: 'c4347d7274f9d8a03f55074dd2dee707991fa77a', part: "title", class: "voa-accordion__title" }, h("slot", { key: '5bd0e7b181595ad554b4fa477e442ad77f88d24e', name: "header" }, "Title")), h("span", { key: '37957ebe29ddde5e45c6f40e030ac2c10d75b791', part: "icon", class: "voa-accordion__icon" }, h("slot", { key: '99258f2cd2f0c3e8e75521757499007054c6264f', name: "icon" }, h("svg", { key: 'ae58b580cadc0d25042fd3d14938f6f1c47711e2', width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: {
+                transform: this.isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
+            } }, h("path", { key: '7be1b4f5f63665e22d5e0adeabcc156d0dc8fbb0', d: "M7 10L12 15L17 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))), h("div", { key: 'e4602e8b9d42936dd0d69f4c56601197ac5182ab', part: "content", id: contentId, class: "voa-accordion__content", role: "region", "aria-labelledby": headerId, "aria-hidden": !this.isExpanded ? 'true' : 'false' }, h("div", { key: 'fe6de94d8c6394e9ff3bac0476bb9a43c4751d66', class: "voa-accordion__content-inner" }, h("slot", { key: '20f6ab4c9ea0656c9d8ed81c1335694507765634' }))))));
+    }
+    static get is() { return "voa-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the accordion is expanded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the top divider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "divider",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "voaToggle",
+                "name": "voaToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user interacts with the header.\r\nPayload: the requested new state (boolean)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "watchOpenHandler"
+            }];
+    }
+}
+//# sourceMappingURL=voa-accordion.js.map

package/dist/collection/components/voa-accordion/voa-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-accordion.js","sourceRoot":"","sources":["../../../src/components/voa-accordion/voa-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Method, Element, Host, Watch } from '@stencil/core';\r\n\r\n// Helper for unique IDs\r\nlet accordionIds = 0;\r\n\r\n@Component({\r\n  tag: 'voa-accordion',\r\n  styleUrl: 'voa-accordion.css',\r\n  shadow: true,\r\n})\r\nexport class VoaAccordion {\r\n  @Element() host: HTMLVoaAccordionElement;\r\n\r\n  private componentId = `voa-accordion-${accordionIds++}`;\r\n\r\n  /**\r\n   * If true, the accordion is expanded.\r\n   */\r\n  @Prop({ reflect: true }) open: boolean = false;\r\n\r\n  /**\r\n   * Size variant.\r\n   */\r\n  @Prop({ reflect: true }) size: 'md' | 'lg' = 'md';\r\n\r\n  /**\r\n   * Shows the top divider.\r\n   */\r\n  @Prop({ reflect: true }) divider: boolean = true;\r\n\r\n  /**\r\n   * Emitted when the user interacts with the header.\r\n   * Payload: the requested new state (boolean).\r\n   */\r\n  @Event() voaToggle: EventEmitter<boolean>;\r\n\r\n  // Internal state ensures the component works even if the parent doesn't update the prop immediately\r\n  @State() isExpanded: boolean = false;\r\n\r\n  @Watch('open')\r\n  watchOpenHandler(newValue: boolean) {\r\n    this.isExpanded = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isExpanded = this.open;\r\n  }\r\n\r\n  private handleToggle = () => {\r\n    // Invert internal state immediately for UI responsiveness\r\n    this.isExpanded = !this.isExpanded;\r\n    // Update the open prop to reflect in the DOM attribute (for CSS selectors)\r\n    this.open = this.isExpanded;\r\n    // Tell the world what happened\r\n    this.voaToggle.emit(this.isExpanded);\r\n  };\r\n\r\n  private handleKeyDown = (ev: KeyboardEvent) => {\r\n    if (ev.key === 'Enter' || ev.key === ' ') {\r\n      ev.preventDefault();\r\n      this.handleToggle();\r\n    }\r\n  };\r\n\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const button = this.host.shadowRoot?.querySelector('button');\r\n    button?.focus();\r\n  }\r\n\r\n  render() {\r\n    const headerId = `${this.componentId}-header`;\r\n    const contentId = `${this.componentId}-content`;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-accordion': true,\r\n            [`voa-accordion--${this.size}`]: true,\r\n            'voa-accordion--open': this.isExpanded,\r\n            'voa-accordion--closed': !this.isExpanded,\r\n            'voa-accordion--divider': this.divider,\r\n          }}\r\n        >\r\n          {/* Header wraps a button for semantics */}\r\n          <div class=\"voa-accordion__header-wrapper\">\r\n            <button\r\n              part=\"header\"\r\n              id={headerId}\r\n              class=\"voa-accordion__trigger\"\r\n              onClick={this.handleToggle}\r\n              onKeyDown={this.handleKeyDown}\r\n              aria-expanded={this.isExpanded ? 'true' : 'false'}\r\n              aria-controls={contentId}\r\n            >\r\n              <div part=\"header-content\" class=\"voa-accordion__header-content\">\r\n                <span part=\"title\" class=\"voa-accordion__title\">\r\n                  <slot name=\"header\">Title</slot>\r\n                </span>\r\n\r\n                {/* ICON SLOT: Allows external replacement */}\r\n                <span part=\"icon\" class=\"voa-accordion__icon\">\r\n                  <slot name=\"icon\">\r\n                    {/* Default Fallback Icon (Chevron) */}\r\n                    <svg\r\n                      width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      style={{\r\n                        transform: this.isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'\r\n                      }}\r\n                    >\r\n                      <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </slot>\r\n                </span>\r\n              </div>\r\n            </button>\r\n          </div>\r\n\r\n          {/* CONTENT: Kept in DOM for animation support via CSS Grid Trick */}\r\n          <div\r\n            part=\"content\"\r\n            id={contentId}\r\n            class=\"voa-accordion__content\"\r\n            role=\"region\"\r\n            aria-labelledby={headerId}\r\n            aria-hidden={!this.isExpanded ? 'true' : 'false'}\r\n          >\r\n            <div class=\"voa-accordion__content-inner\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"]}