@synergy-design-system/vue 2.11.6 → 2.11.7

package/dist/components/SynVueInput.vue.d.ts

@@ -1,18 +1,11 @@
-import '@synergy-design-system/components/components/input/input.js';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynChangeEvent } from '@synergy-design-system/components';
-import type { SynClearEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynInputEvent } from '@synergy-design-system/components';
-import type { SynInvalidEvent } from '@synergy-design-system/components';
-import type { SynInput } from '@synergy-design-system/components';
+import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynInput } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynChangeEvent } from '@synergy-design-system/components';
 export type { SynClearEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
 export type { SynInputEvent } from '@synergy-design-system/components';
 export type { SynInvalidEvent } from '@synergy-design-system/components';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     title?: SynInput["title"];
     /**
   * The type of input.
@@ -149,16 +142,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
      */
     modelValue?: SynInput["value"];
 }, {
-    nativeElement: import("vue").Ref<SynInput | undefined, SynInput | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    nativeElement: import('vue').Ref<SynInput | undefined, SynInput | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => any;
-    "syn-change": (e: SynChangeEvent) => any;
-    "syn-clear": (e: SynClearEvent) => any;
     "syn-focus": (e: SynFocusEvent) => any;
-    "syn-input": (e: SynInputEvent) => any;
     "syn-invalid": (e: SynInvalidEvent) => any;
+    "syn-change": (e: SynChangeEvent) => any;
+    "syn-input": (e: SynInputEvent) => any;
     "update:modelValue": (newValue: string) => any;
-}, string, import("vue").PublicProps, Readonly<{
+    "syn-clear": (e: SynClearEvent) => any;
+}, string, import('vue').PublicProps, Readonly<{
     title?: SynInput["title"];
     /**
   * The type of input.
@@ -296,13 +289,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue?: SynInput["value"];
 }> & Readonly<{
     "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
-    "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
-    "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
-    "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
     "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
+    "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
+    "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/components/SynVueInput.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, mergeProps, renderSlot } from "vue";
+import "@synergy-design-system/components/components/input/input.js";
+const _hoisted_1 = ["value"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueInput",
+  props: {
+    title: {},
+    type: {},
+    name: {},
+    value: {},
+    size: {},
+    label: {},
+    helpText: {},
+    clearable: {},
+    disabled: {},
+    placeholder: {},
+    readonly: {},
+    passwordToggle: {},
+    passwordVisible: {},
+    noSpinButtons: {},
+    form: {},
+    required: {},
+    pattern: {},
+    minlength: {},
+    maxlength: {},
+    min: {},
+    max: {},
+    step: {},
+    autocapitalize: {},
+    autocorrect: {},
+    autocomplete: {},
+    autofocus: {},
+    enterkeyhint: {},
+    spellcheck: {},
+    inputmode: {},
+    modelValue: {}
+  },
+  emits: ["syn-blur", "syn-change", "syn-clear", "syn-focus", "syn-input", "syn-invalid", "update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const nativeElement = ref();
+    __expose({
+      nativeElement
+    });
+    const props = __props;
+    const visibleProps = computed(
+      () => Object.fromEntries(
+        Object.entries(props).filter(([, value]) => typeof value !== "undefined")
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("syn-input", mergeProps({
+        onSynBlur: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("syn-blur", $event)),
+        onSynChange: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("syn-change", $event)),
+        onSynClear: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("syn-clear", $event)),
+        onSynFocus: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("syn-focus", $event)),
+        onSynInput: _cache[4] || (_cache[4] = ($event) => {
+          _ctx.$emit("update:modelValue", $event.target.value);
+          _ctx.$emit("syn-input", $event);
+        }),
+        onSynInvalid: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("syn-invalid", $event)),
+        value: typeof props.modelValue !== "undefined" ? props.modelValue : typeof props.value !== "undefined" ? props.value : void 0
+      }, visibleProps.value, {
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueInput.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./SynVueInput.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueMenu.vue.d.ts

@@ -1,14 +1,12 @@
-import '@synergy-design-system/components/components/menu/menu.js';
-import type { SynSelectEvent } from '@synergy-design-system/components';
-import type { SynMenu } from '@synergy-design-system/components';
+import { SynSelectEvent, SynMenu } from '@synergy-design-system/components';
 export type { SynSelectEvent } from '@synergy-design-system/components';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    nativeElement: import("vue").Ref<SynMenu | undefined, SynMenu | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{}, {
+    nativeElement: import('vue').Ref<SynMenu | undefined, SynMenu | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "syn-select": (e: SynSelectEvent) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
     "onSyn-select"?: ((e: SynSelectEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/components/SynVueMenu.vue.js

@@ -0,0 +1,24 @@
+import { defineComponent, ref, openBlock, createElementBlock, renderSlot } from "vue";
+import "@synergy-design-system/components/components/menu/menu.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueMenu",
+  emits: ["syn-select"],
+  setup(__props, { expose: __expose }) {
+    const nativeElement = ref();
+    __expose({
+      nativeElement
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("syn-menu", {
+        onSynSelect: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("syn-select", $event)),
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 544);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueMenu.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./SynVueMenu.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueMenuItem.vue.d.ts

@@ -1,43 +1,63 @@
-import '@synergy-design-system/components/components/menu-item/menu-item.js';
-import type { SynMenuItem } from '@synergy-design-system/components';
-type __VLS_Props = {
+import { SynMenuItem } from '@synergy-design-system/components';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        nativeElement: unknown;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{
     /**
      * The type of menu item to render.
      * To use `checked`, this value must be set to `checkbox`.
      */
-    type?: SynMenuItem['type'];
+    type?: SynMenuItem["type"];
     /**
      * Draws the item in a checked state.
      */
-    checked?: SynMenuItem['checked'];
+    checked?: SynMenuItem["checked"];
     /**
      * A unique value to store in the menu item.
      * This can be used as a way to identify menu items when selected.
      */
-    value?: SynMenuItem['value'];
+    value?: SynMenuItem["value"];
     /**
      * Draws the menu item in a loading state.
      */
-    loading?: SynMenuItem['loading'];
+    loading?: SynMenuItem["loading"];
     /**
      * Draws the menu item in a disabled state, preventing selection.
      */
-    disabled?: SynMenuItem['disabled'];
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        nativeElement: unknown;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    nativeElement: import("vue").Ref<SynMenuItem | undefined, SynMenuItem | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    disabled?: SynMenuItem["disabled"];
+}, {
+    nativeElement: import('vue').Ref<SynMenuItem | undefined, SynMenuItem | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * The type of menu item to render.
+     * To use `checked`, this value must be set to `checkbox`.
+     */
+    type?: SynMenuItem["type"];
+    /**
+     * Draws the item in a checked state.
+     */
+    checked?: SynMenuItem["checked"];
+    /**
+     * A unique value to store in the menu item.
+     * This can be used as a way to identify menu items when selected.
+     */
+    value?: SynMenuItem["value"];
+    /**
+     * Draws the menu item in a loading state.
+     */
+    loading?: SynMenuItem["loading"];
+    /**
+     * Draws the menu item in a disabled state, preventing selection.
+     */
+    disabled?: SynMenuItem["disabled"];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/SynVueMenuItem.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, mergeProps, renderSlot } from "vue";
+import "@synergy-design-system/components/components/menu-item/menu-item.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueMenuItem",
+  props: {
+    type: {},
+    checked: {},
+    value: {},
+    loading: {},
+    disabled: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const nativeElement = ref();
+    __expose({
+      nativeElement
+    });
+    const props = __props;
+    const visibleProps = computed(
+      () => Object.fromEntries(
+        Object.entries(props).filter(([, value]) => typeof value !== "undefined")
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("syn-menu-item", mergeProps(visibleProps.value, {
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueMenuItem.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./SynVueMenuItem.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueMenuLabel.vue.d.ts

@@ -1,19 +1,17 @@
-import '@synergy-design-system/components/components/menu-label/menu-label.js';
-import type { SynMenuLabel } from '@synergy-design-system/components';
+import { SynMenuLabel } from '@synergy-design-system/components';
 declare function __VLS_template(): {
-    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         nativeElement: unknown;
     };
-    rootEl: any;
+    attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    nativeElement: import("vue").Ref<SynMenuLabel | undefined, SynMenuLabel | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    nativeElement: import('vue').Ref<SynMenuLabel | undefined, SynMenuLabel | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/SynVueMenuLabel.vue.js

@@ -0,0 +1,22 @@
+import { defineComponent, ref, openBlock, createElementBlock, renderSlot } from "vue";
+import "@synergy-design-system/components/components/menu-label/menu-label.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueMenuLabel",
+  setup(__props, { expose: __expose }) {
+    const nativeElement = ref();
+    __expose({
+      nativeElement
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("syn-menu-label", {
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueMenuLabel.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./SynVueMenuLabel.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueNavItem.vue.d.ts

@@ -1,14 +1,9 @@
-import '@synergy-design-system/components/components/nav-item/nav-item.js';
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynNavItem } from '@synergy-design-system/components';
+import { SynShowEvent, SynHideEvent, SynBlurEvent, SynFocusEvent, SynNavItem } from '@synergy-design-system/components';
 export type { SynShowEvent } from '@synergy-design-system/components';
 export type { SynHideEvent } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     /**
   * The navigation item's href target.
   If provided, the navigation item will use an anchor tag otherwise it will use a button tag.
@@ -42,13 +37,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
    */
     divider?: SynNavItem["divider"];
 }, {
-    nativeElement: import("vue").Ref<SynNavItem | undefined, SynNavItem | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    nativeElement: import('vue').Ref<SynNavItem | undefined, SynNavItem | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "syn-show": (e: SynShowEvent) => any;
+    "syn-hide": (e: SynHideEvent) => any;
     "syn-blur": (e: SynBlurEvent) => any;
     "syn-focus": (e: SynFocusEvent) => any;
-    "syn-hide": (e: SynHideEvent) => any;
-    "syn-show": (e: SynShowEvent) => any;
-}, string, import("vue").PublicProps, Readonly<{
+}, string, import('vue').PublicProps, Readonly<{
     /**
   * The navigation item's href target.
   If provided, the navigation item will use an anchor tag otherwise it will use a button tag.
@@ -82,11 +77,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
    */
     divider?: SynNavItem["divider"];
 }> & Readonly<{
+    "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
+    "onSyn-hide"?: ((e: SynHideEvent) => any) | undefined;
     "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
-    "onSyn-hide"?: ((e: SynHideEvent) => any) | undefined;
-    "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/components/SynVueNavItem.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, mergeProps, renderSlot } from "vue";
+import "@synergy-design-system/components/components/nav-item/nav-item.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueNavItem",
+  props: {
+    href: {},
+    current: {},
+    disabled: {},
+    horizontal: {},
+    chevron: {},
+    open: {},
+    divider: {}
+  },
+  emits: ["syn-show", "syn-hide", "syn-blur", "syn-focus"],
+  setup(__props, { expose: __expose }) {
+    const nativeElement = ref();
+    __expose({
+      nativeElement
+    });
+    const props = __props;
+    const visibleProps = computed(
+      () => Object.fromEntries(
+        Object.entries(props).filter(([, value]) => typeof value !== "undefined")
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("syn-nav-item", mergeProps({
+        onSynShow: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("syn-show", $event)),
+        onSynHide: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("syn-hide", $event)),
+        onSynBlur: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("syn-blur", $event)),
+        onSynFocus: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("syn-focus", $event))
+      }, visibleProps.value, {
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueNavItem.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./SynVueNavItem.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueOptgroup.vue.d.ts

@@ -1,30 +1,37 @@
-import '@synergy-design-system/components/components/optgroup/optgroup.js';
-import type { SynOptgroup } from '@synergy-design-system/components';
-type __VLS_Props = {
-    /**
-     * Disables all options in the optgroup.
-     */
-    disabled?: SynOptgroup['disabled'];
-    /**
-     * The optgroups label.
-     * If you need to display HTML, use the `label` slot instead.
-     */
-    label?: SynOptgroup['label'];
-};
+import { SynOptgroup } from '@synergy-design-system/components';
 declare function __VLS_template(): {
-    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         nativeElement: unknown;
     };
-    rootEl: any;
+    attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    nativeElement: import("vue").Ref<SynOptgroup | undefined, SynOptgroup | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<{
+    /**
+     * Disables all options in the optgroup.
+     */
+    disabled?: SynOptgroup["disabled"];
+    /**
+     * The optgroups label.
+     * If you need to display HTML, use the `label` slot instead.
+     */
+    label?: SynOptgroup["label"];
+}, {
+    nativeElement: import('vue').Ref<SynOptgroup | undefined, SynOptgroup | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * Disables all options in the optgroup.
+     */
+    disabled?: SynOptgroup["disabled"];
+    /**
+     * The optgroups label.
+     * If you need to display HTML, use the `label` slot instead.
+     */
+    label?: SynOptgroup["label"];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/SynVueOptgroup.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, mergeProps, renderSlot } from "vue";
+import "@synergy-design-system/components/components/optgroup/optgroup.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueOptgroup",
+  props: {
+    disabled: {},
+    label: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const nativeElement = ref();
+    __expose({
+      nativeElement
+    });
+    const props = __props;
+    const visibleProps = computed(
+      () => Object.fromEntries(
+        Object.entries(props).filter(([, value]) => typeof value !== "undefined")
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("syn-optgroup", mergeProps(visibleProps.value, {
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueOptgroup.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./SynVueOptgroup.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueOption.vue.d.ts

@@ -1,6 +1,15 @@
-import '@synergy-design-system/components/components/option/option.js';
-import type { SynOption } from '@synergy-design-system/components';
-type __VLS_Props = {
+import { SynOption } from '@synergy-design-system/components';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        nativeElement: unknown;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{
     /**
   * The option's value.
   * When selected, the containing form control will receive this value.
@@ -9,26 +18,28 @@ type __VLS_Props = {
   * Values may not contain spaces, as spaces are used as delimiters when listing
   multiple values.
    */
-    value?: SynOption['value'];
+    value?: SynOption["value"];
     /**
      * Draws the option in a disabled state, preventing selection.
      */
-    disabled?: SynOption['disabled'];
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        nativeElement: unknown;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    nativeElement: import("vue").Ref<SynOption | undefined, SynOption | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    disabled?: SynOption["disabled"];
+}, {
+    nativeElement: import('vue').Ref<SynOption | undefined, SynOption | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+  * The option's value.
+  * When selected, the containing form control will receive this value.
+  * The value must be unique
+  from other options in the same group.
+  * Values may not contain spaces, as spaces are used as delimiters when listing
+  multiple values.
+   */
+    value?: SynOption["value"];
+    /**
+     * Draws the option in a disabled state, preventing selection.
+     */
+    disabled?: SynOption["disabled"];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {