@sula-tech/webcomponents 0.3.3 → 0.4.0

package/dist/collection/components/sula-tiles/sula-tiles.stories.js

@@ -0,0 +1,420 @@
+import { SulaTilesSize, SulaTilesType } from "./model/sula-tiles.model";
+export default {
+    title: 'Components/sula-tiles',
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaTilesType),
+            defaultValue: SulaTilesType.Rounded,
+            description: 'Tiles type - defines the visual style (rounded or square)',
+            type: {
+                required: false,
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(SulaTilesSize),
+            defaultValue: SulaTilesSize.Default,
+            description: 'Tiles size - only applies to rounded type',
+            type: {
+                required: false,
+            },
+        },
+        ellipsis: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Use ellipsis on tiles text when it overflows',
+            type: {
+                required: false,
+            },
+        },
+        icon: {
+            control: 'text',
+            defaultValue: 'ph ph-house',
+            description: 'Icon class or name to display in the tile',
+            type: {
+                required: false,
+            },
+        },
+        text: {
+            control: 'text',
+            defaultValue: 'Tile Text',
+            description: 'Main text content of the tile',
+            type: {
+                required: false,
+            },
+        },
+        subText: {
+            control: 'text',
+            defaultValue: '',
+            description: 'Secondary text content (only visible in square type)',
+            type: {
+                required: false,
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Disable the tile interaction and apply disabled styling',
+            type: {
+                required: false,
+            },
+        },
+        tileClicked: {
+            description: 'Event emitted when tile is clicked (not emitted if disabled)',
+            action: 'tileClicked',
+            table: {
+                category: 'Events',
+                type: { summary: 'CustomEvent<void>' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'O componente Tiles Sula Design System é utilizado como a representação visual de bloco de ações. O utilizaremos em interfaces com carrocel e telas com opções de blocos de serviços.',
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.gap = '20px';
+    container.style.flexWrap = 'wrap';
+    const el = document.createElement('sula-tiles');
+    el.setAttribute('type', args.type);
+    el.setAttribute('size', args.size);
+    el.setAttribute('ellipsis', args.ellipsis.toString());
+    if (args.icon)
+        el.setAttribute('icon', args.icon);
+    if (args.text)
+        el.setAttribute('text', args.text);
+    if (args.subText)
+        el.setAttribute('sub-text', args.subText);
+    el.setAttribute('disabled', args.disabled.toString());
+    el.addEventListener('tileClicked', event => {
+        if (args.tileClicked) {
+            args.tileClicked(event);
+        }
+    });
+    const wrapper = document.createElement('div');
+    wrapper.appendChild(el);
+    container.appendChild(wrapper);
+    return container;
+};
+export const DefaultRounded = Template.bind({});
+DefaultRounded.args = {
+    type: SulaTilesType.Rounded,
+    size: SulaTilesSize.Default,
+    ellipsis: false,
+    icon: 'ph ph-house',
+    text: 'Home',
+    subText: '',
+    disabled: false,
+};
+export const LargeRounded = Template.bind({});
+LargeRounded.args = {
+    type: SulaTilesType.Rounded,
+    size: SulaTilesSize.Large,
+    ellipsis: false,
+    icon: 'ph ph-gear',
+    text: 'Settings',
+    subText: '',
+    disabled: false,
+};
+export const SquareSimple = Template.bind({});
+SquareSimple.args = {
+    type: SulaTilesType.Square,
+    size: SulaTilesSize.Default,
+    ellipsis: false,
+    icon: 'ph ph-user',
+    text: 'Profile',
+    subText: '',
+    disabled: false,
+};
+export const SquareWithSubText = Template.bind({});
+SquareWithSubText.args = {
+    type: SulaTilesType.Square,
+    size: SulaTilesSize.Default,
+    ellipsis: false,
+    icon: 'ph ph-chart-line',
+    text: 'Analytics',
+    subText: 'View detailed reports',
+    disabled: false,
+};
+export const DisabledRounded = Template.bind({});
+DisabledRounded.args = {
+    type: SulaTilesType.Rounded,
+    size: SulaTilesSize.Default,
+    ellipsis: false,
+    icon: 'ph ph-lock',
+    text: 'Locked',
+    subText: '',
+    disabled: true,
+};
+export const DisabledSquare = Template.bind({});
+DisabledSquare.args = {
+    type: SulaTilesType.Square,
+    size: SulaTilesSize.Default,
+    ellipsis: false,
+    icon: 'ph ph-x-circle',
+    text: 'Unavailable',
+    subText: 'Feature not available',
+    disabled: true,
+};
+export const WithEllipsis = Template.bind({});
+WithEllipsis.args = {
+    type: SulaTilesType.Rounded,
+    size: SulaTilesSize.Default,
+    ellipsis: true,
+    icon: 'ph ph-file-text',
+    text: 'Very Long Text That Should Be Truncated',
+    subText: '',
+    disabled: false,
+};
+export const InteractiveEventDemo = () => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '20px';
+    const title = document.createElement('h3');
+    title.textContent = 'Click Events Demo';
+    title.style.margin = '0 0 10px 0';
+    const tilesContainer = document.createElement('div');
+    tilesContainer.style.display = 'flex';
+    tilesContainer.style.gap = '20px';
+    tilesContainer.style.flexWrap = 'wrap';
+    const logContainer = document.createElement('div');
+    logContainer.style.padding = '15px';
+    logContainer.style.backgroundColor = '#f8f9fa';
+    logContainer.style.border = '1px solid #e9ecef';
+    logContainer.style.borderRadius = '6px';
+    logContainer.style.fontFamily = 'monospace';
+    logContainer.style.fontSize = '13px';
+    logContainer.style.maxHeight = '200px';
+    logContainer.style.overflowY = 'auto';
+    logContainer.innerHTML = '<strong>🎯 Event Log (Click the tiles below):</strong><br/><br/>';
+    const tiles = [
+        {
+            type: SulaTilesType.Rounded,
+            icon: 'ph ph-mouse',
+            text: 'Click Me!',
+            disabled: false,
+            id: 'rounded-active',
+        },
+        {
+            type: SulaTilesType.Square,
+            icon: 'ph ph-hand-pointing',
+            text: 'Interactive',
+            subText: 'Click to test',
+            disabled: false,
+            id: 'square-active',
+        },
+        {
+            type: SulaTilesType.Rounded,
+            icon: 'ph ph-prohibit',
+            text: 'Disabled',
+            disabled: true,
+            id: 'rounded-disabled',
+        },
+        {
+            type: SulaTilesType.Square,
+            icon: 'ph ph-x',
+            text: 'Disabled',
+            subText: 'No events',
+            disabled: true,
+            id: 'square-disabled',
+        },
+    ];
+    tiles.forEach(tile => {
+        const el = document.createElement('sula-tiles');
+        el.setAttribute('type', tile.type);
+        el.setAttribute('icon', tile.icon);
+        el.setAttribute('text', tile.text);
+        if (tile.subText)
+            el.setAttribute('sub-text', tile.subText);
+        el.setAttribute('disabled', tile.disabled.toString());
+        el.addEventListener('tileClicked', () => {
+            const timestamp = new Date().toLocaleTimeString();
+            const status = tile.disabled ? '❌ (Should not fire)' : '✅';
+            const logEntry = `[${timestamp}] ${status} "${tile.text}" tile clicked<br/>`;
+            logContainer.innerHTML += logEntry;
+            logContainer.scrollTop = logContainer.scrollHeight;
+        });
+        tilesContainer.appendChild(el);
+    });
+    container.appendChild(title);
+    container.appendChild(tilesContainer);
+    container.appendChild(logContainer);
+    return container;
+};
+export const DifferentIcons = () => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'grid';
+    container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';
+    container.style.gap = '20px';
+    const logContainer = document.createElement('div');
+    logContainer.style.gridColumn = '1 / -1';
+    logContainer.style.marginTop = '20px';
+    logContainer.style.padding = '10px';
+    logContainer.style.backgroundColor = '#f5f5f5';
+    logContainer.style.borderRadius = '4px';
+    logContainer.style.fontFamily = 'monospace';
+    logContainer.style.fontSize = '12px';
+    logContainer.style.maxHeight = '100px';
+    logContainer.style.overflowY = 'auto';
+    logContainer.innerHTML = '<strong>Click any tile to see events:</strong><br/>';
+    const tiles = [
+        { icon: 'ph ph-house', text: 'Home' },
+        { icon: 'ph ph-user', text: 'Profile' },
+        { icon: 'ph ph-gear', text: 'Settings' },
+        { icon: 'ph ph-chart-line', text: 'Analytics' },
+        { icon: 'ph ph-bell', text: 'Notifications' },
+        { icon: 'ph ph-envelope', text: 'Messages' },
+    ];
+    tiles.forEach(tile => {
+        const el = document.createElement('sula-tiles');
+        el.setAttribute('type', SulaTilesType.Rounded);
+        el.setAttribute('size', SulaTilesSize.Default);
+        el.setAttribute('icon', tile.icon);
+        el.setAttribute('text', tile.text);
+        el.setAttribute('disabled', 'false');
+        el.addEventListener('tileClicked', () => {
+            const timestamp = new Date().toLocaleTimeString();
+            const logEntry = `[${timestamp}] "${tile.text}" clicked<br/>`;
+            logContainer.innerHTML += logEntry;
+            logContainer.scrollTop = logContainer.scrollHeight;
+        });
+        container.appendChild(el);
+    });
+    container.appendChild(logContainer);
+    return container;
+};
+export const SizeComparison = () => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.gap = '40px';
+    container.style.alignItems = 'center';
+    container.style.flexWrap = 'wrap';
+    const sizes = [
+        { size: SulaTilesSize.Default, label: 'Default' },
+        { size: SulaTilesSize.Large, label: 'Large' },
+    ];
+    sizes.forEach(({ size, label }) => {
+        const wrapper = document.createElement('div');
+        wrapper.style.display = 'flex';
+        wrapper.style.flexDirection = 'column';
+        wrapper.style.alignItems = 'center';
+        wrapper.style.gap = '10px';
+        const labelEl = document.createElement('span');
+        labelEl.textContent = label;
+        labelEl.style.fontSize = '14px';
+        labelEl.style.fontWeight = 'bold';
+        const el = document.createElement('sula-tiles');
+        el.setAttribute('type', SulaTilesType.Rounded);
+        el.setAttribute('size', size);
+        el.setAttribute('icon', 'ph ph-star');
+        el.setAttribute('text', 'Star');
+        el.setAttribute('disabled', 'false');
+        wrapper.appendChild(labelEl);
+        wrapper.appendChild(el);
+        container.appendChild(wrapper);
+    });
+    return container;
+};
+export const TypeComparison = () => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.gap = '40px';
+    container.style.alignItems = 'flex-start';
+    container.style.flexWrap = 'wrap';
+    const types = [
+        {
+            type: SulaTilesType.Rounded,
+            label: 'Rounded',
+            text: 'Rounded',
+            subText: '',
+        },
+        {
+            type: SulaTilesType.Square,
+            label: 'Square Simple',
+            text: 'Square',
+            subText: '',
+        },
+        {
+            type: SulaTilesType.Square,
+            label: 'Square with SubText',
+            text: 'Square',
+            subText: 'With subtitle',
+        },
+    ];
+    types.forEach(({ type, label, text, subText }) => {
+        const wrapper = document.createElement('div');
+        wrapper.style.display = 'flex';
+        wrapper.style.flexDirection = 'column';
+        wrapper.style.alignItems = 'center';
+        wrapper.style.gap = '10px';
+        const labelEl = document.createElement('span');
+        labelEl.textContent = label;
+        labelEl.style.fontSize = '14px';
+        labelEl.style.fontWeight = 'bold';
+        const el = document.createElement('sula-tiles');
+        el.setAttribute('type', type);
+        el.setAttribute('size', SulaTilesSize.Default);
+        el.setAttribute('icon', 'ph ph-squares-four');
+        el.setAttribute('text', text);
+        if (subText)
+            el.setAttribute('sub-text', subText);
+        el.setAttribute('disabled', 'false');
+        wrapper.appendChild(labelEl);
+        wrapper.appendChild(el);
+        container.appendChild(wrapper);
+    });
+    return container;
+};
+export const InteractiveStates = () => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'grid';
+    container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';
+    container.style.gap = '20px';
+    const states = [
+        { disabled: false, label: 'Normal State', text: 'Interactive' },
+        { disabled: true, label: 'Disabled State', text: 'Disabled' },
+    ];
+    const types = [SulaTilesType.Rounded, SulaTilesType.Square];
+    types.forEach(type => {
+        states.forEach(({ disabled, label, text }) => {
+            const wrapper = document.createElement('div');
+            wrapper.style.display = 'flex';
+            wrapper.style.flexDirection = 'column';
+            wrapper.style.alignItems = 'center';
+            wrapper.style.gap = '10px';
+            const labelEl = document.createElement('span');
+            labelEl.textContent = `${type} - ${label}`;
+            labelEl.style.fontSize = '12px';
+            labelEl.style.textAlign = 'center';
+            const el = document.createElement('sula-tiles');
+            el.setAttribute('type', type);
+            el.setAttribute('size', SulaTilesSize.Default);
+            el.setAttribute('icon', disabled ? 'ph ph-x-circle' : 'ph ph-check-circle');
+            el.setAttribute('text', text);
+            if (type === SulaTilesType.Square) {
+                el.setAttribute('sub-text', disabled ? 'Cannot interact' : 'Click to interact');
+            }
+            el.setAttribute('disabled', disabled.toString());
+            wrapper.appendChild(labelEl);
+            wrapper.appendChild(el);
+            container.appendChild(wrapper);
+        });
+    });
+    return container;
+};
+//# sourceMappingURL=sula-tiles.stories.js.map

