srcdev-nuxt-components 5.0.2 → 6.0.0

package/README.md

@@ -10,14 +10,6 @@ Althought this repo is public and feel free to do what you wish with it, this ha
 npm install --save nuxt-compnents
 ```
 
-## Additional required packages
-
-```bash
-npm install --save @oddbird/css-anchor-positioning
-```
-
-Then add the dependency to the property `extends` in `nuxt.config`:
-
 ```ts
 defineNuxtConfig({
   extends: 'nuxt-compnents',
@@ -55,7 +47,7 @@ The setup layer provides the foundational styles and utilities:
 #### Typography (`/typography`)
 
 - **Responsive Font Sizes** - Fluid typography using clamp() functions:
-  - `--step-5` to `--step--2` providing 8 responsive font size steps
+  - `--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
   - Generic font weight and variation settings

package/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ['modern-normalize', './assets/styles/main.css'],
+  css: ['modern-normalize', './app/assets/styles/main.css'],
   modules: ['@nuxt/icon', '@nuxt/image'],
   app: {
     head: {
@@ -11,6 +11,9 @@ export default defineNuxtConfig({
       },
       titleTemplate: '%s - Nuxt Components Layer',
       meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+      bodyAttrs: {
+        class: 'srcdev-components-extended',
+      },
     },
     pageTransition: {
       name: 'page',
@@ -30,7 +33,7 @@ export default defineNuxtConfig({
   vue: {
     runtimeCompiler: true,
   },
-  compatibilityDate: '2024-07-13',
+  compatibilityDate: '2024-11-01',
   typescript: {
     includeWorkspace: true,
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -25,18 +25,17 @@
     "types/"
   ],
   "devDependencies": {
-    "@iconify-json/akar-icons": "1.2.2",
-    "@iconify-json/bitcoin-icons": "1.2.2",
-    "@nuxt/eslint-config": "1.5.2",
-    "@nuxt/icon": "1.15.0",
-    "@nuxt/image": "1.10.0",
-    "@oddbird/css-anchor-positioning": "0.6.1",
-    "@vueuse/core": "13.5.0",
+    "@iconify-json/akar-icons": "1.2.7",
+    "@iconify-json/bitcoin-icons": "1.2.4",
+    "@nuxt/eslint-config": "1.8.0",
+    "@nuxt/icon": "2.0.0",
+    "@nuxt/image": "1.11.0",
+    "@vueuse/core": "13.6.0",
     "eslint": "9.31.0",
-    "happy-dom": "16.8.1",
-    "nuxt": "3.17.6",
-    "release-it": "18.1.2",
-    "typescript": "5.8.3"
+    "happy-dom": "18.0.1",
+    "nuxt": "4.0.3",
+    "release-it": "19.0.4",
+    "typescript": "5.9.2"
   },
   "dependencies": {
     "focus-trap-vue": "4.0.3",

package/assets/styles/extends-layer/srcdev-components/display-prompt-core/index.css

@@ -1,70 +0,0 @@
-.display-prompt-core {
-  .display-prompt-wrapper {
-    background-color: var(--component-theme-10);
-    border: 1px solid var(--component-theme-8);
-    border-inline-start: 8px solid var(--component-theme-8);
-    border-radius: 4px;
-    border-start-start-radius: 8px;
-    border-end-start-radius: 8px;
-
-    .display-prompt-inner {
-      align-items: center;
-      gap: 12px;
-      padding-block: 1rem;
-      padding-inline: 1.5rem;
-
-      .display-prompt-icon {
-        .icon {
-          color: var(--component-theme-8);
-          font-size: 3rem;
-          font-style: normal;
-          font-weight: normal;
-        }
-      }
-
-      .display-prompt-content {
-        gap: 1rem;
-        margin: 0;
-        padding: 0.2rem;
-
-        .title {
-          font-size: var(--step-2);
-          font-weight: bold;
-          line-height: 1.3;
-          color: var(--component-theme-8);
-          margin: 0;
-          padding: 0;
-        }
-
-        .text {
-          font-size: var(--step-2);
-          font-weight: normal;
-          line-height: 1.3;
-          color: var(--component-theme-8);
-          margin: 0;
-          padding: 0;
-        }
-      }
-      .display-prompt-action {
-        background-color: transparent;
-        align-items: center;
-        margin: 1rem;
-        padding: 0.5rem;
-        border: 0.1rem solid var(--component-theme-8);
-        border-radius: 50%;
-        outline: 1px solid var(--component-theme-3);
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        .icon {
-          color: var(--component-theme-8);
-          font-size: var(--step-2);
-          border: 1px solid green;
-          padding: 1rem;
-        }
-      }
-    }
-  }
-}

package/assets/styles/extends-layer/srcdev-components/index.css

@@ -1,2 +0,0 @@
-@import './themes';
-@import './display-prompt-core';

package/assets/styles/extends-layer/srcdev-components/themes/_error.css

@@ -1,15 +0,0 @@
-[data-prompt-theme='error'] {
-  --component-theme-0: var(--red-0);
-  --component-theme-1: var(--red-1);
-  --component-theme-2: var(--red-2);
-  --component-theme-3: var(--red-3);
-  --component-theme-4: var(--red-4);
-  --component-theme-5: var(--red-5);
-  --component-theme-6: var(--red-6);
-  --component-theme-7: var(--red-7);
-  --component-theme-8: var(--red-8);
-  --component-theme-9: var(--red-9);
-  --component-theme-10: var(--red-10);
-  --component-theme-11: var(--red-11);
-  --component-theme-12: var(--red-12);
-}

package/assets/styles/extends-layer/srcdev-components/themes/_info.css

@@ -1,15 +0,0 @@
-[data-prompt-theme='info'] {
-  --component-theme-0: var(--blue-0);
-  --component-theme-1: var(--blue-1);
-  --component-theme-2: var(--blue-2);
-  --component-theme-3: var(--blue-3);
-  --component-theme-4: var(--blue-4);
-  --component-theme-5: var(--blue-5);
-  --component-theme-6: var(--blue-6);
-  --component-theme-7: var(--blue-7);
-  --component-theme-8: var(--blue-8);
-  --component-theme-9: var(--blue-9);
-  --component-theme-10: var(--blue-10);
-  --component-theme-11: var(--blue-11);
-  --component-theme-12: var(--blue-12);
-}

package/assets/styles/extends-layer/srcdev-components/themes/_success.css

@@ -1,15 +0,0 @@
-[data-prompt-theme='success'] {
-  --component-theme-0: var(--green-0);
-  --component-theme-1: var(--green-1);
-  --component-theme-2: var(--green-2);
-  --component-theme-3: var(--green-3);
-  --component-theme-4: var(--green-4);
-  --component-theme-5: var(--green-5);
-  --component-theme-6: var(--green-6);
-  --component-theme-7: var(--green-7);
-  --component-theme-8: var(--green-8);
-  --component-theme-9: var(--green-9);
-  --component-theme-10: var(--green-10);
-  --component-theme-11: var(--green-11);
-  --component-theme-12: var(--green-12);
-}

package/assets/styles/extends-layer/srcdev-components/themes/_warning.css

@@ -1,15 +0,0 @@
-[data-prompt-theme='warning'] {
-  --component-theme-0: var(--orange-0);
-  --component-theme-1: var(--orange-1);
-  --component-theme-2: var(--orange-2);
-  --component-theme-3: var(--orange-3);
-  --component-theme-4: var(--orange-4);
-  --component-theme-5: var(--orange-5);
-  --component-theme-6: var(--orange-6);
-  --component-theme-7: var(--orange-7);
-  --component-theme-8: var(--orange-8);
-  --component-theme-9: var(--orange-9);
-  --component-theme-10: var(--orange-10);
-  --component-theme-11: var(--orange-11);
-  --component-theme-12: var(--orange-12);
-}

package/assets/styles/extends-layer/srcdev-components/themes/index.css

@@ -1,4 +0,0 @@
-@import './_error';
-@import './_success';
-@import './_warning';
-@import './_info';

package/assets/styles/main.css

@@ -1,2 +0,0 @@
-@import './setup/';
-@import './extends-layer/srcdev-components/';

package/assets/styles/setup/_head.css

@@ -1,5 +0,0 @@
-:root {
-  --font-size: 1.6rem;
-  --line-height: calc((var(--font-size) * 2) - 1rem);
-  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
-}

package/assets/styles/setup/a11y/_utils.css

@@ -1,20 +0,0 @@
-.sr-only {
-  border-width: 0;
-  clip: rect(1px, 0.1rem, 0.1rem, 0.1rem);
-  clip-path: inset(50%);
-  height: 0.1rem;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 0.1rem;
-}
-/* .sr-only {
-  position: absolute;
-  width: 0.1rem;
-  height: 0.1rem;
-  padding: 0;
-  margin: -0.1rem;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-} */

package/assets/styles/setup/a11y/_variables.css

@@ -1,10 +0,0 @@
-:root {
-  --focus-box-shadow-colour-off: transparent;
-  --focus-box-shadow-colour-on: light-dark(var(--blue-12), var(--gray-0));
-  --form-focus-box-shadow: 0 0 0 0.3rem;
-
-  --box-shadow-off: 0 0 0 0.3rem transparent;
-  --box-shadow-on: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
-
-  --focus-visible-box-shadow: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
-}

package/assets/styles/setup/a11y/index.css

@@ -1,2 +0,0 @@
-@import './_variables.css';
-@import './_utils.css';

package/assets/styles/setup/index.css

@@ -1,5 +0,0 @@
-@import './utility-classes/';
-@import './a11y/';
-@import './variables/';
-@import './typography/';
-@import './_head.css';

package/assets/styles/setup/typography/index.css

@@ -1,2 +0,0 @@
-@import './utility-classes/';
-@import './vars/';

package/assets/styles/setup/typography/utility-classes/_generic-font-classes.css

@@ -1,192 +0,0 @@
-:root {
-  .heading-1 {
-    font-size: var(--step-5);
-    font-weight: bold;
-    line-height: 1.3;
-  }
-
-  .heading-2 {
-    font-size: var(--step-4);
-    font-weight: bold;
-    line-height: 1.3;
-  }
-
-  .heading-3 {
-    font-size: var(--step-3);
-    font-weight: bold;
-    line-height: 1.3;
-  }
-
-  .heading-4 {
-    font-size: var(--step-2);
-    font-weight: bold;
-    line-height: 1.3;
-  }
-
-  .heading-5 {
-    font-size: var(--step-1);
-    font-weight: bold;
-    line-height: 1.3;
-  }
-
-  .heading-6 {
-    font-size: var(--step-0);
-    font-weight: bold;
-    line-height: 1.3;
-  }
-
-  /* Body text */
-
-  .body-large {
-    font-size: var(--step-3);
-    font-weight: normal;
-    line-height: 1.5;
-  }
-
-  .body-medium {
-    font-size: var(--step-2);
-    font-weight: normal;
-    line-height: 1.5;
-  }
-
-  .body-normal {
-    font-size: var(--step-1);
-    font-weight: normal;
-    line-height: 1.5;
-  }
-
-  .body-small {
-    font-size: var(--step--0);
-    font-weight: normal;
-    line-height: 1.5;
-  }
-
-  .body-xsmall {
-    font-size: var(--step--1);
-    font-weight: normal;
-    line-height: 1.5;
-  }
-
-  .body-large-semibold {
-    font-size: var(--step-3);
-    font-weight: 500;
-    line-height: 1.5;
-  }
-
-  .body-medium-semibold {
-    font-size: var(--step-2);
-    font-weight: 500;
-    line-height: 1.5;
-  }
-
-  .body-normal-semibold {
-    font-size: var(--step-1);
-    font-weight: 500;
-    line-height: 1.5;
-  }
-
-  .body-small-semibold {
-    font-size: var(--step-0);
-    font-weight: 500;
-    line-height: 1.5;
-  }
-
-  .body-xsmall-semibold {
-    font-size: var(--step--1);
-    font-weight: 500;
-    line-height: 1.5;
-  }
-
-  .body-large-bold {
-    font-size: var(--step-3);
-    font-weight: bold;
-    line-height: 1.5;
-  }
-
-  .body-medium-bold {
-    font-size: var(--step-2);
-    font-weight: bold;
-    line-height: 1.5;
-  }
-
-  .body-normal-bold {
-    font-size: var(--step-1);
-    font-weight: bold;
-    line-height: 1.5;
-  }
-
-  .body-small-bold {
-    font-size: var(--step-0);
-    font-weight: bold;
-    line-height: 1.5;
-  }
-
-  .body-xsmall-bold {
-    font-size: var(--step--1);
-    font-weight: bold;
-    line-height: 1.5;
-  }
-
-  /* Links */
-
-  .link-large {
-    color: var(--theme-link-default);
-    font-size: var(--step-3);
-    font-weight: 600;
-    line-height: 1.5;
-    text-decoration: underline;
-
-    &:visited {
-      color: var(--theme-link-default);
-    }
-  }
-
-  .link-medium {
-    color: var(--theme-link-default);
-    font-size: var(--step-2);
-    font-weight: 600;
-    line-height: 1.5;
-    text-decoration: underline;
-
-    &:visited {
-      color: var(--theme-link-default);
-    }
-  }
-
-  .link-normal {
-    color: var(--theme-link-default);
-    font-size: var(--step-1);
-    font-weight: 600;
-    line-height: 1.5;
-    text-decoration: underline;
-
-    &:visited,
-    &:active {
-      color: var(--theme-link-default);
-    }
-  }
-
-  .link-small {
-    color: var(--theme-link-default);
-    font-size: var(--step-0);
-    font-weight: 600;
-    line-height: 1.5;
-    text-decoration: underline;
-
-    &:visited {
-      color: var(--theme-link-default);
-    }
-  }
-
-  .link-xsmall {
-    color: var(--theme-link-default);
-    font-size: var(--step--1);
-    font-weight: 600;
-    line-height: 1.5;
-    text-decoration: underline;
-
-    &:visited {
-      color: var(--theme-link-default);
-    }
-  }
-}

package/assets/styles/setup/typography/utility-classes/_generic-font-variation-settings.css

@@ -1,29 +0,0 @@
-:root {
-  .fvs-wght-100 {
-    font-variation-settings: 'wght' 100;
-  }
-  .fvs-wght-200 {
-    font-variation-settings: 'wght' 200;
-  }
-  .fvs-wght-300 {
-    font-variation-settings: 'wght' 300;
-  }
-  .fvs-wght-400 {
-    font-variation-settings: 'wght' 400;
-  }
-  .fvs-wght-500 {
-    font-variation-settings: 'wght' 500;
-  }
-  .fvs-wght-600 {
-    font-variation-settings: 'wght' 600;
-  }
-  .fvs-wght-700 {
-    font-variation-settings: 'wght' 700;
-  }
-  .fvs-wght-800 {
-    font-variation-settings: 'wght' 800;
-  }
-  .fvs-wght-900 {
-    font-variation-settings: 'wght' 900;
-  }
-}

package/assets/styles/setup/typography/utility-classes/_generic-font-weights.css

@@ -1,41 +0,0 @@
-:root {
-  /* By numeric step */
-  .wght-100 {
-    font-weight: 100;
-  }
-  .wght-200 {
-    font-weight: 200;
-  }
-  .wght-300 {
-    font-weight: 300;
-  }
-  .wght-400 {
-    font-weight: 400;
-  }
-  .wght-500 {
-    font-weight: 500;
-  }
-  .wght-600 {
-    font-weight: 600;
-  }
-  .wght-700 {
-    font-weight: 700;
-  }
-  .wght-800 {
-    font-weight: 800;
-  }
-  .wght-900 {
-    font-weight: 900;
-  }
-
-  /* By named weight */
-  .light {
-    font-weight: light;
-  }
-  .normal {
-    font-weight: normal;
-  }
-  .bold {
-    font-weight: bold;
-  }
-}

package/assets/styles/setup/typography/utility-classes/index.css

@@ -1,3 +0,0 @@
-@import './_generic-font-classes.css';
-@import './_generic-font-weights.css';
-@import './_generic-font-variation-settings.css';

package/assets/styles/setup/typography/vars/_reponsive-font-sizes.css

@@ -1,10 +0,0 @@
-:root {
-  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
-  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
-  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
-  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
-  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
-  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
-  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
-  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
-}

package/assets/styles/setup/typography/vars/index.css

@@ -1 +0,0 @@
-@import './_reponsive-font-sizes.css';