@synergy-design-system/vue 2.6.0 → 2.7.1

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

@@ -6,19 +6,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The name of the tab panel this tab is associated with.
   * The panel must be located in the same tab group.
    */
-    panel?: string | undefined;
+    panel?: SynTab["panel"];
     /**
   * Draws the tab in an active state.
    */
-    active?: boolean | undefined;
+    active?: SynTab["active"];
     /**
   * Makes the tab closable and shows a close button.
    */
-    closable?: boolean | undefined;
+    closable?: SynTab["closable"];
     /**
   * Disables the tab and prevents selection.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynTab["disabled"];
 }>, {
     nativeElement: import("vue").Ref<SynTab | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -28,19 +28,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The name of the tab panel this tab is associated with.
   * The panel must be located in the same tab group.
    */
-    panel?: string | undefined;
+    panel?: SynTab["panel"];
     /**
   * Draws the tab in an active state.
    */
-    active?: boolean | undefined;
+    active?: SynTab["active"];
     /**
   * Makes the tab closable and shows a close button.
    */
-    closable?: boolean | undefined;
+    closable?: SynTab["closable"];
     /**
   * Disables the tab and prevents selection.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynTab["disabled"];
 }>>> & {
     "onSyn-close"?: ((e: SynCloseEvent) => any) | undefined;
 }, {}, {}>, {

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

@@ -6,26 +6,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The placement of the tabs.
    */
-    placement?: "top" | "end" | "start" | undefined;
+    placement?: SynTabGroup["placement"];
     /**
   * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
   * When set to
   manual, the tab will receive focus but will not show until the user presses spacebar or enter.
    */
-    activation?: "auto" | "manual" | undefined;
+    activation?: SynTabGroup["activation"];
     /**
   * Disables the scroll arrows that appear when tabs overflow.
    */
-    noScrollControls?: boolean | undefined;
+    noScrollControls?: SynTabGroup["noScrollControls"];
     /**
   * Draws the tab group as a contained element.
    */
-    contained?: boolean | undefined;
+    contained?: SynTabGroup["contained"];
     /**
   * Draws the tab group with edges instead of roundings.
   * Takes only effect if used with the 'contained' property
    */
-    sharp?: boolean | undefined;
+    sharp?: SynTabGroup["sharp"];
 }>, {
     nativeElement: import("vue").Ref<SynTabGroup | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -35,26 +35,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The placement of the tabs.
    */
-    placement?: "top" | "end" | "start" | undefined;
+    placement?: SynTabGroup["placement"];
     /**
   * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
   * When set to
   manual, the tab will receive focus but will not show until the user presses spacebar or enter.
    */
-    activation?: "auto" | "manual" | undefined;
+    activation?: SynTabGroup["activation"];
     /**
   * Disables the scroll arrows that appear when tabs overflow.
    */
-    noScrollControls?: boolean | undefined;
+    noScrollControls?: SynTabGroup["noScrollControls"];
     /**
   * Draws the tab group as a contained element.
    */
-    contained?: boolean | undefined;
+    contained?: SynTabGroup["contained"];
     /**
   * Draws the tab group with edges instead of roundings.
   * Takes only effect if used with the 'contained' property
    */
-    sharp?: boolean | undefined;
+    sharp?: SynTabGroup["sharp"];
 }>>> & {
     "onSyn-tab-show"?: ((e: SynTabShowEvent) => any) | undefined;
     "onSyn-tab-hide"?: ((e: SynTabHideEvent) => any) | undefined;

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

@@ -1,28 +1,30 @@
 import '@synergy-design-system/components/components/tab-panel/tab-panel.js';
 import type { SynTabPanel } 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<{
     /**
   * The tab panel's name.
    */
-    name?: string | undefined;
+    name?: SynTabPanel["name"];
     /**
   * When true, the tab panel will be shown.
    */
-    active?: boolean | undefined;
+    active?: SynTabPanel["active"];
 }>, {
     nativeElement: import("vue").Ref<SynTabPanel | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The tab panel's name.
    */
-    name?: string | undefined;
+    name?: SynTabPanel["name"];
     /**
   * When true, the tab panel will be shown.
    */
-    active?: boolean | undefined;
-}>>>, {}, {}>, {
-    default?(_: {}): any;
-}>;
+    active?: SynTabPanel["active"];
+}>>>, {}, {}>;
+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/SynVueTag.vue.d.ts

