srcdev-nuxt-components 0.0.33 → 0.1.0

package/assets/styles/ally/_utils.css

@@ -0,0 +1,20 @@
+.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/ally/_variables.css

@@ -0,0 +1,8 @@
+: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));
+}

package/assets/styles/ally/index.css

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

package/assets/styles/forms/themes/_error.css

@@ -9,7 +9,7 @@
     --theme-form-input-outline-focus: var(--red-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--red-12), var(--red-2));
+    --theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
@@ -27,6 +27,20 @@
 
     --theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--red-12), var(--red-1));
+
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--red-12), var(--red-12));
+    --theme-form-toggle-symbol-off: var(--orange-12);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/
@@ -58,6 +72,6 @@
     --theme-btn-outline-focus: var(--red-0);
     --theme-btn-text-focus: var(--red-12);
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--red-12), var(--red-2));
+    --theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
   }
 }

package/assets/styles/forms/themes/_ghost.css

@@ -9,7 +9,7 @@
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
+    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
@@ -27,6 +27,20 @@
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --form-element-border-width: 0.1rem;
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
+    --form-element-border-width: 0.1rem;
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-toggle-symbol-off: var(--gray-4);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/
@@ -58,6 +72,6 @@
     --theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
     --theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
+    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
   }
 }

package/assets/styles/forms/themes/_input-action.css

@@ -0,0 +1,20 @@
+:root {
+  [data-btn-theme='input-action'] {
+    --theme-btn-bg: transparent;
+    --theme-btn-border: transparent;
+    --theme-btn-outline: transparent;
+    --theme-btn-text: var(--theme-form-input-text);
+
+    --theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-3));
+    --theme-btn-border-hover: transparent;
+    --theme-btn-outline-hover: transparent;
+    --theme-btn-text-hover: var(--theme-form-input-text);
+
+    --theme-btn-bg-focus: transparent;
+    --theme-btn-border-focus: transparent;
+    --theme-btn-outline-focus: transparent;
+    --theme-btn-text-focus: transparent;
+
+    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
+  }
+}

package/assets/styles/forms/themes/_primary.css

@@ -9,7 +9,8 @@
     --theme-form-input-outline-focus: var(--blue-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--blue-12), var(--blue-2));
+    /* --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2)); */
+    --theme-form-focus-box-shadow: light-dark(red, yellowgreen);
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
@@ -27,6 +28,20 @@
 
     --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--blue-12), var(--blue-1));
+
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--blue-1), var(--blue-1));
+    --theme-form-toggle-symbol-off: var(--blue-7);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/
@@ -62,6 +77,6 @@
     --theme-btn-outline-focus: var(--blue-0);
     --theme-btn-text-focus: var(--blue-12);
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--blue-12), var(--blue-2));
+    --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2));
   }
 }

package/assets/styles/forms/themes/_secondary.css

@@ -9,7 +9,7 @@
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
+    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
@@ -27,6 +27,20 @@
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
+
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-toggle-symbol-off: var(--gray-4);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/
@@ -58,6 +72,6 @@
     --theme-btn-outline-focus: var(--gray-0);
     --theme-btn-text-focus: var(--gray-12);
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
+    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
   }
 }

package/assets/styles/forms/themes/_success.css

@@ -9,7 +9,7 @@
     --theme-form-input-outline-focus: var(--green-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--green-12), var(--green-2));
+    --theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
@@ -27,6 +27,20 @@
 
     --theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--green-12), var(--green-1));
+
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--green-12), var(--green-12));
+    --theme-form-toggle-symbol-off: var(--green-4);
+    --theme-form-toggle-symbol-on: var(--green-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/
@@ -58,6 +72,6 @@
     --theme-btn-outline-focus: var(--green-0);
     --theme-btn-text-focus: var(--green-12);
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--green-12), var(--green-2));
+    --theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
   }
 }

package/assets/styles/forms/themes/_tertiary.css

@@ -9,7 +9,7 @@
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
+    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
@@ -27,6 +27,20 @@
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
+
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-toggle-symbol-off: var(--gray-4);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/

package/assets/styles/forms/themes/_warning.css

@@ -9,7 +9,7 @@
     --theme-form-input-outline-focus: var(--orange-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--orange-12), var(--orange-2));
+    --theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
@@ -27,6 +27,20 @@
 
     --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--orange-12), var(--orange-1));
+
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-toggle-symbol-off: var(--orange-12);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/
@@ -58,6 +72,6 @@
     --theme-btn-outline-focus: var(--orange-0);
     --theme-btn-text-focus: var(--orange-12);
 
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--orange-12), var(--orange-2));
+    --theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
   }
 }

