@toife/vue 3.0.3 → 3.0.5

package/src/components/checkbox/checkbox.html

@@ -1,7 +1,6 @@
 <div
   v-bind="checkboxAttrs"
   :tabindex="disabled ? -1 : 0"
-  role="checkbox"
   :aria-checked="props.modelValue"
   @click="onCheckbox"
   @focus="onFocus"

package/src/components/checkbox/checkbox.scss

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

package/src/components/checkbox/checkbox.vue

@@ -6,8 +6,8 @@ import type { CheckboxProps, CheckboxEmit } from "./checkbox.type";
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<CheckboxProps>(), {
   modelValue: false,
   disabled: false,
@@ -18,12 +18,12 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
 const emit = defineEmits<CheckboxEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isFocused = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const checkboxAttrs = computed(() => {
   const baseRole = appState?.role.value || "";
   const role = props.role || baseRole;
@@ -51,8 +51,8 @@ const checkboxIconAttrs = {
   class: [withPrefix("checkbox-icon")],
 } as const;
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onCheckbox = () => {
   if (props.disabled || props.readonly) return;
   emit("update:modelValue", !props.modelValue);

package/src/components/collapse/collapse.scss

@@ -6,21 +6,21 @@ $collapse-trigger: sass.fn-naming-prefix("collapse-trigger");
 $collapse-content: sass.fn-naming-prefix("collapse-content");
 $collapse-content-inner: sass.fn-naming-prefix("collapse-content-inner");
 
-// Property
-$collapse-height: sass.fn-naming-dvar("collapse-height", 0);
+// Property name - layer: collapse
+$collapse-height: sass.fn-naming-dvar(("collapse", "height"), 0);
 $collapse-duration: sass.fn-naming-dvar(
-  "collapse-duration",
+  ("collapse", "duration"),
   sass.fn-naming-var("motion", "duration")
 );
 
-$background-color: sass.fn-naming-var("collapse", "background-color");
-$color: sass.fn-naming-var("collapse", "color");
+$collapse-background-color: sass.fn-naming-var("collapse", "background-color");
+$collapse-color: sass.fn-naming-var("collapse", "color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 // Collapse
 .#{$collapse} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$collapse-background-color});
+  color: rgb(#{$collapse-color});
   transition:
     background-color #{$transition-duration} ease,
     color #{$transition-duration} ease;

package/src/components/collapse/collapse.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type CollapseProps = {
   modelValue?: boolean;
   duration?: number;

package/src/components/collapse/collapse.vue

@@ -6,8 +6,8 @@ import type { CollapseEmit, CollapseProps } from "./collapse.type";
 import { withPrefix, property } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<CollapseProps>(), {
   modelValue: false,
   duration: undefined,
@@ -17,14 +17,14 @@ const props = withDefaults(defineProps<CollapseProps>(), {
 const emit = defineEmits<CollapseEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const contentRef = ref<HTMLElement | null>(null);
 const contentHeight = ref(0);
 const isOpen = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const role = computed(() => {
   return props.role ?? appState?.role.value ?? "";
 });
@@ -67,8 +67,8 @@ const contentAttrs = computed(() => {
 
 const contentInnerClass = computed(() => withPrefix("collapse-content-inner"));
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const measureContent = () => {
   if (contentRef.value) {
     contentHeight.value = contentRef.value.scrollHeight;
@@ -85,15 +85,8 @@ const onTransitionEnd = () => {
   // Optional: hook for transition end (e.g. a11y)
 };
 
-/// Lifecycle
-/// ------------------------------------------------------------
-onMounted(async () => {
-  if (isOpen.value) {
-    await nextTick();
-    measureContent();
-  }
-});
-
+// Lifecycle
+// ----------------------------------------------------------------------------
 watch(
   () => props.modelValue,
   async (open) => {
@@ -125,7 +118,10 @@ watch(
   }
 );
 
-onMounted(() => {
-  isOpen.value = Boolean(props.modelValue);
+onMounted(async () => {
+  await nextTick();
+  if (isOpen.value) {
+    measureContent();
+  }
 });
 </script>

package/src/components/container/container.vue

@@ -3,6 +3,7 @@
 <script lang="ts" setup>
 import { withPrefix } from "../../utils";
 
+// Static layout wrapper classes
 const containerAttrs = {
   class: [withPrefix("container")],
 } as const;

package/src/components/decision-modal/decision-modal.composable.ts

@@ -7,6 +7,7 @@ const visible = ref(false);
 export const useDecisionModal = () => {
   const open = (props: DecisionModalComposableProps) => {
     data.value = props;
+    // Defer visibility so the modal mounts with props before entering the open transition
     setTimeout(() => {
       visible.value = true;
     }, 50);

package/src/components/decision-modal/decision-modal.scss

@@ -9,8 +9,10 @@ $button: sass.fn-naming-prefix("button");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property name - layer: decision-modal
+$decision-modal-background-color: sass.fn-naming-var("decision-modal", "background-color");
+$decision-modal-border-color: sass.fn-naming-var("decision-modal", "border-color");
+
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("decision-modal", "background-color");
 $width: sass.fn-naming-var("viewport", "width");
 $max-width: sass.fn-naming-var("overlay", "max-width");
 $padding-y: sass.fn-naming-var("spacing", "y");
@@ -19,12 +21,11 @@ $margin-y: sass.fn-naming-var("spacing", "y");
 $margin-x: sass.fn-naming-var("spacing", "x");
 $animation-duration: sass.fn-naming-var("motion", "duration");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("decision-modal", "border-color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$decision-modal} {
   // Styles
-  background-color: rgb(#{$background-color});
+  background-color: rgb(#{$decision-modal-background-color});
   width: #{$width};
   max-width: #{$max-width};
   overflow: hidden;
@@ -103,7 +104,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   &.divider {
     .#{$decision-modal-header},
     .#{$decision-modal-footer} {
-      border-color: rgb(#{$border-color});
+      border-color: rgb(#{$decision-modal-border-color});
     }
   }
 

package/src/components/decision-modal/decision-modal.type.ts

@@ -1,6 +1,6 @@
 import { ButtonVariant } from "../button/button.type";
 
-// Define
+// Type definitions
 export type DecisionModalButton = {
   text?: string;
   role?: string;

package/src/components/decision-modal/decision-modal.vue

@@ -12,10 +12,8 @@ import {
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-const emit = defineEmits<DecisionModalEmit>();
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<DecisionModalProps>(), {
   placement: "center",
   keepalive: false,
@@ -25,13 +23,15 @@ const props = withDefaults(defineProps<DecisionModalProps>(), {
   divider: undefined,
   flow: "row",
 });
+const emit = defineEmits<DecisionModalEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const pop = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const shape = computed(() => {
   return props.shape || appState?.shape.value || "";
 });
@@ -77,8 +77,8 @@ const decisionModalFooterAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onClose = (val: string) => {
   if (props.dismiss && props.dismiss.includes(val)) {
     emit("close", val);
@@ -92,7 +92,7 @@ const onClose = (val: string) => {
 
 const onChoose = (btn: DecisionModalButton) => {
   emit("close");
-  btn.handler && btn.handler();
+  btn.handler?.();
   emit("choose", btn);
 };
 </script>

package/src/components/divider/divider.scss

@@ -3,8 +3,8 @@
 // Class
 $divider: sass.fn-naming-prefix("divider");
 
-// Property - layer: stroke
-$border-color: sass.fn-naming-var("divider", "border-color");
+// Property name - layer: divider
+$divider-border-color: sass.fn-naming-var("divider", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
@@ -19,11 +19,11 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   &.horizontal {
     width: 100%;
-    border-bottom: #{$border-width} solid rgb(#{$border-color});
+    border-bottom: #{$border-width} solid rgb(#{$divider-border-color});
   }
 
   &.vertical {
     height: 100%;
-    border-right: #{$border-width} solid rgb(#{$border-color});
+    border-right: #{$border-width} solid rgb(#{$divider-border-color});
   }
 }

package/src/components/divider/divider.vue

@@ -6,15 +6,15 @@ import { type DividerProps } from "./divider.type";
 import { computed, inject } from "vue";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<DividerProps>(), {
   orientation: "horizontal",
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const dividerAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   return {

package/src/components/field/field.type.ts

@@ -4,7 +4,7 @@ export type FieldVariant = "outline" | "fill" | "underline";
 export type FieldSize = "small" | "standard" | "large";
 export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
 
-// Define
+// Type definitions
 export type FieldProps = {
   // Wrapper
   modelValue?: string;

package/src/components/field/field.vue

@@ -6,8 +6,8 @@ import type { FieldEmit } from "./field.type";
 import { OutlineField } from "./outline";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FieldProps>(), {
   modelValue: "",
   type: "text",
@@ -25,8 +25,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
 const emit = defineEmits<FieldEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const role = computed(() => {
   return props.role || appState?.role.value || "";
 });
@@ -57,10 +57,11 @@ const fieldAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onInput = (event: Event) => {
   let raw = "";
+  // Outline variant uses contenteditable for non-password types; password uses a real input
   if (props.type !== "password") {
     raw = (event.target as HTMLElement).innerText;
   } else {

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

@@ -9,14 +9,15 @@ $field-help: sass.fn-naming-prefix("field-help");
 $field-direction-left: sass.fn-naming-prefix("direction", "left");
 $field-direction-right: sass.fn-naming-prefix("direction", "right");
 
-// Property name
+// Property name - layer: field
+$field-border-color: sass.fn-naming-var("field", "border-color");
+$field-background-color: sass.fn-naming-var("field", "background-color");
+$field-line: sass.fn-naming-var("field", "line");
+$field-max-line: sass.fn-naming-var("field", "max-line");
+
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("field", "border-color");
-$role-color: sass.fn-naming-var("field", "background-color");
 $app-color: sass.fn-naming-var("app", "color");
-$line: sass.fn-naming-var("field", "line");
-$max-line: sass.fn-naming-var("field", "max-line");
 
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
@@ -41,7 +42,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       background-color #{$transition-duration} ease,
       color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease;
-    border-color: rgb(#{$border-color});
+    border-color: rgb(#{$field-border-color});
     border-radius: #{$border-radius};
     border-width: #{$border-width};
     border-style: solid;
@@ -58,8 +59,8 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     position: relative;
     background-color: transparent;
     z-index: 2;
-    min-height: calc(#{$line} * #{$size-height} - 2 * #{$border-width});
-    max-height: calc(#{$max-line} * #{$size-height} - 2 * #{$border-width});
+    min-height: calc(#{$field-line} * #{$size-height} - 2 * #{$border-width});
+    max-height: calc(#{$field-max-line} * #{$size-height} - 2 * #{$border-width});
     color: rgb(#{$app-color});
     caret-color: rgb(#{$app-color});
     border: none;
@@ -99,7 +100,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   // Message
   .#{$field-message} {
-    color: rgb(#{$role-color});
+    color: rgb(#{$field-background-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:
@@ -126,15 +127,15 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   // State
   &.active {
     .#{$field-content} {
-      border-color: rgb(#{$border-color});
-      box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$border-color});
+      border-color: rgb(#{$field-border-color});
+      box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$field-border-color});
     }
   }
 
   &.focus {
     &.shadow {
       .#{$field-content} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$field-border-color}, 0.25);
       }
     }
   }

package/src/components/field/outline/outline.vue

@@ -5,8 +5,8 @@ import { computed, nextTick, ref, watch } from "vue";
 import type { FieldProps, FieldEmit } from "../field.type";
 import { property, withPrefix } from "../../../utils";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FieldProps>(), {
   modelValue: "",
   type: "text",
@@ -22,15 +22,15 @@ const props = withDefaults(defineProps<FieldProps>(), {
 });
 const emit = defineEmits<FieldEmit>();
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isFocus = ref(false);
 const contentRef = ref<HTMLElement>();
 const caret = ref(0);
 const isComposing = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const content = computed(() => {
   return props.value || props.modelValue;
 });
@@ -87,8 +87,8 @@ const fieldHelpAttrs = computed(() => ({
   class: [withPrefix("field-help")],
 }));
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const isBr = (node: Node): node is HTMLBRElement =>
   node.nodeType === 1 && (node as HTMLElement).tagName === "BR";
 
@@ -226,8 +226,8 @@ const onBeforeinput = (ev: Event) => {
   emit("beforeinput", ev);
 };
 
-/// Lifecycle
-/// ------------------------------------------------------------
+// Lifecycle
+// ----------------------------------------------------------------------------
 watch(
   () => content.value,
   async (val) => {

package/src/components/form-group/form-group.vue

@@ -5,14 +5,14 @@ import { withPrefix } from "../../utils";
 import { computed } from "vue";
 import { type FormGroupProps } from "./form-group.type";
 
-/// Defined
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FormGroupProps>(), {
   orientation: "horizontal",
 });
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const formGroupAttrs = computed(() => {
   return {
     class: [withPrefix("form-group"), props.orientation],

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

@@ -4,11 +4,11 @@
 $gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
 
 // Property name - layer: gesture-indicator
-$border-color: sass.fn-naming-var("gesture-indicator", "border-color");
+$gesture-indicator-border-color: sass.fn-naming-var("gesture-indicator", "border-color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$gesture-indicator} {
-  background-color: rgb(#{$border-color});
+  background-color: rgb(#{$gesture-indicator-border-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

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

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

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

@@ -6,15 +6,15 @@ import { type GestureIndicatorProps } from "./gesture-indicator.type";
 import { computed, inject } from "vue";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<GestureIndicatorProps>(), {
   placement: "bottom",
 });
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const gestureIndicatorAttrs = computed(() => {
   const role = appState?.role.value || "";
   return {