@toife/vue 3.0.5 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,

package/src/components/action/action.composable.ts

@@ -7,7 +7,6 @@ const visible = ref(false);
 export const useAction = () => {
   const open = (props: ActionComposableProps) => {
     data.value = props;
-    // Defer showing one frame so Present/transition hooks see a clean open cycle
     setTimeout(() => {
       visible.value = true;
     }, 50);

package/src/components/avatar/avatar.scss

@@ -6,10 +6,13 @@ $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property - layer: avatar
 $border-radius: sass.fn-naming-var("border-radius");
-$avatar-background-color: sass.fn-naming-var("avatar", "background-color");
+$border-width: sass.fn-naming-var("stroke", "width");
 $width: sass.fn-naming-var("width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$avatar-background-color: sass.fn-naming-var("avatar", "background-color");
+$avatar-border-color: sass.fn-naming-var("avatar", "border-color");
+
 // Avatar default is circle
 // With props square then is square
 .#{$avatar} {
@@ -28,8 +31,13 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     box-shadow #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
   display: inline-block;
+  border: #{$border-width} solid transparent;
 
   &.#{$shape-pill} {
     border-radius: 50%;
   }
+
+  &.divider {
+    border: #{$border-width} solid rgb(#{$avatar-border-color});
+  }
 }

package/src/components/avatar/avatar.type.ts

@@ -3,4 +3,6 @@ export type AvatarProps = {
   shape?: string;
   size?: string | number;
   src?: string;
+  role?: string;
+  divider?: boolean;
 };

package/src/components/avatar/avatar.vue

@@ -11,6 +11,8 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: "22px",
   src: "",
+  role: undefined,
+  divider: undefined,
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
@@ -18,7 +20,10 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 // ----------------------------------------------------------------------------
 const avatarAttrs = computed(() => {
   const shape = props?.shape || appState?.shape.value || "";
-  const role = appState?.role.value || "";
+  const role = props?.role || appState?.role.value || "";
+  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+  const size = props.size + (typeof props.size === "number" ? "px" : "");
+  const backgroundImage = `url(${props.src})`;
 
   return {
     class: [
@@ -26,10 +31,13 @@ const avatarAttrs = computed(() => {
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("avatar"),
+      {
+        divider: divider,
+      },
     ],
     style: {
-      [property("width")]: props.size + (typeof props.size === "number" ? "px" : ""),
-      backgroundImage: `url(${props.src})`,
+      [property("width")]: size,
+      backgroundImage: backgroundImage,
     },
   };
 });

package/src/components/button/button.scss

@@ -25,6 +25,8 @@ $button-background-color-focus: sass.fn-naming-var("button", "background-color",
 $button-background-color-active: sass.fn-naming-var("button", "background-color", "active");
 $button-background-color-disabled: sass.fn-naming-var("button", "background-color", "disabled");
 
+$button-box-shadow-color-focus: sass.fn-naming-var("button", "box-shadow-color", "focus");
+
 $size-font-size: sass.fn-naming-var("font-size");
 $size-height: sass.fn-naming-var("height");
 $size-coefficient-x: sass.fn-naming-var("coefficient-x");
@@ -69,7 +71,7 @@ $size-line-height: sass.fn-naming-var("line-height");
     background-color: rgb(#{$button-background-color-focus});
 
     &.shadow {
-      box-shadow: 0 0 0 0.25rem rgb(#{$button-border-color}, 0.25);
+      box-shadow: 0 0 0 0.25rem rgb(#{$button-box-shadow-color-focus}, 0.25);
     }
   }
 

package/src/components/checkbox/checkbox.scss

@@ -7,16 +7,25 @@ $shape-rounded: sass.fn-naming-prefix("shape-rounded");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Properties - layer: item
-$checkbox-background-color: sass.fn-naming-var("checkbox", "background-color");
 $checkbox-background-color-hover: sass.fn-naming-var("checkbox", "background-color", "hover");
-$checkbox-background-color-inactive: sass.fn-naming-var("checkbox", "background-color", "inactive");
-$checkbox-background-color-contrast: sass.fn-naming-var("checkbox", "background-color", "contrast");
+$checkbox-background-color-focus: sass.fn-naming-var("checkbox", "background-color", "focus");
+$checkbox-background-color-unchecked: sass.fn-naming-var(
+  "checkbox",
+  "background-color",
+  "unchecked"
+);
+$checkbox-background-color-checked: sass.fn-naming-var("checkbox", "background-color", "checked");
 $checkbox-background-color-disabled: sass.fn-naming-var("checkbox", "background-color", "disabled");
 
 $checkbox-color: sass.fn-naming-var("checkbox", "color");
 
-$checkbox-border-color: sass.fn-naming-var("checkbox", "border-color");
-$checkbox-border-color-inactive: sass.fn-naming-var("checkbox", "border-color", "inactive");
+$checkbox-border-color-hover: sass.fn-naming-var("checkbox", "border-color", "hover");
+$checkbox-border-color-focus: sass.fn-naming-var("checkbox", "border-color", "focus");
+$checkbox-border-color-checked: sass.fn-naming-var("checkbox", "border-color", "checked");
+$checkbox-border-color-unchecked: sass.fn-naming-var("checkbox", "border-color", "unchecked");
+$checkbox-border-color-disabled: sass.fn-naming-var("checkbox", "border-color", "disabled");
+
+$checkbox-box-shadow-color-focus: sass.fn-naming-var("checkbox", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -37,7 +46,7 @@ $border-radius: sass.fn-naming-var("border-radius");
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$checkbox-border-color-inactive});
+    border: 1px solid rgb(#{$checkbox-color});
     background-color: transparent;
     transition:
       box-shadow #{$transition-duration} ease,
@@ -53,7 +62,7 @@ $border-radius: sass.fn-naming-var("border-radius");
       content: "";
       width: 0.2rem;
       height: 0.5rem;
-      border: solid rgb(#{$checkbox-background-color-contrast});
+      border: solid rgb(#{$checkbox-color});
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
       transform-origin: center;
@@ -77,13 +86,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &:not(.on) {
     .#{$checkbox-icon} {
       background-color: transparent;
-      border-color: rgb(#{$checkbox-border-color-inactive});
+      border-color: rgb(#{$checkbox-border-color-unchecked});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$checkbox-icon} {
-        border-color: rgb(#{$checkbox-border-color});
-        background-color: rgba(#{$checkbox-background-color-hover}, 0.2);
+        border-color: rgb(#{$checkbox-border-color-hover});
       }
     }
   }
@@ -91,8 +99,8 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.on {
     &.fill {
       .#{$checkbox-icon} {
-        background-color: rgb(#{$checkbox-background-color});
-        border-color: rgb(#{$checkbox-background-color});
+        background-color: rgb(#{$checkbox-background-color-checked});
+        border-color: rgb(#{$checkbox-border-color-checked});
 
         &::after {
           transform: rotate(45deg) scale(1);
@@ -102,11 +110,11 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.outline {
       .#{$checkbox-icon} {
-        border-color: rgb(#{$checkbox-background-color});
+        border-color: rgb(#{$checkbox-border-color-checked});
 
         &::after {
           transform: rotate(45deg) scale(1);
-          border-color: rgb(#{$checkbox-background-color});
+          border-color: rgb(#{$checkbox-background-color-checked});
         }
       }
     }
@@ -119,7 +127,7 @@ $border-radius: sass.fn-naming-var("border-radius");
     &.on {
       .#{$checkbox-icon} {
         background-color: rgb(#{$checkbox-background-color-disabled});
-        border-color: rgb(#{$checkbox-background-color-disabled});
+        border-color: rgb(#{$checkbox-border-color-disabled});
       }
     }
   }
@@ -131,8 +139,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.focus {
     &.shadow {
       .#{$checkbox-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$checkbox-border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$checkbox-box-shadow-color-focus}, 0.25);
       }
     }
+
+    .#{$checkbox-icon} {
+      border-color: rgb(#{$checkbox-border-color-focus});
+    }
   }
 }

package/src/components/checkbox/checkbox.vue

@@ -32,7 +32,7 @@ const checkboxAttrs = computed(() => {
   return {
     class: [
       withPrefix(["layer", "checkbox"]),
-      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
+      withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("checkbox"),
       props.variant,
@@ -40,7 +40,7 @@ const checkboxAttrs = computed(() => {
         on: props.modelValue,
         disabled: props.disabled,
         readonly: props.readonly,
-        shadow,
+        shadow: shadow && !props.disabled && isFocused.value,
         focus: isFocused.value,
       },
     ],

package/src/components/field/outline/outline.scss

@@ -68,6 +68,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     font-size: #{$size-font-size};
     line-height: #{$size-line-height};
     box-sizing: border-box;
+    width: 100%;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,

package/src/components/gesture-indicator/gesture-indicator.type.ts

@@ -1,4 +1,5 @@
 // Type definitions
 export type GestureIndicatorProps = {
   placement?: string;
+  role?: string;
 };

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -10,13 +10,15 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<GestureIndicatorProps>(), {
   placement: "bottom",
+  role: undefined,
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
 // Computed properties
 // ----------------------------------------------------------------------------
 const gestureIndicatorAttrs = computed(() => {
-  const role = appState?.role.value || "";
+  const role = props.role || appState?.role.value || "";
+
   return {
     class: [
       withPrefix(["layer", "gesture-indicator"]),

package/src/components/radio/radio/radio.scss

@@ -4,20 +4,22 @@
 $radio: sass.fn-naming-prefix("radio");
 $radio-icon: sass.fn-naming-prefix("radio-icon");
 
-// Property name - layer: radio (states align with button + checkbox: inactive + contrast)
-$radio-background-color: sass.fn-naming-var("radio", "background-color");
+// Properties - layer: item
 $radio-background-color-hover: sass.fn-naming-var("radio", "background-color", "hover");
 $radio-background-color-focus: sass.fn-naming-var("radio", "background-color", "focus");
-$radio-background-color-active: sass.fn-naming-var("radio", "background-color", "active");
+$radio-background-color-unchecked: sass.fn-naming-var("radio", "background-color", "unchecked");
+$radio-background-color-checked: sass.fn-naming-var("radio", "background-color", "checked");
 $radio-background-color-disabled: sass.fn-naming-var("radio", "background-color", "disabled");
-$radio-background-color-contrast: sass.fn-naming-var("radio", "background-color", "contrast");
 
-$radio-border-color: sass.fn-naming-var("radio", "border-color");
+$radio-color: sass.fn-naming-var("radio", "color");
+
 $radio-border-color-hover: sass.fn-naming-var("radio", "border-color", "hover");
 $radio-border-color-focus: sass.fn-naming-var("radio", "border-color", "focus");
-$radio-border-color-active: sass.fn-naming-var("radio", "border-color", "active");
+$radio-border-color-checked: sass.fn-naming-var("radio", "border-color", "checked");
+$radio-border-color-unchecked: sass.fn-naming-var("radio", "border-color", "unchecked");
 $radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disabled");
-$radio-border-color-inactive: sass.fn-naming-var("radio", "border-color", "inactive");
+
+$radio-box-shadow-color-focus: sass.fn-naming-var("radio", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -38,7 +40,7 @@ $border-radius: sass.fn-naming-var("border-radius");
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$radio-border-color-inactive});
+    border: 1px solid rgb(#{$radio-color});
     background-color: transparent;
     transition:
       box-shadow #{$transition-duration} ease,
@@ -55,8 +57,9 @@ $border-radius: sass.fn-naming-var("border-radius");
       width: 0.5rem;
       height: 0.5rem;
       border-radius: 50%;
-      background-color: rgb(#{$radio-background-color-contrast});
+      background-color: rgb(#{$radio-color});
       transform: scale(0);
+      transform-origin: center;
       transition:
         transform #{$transition-duration} ease,
         background-color #{$transition-duration} ease,
@@ -68,13 +71,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &:not(.on) {
     .#{$radio-icon} {
       background-color: transparent;
-      border-color: rgb(#{$radio-border-color-inactive});
+      border-color: rgb(#{$radio-border-color-unchecked});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$radio-icon} {
         border-color: rgb(#{$radio-border-color-hover});
-        background-color: rgba(#{$radio-background-color-hover}, 0.2);
       }
     }
   }
@@ -82,8 +84,8 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.on {
     &.fill {
       .#{$radio-icon} {
-        background-color: rgb(#{$radio-background-color});
-        border-color: rgb(#{$radio-background-color});
+        background-color: rgb(#{$radio-background-color-checked});
+        border-color: rgb(#{$radio-border-color-checked});
 
         &::after {
           transform: scale(1);
@@ -93,12 +95,11 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.outline {
       .#{$radio-icon} {
-        background-color: transparent;
-        border-color: rgb(#{$radio-background-color});
+        border-color: rgb(#{$radio-border-color-checked});
 
         &::after {
-          transform: scale(1.5);
-          background-color: rgb(#{$radio-background-color});
+          transform: scale(1);
+          background-color: rgb(#{$radio-background-color-checked});
         }
       }
     }
@@ -123,8 +124,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.focus {
     &.shadow {
       .#{$radio-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$radio-border-color-focus}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$radio-box-shadow-color-focus}, 0.25);
       }
     }
+
+    .#{$radio-icon} {
+      border-color: rgb(#{$radio-border-color-focus});
+    }
   }
 }

package/src/components/radio/radio/radio.vue

@@ -25,14 +25,6 @@ const isFocused = ref(false);
 
 // Computed properties
 // ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || radioGroupState?.role.value || appState?.role.value || "";
-});
-
-const variant = computed(() => {
-  return props.variant || radioGroupState?.variant.value || "";
-});
-
 const disabled = computed(() => {
   return props.disabled || (radioGroupState?.disabled.value ?? false);
 });
@@ -41,29 +33,23 @@ const readonly = computed(() => {
   return props.readonly || (radioGroupState?.readonly.value ?? false);
 });
 
-const isChecked = computed(() => {
-  return radioGroupState?.modelValue.value === props.value;
-});
-
 const radioAttrs = computed(() => {
-  const shadow =
-    (props?.shadow !== undefined ? props.shadow : radioGroupState?.shadow.value) ?? false;
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+  const role = props.role || radioGroupState?.role.value || appState?.role.value || "";
+  const variant = props.variant || radioGroupState?.variant.value || "";
+  const isChecked = radioGroupState?.modelValue.value === props.value;
+
   return {
     class: [
       withPrefix(["layer", "radio"]),
-      withPrefix([
-        "role",
-        (isChecked.value && !disabled.value
-          ? role.value || radioGroupState?.role.value
-          : appState?.role.value) ?? "",
-      ]),
+      withPrefix(["role", role]),
       withPrefix("radio"),
-      variant.value,
+      variant,
       {
-        on: isChecked.value,
+        on: isChecked,
         disabled: disabled.value,
         readonly: readonly.value,
-        shadow,
+        shadow: shadow && !props.disabled && isFocused.value,
         focus: isFocused.value,
       },
     ],

package/src/components/switch/switch.scss

@@ -8,13 +8,15 @@ $shape-pill: sass.fn-naming-prefix("shape-pill");
 $switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
 
 // Property name - layer: switch (track + thumb; states like button + inactive)
-$switch-background-color: sass.fn-naming-var("switch", "background-color");
-$switch-background-color-hover: sass.fn-naming-var("switch", "background-color", "hover");
-$switch-background-color-inactive: sass.fn-naming-var("switch", "background-color", "inactive");
+$switch-background-color-off: sass.fn-naming-var("switch", "background-color", "off");
+$switch-background-color-on: sass.fn-naming-var("switch", "background-color", "on");
 $switch-background-color-disabled: sass.fn-naming-var("switch", "background-color", "disabled");
-$switch-background-color-contrast: sass.fn-naming-var("switch", "background-color", "contrast");
 
-$switch-border-color-focus: sass.fn-naming-var("switch", "border-color", "focus");
+$switch-color-on: sass.fn-naming-var("switch", "color", "on");
+$switch-color-off: sass.fn-naming-var("switch", "color", "off");
+$switch-color-disabled: sass.fn-naming-var("switch", "color", "disabled");
+
+$switch-box-shadow-color-focus: sass.fn-naming-var("switch", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -31,7 +33,6 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
     height: 1.5rem;
     aspect-ratio: 11/6;
     position: relative;
-    overflow: hidden;
     transition:
       background-color #{$transition-duration} ease,
       color #{$transition-duration} ease,
@@ -44,7 +45,6 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
       height: calc(100% - 0.3rem);
       position: absolute;
       top: 0;
-      background-color: rgb(#{$switch-background-color-contrast});
       border-radius: #{$border-radius};
       aspect-ratio: 1/1;
       margin: 0.15rem;
@@ -76,6 +76,10 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
       background-color: rgb(#{$switch-background-color-disabled});
       cursor: not-allowed;
       opacity: 0.3;
+
+      .#{$switch-icon} {
+        background-color: rgb(#{$switch-color-disabled});
+      }
     }
   }
 
@@ -89,26 +93,24 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 
   &:not(.on) {
     .#{$switch} {
-      background-color: rgb(#{$switch-background-color-inactive});
+      background-color: rgb(#{$switch-background-color-off});
 
       .#{$switch-icon} {
+        background-color: rgb(#{$switch-color-off});
         left: 0;
       }
-
-      &:not(.disabled):not(.readonly):hover {
-        background-color: rgb(#{$switch-background-color-hover});
-      }
     }
   }
 
   &.on {
     .#{$switch} {
-      background-color: rgb(#{$switch-background-color});
+      background-color: rgb(#{$switch-background-color-on});
 
       .#{$switch-icon} {
         right: 0;
         animation: shrink #{$transition-duration} linear;
         animation-fill-mode: forwards;
+        background-color: rgb(#{$switch-color-on});
       }
     }
   }
@@ -116,7 +118,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
   &.focus {
     &.shadow {
       .#{$switch} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$switch-border-color-focus}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$switch-box-shadow-color-focus}, 0.25);
       }
     }
   }

package/src/components/switch/switch.vue

@@ -30,7 +30,7 @@ const switchWrapperAttrs = computed(() => {
       {
         disabled: props.disabled,
         readonly: props.readonly,
-        shadow,
+        shadow: shadow && !props.disabled && isFocused.value,
         focus: isFocused.value,
         on: props.modelValue,
       },
@@ -45,7 +45,7 @@ const switchAttrs = computed(() => {
   return {
     class: [
       withPrefix(["layer", "switch"]),
-      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
+      withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("switch"),
     ],