@sula-tech/webcomponents 0.9.2 → 0.11.0

package/dist/collection/components/sula-segmented-control/sula-segmented-control.stories.js

@@ -0,0 +1,352 @@
+import { SulaSegmentedControlColor, SulaSegmentedControlSize, SulaSegmentedControlType } from "./model/sula-segmented-control.model";
+export default {
+    title: 'Components/sula-segmented-control',
+    tags: ['autodocs'],
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array de opções para o controle segmentado',
+            table: {
+                type: { summary: 'SulaSegmentedControlOption[]' },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaSegmentedControlType),
+            description: 'Tipo do controle segmentado (texto ou ícone)',
+            table: {
+                type: { summary: 'SulaSegmentedControlType' },
+                defaultValue: { summary: 'SulaSegmentedControlType.Text' },
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(SulaSegmentedControlSize),
+            description: 'Tamanho do controle segmentado',
+            table: {
+                type: { summary: 'SulaSegmentedControlSize' },
+                defaultValue: { summary: 'SulaSegmentedControlSize.Default' },
+            },
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.values(SulaSegmentedControlColor),
+            description: 'Cor de fundo do controle segmentado',
+            table: {
+                type: { summary: 'SulaSegmentedControlColor' },
+                defaultValue: { summary: 'SulaSegmentedControlColor.White' },
+            },
+        },
+        itemClicked: {
+            action: 'itemClicked',
+            description: 'Evento emitido quando um item é clicado',
+            table: {
+                type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },
+            },
+        },
+        itemHovered: {
+            action: 'itemHovered',
+            description: 'Evento emitido quando um item recebe hover',
+            table: {
+                type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },
+            },
+        },
+        itemBlur: {
+            action: 'itemBlur',
+            description: 'Evento emitido quando um item perde o foco',
+            table: {
+                type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+O componente **Sula Segmented Control** é utilizado para permitir que os usuários escolham entre
+múltiplas opções mutuamente exclusivas. É ideal para navegação entre visualizações ou filtros.
+
+### Características principais:
+- Suporte a diferentes tipos (Texto e Ícone)
+- Diferentes tamanhos (Default e Small)
+- Cores de fundo personalizáveis (White e Gray)
+- Suporte a chevron adicional nas opções
+- Eventos de clique, hover e blur
+      `,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'center';
+    container.style.minHeight = '80px';
+    if (args.color === SulaSegmentedControlColor.White) {
+        container.style.backgroundColor = '#f5f5f5';
+        container.style.padding = '20px';
+        container.style.borderRadius = '8px';
+    }
+    const el = document.createElement('sula-segmented-control');
+    el.items = args.items;
+    el.setAttribute('type', args.type);
+    el.setAttribute('size', args.size);
+    el.setAttribute('color', args.color);
+    el.addEventListener('itemClicked', args.itemClicked);
+    el.addEventListener('itemHovered', args.itemHovered);
+    el.addEventListener('itemBlur', args.itemBlur);
+    container.appendChild(el);
+    return container;
+};
+export const Playground = Template.bind({});
+Playground.args = {
+    items: [
+        { label: 'Opção 1', value: '1', selected: true },
+        { label: 'Opção 2', value: '2' },
+        { label: 'Opção 3', value: '3' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+export const TextType = Template.bind({});
+TextType.args = {
+    items: [
+        { label: 'Todos', value: 'all', selected: true },
+        { label: 'Ativos', value: 'active' },
+        { label: 'Inativos', value: 'inactive' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+TextType.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com texto.',
+        },
+    },
+};
+export const IconType = Template.bind({});
+IconType.args = {
+    items: [
+        { icon: 'ph ph-house', value: 'home', selected: true },
+        { icon: 'ph ph-user', value: 'user' },
+        { icon: 'ph ph-gear', value: 'settings' },
+    ],
+    type: SulaSegmentedControlType.Icon,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+IconType.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com ícones.',
+        },
+    },
+};
+export const WithChevron = Template.bind({});
+WithChevron.args = {
+    items: [
+        { label: 'Filtro 1', value: '1', addChevron: true, selected: true },
+        { label: 'Filtro 2', value: '2', addChevron: true },
+        { label: 'Filtro 3', value: '3', addChevron: true },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+WithChevron.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com chevron nas opções.',
+        },
+    },
+};
+export const SmallSize = Template.bind({});
+SmallSize.args = {
+    items: [
+        { label: 'Pequeno 1', value: '1', selected: true },
+        { label: 'Pequeno 2', value: '2' },
+        { label: 'Pequeno 3', value: '3' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Small,
+    color: SulaSegmentedControlColor.White,
+};
+SmallSize.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado em tamanho pequeno.',
+        },
+    },
+};
+export const Sizes = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '16px';
+    container.style.alignItems = 'center';
+    container.style.padding = '20px';
+    container.style.backgroundColor = '#f5f5f5';
+    container.style.borderRadius = '8px';
+    const defaultControl = document.createElement('sula-segmented-control');
+    defaultControl.items = [
+        { label: 'Default 1', value: '1', selected: true },
+        { label: 'Default 2', value: '2' },
+        { label: 'Default 3', value: '3' },
+    ];
+    defaultControl.setAttribute('size', SulaSegmentedControlSize.Default);
+    const smallControl = document.createElement('sula-segmented-control');
+    smallControl.items = [
+        { label: 'Small 1', value: '1', selected: true },
+        { label: 'Small 2', value: '2' },
+        { label: 'Small 3', value: '3' },
+    ];
+    smallControl.setAttribute('size', SulaSegmentedControlSize.Small);
+    container.appendChild(defaultControl);
+    container.appendChild(smallControl);
+    return container;
+};
+Sizes.parameters = {
+    docs: {
+        description: {
+            story: 'Comparação entre os diferentes tamanhos disponíveis.',
+        },
+    },
+};
+export const GrayBackground = Template.bind({});
+GrayBackground.args = {
+    items: [
+        { label: 'Opção 1', value: '1', selected: true },
+        { label: 'Opção 2', value: '2' },
+        { label: 'Opção 3', value: '3' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.Gray,
+};
+GrayBackground.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com fundo cinza.',
+        },
+    },
+};
+export const ColorVariations = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '16px';
+    container.style.alignItems = 'center';
+    container.style.padding = '20px';
+    container.style.backgroundColor = '#f5f5f5';
+    container.style.borderRadius = '8px';
+    const whiteControl = document.createElement('sula-segmented-control');
+    whiteControl.items = [
+        { label: 'White 1', value: '1', selected: true },
+        { label: 'White 2', value: '2' },
+        { label: 'White 3', value: '3' },
+    ];
+    whiteControl.setAttribute('color', SulaSegmentedControlColor.White);
+    const grayControl = document.createElement('sula-segmented-control');
+    grayControl.items = [
+        { label: 'Gray 1', value: '1', selected: true },
+        { label: 'Gray 2', value: '2' },
+        { label: 'Gray 3', value: '3' },
+    ];
+    grayControl.setAttribute('color', SulaSegmentedControlColor.Gray);
+    container.appendChild(whiteControl);
+    container.appendChild(grayControl);
+    return container;
+};
+ColorVariations.parameters = {
+    docs: {
+        description: {
+            story: 'Diferentes cores de fundo disponíveis.',
+        },
+    },
+};
+export const ManyOptions = Template.bind({});
+ManyOptions.args = {
+    items: [
+        { label: 'Janeiro', value: '1', selected: true },
+        { label: 'Fevereiro', value: '2' },
+        { label: 'Março', value: '3' },
+        { label: 'Abril', value: '4' },
+        { label: 'Maio', value: '5' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+ManyOptions.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com múltiplas opções.',
+        },
+    },
+};
+export const AllVariations = () => {
+    const container = document.createElement('div');
+    container.style.display = 'grid';
+    container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(300px, 1fr))';
+    container.style.gap = '24px';
+    container.style.padding = '20px';
+    container.style.backgroundColor = '#f5f5f5';
+    container.style.borderRadius = '8px';
+    const variations = [
+        {
+            items: [
+                { label: 'Text White', value: '1', selected: true },
+                { label: 'Opção 2', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Text,
+            color: SulaSegmentedControlColor.White,
+        },
+        {
+            items: [
+                { label: 'Text Gray', value: '1', selected: true },
+                { label: 'Opção 2', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Text,
+            color: SulaSegmentedControlColor.Gray,
+        },
+        {
+            items: [
+                { icon: 'ph ph-house', value: '1', selected: true },
+                { icon: 'ph ph-user', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Icon,
+            color: SulaSegmentedControlColor.White,
+        },
+        {
+            items: [
+                { icon: 'ph ph-house', value: '1', selected: true },
+                { icon: 'ph ph-user', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Icon,
+            color: SulaSegmentedControlColor.Gray,
+        },
+    ];
+    variations.forEach(variation => {
+        const control = document.createElement('sula-segmented-control');
+        control.items = variation.items;
+        control.setAttribute('type', variation.type);
+        control.setAttribute('color', variation.color);
+        control.setAttribute('size', SulaSegmentedControlSize.Default);
+        container.appendChild(control);
+    });
+    return container;
+};
+AllVariations.parameters = {
+    docs: {
+        description: {
+            story: 'Visão geral de todas as combinações de tipo e cor.',
+        },
+    },
+};
+//# sourceMappingURL=sula-segmented-control.stories.js.map

package/dist/collection/components/sula-segmented-control/sula-segmented-control.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/sula-segmented-control/sula-segmented-control.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaSegmentedControlColor, SulaSegmentedControlSize, SulaSegmentedControlType } from './model/sula-segmented-control.model';\n\nexport default {\n  title: 'Components/sula-segmented-control',\n  tags: ['autodocs'],\n  argTypes: {\n    items: {\n      control: 'object',\n      description: 'Array de opções para o controle segmentado',\n      table: {\n        type: { summary: 'SulaSegmentedControlOption[]' },\n        defaultValue: { summary: '[]' },\n      },\n    },\n    type: {\n      control: { type: 'select' },\n      options: Object.values(SulaSegmentedControlType),\n      description: 'Tipo do controle segmentado (texto ou ícone)',\n      table: {\n        type: { summary: 'SulaSegmentedControlType' },\n        defaultValue: { summary: 'SulaSegmentedControlType.Text' },\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.values(SulaSegmentedControlSize),\n      description: 'Tamanho do controle segmentado',\n      table: {\n        type: { summary: 'SulaSegmentedControlSize' },\n        defaultValue: { summary: 'SulaSegmentedControlSize.Default' },\n      },\n    },\n    color: {\n      control: { type: 'select' },\n      options: Object.values(SulaSegmentedControlColor),\n      description: 'Cor de fundo do controle segmentado',\n      table: {\n        type: { summary: 'SulaSegmentedControlColor' },\n        defaultValue: { summary: 'SulaSegmentedControlColor.White' },\n      },\n    },\n    itemClicked: {\n      action: 'itemClicked',\n      description: 'Evento emitido quando um item é clicado',\n      table: {\n        type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },\n      },\n    },\n    itemHovered: {\n      action: 'itemHovered',\n      description: 'Evento emitido quando um item recebe hover',\n      table: {\n        type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },\n      },\n    },\n    itemBlur: {\n      action: 'itemBlur',\n      description: 'Evento emitido quando um item perde o foco',\n      table: {\n        type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nO componente **Sula Segmented Control** é utilizado para permitir que os usuários escolham entre\nmúltiplas opções mutuamente exclusivas. É ideal para navegação entre visualizações ou filtros.\n\n### Características principais:\n- Suporte a diferentes tipos (Texto e Ícone)\n- Diferentes tamanhos (Default e Small)\n- Cores de fundo personalizáveis (White e Gray)\n- Suporte a chevron adicional nas opções\n- Eventos de clique, hover e blur\n      `,\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.alignItems = 'center';\n  container.style.justifyContent = 'center';\n  container.style.minHeight = '80px';\n\n  if (args.color === SulaSegmentedControlColor.White) {\n    container.style.backgroundColor = '#f5f5f5';\n    container.style.padding = '20px';\n    container.style.borderRadius = '8px';\n  }\n\n  const el = document.createElement('sula-segmented-control');\n\n  el.items = args.items;\n  el.setAttribute('type', args.type);\n  el.setAttribute('size', args.size);\n  el.setAttribute('color', args.color);\n\n  el.addEventListener('itemClicked', args.itemClicked);\n  el.addEventListener('itemHovered', args.itemHovered);\n  el.addEventListener('itemBlur', args.itemBlur);\n\n  container.appendChild(el);\n  return container;\n};\n\nexport const Playground = Template.bind({});\nPlayground.args = {\n  items: [\n    { label: 'Opção 1', value: '1', selected: true },\n    { label: 'Opção 2', value: '2' },\n    { label: 'Opção 3', value: '3' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\n\nexport const TextType = Template.bind({});\nTextType.args = {\n  items: [\n    { label: 'Todos', value: 'all', selected: true },\n    { label: 'Ativos', value: 'active' },\n    { label: 'Inativos', value: 'inactive' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nTextType.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com texto.',\n    },\n  },\n};\n\nexport const IconType = Template.bind({});\nIconType.args = {\n  items: [\n    { icon: 'ph ph-house', value: 'home', selected: true },\n    { icon: 'ph ph-user', value: 'user' },\n    { icon: 'ph ph-gear', value: 'settings' },\n  ],\n  type: SulaSegmentedControlType.Icon,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nIconType.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com ícones.',\n    },\n  },\n};\n\nexport const WithChevron = Template.bind({});\nWithChevron.args = {\n  items: [\n    { label: 'Filtro 1', value: '1', addChevron: true, selected: true },\n    { label: 'Filtro 2', value: '2', addChevron: true },\n    { label: 'Filtro 3', value: '3', addChevron: true },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nWithChevron.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com chevron nas opções.',\n    },\n  },\n};\n\nexport const SmallSize = Template.bind({});\nSmallSize.args = {\n  items: [\n    { label: 'Pequeno 1', value: '1', selected: true },\n    { label: 'Pequeno 2', value: '2' },\n    { label: 'Pequeno 3', value: '3' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Small,\n  color: SulaSegmentedControlColor.White,\n};\nSmallSize.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado em tamanho pequeno.',\n    },\n  },\n};\n\nexport const Sizes = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '16px';\n  container.style.alignItems = 'center';\n  container.style.padding = '20px';\n  container.style.backgroundColor = '#f5f5f5';\n  container.style.borderRadius = '8px';\n\n  const defaultControl = document.createElement('sula-segmented-control');\n  defaultControl.items = [\n    { label: 'Default 1', value: '1', selected: true },\n    { label: 'Default 2', value: '2' },\n    { label: 'Default 3', value: '3' },\n  ];\n  defaultControl.setAttribute('size', SulaSegmentedControlSize.Default);\n\n  const smallControl = document.createElement('sula-segmented-control');\n  smallControl.items = [\n    { label: 'Small 1', value: '1', selected: true },\n    { label: 'Small 2', value: '2' },\n    { label: 'Small 3', value: '3' },\n  ];\n  smallControl.setAttribute('size', SulaSegmentedControlSize.Small);\n\n  container.appendChild(defaultControl);\n  container.appendChild(smallControl);\n\n  return container;\n};\nSizes.parameters = {\n  docs: {\n    description: {\n      story: 'Comparação entre os diferentes tamanhos disponíveis.',\n    },\n  },\n};\n\nexport const GrayBackground = Template.bind({});\nGrayBackground.args = {\n  items: [\n    { label: 'Opção 1', value: '1', selected: true },\n    { label: 'Opção 2', value: '2' },\n    { label: 'Opção 3', value: '3' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.Gray,\n};\nGrayBackground.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com fundo cinza.',\n    },\n  },\n};\n\nexport const ColorVariations = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '16px';\n  container.style.alignItems = 'center';\n  container.style.padding = '20px';\n  container.style.backgroundColor = '#f5f5f5';\n  container.style.borderRadius = '8px';\n\n  const whiteControl = document.createElement('sula-segmented-control');\n  whiteControl.items = [\n    { label: 'White 1', value: '1', selected: true },\n    { label: 'White 2', value: '2' },\n    { label: 'White 3', value: '3' },\n  ];\n  whiteControl.setAttribute('color', SulaSegmentedControlColor.White);\n\n  const grayControl = document.createElement('sula-segmented-control');\n  grayControl.items = [\n    { label: 'Gray 1', value: '1', selected: true },\n    { label: 'Gray 2', value: '2' },\n    { label: 'Gray 3', value: '3' },\n  ];\n  grayControl.setAttribute('color', SulaSegmentedControlColor.Gray);\n\n  container.appendChild(whiteControl);\n  container.appendChild(grayControl);\n\n  return container;\n};\nColorVariations.parameters = {\n  docs: {\n    description: {\n      story: 'Diferentes cores de fundo disponíveis.',\n    },\n  },\n};\n\nexport const ManyOptions = Template.bind({});\nManyOptions.args = {\n  items: [\n    { label: 'Janeiro', value: '1', selected: true },\n    { label: 'Fevereiro', value: '2' },\n    { label: 'Março', value: '3' },\n    { label: 'Abril', value: '4' },\n    { label: 'Maio', value: '5' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nManyOptions.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com múltiplas opções.',\n    },\n  },\n};\n\nexport const AllVariations = () => {\n  const container = document.createElement('div');\n  container.style.display = 'grid';\n  container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(300px, 1fr))';\n  container.style.gap = '24px';\n  container.style.padding = '20px';\n  container.style.backgroundColor = '#f5f5f5';\n  container.style.borderRadius = '8px';\n\n  const variations = [\n    {\n      items: [\n        { label: 'Text White', value: '1', selected: true },\n        { label: 'Opção 2', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Text,\n      color: SulaSegmentedControlColor.White,\n    },\n    {\n      items: [\n        { label: 'Text Gray', value: '1', selected: true },\n        { label: 'Opção 2', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Text,\n      color: SulaSegmentedControlColor.Gray,\n    },\n    {\n      items: [\n        { icon: 'ph ph-house', value: '1', selected: true },\n        { icon: 'ph ph-user', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Icon,\n      color: SulaSegmentedControlColor.White,\n    },\n    {\n      items: [\n        { icon: 'ph ph-house', value: '1', selected: true },\n        { icon: 'ph ph-user', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Icon,\n      color: SulaSegmentedControlColor.Gray,\n    },\n  ];\n\n  variations.forEach(variation => {\n    const control = document.createElement('sula-segmented-control');\n    control.items = variation.items;\n    control.setAttribute('type', variation.type);\n    control.setAttribute('color', variation.color);\n    control.setAttribute('size', SulaSegmentedControlSize.Default);\n    container.appendChild(control);\n  });\n\n  return container;\n};\nAllVariations.parameters = {\n  docs: {\n    description: {\n      story: 'Visão geral de todas as combinações de tipo e cor.',\n    },\n  },\n};\n"]}

package/dist/collection/components/sula-switch/sula-switch.js

@@ -35,23 +35,23 @@ export class SulaSwitch {
         };
     }
     render() {
-        return (h(Host, { key: 'bbc4902ea0d731995e0c8600243018a171b65120' }, h("div", { key: 'b7e277261642fb9c909a8549dfe7a6295cb4dc01', class: {
+        return (h(Host, { key: '5147ccb90d8e6a9b3de3eaa1ceefb3dd4e655f37' }, h("div", { key: 'ebae10c01afe26b23afcbaa86bab531fe56e617f', class: {
                 'outline-none': true,
                 'flex items-center space-x-12': !!this.label && this.type === SulaSwitchType.Default,
                 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
                 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaSwitchType.List && !this.disabled,
                 'container-focus': this.isFocus && this.type === SulaSwitchType.List,
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: 'd15acc295e424576ab121dd5419465539ecfe440', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '01e72df5708151314ff0155bcf7d9a7fafbd55e2', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'c6871b59d4fe3094196bff0c78463910a2c900bd', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'ec2df308d747f232d71dc9d3dbd6fc99c25f85d8', class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '6e3132438518dee7a1337db52a204387d2828ec3', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '830b2c235cc07efb236f6a86d90dd7d62b3b776a', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'd085e4e303aad5b75d275d894f03b0e9ea201a47', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'ff6f20db45aa6c0050b233ff541f8973cd5f4244', class: {
                 'switch-container w-56 h-32 flex items-center rounded-xxl p-2 outline-none': true,
                 'switch-on bg-brand-primary justify-end': this.active,
                 'switch-off bg-neutral-neutral-3 justify-start': !this.active,
                 'cursor-not-allowed bg-states-bg-disabled': this.disabled,
                 'switch-focus': this.isFocus && this.type === SulaSwitchType.Default,
-            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'a10f04862c4257df7a1753d0569dc32e8c0cd099', class: {
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'e43cca2e88a20a524201ed0d785a8ba81ed8a4f7', class: {
                 'switch-thumb w-[28px] h-[28px] rounded-full flex justify-center items-center': true,
                 'bg-negative-negative-1': !this.disabled,
                 'bg-states-bg-disabled shadow-md': this.disabled,
-            } }, h("div", { key: '50c1173d038c8db02559aa6041bffc42a318964a', class: {
+            } }, h("div", { key: '248043d5d4e7e53718563cc722937644362c47bf', class: {
                 'switch-indicator rounded-full': true,
                 'switch-indicator-on w-12 h-12 bg-brand-primary': this.active,
                 'switch-indicator-off w-[10px] h-4 bg-neutral-neutral-4': !this.active,

package/dist/collection/components/sula-tag/sula-tag.js

@@ -72,14 +72,14 @@ export class SulaTag {
         return iconStatusStyles[this.iconStatus];
     }
     render() {
-        return (h(Host, { key: 'ef5f2947ea5a21a8f924a6b5140ea9382c268ac4' }, h("div", { key: 'bd55eb96395012c1a3634d193e14069a88be1b2d', class: {
+        return (h(Host, { key: '7adccbc8b3035550420d5e0eac1d46f68052526d' }, h("div", { key: '65526b32c1e2db8888d70b79732526e7b0e20812', class: {
                 'flex items-center rounded-xxl w-fit': true,
                 [this.getSizeClass()]: true,
                 [this.getAppearanceClass()]: true,
-            } }, this.icon && (h("div", { key: '6c37c84e7a215d0bb8f29048c0e53f4f0fa7953e', class: {
+            } }, this.icon && (h("div", { key: '3808e66f0596f2e2f73520bfccb7504f4b20b6cf', class: {
                 'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
                 [this.getIconStatusClass()]: true,
-            } }, h("sula-icon", { key: 'f5ce8b83627858d804b67b15372173a94d1d4695', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'ca436796841e583b7e5d80278cd3d0d7138678f3', class: {
+            } }, h("sula-icon", { key: '88a00ebd5e3692d72f832d6fe5a1db74cb608334', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'a8bfa714580e86bbc9972320a6ae9f9820076f5b', class: {
                 'text-base leading-4': true,
                 [this.getTextColorClass()]: true,
                 [this.getTextWeightClass()]: true,

package/dist/collection/components/sula-textarea/sula-textarea.js

@@ -124,32 +124,32 @@ export class SulaTextarea {
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h(Host, { key: '2fcc7b99d23820764799bcf3eed0a7605c9d2f72', ref: node => (this.node = node) }, h("div", { key: '5b6fecfaef896755b1862cf8468fb31297169885' }, h("div", { key: 'ed641bb610135c66bd663bfa284f0d81e7e1738d', id: "textarea-container", class: {
+        return (h(Host, { key: 'f920e3734338d888531522bf9140c8d3982e2f69', ref: node => (this.node = node) }, h("div", { key: '2afeec5069358b61d7e5b26cb9aac627dd76f845' }, h("div", { key: '79273334d739ddf9d9be0ed536497764fa877ffc', id: "textarea-container", class: {
                 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
                 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
                 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-text': !this.disabled,
-            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '69ad1cd86d7395ecdeb7a6aeac02273370a10fef', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '10b0a9b82f07d8c9b8267d49f3c2d32e3c508bd8', class: {
                 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '0352260db567f497becd5f8f347cf206aecb595b', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'e3bed9dc020446dceb4149a667b60af5dc55bff3', class: {
                 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
                 'text-sm top-12 left-16': this.isActive,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'edeacd0e14078081c1d5986e60852b8ed5b6a6a6', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
+            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '1ba336d4bcf9c276b69b65c8165edc1b30a2490b', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
                 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'f1036cde3cf5bbd60fba5938fc2054d12d110624', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'db55a3ae78e63964a9d26a8cd44a71874a500004', id: "textarea-help-text", class: {
+            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '359a206d17995cec9bdbd3c9832de597827e1d0f', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '64e46f682c87605bd793d0fffe0f74eea16931c3', id: "textarea-help-text", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.helpText)), this.maxLength && (h("div", { key: '4e73a6934d1b959c86fa2c9f4cfb5dadaf20e943', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h("div", { key: '761b430f847ea583d720570320f7fdbed53a5d6f', id: "max-length-container", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,

package/dist/collection/components/sula-textfield/sula-textfield.js

@@ -129,14 +129,14 @@ export class SulaTextfield {
         return this.icon;
     }
     render() {
-        return (h(Host, { key: '7f3d6752bea3a556fa77a52513eabe0655d9234d', ref: node => (this.node = node) }, h("div", { key: 'cd9cbc06a0244161c06e770d87834ddd7311ada3' }, h("div", { key: 'b66f4f6f2a5cfdcbc212264d500d219b4deb335e', id: "button-container", class: {
+        return (h(Host, { key: '40a7bb18169b3d8970b45c694c1893ff9f64bbab', ref: node => (this.node = node) }, h("div", { key: '6777fa4dd7436443969d0c0e1142be8c4eb284e7' }, h("div", { key: 'd3d7789d4d36d65adedf1ad6b6e62c8957ebb680', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '79eabd37134b96bbb5a315ca73d81d0c8be01ce4', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd24af603a0e365d1482daea31b75fa8e86fd5e8a', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: 'aea523483b4a39f31b0d2c9506001d69c397da70', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: '2e3d9fbe37ba1dc5aceea8e8ce7e6152f740a955', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: 'd6f5aacd486e093d64307117d8c6b0bfea460f49', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'cfc400df76f2c487a09b641c101543a3e2895bd1', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '8d450abc836ba702aeda16f4f6c1d379373ee698', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'e0d25ac6878865510a0afc793d81b07d8a016bb5', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: '6384a6d5468b03bef0ddf2e0345438efe1b5fd32', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '956eadf48754f760e062d83663e32c47fcff1337', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '99e202b916e25409144476a9c57fe75e0753f4ff', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: '1bac9e8fff8f951ca2dd2fcbc60b5efe97757254', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: 'cb1626373a04dda96120a28bb982b72db41e3b4e', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: '09050fd2dc99bc07a73565804a5332bddfa2883c', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: '120077ac071a88964d824f66117eb9b4a97ca93c', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: 'e1cf2bd5e34d00125807f12d853c0630e1061434', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'fd485e6cd34d4a90df9f15e33359e5ed02c4bf82', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: '70b2df0825f91a40db9e2e111c83947e8df6c7e9', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
     static get is() { return "sula-textfield"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class SulaTiles {
         return (h("div", { class: this.getTextContainerClasses() }, h("span", { class: this.getTextClasses(true), title: this.ellipsis ? this.text : undefined }, this.text), this.hasSubText && (h("span", { class: this.getTextClasses(false), title: this.ellipsis ? this.subText : undefined }, this.subText))));
     }
     render() {
-        return (h(Host, { key: '32ee3b19743f75052428014a010545e4a6c9098b' }, h("div", { key: '09384829c191d1ec6518e0ccbc3ac4c290e1e798', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
+        return (h(Host, { key: '77ee1e56a324ab1971d9e81288222087363bb4b6' }, h("div", { key: '88acc4015fcf2cbe96ad300b17428b6e06d713e1', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
     }
     static get is() { return "sula-tiles"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-timeline-list/sula-timeline-list.js

@@ -37,7 +37,7 @@ export class SulaTimelineList {
         return iconByStatus[status];
     }
     render() {
-        return (h(Host, { key: '61a3d229e04aa2935ef1d03fca3aa519aa21d13b' }, h("div", { key: 'cd8c1483e94ea8f8cf2e0c51e400528f83fcf9f5', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
+        return (h(Host, { key: '7dc177fdc19ba097bd9cf686036817c883f25051' }, h("div", { key: '265a172c85656bdbd04ab2517f50b7fe5d558f82', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
             const isLastItem = index === this.sulaTimelineList.length - 1;
             return (h("div", { class: {
                     'relative timeline-item': true,

package/dist/collection/testing/e2e-setup.js

@@ -0,0 +1,47 @@
+const pages = [];
+const globalAny = global;
+const originalNewTestPage = globalAny.__NEW_TEST_PAGE__;
+if (typeof originalNewTestPage === 'function') {
+    globalAny.__NEW_TEST_PAGE__ = async (...args) => {
+        const page = await originalNewTestPage(...args);
+        pages.push(page);
+        return page;
+    };
+}
+afterEach(async () => {
+    const pagesToClose = [];
+    const keepAlivePages = [];
+    for (const page of pages) {
+        if (page.__keepAlive) {
+            keepAlivePages.push(page);
+        }
+        else {
+            pagesToClose.push(page);
+        }
+    }
+    pages.length = 0;
+    pages.push(...keepAlivePages);
+    const closePromises = pagesToClose
+        .filter(page => page && typeof page.close === 'function')
+        .map(page => page.close().catch(() => {
+        // Ignore errors when the page is already closed.
+    }));
+    if (closePromises.length > 0) {
+        await Promise.all(closePromises);
+    }
+    // Clear stale element/event handles on keep-alive pages after each test.
+    for (const page of keepAlivePages) {
+        const pageAny = page;
+        if (Array.isArray(pageAny._e2eElements)) {
+            pageAny._e2eElements.length = 0;
+        }
+        if (pageAny._e2eEvents instanceof Map) {
+            pageAny._e2eEvents.clear();
+        }
+        if (typeof pageAny._e2eEventIds === 'number') {
+            pageAny._e2eEventIds = 0;
+        }
+    }
+});
+export {};
+//# sourceMappingURL=e2e-setup.js.map

package/dist/collection/testing/e2e-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"e2e-setup.js","sourceRoot":"","sources":["../../src/testing/e2e-setup.ts"],"names":[],"mappings":"AAEA,MAAM,KAAK,GAAc,EAAE,CAAC;AAC5B,MAAM,SAAS,GAAG,MAA0F,CAAC;AAC7G,MAAM,mBAAmB,GAAG,SAAS,CAAC,iBAAiB,CAAC;AAExD,IAAI,OAAO,mBAAmB,KAAK,UAAU,EAAE,CAAC;IAC9C,SAAS,CAAC,iBAAiB,GAAG,KAAK,EAAE,GAAG,IAAe,EAAE,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,mBAAmB,CAAC,GAAG,IAAI,CAAC,CAAC;QAChD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,KAAK,IAAI,EAAE;IACnB,MAAM,YAAY,GAAc,EAAE,CAAC;IACnC,MAAM,cAAc,GAAc,EAAE,CAAC;IAErC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAK,IAAY,CAAC,WAAW,EAAE,CAAC;YAC9B,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACjB,KAAK,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,CAAC;IAE9B,MAAM,aAAa,GAAG,YAAY;SAC/B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC;SACxD,GAAG,CAAC,IAAI,CAAC,EAAE,CACV,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE;QACtB,iDAAiD;IACnD,CAAC,CAAC,CACH,CAAC;IAEJ,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC7B,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC;IAED,yEAAyE;IACzE,KAAK,MAAM,IAAI,IAAI,cAAc,EAAE,CAAC;QAClC,MAAM,OAAO,GAAG,IAAW,CAAC;QAC5B,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,OAAO,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,OAAO,CAAC,UAAU,YAAY,GAAG,EAAE,CAAC;YACtC,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC;QACD,IAAI,OAAO,OAAO,CAAC,YAAY,KAAK,QAAQ,EAAE,CAAC;YAC7C,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;AACH,CAAC,CAAC,CAAC","sourcesContent":["import type { E2EPage } from '@stencil/core/testing';\n\nconst pages: E2EPage[] = [];\nconst globalAny = global as typeof global & { __NEW_TEST_PAGE__?: (...args: unknown[]) => Promise<E2EPage> };\nconst originalNewTestPage = globalAny.__NEW_TEST_PAGE__;\n\nif (typeof originalNewTestPage === 'function') {\n  globalAny.__NEW_TEST_PAGE__ = async (...args: unknown[]) => {\n    const page = await originalNewTestPage(...args);\n    pages.push(page);\n    return page;\n  };\n}\n\nafterEach(async () => {\n  const pagesToClose: E2EPage[] = [];\n  const keepAlivePages: E2EPage[] = [];\n\n  for (const page of pages) {\n    if ((page as any).__keepAlive) {\n      keepAlivePages.push(page);\n    } else {\n      pagesToClose.push(page);\n    }\n  }\n\n  pages.length = 0;\n  pages.push(...keepAlivePages);\n\n  const closePromises = pagesToClose\n    .filter(page => page && typeof page.close === 'function')\n    .map(page =>\n      page.close().catch(() => {\n        // Ignore errors when the page is already closed.\n      }),\n    );\n\n  if (closePromises.length > 0) {\n    await Promise.all(closePromises);\n  }\n\n  // Clear stale element/event handles on keep-alive pages after each test.\n  for (const page of keepAlivePages) {\n    const pageAny = page as any;\n    if (Array.isArray(pageAny._e2eElements)) {\n      pageAny._e2eElements.length = 0;\n    }\n    if (pageAny._e2eEvents instanceof Map) {\n      pageAny._e2eEvents.clear();\n    }\n    if (typeof pageAny._e2eEventIds === 'number') {\n      pageAny._e2eEventIds = 0;\n    }\n  }\n});\n"]}

package/dist/components/{p-Bgqd8BiV.js → p-CD0__3qt.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$1, a as SulaLoaderSize } from './p-BUnU7bjf.js';
-import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
+import { d as defineCustomElement$1, a as SulaLoaderSize } from './p-CkPiwCwQ.js';
+import { d as defineCustomElement$2 } from './p-DO7voMbe.js';
 
 var SulaButtonAppearance;
 (function (SulaButtonAppearance) {
@@ -184,7 +184,7 @@ const SulaButton = /*@__PURE__*/ proxyCustomElement(class SulaButton extends H {
         return SulaLoaderSize.Medium;
     }
     render() {
-        return (h(Host, { key: '8ad1fe3267dba64fa2ebfc01473f9eaa3164154f' }, h("button", { key: 'c71cf6caa78e79e4b8a8c47dc161830b5814a8bf', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled || this.loading, onClick: this.handleClick }, this.loading && (h("div", { key: 'f8742f3ed286c9cbf491cd8e0f457603ecd1ed58' }, h("sula-loader", { key: '31f3e0e5a3c920d80b8909ead485c487c8121860', size: this.getLoadingSize() }))), !this.loading && (h("div", { key: '2779b0b1030542e8d0f60c93ff5469bdb7412ad8', class: "flex w-full justify-center items-center" }, this.leftIcon && h("sula-icon", { key: 'e58369da6b7ad85672dadb557e20797bde2d170d', icon: this.leftIcon, customClass: "text-lg mr-8" }), this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon(), this.rightIcon && h("sula-icon", { key: '81b66dcf02b3db28ed8fca0da2ad8c41f26f051d', icon: this.rightIcon, customClass: "text-lg ml-8" }))))));
+        return (h(Host, { key: '1c1409076f20518df6a3a722d40f3ea80ca66f76' }, h("button", { key: '418ecd2a69e07eeccd8f9f42951ef4e7739e10d9', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled || this.loading, onClick: this.handleClick }, this.loading && (h("div", { key: 'b3e1dce8d48638856806552e2dc1cd4d135673f6' }, h("sula-loader", { key: 'af9ea685849daf30b45518c6f13b71b9e9e48509', size: this.getLoadingSize() }))), !this.loading && (h("div", { key: 'f865dbf7286efb931c89b4fc366c2b2410b82516', class: "flex w-full justify-center items-center" }, this.leftIcon && h("sula-icon", { key: '24ced9ecfd42c590f884226ffb0d135164febeed', icon: this.leftIcon, customClass: "text-lg mr-8" }), this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon(), this.rightIcon && h("sula-icon", { key: 'def421acb1a2d3e66fd0556e20ba9ddb7f2789e3', icon: this.rightIcon, customClass: "text-lg ml-8" }))))));
     }
     static get style() { return sulaButtonCss; }
 }, [1, "sula-button", {
@@ -226,6 +226,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { SulaButton as S, SulaButtonAppearance as a, defineCustomElement as d };
-//# sourceMappingURL=p-Bgqd8BiV.js.map
+//# sourceMappingURL=p-CD0__3qt.js.map
 
-//# sourceMappingURL=p-Bgqd8BiV.js.map
+//# sourceMappingURL=p-CD0__3qt.js.map