srcdev-nuxt-components 6.1.4 → 6.1.6

package/README.md

@@ -12,8 +12,8 @@ npm install --save srcdev-nuxt-components
 
 ```ts
 defineNuxtConfig({
-  extends: 'srcdev-nuxt-components',
-});
+  extends: "srcdev-nuxt-components",
+})
 ```
 
 ## Styles Architecture
@@ -49,7 +49,7 @@ The setup layer provides the foundational styles and utilities:
 - **Responsive Font Sizes** - Fluid typography using clamp() functions:
   - `--step-8` to `--step-1` providing 8 responsive font size steps
 - **Utility Classes** - Pre-built typography classes:
-  - `.heading-1` through `.heading-5` - Semantic heading styles
+  - `.page-heading-1` through `.page-heading-5` - Semantic heading styles
   - Generic font weight and variation settings
 - **Font Variation Settings** - Advanced typography controls
 

package/app/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -11,7 +11,7 @@
           </button>
 
           <div class="navigation-group-panel" popover role="menu" :id="`popovertarget-nav-1-${key}`">
-            <h4 class="heading-4 mb-6">{{ link.childLinksTitle }}</h4>
+            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
             <ul class="navigation-group-list">
               <li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
                 <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
@@ -25,14 +25,14 @@
 </template>
 
 <script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
+const TAGS_ALLOWED = <string[]>["div", "section", "nav", "ul", "ol"]
 
 interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  isExternal?: boolean;
-  childLinks?: ResponsiveHeaderNavItem[];
-  childLinksTitle?: string;
+  name: string
+  path?: string
+  isExternal?: boolean
+  childLinks?: ResponsiveHeaderNavItem[]
+  childLinksTitle?: string
 }
 </script>
 
@@ -40,9 +40,9 @@ interface ResponsiveHeaderNavItem {
 const props = defineProps({
   tag: {
     type: String,
-    default: 'nav',
+    default: "nav",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return TAGS_ALLOWED.includes(value)
     },
   },
   navLinks: {
@@ -53,17 +53,17 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 // const detailsRef = useTemplateRef('detailsRef');
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">
@@ -85,7 +85,7 @@ watch(
 
     container-type: inline-size;
     display: grid;
-    grid-template-areas: 'element-stack';
+    grid-template-areas: "element-stack";
 
     .inner {
       grid-area: element-stack;

package/app/components/deep-expanding-menu/DeepExpandingMenuOld.vue

@@ -9,7 +9,7 @@
             <Icon name="bi:caret-down-fill" class="icon" />
           </summary>
           <div class="navigation-group-panel" :id="`popovertarget-nav-1-${key}`">
-            <h4 class="heading-4 mb-6">{{ link.childLinksTitle }}</h4>
+            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
             <ul class="navigation-group-list">
               <li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
                 <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
@@ -23,14 +23,14 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside } from "@vueuse/core"
 
 const props = defineProps({
   tag: {
     type: String,
-    default: 'nav',
+    default: "nav",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return TAGS_ALLOWED.includes(value)
     },
   },
   navLinks: {
@@ -41,37 +41,37 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const navigationGroupRef = useTemplateRef<HTMLElement[]>('navigationGroupRef');
+const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef")
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 
 onMounted(() => {
   navigationGroupRef.value?.forEach((element, index) => {
     onClickOutside(element, () => {
-      navigationGroupRef.value?.[index]?.removeAttribute('open');
-    });
-  });
-});
+      navigationGroupRef.value?.[index]?.removeAttribute("open")
+    })
+  })
+})
 </script>
 
 <script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
+const TAGS_ALLOWED = <string[]>["div", "section", "nav", "ul", "ol"]
 
 interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  isExternal?: boolean;
-  childLinksTitle?: string;
-  childLinks?: ResponsiveHeaderNavItem[];
+  name: string
+  path?: string
+  isExternal?: boolean
+  childLinksTitle?: string
+  childLinks?: ResponsiveHeaderNavItem[]
 }
 </script>
 
