@kitconcept/volto-light-theme 8.0.0-alpha.18 → 8.0.0-alpha.19

package/.changelog.draft

@@ -1,14 +1,15 @@
-## 8.0.0-alpha.18 (2026-03-14)
+## 8.0.0-alpha.19 (2026-04-17)
 
-### Feature
+### Breaking
 
-- Improve layout for full-width blocks when in Edit mode. @danalvrz 
+- Improve Card component link handling by using a CSS stretched-link pattern & other minor style fixes for consistency. Breaking: custom `Summary` components must now accept and use the `LinkToItem` prop; category labels changed from heading tags to `<ul>` elements. See the upgrade guide for migration steps. @danalvrz 
 
 ### Bugfix
 
-- Fix font size for control panel view headers. @danalvrz [#fixControlPanelFontSize](https://github.com/kitconcept/volto-light-theme/pull/fixControlPanelFontSize)
-- Fix css of External link icon indicator for teaser and grid-teaser @iRohitSingh [#797](https://github.com/kitconcept/volto-light-theme/pull/797)
-- Fix undefined error when pressing enter in footer site colophon input. @iFlameing 
-- Improve styles for Export Import control panel & several color fixes. @danalvrz 
+- Fixed the font-color in the table block with h2 or h3 font-size. @TimoBroeskamp [#820](https://github.com/kitconcept/volto-light-theme/pull/820)
+- + display footer links with an underline, remove gap between seperate lines in footer colophon text and fixed richtext-editor combinations to work together. @TimoBroeskamp 
+- Fix navigation text color not loading on hard reload. @iFlameing 
+- Fix spacings for navigation items when using the Intranet header. @danlavrz 
+- Fix styles for text in colophon. @danalvrz 
 
 

package/CHANGELOG.md

@@ -8,6 +8,20 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.19 (2026-04-17)
+
+### Breaking
+
+- Improve Card component link handling by using a CSS stretched-link pattern & other minor style fixes for consistency. Breaking: custom `Summary` components must now accept and use the `LinkToItem` prop; category labels changed from heading tags to `<ul>` elements. See the upgrade guide for migration steps. @danalvrz 
+
+### Bugfix
+
+- Fixed the font-color in the table block with h2 or h3 font-size. @TimoBroeskamp [#820](https://github.com/kitconcept/volto-light-theme/pull/820)
+- + display footer links with an underline, remove gap between seperate lines in footer colophon text and fixed richtext-editor combinations to work together. @TimoBroeskamp 
+- Fix navigation text color not loading on hard reload. @iFlameing 
+- Fix spacings for navigation items when using the Intranet header. @danlavrz 
+- Fix styles for text in colophon. @danalvrz 
+
 ## 8.0.0-alpha.18 (2026-03-14)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.18",
+  "version": "8.0.0-alpha.19",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/Blocks/EventCalendar/Search/components/EventTemplate.tsx

@@ -49,7 +49,7 @@ const EventItem = ({ item, lang, isEditMode }) => {
               <span className="event-title">{item.head_title}</span>
             )}
           </div>
-          <DefaultSummary item={item} HeadingTag="h2" />
+          <DefaultSummary item={item} />
         </Card.Summary>
       </Card>
     </div>

package/src/components/Blocks/Listing/DefaultTemplate.jsx

@@ -27,7 +27,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const Summary =
             config.getComponent({
@@ -39,7 +39,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
             showLink = !hideProfileLinks && !isEditMode;
           }
           return (
-            <div
+            <li
               className={cx('listing-item', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -47,13 +47,13 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
             >
               <Card item={showLink ? item : null}>
                 <Card.Summary>
-                  <Summary item={item} HeadingTag="h2" />
+                  <Summary item={item} />
                 </Card.Summary>
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>

package/src/components/Blocks/Listing/GridTemplate.jsx

@@ -27,7 +27,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const CustomItemBodyTemplate = config.getComponent({
             name: 'GridListingItemTemplate',
@@ -55,14 +55,17 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                     imageComponent={PreviewImageComponent}
                   />
                 )}
-                <Card.Summary a11yLabelId={props.a11yLabelId}>
-                  <Summary item={item} HeadingTag="h2" />
+                <Card.Summary
+                  a11yLabelId={props.a11yLabelId}
+                  LinkToItem={props.LinkToItem}
+                >
+                  <Summary item={item} />
                 </Card.Summary>
               </>
             );
 
           return (
-            <div
+            <li
               className={cx('listing-item', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -71,10 +74,10 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>

package/src/components/Blocks/Listing/ListingBody.jsx

@@ -39,7 +39,7 @@ const Headline = ({
       mode={!isEditMode && 'view'}
       children={data.headline}
       attributes={attr}
-      className={cx('headline', {
+      className={cx('headline block-title', {
         emptyListing: !listingItems?.length > 0,
       })}
       style={style}

package/src/components/Blocks/Listing/SummaryTemplate.jsx

@@ -26,7 +26,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const CustomItemBodyTemplate = config.getComponent({
             name: 'SummaryListingItemTemplate',
@@ -51,13 +51,16 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                   showPlaceholderImage={true}
                   imageComponent={PreviewImageComponent}
                 />
-                <Card.Summary a11yLabelId={props.a11yLabelId}>
-                  <Summary item={item} HeadingTag="h3" />
+                <Card.Summary
+                  a11yLabelId={props.a11yLabelId}
+                  LinkToItem={props.LinkToItem}
+                >
+                  <Summary item={item} />
                 </Card.Summary>
               </>
             );
           return (
-            <div
+            <li
               className={cx('listing-item has--align--left', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -66,10 +69,10 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>

package/src/components/Blocks/Teaser/DefaultBody.tsx

@@ -54,7 +54,6 @@ const TeaserDefaultTemplate = (props) => {
       <Card.Summary>
         <Summary
           item={!data.overwrite ? href : { ...href, ...localOverrides }}
-          HeadingTag="h2"
           hide_description={props.data?.hide_description}
         />
       </Card.Summary>

package/src/components/Summary/DefaultSummary.tsx

@@ -4,6 +4,7 @@ import { smartTextRenderer } from '../../helpers/smartText';
 
 export type DefaultSummaryProps = {
   item: Partial<ObjectBrowserItem>;
+  LinkToItem?: React.ElementType;
   HeadingTag?: React.ElementType;
   a11yLabelId?: string;
   hide_description?: boolean;
@@ -14,14 +15,20 @@ export type SummaryComponentType = React.ComponentType<DefaultSummaryProps> & {
 };
 
 const DefaultSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
   return (
     <>
       {item?.head_title && <div className="headline">{item.head_title}</div>}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/EventSummary.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   parseDateFromCatalog,
   formatDateRange,
@@ -7,7 +8,13 @@ import type { DefaultSummaryProps } from './DefaultSummary';
 import { smartTextRenderer } from '../../helpers/smartText';
 
 const EventSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
   const start = parseDateFromCatalog(item.start);
   const end = parseDateFromCatalog(item.end);
   const headline = [
@@ -29,9 +36,9 @@ const EventSummary = (props: DefaultSummaryProps) => {
     <>
       {headline.length ? <div className="headline">{headline}</div> : null}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/FileSummary.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import FileType from '@kitconcept/volto-light-theme/helpers/Filetype';
 import type { DefaultSummaryProps } from './DefaultSummary';
 import { smartTextRenderer } from '../../helpers/smartText';
@@ -21,15 +22,21 @@ const FileHeadline = (props: { item: any }) => {
 };
 
 const FileSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
 
   return (
     <>
       <FileHeadline item={item} />
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/NewsItemSummary.tsx

@@ -1,10 +1,17 @@
+import * as React from 'react';
 import { parseDateFromCatalog } from '@kitconcept/volto-light-theme/helpers/dates';
 import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import type { DefaultSummaryProps } from './DefaultSummary';
 import { smartTextRenderer } from '../../helpers/smartText';
 
 const NewsItemSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
 
   const effective = parseDateFromCatalog(item.effective);
   const headline = [
@@ -31,9 +38,9 @@ const NewsItemSummary = (props: DefaultSummaryProps) => {
     <>
       {headline.length ? <div className="headline">{headline}</div> : null}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/PersonSummary.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import mailSVG from '@plone/volto/icons/email.svg';
 import locationSVG from '@plone/volto/icons/map.svg';
@@ -22,16 +23,22 @@ const messages = defineMessages({
 });
 
 const PersonSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
   const intl = useIntl();
 
   return (
     <>
       {item?.head_title && <div className="headline">{item.head_title}</div>}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
 

package/src/components/Summary/Summary.stories.tsx

@@ -22,15 +22,17 @@ type Story = StoryObj<typeof meta>;
 
 export const Summary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <DefaultSummary {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <DefaultSummary {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       description:
         'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
       head_title: 'Simple Card',
@@ -40,15 +42,17 @@ export const Summary: Story = {
 
 export const SummaryWithLink: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <DefaultSummary {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <DefaultSummary {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       description:
         '[Lorem ipsum](https://example.com) dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
       head_title: 'Simple Card',
@@ -58,15 +62,17 @@ export const SummaryWithLink: Story = {
 
 export const SummaryHideDescription: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <DefaultSummary {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <DefaultSummary {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       description:
         'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
       head_title: 'Simple Card',
@@ -77,15 +83,17 @@ export const SummaryHideDescription: Story = {
 
 export const NewsItemSummary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <NewsItemSummaryComponent {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <NewsItemSummaryComponent {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       description:
         'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
       head_title: 'Simple Card',
@@ -98,15 +106,17 @@ export const NewsItemSummary: Story = {
 
 export const EventSummary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <EventSummaryComponent {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <EventSummaryComponent {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       description:
         'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
       head_title: 'Simple Card',
@@ -119,17 +129,23 @@ export const EventSummary: Story = {
 
 export const FileSummary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <FileSummaryComponent {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <div className="file-teaser">
+            <FileSummaryComponent {...args} />
+          </div>
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       description:
         'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
+      getObjSize: '72.7 KB',
+      mime_type: 'application/pdf',
       head_title: 'Simple Card',
       start: '2023-01-01T11:00:00+00:00',
       end: '2023-12-31T12:00:00+00:00',

package/src/primitives/Card/Card.stories.tsx

@@ -165,7 +165,10 @@ export const CustomImage: Story = {
   render: (args) => (
     <div
       className="card-listing"
-      style={{ width: 'var(--default-container-width)' }}
+      style={{
+        width: 'var(--default-container-width)',
+        '--theme-high-contrast-color': '#ecebeb',
+      }}
     >
       <Card href={args.href}>
         <Card.Image>

package/src/primitives/Card/Card.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import Card from './Card';
 
 vi.mock(
@@ -43,10 +43,16 @@ vi.mock(
 
 type SummaryProps = {
   a11yLabelId?: string;
+  LinkToItem?: React.ElementType;
 };
 
-const SummaryContent = ({ a11yLabelId }: SummaryProps) => (
-  <h3 id={a11yLabelId}>Card title</h3>
+const SummaryContent = ({
+  a11yLabelId,
+  LinkToItem = React.Fragment,
+}: SummaryProps) => (
+  <h3 id={a11yLabelId}>
+    <LinkToItem>Card title</LinkToItem>
+  </h3>
 );
 
 const BodyContent = () => <div>Body content</div>;
@@ -64,26 +70,20 @@ describe('Card', () => {
 
   it('is interactive when an href is provided', () => {
     const { container } = renderCard({ href: '/target', className: 'custom' });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    expect(card).toHaveAttribute('role', 'link');
-    expect(card).toHaveAttribute('tabindex', '0');
 
     const anchor = container.querySelector('a');
     expect(anchor).not.toBeNull();
     expect(anchor).toHaveAttribute('href', '/target');
+    expect(anchor).toHaveClass('card-primary-link');
   });
 
   it('is interactive when an item is provided', () => {
     const { container } = renderCard({ item: { '@id': '/item-target' } });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    expect(card).toHaveAttribute('role', 'link');
-    expect(card).toHaveAttribute('tabindex', '0');
 
     const anchor = container.querySelector('a');
     expect(anchor).not.toBeNull();
     expect(anchor).toHaveAttribute('href', '/item-target');
+    expect(anchor).toHaveClass('card-primary-link');
   });
 
   it('is not interactive when neither href nor item is provided', () => {
@@ -112,26 +112,4 @@ describe('Card', () => {
     expect(card).not.toHaveAttribute('tabindex');
     expect(container.querySelector('a')).toBeNull();
   });
-
-  it('triggers navigation handlers when interactive', () => {
-    const clickSpy = vi
-      .spyOn(HTMLAnchorElement.prototype, 'click')
-      .mockImplementation(() => {});
-    const selectionSpy = vi
-      .spyOn(window, 'getSelection')
-      .mockReturnValue({ toString: () => '' } as unknown as Selection);
-
-    const { container } = renderCard({ href: '/target' });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    fireEvent.click(card);
-    fireEvent.keyDown(card, { key: 'Enter' });
-    fireEvent.keyDown(card, { key: ' ' });
-    fireEvent.keyDown(card, { key: 'Escape' });
-
-    expect(clickSpy).toHaveBeenCalledTimes(3);
-
-    clickSpy.mockRestore();
-    selectionSpy.mockRestore();
-  });
 });