shopify-nuxt 0.0.1 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yanuar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -131,12 +131,6 @@ const shopify = useAppBridge()
 const shopifyFetch = useShopifyFetch()
 const { data } = await shopifyFetch('/api/products')
 </script>
-
-<template>
-  <ShopifyAppProvider>
-    <!-- Your app content -->
-  </ShopifyAppProvider>
-</template>
 ```
 
 ### Using Polaris components

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-nuxt",
   "configKey": "shopify",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -35,7 +35,8 @@ const module$1 = defineNuxtModule({
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
     addImportsDir(resolver.resolve("./runtime/composables"));
     addComponentsDir({
-      path: resolver.resolve("./runtime/components")
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false
     });
     nuxt.hook("app:resolve", () => {
       nuxt.options.app.head = nuxt.options.app.head || {};

package/dist/runtime/components/polaris/ShAvatar.vue

@@ -1,15 +1,17 @@
 <template>
-  <s-avatar v-bind="$attrs">
+  <s-avatar v-bind="polarisAttrs">
     <slot />
   </s-avatar>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShAvatar", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   initials: { type: String, required: false },
   src: { type: String, required: false },
   size: { type: String, required: false },
   alt: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShBadge.vue

@@ -1,16 +1,18 @@
 <template>
-  <s-badge v-bind="$attrs">
+  <s-badge v-bind="polarisAttrs">
     <slot />
   </s-badge>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShBadge", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   content: { type: String, required: false },
   progress: { type: String, required: false },
   tone: { type: String, required: false },
   icon: { type: String, required: false },
   size: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShBanner.vue

@@ -1,15 +1,17 @@
 <template>
-  <s-banner v-bind="$attrs">
+  <s-banner v-bind="polarisAttrs">
     <slot />
   </s-banner>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShBanner", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   heading: { type: String, required: false },
   tone: { type: String, required: false },
   hidden: { type: Boolean, required: false },
   dismissible: { type: Boolean, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShBox.vue

@@ -1,12 +1,13 @@
 <template>
-  <s-box v-bind="$attrs">
+  <s-box v-bind="polarisAttrs">
     <slot />
   </s-box>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShBox", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   accessibilityRole: { type: String, required: false },
   background: { type: String, required: false },
   blockSize: { type: String, required: false },
@@ -32,4 +33,5 @@ defineProps({
   accessibilityVisibility: { type: String, required: false },
   display: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShButton.d.vue.ts

@@ -13,11 +13,19 @@ type __VLS_Props = {
     commandFor?: string;
     interestFor?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+    blur: (event: FocusEvent) => void;
+    focus: (event: FocusEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShButton.vue

@@ -1,12 +1,18 @@
 <template>
-  <s-button v-bind="$attrs">
+  <s-button
+    v-bind="polarisAttrs"
+    @click="emit('click', $event)"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+  >
     <slot />
   </s-button>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShButton", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   icon: { type: String, required: false },
   loading: { type: Boolean, required: false },
@@ -21,4 +27,6 @@ defineProps({
   commandFor: { type: String, required: false },
   interestFor: { type: String, required: false }
 });
+const emit = defineEmits(["click", "focus", "blur"]);
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShButton.vue.d.ts

@@ -13,11 +13,19 @@ type __VLS_Props = {
     commandFor?: string;
     interestFor?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+    blur: (event: FocusEvent) => void;
+    focus: (event: FocusEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShButtonGroup.vue

@@ -1,13 +1,15 @@
 <template>
-  <s-button-group v-bind="$attrs">
+  <s-button-group v-bind="polarisAttrs">
     <slot />
   </s-button-group>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShButtonGroup", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   gap: { type: String, required: false },
   accessibilityLabel: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShCheckbox.d.vue.ts

@@ -1,8 +1,6 @@
 type __VLS_Props = {
     indeterminate?: boolean;
     defaultIndeterminate?: boolean;
-    checked?: boolean;
-    value?: string;
     defaultChecked?: boolean;
     accessibilityLabel?: string;
     details?: string;
@@ -12,12 +10,21 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: boolean;
 };
-declare var __VLS_8: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: boolean) => void;
+    change: (event: Event) => void;
+    input: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    onInput?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShCheckbox.vue

@@ -1,16 +1,26 @@
 <template>
-  <s-checkbox v-bind="$attrs">
+  <s-checkbox
+    v-bind="polarisAttrs"
+    :checked="modelValue"
+    @change="
+  (evt) => {
+    emit('change', evt);
+    value = evt.currentTarget?.checked || false;
+  }
+"
+    @input="emit('input', $event)"
+  >
     <slot />
   </s-checkbox>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShCheckbox", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   indeterminate: { type: Boolean, required: false },
   defaultIndeterminate: { type: Boolean, required: false },
-  checked: { type: Boolean, required: false },
-  value: { type: String, required: false },
   defaultChecked: { type: Boolean, required: false },
   accessibilityLabel: { type: String, required: false },
   details: { type: String, required: false },
@@ -19,6 +29,13 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
-  name: { type: String, required: false }
+  name: { type: String, required: false },
+  modelValue: { type: Boolean, required: false }
 });
+const emit = defineEmits(["update:modelValue", "change", "input"]);
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v)
+});
+const polarisAttrs = usePolarisAttrs(props, ["modelValue"]);
 </script>

package/dist/runtime/components/polaris/ShCheckbox.vue.d.ts

@@ -1,8 +1,6 @@
 type __VLS_Props = {
     indeterminate?: boolean;
     defaultIndeterminate?: boolean;
-    checked?: boolean;
-    value?: string;
     defaultChecked?: boolean;
     accessibilityLabel?: string;
     details?: string;
@@ -12,12 +10,21 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: boolean;
 };
-declare var __VLS_8: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: boolean) => void;
+    change: (event: Event) => void;
+    input: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    onInput?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShChip.vue

@@ -1,13 +1,15 @@
 <template>
-  <s-chip v-bind="$attrs">
+  <s-chip v-bind="polarisAttrs">
     <slot />
   </s-chip>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShChip", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   color: { type: String, required: false },
   accessibilityLabel: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShChoice.vue

@@ -1,16 +1,18 @@
 <template>
-  <s-choice v-bind="$attrs">
+  <s-choice v-bind="polarisAttrs">
     <slot />
   </s-choice>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShChoice", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   selected: { type: Boolean, required: false },
   value: { type: String, required: false },
   accessibilityLabel: { type: String, required: false },
   defaultSelected: { type: Boolean, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShChoiceList.d.vue.ts

@@ -6,13 +6,21 @@ type __VLS_Props = {
     multiple?: boolean;
     label?: string;
     labelAccessibilityVisibility?: 'visible' | 'exclusive';
-    values?: string[];
+    modelValue?: string[];
 };
-declare var __VLS_8: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string[]) => void;
+    change: (event: Event) => void;
+    input: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    onInput?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShChoiceList.vue

@@ -1,12 +1,24 @@
 <template>
-  <s-choice-list v-bind="$attrs">
+  <s-choice-list
+    v-bind="polarisAttrs"
+    :values="modelValue"
+    @change="
+  (evt) => {
+    emit('change', evt);
+    value = evt.currentTarget?.values || [];
+  }
+"
+    @input="emit('input', $event)"
+  >
     <slot />
   </s-choice-list>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShChoiceList", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   name: { type: String, required: false },
   error: { type: String, required: false },
@@ -14,6 +26,12 @@ defineProps({
   multiple: { type: Boolean, required: false },
   label: { type: String, required: false },
   labelAccessibilityVisibility: { type: String, required: false },
-  values: { type: Array, required: false }
+  modelValue: { type: Array, required: false }
 });
+const emit = defineEmits(["update:modelValue", "change", "input"]);
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v)
+});
+const polarisAttrs = usePolarisAttrs(props, ["modelValue"]);
 </script>

package/dist/runtime/components/polaris/ShChoiceList.vue.d.ts

@@ -6,13 +6,21 @@ type __VLS_Props = {
     multiple?: boolean;
     label?: string;
     labelAccessibilityVisibility?: 'visible' | 'exclusive';
-    values?: string[];
+    modelValue?: string[];
 };
-declare var __VLS_8: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string[]) => void;
+    change: (event: Event) => void;
+    input: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    onInput?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShClickable.vue

@@ -1,12 +1,13 @@
 <template>
-  <s-clickable v-bind="$attrs">
+  <s-clickable v-bind="polarisAttrs">
     <slot />
   </s-clickable>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShClickable", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   target: { type: [String, Object], required: false },
@@ -41,4 +42,5 @@ defineProps({
   commandFor: { type: String, required: false },
   interestFor: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShClickableChip.vue

@@ -1,12 +1,13 @@
 <template>
-  <s-clickable-chip v-bind="$attrs">
+  <s-clickable-chip v-bind="polarisAttrs">
     <slot />
   </s-clickable-chip>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShClickableChip", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   color: { type: String, required: false },
   accessibilityLabel: { type: String, required: false },
   removable: { type: Boolean, required: false },
@@ -17,4 +18,5 @@ defineProps({
   commandFor: { type: String, required: false },
   interestFor: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShColorField.d.vue.ts

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     alpha?: boolean;
-    value?: string;
     autocomplete?: string;
     defaultValue?: string;
     details?: string;
@@ -13,12 +12,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShColorField.vue

@@ -1,14 +1,27 @@
 <template>
-  <s-color-field v-bind="$attrs">
+  <s-color-field
+    v-bind="polarisAttrs"
+    :value="modelValue"
+    @blur="emit('blur', $event)"
+    @change="emit('change', $event)"
+    @focus="emit('focus', $event)"
+    @input="
+  (evt) => {
+    emit('input', evt);
+    value = evt.currentTarget?.value || '';
+  }
+"
+  >
     <slot />
   </s-color-field>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShColorField", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   alpha: { type: Boolean, required: false },
-  value: { type: String, required: false },
   autocomplete: { type: String, required: false },
   defaultValue: { type: String, required: false },
   details: { type: String, required: false },
@@ -20,6 +33,13 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
-  name: { type: String, required: false }
+  name: { type: String, required: false },
+  modelValue: { type: String, required: false }
 });
+const emit = defineEmits(["update:modelValue", "blur", "change", "focus", "input"]);
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v)
+});
+const polarisAttrs = usePolarisAttrs(props, ["modelValue"]);
 </script>

package/dist/runtime/components/polaris/ShColorField.vue.d.ts

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     alpha?: boolean;
-    value?: string;
     autocomplete?: string;
     defaultValue?: string;
     details?: string;
@@ -13,12 +12,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;