@tessera-ui/core 0.4.0 → 0.5.0

package/dist/collection/components/modal/modal.stories.js

@@ -1,233 +0,0 @@
-// Hand-written stories for ts-modal
-export default {
-    title: 'Components/Modal',
-    tags: ['autodocs'],
-    argTypes: {
-        open: { control: 'boolean', description: 'Whether the modal is open.' },
-        size: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
-            description: 'The modal\'s width size preset.',
-        },
-        label: { control: 'text', description: 'Label for accessibility (used as aria-label).' },
-        closeOnOverlay: { control: 'boolean', description: 'Whether clicking the overlay closes the modal.' },
-        closeOnEscape: { control: 'boolean', description: 'Whether pressing Escape closes the modal.' },
-        showClose: { control: 'boolean', description: 'Whether to show the close button.' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.open)
-        attrs.push('open');
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    if (args.label !== undefined && args.label !== null && args.label !== '')
-        attrs.push(`label="${args.label}"`);
-    if (args.closeOnOverlay === false)
-        attrs.push('close-on-overlay="false"');
-    if (args.closeOnEscape === false)
-        attrs.push('close-on-escape="false"');
-    if (args.showClose === false)
-        attrs.push('show-close="false"');
-    return `
-    <ts-button variant="primary" onclick="this.nextElementSibling.open = true">Open Modal</ts-button>
-    <ts-modal ${attrs.join(' ')}>
-      <span slot="header"><h3 style="margin: 0;">Edit Profile</h3></span>
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <ts-input label="Display Name" value="Sarah Chen" placeholder="Enter your name"></ts-input>
-        <ts-input label="Email" type="email" value="sarah@example.com" placeholder="Enter your email"></ts-input>
-      </div>
-      <span slot="footer">
-        <div style="display: flex; justify-content: flex-end; gap: 12px;">
-          <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
-          <ts-button variant="primary">Save Changes</ts-button>
-        </div>
-      </span>
-    </ts-modal>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        open: false,
-        size: 'md',
-        label: 'Edit Profile',
-        closeOnOverlay: true,
-        closeOnEscape: true,
-        showClose: true,
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-xs').open = true">Extra Small</ts-button>
-    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-sm').open = true">Small</ts-button>
-    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-md').open = true">Medium</ts-button>
-    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-lg').open = true">Large</ts-button>
-    <ts-button size="sm" appearance="outline" variant="neutral" onclick="document.getElementById('modal-xl').open = true">Extra Large</ts-button>
-  </div>
-
-  <ts-modal id="modal-xs" size="xs" label="Extra Small Modal">
-    <span slot="header"><h3 style="margin: 0;">Quick Confirm</h3></span>
-    <p style="margin: 0;">Are you sure?</p>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end; gap: 8px;">
-        <ts-button size="sm" appearance="outline" variant="neutral">No</ts-button>
-        <ts-button size="sm" variant="primary">Yes</ts-button>
-      </div>
-    </span>
-  </ts-modal>
-
-  <ts-modal id="modal-sm" size="sm" label="Small Modal">
-    <span slot="header"><h3 style="margin: 0;">Rename File</h3></span>
-    <ts-input label="File Name" value="quarterly-report.pdf"></ts-input>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end; gap: 8px;">
-        <ts-button size="sm" appearance="outline" variant="neutral">Cancel</ts-button>
-        <ts-button size="sm" variant="primary">Rename</ts-button>
-      </div>
-    </span>
-  </ts-modal>
-
-  <ts-modal id="modal-md" size="md" label="Medium Modal">
-    <span slot="header"><h3 style="margin: 0;">Create New Project</h3></span>
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <ts-input label="Project Name" placeholder="My Awesome Project"></ts-input>
-      <ts-input label="Description" placeholder="A brief description of the project"></ts-input>
-    </div>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end; gap: 8px;">
-        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
-        <ts-button variant="primary">Create Project</ts-button>
-      </div>
-    </span>
-  </ts-modal>
-
-  <ts-modal id="modal-lg" size="lg" label="Large Modal">
-    <span slot="header"><h3 style="margin: 0;">User Preferences</h3></span>
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <ts-input label="Display Name" placeholder="Your name"></ts-input>
-      <ts-input label="Email" type="email" placeholder="you@example.com"></ts-input>
-      <ts-input label="Organization" placeholder="Company name"></ts-input>
-      <div style="display: flex; flex-direction: column; gap: 12px;">
-        <ts-toggle>Enable email notifications</ts-toggle>
-        <ts-toggle checked>Enable dark mode</ts-toggle>
-      </div>
-    </div>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end; gap: 8px;">
-        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
-        <ts-button variant="primary">Save Preferences</ts-button>
-      </div>
-    </span>
-  </ts-modal>
-
-  <ts-modal id="modal-xl" size="xl" label="Extra Large Modal">
-    <span slot="header"><h3 style="margin: 0;">Dashboard Overview</h3></span>
-    <div style="display: flex; gap: 16px; flex-wrap: wrap;">
-      <ts-card bordered style="flex: 1; min-width: 200px;">
-        <div style="text-align: center;">
-          <div style="font-size: 32px; font-weight: 700; color: var(--ts-color-primary-600);">2,847</div>
-          <div style="color: var(--ts-color-text-secondary);">Total Users</div>
-        </div>
-      </ts-card>
-      <ts-card bordered style="flex: 1; min-width: 200px;">
-        <div style="text-align: center;">
-          <div style="font-size: 32px; font-weight: 700; color: var(--ts-color-success-600);">$12,459</div>
-          <div style="color: var(--ts-color-text-secondary);">Revenue</div>
-        </div>
-      </ts-card>
-      <ts-card bordered style="flex: 1; min-width: 200px;">
-        <div style="text-align: center;">
-          <div style="font-size: 32px; font-weight: 700; color: var(--ts-color-warning-600);">94%</div>
-          <div style="color: var(--ts-color-text-secondary);">Uptime</div>
-        </div>
-      </ts-card>
-    </div>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end;">
-        <ts-button appearance="outline" variant="neutral">Close</ts-button>
-      </div>
-    </span>
-  </ts-modal>
-`;
-export const States = () => `
-  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-    <ts-button variant="danger" onclick="document.getElementById('modal-confirm-delete').open = true">
-      <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
-      Delete Account
-    </ts-button>
-    <ts-button variant="primary" onclick="document.getElementById('modal-no-close').open = true">
-      Non-dismissible Modal
-    </ts-button>
-  </div>
-
-  <ts-modal id="modal-confirm-delete" size="sm" label="Confirm Deletion">
-    <span slot="header"><h3 style="margin: 0; color: var(--ts-color-danger-600);">Delete Account</h3></span>
-    <div>
-      <ts-alert variant="danger">This action cannot be undone. All your data will be permanently removed.</ts-alert>
-      <div style="margin-top: 16px;">
-        <ts-input label="Type DELETE to confirm" placeholder="DELETE" error=""></ts-input>
-      </div>
-    </div>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end; gap: 8px;">
-        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
-        <ts-button variant="danger">
-          <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
-          Delete Forever
-        </ts-button>
-      </div>
-    </span>
-  </ts-modal>
-
-  <ts-modal id="modal-no-close" size="sm" label="Terms and Conditions" close-on-overlay="false" close-on-escape="false" show-close="false">
-    <span slot="header"><h3 style="margin: 0;">Accept Terms</h3></span>
-    <p style="margin: 0;">You must accept the terms and conditions to continue using this service. Please review our updated privacy policy.</p>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end; gap: 8px;">
-        <ts-button appearance="outline" variant="neutral" onclick="document.getElementById('modal-no-close').open = false">Decline</ts-button>
-        <ts-button variant="primary" onclick="document.getElementById('modal-no-close').open = false">Accept</ts-button>
-      </div>
-    </span>
-  </ts-modal>
-`;
-export const Composition = () => `
-  <ts-button variant="primary" onclick="document.getElementById('modal-compose').open = true">
-    <ts-icon slot="prefix" name="plus" size="sm"></ts-icon>
-    Add Team Member
-  </ts-button>
-
-  <ts-modal id="modal-compose" size="md" label="Add Team Member">
-    <span slot="header">
-      <div style="display: flex; align-items: center; gap: 8px;">
-        <ts-icon name="user-plus" size="sm"></ts-icon>
-        <h3 style="margin: 0;">Add Team Member</h3>
-      </div>
-    </span>
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <div style="display: flex; gap: 12px;">
-        <ts-input label="First Name" placeholder="Jane" style="flex: 1;"></ts-input>
-        <ts-input label="Last Name" placeholder="Doe" style="flex: 1;"></ts-input>
-      </div>
-      <ts-input label="Email Address" type="email" placeholder="jane@company.com" required>
-        <ts-icon slot="prefix" name="mail" size="sm"></ts-icon>
-      </ts-input>
-      <div style="display: flex; flex-direction: column; gap: 8px;">
-        <span style="font-weight: 600; font-size: 14px;">Permissions</span>
-        <ts-toggle>Can edit projects</ts-toggle>
-        <ts-toggle>Can manage team members</ts-toggle>
-        <ts-toggle checked>Can view analytics</ts-toggle>
-      </div>
-      <ts-alert variant="info">An invitation email will be sent to the provided address.</ts-alert>
-    </div>
-    <span slot="footer">
-      <div style="display: flex; justify-content: flex-end; gap: 12px;">
-        <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
-        <ts-button variant="primary">
-          <ts-icon slot="prefix" name="send" size="sm"></ts-icon>
-          Send Invitation
-        </ts-button>
-      </div>
-    </span>
-  </ts-modal>
-`;
-//# sourceMappingURL=modal.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4BAA4B,EAAE;QACvE,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,iCAAiC;SAC/C;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,+CAA+C,EAAE;QACxF,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gDAAgD,EAAE;QACrG,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,2CAA2C,EAAE;QAC/F,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,mCAAmC,EAAE;KACpF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACrF,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAC9G,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC1E,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC/D,OAAO;;gBAEO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;GAa5B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,cAAc;QACrB,cAAc,EAAE,IAAI;QACpB,aAAa,EAAE,IAAI;QACnB,SAAS,EAAE,IAAI;KAChB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxC,CAAC","sourcesContent":["// Hand-written stories for ts-modal\n\nexport default {\n  title: 'Components/Modal',\n  tags: ['autodocs'],\n  argTypes: {\n    open: { control: 'boolean', description: 'Whether the modal is open.' },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The modal\\'s width size preset.',\n    },\n    label: { control: 'text', description: 'Label for accessibility (used as aria-label).' },\n    closeOnOverlay: { control: 'boolean', description: 'Whether clicking the overlay closes the modal.' },\n    closeOnEscape: { control: 'boolean', description: 'Whether pressing Escape closes the modal.' },\n    showClose: { control: 'boolean', description: 'Whether to show the close button.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.open) attrs.push('open');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null && args.label !== '') attrs.push(`label=\"${args.label}\"`);\n  if (args.closeOnOverlay === false) attrs.push('close-on-overlay=\"false\"');\n  if (args.closeOnEscape === false) attrs.push('close-on-escape=\"false\"');\n  if (args.showClose === false) attrs.push('show-close=\"false\"');\n  return `\n    <ts-button variant=\"primary\" onclick=\"this.nextElementSibling.open = true\">Open Modal</ts-button>\n    <ts-modal ${attrs.join(' ')}>\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Edit Profile</h3></span>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <ts-input label=\"Display Name\" value=\"Sarah Chen\" placeholder=\"Enter your name\"></ts-input>\n        <ts-input label=\"Email\" type=\"email\" value=\"sarah@example.com\" placeholder=\"Enter your email\"></ts-input>\n      </div>\n      <span slot=\"footer\">\n        <div style=\"display: flex; justify-content: flex-end; gap: 12px;\">\n          <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n          <ts-button variant=\"primary\">Save Changes</ts-button>\n        </div>\n      </span>\n    </ts-modal>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    size: 'md',\n    label: 'Edit Profile',\n    closeOnOverlay: true,\n    closeOnEscape: true,\n    showClose: true,\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-xs').open = true\">Extra Small</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-sm').open = true\">Small</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-md').open = true\">Medium</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-lg').open = true\">Large</ts-button>\n    <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-xl').open = true\">Extra Large</ts-button>\n  </div>\n\n  <ts-modal id=\"modal-xs\" size=\"xs\" label=\"Extra Small Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Quick Confirm</h3></span>\n    <p style=\"margin: 0;\">Are you sure?</p>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">No</ts-button>\n        <ts-button size=\"sm\" variant=\"primary\">Yes</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-sm\" size=\"sm\" label=\"Small Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Rename File</h3></span>\n    <ts-input label=\"File Name\" value=\"quarterly-report.pdf\"></ts-input>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button size=\"sm\" variant=\"primary\">Rename</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-md\" size=\"md\" label=\"Medium Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Create New Project</h3></span>\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <ts-input label=\"Project Name\" placeholder=\"My Awesome Project\"></ts-input>\n      <ts-input label=\"Description\" placeholder=\"A brief description of the project\"></ts-input>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"primary\">Create Project</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-lg\" size=\"lg\" label=\"Large Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">User Preferences</h3></span>\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <ts-input label=\"Display Name\" placeholder=\"Your name\"></ts-input>\n      <ts-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"></ts-input>\n      <ts-input label=\"Organization\" placeholder=\"Company name\"></ts-input>\n      <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n        <ts-toggle>Enable email notifications</ts-toggle>\n        <ts-toggle checked>Enable dark mode</ts-toggle>\n      </div>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"primary\">Save Preferences</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-xl\" size=\"xl\" label=\"Extra Large Modal\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Dashboard Overview</h3></span>\n    <div style=\"display: flex; gap: 16px; flex-wrap: wrap;\">\n      <ts-card bordered style=\"flex: 1; min-width: 200px;\">\n        <div style=\"text-align: center;\">\n          <div style=\"font-size: 32px; font-weight: 700; color: var(--ts-color-primary-600);\">2,847</div>\n          <div style=\"color: var(--ts-color-text-secondary);\">Total Users</div>\n        </div>\n      </ts-card>\n      <ts-card bordered style=\"flex: 1; min-width: 200px;\">\n        <div style=\"text-align: center;\">\n          <div style=\"font-size: 32px; font-weight: 700; color: var(--ts-color-success-600);\">$12,459</div>\n          <div style=\"color: var(--ts-color-text-secondary);\">Revenue</div>\n        </div>\n      </ts-card>\n      <ts-card bordered style=\"flex: 1; min-width: 200px;\">\n        <div style=\"text-align: center;\">\n          <div style=\"font-size: 32px; font-weight: 700; color: var(--ts-color-warning-600);\">94%</div>\n          <div style=\"color: var(--ts-color-text-secondary);\">Uptime</div>\n        </div>\n      </ts-card>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Close</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-button variant=\"danger\" onclick=\"document.getElementById('modal-confirm-delete').open = true\">\n      <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n      Delete Account\n    </ts-button>\n    <ts-button variant=\"primary\" onclick=\"document.getElementById('modal-no-close').open = true\">\n      Non-dismissible Modal\n    </ts-button>\n  </div>\n\n  <ts-modal id=\"modal-confirm-delete\" size=\"sm\" label=\"Confirm Deletion\">\n    <span slot=\"header\"><h3 style=\"margin: 0; color: var(--ts-color-danger-600);\">Delete Account</h3></span>\n    <div>\n      <ts-alert variant=\"danger\">This action cannot be undone. All your data will be permanently removed.</ts-alert>\n      <div style=\"margin-top: 16px;\">\n        <ts-input label=\"Type DELETE to confirm\" placeholder=\"DELETE\" error=\"\"></ts-input>\n      </div>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"danger\">\n          <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n          Delete Forever\n        </ts-button>\n      </div>\n    </span>\n  </ts-modal>\n\n  <ts-modal id=\"modal-no-close\" size=\"sm\" label=\"Terms and Conditions\" close-on-overlay=\"false\" close-on-escape=\"false\" show-close=\"false\">\n    <span slot=\"header\"><h3 style=\"margin: 0;\">Accept Terms</h3></span>\n    <p style=\"margin: 0;\">You must accept the terms and conditions to continue using this service. Please review our updated privacy policy.</p>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 8px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\" onclick=\"document.getElementById('modal-no-close').open = false\">Decline</ts-button>\n        <ts-button variant=\"primary\" onclick=\"document.getElementById('modal-no-close').open = false\">Accept</ts-button>\n      </div>\n    </span>\n  </ts-modal>\n`;\n\nexport const Composition = (): string => `\n  <ts-button variant=\"primary\" onclick=\"document.getElementById('modal-compose').open = true\">\n    <ts-icon slot=\"prefix\" name=\"plus\" size=\"sm\"></ts-icon>\n    Add Team Member\n  </ts-button>\n\n  <ts-modal id=\"modal-compose\" size=\"md\" label=\"Add Team Member\">\n    <span slot=\"header\">\n      <div style=\"display: flex; align-items: center; gap: 8px;\">\n        <ts-icon name=\"user-plus\" size=\"sm\"></ts-icon>\n        <h3 style=\"margin: 0;\">Add Team Member</h3>\n      </div>\n    </span>\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <div style=\"display: flex; gap: 12px;\">\n        <ts-input label=\"First Name\" placeholder=\"Jane\" style=\"flex: 1;\"></ts-input>\n        <ts-input label=\"Last Name\" placeholder=\"Doe\" style=\"flex: 1;\"></ts-input>\n      </div>\n      <ts-input label=\"Email Address\" type=\"email\" placeholder=\"jane@company.com\" required>\n        <ts-icon slot=\"prefix\" name=\"mail\" size=\"sm\"></ts-icon>\n      </ts-input>\n      <div style=\"display: flex; flex-direction: column; gap: 8px;\">\n        <span style=\"font-weight: 600; font-size: 14px;\">Permissions</span>\n        <ts-toggle>Can edit projects</ts-toggle>\n        <ts-toggle>Can manage team members</ts-toggle>\n        <ts-toggle checked>Can view analytics</ts-toggle>\n      </div>\n      <ts-alert variant=\"info\">An invitation email will be sent to the provided address.</ts-alert>\n    </div>\n    <span slot=\"footer\">\n      <div style=\"display: flex; justify-content: flex-end; gap: 12px;\">\n        <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n        <ts-button variant=\"primary\">\n          <ts-icon slot=\"prefix\" name=\"send\" size=\"sm\"></ts-icon>\n          Send Invitation\n        </ts-button>\n      </div>\n    </span>\n  </ts-modal>\n`;\n"]}

package/dist/collection/components/nav/nav-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../src/components/nav/nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGhE;;;;;;;GAOG;AAMH,MAAM,OAAO,SAAS;IACpB,8BAA8B;IACtB,IAAI,CAAU;IAEtB,6CAA6C;IACpB,MAAM,GAAG,KAAK,CAAC;IAExC,qCAAqC;IACZ,QAAQ,GAAG,KAAK,CAAC;IAE1C,mCAAmC;IAC3B,IAAI,CAAU;IAEtB,6CAA6C;IACX,QAAQ,CAAsB;IAExD,WAAW,GAAG,CAAC,KAAiB,EAAQ,EAAE;QAChD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI;YACrB,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,CAAC,CAAC,EAAE,IAAI,EAAE,QAAiB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEzD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,qBAAqB,EAAE,IAAI,CAAC,MAAM;gBAClC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;aACvC;YAED,2DAAI,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU;gBACvD,EAAC,GAAG,wDACE,KAAK,EACT,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW;oBAExB,IAAI,CAAC,IAAI,IAAI,CACZ,6DAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM;wBACzD,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACjC,CACR;oBACD,6DAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO;wBACxC,8DAAQ,CACH,CACH,CACH,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part item - The list item wrapper.\n * @part link - The anchor or button element.\n * @part icon - The icon wrapper.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-nav-item',\n  styleUrl: 'nav-item.css',\n  shadow: true,\n})\nexport class TsNavItem {\n  /** The URL to navigate to. */\n  @Prop() href?: string;\n\n  /** Whether this item is currently active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Whether this item is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Lucide icon name to display. */\n  @Prop() icon?: string;\n\n  /** Emitted when the nav item is selected. */\n  @Event({ eventName: 'tsSelect' }) tsSelect!: EventEmitter<void>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.tsSelect.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const Tag = this.href ? 'a' : 'button';\n    const attrs = this.href\n      ? { href: this.disabled ? undefined : this.href }\n      : { type: 'button' as const, disabled: this.disabled };\n\n    return (\n      <Host\n        class={{\n          'ts-nav-item': true,\n          'ts-nav-item--active': this.active,\n          'ts-nav-item--disabled': this.disabled,\n        }}\n      >\n        <li class=\"nav-item__wrapper\" part=\"item\" role=\"listitem\">\n          <Tag\n            {...attrs}\n            class=\"nav-item__link\"\n            part=\"link\"\n            aria-current={this.active ? 'page' : undefined}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.handleClick}\n          >\n            {this.icon && (\n              <span class=\"nav-item__icon\" part=\"icon\" aria-hidden=\"true\">\n                <ts-icon name={this.icon} size=\"sm\" />\n              </span>\n            )}\n            <span class=\"nav-item__label\" part=\"label\">\n              <slot />\n            </span>\n          </Tag>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/nav/nav-item.stories.js

@@ -1,4 +0,0 @@
-// Stories for ts-nav-item are in the parent component's stories file
-// This file exists only to prevent auto-generation
-export default { title: 'Internal/nav-item', tags: ['!autodocs'] };
-//# sourceMappingURL=nav-item.stories.js.map

package/dist/collection/components/nav/nav-item.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-item.stories.js","sourceRoot":"","sources":["../../../src/components/nav/nav-item.stories.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,mDAAmD;AAEnD,eAAe,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC","sourcesContent":["// Stories for ts-nav-item are in the parent component's stories file\n// This file exists only to prevent auto-generation\n\nexport default { title: 'Internal/nav-item', tags: ['!autodocs'] };\n"]}

package/dist/collection/components/nav/nav.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav.js","sourceRoot":"","sources":["../../../src/components/nav/nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,KAAK;IAChB,qCAAqC;IACZ,OAAO,GAA6B,SAAS,CAAC;IAEvE,yDAAyD;IAChC,SAAS,GAAG,KAAK,CAAC;IAE3C,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,mBAAmB,EAAE,IAAI,CAAC,SAAS;aACpC;YAED,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,KAAK,gBAAY,YAAY;gBACzD,2DAAI,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;oBAC3C,8DAAQ,CACL,CACD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-nav-item children.\n *\n * @part nav - The native nav element.\n * @part list - The list container.\n */\n@Component({\n  tag: 'ts-nav',\n  styleUrl: 'nav.css',\n  shadow: true,\n})\nexport class TsNav {\n  /** The navigation layout variant. */\n  @Prop({ reflect: true }) variant: 'sidebar' | 'horizontal' = 'sidebar';\n\n  /** Whether the sidebar nav is collapsed (icons only). */\n  @Prop({ reflect: true }) collapsed = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-nav': true,\n          [`ts-nav--${this.variant}`]: true,\n          'ts-nav--collapsed': this.collapsed,\n        }}\n      >\n        <nav class=\"nav__native\" part=\"nav\" aria-label=\"Navigation\">\n          <ul class=\"nav__list\" part=\"list\" role=\"list\">\n            <slot />\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/nav/nav.stories.js

@@ -1,106 +0,0 @@
-// Hand-written stories for ts-nav
-export default {
-    title: 'Components/Nav',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['sidebar', 'horizontal'],
-            description: 'The navigation layout variant.',
-        },
-        collapsed: {
-            control: 'boolean',
-            description: 'Whether the sidebar nav is collapsed (icons only).',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.variant !== undefined)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.collapsed)
-        attrs.push('collapsed');
-    return `
-    <ts-nav ${attrs.join(' ')}>
-      <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
-      <ts-nav-item icon="users">Users</ts-nav-item>
-      <ts-nav-item icon="settings">Settings</ts-nav-item>
-      <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
-    </ts-nav>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        variant: 'sidebar',
-        collapsed: false,
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Sidebar variant</p>
-      <div style="width: 240px;">
-        <ts-nav variant="sidebar">
-          <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
-          <ts-nav-item icon="users">Users</ts-nav-item>
-          <ts-nav-item icon="settings">Settings</ts-nav-item>
-          <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
-        </ts-nav>
-      </div>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Horizontal variant</p>
-      <ts-nav variant="horizontal">
-        <ts-nav-item active>Dashboard</ts-nav-item>
-        <ts-nav-item>Users</ts-nav-item>
-        <ts-nav-item>Settings</ts-nav-item>
-        <ts-nav-item>Reports</ts-nav-item>
-      </ts-nav>
-    </div>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Expanded sidebar</p>
-      <div style="width: 240px;">
-        <ts-nav variant="sidebar">
-          <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
-          <ts-nav-item icon="users">Users</ts-nav-item>
-          <ts-nav-item icon="settings" disabled>Settings</ts-nav-item>
-          <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
-        </ts-nav>
-      </div>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Collapsed sidebar (icons only)</p>
-      <div style="width: 64px;">
-        <ts-nav variant="sidebar" collapsed>
-          <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
-          <ts-nav-item icon="users">Users</ts-nav-item>
-          <ts-nav-item icon="settings">Settings</ts-nav-item>
-          <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
-        </ts-nav>
-      </div>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="display: flex; border: 1px solid #e2e8f0; border-radius: 8px; height: 400px; overflow: hidden;">
-    <div style="width: 240px; border-right: 1px solid #e2e8f0; padding: 16px 0; background: #f8fafc;">
-      <div style="padding: 0 16px 16px; font-family: sans-serif; font-weight: 700; font-size: 18px;">Acme App</div>
-      <ts-nav variant="sidebar">
-        <ts-nav-item icon="layout-dashboard" active href="#">Dashboard</ts-nav-item>
-        <ts-nav-item icon="users" href="#">Users</ts-nav-item>
-        <ts-nav-item icon="file-text" href="#">Documents</ts-nav-item>
-        <ts-nav-item icon="bar-chart-2" href="#">Analytics</ts-nav-item>
-        <ts-nav-item icon="settings" href="#">Settings</ts-nav-item>
-      </ts-nav>
-    </div>
-    <div style="flex: 1; padding: 24px; font-family: sans-serif;">
-      <h2 style="margin: 0 0 8px;">Dashboard</h2>
-      <p style="color: #666;">Welcome back! Here is an overview of your activity.</p>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=nav.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"nav.stories.js","sourceRoot":"","sources":["../../../src/components/nav/nav.stories.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAElC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;YAClC,WAAW,EAAE,gCAAgC;SAC9C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oDAAoD;SAClE;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,OAAO;cACK,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;GAM1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuBrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;CAiBxC,CAAC","sourcesContent":["// Hand-written stories for ts-nav\n\nexport default {\n  title: 'Components/Nav',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['sidebar', 'horizontal'],\n      description: 'The navigation layout variant.',\n    },\n    collapsed: {\n      control: 'boolean',\n      description: 'Whether the sidebar nav is collapsed (icons only).',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.collapsed) attrs.push('collapsed');\n  return `\n    <ts-nav ${attrs.join(' ')}>\n      <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n      <ts-nav-item icon=\"users\">Users</ts-nav-item>\n      <ts-nav-item icon=\"settings\">Settings</ts-nav-item>\n      <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n    </ts-nav>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'sidebar',\n    collapsed: false,\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Sidebar variant</p>\n      <div style=\"width: 240px;\">\n        <ts-nav variant=\"sidebar\">\n          <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n          <ts-nav-item icon=\"users\">Users</ts-nav-item>\n          <ts-nav-item icon=\"settings\">Settings</ts-nav-item>\n          <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n        </ts-nav>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Horizontal variant</p>\n      <ts-nav variant=\"horizontal\">\n        <ts-nav-item active>Dashboard</ts-nav-item>\n        <ts-nav-item>Users</ts-nav-item>\n        <ts-nav-item>Settings</ts-nav-item>\n        <ts-nav-item>Reports</ts-nav-item>\n      </ts-nav>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Expanded sidebar</p>\n      <div style=\"width: 240px;\">\n        <ts-nav variant=\"sidebar\">\n          <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n          <ts-nav-item icon=\"users\">Users</ts-nav-item>\n          <ts-nav-item icon=\"settings\" disabled>Settings</ts-nav-item>\n          <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n        </ts-nav>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Collapsed sidebar (icons only)</p>\n      <div style=\"width: 64px;\">\n        <ts-nav variant=\"sidebar\" collapsed>\n          <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n          <ts-nav-item icon=\"users\">Users</ts-nav-item>\n          <ts-nav-item icon=\"settings\">Settings</ts-nav-item>\n          <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n        </ts-nav>\n      </div>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; border: 1px solid #e2e8f0; border-radius: 8px; height: 400px; overflow: hidden;\">\n    <div style=\"width: 240px; border-right: 1px solid #e2e8f0; padding: 16px 0; background: #f8fafc;\">\n      <div style=\"padding: 0 16px 16px; font-family: sans-serif; font-weight: 700; font-size: 18px;\">Acme App</div>\n      <ts-nav variant=\"sidebar\">\n        <ts-nav-item icon=\"layout-dashboard\" active href=\"#\">Dashboard</ts-nav-item>\n        <ts-nav-item icon=\"users\" href=\"#\">Users</ts-nav-item>\n        <ts-nav-item icon=\"file-text\" href=\"#\">Documents</ts-nav-item>\n        <ts-nav-item icon=\"bar-chart-2\" href=\"#\">Analytics</ts-nav-item>\n        <ts-nav-item icon=\"settings\" href=\"#\">Settings</ts-nav-item>\n      </ts-nav>\n    </div>\n    <div style=\"flex: 1; padding: 24px; font-family: sans-serif;\">\n      <h2 style=\"margin: 0 0 8px;\">Dashboard</h2>\n      <p style=\"color: #666;\">Welcome back! Here is an overview of your activity.</p>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/pagination/pagination.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @part nav - The nav element.\n * @part button - Each page button.\n * @part prev - The previous button.\n * @part next - The next button.\n */\n@Component({\n  tag: 'ts-pagination',\n  styleUrl: 'pagination.css',\n  shadow: true,\n})\nexport class TsPagination {\n  /** Total number of items. */\n  @Prop() total!: number;\n\n  /** Number of items per page. */\n  @Prop() pageSize = 10;\n\n  /** The current active page (1-based). */\n  @Prop({ mutable: true, reflect: true }) currentPage = 1;\n\n  /** Number of sibling pages shown around the current page. */\n  @Prop() siblingCount = 1;\n\n  /** The size of the pagination buttons. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Emitted when the page changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ page: number }>;\n\n  private get totalPages(): number {\n    return Math.max(1, Math.ceil(this.total / this.pageSize));\n  }\n\n  private getPageRange(): (number | 'ellipsis')[] {\n    const total = this.totalPages;\n    const current = this.currentPage;\n    const siblings = this.siblingCount;\n\n    const range: (number | 'ellipsis')[] = [];\n\n    const leftSibling = Math.max(current - siblings, 2);\n    const rightSibling = Math.min(current + siblings, total - 1);\n\n    const showLeftEllipsis = leftSibling > 2;\n    const showRightEllipsis = rightSibling < total - 1;\n\n    // Always show first page\n    range.push(1);\n\n    if (showLeftEllipsis) {\n      range.push('ellipsis');\n    } else {\n      for (let i = 2; i < leftSibling; i++) {\n        range.push(i);\n      }\n    }\n\n    for (let i = leftSibling; i <= rightSibling; i++) {\n      range.push(i);\n    }\n\n    if (showRightEllipsis) {\n      range.push('ellipsis');\n    } else {\n      for (let i = rightSibling + 1; i < total; i++) {\n        range.push(i);\n      }\n    }\n\n    // Always show last page (if > 1)\n    if (total > 1) {\n      range.push(total);\n    }\n\n    return range;\n  }\n\n  private handlePageClick = (page: number): void => {\n    if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n    this.currentPage = page;\n    this.tsChange.emit({ page });\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const pages = this.getPageRange();\n    const isFirstPage = this.currentPage <= 1;\n    const isLastPage = this.currentPage >= this.totalPages;\n\n    return (\n      <Host\n        class={{\n          'ts-pagination': true,\n          [`ts-pagination--${this.size}`]: true,\n        }}\n      >\n        <nav part=\"nav\" aria-label=\"Pagination\" class=\"pagination__nav\">\n          <button\n            class=\"pagination__button pagination__prev\"\n            part=\"prev\"\n            disabled={isFirstPage}\n            aria-label=\"Previous page\"\n            onClick={() => this.handlePageClick(this.currentPage - 1)}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"15 18 9 12 15 6\" />\n            </svg>\n          </button>\n\n          {pages.map((page, index) =>\n            page === 'ellipsis' ? (\n              <span class=\"pagination__ellipsis\" key={`ellipsis-${index}`} aria-hidden=\"true\">\n                ...\n              </span>\n            ) : (\n              <button\n                class={{\n                  pagination__button: true,\n                  'pagination__button--active': page === this.currentPage,\n                }}\n                part=\"button\"\n                aria-current={page === this.currentPage ? 'page' : undefined}\n                aria-label={`Page ${page}`}\n                onClick={() => this.handlePageClick(page)}\n                key={page}\n              >\n                {page}\n              </button>\n            ),\n          )}\n\n          <button\n            class=\"pagination__button pagination__next\"\n            part=\"next\"\n            disabled={isLastPage}\n            aria-label=\"Next page\"\n            onClick={() => this.handlePageClick(this.currentPage + 1)}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"9 18 15 12 9 6\" />\n            </svg>\n          </button>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pagination/pagination.stories.js

@@ -1,92 +0,0 @@
-// Hand-written stories for ts-pagination
-export default {
-    title: 'Components/Pagination',
-    tags: ['autodocs'],
-    argTypes: {
-        total: {
-            control: 'number',
-            description: 'Total number of items.',
-        },
-        pageSize: {
-            control: 'number',
-            description: 'Number of items per page.',
-        },
-        currentPage: {
-            control: 'number',
-            description: 'The current active page (1-based).',
-        },
-        siblingCount: {
-            control: 'number',
-            description: 'Number of sibling pages shown around the current page.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The size of the pagination buttons.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.total !== undefined)
-        attrs.push(`total="${args.total}"`);
-    if (args.pageSize !== undefined)
-        attrs.push(`page-size="${args.pageSize}"`);
-    if (args.currentPage !== undefined)
-        attrs.push(`current-page="${args.currentPage}"`);
-    if (args.siblingCount !== undefined)
-        attrs.push(`sibling-count="${args.siblingCount}"`);
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    return `<ts-pagination ${attrs.join(' ')}></ts-pagination>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        total: 100,
-        pageSize: 10,
-        currentPage: 1,
-        siblingCount: 1,
-        size: 'md',
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Small</p>
-      <ts-pagination total="100" page-size="10" current-page="5" size="sm"></ts-pagination>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Medium (default)</p>
-      <ts-pagination total="100" page-size="10" current-page="5" size="md"></ts-pagination>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Large</p>
-      <ts-pagination total="100" page-size="10" current-page="5" size="lg"></ts-pagination>
-    </div>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">First page (prev disabled)</p>
-      <ts-pagination total="100" page-size="10" current-page="1"></ts-pagination>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Middle page with ellipsis</p>
-      <ts-pagination total="100" page-size="10" current-page="5"></ts-pagination>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Last page (next disabled)</p>
-      <ts-pagination total="100" page-size="10" current-page="10"></ts-pagination>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="max-width: 600px; font-family: sans-serif;">
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
-      <span style="font-size: 14px; color: #666;">Showing 41-50 of 237 results</span>
-    </div>
-    <ts-pagination total="237" page-size="10" current-page="5" sibling-count="2"></ts-pagination>
-  </div>
-`;
-//# sourceMappingURL=pagination.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,yCAAyC;AAEzC,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,wBAAwB;SACtC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,2BAA2B;SACzC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,oCAAoC;SAClD;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,wDAAwD;SACtE;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,qCAAqC;SACnD;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC5E,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACrF,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;IACxF,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,OAAO,kBAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAelC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAenC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;CAOxC,CAAC","sourcesContent":["// Hand-written stories for ts-pagination\n\nexport default {\n  title: 'Components/Pagination',\n  tags: ['autodocs'],\n  argTypes: {\n    total: {\n      control: 'number',\n      description: 'Total number of items.',\n    },\n    pageSize: {\n      control: 'number',\n      description: 'Number of items per page.',\n    },\n    currentPage: {\n      control: 'number',\n      description: 'The current active page (1-based).',\n    },\n    siblingCount: {\n      control: 'number',\n      description: 'Number of sibling pages shown around the current page.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the pagination buttons.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.total !== undefined) attrs.push(`total=\"${args.total}\"`);\n  if (args.pageSize !== undefined) attrs.push(`page-size=\"${args.pageSize}\"`);\n  if (args.currentPage !== undefined) attrs.push(`current-page=\"${args.currentPage}\"`);\n  if (args.siblingCount !== undefined) attrs.push(`sibling-count=\"${args.siblingCount}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  return `<ts-pagination ${attrs.join(' ')}></ts-pagination>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    total: 100,\n    pageSize: 10,\n    currentPage: 1,\n    siblingCount: 1,\n    size: 'md',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Small</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\" size=\"sm\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Medium (default)</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\" size=\"md\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Large</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\" size=\"lg\"></ts-pagination>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">First page (prev disabled)</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"1\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Middle page with ellipsis</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"5\"></ts-pagination>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Last page (next disabled)</p>\n      <ts-pagination total=\"100\" page-size=\"10\" current-page=\"10\"></ts-pagination>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 600px; font-family: sans-serif;\">\n    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n      <span style=\"font-size: 14px; color: #666;\">Showing 41-50 of 237 results</span>\n    </div>\n    <ts-pagination total=\"237\" page-size=\"10\" current-page=\"5\" sibling-count=\"2\"></ts-pagination>\n  </div>\n`;\n"]}

package/dist/collection/components/popover/popover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, State, h, Host, Element, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\ntype TsPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n\n/**\n * @slot trigger - The element that triggers the popover.\n * @slot - Default slot for popover content.\n *\n * @part base - The popover container.\n * @part arrow - The popover arrow.\n * @part trigger - The trigger wrapper.\n */\n@Component({\n  tag: 'ts-popover',\n  styleUrl: 'popover.css',\n  shadow: true,\n})\nexport class TsPopover {\n  @Element() hostEl!: HTMLElement;\n\n  private popoverId = generateId('ts-popover');\n  private outsideClickHandler?: (event: MouseEvent) => void;\n  private escapeHandler?: (event: KeyboardEvent) => void;\n\n  /** Whether the popover is currently visible. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /** Placement of the popover relative to the trigger. */\n  @Prop({ reflect: true }) placement: TsPopoverPlacement = 'bottom';\n\n  /** How the popover is triggered. */\n  @Prop() trigger: 'click' | 'hover' | 'manual' = 'click';\n\n  /** Whether the popover closes on outside click or Escape. */\n  @Prop() dismissible = true;\n\n  /** Emitted when the popover opens. */\n  @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n  /** Emitted when the popover closes. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  @State() isVisible = false;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean): void {\n    this.isVisible = newValue;\n    if (newValue) {\n      this.tsOpen.emit();\n      this.addGlobalListeners();\n    } else {\n      this.tsClose.emit();\n      this.removeGlobalListeners();\n    }\n  }\n\n  connectedCallback(): void {\n    if (this.open) {\n      this.isVisible = true;\n      this.addGlobalListeners();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.removeGlobalListeners();\n  }\n\n  /** Programmatically show the popover. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically hide the popover. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  private addGlobalListeners(): void {\n    if (this.dismissible) {\n      this.outsideClickHandler = (event: MouseEvent) => {\n        const path = event.composedPath();\n        if (!path.includes(this.hostEl)) {\n          this.open = false;\n        }\n      };\n      this.escapeHandler = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          this.open = false;\n        }\n      };\n      // Use setTimeout to avoid capturing the click that opened the popover\n      setTimeout(() => {\n        document.addEventListener('click', this.outsideClickHandler!);\n        document.addEventListener('keydown', this.escapeHandler!);\n      }, 0);\n    }\n  }\n\n  private removeGlobalListeners(): void {\n    if (this.outsideClickHandler) {\n      document.removeEventListener('click', this.outsideClickHandler);\n      this.outsideClickHandler = undefined;\n    }\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = undefined;\n    }\n  }\n\n  private handleTriggerClick = (): void => {\n    if (this.trigger === 'click') {\n      this.open = !this.open;\n    }\n  };\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    if (this.trigger === 'click' && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      this.open = !this.open;\n    }\n  };\n\n  private handleMouseEnter = (): void => {\n    if (this.trigger === 'hover') {\n      this.open = true;\n    }\n  };\n\n  private handleMouseLeave = (): void => {\n    if (this.trigger === 'hover') {\n      this.open = false;\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-popover': true,\n          'ts-popover--open': this.isVisible,\n          [`ts-popover--${this.placement}`]: true,\n        }}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span\n          class=\"popover__trigger\"\n          part=\"trigger\"\n          aria-expanded={this.isVisible ? 'true' : 'false'}\n          aria-controls={this.popoverId}\n          onClick={this.handleTriggerClick}\n          onKeyDown={this.handleTriggerKeydown}\n        >\n          <slot name=\"trigger\" />\n        </span>\n\n        <div\n          class={{\n            'popover__panel': true,\n            [`popover__panel--${this.placement}`]: true,\n            'popover__panel--visible': this.isVisible,\n          }}\n          part=\"base\"\n          id={this.popoverId}\n          role=\"dialog\"\n          aria-hidden={!this.isVisible ? 'true' : undefined}\n        >\n          <div class=\"popover__arrow\" part=\"arrow\" />\n          <div class=\"popover__content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}