@sula-tech/webcomponents 0.17.5 → 0.17.7

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

@@ -0,0 +1,401 @@
+const BRAND_IMAGE = `data:image/svg+xml;utf8,${encodeURIComponent(`
+	<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect width="80" height="80" rx="20" fill="#E5231B"/>
+		<rect x="12" y="12" width="56" height="56" rx="18" fill="white" fill-opacity="0.08"/>
+		<path d="M52 24H35.5C31.3579 24 28 27.3579 28 31.5C28 35.6421 31.3579 39 35.5 39H44.5C48.6421 39 52 42.3579 52 46.5C52 50.6421 48.6421 54 44.5 54H28" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+	</svg>
+`)}`;
+const defaultItems = [
+    {
+        id: 'overview',
+        label: 'Visao Geral',
+        icon: 'ph ph-house-line',
+        selected: true,
+    },
+    {
+        id: 'operations',
+        label: 'Operacoes',
+        icon: 'ph ph-briefcase',
+        expanded: true,
+        children: [
+            {
+                id: 'policies',
+                label: 'Apolices',
+                icon: 'ph ph-files',
+            },
+            {
+                id: 'endorsements',
+                label: 'Endossos',
+                icon: 'ph ph-arrows-clockwise',
+            },
+            {
+                id: 'claims',
+                label: 'Sinistros',
+                icon: 'ph ph-warning-circle',
+            },
+        ],
+    },
+    {
+        id: 'settings',
+        label: 'Configuracoes',
+        icon: 'ph ph-gear-six',
+        children: [
+            {
+                id: 'teams',
+                label: 'Times',
+                icon: 'ph ph-users-three',
+            },
+            {
+                id: 'permissions',
+                label: 'Permissoes',
+                icon: 'ph ph-lock-key',
+            },
+        ],
+    },
+];
+const nestedItems = [
+    {
+        id: 'sula-os',
+        label: 'Sula OS',
+        icon: 'ph ph-app-window',
+        expanded: true,
+        children: [
+            {
+                id: 'dashboard',
+                label: 'Dashboard',
+                icon: 'ph ph-gauge',
+            },
+            {
+                id: 'canvas',
+                label: 'Canvas',
+                icon: 'ph ph-frame-corners',
+                expanded: true,
+                children: [
+                    {
+                        id: 'chapters',
+                        label: 'Capitulos/Jornadas',
+                        icon: 'ph ph-dot-outline',
+                        selected: true,
+                    },
+                    {
+                        id: 'tribes',
+                        label: 'Tribes/Areas',
+                        icon: 'ph ph-dot-outline',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 'analytics',
+        label: 'Analytics',
+        icon: 'ph ph-chart-line-up',
+        children: [
+            {
+                id: 'portfolio',
+                label: 'Portfolio',
+                icon: 'ph ph-chart-pie-slice',
+            },
+        ],
+    },
+];
+const longLabelItems = [
+    {
+        id: 'protocol-center',
+        label: 'Central de protocolos e acompanhamentos operacionais',
+        icon: 'ph ph-folders',
+        expanded: true,
+        children: [
+            {
+                id: 'technical-underwriting',
+                label: 'Analise tecnica e de subscricao para contas corporativas',
+                icon: 'ph ph-file-search',
+                selected: true,
+            },
+            {
+                id: 'journey-builder',
+                label: 'Construtor de jornadas e configuracoes de experiencia',
+                icon: 'ph ph-path',
+                expanded: true,
+                children: [
+                    {
+                        id: 'audiences',
+                        label: 'Segmentos e audiencias de relacionamento',
+                        icon: 'ph ph-dot-outline',
+                    },
+                    {
+                        id: 'rules',
+                        label: 'Regras e validacoes com nomenclaturas extensas',
+                        icon: 'ph ph-dot-outline',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 'governance',
+        label: 'Governanca de acessos e seguranca',
+        icon: 'ph ph-shield-check',
+    },
+];
+const hiddenItems = [
+    {
+        id: 'overview-hidden',
+        label: 'Visao Geral',
+        icon: 'ph ph-house-line',
+        hidden: true,
+    },
+    {
+        id: 'reports',
+        label: 'Relatorios',
+        icon: 'ph ph-chart-bar',
+        expanded: true,
+        children: [
+            {
+                id: 'archived',
+                label: 'Arquivados',
+                icon: 'ph ph-archive-box',
+                hidden: true,
+            },
+        ],
+    },
+    {
+        id: 'settings-hidden',
+        label: 'Configuracoes',
+        icon: 'ph ph-gear-six',
+        expanded: true,
+        children: [
+            {
+                id: 'users-hidden',
+                label: 'Usuarios ocultos',
+                icon: 'ph ph-users-three',
+                hidden: true,
+            },
+            {
+                id: 'roles',
+                label: 'Perfis de acesso',
+                icon: 'ph ph-lock-key',
+                expanded: true,
+                children: [
+                    {
+                        id: 'legacy-role',
+                        label: 'Perfil legado',
+                        icon: 'ph ph-dot-outline',
+                        hidden: true,
+                    },
+                    {
+                        id: 'brokers',
+                        label: 'Corretores',
+                        icon: 'ph ph-dot-outline',
+                        selected: true,
+                    },
+                ],
+            },
+            {
+                id: 'teams-visible',
+                label: 'Times',
+                icon: 'ph ph-users-three',
+            },
+        ],
+    },
+];
+const cloneMenuItems = (items) => {
+    return items.map(item => {
+        var _a;
+        return (Object.assign(Object.assign({}, item), { children: (_a = item.children) === null || _a === void 0 ? void 0 : _a.map(child => {
+                var _a;
+                return (Object.assign(Object.assign({}, child), { children: (_a = child.children) === null || _a === void 0 ? void 0 : _a.map(grandchild => (Object.assign({}, grandchild))) }));
+            }) }));
+    });
+};
+const createStoryShell = () => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.padding = '24px';
+    container.style.background = 'linear-gradient(180deg, #f8f9f9 0%, #eef2f2 100%)';
+    container.style.borderRadius = '24px';
+    container.style.boxSizing = 'border-box';
+    const shell = document.createElement('div');
+    shell.style.display = 'flex';
+    shell.style.width = '960px';
+    shell.style.maxWidth = '100%';
+    shell.style.height = '720px';
+    shell.style.borderRadius = '24px';
+    shell.style.overflow = 'visible';
+    shell.style.background = '#ffffff';
+    shell.style.border = '1px solid #dfe5e5';
+    shell.style.boxShadow = '0 20px 48px rgba(15, 23, 42, 0.08)';
+    const contentPanel = document.createElement('div');
+    contentPanel.style.flex = '1';
+    contentPanel.style.padding = '40px';
+    contentPanel.style.background = 'linear-gradient(180deg, #ffffff 0%, #f7f9f9 100%)';
+    contentPanel.style.borderRadius = '0 24px 24px 0';
+    contentPanel.style.boxSizing = 'border-box';
+    const contentTitle = document.createElement('h3');
+    contentTitle.textContent = 'Area de conteudo';
+    contentTitle.style.margin = '0 0 12px';
+    contentTitle.style.fontSize = '24px';
+    contentTitle.style.fontWeight = '700';
+    contentTitle.style.color = '#2f3131';
+    const contentDescription = document.createElement('p');
+    contentDescription.textContent = 'Use o botao no rodape do menu para colapsar, passe o mouse sobre o menu colapsado para visualizar o preview e clique nos itens para observar os eventos no painel Actions.';
+    contentDescription.style.margin = '0 0 24px';
+    contentDescription.style.maxWidth = '520px';
+    contentDescription.style.fontSize = '14px';
+    contentDescription.style.lineHeight = '22px';
+    contentDescription.style.color = '#6c6e6e';
+    const infoCard = document.createElement('div');
+    infoCard.style.padding = '20px 24px';
+    infoCard.style.borderRadius = '20px';
+    infoCard.style.background = '#f4f7f7';
+    infoCard.style.border = '1px solid #e3e9e9';
+    infoCard.style.maxWidth = '460px';
+    const infoTitle = document.createElement('strong');
+    infoTitle.textContent = 'Fluxos demonstrados';
+    infoTitle.style.display = 'block';
+    infoTitle.style.marginBottom = '12px';
+    infoTitle.style.fontSize = '15px';
+    infoTitle.style.color = '#2f3131';
+    const infoList = document.createElement('ul');
+    infoList.style.margin = '0';
+    infoList.style.paddingLeft = '18px';
+    infoList.style.color = '#5d5f5f';
+    infoList.style.fontSize = '14px';
+    infoList.style.lineHeight = '22px';
+    infoList.innerHTML = '<li>Selecao unica de itens folha</li><li>Expansao independente de branches</li><li>Submenus em dois niveis</li><li>Preview do menu sobre o conteudo</li>';
+    infoCard.appendChild(infoTitle);
+    infoCard.appendChild(infoList);
+    contentPanel.appendChild(contentTitle);
+    contentPanel.appendChild(contentDescription);
+    contentPanel.appendChild(infoCard);
+    shell.appendChild(contentPanel);
+    container.appendChild(shell);
+    return { container, shell };
+};
+export default {
+    title: 'Components/sula-menu',
+    tags: ['autodocs'],
+    argTypes: {
+        menuTitle: {
+            control: 'text',
+            defaultValue: 'Sula Hub',
+            description: 'Titulo exibido no cabecalho do menu.',
+            type: {
+                required: false,
+            },
+        },
+        image: {
+            control: 'text',
+            defaultValue: BRAND_IMAGE,
+            description: 'Imagem de marca exibida ao lado do titulo.',
+            type: {
+                required: false,
+            },
+        },
+        items: {
+            control: 'object',
+            defaultValue: defaultItems,
+            description: 'Estrutura hierarquica do menu, com suporte a itens, subitens, netos e ocultacao via hidden.',
+            type: {
+                required: false,
+            },
+        },
+        itemSelected: {
+            action: 'itemSelected',
+            description: 'Evento emitido quando um item folha e selecionado.',
+        },
+        itemClicked: {
+            action: 'itemClicked',
+            description: 'Evento emitido a cada clique em qualquer item do menu.',
+        },
+        menuToggled: {
+            action: 'menuToggled',
+            description: 'Evento emitido ao colapsar ou expandir o menu.',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'O componente Sula Menu organiza navegacao hierarquica com suporte a expansao de submenus, selecao unica de itens folha, ocultacao declarativa via hidden, colapso com preview em hover e emissao de eventos para clique, selecao e toggle do container.',
+            },
+        },
+    },
+};
+const Template = (args) => {
+    const { container, shell } = createStoryShell();
+    const el = document.createElement('sula-menu');
+    el.menuTitle = args.menuTitle;
+    el.image = args.image;
+    el.items = cloneMenuItems(args.items);
+    el.addEventListener('itemSelected', args.itemSelected);
+    el.addEventListener('itemClicked', args.itemClicked);
+    el.addEventListener('menuToggled', args.menuToggled);
+    shell.prepend(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    menuTitle: 'Sula Hub',
+    image: BRAND_IMAGE,
+    items: defaultItems,
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo principal do menu com marca, um item folha selecionado e uma secao expandida. Interaja com os itens e com o toggle do rodape para validar os eventos e os estados visuais.',
+        },
+    },
+};
+export const WithNestedNavigation = Template.bind({});
+WithNestedNavigation.args = {
+    menuTitle: 'Sula OS',
+    image: BRAND_IMAGE,
+    items: nestedItems,
+};
+WithNestedNavigation.parameters = {
+    docs: {
+        description: {
+            story: 'Demonstra a navegacao com branch aninhado e um neto previamente selecionado, cobrindo o fluxo de expansao em dois niveis.',
+        },
+    },
+};
+export const WithLongLabels = Template.bind({});
+WithLongLabels.args = {
+    menuTitle: 'Governanca',
+    image: BRAND_IMAGE,
+    items: longLabelItems,
+};
+WithLongLabels.parameters = {
+    docs: {
+        description: {
+            story: 'Cenario voltado para validacao visual de truncamento e alinhamento quando itens e subitens possuem labels extensas.',
+        },
+    },
+};
+export const WithHiddenItems = Template.bind({});
+WithHiddenItems.args = {
+    menuTitle: 'Administracao',
+    image: BRAND_IMAGE,
+    items: hiddenItems,
+};
+WithHiddenItems.parameters = {
+    docs: {
+        description: {
+            story: 'Demonstra a omissao de itens marcados com hidden em todos os niveis, incluindo o caso em que um branch deixa de expandir porque seus descendentes visiveis foram filtrados.',
+        },
+    },
+};
+export const WithoutBrandImage = Template.bind({});
+WithoutBrandImage.args = {
+    menuTitle: 'Menu sem logomarca',
+    image: '',
+    items: defaultItems,
+};
+WithoutBrandImage.parameters = {
+    docs: {
+        description: {
+            story: 'Mostra o comportamento do componente quando apenas o titulo e exibido no cabecalho, sem imagem de marca.',
+        },
+    },
+};
+//# sourceMappingURL=sula-menu.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-menu.stories.js","sourceRoot":"","sources":["../../../src/components/sula-menu/sula-menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaMenuMainItem } from './model/sula-menu.model';\n\ntype StoryArgs = {\n\tmenuTitle: string;\n\timage: string;\n\titems: SulaMenuMainItem[];\n\titemSelected: EventListener;\n\titemClicked: EventListener;\n\tmenuToggled: EventListener;\n};\n\nconst BRAND_IMAGE = `data:image/svg+xml;utf8,${encodeURIComponent(`\n\t<svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<rect width=\"80\" height=\"80\" rx=\"20\" fill=\"#E5231B\"/>\n\t\t<rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"18\" fill=\"white\" fill-opacity=\"0.08\"/>\n\t\t<path d=\"M52 24H35.5C31.3579 24 28 27.3579 28 31.5C28 35.6421 31.3579 39 35.5 39H44.5C48.6421 39 52 42.3579 52 46.5C52 50.6421 48.6421 54 44.5 54H28\" stroke=\"white\" stroke-width=\"8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t</svg>\n`)}`;\n\nconst defaultItems: SulaMenuMainItem[] = [\n\t{\n\t\tid: 'overview',\n\t\tlabel: 'Visao Geral',\n\t\ticon: 'ph ph-house-line',\n\t\tselected: true,\n\t},\n\t{\n\t\tid: 'operations',\n\t\tlabel: 'Operacoes',\n\t\ticon: 'ph ph-briefcase',\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 'policies',\n\t\t\t\tlabel: 'Apolices',\n\t\t\t\ticon: 'ph ph-files',\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'endorsements',\n\t\t\t\tlabel: 'Endossos',\n\t\t\t\ticon: 'ph ph-arrows-clockwise',\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'claims',\n\t\t\t\tlabel: 'Sinistros',\n\t\t\t\ticon: 'ph ph-warning-circle',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tid: 'settings',\n\t\tlabel: 'Configuracoes',\n\t\ticon: 'ph ph-gear-six',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 'teams',\n\t\t\t\tlabel: 'Times',\n\t\t\t\ticon: 'ph ph-users-three',\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'permissions',\n\t\t\t\tlabel: 'Permissoes',\n\t\t\t\ticon: 'ph ph-lock-key',\n\t\t\t},\n\t\t],\n\t},\n];\n\nconst nestedItems: SulaMenuMainItem[] = [\n\t{\n\t\tid: 'sula-os',\n\t\tlabel: 'Sula OS',\n\t\ticon: 'ph ph-app-window',\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 'dashboard',\n\t\t\t\tlabel: 'Dashboard',\n\t\t\t\ticon: 'ph ph-gauge',\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'canvas',\n\t\t\t\tlabel: 'Canvas',\n\t\t\t\ticon: 'ph ph-frame-corners',\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'chapters',\n\t\t\t\t\t\tlabel: 'Capitulos/Jornadas',\n\t\t\t\t\t\ticon: 'ph ph-dot-outline',\n\t\t\t\t\t\tselected: true,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'tribes',\n\t\t\t\t\t\tlabel: 'Tribes/Areas',\n\t\t\t\t\t\ticon: 'ph ph-dot-outline',\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tid: 'analytics',\n\t\tlabel: 'Analytics',\n\t\ticon: 'ph ph-chart-line-up',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 'portfolio',\n\t\t\t\tlabel: 'Portfolio',\n\t\t\t\ticon: 'ph ph-chart-pie-slice',\n\t\t\t},\n\t\t],\n\t},\n];\n\nconst longLabelItems: SulaMenuMainItem[] = [\n\t{\n\t\tid: 'protocol-center',\n\t\tlabel: 'Central de protocolos e acompanhamentos operacionais',\n\t\ticon: 'ph ph-folders',\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 'technical-underwriting',\n\t\t\t\tlabel: 'Analise tecnica e de subscricao para contas corporativas',\n\t\t\t\ticon: 'ph ph-file-search',\n\t\t\t\tselected: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'journey-builder',\n\t\t\t\tlabel: 'Construtor de jornadas e configuracoes de experiencia',\n\t\t\t\ticon: 'ph ph-path',\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'audiences',\n\t\t\t\t\t\tlabel: 'Segmentos e audiencias de relacionamento',\n\t\t\t\t\t\ticon: 'ph ph-dot-outline',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'rules',\n\t\t\t\t\t\tlabel: 'Regras e validacoes com nomenclaturas extensas',\n\t\t\t\t\t\ticon: 'ph ph-dot-outline',\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tid: 'governance',\n\t\tlabel: 'Governanca de acessos e seguranca',\n\t\ticon: 'ph ph-shield-check',\n\t},\n];\n\nconst hiddenItems: SulaMenuMainItem[] = [\n\t{\n\t\tid: 'overview-hidden',\n\t\tlabel: 'Visao Geral',\n\t\ticon: 'ph ph-house-line',\n\t\thidden: true,\n\t},\n\t{\n\t\tid: 'reports',\n\t\tlabel: 'Relatorios',\n\t\ticon: 'ph ph-chart-bar',\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 'archived',\n\t\t\t\tlabel: 'Arquivados',\n\t\t\t\ticon: 'ph ph-archive-box',\n\t\t\t\thidden: true,\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tid: 'settings-hidden',\n\t\tlabel: 'Configuracoes',\n\t\ticon: 'ph ph-gear-six',\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 'users-hidden',\n\t\t\t\tlabel: 'Usuarios ocultos',\n\t\t\t\ticon: 'ph ph-users-three',\n\t\t\t\thidden: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'roles',\n\t\t\t\tlabel: 'Perfis de acesso',\n\t\t\t\ticon: 'ph ph-lock-key',\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'legacy-role',\n\t\t\t\t\t\tlabel: 'Perfil legado',\n\t\t\t\t\t\ticon: 'ph ph-dot-outline',\n\t\t\t\t\t\thidden: true,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'brokers',\n\t\t\t\t\t\tlabel: 'Corretores',\n\t\t\t\t\t\ticon: 'ph ph-dot-outline',\n\t\t\t\t\t\tselected: true,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'teams-visible',\n\t\t\t\tlabel: 'Times',\n\t\t\t\ticon: 'ph ph-users-three',\n\t\t\t},\n\t\t],\n\t},\n];\n\nconst cloneMenuItems = (items: SulaMenuMainItem[]) => {\n\treturn items.map(item => ({\n\t\t...item,\n\t\tchildren: item.children?.map(child => ({\n\t\t\t...child,\n\t\t\tchildren: child.children?.map(grandchild => ({ ...grandchild })),\n\t\t})),\n\t}));\n};\n\nconst createStoryShell = () => {\n\tconst container = document.createElement('div');\n\tcontainer.style.margin = '20px';\n\tcontainer.style.padding = '24px';\n\tcontainer.style.background = 'linear-gradient(180deg, #f8f9f9 0%, #eef2f2 100%)';\n\tcontainer.style.borderRadius = '24px';\n\tcontainer.style.boxSizing = 'border-box';\n\n\tconst shell = document.createElement('div');\n\tshell.style.display = 'flex';\n\tshell.style.width = '960px';\n\tshell.style.maxWidth = '100%';\n\tshell.style.height = '720px';\n\tshell.style.borderRadius = '24px';\n\tshell.style.overflow = 'visible';\n\tshell.style.background = '#ffffff';\n\tshell.style.border = '1px solid #dfe5e5';\n\tshell.style.boxShadow = '0 20px 48px rgba(15, 23, 42, 0.08)';\n\n\tconst contentPanel = document.createElement('div');\n\tcontentPanel.style.flex = '1';\n\tcontentPanel.style.padding = '40px';\n\tcontentPanel.style.background = 'linear-gradient(180deg, #ffffff 0%, #f7f9f9 100%)';\n\tcontentPanel.style.borderRadius = '0 24px 24px 0';\n\tcontentPanel.style.boxSizing = 'border-box';\n\n\tconst contentTitle = document.createElement('h3');\n\tcontentTitle.textContent = 'Area de conteudo';\n\tcontentTitle.style.margin = '0 0 12px';\n\tcontentTitle.style.fontSize = '24px';\n\tcontentTitle.style.fontWeight = '700';\n\tcontentTitle.style.color = '#2f3131';\n\n\tconst contentDescription = document.createElement('p');\n\tcontentDescription.textContent = 'Use o botao no rodape do menu para colapsar, passe o mouse sobre o menu colapsado para visualizar o preview e clique nos itens para observar os eventos no painel Actions.';\n\tcontentDescription.style.margin = '0 0 24px';\n\tcontentDescription.style.maxWidth = '520px';\n\tcontentDescription.style.fontSize = '14px';\n\tcontentDescription.style.lineHeight = '22px';\n\tcontentDescription.style.color = '#6c6e6e';\n\n\tconst infoCard = document.createElement('div');\n\tinfoCard.style.padding = '20px 24px';\n\tinfoCard.style.borderRadius = '20px';\n\tinfoCard.style.background = '#f4f7f7';\n\tinfoCard.style.border = '1px solid #e3e9e9';\n\tinfoCard.style.maxWidth = '460px';\n\n\tconst infoTitle = document.createElement('strong');\n\tinfoTitle.textContent = 'Fluxos demonstrados';\n\tinfoTitle.style.display = 'block';\n\tinfoTitle.style.marginBottom = '12px';\n\tinfoTitle.style.fontSize = '15px';\n\tinfoTitle.style.color = '#2f3131';\n\n\tconst infoList = document.createElement('ul');\n\tinfoList.style.margin = '0';\n\tinfoList.style.paddingLeft = '18px';\n\tinfoList.style.color = '#5d5f5f';\n\tinfoList.style.fontSize = '14px';\n\tinfoList.style.lineHeight = '22px';\n\tinfoList.innerHTML = '<li>Selecao unica de itens folha</li><li>Expansao independente de branches</li><li>Submenus em dois niveis</li><li>Preview do menu sobre o conteudo</li>';\n\n\tinfoCard.appendChild(infoTitle);\n\tinfoCard.appendChild(infoList);\n\tcontentPanel.appendChild(contentTitle);\n\tcontentPanel.appendChild(contentDescription);\n\tcontentPanel.appendChild(infoCard);\n\tshell.appendChild(contentPanel);\n\tcontainer.appendChild(shell);\n\n\treturn { container, shell };\n};\n\nexport default {\n\ttitle: 'Components/sula-menu',\n\ttags: ['autodocs'],\n\targTypes: {\n\t\tmenuTitle: {\n\t\t\tcontrol: 'text',\n\t\t\tdefaultValue: 'Sula Hub',\n\t\t\tdescription: 'Titulo exibido no cabecalho do menu.',\n\t\t\ttype: {\n\t\t\t\trequired: false,\n\t\t\t},\n\t\t},\n\t\timage: {\n\t\t\tcontrol: 'text',\n\t\t\tdefaultValue: BRAND_IMAGE,\n\t\t\tdescription: 'Imagem de marca exibida ao lado do titulo.',\n\t\t\ttype: {\n\t\t\t\trequired: false,\n\t\t\t},\n\t\t},\n\t\titems: {\n\t\t\tcontrol: 'object',\n\t\t\tdefaultValue: defaultItems,\n\t\t\tdescription: 'Estrutura hierarquica do menu, com suporte a itens, subitens, netos e ocultacao via hidden.',\n\t\t\ttype: {\n\t\t\t\trequired: false,\n\t\t\t},\n\t\t},\n\t\titemSelected: {\n\t\t\taction: 'itemSelected',\n\t\t\tdescription: 'Evento emitido quando um item folha e selecionado.',\n\t\t},\n\t\titemClicked: {\n\t\t\taction: 'itemClicked',\n\t\t\tdescription: 'Evento emitido a cada clique em qualquer item do menu.',\n\t\t},\n\t\tmenuToggled: {\n\t\t\taction: 'menuToggled',\n\t\t\tdescription: 'Evento emitido ao colapsar ou expandir o menu.',\n\t\t},\n\t},\n\tparameters: {\n\t\tdocs: {\n\t\t\tdescription: {\n\t\t\t\tcomponent:\n\t\t\t\t\t'O componente Sula Menu organiza navegacao hierarquica com suporte a expansao de submenus, selecao unica de itens folha, ocultacao declarativa via hidden, colapso com preview em hover e emissao de eventos para clique, selecao e toggle do container.',\n\t\t\t},\n\t\t},\n\t},\n};\n\nconst Template: any = (args: StoryArgs) => {\n\tconst { container, shell } = createStoryShell();\n\tconst el = document.createElement('sula-menu');\n\n\tel.menuTitle = args.menuTitle;\n\tel.image = args.image;\n\tel.items = cloneMenuItems(args.items);\n\n\tel.addEventListener('itemSelected', args.itemSelected);\n\tel.addEventListener('itemClicked', args.itemClicked);\n\tel.addEventListener('menuToggled', args.menuToggled);\n\n\tshell.prepend(el);\n\n\treturn container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n\tmenuTitle: 'Sula Hub',\n\timage: BRAND_IMAGE,\n\titems: defaultItems,\n};\nDefault.parameters = {\n\tdocs: {\n\t\tdescription: {\n\t\t\tstory: 'Exemplo principal do menu com marca, um item folha selecionado e uma secao expandida. Interaja com os itens e com o toggle do rodape para validar os eventos e os estados visuais.',\n\t\t},\n\t},\n};\n\nexport const WithNestedNavigation = Template.bind({});\nWithNestedNavigation.args = {\n\tmenuTitle: 'Sula OS',\n\timage: BRAND_IMAGE,\n\titems: nestedItems,\n};\nWithNestedNavigation.parameters = {\n\tdocs: {\n\t\tdescription: {\n\t\t\tstory: 'Demonstra a navegacao com branch aninhado e um neto previamente selecionado, cobrindo o fluxo de expansao em dois niveis.',\n\t\t},\n\t},\n};\n\nexport const WithLongLabels = Template.bind({});\nWithLongLabels.args = {\n\tmenuTitle: 'Governanca',\n\timage: BRAND_IMAGE,\n\titems: longLabelItems,\n};\nWithLongLabels.parameters = {\n\tdocs: {\n\t\tdescription: {\n\t\t\tstory: 'Cenario voltado para validacao visual de truncamento e alinhamento quando itens e subitens possuem labels extensas.',\n\t\t},\n\t},\n};\n\nexport const WithHiddenItems = Template.bind({});\nWithHiddenItems.args = {\n\tmenuTitle: 'Administracao',\n\timage: BRAND_IMAGE,\n\titems: hiddenItems,\n};\nWithHiddenItems.parameters = {\n\tdocs: {\n\t\tdescription: {\n\t\t\tstory: 'Demonstra a omissao de itens marcados com hidden em todos os niveis, incluindo o caso em que um branch deixa de expandir porque seus descendentes visiveis foram filtrados.',\n\t\t},\n\t},\n};\n\nexport const WithoutBrandImage = Template.bind({});\nWithoutBrandImage.args = {\n\tmenuTitle: 'Menu sem logomarca',\n\timage: '',\n\titems: defaultItems,\n};\nWithoutBrandImage.parameters = {\n\tdocs: {\n\t\tdescription: {\n\t\t\tstory: 'Mostra o comportamento do componente quando apenas o titulo e exibido no cabecalho, sem imagem de marca.',\n\t\t},\n\t},\n};\n"]}

package/dist/collection/components/sula-menu-select-list/sula-menu-select-list.js

@@ -18,7 +18,7 @@ export class SulaMenuSelectList {
         };
     }
     render() {
-        return (h(Host, { key: '2a2fdaa683ff196bbed89135c74ebd4e1c6e40d6' }, h("ul", { key: '2deeba582947828b4548d41a5a231c9646f38b0e', class: {
+        return (h(Host, { key: 'dc2231f2ce0112a4699bd2290af24d2a8d53aa75' }, h("ul", { key: '6729b9d92f8dfe34e41c1fb01018e312673d48ff', class: {
                 'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 overflow-auto': true,
                 'w-300': !this.fullWidth,
                 'w-full': this.fullWidth,

package/dist/collection/components/sula-progress-bar/sula-progress-bar.js

@@ -53,10 +53,10 @@ export class SulaProgressBar {
         }
     }
     render() {
-        return (h(Host, { key: 'd584c2e2c020ec016a426650fa48fcd843f0c523' }, h("div", { key: 'f2b4e9940cde1280934377ad3db3bab063a5d28d', class: "flex flex-col w-full space-y-8" }, h("div", { key: '8b597aa608fdb404d98f2cbf8022efb539bf999d', class: "flex justify-between items-center" }, h("label", { key: '73763e3827e31b967310142c65b67a0587691711', class: "text-sm text-text-secondary leading-[14px]" }, this.topLabel), this.getProgressBarStateElement()), h("div", { key: 'd240b3850e4dfccea231fbdda5bd8366c8c0cc05', style: { width: `${this.progress}%` }, class: {
+        return (h(Host, { key: '1e587e3e42170718cf760afac9eaa7654a67d761' }, h("div", { key: 'a92b92be28b41a1e130abd4e0c6c047410a5565b', class: "flex flex-col w-full space-y-8" }, h("div", { key: '519faec52f5c42c08b950f789786389ee14a4174', class: "flex justify-between items-center" }, h("label", { key: '67a9cfbbdd6fb001631dc45dc2115bfb1fb1a43f', class: "text-sm text-text-secondary leading-[14px]" }, this.topLabel), this.getProgressBarStateElement()), h("div", { key: '62b55986b354b50aaf4c204c595ca7df99f2d6dc', style: { width: `${this.progress}%` }, class: {
                 'h-12 rounded-xxl': true,
                 [this.getProgressBarStyle()]: true,
-            } }), h("label", { key: 'ffe21db4a0c39f1272370acc780b2d3ba061cd53', class: "text-sm text-text-secondary leading-[14px]" }, this.bottomLabel))));
+            } }), h("label", { key: 'f4379cc3dd23159e4f47468ec3a4fcd142719009', class: "text-sm text-text-secondary leading-[14px]" }, this.bottomLabel))));
     }
     static get is() { return "sula-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-radio-button/sula-radio-button.js

@@ -34,14 +34,14 @@ export class SulaRadioButton {
         };
     }
     render() {
-        return (h(Host, { key: '5427806e9da1752271b0b4be480ab0a2039a8ee0' }, h("div", { key: '0f6a35b1263d47bd28aa54dd895976abe8d48159', class: { 'w-fit': true, 'flex items-center': !!this.label }, onClick: this.handleClick }, h("div", { key: 'cf61f1205714408193621f4c8455adecf2798dcb', class: {
+        return (h(Host, { key: '76b654c70059ac7a5447a99b18429a36ffb38009' }, h("div", { key: '73cea738dad4e3de662e63147b8d74117207c98c', class: { 'w-fit': true, 'flex items-center': !!this.label }, onClick: this.handleClick }, h("div", { key: '9fda4d875d3762edf57196f85112c189b5c7cad8', class: {
                 'min-w-[30px] min-h-[30px] rounded-full flex justify-center items-center outline-none': true,
                 'active:bg-states-empty-bg-pressed cursor-pointer': !this.disabled,
                 'bg-brand-primary': this.checked,
                 'border border-line-input': !this.checked,
                 'container-focus': this.radioIsFocus,
                 'bg-states-bg-disabled border-2 border-states-bg-disabled cursor-not-allowed': this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleFocusOut }, this.checked && h("div", { key: 'e8c87ab372235aac8ce7258d1a91081b63a519eb', class: "bg-transparent border-2 border-negative-negative-1 w-[18px] h-[18px] rounded-full" })), this.label && h("label", { key: 'b7fdb7bdf9e8aaa5e5049cac408b24e912a4399a', class: { 'ml-16 text-base text-text-primary': true, 'cursor-pointer': !this.disabled } }, this.label))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleFocusOut }, this.checked && h("div", { key: '555088b218f1b5c4393291e49ee17d516ac73793', class: "bg-transparent border-2 border-negative-negative-1 w-[18px] h-[18px] rounded-full" })), this.label && h("label", { key: '79f6e85446e2ae1bb01b46026247d1e57deaf4ba', class: { 'ml-16 text-base text-text-primary': true, 'cursor-pointer': !this.disabled } }, this.label))));
     }
     static get is() { return "sula-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-search-bar/sula-search-bar.js

@@ -43,11 +43,11 @@ export class SulaSearchBar {
         return style[this.searchBarStyle];
     }
     render() {
-        return (h(Host, { key: 'e5d8f7608d743e75d2071dde601f3bbb295cc415' }, h("div", { key: '84e01e17c71129cce09372b1a76ed486ce3d168b', class: {
+        return (h(Host, { key: '603ee71ccbb796bd2ca6643dff042d5f89653b50' }, h("div", { key: '8dd4945346cbc443ef48b971ba6bb93db51f0aeb', class: {
                 'flex flex-row items-center space-x-12 px-16 rounded-xxl h-44 caret-brand-primary outline-none group': true,
                 [this.getStyleClass()]: true,
                 'search-bar-focus': this.isFocused,
-            }, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: 'f8f61d01078eea0273ca1eabdea401f841a7931a', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '6567a11f541d140dac9303607371c7e2f8b04f96', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '69dc721e94529cb2f6c22baa9fd917754d7e0dff', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.value, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: '5b3b9aca94cf85dcef78605738e05900838efcf6', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '04a65741683ccf50852e3015c085ffc5714bb0f6', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
+            }, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: 'b785f0a1bb7e07dd3d4a3ca847b209cb1c1dfa0c', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: 'e4e570356743fa162d194ff5e2b3d1ae00b1a552', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '7810ed5b2a892752511352ea6fe2bf11f27ef83d', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.value, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: 'eb52f29b7ef083d1ded95eec79e603e2cc99ab81', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '9bbd1f1a860461dffe16e1f49ab0232741717e0a', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
     }
     static get is() { return "sula-search-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class SulaSegmentedControl {
         return item.selected ? 'text-brand-primary' : 'text-text-primary';
     }
     render() {
-        return (h(Host, { key: '047229bea44614f1b7570d405d342c1924e7f368' }, h("div", { key: '14df0e4cf5316c609a5961c7b5a9e2adf75efdda', class: {
+        return (h(Host, { key: '60e6ede4d76518a4539f4e356dcaafe851104f0a' }, h("div", { key: 'd1f18567a2a63d584dc9bc1077727231084b5438', class: {
                 'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,
                 'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,
                 'bg-opacity-body': this.color === SulaSegmentedControlColor.White,

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

@@ -40,7 +40,7 @@ export class SulaSwitch {
         };
     }
     render() {
-        return (h(Host, { key: '63e6240141744f8747d886c4ae377ec6e75a1430' }, h("div", { key: '734068ba86c268d388e892a9601dac6c5af585a9', class: {
+        return (h(Host, { key: '8ef093d3f68af0f413f945a4dd730e5e96d7a5a1' }, h("div", { key: '3d608aad735b972fafcbd528645b75f5315550c9', 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 min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
@@ -48,17 +48,17 @@ export class SulaSwitch {
                 'w-[280px]': this.type === SulaSwitchType.List && !this.responsive,
                 '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: 'ab024dd2bd23e5ed2aaa970eb129d3df8f957df1', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '26f9c644700d2e2209111220381b9848fc70d8a9', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'aa7e3aceb3ef01b6cb36f1dc787c844eff1f5c46', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: '61634f3d849823aafb178cdde05ae31b1e76bf0b', class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '605441ac6b207c8d58904f74f9215c652c0600ee', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: 'dc3e22543fb3b9c9ab3c51eb51a1f566d7ab5ef7', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'b96976dbcbf641c577ca0ae2332156adf1e045b3', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: '49282abab10575fcc85d4c77766dbfd3dd2adb8b', 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: '3bb4ef78190458168de783224a21620bd134d8d5', class: {
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'ddb3e2bc4cb310be34db555e12952ab8e49ae326', 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: '867441effcc9169ca9aeb24d16e919a8896b4cc2', class: {
+            } }, h("div", { key: 'bfebb2de0032b2a350f89bf36fde37d46a440c07', 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-table/sula-table.js

@@ -16,15 +16,15 @@ export class SulaTable {
         this.fullWidth = true;
     }
     render() {
-        return (h(Host, { key: 'f89ff123aa21b03dac2851520b1f4f9a456b733e', class: {
+        return (h(Host, { key: '145ad23cf5a01a06445ce80efdf0f64b71fdbd29', class: {
                 'block max-w-full overflow-x-auto': true,
-            } }, h("table", { key: 'fadb3c57fd65dc625799c6e4d9ceec9b810ec5b6', class: {
+            } }, h("table", { key: '294dbcbf266c228fc13865dbc2d10aefd213f36a', class: {
                 'w-full': this.fullWidth && this.equalWidth,
                 'w-max': !this.equalWidth,
                 'min-w-full': this.fullWidth && !this.equalWidth,
                 'table-fixed': this.equalWidth,
                 'border-collapse border-spacing-0 box-border': true,
-            } }, h("slot", { key: 'e6de13e3cd929e6ef4dd2bddafdbc3f0a57f4b7e' }))));
+            } }, h("slot", { key: '5d2ce3b351c909ae1c67d18bd65b5fc54594b9d7' }))));
     }
     static get is() { return "sula-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/sula-table-body/sula-table-body.js

@@ -5,7 +5,7 @@ export class SulaTableBody {
         replaceHostWithRenderedElement(this.host, 'tbody');
     }
     render() {
-        return (h(Host, { key: '255fb81b2515c7de6f3dbda43a77db8564eb345e' }, h("tbody", { key: '792001ad301eed9649dcdc61c0ae7f9823697ae2' }, h("slot", { key: '1f30c22854d060ed58bd96d60f66f74e037e1fcb' }))));
+        return (h(Host, { key: 'e06c2725a5040c7fb9df4235bf1e653d95d5d719' }, h("tbody", { key: '0155edd3b5e0f536015d45e6036221f6c72ba4b6' }, h("slot", { key: '7b8e12821c6434b62e75f61e08ae492c41ac4401' }))));
     }
     static get is() { return "sula-table-body"; }
     static get originalStyleUrls() {

package/dist/collection/components/sula-table-cell/sula-table-cell.js

@@ -10,13 +10,13 @@ export class SulaTableCell {
         replaceHostWithRenderedElement(this.host, 'td');
     }
     render() {
-        return (h(Host, { key: 'b2bf27030078f512b8ff89582d49e4c1d1c91f50' }, h("td", { key: '45ec20643f36908cee9ed79520a48cf9d2377bba', class: "align-middle text-left border-b border-dashed border-line-general" }, h("div", { key: '9c5f102be6d7588b0583d9cc02ddbb07bb93eaf2', class: {
+        return (h(Host, { key: '1b644425472c68880a9be150d52029a64d75ea26' }, h("td", { key: 'ee6740c73a9b05607e9f21a332bd47afa59338c7', class: "align-middle text-left border-b border-dashed border-line-general" }, h("div", { key: 'a145fa09de084ed3b8bd9555ca853d7aacfc71c3', class: {
                 'px-16 py-4 w-full flex flex-col justify-center items-start box-border text-label-medium-regular text-text-secondary': true,
                 'min-h-56': this.tableDensity === SulaTableDensity.Compact,
                 'min-h-60': this.tableDensity === SulaTableDensity.Default,
                 'min-h-64': this.tableDensity === SulaTableDensity.Spaced,
                 'min-h-72': this.tableDensity === SulaTableDensity.Confortable,
-            } }, h("slot", { key: 'ee02175ef133a387df99e0378df6c1089947d5b7' })))));
+            } }, h("slot", { key: '99055031e7b481629d2b254451345e959ee02e5b' })))));
     }
     static get is() { return "sula-table-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/sula-table-head-cell/sula-table-head-cell.js

@@ -10,13 +10,13 @@ export class SulaTableHeadCell {
         replaceHostWithRenderedElement(this.host, 'th');
     }
     render() {
-        return (h(Host, { key: '0009d544b5ef7e7a2894cac4c766f40975469286' }, h("th", { key: '20b704d626c2d8f17c141ecc925f06014dc814aa', scope: "col", class: "align-middle text-left border-b border-line-general" }, h("div", { key: '7cd2c2167c2172fd1a77e9fadcafffb488344081', class: {
+        return (h(Host, { key: '232edc6dc291b82f88610f09f5deb426ce81f1d3' }, h("th", { key: 'a8f04a6834b65e33a1253ee605c462bfbe72c02d', scope: "col", class: "align-middle text-left border-b border-line-general" }, h("div", { key: '0efce93d109eed9d2f777a7b89314add9d039431', class: {
                 'px-16 py-4 w-full flex justify-start items-center box-border text-label-small-bold text-text-secondary': true,
                 'min-h-40': this.tableDensity === SulaTableDensity.Compact,
                 'min-h-44': this.tableDensity === SulaTableDensity.Default,
                 'min-h-48': this.tableDensity === SulaTableDensity.Spaced,
                 'min-h-56': this.tableDensity === SulaTableDensity.Confortable,
-            } }, h("slot", { key: '0c308962f97f0013ec93db54f4f8479912e566e7' })))));
+            } }, h("slot", { key: '3530e023f76c70da396ac9eed4c34e09121180c0' })))));
     }
     static get is() { return "sula-table-head-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/sula-table-header/sula-table-header.js

@@ -5,7 +5,7 @@ export class SulaTableHeader {
         replaceHostWithRenderedElement(this.host, 'thead');
     }
     render() {
-        return (h(Host, { key: 'bf6dd6f339e1486b47d4a3d95ba96f788efbd6d2' }, h("thead", { key: 'd8b8ddc23f128d4376aca8e20a2f343722658353' }, h("slot", { key: '9518f745123ca7c098cd80f4ae526fbc00f551a9' }))));
+        return (h(Host, { key: 'af51d1606b951c52a09c995fc5939323da083793' }, h("thead", { key: '308ac597f7aab44327dc8f73a47acf17f26b3b43' }, h("slot", { key: '8f2271a931e060c422aa423c56e68495f6b54105' }))));
     }
     static get is() { return "sula-table-header"; }
     static get originalStyleUrls() {