@@ -80,7 +80,7 @@ interface ResponsiveHeaderNavItem {
   .deep-expanding-menu-old {
     container-type: inline-size;
     display: grid;
-    grid-template-areas: 'element-stack';
+    grid-template-areas: "element-stack";
     align-items: center;
     gap: 12px;
 
@@ -117,7 +117,7 @@ interface ResponsiveHeaderNavItem {
         --_icon-transform: scaleY(1);
 
         display: grid;
-        grid-template-areas: 'details-stack';
+        grid-template-areas: "details-stack";
         z-index: 1;
         position: relative;
 

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -1,15 +1,6 @@
 <template>
-  <div
-    class="display-prompt-core"
-    :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]"
-    :data-test-id="`display-prompt-core-${theme}`"
-  >
-    <div
-      class="display-prompt-wrapper"
-      :data-component-theme="theme"
-      :class="[elementClasses]"
-      data-test-id="display-prompt"
-    >
+  <div class="display-prompt-core" :class="[{ dismissed: hide }]" :data-test-id="`display-prompt-core-${theme}`">
+    <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon">
           <slot name="customDecoratorIcon">
@@ -52,7 +43,7 @@ const props = defineProps({
     type: String,
     default: "error",
     validator(value: string) {
-      return ["error", "info", "success", "warning", "secondary"].includes(value)
+      return ["primary", "secondary", "tertiary", "ghost", "error", "info", "success", "warning"].includes(value)
     },
   },
   styleClassPassthrough: {
@@ -66,10 +57,6 @@ const props = defineProps({
       return ["dark-grey", "white"].includes(value)
     },
   },
-  useLocalStyleOverrides: {
-    type: Boolean,
-    default: false,
-  },
   displayPromptIcons: {
     type: Object as PropType<Record<string, string>>,
     default: () => ({
@@ -106,11 +93,11 @@ const dismissPrompt = () => {
   }
 
   .display-prompt-wrapper {
-    background-color: var(--component-theme-0);
-    border: 1px solid var(--component-theme-8);
+    background-color: var(--colour-theme-0);
+    border: 1px solid var(--colour-theme-8);
     border-radius: 4px;
 
-    border-inline-start: 8px solid var(--component-theme-8);
+    border-inline-start: 8px solid var(--colour-theme-8);
     border-start-start-radius: 8px;
     border-end-start-radius: 8px;
 
@@ -127,7 +114,7 @@ const dismissPrompt = () => {
       .display-prompt-icon {
         display: inline-flex;
         .icon {
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           display: inline-block;
           font-size: 3rem;
           font-style: normal;
@@ -148,7 +135,7 @@ const dismissPrompt = () => {
           font-size: var(--step-5);
           font-weight: bold;
           line-height: 1.3;
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           margin: 0;
           padding: 0;
         }
@@ -157,7 +144,7 @@ const dismissPrompt = () => {
           font-size: var(--step-5);
           font-weight: normal;
           line-height: 1.3;
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           margin: 0;
           padding: 0;
         }
@@ -169,26 +156,26 @@ const dismissPrompt = () => {
         justify-content: center;
         margin: 1rem;
         padding: 0.5rem;
-        border: 0.1rem solid var(--component-theme-8);
+        border: 0.1rem solid var(--colour-theme-8);
         border-radius: 50%;
-        outline: 1px solid var(--component-theme-3);
+        outline: 1px solid var(--colour-theme-3);
 
         transition: border 200ms ease-in-out, outline 200ms ease-in-out;
 
         &:hover {
           cursor: pointer;
-          border: 0.1rem solid var(--component-theme-12);
-          outline: 2px solid var(--component-theme-6);
+          border: 0.1rem solid var(--colour-theme-12);
+          outline: 2px solid var(--colour-theme-6);
         }
 
         &:focus-visible {
           box-shadow: var(--focus-box-shadow-colour-on);
-          border: 0.1rem solid var(--component-theme-12);
-          outline: 2px solid var(--component-theme-6);
+          border: 0.1rem solid var(--colour-theme-12);
+          outline: 2px solid var(--colour-theme-6);
         }
 
         .icon {
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           display: block;
           font-size: var(--step-5);
           padding: 1rem;

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -101,14 +101,14 @@
     <LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
       <ClientOnly>
         <div>
-          <h2 class="heading-4">navigationWrapperRects</h2>
+          <h2 class="page-heading-4">navigationWrapperRects</h2>
           <pre>{{ navigationWrapperRects }}</pre>
           <hr />
-          <h2 class="heading-4">secondaryNavRects</h2>
+          <h2 class="page-heading-4">secondaryNavRects</h2>
           <pre>{{ secondaryNavRects }}</pre>
         </div>
         <div>
-          <h2 class="heading-4">mainNavigationState</h2>
+          <h2 class="page-heading-4">mainNavigationState</h2>
           <pre>{{ mainNavigationState }}</pre>
         </div>
       </ClientOnly>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.4",
+  "version": "6.1.6",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",