@kitconcept/volto-light-theme 7.1.0 → 7.3.0

package/.changelog.draft

@@ -1,18 +1,13 @@
-## 7.1.0 (2025-09-29)
-
-### Feature
-
-- Add Basque translation @erral [#675](https://github.com/kitconcept/volto-light-theme/pull/675)
+## 7.3.0 (2025-10-07)
 
 ### Bugfix
 
-- Fix use Sass interpolation for CSS variable fallbacks @iRohitSingh [#673](https://github.com/kitconcept/volto-light-theme/pull/673)
-- Fix vertical spacing for first block in case that there is a change of color from default. @sneridagh [#676](https://github.com/kitconcept/volto-light-theme/pull/676)
-- Don't show parent tags when adding the child. @iFlameing 
+- Pass down items to `Card` component, so it can pass it down to `UniversalLink`. @sneridagh [#684](https://github.com/kitconcept/volto-light-theme/pull/684)
+- Added addressable classNames to FileSummary headline. @sneridagh [#686](https://github.com/kitconcept/volto-light-theme/pull/686)
+- Update socialmedia add-on to 2.0.0a10 and Volto to 18.27.3. @sneridagh 
 
 ### Internal
 
-- Fix cypress test for calendar block. @iFlameing [#calendar-cypress](https://github.com/kitconcept/volto-light-theme/pull/calendar-cypress)
-- Misc bugfixes. Upgrade to Volto 18.27.2. @sneridagh 
+- Replace "head title" with "kicker" in example content. @davisagli 
 
 

package/CHANGELOG.md

@@ -8,6 +8,31 @@
 
 <!-- towncrier release notes start -->
 
+## 7.3.0 (2025-10-07)
+
+### Bugfix
+
+- Pass down items to `Card` component, so it can pass it down to `UniversalLink`. @sneridagh [#684](https://github.com/kitconcept/volto-light-theme/pull/684)
+- Added addressable classNames to FileSummary headline. @sneridagh [#686](https://github.com/kitconcept/volto-light-theme/pull/686)
+- Update socialmedia add-on to 2.0.0a10 and Volto to 18.27.3. @sneridagh 
+
+### Internal
+
+- Replace "head title" with "kicker" in example content. @davisagli 
+
+## 7.2.0 (2025-10-01)
+
+### Feature
+
+- Added smartTextRenderer helper for rendering markdown formatted links in plain text. @sneridagh [#679.1](https://github.com/kitconcept/volto-light-theme/pull/679.1)
+- Link support in descriptions in summaries via a custom mardown parser (smartText). @sneridagh [#679.2](https://github.com/kitconcept/volto-light-theme/pull/679.2)
+
+### Bugfix
+
+- Fixed icons and spacing in calendar event range widget. @sneridagh [#680](https://github.com/kitconcept/volto-light-theme/pull/680)
+- Added card img 100% width for account for small images. @sneridagh [#681](https://github.com/kitconcept/volto-light-theme/pull/681)
+- Fixed regression for contained teasers applying a margin only meant for contained ones. @sneridagh [#683](https://github.com/kitconcept/volto-light-theme/pull/683)
+
 ## 7.1.0 (2025-09-29)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.1.0",
+  "version": "7.3.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -33,14 +33,17 @@
     "@plone/scripts": "^3.6.2",
     "@storybook/react": "^8.6.12",
     "@testing-library/cypress": "10.0.3",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.8",
     "@types/lodash": "^4.14.201",
     "@types/node": "^22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "typescript": "^5.7.3",
+    "react-intl-redux": "2.3.0",
+    "redux-mock-store": "1.5.4",
     "release-it": "^19.0.3",
+    "typescript": "^5.7.3",
     "vitest": "^3.1.2",
     "@plone/types": "1.4.5"
   },
@@ -48,12 +51,12 @@
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.2",
+    "embla-carousel-autoplay": "^8.0.0",
+    "embla-carousel-react": "^8.0.0",
     "react-animate-height": "^3.2.3",
     "react-aria-components": "^1.7.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
-    "embla-carousel-autoplay": "^8.0.0",
-    "embla-carousel-react": "^8.0.0",
     "@plone/components": "^3.0.2"
   },
   "peerDependencies": {
@@ -69,7 +72,7 @@
     "@kitconcept/volto-logos-block": "^3.0.0-alpha.1",
     "@kitconcept/volto-separator-block": "^4.2.1",
     "@kitconcept/volto-slider-block": "^6.4.0",
-    "@plonegovbr/volto-social-media": "^2.0.0-alpha.6",
+    "@plonegovbr/volto-social-media": "^2.0.0-alpha.10",
     "classnames": "^2.2.6",
     "lodash": "4.17.21",
     "react": "18.2.0",

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

@@ -22,6 +22,8 @@ import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import CalendarSVG from '@plone/volto/icons/calendar.svg';
 import ClearSVG from '@plone/volto/icons/clear.svg';
+import LeftArrowSVG from '@plone/volto/icons/left-key.svg';
+import RightArrowSVG from '@plone/volto/icons/right-key.svg';
 
 export interface DateRangePickerProps<T extends DateValue>
   extends RACDateRangePickerProps<T> {
@@ -64,13 +66,17 @@ export function DateRangePicker<T extends DateValue>({
 
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover>
+      <Popover offset={0}>
         <Dialog>
           <RangeCalendar>
             <header>
-              <Button slot="previous">◀</Button>
+              <Button slot="previous">
+                <Icon name={LeftArrowSVG} />
+              </Button>
               <Heading />
-              <Button slot="next">▶</Button>
+              <Button slot="next">
+                <Icon name={RightArrowSVG} />
+              </Button>
             </header>
             <CalendarGrid>
               {(date) => <CalendarCell date={date} />}

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

@@ -39,7 +39,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               })}
               key={item['@id']}
             >
-              <Card href={showLink ? item['@id'] : null}>
+              <Card item={showLink ? item : null}>
                 <Card.Summary>
                   <Summary item={item} HeadingTag="h2" />
                 </Card.Summary>

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

@@ -62,7 +62,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               })}
               key={item['@id']}
             >
-              <Card href={showLink ? item['@id'] : null}>
+              <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
             </div>

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

@@ -57,7 +57,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               })}
               key={item['@id']}
             >
-              <Card href={showLink ? item['@id'] : null}>
+              <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
             </div>

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

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import TeaserDefaultTemplate from './DefaultBody';
+
+const mockStore = configureStore();
+
+describe('TeaserDefaultTemplate', () => {
+  it('renders markdown links inside the description', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      userSession: {
+        token: null,
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <TeaserDefaultTemplate
+            className=""
+            data={{
+              href: [
+                {
+                  '@id': '/news',
+                },
+              ],
+              preview_image: [],
+              title: 'News',
+              description: 'Read the [Portal](/portal) updates',
+              overwrite: true,
+            }}
+            isEditMode={false}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Portal' });
+    expect(link.getAttribute('href')).toBe('/portal');
+
+    const mainLink = screen.getByRole('link', { name: 'News' });
+    expect(mainLink.getAttribute('href')).toBe('/news');
+  });
+});

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

@@ -23,10 +23,7 @@ const TeaserDefaultTemplate = (props) => {
   const { '@id': id, ...filteredData } = data;
 
   return (
-    <Card
-      href={showLink ? href['@id'] : null}
-      openLinkInNewTab={openLinkInNewTab}
-    >
+    <Card item={showLink ? href : null} openLinkInNewTab={openLinkInNewTab}>
       <Card.Image
         src={url && !image?.image_field ? url : undefined}
         item={!data.overwrite ? href : { ...href, ...filteredData }}

package/src/components/Summary/DefaultSummary.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ObjectBrowserItem } from '@plone/types';
+import { smartTextRenderer } from '../../helpers/smartText';
 
 export type DefaultSummaryProps = {
   item: Partial<ObjectBrowserItem>;
@@ -20,7 +21,9 @@ const DefaultSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/EventSummary.tsx

@@ -4,6 +4,7 @@ import {
 } 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 EventSummary = (props: DefaultSummaryProps) => {
   const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
@@ -30,7 +31,9 @@ const EventSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/FileSummary.tsx

@@ -1,21 +1,37 @@
 import FileType from '@kitconcept/volto-light-theme/helpers/Filetype';
 import type { DefaultSummaryProps } from './DefaultSummary';
+import { smartTextRenderer } from '../../helpers/smartText';
+
+const FileHeadline = (props: { item: any }) => {
+  const { item } = props;
+  const headline =
+    item.getObjSize || FileType(item.mime_type) || item.head_title || '';
+
+  return headline?.length === 0 ? null : (
+    <div className="headline">
+      {item.getObjSize && <span className="file-size">{item.getObjSize}</span>}
+      {FileType(item.mime_type) && (
+        <span className="file-type">{FileType(item.mime_type)}</span>
+      )}
+      {item.head_title && (
+        <span className="headline-content">{item.head_title}</span>
+      )}
+    </div>
+  );
+};
 
 const FileSummary = (props: DefaultSummaryProps) => {
   const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
 
-  const headline = [item.getObjSize, FileType(item.mime_type), item.head_title]
-    .filter((x) => x)
-    .flatMap((x) => [' | ', x])
-    .slice(1);
-
   return (
     <>
-      {headline.length ? <div className="headline">{headline}</div> : null}
+      <FileHeadline item={item} />
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/NewsItemSummary.tsx

@@ -1,6 +1,7 @@
 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;
@@ -32,7 +33,9 @@ const NewsItemSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/PersonSummary.tsx

@@ -1,10 +1,10 @@
-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';
 import phoneSVG from '@plone/volto/icons/mobile.svg';
 import type { DefaultSummaryProps } from './DefaultSummary';
 import { defineMessages, useIntl } from 'react-intl';
+import { smartTextRenderer } from '../../helpers/smartText';
 
 const messages = defineMessages({
   phone: {
@@ -31,7 +31,9 @@ const PersonSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
 
       {item.contact_email && (
         <div className="summary-extra-info email">

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

@@ -38,6 +38,24 @@ export const Summary: Story = {
   },
 };
 
+export const SummaryWithLink: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <DefaultSummary {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      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',
+    },
+  },
+};
+
 export const SummaryHideDescription: Story = {
   render: (args) => (
     <div style={{ width: '300px' }}>

package/src/helpers/smartText.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { smartTextRenderer } from './smartText';
+
+vi.mock('@plone/volto/components/manage/UniversalLink/UniversalLink', () => ({
+  default: ({
+    href,
+    children,
+  }: {
+    href: string;
+    children: React.ReactNode;
+  }) => (
+    <a href={href} data-testid="universal-link">
+      {children}
+    </a>
+  ),
+}));
+
+const renderWithWrapper = (description: string | null | undefined) =>
+  render(
+    <div data-testid="description-wrapper">
+      {smartTextRenderer(description)}
+    </div>,
+  );
+
+describe('smartTextRenderer', () => {
+  it('returns null for empty description', () => {
+    expect(smartTextRenderer('')).toBeNull();
+    expect(smartTextRenderer(null)).toBeNull();
+    expect(smartTextRenderer(undefined)).toBeNull();
+  });
+
+  it('renders plain text without creating links', () => {
+    const description = 'This is a plain description.';
+    const { container, queryByTestId } = renderWithWrapper(description);
+
+    expect(container).toHaveTextContent(description);
+    expect(queryByTestId('universal-link')).toBeNull();
+  });
+
+  it('renders a single markdown link and preserves surrounding text', () => {
+    const description = 'Visit [Google](https://google.com) for more info.';
+    const { container } = renderWithWrapper(description);
+    const link = screen.getByRole('link', { name: 'Google' });
+
+    expect(container).toHaveTextContent('Visit Google for more info.');
+    expect(link).toHaveAttribute('href', 'https://google.com');
+  });
+
+  it('renders multiple markdown links with text segments between them', () => {
+    const description = 'Check [One](/one) and [Two](/two) for details.';
+    renderWithWrapper(description);
+    const links = screen.getAllByRole('link');
+
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/one');
+    expect(links[1]).toHaveAttribute('href', '/two');
+  });
+
+  it('trims whitespace around link text and href values', () => {
+    const description = 'Go to [  Space  ](  /space  )!';
+    const { container } = renderWithWrapper(description);
+    const link = screen.getByRole('link', { name: 'Space' });
+
+    expect(container).toHaveTextContent('Go to Space!');
+    expect(link).toHaveAttribute('href', '/space');
+  });
+
+  it('renders carriage returns and newlines as line breaks', () => {
+    const { container } = renderWithWrapper('Line 1\r\nLine 2\nLine 3');
+    const brs = container.querySelectorAll('br');
+
+    expect(container).toHaveTextContent('Line 1Line 2Line 3');
+    expect(brs).toHaveLength(2);
+    expect(brs[0].nextSibling?.textContent).toBe('Line 2');
+    expect(brs[1].nextSibling?.textContent).toBe('Line 3');
+  });
+
+  it('ignores bracketed text that is not a markdown link', () => {
+    const description = 'Keep [this] but not a link.';
+    const { container } = renderWithWrapper(description);
+
+    expect(container).toHaveTextContent('Keep [this] but not a link.');
+  });
+
+  it('resets the markdown matcher between invocations', () => {
+    const { rerender } = renderWithWrapper('First [Link](/first) call.');
+    expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(
+      'href',
+      '/first',
+    );
+
+    rerender(
+      <div data-testid="description-wrapper">
+        {smartTextRenderer('Second [Link](/second) call.')}
+      </div>,
+    );
+
+    expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(
+      'href',
+      '/second',
+    );
+  });
+});

package/src/helpers/smartText.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+const linkPattern = /\[([^\]]+)\]\(([^)]+)\)/g;
+
+export const smartTextRenderer = (smartText) => {
+  if (!smartText) return null;
+
+  linkPattern.lastIndex = 0;
+
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+
+  while ((match = linkPattern.exec(smartText)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(smartText.slice(lastIndex, match.index));
+    }
+
+    const [, text, href] = match;
+
+    parts.push({
+      type: 'link',
+      text: text.trim(),
+      href: href.trim(),
+    });
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < smartText.length) {
+    parts.push(smartText.slice(lastIndex));
+  }
+
+  return parts.map((part, index) => {
+    if (typeof part === 'string') {
+      const segments = part.split(/\r\n|\r|\n/);
+
+      return (
+        <React.Fragment key={`text-${index}`}>
+          {segments.map((segment, segmentIndex) => (
+            <React.Fragment key={`text-${index}-${segmentIndex}`}>
+              {segment}
+              {segmentIndex < segments.length - 1 ? <br /> : null}
+            </React.Fragment>
+          ))}
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <UniversalLink href={part.href} key={`link-${index}`}>
+        {part.text}
+      </UniversalLink>
+    );
+  });
+};

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

@@ -67,7 +67,7 @@ export const SimpleWithoutLink: Story = {
     </Card>
   ),
   args: {
-    href: '/folder/page',
+    href: undefined,
   },
   decorators: [
     (Story) => (

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import Card from './Card';
+
+vi.mock(
+  '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
+  () => {
+    return {
+      __esModule: true,
+      default: React.forwardRef(
+        (
+          {
+            condition,
+            href,
+            item,
+            openLinkInNewTab: _openLinkInNewTab,
+            children,
+            ...rest
+          }: {
+            condition?: boolean;
+            href?: string;
+            item?: { ['@id']?: string };
+            openLinkInNewTab?: boolean;
+            children?: React.ReactNode;
+          },
+          ref: React.ForwardedRef<HTMLAnchorElement>,
+        ) => {
+          if (!condition) return null;
+
+          const computedHref = href ?? item?.['@id'] ?? '#';
+
+          return (
+            <a {...rest} ref={ref} href={computedHref}>
+              {children}
+            </a>
+          );
+        },
+      ),
+    };
+  },
+);
+
+type SummaryProps = {
+  a11yLabelId?: string;
+};
+
+const SummaryContent = ({ a11yLabelId }: SummaryProps) => (
+  <h3 id={a11yLabelId}>Card title</h3>
+);
+
+const BodyContent = () => <div>Body content</div>;
+
+describe('Card', () => {
+  const renderCard = (props: React.ComponentProps<typeof Card>) =>
+    render(
+      <Card {...props}>
+        <Card.Summary>
+          <SummaryContent />
+        </Card.Summary>
+        <BodyContent />
+      </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');
+  });
+
+  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');
+  });
+
+  it('is not interactive when neither href nor item is provided', () => {
+    const { container } = renderCard({});
+    const card = container.querySelector('.card') as HTMLElement;
+
+    expect(card).not.toHaveAttribute('role');
+    expect(card).not.toHaveAttribute('tabindex');
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('is not interactive when neither href nor item is provided and one is null', () => {
+    const { container } = renderCard({ href: null });
+    const card = container.querySelector('.card') as HTMLElement;
+
+    expect(card).not.toHaveAttribute('role');
+    expect(card).not.toHaveAttribute('tabindex');
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('is not interactive when neither href nor item is provided and one is undefined', () => {
+    const { container } = renderCard({ item: undefined });
+    const card = container.querySelector('.card') as HTMLElement;
+
+    expect(card).not.toHaveAttribute('role');
+    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();
+  });
+});

package/src/primitives/Card/Card.tsx

@@ -3,16 +3,27 @@ import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/Cond
 import cx from 'classnames';
 import type { ObjectBrowserItem } from '@plone/types';
 
-type CardProps = {
+type BaseCardProps = {
   /** Optional additional CSS class names to apply to the card. */
   className?: string;
-  /** Optional URL to make the card clickable as a link. */
-  href?: string;
-  /** If true and `href` is provided, opens the link in a new browser tab. */
   openLinkInNewTab?: boolean;
   children?: React.ReactNode;
 };
 
+type CardPropsWithItem = BaseCardProps & {
+  /** List of items rendered within the card. Mutually exclusive with `href`. */
+  href?: never;
+  item: Partial<ObjectBrowserItem>;
+};
+
+type CardPropsWithoutItem = BaseCardProps & {
+  /** Optional URL to make the card clickable as a link. */
+  href?: string | undefined | null;
+  item?: never;
+};
+
+type CardProps = CardPropsWithItem | CardPropsWithoutItem;
+
 const DefaultImage = (props: any) => {
   const { src, item, imageField, alt, loading, responsive } = props;
   return (
@@ -35,7 +46,10 @@ const childrenWithProps = (children, extraProps) => {
 };
 
 const Card = (props: CardProps) => {
-  const { className, href, openLinkInNewTab } = props;
+  const hasItem = !!props.item;
+  const item = hasItem ? props.item : undefined;
+  const href = !hasItem ? props.href : undefined;
+  const { className, openLinkInNewTab } = props;
 
   const a11yLabelId = React.useId();
   const linkRef = React.useRef<HTMLAnchorElement>(null);
@@ -48,12 +62,14 @@ const Card = (props: CardProps) => {
     }
   };
 
+  const isInteractive = !!props.href || !!props.item;
+
   const onClick: React.MouseEventHandler<HTMLDivElement> = () => {
-    if (href) triggerNavigation();
+    if (isInteractive) triggerNavigation();
   };
 
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!href) return;
+    if (!isInteractive) return;
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       triggerNavigation();
@@ -63,16 +79,17 @@ const Card = (props: CardProps) => {
   return (
     <div
       className={cx('card', className)}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      role={href ? 'link' : undefined}
-      tabIndex={href ? 0 : undefined}
+      onClick={isInteractive ? onClick : undefined}
+      onKeyDown={isInteractive ? onKeyDown : undefined}
+      role={isInteractive ? 'link' : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
     >
       {/* @ts-expect-error since this has no children, should fail */}
       <ConditionalLink
         aria-labelledby={a11yLabelId}
-        condition={!!href}
+        condition={isInteractive}
         href={href}
+        item={item}
         openLinkInNewTab={openLinkInNewTab}
         ref={linkRef}
       />

package/src/stories/mocks.ts

@@ -98,7 +98,7 @@ export const teaserBlock = {
         '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.',
       getRemoteUrl: null,
       hasPreviewImage: true,
-      head_title: 'Head title',
+      head_title: 'Kicker',
       image_field: 'preview_image',
       image_scales: {
         preview_image: [
@@ -412,7 +412,7 @@ export const gridBlock = {
       '@type': 'teaser',
       description:
         'Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
-      head_title: 'Head title ',
+      head_title: 'Kicker',
       href: [
         {
           '@id': '.',
@@ -425,7 +425,7 @@ export const gridBlock = {
           title: 'Block: Teaser',
           getRemoteUrl: null,
           hasPreviewImage: true,
-          head_title: 'Head Title',
+          head_title: 'Kicker',
           image_field: 'preview_image',
           image_scales: {
             preview_image: [
@@ -502,7 +502,7 @@ export const gridBlock = {
       '@type': 'teaser',
       description:
         'Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
-      head_title: 'Head title ',
+      head_title: 'Kicker',
       href: [
         {
           '@id': '.',
@@ -515,7 +515,7 @@ export const gridBlock = {
           Title: 'Block: Grid',
           getRemoteUrl: null,
           hasPreviewImage: true,
-          head_title: 'Head Title',
+          head_title: 'Kicker',
           image_field: 'preview_image',
           image_scales: {
             preview_image: [

package/src/theme/_bgcolor-blocks-layout.scss

@@ -3,17 +3,8 @@
   color: var(--theme-foreground-color);
   @include color-block-change-vertical-spacing();
 
-  // // TODO: investigate why on SSR the whitespace is removed and in client not
-  // // This is a workaround to avoid the two use cases...
-  // &[style*='--theme-color:#fff']:first-child,
-  // &[style*='--theme-color: #fff']:first-child {
-  //   padding-top: 0;
-  // }
-
-  // &:first-child:has(> .previous--has--same--backgroundColor) {
-  //   padding-top: 0;
-  // }
-
+  // First block of the page has no top padding, only if previous block has same background color
+  // eg: when it's different than default.
   &:first-child:has(> :first-child.previous--has--same--backgroundColor) {
     padding-top: 0;
   }

package/src/theme/_layout.scss

@@ -368,7 +368,7 @@ External link removal for all the blocks.
   .block.teaser.has--align--center,
   .block.eventMetadata .details-container,
   .block-editor-teaser .teaser-item.default,
-  .block-editor-teaser .card-inner, // deprecate when category is in place
+  .block-editor-teaser:not(.contained) .card-inner, // deprecate when category is in place
   .block-editor-slateTable .block.table,
   .block-editor-highlight .teaser-description-title,
   .block-editor-toc .table-of-contents,

package/src/theme/blocks/_eventSearch.scss

@@ -417,12 +417,20 @@ This is css code of popup of calendar */
   border-radius: unset;
 }
 .react-aria-RangeCalendar {
+  font-size: 24px;
+
+  table .react-aria-CalendarCell {
+    width: 2.75rem;
+  }
+
   header {
     display: flex;
+    margin: 10px 0 20px 0;
   }
 
   //ask victor about this. Font family causing unwanted problems in rendering of icon.
   .react-aria-Button {
+    border: none;
     border-radius: unset;
     font-family: unset;
   }
@@ -432,3 +440,17 @@ This is css code of popup of calendar */
     text-align: center;
   }
 }
+
+// body:has(.react-aria-Popover[data-trigger='DateRangePicker'])
+//   .react-aria-Group {
+//   border-bottom: none;
+// }
+
+.react-aria-Popover[data-trigger='DateRangePicker'] {
+  min-width: var(--trigger-width);
+  border-top: none;
+}
+
+.react-aria-Dialog:has(.react-aria-RangeCalendar) {
+  padding: 10px;
+}

package/src/theme/blocks/_teaser.scss

@@ -150,3 +150,8 @@
 #page-edit .block-editor-teaser.has--backgroundColor--grey {
   background-color: $lightgrey;
 }
+
+.file-teaser .headline span:not(:last-child)::after {
+  margin: 0 10px;
+  content: '|';
+}

package/src/theme/card.scss

@@ -24,6 +24,9 @@
 
     img {
       display: block;
+      // Beware of this, it can cause issues with some images, added back on 2025-09-30 @sneridagh
+      // Small images will be pixelated though
+      width: 100%;
       aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
     }
   }

package/tsconfig.json

@@ -12,6 +12,7 @@
     "noEmit": true,
     "lib": ["es2022", "dom", "dom.iterable"],
     "jsx": "react-jsx",
+    "types": ["vitest", "@testing-library/jest-dom"],
     "paths": {
       "@plone/volto/*": [
         "../../core/packages/volto/src/*",

package/vitest.config.mjs

@@ -4,11 +4,18 @@ import path from 'path';
 
 export default defineConfig({
   ...voltoVitestConfig,
+  resolve: {
+    alias: {
+      ...voltoVitestConfig.resolve.alias,
+      // Alias for absolute imports
+      '@kitconcept/volto-light-theme': path.resolve(__dirname, './src'),
+      '@kitconcept/volto-light-theme/': path.resolve(__dirname, './src/'),
+    },
+  },
   server: {
     fs: {
       allow: [
-        // Allow vite/vitest to access these folders
-        '..', // allow going up from frontend/
+        '..',
         path.resolve(__dirname, '../../../../../core/packages/volto'),
       ],
     },