package/dist/collection/components/sula-tiles/sula-tiles.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-tiles.stories.js","sourceRoot":"","sources":["../../../src/components/sula-tiles/sula-tiles.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaTilesSize, SulaTilesType } from './model/sula-tiles.model';\n\nexport default {\n  title: 'Components/sula-tiles',\n  tags: ['autodocs'],\n  argTypes: {\n    type: {\n      control: { type: 'select' },\n      options: Object.values(SulaTilesType),\n      defaultValue: SulaTilesType.Rounded,\n      description: 'Tiles type - defines the visual style (rounded or square)',\n      type: {\n        required: false,\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.values(SulaTilesSize),\n      defaultValue: SulaTilesSize.Default,\n      description: 'Tiles size - only applies to rounded type',\n      type: {\n        required: false,\n      },\n    },\n    ellipsis: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Use ellipsis on tiles text when it overflows',\n      type: {\n        required: false,\n      },\n    },\n    icon: {\n      control: 'text',\n      defaultValue: 'ph ph-house',\n      description: 'Icon class or name to display in the tile',\n      type: {\n        required: false,\n      },\n    },\n    text: {\n      control: 'text',\n      defaultValue: 'Tile Text',\n      description: 'Main text content of the tile',\n      type: {\n        required: false,\n      },\n    },\n    subText: {\n      control: 'text',\n      defaultValue: '',\n      description: 'Secondary text content (only visible in square type)',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Disable the tile interaction and apply disabled styling',\n      type: {\n        required: false,\n      },\n    },\n\n    tileClicked: {\n      description: 'Event emitted when tile is clicked (not emitted if disabled)',\n      action: 'tileClicked',\n      table: {\n        category: 'Events',\n        type: { summary: 'CustomEvent<void>' },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'O componente Tiles Sula Design System é utilizado como a representação visual de bloco de ações. O utilizaremos em interfaces com carrocel e telas com opções de blocos de serviços.',\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.gap = '20px';\n  container.style.flexWrap = 'wrap';\n\n  const el = document.createElement('sula-tiles');\n\n  el.setAttribute('type', args.type);\n  el.setAttribute('size', args.size);\n  el.setAttribute('ellipsis', args.ellipsis.toString());\n  if (args.icon) el.setAttribute('icon', args.icon);\n  if (args.text) el.setAttribute('text', args.text);\n  if (args.subText) el.setAttribute('sub-text', args.subText);\n  el.setAttribute('disabled', args.disabled.toString());\n\n  el.addEventListener('tileClicked', event => {\n    if (args.tileClicked) {\n      args.tileClicked(event);\n    }\n  });\n\n  const wrapper = document.createElement('div');\n  wrapper.appendChild(el);\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nexport const DefaultRounded = Template.bind({});\nDefaultRounded.args = {\n  type: SulaTilesType.Rounded,\n  size: SulaTilesSize.Default,\n  ellipsis: false,\n  icon: 'ph ph-house',\n  text: 'Home',\n  subText: '',\n  disabled: false,\n};\n\nexport const LargeRounded = Template.bind({});\nLargeRounded.args = {\n  type: SulaTilesType.Rounded,\n  size: SulaTilesSize.Large,\n  ellipsis: false,\n  icon: 'ph ph-gear',\n  text: 'Settings',\n  subText: '',\n  disabled: false,\n};\n\nexport const SquareSimple = Template.bind({});\nSquareSimple.args = {\n  type: SulaTilesType.Square,\n  size: SulaTilesSize.Default,\n  ellipsis: false,\n  icon: 'ph ph-user',\n  text: 'Profile',\n  subText: '',\n  disabled: false,\n};\n\nexport const SquareWithSubText = Template.bind({});\nSquareWithSubText.args = {\n  type: SulaTilesType.Square,\n  size: SulaTilesSize.Default,\n  ellipsis: false,\n  icon: 'ph ph-chart-line',\n  text: 'Analytics',\n  subText: 'View detailed reports',\n  disabled: false,\n};\n\nexport const DisabledRounded = Template.bind({});\nDisabledRounded.args = {\n  type: SulaTilesType.Rounded,\n  size: SulaTilesSize.Default,\n  ellipsis: false,\n  icon: 'ph ph-lock',\n  text: 'Locked',\n  subText: '',\n  disabled: true,\n};\n\nexport const DisabledSquare = Template.bind({});\nDisabledSquare.args = {\n  type: SulaTilesType.Square,\n  size: SulaTilesSize.Default,\n  ellipsis: false,\n  icon: 'ph ph-x-circle',\n  text: 'Unavailable',\n  subText: 'Feature not available',\n  disabled: true,\n};\n\nexport const WithEllipsis = Template.bind({});\nWithEllipsis.args = {\n  type: SulaTilesType.Rounded,\n  size: SulaTilesSize.Default,\n  ellipsis: true,\n  icon: 'ph ph-file-text',\n  text: 'Very Long Text That Should Be Truncated',\n  subText: '',\n  disabled: false,\n};\n\nexport const InteractiveEventDemo = () => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '20px';\n\n  const title = document.createElement('h3');\n  title.textContent = 'Click Events Demo';\n  title.style.margin = '0 0 10px 0';\n\n  const tilesContainer = document.createElement('div');\n  tilesContainer.style.display = 'flex';\n  tilesContainer.style.gap = '20px';\n  tilesContainer.style.flexWrap = 'wrap';\n\n  const logContainer = document.createElement('div');\n  logContainer.style.padding = '15px';\n  logContainer.style.backgroundColor = '#f8f9fa';\n  logContainer.style.border = '1px solid #e9ecef';\n  logContainer.style.borderRadius = '6px';\n  logContainer.style.fontFamily = 'monospace';\n  logContainer.style.fontSize = '13px';\n  logContainer.style.maxHeight = '200px';\n  logContainer.style.overflowY = 'auto';\n  logContainer.innerHTML = '<strong>🎯 Event Log (Click the tiles below):</strong><br/><br/>';\n\n  const tiles = [\n    {\n      type: SulaTilesType.Rounded,\n      icon: 'ph ph-mouse',\n      text: 'Click Me!',\n      disabled: false,\n      id: 'rounded-active',\n    },\n    {\n      type: SulaTilesType.Square,\n      icon: 'ph ph-hand-pointing',\n      text: 'Interactive',\n      subText: 'Click to test',\n      disabled: false,\n      id: 'square-active',\n    },\n    {\n      type: SulaTilesType.Rounded,\n      icon: 'ph ph-prohibit',\n      text: 'Disabled',\n      disabled: true,\n      id: 'rounded-disabled',\n    },\n    {\n      type: SulaTilesType.Square,\n      icon: 'ph ph-x',\n      text: 'Disabled',\n      subText: 'No events',\n      disabled: true,\n      id: 'square-disabled',\n    },\n  ];\n\n  tiles.forEach(tile => {\n    const el = document.createElement('sula-tiles');\n    el.setAttribute('type', tile.type);\n    el.setAttribute('icon', tile.icon);\n    el.setAttribute('text', tile.text);\n    if (tile.subText) el.setAttribute('sub-text', tile.subText);\n    el.setAttribute('disabled', tile.disabled.toString());\n\n    el.addEventListener('tileClicked', () => {\n      const timestamp = new Date().toLocaleTimeString();\n      const status = tile.disabled ? '❌ (Should not fire)' : '✅';\n      const logEntry = `[${timestamp}] ${status} \"${tile.text}\" tile clicked<br/>`;\n      logContainer.innerHTML += logEntry;\n      logContainer.scrollTop = logContainer.scrollHeight;\n    });\n\n    tilesContainer.appendChild(el);\n  });\n\n  container.appendChild(title);\n  container.appendChild(tilesContainer);\n  container.appendChild(logContainer);\n\n  return container;\n};\n\nexport const DifferentIcons = () => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'grid';\n  container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';\n  container.style.gap = '20px';\n\n  const logContainer = document.createElement('div');\n  logContainer.style.gridColumn = '1 / -1';\n  logContainer.style.marginTop = '20px';\n  logContainer.style.padding = '10px';\n  logContainer.style.backgroundColor = '#f5f5f5';\n  logContainer.style.borderRadius = '4px';\n  logContainer.style.fontFamily = 'monospace';\n  logContainer.style.fontSize = '12px';\n  logContainer.style.maxHeight = '100px';\n  logContainer.style.overflowY = 'auto';\n  logContainer.innerHTML = '<strong>Click any tile to see events:</strong><br/>';\n\n  const tiles = [\n    { icon: 'ph ph-house', text: 'Home' },\n    { icon: 'ph ph-user', text: 'Profile' },\n    { icon: 'ph ph-gear', text: 'Settings' },\n    { icon: 'ph ph-chart-line', text: 'Analytics' },\n    { icon: 'ph ph-bell', text: 'Notifications' },\n    { icon: 'ph ph-envelope', text: 'Messages' },\n  ];\n\n  tiles.forEach(tile => {\n    const el = document.createElement('sula-tiles');\n    el.setAttribute('type', SulaTilesType.Rounded);\n    el.setAttribute('size', SulaTilesSize.Default);\n    el.setAttribute('icon', tile.icon);\n    el.setAttribute('text', tile.text);\n    el.setAttribute('disabled', 'false');\n\n    el.addEventListener('tileClicked', () => {\n      const timestamp = new Date().toLocaleTimeString();\n      const logEntry = `[${timestamp}] \"${tile.text}\" clicked<br/>`;\n      logContainer.innerHTML += logEntry;\n      logContainer.scrollTop = logContainer.scrollHeight;\n    });\n\n    container.appendChild(el);\n  });\n\n  container.appendChild(logContainer);\n  return container;\n};\n\nexport const SizeComparison = () => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.gap = '40px';\n  container.style.alignItems = 'center';\n  container.style.flexWrap = 'wrap';\n\n  const sizes = [\n    { size: SulaTilesSize.Default, label: 'Default' },\n    { size: SulaTilesSize.Large, label: 'Large' },\n  ];\n\n  sizes.forEach(({ size, label }) => {\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.flexDirection = 'column';\n    wrapper.style.alignItems = 'center';\n    wrapper.style.gap = '10px';\n\n    const labelEl = document.createElement('span');\n    labelEl.textContent = label;\n    labelEl.style.fontSize = '14px';\n    labelEl.style.fontWeight = 'bold';\n\n    const el = document.createElement('sula-tiles');\n    el.setAttribute('type', SulaTilesType.Rounded);\n    el.setAttribute('size', size);\n    el.setAttribute('icon', 'ph ph-star');\n    el.setAttribute('text', 'Star');\n    el.setAttribute('disabled', 'false');\n\n    wrapper.appendChild(labelEl);\n    wrapper.appendChild(el);\n    container.appendChild(wrapper);\n  });\n\n  return container;\n};\n\nexport const TypeComparison = () => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.gap = '40px';\n  container.style.alignItems = 'flex-start';\n  container.style.flexWrap = 'wrap';\n\n  const types = [\n    {\n      type: SulaTilesType.Rounded,\n      label: 'Rounded',\n      text: 'Rounded',\n      subText: '',\n    },\n    {\n      type: SulaTilesType.Square,\n      label: 'Square Simple',\n      text: 'Square',\n      subText: '',\n    },\n    {\n      type: SulaTilesType.Square,\n      label: 'Square with SubText',\n      text: 'Square',\n      subText: 'With subtitle',\n    },\n  ];\n\n  types.forEach(({ type, label, text, subText }) => {\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.flexDirection = 'column';\n    wrapper.style.alignItems = 'center';\n    wrapper.style.gap = '10px';\n\n    const labelEl = document.createElement('span');\n    labelEl.textContent = label;\n    labelEl.style.fontSize = '14px';\n    labelEl.style.fontWeight = 'bold';\n\n    const el = document.createElement('sula-tiles');\n    el.setAttribute('type', type);\n    el.setAttribute('size', SulaTilesSize.Default);\n    el.setAttribute('icon', 'ph ph-squares-four');\n    el.setAttribute('text', text);\n    if (subText) el.setAttribute('sub-text', subText);\n    el.setAttribute('disabled', 'false');\n\n    wrapper.appendChild(labelEl);\n    wrapper.appendChild(el);\n    container.appendChild(wrapper);\n  });\n\n  return container;\n};\n\nexport const InteractiveStates = () => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'grid';\n  container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';\n  container.style.gap = '20px';\n\n  const states = [\n    { disabled: false, label: 'Normal State', text: 'Interactive' },\n    { disabled: true, label: 'Disabled State', text: 'Disabled' },\n  ];\n\n  const types = [SulaTilesType.Rounded, SulaTilesType.Square];\n\n  types.forEach(type => {\n    states.forEach(({ disabled, label, text }) => {\n      const wrapper = document.createElement('div');\n      wrapper.style.display = 'flex';\n      wrapper.style.flexDirection = 'column';\n      wrapper.style.alignItems = 'center';\n      wrapper.style.gap = '10px';\n\n      const labelEl = document.createElement('span');\n      labelEl.textContent = `${type} - ${label}`;\n      labelEl.style.fontSize = '12px';\n      labelEl.style.textAlign = 'center';\n\n      const el = document.createElement('sula-tiles');\n      el.setAttribute('type', type);\n      el.setAttribute('size', SulaTilesSize.Default);\n      el.setAttribute('icon', disabled ? 'ph ph-x-circle' : 'ph ph-check-circle');\n      el.setAttribute('text', text);\n      if (type === SulaTilesType.Square) {\n        el.setAttribute('sub-text', disabled ? 'Cannot interact' : 'Click to interact');\n      }\n      el.setAttribute('disabled', disabled.toString());\n\n      wrapper.appendChild(labelEl);\n      wrapper.appendChild(el);\n      container.appendChild(wrapper);\n    });\n  });\n\n  return container;\n};\n"]}