package/assets/styles/forms/themes/index.css

@@ -1,7 +1,8 @@
-@import './_primary.css';
-@import './_secondary.css';
-@import './_tertiary.css';
-@import './_ghost.css';
-@import './_error.css';
-@import './_success.css';
-@import './_warning.css';
+@import './_primary';
+@import './_secondary';
+@import './_tertiary';
+@import './_ghost';
+@import './_error';
+@import './_success';
+@import './_warning';
+@import './_input-action';

package/assets/styles/forms/variables/_sizes.css

@@ -0,0 +1,82 @@
+:root {
+  --form-element-padding-block-start: 0.4lh;
+  --form-element-padding-block-end: 0.4lh;
+  --form-element-border-width: 0.2rem;
+  --form-element-outline-width: 0.1rem;
+
+  [data-size='x-small'] {
+    --form-element-font-size: var(--step-0);
+    --form-placeholder-font-size: calc(var(--step-0) * 0.65);
+    --form-element-line-height: var(--step-0);
+    --form-icon-size: var(--step-0);
+    --form-button-padding-inline: calc(var(--step-0) * 1.65);
+    --form-text-padding-inline: calc(var(--step-0) * 0.25);
+    --form-button-icon-gap: calc(var(--step-0) * 0.65);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-1) * 2);
+    --form-toggle-symbol-size: calc(var(--step-0) * 1.55);
+    --form-toggle-switch-width-adjustment: 0.5rem;
+
+    --form-input-checkbox-radio-button-size: var(--step-0);
+  }
+  [data-size='small'] {
+    --form-element-font-size: var(--step-1);
+    --form-placeholder-font-size: calc(var(--step-1) * 0.65);
+    --form-element-line-height: var(--step-1);
+    --form-icon-size: var(--step-1);
+    --form-button-padding-inline: calc(var(--step-0) * 1.65);
+    --form-text-padding-inline: calc(var(--step-0) * 0.25);
+    --form-button-icon-gap: calc(var(--step-0) * 0.65);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-1) * 2.25);
+    --form-toggle-symbol-size: calc(var(--step-1) * 1.635);
+    --form-toggle-switch-width-adjustment: 0.3rem;
+
+    --form-input-checkbox-radio-button-size: var(--step-1);
+  }
+  [data-size='normal'] {
+    --form-element-font-size: var(--step-2);
+    --form-placeholder-font-size: calc(var(--step-2) * 0.65);
+    --form-element-line-height: var(--step-2);
+    --form-icon-size: var(--step-2);
+    --form-button-padding-inline: calc(var(--step-0) * 1.65);
+    --form-text-padding-inline: calc(var(--step-0) * 0.25);
+    --form-button-icon-gap: calc(var(--step-0) * 0.65);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-1) * 2.5);
+    --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
+    --form-toggle-switch-width-adjustment: 0.2rem;
+
+    --form-input-checkbox-radio-button-size: var(--step-2);
+  }
+  [data-size='medium'] {
+    --form-element-font-size: var(--step-3);
+    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
+    --form-element-line-height: var(--step-3);
+    --form-icon-size: var(--step-3);
+    --form-button-padding-inline: calc(var(--step-0) * 1.65);
+    --form-text-padding-inline: calc(var(--step-0) * 0.25);
+    --form-button-icon-gap: calc(var(--step-0) * 0.65);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-1) * 2.75);
+    --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
+    --form-toggle-switch-width-adjustment: 0rem;
+
+    --form-input-checkbox-radio-button-size: var(--step-3);
+  }
+  [data-size='large'] {
+    --form-element-font-size: var(--step-4);
+    --form-placeholder-font-size: calc(var(--step-4) * 0.65);
+    --form-element-line-height: var(--step-4);
+    --form-icon-size: var(--step-4);
+    --form-button-padding-inline: calc(var(--step-0) * 1.75);
+    --form-text-padding-inline: calc(var(--step-0) * 0.25);
+    --form-button-icon-gap: calc(var(--step-0) * 0.75);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-1) * 3);
+    --form-toggle-symbol-size: calc(var(--step-4) * 1.816);
+    --form-toggle-switch-width-adjustment: -0.2rem;
+
+    --form-input-checkbox-radio-button-size: var(--step-4);
+  }
+}

package/assets/styles/forms/variables/_theme.css

