orio-ui 1.0.1 → 1.0.3

package/README.md

@@ -30,7 +30,7 @@ Add Orio UI to your `nuxt.config.ts`:
 
 ```typescript
 export default defineNuxtConfig({
-  extends: ["orio-ui"],
+  modules: ["orio-ui"],
 });
 ```
 
@@ -164,14 +164,16 @@ npm run docs:dev
 
 ```
 orio-ui/
-├── src/runtime/
-│   ├── components/       # 18 Vue components
-│   ├── composables/      # 4 composables
-│   ├── assets/css/       # Theme CSS files
-│   └── utils/            # Icon registry
+├── src/
+│   ├── runtime/
+│   │   ├── components/   # 18 Vue components
+│   │   ├── composables/  # 4 composables
+│   │   ├── assets/css/   # Theme CSS files
+│   │   └── utils/        # Icon registry
+│   └── module.ts         # Nuxt Module definition
 ├── tests/                # Vitest unit tests
 ├── docs/                 # VitePress documentation
-└── nuxt.config.ts        # Nuxt Layer configuration
+└── build.config.ts       # Module build configuration
 ```
 
 ### Running Tests

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "orio-ui",
+  "configKey": "orioUi",
+  "compatibility": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "version": "1.0.3",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,24 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "orio-ui",
+    configKey: "orioUi",
+    compatibility: {
+      nuxt: "^3.0.0 || ^4.0.0"
+    }
+  },
+  defaults: {},
+  setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/main.css"));
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: "Orio",
+      pathPrefix: true
+    });
+    addImportsDir(resolver.resolve("./runtime/composables"));
+  }
+});
+
+export { module as default };

package/dist/runtime/assets/css/animation.css

@@ -0,0 +1 @@
+:root{--motion-duration-short:0.05s;--motion-duration-medium:0.15s;--motion-distance-small:0.15rem;--motion-distance-medium:2rem;--motion-distance-large:1rem;--motion-ease-default:ease-in;--motion-ease-smooth:cubic-bezier(0.22,1,0.36,1)}.animate-fade-enter-active,.animate-fade-leave-active{transition:opacity var(--motion-duration-short) var(--motion-ease-default),transform var(--motion-duration-short) var(--motion-ease-default)}.animate-fade-enter-from,.animate-fade-leave-to{opacity:0;transform:translateY(calc(var(--motion-distance-small)*-1))}.animate-fade-slide-appear-active,.animate-fade-slide-enter-active,.animate-fade-slide-leave-active{transition:opacity var(--motion-duration-medium) var(--motion-ease-smooth),transform var(--motion-duration-medium) var(--motion-ease-smooth);transition-delay:calc(var(--index, 0)*.08s)}.animate-fade-slide-appear-from,.animate-fade-slide-enter-from{opacity:0;transform:translateY(var(--motion-distance-medium))}.animate-fade-slide-leave-to{opacity:0;transform:translateY(calc(var(--motion-distance-large)*-1))}.animate-fade-slide-move{transition:transform var(--motion-duration-medium) ease}.animate-fade-reverse-enter-active,.animate-fade-reverse-leave-active{transition:opacity var(--motion-duration-short) var(--motion-ease-default),transform var(--motion-duration-short) var(--motion-ease-default)}.animate-fade-reverse-enter-from,.animate-fade-reverse-leave-to{opacity:0;transform:translateY(var(--motion-distance-small))}.animate-fade-slide-reverse-appear-active,.animate-fade-slide-reverse-enter-active,.animate-fade-slide-reverse-leave-active{transition:opacity var(--motion-duration-medium) var(--motion-ease-smooth),transform var(--motion-duration-medium) var(--motion-ease-smooth);transition-delay:calc(var(--index, 0)*.08s)}.animate-fade-slide-reverse-appear-from,.animate-fade-slide-reverse-enter-from{opacity:0;transform:translateY(calc(var(--motion-distance-medium)*-1))}.animate-fade-slide-reverse-leave-to{opacity:0;transform:translateY(var(--motion-distance-large))}.animate-fade-slide-reverse-move{transition:transform var(--motion-duration-medium) ease}

package/dist/runtime/assets/css/colors.css

