srcdev-nuxt-components 9.1.55 → 9.1.56

package/app/pages/ui/settings.vue

@@ -10,38 +10,12 @@
         </PageRow>
 
         <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Default button elements</h1>
+          <div class="theme-test" data-theme="error">
+            <h2 class="page-heading-2 mbe-18">Theme test (error)</h2>
 
-          <div class="mb-12">
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Primary button elements</h1>
-
-          <div class="mb-12" data-theme="default">
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Error button elements</h1>
-
-          <div class="mb-12" data-theme="default" data-error>
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="error"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Success button elements</h1>
-
-          <div class="mb-12" data-theme="success">
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="success"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
+            <div class="mb-12">
+              <p class="page-body-normal mbe-12">This is test text</p>
+            </div>
           </div>
         </PageRow>
       </template>
@@ -65,16 +39,16 @@ useHead({
 
 <style lang="css">
 .settings-page {
-  .test-button {
-    /* all: unset; */
+  .theme-test {
+    margin: 2rem;
     padding: 0.6rem 1.2rem;
 
     border: var(--colour-theme-10) solid 1px;
     outline: var(--colour-theme-10) solid 1px;
     outline-offset: 3px;
     background-color: var(--colour-theme-1);
-    color: var(--colour-theme-10);
-    border-radius: 100vw;
+    color: var(--colour-theme-7);
+    border-radius: 0.4rem;
   }
 }
 </style>

package/app/types/app-config.d.ts

@@ -0,0 +1,41 @@
+import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "./components"
+
+declare module "@nuxt/schema" {
+  interface AppConfigInput {
+    srcdev?: {
+      alertContent?: {
+        icons?: Partial<Record<SemanticTheme, string>>
+        dismissIcon?: string
+      }
+      displayPrompt?: {
+        theme?: DisplayPromptTheme
+        dismissible?: boolean
+        useAutoFocus?: boolean
+        masked?: boolean
+      }
+      displayToast?: {
+        appearance?: {
+          theme?: DisplayToastTheme
+          position?: DisplayToastPosition
+          alignment?: DisplayToastAlignment
+          fullWidth?: boolean
+          masked?: boolean
+        }
+        behavior?: {
+          autoDismiss?: boolean
+          duration?: number
+          revealDuration?: number
+        }
+      }
+      displayDialog?: {
+        variant?: "dialog" | "modal" | "confirm" | "alert" | "fullscreen"
+        justifyDialog?: "start" | "center" | "end"
+        alignDialog?: "start" | "center" | "end"
+        lockViewport?: boolean
+        allowContentScroll?: boolean
+        theme?: SemanticTheme
+        closeIcon?: string
+      }
+    }
+  }
+}

package/app/types/components/display-prompt.d.ts

@@ -0,0 +1,11 @@
+import type { SemanticTheme } from "./semantic-theme.d"
+
+export type DisplayPromptTheme = SemanticTheme
+
+export interface DisplayPromptProps {
+  theme?: DisplayPromptTheme
+  dismissible?: boolean
+  useAutoFocus?: boolean
+  masked?: boolean
+  styleClassPassthrough?: string | string[]
+}

package/app/types/components/display-toast.d.ts

@@ -1,14 +1,7 @@
 import type { VNode, ComponentPublicInstance } from "vue"
+import type { SemanticTheme } from "./semantic-theme.d"
 
-export type DisplayToastTheme =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "ghost"
-  | "error"
-  | "info"
-  | "success"
-  | "warning"
+export type DisplayToastTheme = SemanticTheme
 
 export type DisplayToastPosition = "top" | "bottom"
 export type DisplayToastAlignment = "left" | "center" | "right"
@@ -18,6 +11,7 @@ export interface DisplayToastAppearanceConfig {
   position?: DisplayToastPosition
   alignment?: DisplayToastAlignment
   fullWidth?: boolean
+  masked?: boolean
 }
 
 export interface DisplayToastBehaviorConfig {
@@ -45,6 +39,14 @@ export interface DisplayToastProps {
   styleClassPassthrough?: string | string[]
 }
 
+export type ToastQueueStatus = "pending" | "visible"
+
+export interface ToastQueueEntry {
+  id: string
+  config: DisplayToastConfig
+  status: ToastQueueStatus
+}
+
 export interface ToastSlots {
   default?(props?: Record<string, never>): VNode[]
   customToastIcon?(props?: Record<string, never>): VNode[]

package/app/types/components/index.ts

@@ -1,4 +1,5 @@
 // Export types from the components directory
+export * from "./semantic-theme.d"
 export * from "./carousel-basic.d"
 export * from "./slider-gallery.d"
 export * from "./canvas-switcher.d"
@@ -6,6 +7,7 @@ export * from "./display-chip.d"
 export * from "./tabs.d"
 export * from "./responsive-header.d"
 export * from "./display-toast.d"
+export * from "./display-prompt.d"
 export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
 export * from "./hero-text"

package/app/types/components/semantic-theme.d.ts

@@ -0,0 +1 @@
+export type SemanticTheme = "info" | "success" | "warning" | "error"

package/nuxt.config.ts

@@ -1,8 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import { createResolver } from "@nuxt/kit";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
 
 const { resolve } = createResolver(import.meta.url);
 const isStandalone = !!process.env.SRCDEV_STANDALONE;
+const execFileAsync = promisify(execFile);
 
 export default defineNuxtConfig({
   // debug: !isProduction,
@@ -126,6 +129,19 @@ export default defineNuxtConfig({
   vue: {
     runtimeCompiler: true,
   },
+  // Re-generate ramps on config change during local dev.
+  // Guarded by isStandalone so consumers extending this layer never trigger
+  // generation inside node_modules (they never set SRCDEV_STANDALONE).
+  hooks: isStandalone
+    ? {
+        async "builder:watch"(_event, path) {
+          if (!path.endsWith("ramps.config.mjs")) return;
+          console.log("[ramps] ramps.config.mjs changed, regenerating…");
+          await execFileAsync("node", ["scripts/generate-ramps.mjs"], { cwd: resolve("./") });
+          console.log("[ramps] done.");
+        },
+      }
+    : {},
   compatibilityDate: "2026-05-20",
   typescript: {
     includeWorkspace: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.55",
+  "version": "9.1.56",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -10,9 +10,11 @@
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
     "cleaninstall": "npm run clean && npm run reinstall",
-    "dev": "SRCDEV_STANDALONE=true nuxt dev",
-    "build": "SRCDEV_STANDALONE=true nuxt build",
-    "generate": "SRCDEV_STANDALONE=true nuxt generate",
+    "generate:ramps": "node scripts/generate-ramps.mjs",
+    "check:ramps": "node scripts/check-ramps.mjs",
+    "dev": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt dev",
+    "build": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt build",
+    "generate": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt generate",
     "preview": "SRCDEV_STANDALONE=true nuxt preview",
     "lint": "eslint .",
     "prepare": "SRCDEV_STANDALONE=true nuxt prepare",

package/app/assets/styles/setup/03.theming/default/_dark.css

@@ -1,156 +0,0 @@
-:where(html.dark) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the default theme
-     =========================================== */
-  --colour-theme-1: var(--blue-01);
-  --colour-theme-2: var(--blue-02);
-  --colour-theme-3: var(--blue-03);
-  --colour-theme-4: var(--blue-04);
-  --colour-theme-5: var(--blue-05);
-  --colour-theme-6: var(--blue-06);
-  --colour-theme-7: var(--blue-07);
-  --colour-theme-8: var(--blue-08);
-  --colour-theme-9: var(--blue-09);
-  --colour-theme-10: var(--blue-10);
-  --colour-theme-11: var(--blue-10);
-  --colour-theme-12: var(--blue-10);
-
-  /* ===========================================
-     GENERIC BODY VARIABLES
-     =========================================== */
-  --page-bg: var(--slate-08);
-  --colour-text-default: var(--slate-01);
-  --colour-text-accent: var(--blue-05);
-  --colour-text-eyebrow: var(--blue-05);
-
-  /* ===========================================
-     GLASS PANEL VARIABLES
-     =========================================== */
-  --glass-panel-bg: rgba(12, 12, 20, 0.45);
-  --glass-panel-border-color: rgba(255, 255, 255, 0.07);
-  --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-  --glass-panel-highlight: rgba(255, 255, 255, 0.04);
-
-  /* ===========================================
-     HERO TEXT VARIABLES
-     =========================================== */
-  --hero-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
-
-  /* ===========================================
-     EYEBROW TEXT VARIABLES
-     =========================================== */
-  --eyebrow-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
-
-  /* ===========================================
-     STEPPER LIST VARIABLES
-     =========================================== */
-  --stepper-list-counter-circle-background: transparent;
-  --stepper-list-counter-circle-text: var(--blue-02);
-  --stepper-list-counter-circle-border: var(--blue-02);
-
-  --stepper-list-counter-disc-background: var(--blue-02);
-  --stepper-list-counter-disc-text: var(--blue-09);
-  --stepper-list-counter-disc-border: var(--blue-02);
-
-  --stepper-list-counter-square-background: transparent;
-  --stepper-list-counter-square-text: var(--blue-02);
-  --stepper-list-counter-square-border: var(--blue-02);
-
-  --stepper-list-connector-color: var(--blue-02);
-
-  --stepper-list-icon: var(--blue-02);
-
-  /* ===========================================
-     COLOUR FINDER VARIABLES
-     =========================================== */
-  --colour-finder-primary-colour: var(--blue-03);
-  --colour-finder-border-colour: var(--blue-03);
-
-  --colour-finder-checked-surface-colour: var(--green-10);
-  --colour-finder-checked-stroke-colour: var(--green-03);
-
-  --colour-finder-conflict-surface-colour: var(--sunset-09);
-  --colour-finder-conflict-stroke-colour: var(--sunset-03);
-
-  /* ===========================================
-     TREATMENT CONSULTANT VARIABLES
-     =========================================== */
-  --treatment-consultant-primary-colour: var(--amber-02);
-  --treatment-consultant-primary-foreground: var(--amber-02);
-
-  --treatment-consultant-muted-colour: var(--amber-05);
-  --treatment-consultant-muted-foreground: var(--amber-05);
-
-  --treatment-consultant-background: var(--amber-10);
-  --treatment-consultant-foreground: var(--amber-02);
-
-  --treatment-consultant-border-colour: var(--amber-03);
-
-  --treatment-consultant-checked-surface-colour: var(--green-10);
-  --treatment-consultant-checked-stroke-colour: var(--green-03);
-
-  --treatment-consultant-conflict-surface-colour: var(--sunset-09);
-  --treatment-consultant-conflict-stroke-colour: var(--sunset-03);
-
-  /* ===========================================
-     ANCHOR LINK VARIABLES
-     =========================================== */
-  --colour-link-default: var(--blue-02);
-  --colour-link-hover: var(--blue-03);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-
-  /* Input surfaces and backgrounds */
-  --theme-input-surface: var(--slate-10);
-  --theme-input-surface-hover: var(--slate-09);
-
-  /* Input borders */
-  --theme-input-border: var(--blue-06);
-  --theme-input-border-hover: var(--blue-05);
-  --theme-input-border-focus: var(--blue-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--blue-06);
-  --theme-input-outline-focus: var(--blue-04);
-  --theme-input-visible-outline: var(--blue-04);
-  --theme-focus-visible-shadow: 0 0 0 2px var(--blue-02);
-
-  /* ===========================================
-     INPUT TEXT VARIABLES
-     =========================================== */
-  --theme-input-placeholder: var(--slate-04);
-  --theme-input-text-color-normal: var(--slate-01);
-
-  /* ===========================================
-     CHECKBOX AND RADIO BUTTON VARIABLES
-     =========================================== */
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-symbol-color: var(--blue-02);
-  --theme-checkbox-decorator-color: var(--blue-02);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-border: var(--blue-07);
-  --theme-button-primary-border-active: var(--blue-07);
-  --theme-button-primary-text: var(--blue-00);
-  --theme-button-primary-text-hover: var(--blue-00);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: var(--blue-01);
-  --theme-button-secondary-border-active: var(--blue-01);
-  --theme-button-secondary-text: var(--blue-09);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: transparent;
-  --theme-button-tertiary-text: var(--blue-01);
-  --theme-button-tertiary-border-active: var(--blue-01);
-  --theme-button-tertiary-outline-active: var(--blue-09);
-}

package/app/assets/styles/setup/03.theming/default/_light.css

@@ -1,166 +0,0 @@
-:where(html) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the default theme
-     =========================================== */
-  --colour-theme-1: var(--blue-01);
-  --colour-theme-2: var(--blue-02);
-  --colour-theme-3: var(--blue-03);
-  --colour-theme-4: var(--blue-04);
-  --colour-theme-5: var(--blue-05);
-  --colour-theme-6: var(--blue-06);
-  --colour-theme-7: var(--blue-07);
-  --colour-theme-8: var(--blue-08);
-  --colour-theme-9: var(--blue-09);
-  --colour-theme-10: var(--blue-10);
-
-  /* ===========================================
-     GENERIC BODY VARIABLES
-     =========================================== */
-  --page-bg: var(--slate-00);
-  --colour-text-default: var(--slate-09);
-  --colour-text-accent: var(--blue-09);
-  --colour-text-eyebrow: var(--blue-09);
-
-  /* ===========================================
-     GLASS PANEL VARIABLES
-     =========================================== */
-  --glass-panel-bg: rgba(255, 255, 255, 0.55);
-  --glass-panel-border-color: rgba(255, 255, 255, 0.8);
-  --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
-  --glass-panel-highlight: rgba(255, 255, 255, 0.9);
-
-  /* ===========================================
-     HERO TEXT VARIABLES
-     =========================================== */
-  --hero-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
-
-  /* ===========================================
-     EYEBROW TEXT VARIABLES
-     =========================================== */
-  --eyebrow-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
-
-  /* ===========================================
-     STEPPER LIST VARIABLES
-     =========================================== */
-  --stepper-list-counter-circle-background: transparent;
-  --stepper-list-counter-circle-text: var(--blue-09);
-  --stepper-list-counter-circle-border: var(--blue-09);
-
-  --stepper-list-counter-disc-background: var(--blue-01);
-  --stepper-list-counter-disc-text: var(--blue-09);
-  --stepper-list-counter-disc-border: var(--blue-01);
-
-  --stepper-list-counter-square-background: transparent;
-  --stepper-list-counter-square-text: var(--blue-09);
-  --stepper-list-counter-square-border: var(--blue-09);
-
-  --stepper-list-connector-color: var(--blue-01);
-
-  --stepper-list-icon: var(--blue-09);
-
-  /* ===========================================
-     COLOUR FINDER VARIABLES
-     =========================================== */
-  --colour-finder-primary-colour: var(--blue-03);
-  --colour-finder-border-colour: var(--blue-02);
-
-  --colour-finder-checked-surface-colour: var(--green-03);
-  --colour-finder-checked-stroke-colour: var(--green-09);
-
-  --colour-finder-conflict-surface-colour: var(--sunset-03);
-  --colour-finder-conflict-stroke-colour: var(--sunset-09);
-
-  /* ===========================================
-     TREATMENT CONSULTANT VARIABLES
-     =========================================== */
-  --treatment-consultant-primary-colour: var(--amber-05);
-  --treatment-consultant-border-colour: var(--blue-02);
-
-  --treatment-consultant-checked-surface-colour: var(--green-03);
-  --treatment-consultant-checked-stroke-colour: var(--green-09);
-
-  --treatment-consultant-conflict-surface-colour: var(--sunset-03);
-  --treatment-consultant-conflict-stroke-colour: var(--sunset-09);
-
-  /* ===========================================
-     ANCHOR LINK VARIABLES
-     Styling for anchor links and interactive text
-     =========================================== */
-  --colour-link-default: var(--blue-10);
-  --colour-link-hover: var(--blue-09);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-
-  /* Input surfaces and backgrounds */
-  --theme-input-surface: var(--slate-00);
-  --theme-input-surface-hover: var(--slate-01);
-
-  /* Input borders */
-  --theme-input-border: var(--blue-06);
-  --theme-input-border-hover: var(--blue-05);
-  --theme-input-border-focus: var(--blue-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: transparent;
-  --theme-input-outline-focus: var(--blue-04);
-  --theme-input-visible-outline: var(--blue-10);
-  --theme-focus-visible-shadow: 0 0 0 2px var(--blue-02);
-
-  /* ===========================================
-     INPUT TEXT VARIABLES
-     =========================================== */
-  --theme-input-placeholder: var(--slate-05);
-  --theme-input-text-color-normal: var(--slate-09);
-
-  /* ===========================================
-     CHECKBOX AND RADIO BUTTON VARIABLES
-     =========================================== */
-  --theme-checkbox-symbol-color: var(--blue-08);
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-decorator-color: var(--blue-09);
-
-  /* ===========================================
-     TOGGLE SWITCH VARIABLES
-     =========================================== */
-  --theme-toggle-symbol-color-default: var(--blue-00);
-  --theme-toggle-symbol-color-checked: var(--blue-08);
-
-  --input-error-margin-block-start: 0.25rem;
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-surface: var(--blue-09);
-  --theme-button-primary-surface-hover: var(--blue-08);
-  --theme-button-primary-surface-active: var(--blue-07);
-  --theme-button-primary-border: var(--blue-09);
-  --theme-button-primary-border-active: var(--blue-09);
-  --theme-button-primary-outline: var(--blue-01);
-  --theme-button-primary-outline-active: var(--blue-07);
-  --theme-button-primary-text: var(--blue-00);
-  --theme-button-primary-text-hover: var(--blue-00);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: transparent;
-  --theme-button-secondary-surface-hover: var(--blue-01);
-  --theme-button-secondary-surface-active: var(--blue-01);
-  --theme-button-secondary-border: var(--blue-09);
-  --theme-button-secondary-border-active: var(--blue-09);
-  --theme-button-secondary-outline: var(--blue-09);
-  --theme-button-secondary-outline-active: var(--blue-09);
-  --theme-button-secondary-text: var(--blue-09);
-  --theme-button-secondary-text-hover: var(--blue-09);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: var(--slate-01);
-  --theme-button-tertiary-text: var(--blue-09);
-  --theme-button-tertiary-border-active: var(--blue-09);
-  --theme-button-tertiary-outline-active: var(--blue-09);
-}

package/app/assets/styles/setup/03.theming/default/index.css

@@ -1,2 +0,0 @@
-@import "./_light";
-@import "./_dark";

package/app/assets/styles/setup/03.theming/error/_dark.css

@@ -1,56 +0,0 @@
-:where(html.dark [data-invalid]),
-:where(html.dark [data-theme="error"]) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the error theme
-     =========================================== */
-  --colour-theme-1: var(--red-01);
-  --colour-theme-2: var(--red-02);
-  --colour-theme-3: var(--red-03);
-  --colour-theme-4: var(--red-04);
-  --colour-theme-5: var(--red-05);
-  --colour-theme-6: var(--red-06);
-  --colour-theme-7: var(--red-07);
-  --colour-theme-8: var(--red-08);
-  --colour-theme-9: var(--red-09);
-  --colour-theme-10: var(--red-10);
-  --colour-theme-11: var(--red-10);
-  --colour-theme-12: var(--red-10);
-
-  /* ===========================================
-     FORM ERROR DISPLAY
-     =========================================== */
-  --theme-error-outline: var(--red-05);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-  --theme-input-border: var(--red-06);
-  --theme-input-border-focus: var(--red-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--red-05);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-border: var(--red-07);
-  --theme-button-primary-border-active: var(--red-07);
-  --theme-button-primary-text: var(--red-00);
-  --theme-button-primary-text-hover: var(--red-00);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: var(--red-01);
-  --theme-button-secondary-border-active: var(--red-01);
-  --theme-button-secondary-text: var(--red-09);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: transparent;
-  --theme-button-tertiary-text: var(--red-01);
-  --theme-button-tertiary-border-active: var(--red-01);
-  --theme-button-tertiary-outline-active: var(--red-09);
-}