@@ -2,68 +2,10 @@
   --font-size: 1.6rem;
   --line-height: calc((var(--font-size) * 2) - 1rem);
 
-  --input-border-radius: 0.4rem;
-  --input-border-width-thin: 0.1rem;
-  --input-border-width-default: 0.2rem;
-  --input-border-width-thick: 0.3rem;
-
-  --input-outline-radius: 0.4rem;
-  --input-outline-width-thin: 0.1rem;
-  --input-outline-width-default: 0.2rem;
-  --input-outline-width-thick: 0.3rem;
-
   --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
 
   --theme-error-surface: var(--red-12);
   --theme-error-text: var(--red-0);
 
-  --theme-form-button-font-size-x-small: 1.4rem;
-  --theme-form-button-font-size-small: 1.4rem;
-  --theme-form-button-font-size-normal: 1.6rem;
-  --theme-form-button-font-size-medium: 1.8rem;
-  --theme-form-button-font-size-large: 2rem;
-
-  /*
-  * Button Padding
-  */
-
-  --theme-form-button-padding-block-x-small: 0.6rem;
-  --theme-form-button-padding-block-small: 0.8rem;
-  --theme-form-button-padding-block-normal: 1rem;
-  --theme-form-button-padding-block-medium: 1.2rem;
-  --theme-form-button-padding-block-large: 1.2rem;
-
-  --theme-form-button-padding-inline-x-small: 1.2rem;
-  --theme-form-button-padding-inline-small: 1.6rem;
-  --theme-form-button-padding-inline-normal: 2rem;
-  --theme-form-button-padding-inline-medium: 2.2rem;
-  --theme-form-button-padding-inline-large: 2.4rem;
-
-  /*
-  * Button Icon Sizes and Gap
-  */
-
-  --theme-form-button-padding-inline-icon-only-x-small: 0.4rem;
-  --theme-form-button-padding-inline-icon-only-small: 0.6rem;
-  --theme-form-button-padding-inline-icon-only-normal: 0.8rem;
-  --theme-form-button-padding-inline-icon-only-medium: 1rem;
-  --theme-form-button-padding-inline-icon-only-large: 1.2rem;
-
-  --theme-form-button-padding-block-icon-only-x-small: 0.4rem;
-  --theme-form-button-padding-block-icon-only-small: 0.4rem;
-  --theme-form-button-padding-block-icon-only-normal: 0.6rem;
-  --theme-form-button-padding-block-icon-only-medium: 0.8rem;
-  --theme-form-button-padding-block-icon-only-large: 1rem;
-
-  --theme-form-button-icon-size-x-small: 1.8rem;
-  --theme-form-button-icon-size-small: 1.8rem;
-  --theme-form-button-icon-size-normal: 1.8rem;
-  --theme-form-button-icon-size-medium: 2rem;
-  --theme-form-button-icon-size-large: 2.2rem;
-
-  --theme-form-button-icon-gap-x-small: var(--theme-form-button-padding-inline-x-small);
-  --theme-form-button-icon-gap-small: var(--theme-form-button-padding-inline-small);
-  --theme-form-button-icon-gap-normal: var(--theme-form-button-padding-inline-normal);
-  --theme-form-button-icon-gap-medium: var(--theme-form-button-padding-inline-medium);
-  --theme-form-button-icon-gap-large: var(--theme-form-button-padding-inline-large);
+  --theme-form-button-font-size-normal: var(--form-element-font-size);
 }

package/assets/styles/forms/variables/index.css

@@ -1 +1,2 @@
 @import './_theme.css';
+@import './_sizes.css';

package/assets/styles/main.css

@@ -2,3 +2,4 @@
 @import './forms';
 @import './utils';
 @import './typography';
+@import './ally';

package/components/functional/pop-over/PopOver.vue

