srcdev-nuxt-components 5.0.3 → 6.0.1

package/README.md

@@ -7,20 +7,12 @@ Althought this repo is public and feel free to do what you wish with it, this ha
 ## Install Nuxt Forms layer
 
 ```bash
-npm install --save nuxt-compnents
+npm install --save srcdev-nuxt-components
 ```
 
-## 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',
+  extends: 'srcdev-nuxt-components',
 });
 ```
 

package/app/assets/styles/extends-layer/srcdev-components/components/_display-prompt-core.css

@@ -0,0 +1,72 @@
+.srcdev-components-extended {
+  .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-0);
+            font-size: 3rem;
+            font-style: normal;
+            font-weight: normal;
+          }
+        }
+
+        .display-prompt-content {
+          gap: 1rem;
+          margin: 0;
+          padding: 0.2rem;
+
+          .title {
+            font-size: var(--step-5);
+            font-weight: bold;
+            line-height: 1.3;
+            color: var(--component-theme-0);
+            margin: 0;
+            padding: 0;
+          }
+
+          .text {
+            font-size: var(--step-5);
+            font-weight: normal;
+            line-height: 1.3;
+            color: var(--component-theme-0);
+            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-0);
+            font-size: var(--step-5);
+            border: 1px solid green;
+            padding: 1rem;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1 @@
+@import './_display-prompt-core';

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

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

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

@@ -0,0 +1 @@
+@import './themes';

package/{assets/styles/extends-layer/srcdev-components → app/assets/styles/extends-layer/srcdev-components/setup}/themes/_error.css

@@ -1,4 +1,4 @@
-[data-prompt-theme='error'] {
+[data-component-theme='error'] {
   --component-theme-0: var(--red-0);
   --component-theme-1: var(--red-1);
   --component-theme-2: var(--red-2);

package/{assets/styles/extends-layer/srcdev-components → app/assets/styles/extends-layer/srcdev-components/setup}/themes/_info.css

@@ -1,4 +1,4 @@
-[data-prompt-theme='info'] {
+[data-component-theme='info'] {
   --component-theme-0: var(--blue-0);
   --component-theme-1: var(--blue-1);
   --component-theme-2: var(--blue-2);

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_secondary.css

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

package/{assets/styles/extends-layer/srcdev-components → app/assets/styles/extends-layer/srcdev-components/setup}/themes/_success.css

@@ -1,4 +1,4 @@
-[data-prompt-theme='success'] {
+[data-component-theme='success'] {
   --component-theme-0: var(--green-0);
   --component-theme-1: var(--green-1);
   --component-theme-2: var(--green-2);

package/{assets/styles/extends-layer/srcdev-components → app/assets/styles/extends-layer/srcdev-components/setup}/themes/_warning.css

@@ -1,4 +1,4 @@
-[data-prompt-theme='warning'] {
+[data-component-theme='warning'] {
   --component-theme-0: var(--orange-0);
   --component-theme-1: var(--orange-1);
   --component-theme-2: var(--orange-2);

package/{assets/styles/extends-layer/srcdev-components → app/assets/styles/extends-layer/srcdev-components/setup}/themes/index.css

@@ -2,3 +2,4 @@
 @import './_success';
 @import './_warning';
 @import './_info';
+@import './_secondary';

package/app/assets/styles/setup/_head.css

@@ -0,0 +1,36 @@
+:root {
+  /* --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; */
+  /* --font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
+
+  --font-family: 'Quicksand', futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+}
+
+html {
+  color-scheme: light dark;
+
+  &[data-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  &[data-color-scheme='dark'] {
+    color-scheme: dark;
+  }
+
+  background-color: var(--page-bg);
+
+  font-size: 62.5%;
+
+  transition: background-color 0.4s ease, color 0.4s ease;
+  scrollbar-gutter: stable;
+
+  overflow-x: hidden;
+}
+body {
+  color: var(--grayscale-text-body);
+  font-family: var(--font-family);
+  font-size: var(--step-4);
+  min-height: 100vh;
+  transition: background-color 0.4s ease, color 0.4s ease;
+
+  overflow-x: hidden;
+}

package/{assets → app/assets}/styles/setup/a11y/_variables.css

@@ -5,6 +5,4 @@
 
   --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/app/assets/styles/setup/index.css

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

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

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

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

@@ -0,0 +1,217 @@
+.heading-1 {
+  font-size: var(--step-8);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-2 {
+  font-size: var(--step-7);
+  /* font-weight: bold; */
+  font-variation-settings: 'wght' 500;
+  line-height: 1.3;
+}
+
+.heading-3 {
+  font-size: var(--step-6);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-4 {
+  font-size: var(--step-5);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-5 {
+  font-size: var(--step-4);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-6 {
+  font-size: var(--step-3);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+/* Body text */
+
+.body-large {
+  font-size: var(--step-6);
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.body-medium {
+  font-size: var(--step-5);
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.body-normal {
+  font-size: var(--step-4);
+  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-2);
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.body-large-semibold {
+  font-size: var(--step-6);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-medium-semibold {
+  font-size: var(--step-5);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-normal-semibold {
+  font-size: var(--step-4);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-small-semibold {
+  font-size: var(--step-3);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-xsmall-semibold {
+  font-size: var(--step-2);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-large-bold {
+  font-size: var(--step-6);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-medium-bold {
+  font-size: var(--step-5);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-normal-bold {
+  font-size: var(--step-4);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-small-bold {
+  font-size: var(--step-3);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-xsmall-bold {
+  font-size: var(--step-2);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+/* Links */
+
+.link-large {
+  color: var(--theme-link-default);
+  font-size: var(--step-6);
+  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-5);
+  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-4);
+  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-3);
+  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-2);
+  font-weight: 600;
+  line-height: 1.5;
+  text-decoration: underline;
+
+  &:visited {
+    color: var(--theme-link-default);
+  }
+}
+
+.italic {
+  font-style: italic;
+}
+
+.wght-300 {
+  font-variation-settings: 'wght' 300;
+}
+.wght-400 {
+  font-variation-settings: 'wght' 400;
+}
+.wght-500 {
+  font-variation-settings: 'wght' 500;
+}
+.wght-600 {
+  font-variation-settings: 'wght' 600;
+}
+.wght-700 {
+  font-variation-settings: 'wght' 700;
+}
+.wght-800 {
+  font-variation-settings: 'wght' 800;
+}
+.wght-900 {
+  font-variation-settings: 'wght' 900;
+}

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

@@ -0,0 +1,29 @@
+/* Using the font-variation-settings property. */
+
+.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/app/assets/styles/setup/typography/utility-classes/_generic-font-weights.css

@@ -0,0 +1,39 @@
+/* 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/app/assets/styles/setup/typography/vars/_colors.css

@@ -0,0 +1,14 @@
+:root {
+  --theme-link-default: light-dark(var(--blue-12), var(--blue-4));
+
+  --page-bg: light-dark(var(--gray-0), var(--gray-9));
+
+  --surface-subtle: light-dark(var(--gray-1), var(--gray-8));
+
+  --grayscale-text-title: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-body: light-dark(var(--gray-12), var(--gray-3));
+  --grayscale-text-subtitle: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-caption: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-negative: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-disabled: light-dark(var(--gray-12), var(--gray-2));
+}

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

@@ -0,0 +1,12 @@
+:root {
+  --step-10: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem); /* 10 */
+  --step-9: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem); /* 9 */
+  --step-8: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); /* 8 */
+  --step-7: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); /* 7 */
+  --step-6: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); /* 6 */
+  --step-5: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); /* 5 */
+  --step-4: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); /* 4 */
+  --step-3: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); /* 3 */
+  --step-2: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); /* 2 */
+  --step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); /* 1 */
+}

package/{assets → app/assets}/styles/setup/typography/vars/index.css

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

package/app/assets/styles/setup/utility-classes/_fluid-spacing.css

@@ -0,0 +1,13 @@
+/* @link https://utopia.fyi/clamp/calculator?a=360,1240,1—2|2—4|4—8|6—12|8—16|10—20|12—24|16—32|20—40 */
+
+:root {
+  --fluid-1-2: clamp(0.0625rem, 0.0369rem + 0.1136vw, 0.125rem);
+  --fluid-2-4: clamp(0.125rem, 0.0739rem + 0.2273vw, 0.25rem);
+  --fluid-4-8: clamp(0.25rem, 0.1477rem + 0.4545vw, 0.5rem);
+  --fluid-6-12: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
+  --fluid-8-16: clamp(0.5rem, 0.2955rem + 0.9091vw, 1rem);
+  --fluid-10-20: clamp(0.625rem, 0.3693rem + 1.1364vw, 1.25rem);
+  --fluid-12-24: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
+  --fluid-16-32: clamp(1rem, 0.5909rem + 1.8182vw, 2rem);
+  --fluid-20-40: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem);
+}

package/app/assets/styles/setup/utility-classes/animations/_auto-rotate.css

@@ -0,0 +1,13 @@
+@keyframes autoRotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.auto-rotate {
+  animation: autoRotateAnimation;
+  animation-timeline: view();
+}

package/app/assets/styles/setup/utility-classes/animations/_entry-exit-blur.css

@@ -0,0 +1,16 @@
+.entry-exit-blur {
+  animation: entryExitBlurAnimation linear both;
+  animation-timeline: view();
+}
+@keyframes entryExitBlurAnimation {
+  0% {
+    filter: blur(40px);
+  }
+  45%,
+  55% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(40px);
+  }
+}

package/app/assets/styles/setup/utility-classes/animations/_entry-slide-in.css

@@ -0,0 +1,15 @@
+@keyframes entrySlideInAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.entry-slide-in {
+  animation: entrySlideInAnimation both;
+  animation-timeline: view(70% 5%);
+}

package/app/assets/styles/setup/utility-classes/animations/_entry-zoom-reveal.css

@@ -0,0 +1,15 @@
+@keyframes entryZoomRevealAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(200px) scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.entry-zoom-reveal {
+  animation: entryZoomRevealAnimation both;
+  animation-timeline: view(70% 5%);
+}

package/app/assets/styles/setup/utility-classes/animations/index.css

@@ -0,0 +1,4 @@
+@import './_entry-zoom-reveal';
+@import './_entry-slide-in';
+@import './_entry-exit-blur';
+@import './_auto-rotate';

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

@@ -0,0 +1,2 @@
+@import './_fluid-spacing';
+@import './animations/';

package/app/assets/styles/setup/variables/index.css

@@ -0,0 +1 @@
+@import './colors';

package/{components → app/components}/accordian/AccordianCore.vue

@@ -7,7 +7,7 @@
       <template #icon>
         <slot :name="`accordian-${key}-icon`"></slot>
       </template>
-      <template #content>
+      <template #layout-content>
         <slot :name="`accordian-${key}-content`"></slot>
       </template>
     </ExpandingPanel>

package/{components → app/components}/display-prompt/DisplayPromptCore.vue

@@ -1,6 +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-prompt-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
+    <div class="display-prompt-wrapper" :data-component-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">

package/{components → app/components}/responsive-header/NavigationItems.vue

@@ -44,7 +44,7 @@
             <template #summaryIcon>
               <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
             </template>
-            <template #content>
+            <template #layout-content>
               <div class="overflow-navigation-sub-nav-inner">
                 <ul class="overflow-navigation-sub-nav-list">
                   <li v-for="childLink in link.childLinks" :key="childLink.name" class="overflow-navigation-sub-nav-item">

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,
   },