srcdev-nuxt-components 0.0.32 → 0.0.34

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

@@ -30,6 +30,18 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style scoped lang="css">
 @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: calc(anchor(left) + 10px);
+  }
+
   .popover-trigger {
     anchor-name: v-bind(anchorName);
   }
@@ -40,12 +52,16 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     position-anchor: v-bind(anchorName);
     margin: 0;
     inset: auto;
-    bottom: anchor(bottom);
-    left: anchor(right);
+    top: anchor(top);
+    left: calc(anchor(right) + 10px);
     opacity: 0;
     transition: opacity 200ms, display 200ms, overlay 200ms;
     transition-behavior: allow-discrete;
 
+    /* position-try: flip-inline, flip-block, flip-block flip-inline; */
+    /* position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; */
+
+    position-try: --right;
     position-try-fallbacks: --left;
 
     &:popover-open {
@@ -58,11 +74,5 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       }
     }
   }
-
-  @position-try --left {
-    inset: auto;
-    top: anchor(bottom);
-    right: anchor(right);
-  }
 }
 </style>

package/package.json

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