srcdev-nuxt-components 9.1.17 → 9.1.19

package/.claude/settings.json

@@ -20,7 +20,13 @@
       "Bash(npx nuxi:*)",
       "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")",
       "Bash(npx vue-tsc:*)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -5)"
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -5)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 16ac4ef --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -8)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 -- \"*.vue\" \"*.css\")",
+      "Bash(npm install:*)",
+      "Bash(npm run:*)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",

package/.claude/skills/component-export-types.md

@@ -48,10 +48,19 @@ import type { NavItem, NavItemData } from "~/types/components/navigation-horizon
 
 ## Consuming app usage
 
-Once published, consumers import from the package barrel:
+The chain that makes this work:
+
+```text
+app/types/components/<component>.d.ts
+  → app/types/components/index.ts   (export * from "./<component>.d")
+  → types.d.ts                      (export * from "./app/types/components")
+  → consumer import
+```
+
+`types.d.ts` is the `"types"` entry point in `package.json`, so once a type is added to the barrel it is importable directly from the package name:
 
 ```ts
-import type { NavItem, NavItemData } from "nuxt-components/app/types/components";
+import type { NavItem, NavItemData } from "srcdev-nuxt-components";
 ```
 
 ## Notes

package/.claude/skills/components/site-navigation.md

@@ -20,9 +20,19 @@ Both the horizontal list and the panel include animated active/hover indicator d
 
 ## NavItemData type
 
+**Within the layer:**
+
 ```ts
 import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+```
 
+**In a consuming app:**
+
+```ts
+import type { NavItemData } from "srcdev-nuxt-components";
+```
+
+```ts
 const navItemData: NavItemData = {
   main: [
     { text: "Home",     href: "/" },

package/.claude/skills/components/social-icons-list.md

@@ -0,0 +1,120 @@
+# SocialIconsList Component
+
+## Overview
+
+`SocialIconsList` renders a horizontal list of social network icon links. Each item is data-driven via the `items` prop — the component composes the full href from `baseHref + profileId` at render time. Icons are sourced from the `logos:*` Iconify collection (`@iconify-json/logos`), which uses brand colours baked into the SVG.
+
+---
+
+## Props reference
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `ISocialIcon[]` | — | **Required.** Array of social network items. |
+| `label` | `string` | `"Social media profiles"` | `aria-label` applied to the `<ul>` element. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `<ul>`. |
+
+---
+
+## ISocialIcon type
+
+```ts
+interface ISocialIcon {
+  networkName: string; // Used as aria-label: "{networkName} profile"
+  iconName: string;    // Iconify icon name, e.g. "logos:instagram-icon"
+  baseHref: string;    // Base URL including trailing slash, e.g. "https://www.instagram.com/"
+  profileId: string;   // Profile identifier appended to baseHref
+}
+```
+
+The rendered `href` is `${baseHref}${profileId}`.
+
+### Importing the type
+
+**Within the layer** (e.g. in another layer component or composable):
+
+```ts
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+```
+
+**In a consuming app** — exported via the package barrel (`types.d.ts` → `app/types/components/index.ts`):
+
+```ts
+import type { ISocialIcon } from "srcdev-nuxt-components";
+```
+
+---
+
+## Standard social network values
+
+| Network | `iconName` | `baseHref` |
+|---------|-----------|-----------|
+| Facebook | `logos:facebook` | `https://www.facebook.com/` |
+| X (Twitter) | `logos:x` | `https://x.com/` |
+| Instagram | `logos:instagram-icon` | `https://www.instagram.com/` |
+| YouTube | `logos:youtube-icon` | `https://www.youtube.com/@` |
+| TikTok | `logos:tiktok-icon` | `https://www.tiktok.com/@` |
+
+---
+
+## Usage example
+
+```vue
+<SocialIconsList
+  :items="[
+    {
+      networkName: 'Instagram',
+      iconName: 'logos:instagram-icon',
+      baseHref: 'https://www.instagram.com/',
+      profileId: 'yourbrand',
+    },
+    {
+      networkName: 'TikTok',
+      iconName: 'logos:tiktok-icon',
+      baseHref: 'https://www.tiktok.com/@',
+      profileId: 'yourbrand',
+    },
+  ]"
+/>
+```
+
+---
+
+## CSS custom properties
+
+| Property | Default | Notes |
+|----------|---------|-------|
+| `--theme-social-icon-size` | `2.4rem` | Width and height of each icon |
+| `--theme-social-icon-gap` | `1.2rem` | Gap between icons in the flex row |
+
+> **Note:** Iconify's `logos:*` styles are injected outside any CSS `@layer`, which means they override layered component styles. Icon sizing is applied via an inline `style` attribute on the `<Icon>` element so it takes precedence.
+
+---
+
+## Local style override scaffold
+
+```vue
+<SocialIconsList :style-class-passthrough="['my-social-icons']" :items="items" />
+
+<style>
+/* ─── SocialIconsList local overrides ──────────────────────────────
+   Geometry and size only — brand colours are baked into logos: SVGs.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.social-icons-list {
+  &.my-social-icons {
+    /* --theme-social-icon-size: 3.2rem; */
+    /* --theme-social-icon-gap: 2rem; */
+  }
+}
+</style>
+```
+
+---
+
+## Notes
+
+- All links open in a new tab with `rel="noopener noreferrer"`.
+- Each link carries `aria-label="{networkName} profile"` for screen reader accessibility.
+- The `logos:*` Iconify collection requires `@iconify-json/logos` to be installed in the consumer app. Without it, icons will fall back to a CDN fetch (causing FOUC). See [icon-sets.md](../icon-sets.md).
+- Auto-imported in Nuxt — no manual import needed.

