druxt-blocks 0.17.3 → 0.17.4-dev.20260920063819

package/README.md

@@ -1,47 +1,57 @@
-# DruxtJS Blocks
+<img src="./banner.svg" alt="DruxtBlocks renders Drupal blocks and block regions in Nuxt">
+
+# DruxtBlocks
 
 [![npm](https://badgen.net/npm/v/druxt-blocks)](https://www.npmjs.com/package/druxt-blocks)
-[![CircleCI](https://circleci.com/gh/druxt/druxt-blocks.svg?style=svg)](https://circleci.com/gh/druxt/druxt-blocks)
-[![Known Vulnerabilities](https://snyk.io/test/github/druxt/druxt-blocks/badge.svg?targetFile=package.json)](https://snyk.io/test/github/druxt/druxt-blocks?targetFile=package.json)
-[![codecov](https://codecov.io/gh/druxt/druxt-blocks/branch/develop/graph/badge.svg)](https://codecov.io/gh/druxt/druxt-blocks)
+[![CI](https://github.com/druxt/druxt.js/actions/workflows/ci.yml/badge.svg)](https://github.com/druxt/druxt.js/actions/workflows/ci.yml)
+[![Known Vulnerabilities](https://snyk.io/test/github/druxt/druxt.js/badge.svg?targetFile=package.json)](https://snyk.io/test/github/druxt/druxt.js?targetFile=package.json)
+[![codecov](https://codecov.io/gh/druxt/druxt.js/branch/develop/graph/badge.svg)](https://codecov.io/gh/druxt/druxt.js)
 
-> Drupal Block and Block Region Druxt components.
+> Render Drupal blocks and block regions in Nuxt with the druxt-blocks components, themed through the Druxt component suggestion system.
 
-## Links
+DruxtBlocks brings Drupal's block layout to Nuxt. `DruxtBlockRegion` renders
+every visible block Drupal places in a theme region, and `DruxtBlock` renders
+one block anywhere in your layout. Both resolve through the Druxt
+component suggestion system, so overriding one block's markup takes one Vue
+component.
 
-- DruxtJS: https://druxtjs.org
-- Documentation: https://druxtjs.org/modules/blocks
-- Community Discord server: https://discord.druxtjs.org
+![Example DruxtBlockRegion component](https://druxtjs.org/images/druxt-block-region.png)
 
+## Features
 
-## Install
+- Vue.js components:
+  - **DruxtBlock** renders Drupal blocks by UUID or internal ID
+  - **DruxtBlockRegion** renders all blocks within a region
+- **Druxt settings** filter JSON:API fields
+- **@nuxtjs/Storybook** integration
 
-`$ npm install druxt-blocks`
+---
 
+## Installation
 
-### Nuxt.js
+> Included with [`druxt-site`](https://druxtjs.org/modules/site). Install it separately only when composing modules yourself.
 
-Add module to `nuxt.config.js`
+1. Install the package:
 
-```js
-module.exports = {
-  modules: ['druxt-blocks'],
-  druxt: {
-    baseUrl: 'https://demo-api.druxtjs.org',
-    blocks: {
-      query: {
-        fields: [],
-      },
-    },
-  },
-}
-```
+   ```sh
+   npm i druxt-blocks
+   ```
+
+2. Add the module to `nuxt.config.js`:
+
+   ```js
+   export default {
+     modules: ['druxt-blocks'],
+   };
+   ```
 
-## Usage
+---
 
-### DruxtBlock component
+## Vue.js components
 
-The DruxtBlock component renders a Drupal JSON:API Block resource by ID or UUID.
+### DruxtBlock
+
+Renders a Drupal Block by UUID or Drupal's internal ID.
 
 ```vue
 <DruxtBlock :id="drupal_internal__id" />
@@ -51,38 +61,51 @@ The DruxtBlock component renders a Drupal JSON:API Block resource by ID or UUID.
 <DruxtBlock :uuid="uuid" />
 ```
 
-See the [DruxtBlock API Documentation](https://druxtjs.org/api/packages/blocks/components/DruxtBlock) for more information.
-
+- For more details, refer to the [DruxtBlock API documentation](https://druxtjs.org/api/packages/blocks/components/DruxtBlock).
 
 ### DruxtBlockRegion
 
-The DruxtBlockRegion component renders all visible blocks for the specified theme region.
+Renders all visible blocks by theme and region name.
 
 ```vue
 <DruxtBlockRegion :name="name" :theme="theme" />
 ```
 
-![Example DruxtBlockRegion component](https://druxtjs.org/images/druxt-block-region.png)
+- For more details, refer to the [DruxtBlockRegion API documentation](https://druxtjs.org/api/packages/blocks/components/DruxtBlockRegion).
 
-See the [DruxtBlockRegion API Documentation](https://druxtjs.org/api/packages/blocks/components/DruxtBlockRegion) for more information.
+---
 
+## Settings
 
-### Theming
+### Reducing Block data
 
-Both components can be themed by providing a default template:
+The default behaviour of the Block module is to retrieve all available fields from the JSON:API.
 
-```vue
-<DruxtBlock :id="id">
-  <template #default="{ block }">
-    {{ block }}
-  </template>
-</DruxtEntity>
+This behaviour is configurable using the modules `query` option, allowing for manually filtered `fields`.
+
+The default behaviour can be set via `nuxt.config.js`:
+
+```js
+druxt: {
+  blocks: {
+    query: {
+      fields: ['dependencies'],
+    },
+  },
+}
 ```
 
-The module also provides Wrapper components with scoped slots for theming.
+---
+
+## Storybook
+
+DruxtBlocks provides zero-config, auto-generated Storybook integration with a live data connection to your Druxt backend.
 
-See the [Druxt Theming guide](https://druxtjs.org/guide/theming) for more information.
+![DruxtBlocks Storybook integration](https://druxtjs.org/images/druxt-block-storybook.png)
 
+- For more details, see the [Storybook guide](https://druxtjs.org/how-to/storybook).
+
+---
 
 ## Options
 
@@ -90,17 +113,22 @@ See the [Druxt Theming guide](https://druxtjs.org/guide/theming) for more inform
 
 These options are specific to this module.
 
-| Option | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `block.query.fields` | `string[]` | No | `[]` | An array of fields to filter all Block JSON:API queries. |
-
+| Option                | Type       | Required | Default | Description                                              |
+| --------------------- | ---------- | -------- | ------- | -------------------------------------------------------- |
+| `blocks.query.fields` | `string[]` | No       | `[]`    | An array of fields to filter all Block JSON:API queries. |
 
 ### Base Druxt options
 
 These options are available to all Druxt modules.
 
-| Option | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `axios` | `object` | No | `{}` | [Axios instance settings](https://github.com/axios/axios#axioscreateconfig). |
-| `baseUrl` | `string` | Yes | `null` | Base URL for the Drupal installation. |
-| `endpoint` | `string` | No | `/jsonapi` | JSON:API Endpoint of the Drupal installation. |
+| Option     | Type     | Required | Default    | Description                                                                  |
+| ---------- | -------- | -------- | ---------- | ---------------------------------------------------------------------------- |
+| `axios`    | `object` | No       | `{}`       | [Axios instance settings](https://github.com/axios/axios#axioscreateconfig). |
+| `baseUrl`  | `string` | Yes      | `null`     | Base URL for the Drupal installation.                                        |
+| `endpoint` | `string` | No       | `/jsonapi` | JSON:API Endpoint of the Drupal installation.                                |
+
+## Links
+
+- DruxtJS: https://druxtjs.org
+- Documentation: https://druxtjs.org/modules/blocks
+- Community Discord server: https://discord.druxtjs.org

package/banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 320" width="1280" height="320" role="img" aria-label="druxt-blocks: Drupal blocks and block regions in Nuxt."><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#1f2937"/><stop offset="0.7" stop-color="#2f495e"/><stop offset="1" stop-color="#36566e"/></linearGradient></defs><rect width="1280" height="320" rx="16" fill="url(#g)"/><rect x="250" y="85" width="150" height="150" rx="32" fill="rgba(229,236,241,0.07)"/><g transform="translate(277,112) scale(4)" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" stroke="#7cc5f1"/><path d="M3.5 9.5h17" stroke="#7cc5f1"/><path d="M10.5 9.5v10" stroke="#68cb9f"/></g><text x="440" y="150" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="64" font-weight="700" letter-spacing="-1" fill="#eef2f6">Blocks</text><text x="688" y="150" style="font-family:ui-monospace,Menlo,Consolas,monospace" font-size="26" fill="#7cc5f1">druxt-blocks</text><text x="440" y="196" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="25" fill="rgba(229,236,241,0.75)">Drupal blocks and block regions in Nuxt.</text><g transform="translate(440,236) scale(0.0994)"><path d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z" fill="#3498DB"/><path d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z" fill="#108775"/><path d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z" fill="#E5ECF1"/></g><text x="492" y="260" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="17" font-weight="600" fill="rgba(229,236,241,0.85)">druxtjs.org</text></svg>

package/dist/components/DruxtBlock.vue

@@ -5,13 +5,15 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
 import { mapActions } from 'vuex'
 
 /**
- * The DruxtBlock component is used to render a Drupal Block by UUID or Drupal's
- * internal ID.
+ * The DruxtBlock component renders a Drupal Block by UUID or by its block
+ * placement machine name.
  *
  * While the DruxtBlock component can't automatically render every Drupal block,
- * it does provide the Block settings to a targetted Druxt wrapper component for
+ * it does provide the Block settings to a targeted Druxt wrapper component for
  * manual theming.
  *
+ * @see https://druxtjs.org/modules/blocks
+ *
  * @example <caption>Render a block using **id**</caption> @lang vue
  * <DruxtBlock id="umami_branding" />
  *
@@ -29,7 +31,9 @@ import { mapActions } from 'vuex'
  *   mixins: [DruxtBlocksBlockMixin]
  * }
  *
- * @example <caption>DruxtBlock with template injection</caption> @lang vue
+ * @see {@link https://druxtjs.org/explanation/component-resolution|Component resolution}
+ *
+ * @example <caption>DruxtBlock default slot (template injection)</caption> @lang vue
  * <DruxtBlock id="umami_branding">
  *   <template #default="{ block }">
  *     <!-- Do whatever you want here -->
@@ -43,13 +47,15 @@ export default {
   extends: DruxtModule,
 
   /**
-   * The DruxtBlock component requires either the UUID or internal ID property.
+   * The DruxtBlock component requires either the `uuid` or `id` property.
    */
   props: {
     /**
-     * The Blocks internal ID.
+     * The block placement machine name, as configured on Drupal's Block layout
+     * page (/admin/structure/block).
      *
-     * @type string
+     * @type {string}
+     * @default null
      *
      * @example @lang vue
      * <DruxtBlock id="umami_branding" />
@@ -65,6 +71,7 @@ export default {
      * If used, the **id** prop will be ignored.
      *
      * @type {string}
+     * @default null
      *
      * @example @lang vue
      * <DruxtBlock uuid="59104acd-88e1-43c3-bd5f-35800f206394" />
@@ -76,6 +83,8 @@ export default {
   },
 
   /**
+   * Provides the fetched Block resource state.
+   *
    * @property {object} resource - The JSON:API resource object.
    */
   data: () => ({
@@ -92,7 +101,9 @@ export default {
     /**
      * The Block entity data.
      *
-     * @return {object}
+     * @param {object} vm - The component ViewModel.
+     * @param {object} vm.resource - The Block JSON:API resource.
+     * @return {object} The Block entity JSON:API resource data.
      */
     block: ({ resource }) => (resource || {}).data,
   },
@@ -125,6 +136,7 @@ export default {
      * Provides the available component naming options for the DruxtWrapper.
      *
      * @param {object} context - The module component ViewModel.
+     * @param {object} context.block - The Block entity data.
      * @returns {ComponentOptions}
      */
     componentOptions: ({ block }) => {
@@ -179,7 +191,7 @@ export default {
         })
       }
 
-      // Fetch Block by Drupal internal ID.
+      // Fetch Block by placement machine name (drupal_internal__id).
       else if (this.id) {
         query.addFilter('drupal_internal__id', this.id)
         const collection = await this.getCollection({
@@ -195,6 +207,7 @@ export default {
      * Provides propsData for the DruxtWrapper.
      *
      * @param {object} context - The module component ViewModel.
+     * @param {object} context.block - The Block entity data.
      * @returns {PropsData}
      */
     propsData: ({ block }) => ({ block }),
@@ -205,6 +218,7 @@ export default {
      * A default slot is provided with debug information if Nuxt is in
      * development mode.
      *
+     * @param {Function} h - The Vue createElement function.
      * @return {ScopedSlots} The Scoped slots object.
      */
     slots(h) {
@@ -253,10 +267,12 @@ export default {
 }
 
 /**
- * Provides the available naming options for the Wrapper component.
+ * Provides the available naming options for the wrapper component.
  *
  * @typedef {array[]} ComponentOptions
  *
+ * @see {@link https://druxtjs.org/explanation/component-resolution|Component resolution}
+ *
  * @example @lang js
  * [
  *   'DruxtBlock[Plugin][PluginId][Region][Theme][Langcode]',
@@ -311,7 +327,7 @@ export default {
  */
 
 /**
- * Provides propsData for use in the Wrapper component.
+ * Provides propsData for use in the wrapper component.
  *
  * @typedef {object} PropsData
  * @param {object} block - The Block Entity data.
@@ -329,7 +345,7 @@ export default {
  */
 
 /**
- * Provides scoped slots for use in the Wrapper component.
+ * Provides scoped slots for use in the wrapper component.
  *
  * @typedef {object} ScopedSlots
  * @param {function} default - Debug information if Nuxt is in development mode.

package/dist/components/DruxtBlockRegion.vue

@@ -11,6 +11,8 @@ import { mapActions, mapState } from 'vuex'
  * All blocks, including those not visible, are provided as slots for the Druxt
  * Wrapper component.
  *
+ * @see https://druxtjs.org/modules/blocks
+ *
  * @example @lang vue
  * <DruxtBlockRegion name="header" theme="umami" />
  *
@@ -25,13 +27,15 @@ import { mapActions, mapState } from 'vuex'
  *   mixins: [DruxtBlocksRegionMixin]
  * }
  *
- * @example <caption>DruxtBlockRegion with template injection</caption> @lang vue
- * <DruxtBlock id="umami_branding">
- *   <template #default="{ block }">
+ * @see {@link https://druxtjs.org/explanation/component-resolution|Component resolution}
+ *
+ * @example <caption>DruxtBlockRegion default slot (template injection)</caption> @lang vue
+ * <DruxtBlockRegion name="header" theme="umami">
+ *   <template #default="{ blocks }">
  *     <!-- Do whatever you want here -->
- *     <DruxtDebug :json="block" />
+ *     <DruxtDebug :json="blocks" />
  *   </template>
- * </DruxtBlock>
+ * </DruxtBlockRegion>
  */
 export default {
   name: 'DruxtBlockRegion',
@@ -41,7 +45,8 @@ export default {
   /** */
   props: {
     /**
-     * The Block regions machine name.
+     * A region machine name from the Drupal theme's block layout
+     * (/admin/structure/block).
      *
      * @type {string}
      * @default content
@@ -55,7 +60,7 @@ export default {
     },
 
     /**
-     * A Drupal theme machine name.
+     * The machine name of the Drupal theme that provides the block layout.
      *
      * @type {string}
      * @required
@@ -70,7 +75,9 @@ export default {
   },
 
   /**
-   * @property {objects[]} blocks - The Block JSON:API resources.
+   * Provides the fetched Block resources for the region.
+   *
+   * @property {object[]} blocks - The Block JSON:API resources.
    */
   data: () => ({
     blocks: []
@@ -82,7 +89,7 @@ export default {
   },
 
   /**
-   * @vue-computed {object} route The current Route from the [DruxtRouter vuex store](https://router.druxtjs.org/api/stores/router.html).
+   * @vue-computed {object} route The current Route from the [DruxtRouter vuex store](https://druxtjs.org/api/packages/router/stores/router).
    */
   computed: {
     ...mapState('druxtRouter', {
@@ -102,13 +109,13 @@ export default {
 
   methods: {
     /**
-     * Checks if a given block shoud be visible.
+     * Checks if a given block should be visible.
      *
      * Uses Request Path visibility details if available with the DruxtRouter.
      *
      * @param {object} block - The Block entity object.
      *
-     * @return {boolean}
+     * @return {boolean} `true` if the block should be rendered on the current route.
      */
     isVisible(block) {
       // Request path visibility conditions.
@@ -151,6 +158,8 @@ export default {
      * Provides the available component naming options for the DruxtWrapper.
      *
      * @param {object} context - The module component ViewModel.
+     * @param {string} context.name - The region machine name.
+     * @param {string} context.theme - The Drupal theme machine name.
      * @returns {ComponentOptions}
      */
     componentOptions: ({ name, theme }) => [[name, theme], ['default']],
@@ -180,6 +189,9 @@ export default {
      * Provides propsData for the DruxtWrapper.
      *
      * @param {object} context - The module component ViewModel.
+     * @param {object[]} context.blocks - The Block JSON:API resources for the region.
+     * @param {string} context.name - The region machine name.
+     * @param {string} context.theme - The Drupal theme machine name.
      * @returns {PropsData}
      */
     propsData: ({ blocks, name, theme }) => ({ blocks, name, theme }),
@@ -204,6 +216,7 @@ export default {
      *     <slot name="umami_branding" />
      *   </div>
      * </template>
+     * @param {Function} h - The Vue createElement function.
      */
     slots(h) {
       // Build scoped slots for each block.
@@ -246,10 +259,12 @@ export default {
 }
 
 /**
- * Provides the available naming options for the Wrapper component.
+ * Provides the available naming options for the wrapper component.
  *
  * @typedef {array[]} ComponentOptions
  *
+ * @see {@link https://druxtjs.org/explanation/component-resolution|Component resolution}
+ *
  * @example @lang js
  * [
  *   'DruxtBlockRegion[Name][Theme][Langcode]',
@@ -272,12 +287,12 @@ export default {
  */
 
 /**
- * Provides propsData for use in the Wrapper component.
+ * Provides propsData for use in the wrapper component.
  *
  * @typedef {object} PropsData
  * @param {object[]} blocks - The Block JSON:API resources.
- * @param {string} name - The Block regions machine name.
- * @param {string} theme - A Drupal theme machine name.
+ * @param {string} name - The region machine name.
+ * @param {string} theme - The Drupal theme machine name.
  *
  * @example @lang js
  * {
@@ -294,7 +309,7 @@ export default {
  */
 
 /**
- * Provides scoped slots for use in the Wrapper component.
+ * Provides scoped slots for use in the wrapper component.
  *
  * @typedef {object} ScopedSlots
  * @param {function} [drupal_internal__id] - Slot per block.

package/dist/components/blocks/DruxtBlockBlockContent.vue

@@ -32,7 +32,7 @@ export default {
   /**
    * Vue.js Mixins.
    *
-   * @see {@link ../../mixins/DruxtBlocksBlockMixin|DruxtBlocksBlockMixin}
+   * @see {@link /api/packages/blocks/mixins/block|DruxtBlocksBlockMixin}
    */
   mixins: [DruxtBlocksBlockMixin],
 
@@ -54,7 +54,7 @@ export default {
      *
      * @type {object}
      *
-     * @see {@link https://druxt.github.io/druxt-entity/api/components/DruxtEntity|DruxtEntity}
+     * @see {@link /api/packages/entity/components/DruxtEntity|DruxtEntity}
      */
     propsData: ({ $fetchState, $store, block, langcode }) => {
       if ($fetchState.pending) return false

package/dist/components/blocks/DruxtBlockPageTitleBlock.vue

@@ -21,7 +21,7 @@ import { DruxtBlocksBlockMixin } from 'druxt-blocks'
  * />
  *
  * @see {@link ../DruxtBlock|DruxtBlock}
- * @see {@link https://druxt.github.io/druxt-router|DruxtJS Router}
+ * @see {@link https://druxtjs.org/modules/router|DruxtJS Router}
  */
 export default {
   name: 'DruxtBlockPageTitleBlock',
@@ -29,7 +29,7 @@ export default {
   /**
    * Vue.js Mixins.
    *
-   * @see {@link ../../mixins/DruxtBlocksBlockMixin|DruxtBlocksBlockMixin}
+   * @see {@link /api/packages/blocks/mixins/block|DruxtBlocksBlockMixin}
    */
   mixins: [DruxtBlocksBlockMixin],
 

package/dist/components/blocks/DruxtBlockSystemMainBlock.vue

@@ -29,7 +29,7 @@ export default {
   /**
    * Vue.js Mixins.
    *
-   * @see {@link ../../mixins/DruxtBlocksBlockMixin|DruxtBlocksBlockMixin}
+   * @see {@link /api/packages/blocks/mixins/block|DruxtBlocksBlockMixin}
    */
   mixins: [DruxtBlocksBlockMixin],
 }

package/dist/druxt-blocks.esm.js

@@ -52,6 +52,7 @@ async function DruxtBlocksStorybook({ stories }) {
   stories.push(resolve(options.buildDir, `./stories/druxt-block-region.*.stories.js`));
 }
 
+const extendComponent = (component) => ({ ...component, isAsync: false });
 const DruxtBlocksNuxtModule = async function(moduleOptions = {}) {
   const options = {
     baseUrl: moduleOptions.baseUrl,
@@ -64,8 +65,8 @@ const DruxtBlocksNuxtModule = async function(moduleOptions = {}) {
   };
   await this.addModule(["druxt", options]);
   this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: join(__dirname, "components") });
-    dirs.push({ path: join(__dirname, "components/blocks") });
+    dirs.push({ path: join(__dirname, "components"), extendComponent });
+    dirs.push({ path: join(__dirname, "components/blocks"), extendComponent });
   });
   this.nuxt.hook("storybook:config", async ({ stories }) => {
     await DruxtBlocksStorybook.call(this, { stories });

package/dist/druxt-blocks.ssr.js

@@ -56,6 +56,7 @@ async function DruxtBlocksStorybook({ stories }) {
   stories.push(path.resolve(options.buildDir, `./stories/druxt-block-region.*.stories.js`));
 }
 
+const extendComponent = (component) => ({ ...component, isAsync: false });
 const DruxtBlocksNuxtModule = async function(moduleOptions = {}) {
   const options = {
     baseUrl: moduleOptions.baseUrl,
@@ -68,8 +69,8 @@ const DruxtBlocksNuxtModule = async function(moduleOptions = {}) {
   };
   await this.addModule(["druxt", options]);
   this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: path.join(__dirname, "components") });
-    dirs.push({ path: path.join(__dirname, "components/blocks") });
+    dirs.push({ path: path.join(__dirname, "components"), extendComponent });
+    dirs.push({ path: path.join(__dirname, "components/blocks"), extendComponent });
   });
   this.nuxt.hook("storybook:config", async ({ stories }) => {
     await DruxtBlocksStorybook.call(this, { stories });

package/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect stroke="#036397" x="3.5" y="4.5" width="17" height="15" rx="2" />
+  <path stroke="#036397" d="M3.5 9.5h17" />
+  <path stroke="#3b8070" d="M10.5 9.5v10" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-blocks",
-  "version": "0.17.3",
+  "version": "0.17.4-dev.20260920063819",
   "description": "Drupal Block and Block Region Druxt components.",
   "keywords": [
     "block",
@@ -28,6 +28,7 @@
     "url": "git+https://github.com/druxt/druxt.js"
   },
   "license": "MIT",
+  "author": "Stuart Clark <stuart@druxtjs.org>",
   "exports": {
     ".": {
       "require": "./dist/druxt-blocks.ssr.js",
@@ -39,17 +40,17 @@
   "module": "dist/druxt-blocks.esm.js",
   "files": [
     "dist",
-    "templates"
+    "templates",
+    "icon.svg",
+    "banner.svg"
   ],
   "dependencies": {
-    "axios": "0.27.2",
-    "drupal-jsonapi-params": "^2.2.0",
-    "druxt": "^0.23.0",
-    "druxt-entity": "^0.28.1",
-    "druxt-router": "^0.30.0"
+    "axios": "0.33.0",
+    "drupal-jsonapi-params": "^2.3.2",
+    "druxt": "0.24.1-dev.20260920063819"
   },
   "optionalDependencies": {
-    "vue": "^2.7.14",
+    "vue": "^2.7.16",
     "vuex": "^3.6.2"
   },
   "publishConfig": {