@@ -0,0 +1 @@
+:root{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2;--color-accent:#1f3a8a;--color-accent-ink:#fff;--color-accent-soft:#eef2ff;--color-accent-border:#c7d2fe;--color-accent-hover:color-mix(in srgb,var(--color-accent) 85%,#000 15%);--color-accent-active:color-mix(in srgb,var(--color-accent) 75%,#000 25%)}:root[data-mode=light]{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2}:root[data-mode=dark]{--color-bg:#0e1116;--color-surface:#1a1d23;--color-text:#fff;--color-muted:#a0a7b5;--color-border:#2e333d;--color-accent-ink:#fff;--color-accent-soft:color-mix(in srgb,var(--color-accent) 12%,#0e1116);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#0e1116);--color-accent-hover:color-mix(in srgb,var(--color-accent) 30%,#fff 70%);--color-accent-active:color-mix(in srgb,var(--color-accent) 80%,#fff 25%)}:root[data-theme=navy]{--color-accent:#333c4d;--color-accent-soft:#f0f5ff;--color-accent-border:#bdcdef}:root[data-theme=teal]{--color-accent:#147b71;--color-accent-soft:#e7f8f6;--color-accent-border:#a6d9d4}:root[data-theme=forest]{--color-accent:#235c42;--color-accent-soft:#e9f7f0;--color-accent-border:#a2cdb9}:root[data-theme=wine]{--color-accent:#862737;--color-accent-soft:#fbeff1;--color-accent-border:#dbb3ba}:root[data-theme=royal]{--color-accent:#293da3;--color-accent-soft:#eef0fb;--color-accent-border:#b3badb}:root{--color-red:#dc2626;--color-red-ink:#fff;--color-red-soft:#fef2f2;--color-red-border:#fecaca;--color-red-hover:color-mix(in srgb,var(--color-red) 85%,#000 15%);--color-red-active:color-mix(in srgb,var(--color-red) 75%,#000 25%);--color-orange:#ea580c;--color-orange-ink:#fff;--color-orange-soft:#fff7ed;--color-orange-border:#fed7aa;--color-orange-hover:color-mix(in srgb,var(--color-orange) 85%,#000 15%);--color-orange-active:color-mix(in srgb,var(--color-orange) 75%,#000 25%);--color-yellow:#ca8a04;--color-yellow-ink:#fff;--color-yellow-soft:#fefce8;--color-yellow-border:#fef08a;--color-yellow-hover:color-mix(in srgb,var(--color-yellow) 85%,#000 15%);--color-yellow-active:color-mix(in srgb,var(--color-yellow) 75%,#000 25%);--color-green:#15803d;--color-green-ink:#fff;--color-green-soft:#f0fdf4;--color-green-border:#bbf7d0;--color-green-hover:color-mix(in srgb,var(--color-green) 85%,#000 15%);--color-green-active:color-mix(in srgb,var(--color-green) 75%,#000 25%);--color-teal:#0d9488;--color-teal-ink:#fff;--color-teal-soft:#f0fdfa;--color-teal-border:#99f6e4;--color-teal-hover:color-mix(in srgb,var(--color-teal) 85%,#000 15%);--color-teal-active:color-mix(in srgb,var(--color-teal) 75%,#000 25%);--color-blue:#2563eb;--color-blue-ink:#fff;--color-blue-soft:#eff6ff;--color-blue-border:#bfdbfe;--color-blue-hover:color-mix(in srgb,var(--color-blue) 85%,#000 15%);--color-blue-active:color-mix(in srgb,var(--color-blue) 75%,#000 25%);--color-purple:#7e22ce;--color-purple-ink:#fff;--color-purple-soft:#faf5ff;--color-purple-border:#e9d5ff;--color-purple-hover:color-mix(in srgb,var(--color-purple) 85%,#000 15%);--color-purple-active:color-mix(in srgb,var(--color-purple) 75%,#000 25%);--color-pink:#db2777;--color-pink-ink:#fff;--color-pink-soft:#fdf2f8;--color-pink-border:#fbcfe8;--color-pink-hover:color-mix(in srgb,var(--color-pink) 85%,#000 15%);--color-pink-active:color-mix(in srgb,var(--color-pink) 75%,#000 25%)}

package/{src/runtime/assets/css/cool-gradient-hover.scss → dist/runtime/assets/css/cool-gradient-hover.css}

@@ -3,21 +3,11 @@
   --gh-angle: 120deg;
   --gh-peek-x: 95%;
   --gh-mix-base: black;
-
-  background-image: linear-gradient(
-    var(--gh-angle),
-    color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base)) 0%,
-    var(--gh-color) 40%,
-    color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base)) 80%
-  );
+  background-image: linear-gradient(var(--gh-angle), color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base)) 0%, var(--gh-color) 40%, color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base)) 80%);
   background-repeat: no-repeat;
-
   background-size: 0% 0%;
   background-position: 0% 0%;