@@ -5,11 +5,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The tag's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynTag["size"];
     /**
   * Makes the tag removable and shows a remove button.
    */
-    removable?: boolean | undefined;
+    removable?: SynTag["removable"];
 }>, {
     nativeElement: import("vue").Ref<SynTag | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -18,11 +18,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The tag's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynTag["size"];
     /**
   * Makes the tag removable and shows a remove button.
    */
-    removable?: boolean | undefined;
+    removable?: SynTag["removable"];
 }>>> & {
     "onSyn-remove"?: ((e: SynRemoveEvent) => any) | undefined;
 }, {}, {}>, {

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

@@ -6,49 +6,49 @@ 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<__VLS_TypePropsToOption<{
-    title?: string | undefined;
+    title?: SynTextarea["title"];
     /**
   * The name of the textarea, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynTextarea["name"];
     /**
   * The current value of the textarea, submitted as a name/value pair with form data.
    */
-    value?: string | undefined;
+    value?: SynTextarea["value"];
     /**
   * The textarea's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynTextarea["size"];
     /**
   * The textarea's label.
   * If you need to display HTML, use the `label` slot instead.
    */
-    label?: string | undefined;
+    label?: SynTextarea["label"];
     /**
   * The textarea's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynTextarea["helpText"];
     /**
   * Placeholder text to show as a hint when the input is empty.
    */
-    placeholder?: string | undefined;
+    placeholder?: SynTextarea["placeholder"];
     /**
   * The number of rows to display by default.
    */
-    rows?: number | undefined;
+    rows?: SynTextarea["rows"];
     /**
   * Controls how the textarea can be resized.
    */
-    resize?: "vertical" | "none" | "auto" | undefined;
+    resize?: SynTextarea["resize"];
     /**
   * Disables the textarea.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynTextarea["disabled"];
     /**
   * Makes the textarea readonly.
    */
-    readonly?: boolean | undefined;
+    readonly?: SynTextarea["readonly"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -56,54 +56,54 @@ 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?: SynTextarea["form"];
     /**
   * Makes the textarea a required field.
    */
-    required?: boolean | undefined;
+    required?: SynTextarea["required"];
     /**
   * The minimum length of input that will be considered valid.
    */
-    minlength?: number | undefined;
+    minlength?: SynTextarea["minlength"];
     /**
   * The maximum length of input that will be considered valid.
    */
-    maxlength?: number | undefined;
+    maxlength?: SynTextarea["maxlength"];
     /**
   * Controls whether and how text input is automatically capitalized as it is entered by the user.
    */
-    autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined;
+    autocapitalize?: SynTextarea["autocapitalize"];
     /**
   * Indicates whether the browser's autocorrect feature is on or off.
    */
-    autocorrect?: string | undefined;
+    autocorrect?: SynTextarea["autocorrect"];
     /**
   * Specifies what permission the browser has to provide assistance in filling out form field values.
   * Refer to
   [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
    */
-    autocomplete?: string | undefined;
+    autocomplete?: SynTextarea["autocomplete"];
     /**
   * Indicates that the input should receive focus on page load.
    */
-    autofocus?: boolean | undefined;
+    autofocus?: SynTextarea["autofocus"];
     /**
   * Used to customize the label or icon of the Enter key on virtual keyboards.
    */
-    enterkeyhint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterkeyhint?: SynTextarea["enterkeyhint"];
     /**
   * Enables spell checking on the textarea.
    */
-    spellcheck?: boolean | undefined;
+    spellcheck?: SynTextarea["spellcheck"];
     /**
   * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
   keyboard on supportive devices.
    */
-    inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "decimal" | "numeric" | undefined;
+    inputmode?: SynTextarea["inputmode"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | undefined;
+    modelValue?: SynTextarea["value"];
 }>, {
     nativeElement: import("vue").Ref<SynTextarea | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -114,49 +114,49 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "syn-input": (e: SynInputEvent) => void;
     "update:modelValue": (newValue: string) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    title?: string | undefined;
+    title?: SynTextarea["title"];
     /**
   * The name of the textarea, submitted as a name/value pair with form data.
    */
-    name?: string | undefined;
+    name?: SynTextarea["name"];
     /**
   * The current value of the textarea, submitted as a name/value pair with form data.
    */
-    value?: string | undefined;
+    value?: SynTextarea["value"];
     /**
   * The textarea's size.
    */
-    size?: "medium" | "large" | "small" | undefined;
+    size?: SynTextarea["size"];
     /**
   * The textarea's label.
   * If you need to display HTML, use the `label` slot instead.
    */
-    label?: string | undefined;
+    label?: SynTextarea["label"];
     /**
   * The textarea's help text.
   * If you need to display HTML, use the `help-text` slot instead.
    */
-    helpText?: string | undefined;
+    helpText?: SynTextarea["helpText"];
     /**
   * Placeholder text to show as a hint when the input is empty.
    */
-    placeholder?: string | undefined;
+    placeholder?: SynTextarea["placeholder"];
     /**
   * The number of rows to display by default.
    */
-    rows?: number | undefined;
+    rows?: SynTextarea["rows"];
     /**
   * Controls how the textarea can be resized.
    */
-    resize?: "vertical" | "none" | "auto" | undefined;
+    resize?: SynTextarea["resize"];
     /**
   * Disables the textarea.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynTextarea["disabled"];
     /**
   * Makes the textarea readonly.
    */
-    readonly?: boolean | undefined;
+    readonly?: SynTextarea["readonly"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -164,54 +164,54 @@ 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?: SynTextarea["form"];
     /**
   * Makes the textarea a required field.
    */
-    required?: boolean | undefined;
+    required?: SynTextarea["required"];
     /**
   * The minimum length of input that will be considered valid.
    */
-    minlength?: number | undefined;
+    minlength?: SynTextarea["minlength"];
     /**
   * The maximum length of input that will be considered valid.
    */
-    maxlength?: number | undefined;
+    maxlength?: SynTextarea["maxlength"];
     /**
   * Controls whether and how text input is automatically capitalized as it is entered by the user.
    */
-    autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined;
+    autocapitalize?: SynTextarea["autocapitalize"];
     /**
   * Indicates whether the browser's autocorrect feature is on or off.
    */
-    autocorrect?: string | undefined;
+    autocorrect?: SynTextarea["autocorrect"];
     /**
   * Specifies what permission the browser has to provide assistance in filling out form field values.
   * Refer to
   [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
    */
-    autocomplete?: string | undefined;
+    autocomplete?: SynTextarea["autocomplete"];
     /**
   * Indicates that the input should receive focus on page load.
    */
-    autofocus?: boolean | undefined;
+    autofocus?: SynTextarea["autofocus"];
     /**
   * Used to customize the label or icon of the Enter key on virtual keyboards.
    */
-    enterkeyhint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterkeyhint?: SynTextarea["enterkeyhint"];
     /**
   * Enables spell checking on the textarea.
    */
-    spellcheck?: boolean | undefined;
+    spellcheck?: SynTextarea["spellcheck"];
     /**
   * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
   keyboard on supportive devices.
    */
-    inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "decimal" | "numeric" | undefined;
+    inputmode?: SynTextarea["inputmode"];
     /**
   * Support for two way data binding
    */
-    modelValue?: string | undefined;
+    modelValue?: SynTextarea["value"];
 }>>> & {
     "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;

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

@@ -9,30 +9,30 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The tooltip's content.
   * If you need to display HTML, use the `content` slot instead.
    */
-    content?: string | undefined;
+    content?: SynTooltip["content"];
     /**
   * The preferred placement of the tooltip.
   * Note that the actual placement may vary as needed to keep the tooltip
   inside of the viewport.
    */
-    placement?: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined;
+    placement?: SynTooltip["placement"];
     /**
   * Disables the tooltip so it won't show when triggered.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynTooltip["disabled"];
     /**
   * The distance in pixels from which to offset the tooltip away from its target.
    */
-    distance?: number | undefined;
+    distance?: SynTooltip["distance"];
     /**
   * Indicates whether or not the tooltip is open.
   * You can use this in lieu of the show/hide methods.
    */
-    open?: boolean | undefined;
+    open?: SynTooltip["open"];
     /**
   * The distance in pixels from which to offset the tooltip along its target.
    */
-    skidding?: number | undefined;
+    skidding?: SynTooltip["skidding"];
     /**
   * Controls how the tooltip is activated.
   * Possible options include `click`, `hover`, `focus`, and `manual`.
@@ -41,14 +41,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * When manual is used, the tooltip must be activated
   programmatically.
    */
-    trigger?: string | undefined;
+    trigger?: SynTooltip["trigger"];
     /**
   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
   `overflow: auto|hidden|scroll`.
   * Hoisting uses a fixed positioning strategy that works in many, but not all,
   scenarios.
    */
-    hoist?: boolean | undefined;
+    hoist?: SynTooltip["hoist"];
 }>, {
     nativeElement: import("vue").Ref<SynTooltip | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -61,30 +61,30 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The tooltip's content.
   * If you need to display HTML, use the `content` slot instead.
    */
-    content?: string | undefined;
+    content?: SynTooltip["content"];
     /**
   * The preferred placement of the tooltip.
   * Note that the actual placement may vary as needed to keep the tooltip
   inside of the viewport.
    */
-    placement?: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined;
+    placement?: SynTooltip["placement"];
     /**
   * Disables the tooltip so it won't show when triggered.
    */
-    disabled?: boolean | undefined;
+    disabled?: SynTooltip["disabled"];
     /**
   * The distance in pixels from which to offset the tooltip away from its target.
    */
-    distance?: number | undefined;
+    distance?: SynTooltip["distance"];
     /**
   * Indicates whether or not the tooltip is open.
   * You can use this in lieu of the show/hide methods.
    */
-    open?: boolean | undefined;
+    open?: SynTooltip["open"];
     /**
   * The distance in pixels from which to offset the tooltip along its target.
    */
-    skidding?: number | undefined;
+    skidding?: SynTooltip["skidding"];
     /**
   * Controls how the tooltip is activated.
   * Possible options include `click`, `hover`, `focus`, and `manual`.
@@ -93,14 +93,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * When manual is used, the tooltip must be activated
   programmatically.
    */
-    trigger?: string | undefined;
+    trigger?: SynTooltip["trigger"];
     /**
   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
   `overflow: auto|hidden|scroll`.
   * Hoisting uses a fixed positioning strategy that works in many, but not all,
   scenarios.
    */
-    hoist?: boolean | undefined;
+    hoist?: SynTooltip["hoist"];
 }>>> & {
     "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
     "onSyn-after-show"?: ((e: SynAfterShowEvent) => any) | undefined;

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.6.0"
+    "@synergy-design-system/components": "^2.7.1"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,12 +40,12 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "devDependencies": {
     "@vue/tsconfig": "^0.5.1",
-    "vue": "^3.4.24"
+    "vue": "^3.4.38"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.7.0"
+    "@synergy-design-system/tokens": "^2.9.0"
   }
 }

package/src/components/SynVueDropdown.vue

@@ -21,7 +21,8 @@
  * @event syn-hide - Emitted when the dropdown closes.
  * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
  *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
  * @csspart trigger - The container that wraps the trigger.
  * @csspart panel - The panel that gets shown when the dropdown is open.
  *

package/src/components/SynVueSelect.vue

@@ -18,6 +18,7 @@
  * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -37,8 +38,9 @@
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.