@synergy-design-system/mcp 2.1.0 → 2.3.0

package/metadata/packages/components/components/syn-combobox/component.vue

@@ -6,12 +6,15 @@
 // ---------------------------------------------------------------------
 
 /**
- * @summary Comboboxes allow you to choose items from a menu of predefined options.
+ * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,
+ * allowing users to either select from predefined options or enter custom values (when not restricted).
+ *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
  * @status stable
  *
  * @dependency syn-icon
  * @dependency syn-popup
+ * @dependency syn-tag
  *
  * @slot - The listbox options. Must be `<syn-option>` elements.
  *    You can use `<syn-optgroup>`'s to group items visually.
@@ -41,7 +44,7 @@
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The combobox'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 that wraps the prefix, 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,
@@ -54,6 +57,12 @@
  * @csspart popup - The popup's exported `popup` part.
  * Use this to target the tooltip's popup container.
  * @csspart no-results - The container that wraps the "no results" message.
+ * @csspart tags - The container that houses option tags when `multiple` is used.
+ * @csspart tag - The individual tags that represent each selected option in `multiple`.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
  *
  * @animation combobox.show - The animation to use when showing the combobox.
  * @animation combobox.hide - The animation to use when hiding the combobox.
@@ -88,11 +97,6 @@ const props = defineProps<{
    */
   name?: SynCombobox['name'];
 
-  /**
-   * The current value of the combobox, submitted as a name/value pair with form data.
-   */
-  value?: SynCombobox['value'];
-
   /**
    * The combobox's size.
    */
@@ -154,9 +158,16 @@ The form must be in the same document or shadow root for this to work.
   /**
 * When set to `true`, restricts the combobox to only allow selection from the available options.
 Users will not be able to enter custom values that are not present in the list.
+This will always be true, if `multiple` is active.
  */
   restricted?: SynCombobox['restricted'];
 
+  /**
+* Allows more than one option to be selected.
+If `multiple` is set, the combobox will always be `restricted` to the available options
+ */
+  multiple?: SynCombobox['multiple'];
+
   /**
 * A function that customizes the rendered option.
 * The first argument is the option, the second
@@ -173,6 +184,38 @@ The default filter method is a case- and diacritic-insensitive string comparison
  */
   filter?: SynCombobox['filter'];
 
+  /**
+* The delimiter to use when setting the value when `multiple` is enabled.
+The default is a space ' ', but you can set it to a comma or other character(s).
+ */
+  delimiter?: SynCombobox['delimiter'];
+
+  /**
+* 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?: SynCombobox['maxOptionsVisible'];
+
+  /**
+* A function that customizes the tags to be rendered when `multiple` is true.
+* The first argument is the option, the second
+is the current tag's index.
+* The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
+the specified value.
+ */
+  getTag?: SynCombobox['getTag'];
+
+  /**
+* The current value of the combobox, submitted as a name/value pair with form data.
+* When `multiple` is enabled, the
+value attribute will be a list of values  separated by the delimiter, based on the options selected, and the value property will
+be an array.
+* **For this reason, values must not contain the delimiter character.**
+ */
+  value?: SynCombobox['value'];
+
   /**
    * Support for two way data binding
    */

package/metadata/packages/components/components/syn-details/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-details/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/components/syn-dialog/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-dialog/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { blurActiveElement } from '../../internal/closeActiveElement.js';

package/metadata/packages/components/components/syn-divider/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-divider/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';

package/metadata/packages/components/components/syn-drawer/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-drawer/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { blurActiveElement } from '../../internal/closeActiveElement.js';

package/metadata/packages/components/components/syn-dropdown/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-dropdown/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/components/syn-icon/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-icon/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-icon-button/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-icon-button/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html, literal } from 'lit/static-html.js';

package/metadata/packages/components/components/syn-input/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-input/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { defaultValue } from '../../internal/default-value.js';

package/metadata/packages/components/components/syn-menu/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-menu/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';

package/metadata/packages/components/components/syn-menu-item/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-menu-item/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { getTextContent, HasSlotController } from '../../internal/slot.js';

package/metadata/packages/components/components/syn-menu-label/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 export default css`

package/metadata/packages/components/components/syn-menu-label/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import SynDivider from '../divider/divider.component.js';

package/metadata/packages/components/components/syn-option/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-option/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
@@ -18,6 +11,7 @@ import styles from './option.styles.js';
 import customStyles from './option.custom.styles.js';
 import { delimiterToWhiteSpace } from './utility.js';
 import type { CSSResultGroup } from 'lit';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
  * @summary Options define the selectable items within various form controls such as [select](/components/select).
@@ -37,6 +31,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart prefix - The container that wraps the prefix.
  * @csspart suffix - The container that wraps the suffix.
  */
+@enableDefaultSettings('SynOption')
 export default class SynOption extends SynergyElement {
   static styles: CSSResultGroup = [componentStyles, styles, customStyles];
   static dependencies = { 'syn-icon': SynIcon };

package/metadata/packages/components/components/syn-popup/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-popup/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/components/syn-progress-bar/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-progress-bar/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-progress-ring/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-progress-ring/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';

package/metadata/packages/components/components/syn-radio/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-radio/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-radio-button/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 import buttonStyles from '../button/button.styles.js';

package/metadata/packages/components/components/syn-radio-button/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../../internal/slot.js';

package/metadata/packages/components/components/syn-radio-group/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-radio-group/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import {

package/metadata/packages/components/components/syn-resize-observer/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-resize-observer/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';

package/metadata/packages/components/components/syn-select/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-select/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/components/syn-spinner/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-spinner/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';

package/metadata/packages/components/components/syn-switch/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-switch/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { defaultValue } from '../../internal/default-value.js';