-
-  transition:
-    background-position 0.8s ease,
-    border-color 0.2s ease;
+  transition: background-position 0.8s ease, border-color 0.2s ease;
   will-change: background-size, background-position;
 }
 
@@ -27,7 +17,7 @@
 }
 
 /* Dark mode: now theme-aware */
-:root[data-mode="dark"] .gradient-hover {
+:root[data-mode=dark] .gradient-hover {
   --gh-color: var(--color-accent); /* switch from static white to theme accent */
   --gh-mix-base: var(--color-bg); /* blend into dark background */
-}
+}

package/dist/runtime/assets/css/main.css

@@ -0,0 +1 @@
+@import "./colors.css";@import "./animation.css";@import "./scroll.css";*,:after,:before{box-sizing:border-box}

package/dist/runtime/assets/css/scroll.css

@@ -0,0 +1 @@
+::-webkit-scrollbar{height:12px;width:12px}::-webkit-scrollbar-track{background:var(--color-surface);border-left:1px solid var(--color-border)}::-webkit-scrollbar-thumb{background-color:var(--color-accent-border);border:3px solid var(--color-surface);border-radius:8px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}::-webkit-scrollbar-thumb:hover{background-color:var(--color-accent)}::-webkit-scrollbar-corner{background:var(--color-surface)}*{scrollbar-color:var(--color-accent-border) var(--color-surface);scrollbar-width:thin}:root[data-mode=dark] ::-webkit-scrollbar-track{background:var(--color-bg);border-left:1px solid var(--color-border)}:root[data-mode=dark] ::-webkit-scrollbar-thumb{background-color:var(--color-accent-border);border:3px solid var(--color-bg)}:root[data-mode=dark] *{scrollbar-color:var(--color-accent-border) var(--color-bg)}

package/{src → dist}/runtime/components/Button.vue

