@toife/vue 3.0.5 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,
@@ -31,7 +31,6 @@
   },
   "peerDependencies": {
     "@toife/gesture": "^1.1.4",
-    "@toife/sass-layer-generator": "^1.0.9",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
@@ -48,7 +47,6 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.4",
     "@commitlint/config-conventional": "^20.4.4",
-    "@toife/sass-layer-generator": "^1.0.9",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -62,6 +60,7 @@
   },
   "packageManager": "yarn@4.12.0",
   "dependencies": {
-    "@toife/gesture": "^1.1.4"
+    "@toife/gesture": "^1.1.4",
+    "@toife/sass-layer-generator": "^1.1.0"
   }
 }

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/card/card/card.vue

@@ -46,7 +46,7 @@ const cardAttrs = computed(() => {
 
 const cardProviderState = computed(() => {
   return {
-    role: props.role,
+    role: role.value,
     shape: shape.value,
     divider: divider.value,
   };

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/decision-modal/decision-modal.vue

@@ -36,19 +36,17 @@ const shape = computed(() => {
   return props.shape || appState?.shape.value || "";
 });
 
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
 const divider = computed(() => {
   return (props.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
 });
 
 const decisionModalAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+
   return {
     class: [
       withPrefix(["layer", "decision-modal"]),
-      withPrefix(["role", role.value]),
+      withPrefix(["role", role]),
       withPrefix(["shape", shape.value]),
       withPrefix("decision-modal"),
       {

package/src/components/dropdown/dropdown.html

@@ -0,0 +1,6 @@
+<div ref="rootRef" v-bind="wrapperAttrs">
+  <slot name="trigger" :toggle="toggle" :isOpen="isOpen" />
+  <div v-show="isOpen" v-bind="panelAttrs">
+    <slot />
+  </div>
+</div>

package/src/components/dropdown/dropdown.scss

@@ -0,0 +1,74 @@
+@use "@toife/sass-layer-generator" as sass;
+
+$dropdown: sass.fn-naming-prefix("dropdown");
+$dropdown-panel: sass.fn-naming-prefix("dropdown-panel");
+
+$dropdown-border-color: sass.fn-naming-var("dropdown", "border-color");
+$dropdown-background-color: sass.fn-naming-var("dropdown", "background-color");
+$dropdown-color: sass.fn-naming-var("dropdown", "color");
+$border-radius: sass.fn-naming-var("border-radius");
+$border-width: sass.fn-naming-var("stroke", "width");
+$spacing-x: sass.fn-naming-var("spacing", "x");
+$spacing-y: sass.fn-naming-var("spacing", "y");
+$size-font-size: sass.fn-naming-var("font-size");
+$size-line-height: sass.fn-naming-var("line-height");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$dropdown} {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.#{$dropdown-panel} {
+  position: absolute;
+  z-index: 20;
+  min-width: 100%;
+  box-sizing: border-box;
+  margin-top: calc(#{$spacing-y} * 0.25);
+  margin-bottom: calc(#{$spacing-y} * 0.25);
+  padding: calc(#{$spacing-y} * 0.5) 0;
+  border-radius: #{$border-radius};
+  border-width: #{$border-width};
+  border-style: solid;
+  border-color: rgb(#{$dropdown-border-color});
+  background-color: rgb(#{$dropdown-background-color});
+  color: rgb(#{$dropdown-color});
+  font-size: #{$size-font-size};
+  line-height: #{$size-line-height};
+  box-shadow: 0 #{$border-width} #{$spacing-y} rgb(#{$dropdown-border-color}, 0.12);
+  max-height: min(50vh, 16rem);
+  overflow-y: auto;
+  transition:
+    border-color #{$transition-duration} ease,
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    box-shadow #{$transition-duration} ease;
+
+  &.bottom-start {
+    top: 100%;
+    left: 0;
+  }
+
+  &.bottom-end {
+    top: 100%;
+    right: 0;
+    left: auto;
+  }
+
+  &.top-start {
+    bottom: 100%;
+    left: 0;
+  }
+
+  &.top-end {
+    bottom: 100%;
+    right: 0;
+    left: auto;
+  }
+}

package/src/components/dropdown/dropdown.type.ts

@@ -0,0 +1,19 @@
+import type { AppDirection } from "../app";
+
+export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+
+export type DropdownProps = {
+  modelValue?: boolean;
+  disabled?: boolean;
+  placement?: DropdownPlacement;
+  role?: string;
+  shadow?: boolean;
+  shape?: string;
+  direction?: AppDirection;
+};
+
+export type DropdownEmit = {
+  (e: "update:modelValue", open: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+};

package/src/components/dropdown/dropdown.vue

@@ -0,0 +1,109 @@
+<style lang="scss" src="./dropdown.scss" scoped></style>
+<template src="./dropdown.html"></template>
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
+import type { DropdownEmit, DropdownProps } from "./dropdown.type";
+import { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<DropdownProps>(), {
+  modelValue: false,
+  disabled: false,
+  placement: "bottom-start",
+  role: undefined,
+  shadow: undefined,
+  shape: undefined,
+  direction: undefined,
+});
+const emit = defineEmits<DropdownEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const rootRef = ref<HTMLElement | null>(null);
+const isOpen = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const wrapperAttrs = computed(() => {
+  const role = props.role ?? appState?.role.value ?? "";
+  const shadow = props.shadow ?? appState?.shadow.value ?? false;
+  const shape = props.shape ?? appState?.shape.value ?? "";
+
+  return {
+    class: [
+      withPrefix(["layer", "dropdown"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("dropdown"),
+      {
+        open: isOpen.value,
+        disabled: props.disabled,
+        shadow: shadow,
+      },
+    ],
+  };
+});
+
+const panelAttrs = computed(() => {
+  return {
+    class: [withPrefix("dropdown-panel"), props.placement],
+  };
+});
+
+// Methods
+// ----------------------------------------------------------------------------
+const toggle = () => {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+  emit("update:modelValue", isOpen.value);
+};
+
+const close = () => {
+  if (!isOpen.value) return;
+  isOpen.value = false;
+  emit("update:modelValue", false);
+};
+
+const onDocPointerDown = (e: PointerEvent) => {
+  if (!isOpen.value) return;
+  const root = rootRef.value;
+  if (root && !root.contains(e.target as Node)) {
+    close();
+  }
+};
+
+const onDocKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && isOpen.value) {
+    e.preventDefault();
+    close();
+  }
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+watch(
+  () => props.modelValue,
+  (open) => {
+    isOpen.value = open;
+  },
+  { immediate: true }
+);
+
+watch(isOpen, (next, prev) => {
+  if (next && !prev) emit("open");
+  if (!next && prev) emit("close");
+});
+
+onMounted(() => {
+  document.addEventListener("pointerdown", onDocPointerDown, true);
+  document.addEventListener("keydown", onDocKeydown, true);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("pointerdown", onDocPointerDown, true);
+  document.removeEventListener("keydown", onDocKeydown, true);
+});
+</script>

package/src/components/dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from "./dropdown.vue";
+export type { DropdownPlacement, DropdownProps, DropdownEmit } from "./dropdown.type";

package/src/components/field/field.html

@@ -1 +1,12 @@
-<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs" />
+<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs">
+  <template #start-input>
+    <slot name="start-input"></slot>
+  </template>
+  <template #input>
+    <slot name="input"></slot>
+  </template>
+  <template #end-input>
+    <slot name="end-input"></slot>
+  </template>
+  <slot></slot>
+</OutlineField>

package/src/components/field/outline/outline.html

@@ -1,30 +1,34 @@
 <div v-bind="fieldAttrs">
   <div v-bind="fieldContentAttrs">
-    <div
-      v-bind="fieldInputAttrs"
-      @input="onInput"
-      @compositionstart="onCompositionStart"
-      @compositionend="onCompositionEnd"
-      @focus="onFocus"
-      @blur="onBlur"
-      @beforeinput="onBeforeinput"
-      ref="contentRef"
-      v-text="content"
-      v-if="type !== 'password'"
-    ></div>
-    <input
-      v-bind="fieldInputAttrs"
-      @input="onInput"
-      @compositionstart="onCompositionStart"
-      @compositionend="onCompositionEnd"
-      @focus="onFocus"
-      @blur="onBlur"
-      @beforeinput="onBeforeinput"
-      ref="contentRef"
-      :value="content"
-      type="password"
-      v-else
-    ></input>
+    <slot name="start-input"></slot>
+    <slot name="input">
+      <div
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @compositionstart="onCompositionStart"
+        @compositionend="onCompositionEnd"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        ref="contentRef"
+        v-text="content"
+        v-if="type !== 'password'"
+      ></div>
+      <input
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @compositionstart="onCompositionStart"
+        @compositionend="onCompositionEnd"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        ref="contentRef"
+        :value="content"
+        type="password"
+        v-else
+      />
+    </slot>
+    <slot name="end-input"></slot>
   </div>
   <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
   <div v-bind="fieldHelpAttrs" v-if="help">{{ help }}</div>

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

@@ -6,8 +6,6 @@ $field-content: sass.fn-naming-prefix("field-content");
 $field-input: sass.fn-naming-prefix("field-input");
 $field-message: sass.fn-naming-prefix("field-message");
 $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 - layer: field
 $field-border-color: sass.fn-naming-var("field", "border-color");
@@ -30,6 +28,9 @@ $size-line-height: sass.fn-naming-var("line-height");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$direction-text-align: sass.fn-naming-var("text-align");
+$direction-justify-content: sass.fn-naming-var("justify-content");
+
 .#{$field} {
   width: 100%;
   box-shadow: none !important;
@@ -50,6 +51,9 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     line-height: 0;
     height: fit-content;
     position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   // Input
@@ -68,6 +72,9 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     font-size: #{$size-font-size};
     line-height: #{$size-line-height};
     box-sizing: border-box;
+    width: 100%;
+    overflow: auto;
+    flex: 1;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -164,7 +171,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
         display: block;
         white-space: pre-wrap;
         word-break: break-word;
-        padding: inherit;
         line-height: inherit;
         font-size: inherit;
         display: flex;
@@ -201,25 +207,12 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   }
 
   // Direction
-  &.#{$field-direction-left} {
-    .#{$field-input} {
-      justify-content: start;
-      text-align: left;
-    }
-
-    .#{$field-input}::before {
-      left: 0;
-    }
+  .#{$field-input} {
+    justify-content: #{$direction-justify-content};
+    text-align: #{$direction-text-align};
   }
 
-  &.#{$field-direction-right} {
-    .#{$field-input} {
-      justify-content: end;
-      text-align: right;
-    }
-
-    .#{$field-input}::before {
-      right: 0;
-    }
+  .#{$field-input}::before {
+    #{$direction-text-align}: 0;
   }
 }

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/index.ts

@@ -25,3 +25,5 @@ export * from "./route";
 export * from "./page";
 export * from "./collapse";
 export * from "./form-group";
+export * from "./dropdown";
+export * from "./select";

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/select/index.ts

@@ -0,0 +1,2 @@
+export { default as Select } from "./select.vue";
+export type { SelectVariant, SelectSize, SelectProps } from "./select.type";

package/src/components/select/select.html

@@ -0,0 +1,26 @@
+<div v-bind="selectAttrs">
+  <Dropdown v-bind="dropdownAttrs">
+    <template #trigger="{ toggle, isOpen }">
+      <Field
+        :role="role"
+        variant="outline"
+        @click="toggle"
+        v-bind="fieldAttrs"
+        :class="{focus: isOpen}"
+      >
+        <template #end-input>
+          <span v-bind="selectIconAttrs" :class="{open: isOpen}"></span>
+        </template>
+      </Field>
+    </template>
+    <button
+      v-for="item in menuItems"
+      :key="item"
+      type="button"
+      class="dropdown-demo-row"
+      @click="pickMenu(item)"
+    >
+      {{ item }}
+    </button>
+  </Dropdown>
+</div>

package/src/components/select/select.scss

@@ -0,0 +1,58 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$select: sass.fn-naming-prefix("select");
+$select-icon: sass.fn-naming-prefix("select-icon");
+$field: sass.fn-naming-prefix("field");
+$field-input: sass.fn-naming-prefix("field-input");
+
+// Property name
+$app-color: sass.fn-naming-var("app", "color");
+$spacing-x: sass.fn-naming-var("spacing", "x");
+$size-coefficient-x: sass.fn-naming-var("coefficient-x");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$select} {
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  &.readonly {
+    pointer-events: none;
+  }
+
+  .#{$select-icon} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-inline-end: calc(#{$spacing-x} * #{$size-coefficient-x} * 0.5);
+    color: inherit;
+    pointer-events: none;
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 0.1rem;
+    border-right: 2px solid rgb(var(--t-app-color));
+    border-bottom: 2px solid rgb(var(--t-app-color));
+    margin: calc(var(--t-spacing-y) * var(--t-coefficient-y))
+      calc(var(--t-spacing-x) * var(--t-coefficient-x));
+    transition: transform #{$transition-duration} ease;
+    transform-origin: center;
+
+    &.open {
+      transform: rotate(225deg);
+    }
+
+    &:not(.open) {
+      transform: rotate(45deg);
+    }
+  }
+
+  // :deep(.#{$field}.focus .#{$select-icon} svg) {
+  //   transform: rotate(180deg);
+  // }
+
+  // :deep(.#{$field-input}) {
+  //   cursor: pointer;
+  // }
+}

package/src/components/select/select.type.ts

@@ -0,0 +1,32 @@
+import type { FieldSize, FieldVariant } from "../field";
+import type { AppDirection } from "../app";
+
+export type SelectVariant = FieldVariant;
+export type SelectSize = FieldSize;
+
+export type SelectProps = {
+  // Wrapper
+  modelValue?: string;
+  name?: string;
+  variant?: FieldVariant;
+  role?: string;
+  shape?: string;
+  size?: FieldSize;
+  shadow?: boolean;
+  direction?: AppDirection;
+
+  // Input
+  id?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  autocomplete?: string;
+  tabindex?: number | string;
+  line?: number | string;
+  maxLine?: number | string;
+
+  // Support
+  message?: string;
+  help?: string;
+};

package/src/components/select/select.vue

@@ -0,0 +1,89 @@
+<style lang="scss" src="./select.scss" scoped></style>
+<template src="./select.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { type SelectProps } from "./select.type";
+import { property, withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+import { Field } from "../field";
+import { Dropdown } from "../dropdown";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<SelectProps>(), {
+  modelValue: "",
+  type: "text",
+  size: "standard",
+  disabled: false,
+  readonly: false,
+  message: "",
+  help: "",
+  variant: "outline",
+  placeholder: "",
+  shadow: undefined,
+  direction: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const direction = computed(() => {
+  return props.direction || appState?.direction?.value || "left";
+});
+
+const shadow = computed(() => {
+  return props.shadow || appState?.shadow.value || false;
+});
+
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const selectAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "select"]),
+      withPrefix("select"),
+      {
+        disabled: props.disabled,
+        readonly: props.readonly,
+      },
+    ],
+  };
+});
+
+const dropdownAttrs = computed(() => {
+  return {
+    role: role.value,
+    direction: direction.value,
+    shadow: shadow.value,
+    shape: shape.value,
+    disabled: props.disabled,
+    readonly: props.readonly,
+  };
+});
+
+const fieldAttrs = computed(() => {
+  return {
+    modelValue: props.modelValue,
+    size: props.size,
+    message: props.message,
+    help: props.help,
+    variant: props.variant,
+    placeholder: props.placeholder,
+    direction: direction.value,
+    role: role.value,
+    shape: shape.value,
+    readonly: true,
+    shadow: shadow.value,
+  };
+});
+
+const selectIconAttrs = computed(() => ({
+  class: [withPrefix("select-icon")],
+}));
+</script>

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"),
     ],

package/src/factory.ts

@@ -13,6 +13,7 @@ import {
   Container,
   DecisionModal,
   Divider,
+  Dropdown,
   Field,
   FormGroup,
   GestureIndicator,
@@ -28,6 +29,7 @@ import {
   RouteProvider,
   RouteOutlet,
   SegmentedField,
+  Select,
   Skeleton,
   Switch,
   Tab,
@@ -59,6 +61,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "container", Container);
       app.component(prefix + "decision-modal", DecisionModal);
       app.component(prefix + "divider", Divider);
+      app.component(prefix + "dropdown", Dropdown);
       app.component(prefix + "field", Field);
       app.component(prefix + "form-group", FormGroup);
       app.component(prefix + "gesture-indicator", GestureIndicator);
@@ -72,6 +75,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "route-provider", RouteProvider);
       app.component(prefix + "route-outlet", RouteOutlet);
       app.component(prefix + "segmented-field", SegmentedField);
+      app.component(prefix + "select", Select);
       app.component(prefix + "skeleton", Skeleton);
       app.component(prefix + "switch", Switch);
       app.component(prefix + "tab", Tab);