@synergy-design-system/react 2.22.6 → 2.23.0

package/dist/chunks/{chunk.CJHMQLMP.js → chunk.HGHLGB2S.js}

@@ -22,4 +22,4 @@ var SynInput = createComponent({
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.CJHMQLMP.js.map
+//# sourceMappingURL=chunk.HGHLGB2S.js.map

package/dist/chunks/{chunk.CJHMQLMP.js.map → chunk.HGHLGB2S.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/input.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/input/input.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBlurEvent } from '@synergy-design-system/components';\nimport type { SynChangeEvent } from '@synergy-design-system/components';\nimport type { SynClearEvent } from '@synergy-design-system/components';\nimport type { SynFocusEvent } from '@synergy-design-system/components';\nimport type { SynInputEvent } from '@synergy-design-system/components';\nimport type { SynInvalidEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-input';\nComponent.define('syn-input');\n\n/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy.style/components/input\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-divider\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.\n * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart stepper - The container that wraps the number stepper.\n * @csspart decrement-number-stepper - The decrement number stepper button.\n * @csspart increment-number-stepper - The increment number stepper button.\n * @csspart divider - The divider between the increment and decrement number stepper buttons.\n */\nexport const SynInput = createComponent({\n  displayName: 'SynInput',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynClear: 'syn-clear' as EventName<SynClearEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynClearEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAUtB,IAAM,UAAU;AAChB,UAAU,OAAO,WAAW;AA2CrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/input/input.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBlurEvent } from '@synergy-design-system/components';\nimport type { SynChangeEvent } from '@synergy-design-system/components';\nimport type { SynClearEvent } from '@synergy-design-system/components';\nimport type { SynFocusEvent } from '@synergy-design-system/components';\nimport type { SynInputEvent } from '@synergy-design-system/components';\nimport type { SynInvalidEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-input';\nComponent.define('syn-input');\n\n/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy.style/components/input\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-divider\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.\n * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart stepper - The container that wraps the number stepper.\n * @csspart decrement-number-stepper - The decrement number stepper button.\n * @csspart increment-number-stepper - The increment number stepper button.\n * @csspart divider - The divider between the increment and decrement number stepper buttons.\n *\n * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.\n * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.\n */\nexport const SynInput = createComponent({\n  displayName: 'SynInput',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynClear: 'syn-clear' as EventName<SynClearEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynClearEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAUtB,IAAM,UAAU;AAChB,UAAU,OAAO,WAAW;AAgDrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
   "names": []
 }

package/dist/components/input.d.ts

@@ -46,6 +46,11 @@ import type { SynInvalidEvent } from '@synergy-design-system/components';
  * @csspart decrement-number-stepper - The decrement number stepper button.
  * @csspart increment-number-stepper - The increment number stepper button.
  * @csspart divider - The divider between the increment and decrement number stepper buttons.
+ *
+ * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
+ * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
  */
 export declare const SynInput: import("@lit/react").ReactWebComponent<Component, {
     onSynBlur: EventName<SynBlurEvent>;

package/dist/components/input.js

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "../chunks/chunk.CJHMQLMP.js";
+} from "../chunks/chunk.HGHLGB2S.js";
 export {
   SynInput
 };

package/dist/index.js

@@ -81,7 +81,7 @@ import {
 } from "./chunks/chunk.FPGH7VQK.js";
 import {
   SynInput
-} from "./chunks/chunk.CJHMQLMP.js";
+} from "./chunks/chunk.HGHLGB2S.js";
 import {
   SynMenuItem
 } from "./chunks/chunk.C75OGWMX.js";

package/dist/types/syn-jsx-elements.d.ts

@@ -757,6 +757,11 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @csspart decrement-number-stepper - The decrement number stepper button.
  * @csspart increment-number-stepper - The increment number stepper button.
  * @csspart divider - The divider between the increment and decrement number stepper buttons.
+ *
+ * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
+ * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
  */ export type SynInputJSXElement = SynCustomElement<SynInput, [
     [
         'syn-blur',
@@ -2134,6 +2139,11 @@ declare module 'react' {
              * @csspart decrement-number-stepper - The decrement number stepper button.
              * @csspart increment-number-stepper - The increment number stepper button.
              * @csspart divider - The divider between the increment and decrement number stepper buttons.
+             *
+             * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
+             * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
+             * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
+             * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
              */ 'syn-input': SynInputJSXElement;
             /**
              * @summary Menus provide a list of options for the user to choose from.

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.7",
-    "@synergy-design-system/components": "^2.22.6"
+    "@synergy-design-system/components": "^2.23.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "2.22.6",
+  "version": "2.23.0",
   "devDependencies": {
     "@types/react": "^19.0.8",
     "react": "^19.0.0"