package/.claude/skills/index.md

@@ -36,6 +36,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── component-inline-action-button.md — InputButtonCore variant="inline" pattern for buttons embedded in custom input wrappers
 ├── icon-sets.md                      — icon set packages required by layer components, FOUC prevention, component→package map
 ├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
+├── release-notes.md                  — produce release notes as a fenced markdown block from git log
 ├── composable-whatsapp.md            — useWhatsApp: open pre-filled wa.me link from form payload; runtime config, security, usage
 ├── composable-zod-validation.md      — useZodValidation: schema-driven form validation, error binding, submit flow, API error push
 ├── composable-colour-scheme.md       — useColourScheme: reactive light/dark/auto switching, localStorage persistence, runtime config
@@ -58,7 +59,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── glass-panel.md          — GlassPanel props, slots, CSS token API (--glass-panel-bg/border-color/shadow/highlight), theming override
     ├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
     ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
-    └── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
+    ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
+    └── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
 ```
 
 ## Skill file template

package/.claude/skills/release-notes.md

@@ -0,0 +1,48 @@
+# Release Notes
+
+## Overview
+
+When asked to create release notes, always produce a fenced markdown code block (` ```markdown `) so the content can be copied and pasted directly into a git tag, GitHub release, or changelog.
+
+## Steps
+
+### 1. Determine the version
+
+Run `git log --oneline -8` to find the most recent release commit and the commits since the previous release.
+
+### 2. Review the diff
+
+Run `git show <commit> --stat` for each commit since the last release to understand what changed.
+
+### 3. Produce a fenced markdown block
+
+Always wrap the output in a ` ```markdown ` code fence — never render it as plain markdown. This ensures the user can copy the raw text without formatting being stripped.
+
+## Format
+
+```markdown
+## vX.Y.Z
+
+### New
+
+- **`ComponentOrComposableName`** — one-line description of what it does and why it exists
+
+### Fixed
+
+- Short description of what was wrong and what was corrected
+
+### Changed
+
+- Short description of intentional behaviour or API changes
+
+### Documentation
+
+- **`skill-name` skill** — new/updated: what it covers
+```
+
+## Notes
+
+- Only include sections that have content — omit empty headings
+- Keep each bullet to one line where possible
+- Lead with the most user-facing changes (New, Fixed) before internal ones (Documentation, Tests)
+- Test additions warrant their own section only when substantial; otherwise fold into the relevant New/Fixed bullet

package/app/assets/styles/setup/04.elements/forms/01.field-layout-container-level.css

@@ -1,4 +1,6 @@
 :where(html) {
+  --field-margin-block: 0 1.6rem; /* space between field and other elements */
+
   /* Field spacing */
   --field-gap-block: 0.8rem; /* space between stacked fields */
   --field-gap-inline: 0;

package/app/components/02.molecules/social-icons-list/SocialIconsList.vue

@@ -0,0 +1,90 @@
+<template>
+  <ul class="social-icons-list" :class="[elementClasses]" :aria-label="label">
+    <li v-for="item in items" :key="item.networkName" class="social-icon-item">
+      <a
+        :href="`${item.baseHref}${item.profileId}`"
+        class="social-icon-link"
+        :aria-label="`${item.networkName} profile`"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <Icon
+          :name="item.iconName"
+          class="social-icon"
+          :style="{ width: 'var(--_icon-size)', height: 'var(--_icon-size)' }"
+        />
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+
+interface Props {
+  items: ISocialIcon[];
+  label?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "Social media profiles",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .social-icons-list {
+    --_icon-size: var(--theme-social-icon-size, 2.4rem);
+    --_gap: var(--theme-social-icon-gap, 1.2rem);
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    .social-icon-item {
+      display: flex;
+
+      .social-icon-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        transition:
+          transform 200ms ease,
+          opacity 200ms ease;
+
+        &:hover,
+        &:focus-visible {
+          transform: scale(1.15);
+          opacity: 0.85;
+        }
+
+        &:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 3px;
+          border-radius: 2px;
+        }
+
+        .social-icon {
+          /* width: var(--_icon-size); */
+          /* height: var(--_icon-size); */
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/social-icons-list/stories/SocialIconsList.stories.ts

@@ -0,0 +1,111 @@
+import SocialIconsList from "../SocialIconsList.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+
+const sampleItems: ISocialIcon[] = [
+  {
+    networkName: "Facebook",
+    iconName: "logos:facebook",
+    baseHref: "https://www.facebook.com/",
+    profileId: "yourprofile",
+  },
+  {
+    networkName: "X (Twitter)",
+    iconName: "logos:x",
+    baseHref: "https://x.com/",
+    profileId: "yourhandle",
+  },
+  {
+    networkName: "Instagram",
+    iconName: "logos:instagram-icon",
+    baseHref: "https://www.instagram.com/",
+    profileId: "yourprofile",
+  },
+  {
+    networkName: "YouTube",
+    iconName: "logos:youtube-icon",
+    baseHref: "https://www.youtube.com/@",
+    profileId: "yourchannel",
+  },
+  {
+    networkName: "TikTok",
+    iconName: "logos:tiktok-icon",
+    baseHref: "https://www.tiktok.com/@",
+    profileId: "yourprofile",
+  },
+];
+
+const meta: Meta<typeof SocialIconsList> = {
+  title: "Molecules/SocialIconsList",
+  component: SocialIconsList,
+  argTypes: {
+    items: {
+      control: "object",
+      description:
+        "Array of social network items. Each item requires networkName, iconName (Iconify logos: collection), baseHref, and profileId.",
+    },
+    label: {
+      control: "text",
+      description: "aria-label for the list element",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    items: sampleItems,
+    label: "Social media profiles",
+    styleClassPassthrough: ["m-40"],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SocialIconsList>;
+
+// ─── Stories ─────────────────────────────────────────────────────────────────
+
+/** Default — all five networks at the standard icon size. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { SocialIconsList },
+    setup() {
+      return { args };
+    },
+    template: `<SocialIconsList v-bind="args" />`,
+  }),
+};
+
+/** Large icons — override icon size via CSS token. */
+export const LargeIcons: Story = {
+  name: "Large Icons",
+  render: (args) => ({
+    components: { SocialIconsList },
+    setup() {
+      return { args };
+    },
+    template: `<SocialIconsList v-bind="args" style="--theme-social-icon-size: 4rem;" />`,
+  }),
+};
+
+/** Single network — only one item in the list. */
+export const SingleNetwork: Story = {
+  name: "Single Network",
+  args: {
+    items: [
+      {
+        networkName: "Instagram",
+        iconName: "logos:instagram-icon",
+        baseHref: "https://www.instagram.com/",
+        profileId: "luxurylocs",
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { SocialIconsList },
+    setup() {
+      return { args };
+    },
+    template: `<SocialIconsList v-bind="args" />`,
+  }),
+};

package/app/components/02.molecules/social-icons-list/tests/SocialIconsList.spec.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import SocialIconsList from "../SocialIconsList.vue";
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+
+const defaultItems: ISocialIcon[] = [
+  {
+    networkName: "Facebook",
+    iconName: "logos:facebook",
+    baseHref: "https://www.facebook.com/",
+    profileId: "testprofile",
+  },
+  {
+    networkName: "Instagram",
+    iconName: "logos:instagram-icon",
+    baseHref: "https://www.instagram.com/",
+    profileId: "testhandle",
+  },
+  {
+    networkName: "YouTube",
+    iconName: "logos:youtube-icon",
+    baseHref: "https://www.youtube.com/@",
+    profileId: "testchannel",
+  },
+];
+
+describe("SocialIconsList", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders as a ul element", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("ul");
+  });
+
+  it("renders the correct number of list items", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.findAll(".social-icon-item").length).toBe(defaultItems.length);
+  });
+
+  it("renders the correct href for each item", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    defaultItems.forEach((item, i) => {
+      expect(links[i]!.attributes("href")).toBe(`${item.baseHref}${item.profileId}`);
+    });
+  });
+
+  it("renders aria-label on each link using networkName", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    defaultItems.forEach((item, i) => {
+      expect(links[i]!.attributes("aria-label")).toBe(`${item.networkName} profile`);
+    });
+  });
+
+  it("adds rel='noopener noreferrer' to each link", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    links.forEach((link) => {
+      expect(link.attributes("rel")).toBe("noopener noreferrer");
+    });
+  });
+
+  it("opens each link in a new tab", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    links.forEach((link) => {
+      expect(link.attributes("target")).toBe("_blank");
+    });
+  });
+
+  it("uses the default aria-label on the list", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Social media profiles");
+  });
+
+  it("uses a custom label prop as aria-label on the list", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems, label: "Follow us" },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Follow us");
+  });
+
+  it("renders an empty list when items is empty", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: [] },
+    });
+    expect(wrapper.findAll(".social-icon-item").length).toBe(0);
+  });
+
+  it("applies styleClassPassthrough classes to the root element", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems, styleClassPassthrough: ["custom-class", "another-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+    expect(wrapper.classes()).toContain("another-class");
+  });
+
+  it("renders the correct HTML structure", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/app/components/02.molecules/social-icons-list/tests/__snapshots__/SocialIconsList.spec.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SocialIconsList > renders the correct HTML structure 1`] = `
+"<ul class="social-icons-list" aria-label="Social media profiles">
+  <li class="social-icon-item"><a href="https://www.facebook.com/testprofile" class="social-icon-link" aria-label="Facebook profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:facebook social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
+  <li class="social-icon-item"><a href="https://www.instagram.com/testhandle" class="social-icon-link" aria-label="Instagram profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:instagram-icon social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
+  <li class="social-icon-item"><a href="https://www.youtube.com/@testchannel" class="social-icon-link" aria-label="YouTube profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:youtube-icon social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
+</ul>"
+`;

