@synergy-design-system/vue 2.6.0 → 2.7.1

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

@@ -10,25 +10,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * If you need to display HTML, use the `label` slot
   instead.
    */
-    label?: string | undefined;
+    label?: SynRadioGroup["label"];
     /**
   * The radio groups's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynRadioGroup["helpText"];
     /**
   * The name of the radio group, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynRadioGroup["name"];
     /**
   * The current value of the radio group, submitted as a name/value pair with form data.
    */
-    value?: string | undefined;
+    value?: SynRadioGroup["value"];
     /**
   * The radio group's size.
   * This size will be applied to all child radios and radio buttons.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynRadioGroup["size"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -36,15 +36,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The form must be in
   the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynRadioGroup["form"];
     /**
   * Ensures a child radio is checked before allowing the containing form to submit.
    */
-    required?: boolean | undefined;
+    required?: SynRadioGroup["required"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | undefined;
+    modelValue?: SynRadioGroup["value"];
 }>, {
     nativeElement: import("vue").Ref<SynRadioGroup | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -59,25 +59,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * If you need to display HTML, use the `label` slot
   instead.
    */
-    label?: string | undefined;
+    label?: SynRadioGroup["label"];
     /**
   * The radio groups's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynRadioGroup["helpText"];
     /**
   * The name of the radio group, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynRadioGroup["name"];
     /**
   * The current value of the radio group, submitted as a name/value pair with form data.
    */
-    value?: string | undefined;
+    value?: SynRadioGroup["value"];
     /**
   * The radio group's size.
   * This size will be applied to all child radios and radio buttons.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynRadioGroup["size"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -85,15 +85,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The form must be in
   the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynRadioGroup["form"];
     /**
   * Ensures a child radio is checked before allowing the containing form to submit.
    */
-    required?: boolean | undefined;
+    required?: SynRadioGroup["required"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | undefined;
+    modelValue?: SynRadioGroup["value"];
 }>>> & {
     "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
     "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;

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

@@ -10,57 +10,57 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The name of the range, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynRange["name"];
     /**
   * The range's label.
   * If you need to display HTML, use the `label` slot instead.
    */
-    label?: string | undefined;
+    label?: SynRange["label"];
     /**
   * The range's help text.
   * If you need to display HTML, use the help-text slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynRange["helpText"];
     /**
   * Disables the range.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynRange["disabled"];
     /**
   * The minimum acceptable value of the range.
    */
-    min?: number | undefined;
+    min?: SynRange["min"];
     /**
   * The maximum acceptable value of the range.
    */
-    max?: number | undefined;
+    max?: SynRange["max"];
     /**
   * The interval at which the range will increase and decrease.
    */
-    step?: number | undefined;
+    step?: SynRange["step"];
     /**
   * The range's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynRange["size"];
     /**
   * The preferred placement of the range's tooltip.
   * Use "none" to disable the tooltip
    */
-    tooltipPlacement?: "top" | "bottom" | "none" | undefined;
+    tooltipPlacement?: SynRange["tooltipPlacement"];
     /**
   * The current values of the input (in ascending order) as a string of space separated values
    */
-    value?: string | null | undefined;
+    value?: SynRange["value"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   This attribute allows you to place the form control outside of a form
   and associate it with the form that has this `id`.
   The form must be in the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynRange["form"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | null | undefined;
+    modelValue?: SynRange["value"];
 }>, {
     nativeElement: import("vue").Ref<SynRange | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -75,57 +75,57 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The name of the range, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynRange["name"];
     /**
   * The range's label.
   * If you need to display HTML, use the `label` slot instead.
    */
-    label?: string | undefined;
+    label?: SynRange["label"];
     /**
   * The range's help text.
   * If you need to display HTML, use the help-text slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynRange["helpText"];
     /**
   * Disables the range.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynRange["disabled"];
     /**
   * The minimum acceptable value of the range.
    */
-    min?: number | undefined;
+    min?: SynRange["min"];
     /**
   * The maximum acceptable value of the range.
    */
-    max?: number | undefined;
+    max?: SynRange["max"];
     /**
   * The interval at which the range will increase and decrease.
    */
-    step?: number | undefined;
+    step?: SynRange["step"];
     /**
   * The range's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynRange["size"];
     /**
   * The preferred placement of the range's tooltip.
   * Use "none" to disable the tooltip
    */
-    tooltipPlacement?: "top" | "bottom" | "none" | undefined;
+    tooltipPlacement?: SynRange["tooltipPlacement"];
     /**
   * The current values of the input (in ascending order) as a string of space separated values
    */
-    value?: string | null | undefined;
+    value?: SynRange["value"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   This attribute allows you to place the form control outside of a form
   and associate it with the form that has this `id`.
   The form must be in the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynRange["form"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | null | undefined;
+    modelValue?: SynRange["value"];
 }>>> & {
     "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;

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

@@ -1,20 +1,22 @@
 import '@synergy-design-system/components/components/range-tick/range-tick.js';
 import type { SynRangeTick } from '@synergy-design-system/components';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * Whether the tick should be shown as a subdivision.
    */
-    subdivision?: boolean | undefined;
+    subdivision?: SynRangeTick["subdivision"];
 }>, {
     nativeElement: import("vue").Ref<SynRangeTick | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * Whether the tick should be shown as a subdivision.
    */
-    subdivision?: boolean | undefined;
-}>>>, {}, {}>, {
-    default?(_: {}): any;
-}>;
+    subdivision?: SynRangeTick["subdivision"];
+}>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The name of the select, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynSelect["name"];
     /**
   * The current value of the select, submitted as a name/value pair with form data.
   * When `multiple` is enabled, the
@@ -22,62 +22,62 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   be an array.
   * **For this reason, values must not contain spaces.**
    */
-    value?: string | string[] | undefined;
+    value?: SynSelect["value"];
     /**
   * The select's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynSelect["size"];
     /**
   * Placeholder text to show as a hint when the select is empty.
    */
-    placeholder?: string | undefined;
+    placeholder?: SynSelect["placeholder"];
     /**
   * Allows more than one option to be selected.
    */
-    multiple?: boolean | undefined;
+    multiple?: SynSelect["multiple"];
     /**
   * The maximum number of selected options to show when `multiple` is true.
   * After the maximum, "+n" will be shown to
   indicate the number of additional items that are selected.
   * Set to 0 to remove the limit.
    */
-    maxOptionsVisible?: number | undefined;
+    maxOptionsVisible?: SynSelect["maxOptionsVisible"];
     /**
   * Disables the select control.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynSelect["disabled"];
     /**
   * Adds a clear button when the select is not empty.
    */
-    clearable?: boolean | undefined;
+    clearable?: SynSelect["clearable"];
     /**
   * Indicates whether or not the select is open.
   * You can toggle this attribute to show and hide the menu, or you can
   use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
    */
-    open?: boolean | undefined;
+    open?: SynSelect["open"];
     /**
   * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
   `overflow: auto|scroll`.
   * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
    */
-    hoist?: boolean | undefined;
+    hoist?: SynSelect["hoist"];
     /**
   * The select's label.
   * If you need to display HTML, use the `label` slot instead.
    */
-    label?: string | undefined;
+    label?: SynSelect["label"];
     /**
   * The preferred placement of the select's menu.
   * Note that the actual placement may vary as needed to keep the listbox
   inside of the viewport.
    */
-    placement?: "top" | "bottom" | undefined;
+    placement?: SynSelect["placement"];
     /**
   * The select's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynSelect["helpText"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -85,11 +85,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The form must be in
   the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynSelect["form"];
     /**
   * The select's required attribute.
    */
-    required?: boolean | undefined;
+    required?: SynSelect["required"];
     /**
   * A function that customizes the tags to be rendered when multiple=true.
   * The first argument is the option, the second
@@ -97,11 +97,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
   the specified value.
    */
-    getTag?: ((option: import("@synergy-design-system/components").SynOption, index: number) => string | HTMLElement | import("lit").TemplateResult) | undefined;
+    getTag?: SynSelect["getTag"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | string[] | undefined;
+    modelValue?: SynSelect["value"];
 }>, {
     nativeElement: import("vue").Ref<SynSelect | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -120,7 +120,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The name of the select, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynSelect["name"];
     /**
   * The current value of the select, submitted as a name/value pair with form data.
   * When `multiple` is enabled, the
@@ -128,62 +128,62 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   be an array.
   * **For this reason, values must not contain spaces.**
    */
-    value?: string | string[] | undefined;
+    value?: SynSelect["value"];
     /**
   * The select's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynSelect["size"];
     /**
   * Placeholder text to show as a hint when the select is empty.
    */
-    placeholder?: string | undefined;
+    placeholder?: SynSelect["placeholder"];
     /**
   * Allows more than one option to be selected.
    */
-    multiple?: boolean | undefined;
+    multiple?: SynSelect["multiple"];
     /**
   * The maximum number of selected options to show when `multiple` is true.
   * After the maximum, "+n" will be shown to
   indicate the number of additional items that are selected.
   * Set to 0 to remove the limit.
    */
-    maxOptionsVisible?: number | undefined;
+    maxOptionsVisible?: SynSelect["maxOptionsVisible"];
     /**
   * Disables the select control.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynSelect["disabled"];
     /**
   * Adds a clear button when the select is not empty.
    */
-    clearable?: boolean | undefined;
+    clearable?: SynSelect["clearable"];
     /**
   * Indicates whether or not the select is open.
   * You can toggle this attribute to show and hide the menu, or you can
   use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
    */
-    open?: boolean | undefined;
+    open?: SynSelect["open"];
     /**
   * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
   `overflow: auto|scroll`.
   * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
    */
-    hoist?: boolean | undefined;
+    hoist?: SynSelect["hoist"];
     /**
   * The select's label.
   * If you need to display HTML, use the `label` slot instead.
    */
-    label?: string | undefined;
+    label?: SynSelect["label"];
     /**
   * The preferred placement of the select's menu.
   * Note that the actual placement may vary as needed to keep the listbox
   inside of the viewport.
    */
-    placement?: "top" | "bottom" | undefined;
+    placement?: SynSelect["placement"];
     /**
   * The select's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynSelect["helpText"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -191,11 +191,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The form must be in
   the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynSelect["form"];
     /**
   * The select's required attribute.
    */
-    required?: boolean | undefined;
+    required?: SynSelect["required"];
     /**
   * A function that customizes the tags to be rendered when multiple=true.
   * The first argument is the option, the second
@@ -203,11 +203,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
   the specified value.
    */
-    getTag?: ((option: import("@synergy-design-system/components").SynOption, index: number) => string | HTMLElement | import("lit").TemplateResult) | undefined;
+    getTag?: SynSelect["getTag"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | string[] | undefined;
+    modelValue?: SynSelect["value"];
 }>>> & {
     "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
     "onSyn-after-show"?: ((e: SynAfterShowEvent) => any) | undefined;

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

@@ -21,7 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   or without an overlay for non-touch devices.
   Without `open`, the side-nav will only show the prefix of nav-item's.
    */
-    open?: boolean | undefined;
+    open?: SynSideNav["open"];
     /**
   * Use the rail attribute to only show the prefix of navigation items in closed state.
   This will open on hover on the rail navigation.
@@ -30,12 +30,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
   If this is not the case you should use a burger navigation.
    */
-    rail?: boolean | undefined;
+    rail?: SynSideNav["rail"];
     /**
   * By default, the side-nav traps the focus if in non-rail mode and open.
   To disable the focus trapping, set this attribute.
    */
-    noFocusTrapping?: boolean | undefined;
+    noFocusTrapping?: SynSideNav["noFocusTrapping"];
 }>, {
     nativeElement: import("vue").Ref<SynSideNav | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -60,7 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   or without an overlay for non-touch devices.
   Without `open`, the side-nav will only show the prefix of nav-item's.
    */
-    open?: boolean | undefined;
+    open?: SynSideNav["open"];
     /**
   * Use the rail attribute to only show the prefix of navigation items in closed state.
   This will open on hover on the rail navigation.
@@ -69,12 +69,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
   If this is not the case you should use a burger navigation.
    */
-    rail?: boolean | undefined;
+    rail?: SynSideNav["rail"];
     /**
   * By default, the side-nav traps the focus if in non-rail mode and open.
   To disable the focus trapping, set this attribute.
    */
-    noFocusTrapping?: boolean | undefined;
+    noFocusTrapping?: SynSideNav["noFocusTrapping"];
 }>>> & {
     "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
     "onSyn-after-show"?: ((e: SynAfterShowEvent) => any) | undefined;

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

@@ -6,27 +6,27 @@ export type { SynInputEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
 export type { SynInvalidEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
-    title?: string | undefined;
+    title?: SynSwitch["title"];
     /**
   * The name of the switch, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynSwitch["name"];
     /**
   * The current value of the switch, submitted as a name/value pair with form data.
    */
-    value?: string | undefined;
+    value?: SynSwitch["value"];
     /**
   * The switch's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynSwitch["size"];
     /**
   * Disables the switch.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynSwitch["disabled"];
     /**
   * Draws the switch in a checked state.
    */
-    checked?: boolean | undefined;
+    checked?: SynSwitch["checked"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -34,20 +34,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The form must be in
   the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynSwitch["form"];
     /**
   * Makes the switch a required field.
    */
-    required?: boolean | undefined;
+    required?: SynSwitch["required"];
     /**
   * The switch's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynSwitch["helpText"];
     /**
   * Support for two way data binding
    */
-    modelValue?: boolean | undefined;
+    modelValue?: SynSwitch["checked"];
 }>, {
     nativeElement: import("vue").Ref<SynSwitch | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -58,27 +58,27 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "syn-input": (e: SynInputEvent) => void;
     "update:modelValue": (newValue: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    title?: string | undefined;
+    title?: SynSwitch["title"];
     /**
   * The name of the switch, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynSwitch["name"];
     /**
   * The current value of the switch, submitted as a name/value pair with form data.
    */
-    value?: string | undefined;
+    value?: SynSwitch["value"];
     /**
   * The switch's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynSwitch["size"];
     /**
   * Disables the switch.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynSwitch["disabled"];
     /**
   * Draws the switch in a checked state.
    */
-    checked?: boolean | undefined;
+    checked?: SynSwitch["checked"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -86,20 +86,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The form must be in
   the same document or shadow root for this to work.
    */
-    form?: string | undefined;
+    form?: SynSwitch["form"];
     /**
   * Makes the switch a required field.
    */
-    required?: boolean | undefined;
+    required?: SynSwitch["required"];
     /**
   * The switch's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynSwitch["helpText"];
     /**
   * Support for two way data binding
    */
-    modelValue?: boolean | undefined;
+    modelValue?: SynSwitch["checked"];
 }>>> & {
     "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;