> For the complete documentation index, see [llms.txt](https://docs.civictheme.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.civictheme.io/changelog/civictheme-release-notes/civictheme-1.11.0.md).

# CivicTheme 1.11.0

CivicTheme v1.11.0 includes major architectural changes to convert CivicTheme's component system to Single Directory Components, as well as update scripts to assist.

### Architectural changes <a href="#major-architectural-changes" id="major-architectural-changes"></a>

Component Extension Model has changed to match SDC extensions

* Removed: Direct extension of CivicTheme base components in sub-themes
* Supported inheritance types:
  * ✅ Custom components in sub-theme
  * ✅ Override CivicTheme components completely
  * ❌ Extend CivicTheme components partially<br>

### Single directory components architecture <a href="#single-directory-components-architecture" id="single-directory-components-architecture"></a>

* Components bundle HTML, CSS, and JS in single directories
* Converted to use Single Directory Component framework
* CivicTheme components utilse an automated component validation system (within the UI Kit development repository)

Read more about [Using single directory components](#single-directory-components-architecture).

### UI Kit enhancements <a href="#ui-kit-enhancements" id="ui-kit-enhancements"></a>

* Dual component library support (Twig + SDC)
* Separate Storybooks for each component type
* Visual regression testing between Twig and SDC components
* Shared test infrastructure across component types

### Twig namespaces for CivicTheme has with SDC <a href="#twig-namespaces-for-civictheme-has-with-sdc" id="twig-namespaces-for-civictheme-has-with-sdc"></a>

**From:**

```
{% include '@atoms/paragraph/paragraph.twig' with {
  theme: theme,
  content: panel.content,
  allow_html: true,
  modifier_class: 'ct-accordion__panels__panel__content__inner',
} only %}

```

**To:**

```
{% include 'civictheme:paragraph' with {
  theme: theme,
  content: panel.content,
  allow_html: true,
  modifier_class: 'ct-accordion__panels__panel__content__inner',
} only %}

```

### Migration guide

For new sites, there is no migration needed, just install CivicTheme.

For existing sites, custom components need to be updated. We are providing a custom script to assist you with this upgrade.

#### Use the update script <a href="#update-script" id="update-script"></a>

To help you to upgrade we have provided the following:

* A part shell / node script that updates your component's build scripts, storybook setup and package.json.&#x20;
* A part AI script that sends your twig files to Claude API to attempt to extract a component schema.

Go to the [CivicTheme SDC Update Tool](https://github.com/civictheme/upgrade-tools/tree/main/sdc-update#readme) in GitHub for docs on updating using the scripts.&#x20;

#### Non-update script

If you don't wish to run the AI script you can manually update the script and remove it.

Go to [Upgrade tools ](https://github.com/civictheme/upgrade-tools/blob/main/sdc-update/src/update-runner.mjs#L34) (and add a dummy API key in to satisfy validation).

#### Note on sites with extended components

Special care needs to be taken for sites with extended components. These need to be manually migrated.

### Changelogs

For the full list of issues released, visit the CivicTheme changelogs at drupal.org and GutHub:

* [CivicTheme Drupal changelog](https://www.drupal.org/project/civictheme/releases/1.11.0)
* [CivicTheme monorepo changelog](https://github.com/civictheme/monorepo-drupal/tree/1.11.0)

### <br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.civictheme.io/changelog/civictheme-release-notes/civictheme-1.11.0.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.