package/app/components/forms/ui/FormField.vue

@@ -34,48 +34,48 @@ defineProps({
 
 <style lang="css">
 @layer components {
-.form-field {
-  --_gutter-width: 0rem;
-  --_max-width: 400px;
-  --_background-color: transparent;
-  --_border-radius: 0.4rem;
+  .form-field {
+    --_gutter-width: 0rem;
+    --_max-width: 400px;
+    --_background-color: transparent;
+    --_border-radius: 0.4rem;
 
-  background-color: var(--_background-color);
-  border-radius: var(--_border-radius);
-  margin-inline: auto;
-  margin-block: 0 1rem;
+    background-color: var(--_background-color);
+    border-radius: var(--_border-radius);
+    margin-inline: auto;
+    margin-block: var(--field-margin-block);
 
-  width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
-  outline: 0rem solid var(--slate-05);
-  /* overflow-block: hidden; */
+    width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
+    outline: 0rem solid var(--slate-05);
+    /* overflow-block: hidden; */
 
-  &:has(.underline) {
-    --_background-color: var(--theme-form-input-bg-underlined);
-  }
+    &:has(.underline) {
+      --_background-color: var(--theme-form-input-bg-underlined);
+    }
 
-  .form-field-inner {
-    background-color: var(--_background-color);
-    border-radius: var(--_border-radius);
-    margin-inline-start: 0rem;
-    padding-inline-start: 0rem;
-    outline: 0 solid var(--slate-05);
-  }
+    .form-field-inner {
+      background-color: var(--_background-color);
+      border-radius: var(--_border-radius);
+      margin-inline-start: 0rem;
+      padding-inline-start: 0rem;
+      outline: 0 solid var(--slate-05);
+    }
 
-  &.has-gutter {
-    --_gutter-width: 1.6rem;
-  }
+    &.has-gutter {
+      --_gutter-width: 1.6rem;
+    }
 
-  &.narrow {
-    max-width: 400px;
-  }
+    &.narrow {
+      max-width: 400px;
+    }
 
-  &.medium {
-    --_max-width: 800px;
-  }
+    &.medium {
+      --_max-width: 800px;
+    }
 
-  &.wide {
-    --_max-width: 1200px;
+    &.wide {
+      --_max-width: 1200px;
+    }
   }
 }
-}
 </style>

package/app/composables/useWhatsApp.ts

@@ -1,5 +1,3 @@
-// composables/useWhatsApp.ts
-
 export const useWhatsApp = () => {
   const config = useRuntimeConfig();
 

package/app/types/components/index.ts

@@ -10,3 +10,4 @@ export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
 export * from "./hero-text"
 export * from "./navigation-horizontal.d"
+export * from "./social-icons-list.d"

package/app/types/components/social-icons-list.d.ts

@@ -0,0 +1,6 @@
+export interface ISocialIcon {
+  networkName: string;
+  iconName: string;
+  baseHref: string;
+  profileId: string;
+}

package/modules/icon-sets.ts

@@ -12,6 +12,7 @@ const ICON_SETS = [
   "@iconify-json/bitcoin-icons",
   "@iconify-json/gravity-ui",
   "@iconify-json/ic",
+  "@iconify-json/logos",
   "@iconify-json/lucide",
   "@iconify-json/material-symbols",
   "@iconify-json/mdi",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.17",
+  "version": "9.1.19",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -45,6 +45,7 @@
     "@iconify-json/bitcoin-icons": "*",
     "@iconify-json/gravity-ui": "*",
     "@iconify-json/ic": "*",
+    "@iconify-json/logos": "*",
     "@iconify-json/lucide": "*",
     "@iconify-json/material-symbols": "*",
     "@iconify-json/mdi": "*",
@@ -66,6 +67,9 @@
     "@iconify-json/ic": {
       "optional": true
     },
+    "@iconify-json/logos": {
+      "optional": true
+    },
     "@iconify-json/lucide": {
       "optional": true
     },
@@ -86,6 +90,7 @@
     "@iconify-json/bitcoin-icons": "1.2.4",
     "@iconify-json/gravity-ui": "1.2.12",
     "@iconify-json/ic": "*",
+    "@iconify-json/logos": "1.2.11",
     "@iconify-json/lucide": "*",
     "@iconify-json/material-symbols": "1.2.64",
     "@iconify-json/mdi": "1.2.3",