@@ -49,7 +49,7 @@ function click(event: PointerEvent) {
   </orio-control-element>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 button {
   background-color: var(--color-accent);
   color: var(--color-accent-ink);
@@ -61,50 +61,42 @@ button {
   align-items: center;
   gap: 0.5rem;
   user-select: none;
-
-  &.icon-only {
-    padding: 0;
-    border-radius: 50%;
-  }
-
-  &:disabled {
-    background-color: var(--color-accent-soft);
-    color: var(--color-muted);
-    border-color: var(--color-accent-border);
-    cursor: not-allowed;
-  }
-
-  &:active {
-    border: 1px solid var(--color-accent-border);
-  }
-
-  &.primary {
-    --gh-color: var(--color-accent);
-  }
-
-  &.secondary {
-    background-color: transparent;
-    border: 1px solid var(--color-accent);
-    color: var(--color-accent);
-    &:hover {
-      color: var(--color-accent-hover);
-    }
-  }
-
-  &.subdued {
-    background-color: transparent;
-    color: var(--color-accent);
-    &:hover {
-      color: var(--color-accent-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--color-accent-border) !important;
-  }
-
-  &:hover {
-    color: var(--color-accent-ink);
-  }
+}
+button.icon-only {
+  padding: 0;
+  border-radius: 50%;
+}
+button:disabled {
+  background-color: var(--color-accent-soft);
+  color: var(--color-muted);
+  border-color: var(--color-accent-border);
+  cursor: not-allowed;
+}
+button:active {
+  border: 1px solid var(--color-accent-border);
+}
+button.primary {
+  --gh-color: var(--color-accent);
+}
+button.secondary {
+  background-color: transparent;
+  border: 1px solid var(--color-accent);
+  color: var(--color-accent);
+}
+button.secondary:hover {
+  color: var(--color-accent-hover);
+}
+button.subdued {
+  background-color: transparent;
+  color: var(--color-accent);
+}
+button.subdued:hover {
+  color: var(--color-accent-hover);
+}
+button:active {
+  border-color: var(--color-accent-border) !important;
+}
+button:hover {
+  color: var(--color-accent-ink);
 }
 </style>

package/dist/runtime/components/CheckBox.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const modelValue = defineModel<boolean>({ required: false });
+
+defineProps<{
+  checkedIcon?: string; // optional: pass icon name for checked state
+  uncheckedIcon?: string; // optional: pass icon name for unchecked state
+}>();
+</script>
+
+<template>
+  <orio-control-element class="checkbox">
+    <label class="checkbox-label">
+      <input
+        v-model="modelValue"
+        type="checkbox"
+        class="checkbox-input"
+        tabindex="-1"
+      />
+      <span
+        class="checkbox-box"
+        :class="{
+          defaultChecked: !checkedIcon,
+          defaultUnchecked: !uncheckedIcon,
+        }"
+      >
+        <slot name="icon" :checked="modelValue">
+          <orio-icon v-if="modelValue && checkedIcon" :name="checkedIcon" />
+          <orio-icon
+            v-else-if="!modelValue && uncheckedIcon"
+            :name="uncheckedIcon"
+          />
+        </slot>
+      </span>
+      <slot />
+    </label>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.checkbox {
+  --box-size: 1rem;
+}
+.checkbox-label {
+  position: relative;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: var(--color-text);
+}
+.checkbox-input {
+  position: absolute;
+  inset: 0;
+  width: var(--box-size);
+  height: 1rem;
+  margin: 0;
+  opacity: 0;
+}
+.checkbox-box {
+  width: var(--box-size);
+  height: var(--box-size);
+  border: 2px solid var(--color-border);
+  border-radius: 4px;
+  background-color: var(--color-bg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.checkbox .checkbox-input:checked + .checkbox-box {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.checkbox .checkbox-input:checked + .checkbox-box.defaultChecked::after {
+  content: "";
+  width: 0.3rem;
+  height: 0.6rem;
+  position: relative;
+  bottom: 0.1rem;
+  border: solid var(--color-accent-ink);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.checkbox-label:hover .checkbox-box {
+  border-color: var(--color-accent);
+}
+.checkbox .checkbox-input:focus-visible + .checkbox-box {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+</style>

package/{src → dist}/runtime/components/ControlElement.vue

@@ -20,23 +20,20 @@ withDefaults(defineProps<ControlProps>(), {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .control {
   margin: 0.5rem;
-
-  .control-label {
-    user-select: none;
-  }
-
-  &.minimal {
-    margin: 0;
-
-    .slot-wrapper :first-child {
-      border: 0;
-      &:focus {
-        box-shadow: none;
-      }
-    }
-  }
+}
+.control .control-label {
+  user-select: none;
+}
+.control.minimal {
+  margin: 0;
+}
+.control.minimal .slot-wrapper :first-child {
+  border: 0;
+}
+.control.minimal .slot-wrapper :first-child:focus {
+  box-shadow: none;
 }
 </style>

package/{src → dist}/runtime/components/DashedContainer.vue

@@ -29,7 +29,7 @@ const iconSize = computed(() => {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .dashed-container {
   cursor: pointer;
   border: 3px dashed var(--color-border);
@@ -39,16 +39,15 @@ const iconSize = computed(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
-  &:hover {
-    .text-class {
-      color: var(--color-accent-hover);
-    }
-  }
 }
+.dashed-container:hover .text-class {
+  color: var(--color-accent-hover);
+}
+
 .icon-class {
   color: var(--color-muted);
 }
+
 .text-class {
   color: var(--color-accent);
 }

package/dist/runtime/components/DatePicker.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { nanoid } from 'nanoid';
+
+interface Props {
+  month?: boolean;
+}
+defineProps<Props>();
+
+const date = defineModel<string | null | undefined>('date', {
+  required: true,
+});
+
+const randomName = computed(() => `date-${nanoid(8)}`);
+</script>
+
+<template>
+  <orio-control-element class="date-picker" v-bind="$attrs">
+    <input
+      v-model="date"
+      :type="month ? 'month' : 'date'"
+      class="date-input"
+      :name="randomName"
+    />
+  </orio-control-element>
+</template>
+
+<style scoped>
+.date-picker *{cursor:pointer;width:100%}.date-picker-label{color:var(--color-text);display:inline-flex;flex-direction:column;font-size:.9rem;gap:.25rem}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;box-sizing:border-box;color:var(--color-text);font-size:.95rem;padding:.4rem .6rem;transition:border-color .2s ease,box-shadow .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{box-shadow:0 0 0 2px var(--color-accent-soft);outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
+</style>

package/{src → dist}/runtime/components/DateRangePicker.vue

@@ -46,26 +46,25 @@ defineExpose({ dateIsCorrect });
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .date-range-picker {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
-  & > * {
-    min-width: 0;
-  }
-
-  .date-picker {
-    margin-inline: 0;
-  }
-  .date-picker:first-child {
-    margin-inline-end: 0.5rem;
-  }
-  .checkbox {
-    margin-inline-start: 0.25rem;
-  }
 }
+.date-range-picker > * {
+  min-width: 0;
+}
+.date-range-picker .date-picker {
+  margin-inline: 0;
+}
+.date-range-picker .date-picker:first-child {
+  margin-inline-end: 0.5rem;
+}
+.date-range-picker .checkbox {
+  margin-inline-start: 0.25rem;
+}
+
 .error-message {
   color: red;
   font-size: 0.875rem;

package/{src → dist}/runtime/components/EmptyState.vue

@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .empty-state {
   display: flex;
   flex-direction: column;
@@ -42,33 +42,27 @@ const props = withDefaults(defineProps<Props>(), {
   gap: 0.5rem;
   padding: 2rem;
   color: var(--color-text-secondary);
-
-  &.small {
-    padding: 1rem;
-    gap: 0.25rem;
-
-    .empty-state-icon {
-      font-size: 2rem;
-    }
-  }
-
-  &.medium {
-    padding: 2rem;
-    gap: 0.5rem;
-
-    .empty-state-icon {
-      font-size: 3rem;
-    }
-  }
-
-  &.large {
-    padding: 3rem;
-    gap: 1rem;
-
-    .empty-state-icon {
-      font-size: 4rem;
-    }
-  }
+}
+.empty-state.small {
+  padding: 1rem;
+  gap: 0.25rem;
+}
+.empty-state.small .empty-state-icon {
+  font-size: 2rem;
+}
+.empty-state.medium {
+  padding: 2rem;
+  gap: 0.5rem;
+}
+.empty-state.medium .empty-state-icon {
+  font-size: 3rem;
+}
+.empty-state.large {
+  padding: 3rem;
+  gap: 1rem;
+}
+.empty-state.large .empty-state-icon {
+  font-size: 4rem;
 }
 
 .empty-state-icon {

package/{src → dist}/runtime/components/Icon.vue

@@ -36,16 +36,5 @@ const sizeValue = computed(() =>
 </template>
 
 <style scoped>
-.orio-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.orio-icon :deep(svg) {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-}
+.orio-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
 </style>

package/{src → dist}/runtime/components/Input.vue

@@ -12,7 +12,7 @@ const text = defineModel<string>({ default: '' });
   </orio-control-element>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .text-input {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -22,28 +22,22 @@ const text = defineModel<string>({ default: '' });
   color: var(--color-text);
   background-color: var(--color-bg);
   box-sizing: border-box;
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-
-  &::placeholder {
-    color: var(--color-muted);
-  }
-
-  &:hover {
-    border-color: var(--color-accent);
-  }
-
-  &:focus {
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 2px var(--color-accent-soft);
-    outline: none;
-  }
-
-  &:disabled {
-    background-color: var(--color-surface);
-    color: var(--color-muted);
-    cursor: not-allowed;
-  }
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.text-input::placeholder {
+  color: var(--color-muted);
+}
+.text-input:hover {
+  border-color: var(--color-accent);
+}
+.text-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-soft);
+  outline: none;
+}
+.text-input:disabled {
+  background-color: var(--color-surface);
+  color: var(--color-muted);
+  cursor: not-allowed;
 }
 </style>

package/{src → dist}/runtime/components/Modal.vue

@@ -65,47 +65,5 @@ watch(show, (open) => {
 </template>
 
 <style scoped>
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(6px);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  transition: opacity 0.25s ease;
-}
-
-.modal {
-  position: absolute;
-
-  width: 380px;
-  max-width: 90vw;
-  max-height: 90vh;
-
-  background: white;
-  border-radius: 1rem;
-  padding: 24px;
-
-  transform-origin: top left;
-  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
-
-  transition:
-    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
-    opacity 0.3s ease;
-
-  color: var(--color-muted);
-  opacity: 0;
-}
-
-.overlay-fade-enter-from,
-.overlay-fade-leave-to {
-  opacity: 0;
-}
-.overlay-fade-enter-active,
-.overlay-fade-leave-active {
-  transition: opacity 0.25s ease;
-}
+.overlay{align-items:center;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .25s ease}.modal{background:#fff;border-radius:1rem;box-shadow:0 25px 60px rgba(0,0,0,.25);color:var(--color-muted);max-height:90vh;max-width:90vw;padding:24px;position:absolute;transform-origin:top left;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease;width:380px}.modal,.overlay-fade-enter-from,.overlay-fade-leave-to{opacity:0}.overlay-fade-enter-active,.overlay-fade-leave-active{transition:opacity .25s ease}
 </style>

package/{src → dist}/runtime/components/Popover.vue

@@ -246,7 +246,7 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', redrawPopover, true);
 });
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .popover {
   border: 0;
   background-color: transparent;