@@ -29,53 +29,50 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style scoped lang="css">
-@position-try --right {
-  inset: auto;
-  top: anchor(top);
-  left: anchor(right);
-}
+@layer popover-setup {
+  @position-try --right {
+    inset: auto;
+    top: anchor(top);
+    left: calc(anchor(right) + 10px);
+  }
 
-@position-try --left {
-  inset: auto;
-  top: anchor(top);
-  right: anchor(left);
-}
+  @position-try --left {
+    inset: auto;
+    top: anchor(top);
+    right: calc(anchor(left) + 10px);
+  }
 
-/* @layer popover-setup { */
-.popover-trigger {
-  anchor-name: v-bind(anchorName);
-}
+  .popover-trigger {
+    anchor-name: v-bind(anchorName);
+  }
 
-dialog {
-  display: none;
-  position: absolute;
-  position-anchor: v-bind(anchorName);
-  margin: 0;
-  inset: auto;
-  bottom: anchor(bottom);
-  left: anchor(right);
-  opacity: 0;
-  transition: opacity 200ms, display 200ms, overlay 200ms;
-  transition-behavior: allow-discrete;
+  dialog {
+    display: none;
+    position: absolute;
+    position-anchor: v-bind(anchorName);
+    margin: 0;
+    inset: auto;
+    top: anchor(top);
+    left: calc(anchor(right) + 10px);
+    opacity: 0;
+    transition: opacity 200ms, display 200ms, overlay 200ms;
+    transition-behavior: allow-discrete;
 
-  position-try-fallbacks: --left, --right;
-  /* position-try-fallbacks: --right; */
+    /* position-try: flip-inline, flip-block, flip-block flip-inline; */
+    /* position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; */
 
-  &:popover-open {
-    display: block;
-    opacity: 1;
+    position-try: --right;
+    position-try-fallbacks: --left;
 
-    @starting-style {
+    &:popover-open {
       display: block;
-      opacity: 0;
+      opacity: 1;
+
+      @starting-style {
+        display: block;
+        opacity: 0;
+      }
     }
   }
 }
-
-/* @position-try --left {
-    inset: auto;
-    top: anchor(bottom);
-    right: anchor(right);
-  } */
-/* } */
 </style>

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
-  modules: ['@nuxt/icon', '@nuxtjs/storybook'],
+  modules: ['@nuxt/icon'],
 
   app: {
     head: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "0.0.33",
+  "version": "0.1.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -15,7 +15,6 @@
     "lint": "eslint .",
     "postinstall": "nuxt prepare .playground",
     "release": "release-it",
-    "storybook": "storybook dev --port 6006 --config-dir .storybook",
     "test": "vitest"
   },
   "files": [
@@ -37,14 +36,8 @@
     "vue": "3.5.13"
   },
   "dependencies": {
-    "@nuxtjs/storybook": "8.3.1",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/vue3": "8.4.7",
     "@vueuse/core": "12.0.0",
     "focus-trap-vue": "4.0.3",
-    "http-proxy-middleware": "3.0.3",
     "modern-normalize": "3.0.1"
   },
   "release-it": {

package/components/presentation/layout-row/stories/LayoutRow.mdx

@@ -1,8 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as LayoutRowStories from './LayoutRow.stories'
-
-<Meta of={LayoutRowStories} />
-
-<Canvas of={LayoutRowStories.Primary} />
-
-<Controls of={LayoutRowStories.Primary} />

package/components/presentation/layout-row/stories/LayoutRow.stories.ts

@@ -1,68 +0,0 @@
-import type { Meta, StoryFn } from '@nuxtjs/storybook';
-
-import LayoutRow from '../LayoutRow.vue';
-
-export default {
-  title: 'Components/UI/LayoutRow',
-  component: LayoutRow,
-  argTypes: {
-    tag: {
-      options: ['div', 'header', 'footer', 'section'],
-      control: { type: 'select' },
-    },
-    variant: {
-      options: [
-        'full',
-        'full-start',
-        'full-end',
-        'popout',
-        'popout-start',
-        'popout-end',
-        'content',
-        'content-start',
-        'content-end',
-        'inset-content',
-        'inset-content-start',
-        'inset-content-end',
-        'full-width',
-        'full-content',
-        'full-content-nopad',
-        'full-content',
-      ],
-      control: { type: 'select' },
-    },
-  },
-} as Meta<typeof LayoutRow>;
-
-const Template: StoryFn<typeof LayoutRow> = (args: any) => ({
-  components: { LayoutRow },
-  setup() {
-    return { args };
-  },
-  template: `
-    <LayoutRow v-bind="args">
-      <template #default>${args.content}</template>
-    </LayoutRow>
-  `,
-  // template: '<LayoutRow v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  tag: 'div',
-  variant: 'full',
-  styleClassPassthrough: ['mbe-20'],
-  content: `
-    <h2 class="heading-2">Full Track (1fr)</h2>
-    <p>
-      Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora.
-      Platea accumsan interdum ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in
-      penatibus torquent tortor. Platea gravida nam; egestas enim nostra ultricies.
-    </p>
-    <p>
-      Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi
-      ullamcorper praesent. Arcu luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class suscipit quisque convallis eget? Dignissim mattis
-      luctus enim habitant porta pretium litora. Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
-    </p>
-  `,
-};