@sebgroup/green-core 2.9.0 → 2.10.0

package/components/input/input.component.d.ts

@@ -65,6 +65,14 @@ declare class Input extends GdsFormControlElement<string> {
      * keyboard on supportive devices.
      */
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /**
+     * This callback allows for customization of the character counter. It should return a tuple
+     * with the first value being the number of remaining characters, and the second value being
+     * the variant of the badge. If the second value is `false`, no badge will be displayed.
+     */
+    charCounterCallback: (self: GdsFormControlElement<string> & {
+        maxlength: number;
+    }) => readonly [number, false | "positive" | "negative"];
     private elInputAsync;
     private elInput;
     /**
@@ -81,6 +89,7 @@ declare class Input extends GdsFormControlElement<string> {
     constructor();
     focus(options?: FocusOptions): void;
     render(): any;
+    private _handleValueChange;
     _getValidityAnchor(): HTMLInputElement;
 }
 declare const GdsInput_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof Input;

package/components/input/input.component.js

@@ -2,9 +2,10 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet,
-  __privateMethod
+  __privateMethod,
+  __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn, shouldShowRemainingChars_get;
+var _charCounterComputed, _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn, shouldShowRemainingChars_get;
 import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -16,6 +17,7 @@ import { GdsFormControlHeader } from "../../primitives/form-control-header/form-
 import { gdsCustomElement, html } from "../../scoping.js";
 import formControlHostStyles from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
+import { watch } from "../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -25,6 +27,7 @@ import { GdsButton } from "../button/button.component.js";
 import { GdsFlex } from "../flex/flex.component.js";
 import { GdsFormControlElement } from "../form/form-control.js";
 import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
+import { charCounterCallbackDefault } from "../textarea/textarea.component.js";
 import InputStyles from "./input.styles.js";
 let Input = class extends GdsFormControlElement {
   constructor() {
@@ -41,6 +44,8 @@ let Input = class extends GdsFormControlElement {
     this.autocorrect = false;
     this.autofocus = false;
     this.spellcheck = true;
+    this.charCounterCallback = charCounterCallbackDefault;
+    __privateAdd(this, _charCounterComputed, this.charCounterCallback(this));
     __privateAdd(this, _handleOnInput, (e) => {
       const element = e.target;
       this.value = element.value;
@@ -116,16 +121,20 @@ let Input = class extends GdsFormControlElement {
       () => html` <gds-form-control-footer
             id="message"
             class="size-${this.size}"
-            .charCounter=${__privateGet(this, _Input_instances, shouldShowRemainingChars_get) ? this.maxlength - (this.value?.length || 0) : void 0}
+            .charCounter=${__privateGet(this, _charCounterComputed)}
             .errorMessage=${this.invalid ? this.errorMessage : void 0}
           ></gds-form-control-footer>`
     )}
     `;
   }
+  _handleValueChange() {
+    __privateSet(this, _charCounterComputed, this.charCounterCallback(this));
+  }
   _getValidityAnchor() {
     return this.elInput;
   }
 };
+_charCounterComputed = new WeakMap();
 _Input_instances = new WeakSet();
 shouldShowFooter_fn = function() {
   return !this.plain;
@@ -183,7 +192,7 @@ renderClearButton_fn = function() {
     return html`<gds-button
         size="${this.size === "small" ? "xs" : "small"}"
         rank="tertiary"
-        variant="${this.invalid ? "negative" : ""}"
+        variant="${ifDefined(this.invalid ? "negative" : void 0)}"
         ?disabled="${this.disabled}"
         label="${msg("Clear input")}"
         @click=${__privateGet(this, _handleClearBtnClick)}
@@ -195,7 +204,7 @@ renderClearButton_fn = function() {
   else return nothing;
 };
 shouldShowRemainingChars_get = function() {
-  return this.maxlength < Number.MAX_SAFE_INTEGER;
+  return __privateGet(this, _charCounterComputed)[1] !== false;
 };
 Input.styles = [tokens, formControlHostStyles, InputStyles];
 __decorateClass([
@@ -260,12 +269,18 @@ __decorateClass([
 __decorateClass([
   property()
 ], Input.prototype, "inputmode", 2);
+__decorateClass([
+  property({ attribute: false })
+], Input.prototype, "charCounterCallback", 2);
 __decorateClass([
   queryAsync("input")
 ], Input.prototype, "elInputAsync", 2);
 __decorateClass([
   query("input")
 ], Input.prototype, "elInput", 2);
+__decorateClass([
+  watch("value")
+], Input.prototype, "_handleValueChange", 1);
 Input = __decorateClass([
   localized()
 ], Input);

package/components/textarea/textarea.component.d.ts

@@ -46,7 +46,7 @@ declare class Textarea extends GdsFormControlElement<string> {
     /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
     autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
     /** Indicates whether the browser's autocorrect feature is on or off. */
-    autocorrect?: 'off' | 'on';
+    autocorrect: boolean;
     /**
      * 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.
@@ -56,6 +56,10 @@ declare class Textarea extends GdsFormControlElement<string> {
     autofocus: boolean;
     /** Enables spell checking on the input. */
     spellcheck: boolean;
+    /**
+     * Indicates how the control should wrap the value for form submission. Refer to
+     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea#wrap) for available values.
+     */
     wrap: 'hard' | 'soft';
     /** Used to customize the label or icon of the Enter key on virtual keyboards. */
     enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
@@ -64,6 +68,14 @@ declare class Textarea extends GdsFormControlElement<string> {
      * keyboard on supportive devices.
      */
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /**
+     * This callback allows for customization of the character counter. It should return a tuple
+     * with the first value being the number of remaining characters, and the second value being
+     * the variant of the badge. If the second value is `false`, no badge will be shown.
+     */
+    charCounterCallback: (self: GdsFormControlElement<string> & {
+        maxlength: number;
+    }) => readonly [number, false | "positive" | "negative"];
     private elTextareaAsync;
     private elTextarea;
     private fieldBase;
@@ -85,6 +97,7 @@ declare class Textarea extends GdsFormControlElement<string> {
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
+    private _handleValueChange;
     protected _getValidityAnchor(): HTMLTextAreaElement;
     private _setAutoHeight;
     private _handleRowsChange;
@@ -103,4 +116,11 @@ declare const GdsTextarea_base: (new (...args: any[]) => import("../../utils/mix
  */
 export declare class GdsTextarea extends GdsTextarea_base {
 }
+/**
+ * Default character counter callback function.
+ * Returns the number of remaining characters and the badge variant based on the current value length and maxlength.
+ */
+export declare const charCounterCallbackDefault: (self: GdsFormControlElement<string> & {
+    maxlength: number;
+}) => readonly [number, false | "positive" | "negative"];
 export {};

package/components/textarea/textarea.component.js

@@ -2,9 +2,10 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet,
-  __privateMethod
+  __privateMethod,
+  __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _Textarea_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeTextarea_fn, renderClearButton_fn, shouldShowRemainingChars_get;
+var _charCounterComputed, _Textarea_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeTextarea_fn, renderClearButton_fn, shouldShowRemainingChars_get;
 import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -42,8 +43,11 @@ let Textarea = class extends GdsFormControlElement {
     this.size = "large";
     this.plain = false;
     this.autocapitalize = "off";
+    this.autocorrect = false;
     this.autofocus = false;
     this.spellcheck = true;
+    this.charCounterCallback = charCounterCallbackDefault;
+    __privateAdd(this, _charCounterComputed, this.charCounterCallback(this));
     this._handleSlotChange = () => {
       requestAnimationFrame(() => {
         this._handleResize();
@@ -179,12 +183,15 @@ let Textarea = class extends GdsFormControlElement {
       () => html`<gds-form-control-footer
             id="footer"
             class="size-${this.size}"
-            .charCounter=${__privateGet(this, _Textarea_instances, shouldShowRemainingChars_get) ? this.maxlength - (this.value?.length || 0) : void 0}
+            .charCounter=${__privateGet(this, _charCounterComputed)}
             .errorMessage=${this.invalid ? this.errorMessage : void 0}
           ></gds-form-control-footer>`
     )}
     `;
   }
+  _handleValueChange() {
+    __privateSet(this, _charCounterComputed, this.charCounterCallback(this));
+  }
   _getValidityAnchor() {
     return this.elTextarea;
   }
@@ -227,6 +234,7 @@ let Textarea = class extends GdsFormControlElement {
     });
   }
 };
+_charCounterComputed = new WeakMap();
 _Textarea_instances = new WeakSet();
 shouldShowFooter_fn = function() {
   return !this.plain;
@@ -282,7 +290,7 @@ renderClearButton_fn = function() {
         <gds-button
           size="small"
           rank="tertiary"
-          variant="${this.invalid ? "negative" : ""}"
+          variant="${ifDefined(this.invalid ? "negative" : void 0)}"
           ?disabled="${this.disabled}"
           label="${msg("Clear input")}"
           @click=${__privateGet(this, _handleClearBtnClick)}
@@ -295,7 +303,7 @@ renderClearButton_fn = function() {
   else return nothing;
 };
 shouldShowRemainingChars_get = function() {
-  return this.maxlength < Number.MAX_SAFE_INTEGER;
+  return __privateGet(this, _charCounterComputed)[1] !== false;
 };
 Textarea.styles = [tokens, formControlHostStyle, TextareaStyles];
 __decorateClass([
@@ -337,7 +345,7 @@ __decorateClass([
   property()
 ], Textarea.prototype, "autocapitalize", 2);
 __decorateClass([
-  property()
+  property({ type: Boolean })
 ], Textarea.prototype, "autocorrect", 2);
 __decorateClass([
   property()
@@ -364,6 +372,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], Textarea.prototype, "inputmode", 2);
+__decorateClass([
+  property({ attribute: false })
+], Textarea.prototype, "charCounterCallback", 2);
 __decorateClass([
   queryAsync("textarea")
 ], Textarea.prototype, "elTextareaAsync", 2);
@@ -376,6 +387,9 @@ __decorateClass([
 __decorateClass([
   resizeObserver()
 ], Textarea.prototype, "_handleResize", 1);
+__decorateClass([
+  watch("value")
+], Textarea.prototype, "_handleValueChange", 1);
 __decorateClass([
   watch("value")
 ], Textarea.prototype, "_setAutoHeight", 1);
@@ -400,6 +414,14 @@ GdsTextarea = __decorateClass([
     ]
   })
 ], GdsTextarea);
+const charCounterCallbackDefault = (self) => {
+  const badgeType = (self.value?.length || 0) >= self.maxlength ? "negative" : "positive";
+  return [
+    self.maxlength - (self.value?.length || 0),
+    self.maxlength < Number.MAX_SAFE_INTEGER && badgeType
+  ];
+};
 export {
-  GdsTextarea
+  GdsTextarea,
+  charCounterCallbackDefault
 };

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.9.0";
+    this.semanticVersion = "2.10.0";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/form-control-footer/index.d.ts

@@ -1,7 +1,7 @@
 import { getReactComponent } from "../../../utils/react";
 import { GdsFormControlFooter as GdsFormControlFooterClass } from "../../../primitives/form-control-footer/form-control-footer.component";
 export declare const GdsFormControlFooter: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsFormControlFooterClass>>>) => import("react").ReactElement<Omit<{
-    charCounter?: number | undefined;
+    charCounter?: [number, import("../../..").GdsBadge["variant"] | boolean] | undefined;
     errorMessage?: string | undefined;
     connectedCallback?: (() => void) | undefined;
     render?: (() => any) | undefined;

package/generated/react/index.d.ts

@@ -52,9 +52,6 @@ export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
 export * from './radio-group/index.js';
 export * from './segment/index.js';
-export * from './sensitive-account/index.js';
-export * from './sensitive-date/index.js';
-export * from './sensitive-number/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -380,3 +377,6 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
+export * from './sensitive-account/index.js';
+export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -52,9 +52,6 @@ export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
 export * from "./radio-group/index.js";
 export * from "./segment/index.js";
-export * from "./sensitive-account/index.js";
-export * from "./sensitive-date/index.js";
-export * from "./sensitive-number/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -380,3 +377,6 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
+export * from "./sensitive-account/index.js";
+export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/index.js";

package/generated/react/input/index.d.ts

@@ -23,7 +23,7 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     maxlength?: number | undefined;
     size?: "small" | "large" | undefined;
     plain?: boolean | undefined;
-    type?: "number" | "search" | "time" | "text" | "date" | "email" | "datetime-local" | "password" | "tel" | "url" | undefined;
+    type?: "number" | "search" | "time" | "text" | "date" | "email" | "tel" | "url" | "datetime-local" | "password" | undefined;
     min?: (number | string) | undefined;
     max?: (number | string) | undefined;
     step?: (number | "any") | undefined;
@@ -34,6 +34,9 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     enterkeyhint?: ("enter" | "done" | "go" | "next" | "previous" | "search" | "send") | undefined;
     spellcheck?: boolean | undefined;
     inputmode?: ("none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url") | undefined;
+    charCounterCallback?: ((self: import("../../../components/form/form-control").GdsFormControlElement<string> & {
+        maxlength: number;
+    }) => readonly [number, false | "positive" | "negative"]) | undefined;
     test_getClearButton?: (() => import("../../..").GdsButton | null | undefined) | undefined;
     test_getFieldElement?: (() => Element | null | undefined) | undefined;
     focus?: ((options?: FocusOptions) => void) | undefined;

package/generated/react/textarea/index.d.ts

@@ -26,13 +26,16 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     size?: "small" | "large" | undefined;
     plain?: boolean | undefined;
     autocapitalize?: "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-    autocorrect?: ("off" | "on") | undefined;
+    autocorrect?: boolean | undefined;
     autocomplete?: string | undefined;
     autofocus?: boolean | undefined;
     spellcheck?: boolean | undefined;
     wrap?: "hard" | "soft" | undefined;
     enterkeyhint?: ("enter" | "done" | "go" | "next" | "previous" | "search" | "send") | undefined;
     inputmode?: ("none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url") | undefined;
+    charCounterCallback?: ((self: import("../../../components/form/form-control").GdsFormControlElement<string> & {
+        maxlength: number;
+    }) => readonly [number, false | "positive" | "negative"]) | undefined;
     test_getClearButton?: (() => import("../../..").GdsButton | null | undefined) | undefined;
     test_getFieldElement?: (() => Element | null | undefined) | undefined;
     focus?: ((options?: FocusOptions) => void) | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/form-control-footer/form-control-footer.component.d.ts

@@ -1,3 +1,4 @@
+import { GdsBadge } from '../../components/badge/badge.component';
 import { GdsElement } from '../../gds-element';
 /**
  * @element gds-form-control-footer
@@ -5,7 +6,7 @@ import { GdsElement } from '../../gds-element';
 export declare class GdsFormControlFooter extends GdsElement {
     #private;
     static styles: import("lit").CSSResult[];
-    charCounter?: number;
+    charCounter?: [number, GdsBadge['variant'] | boolean];
     errorMessage?: string;
     private _handleVisibilityChange;
     connectedCallback(): void;

package/primitives/form-control-footer/form-control-footer.component.js

@@ -4,6 +4,7 @@ import {
   __privateMethod
 } from "../../chunks/chunk.QU3DSPNU.js";
 var _GdsFormControlFooter_instances, renderRemainingCharsBadge_fn;
+import { nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { GdsBadge } from "../../components/badge/badge.component.js";
@@ -46,29 +47,20 @@ let GdsFormControlFooter = class extends GdsElement {
         >
       </div>
       <div class="char-counter" aria-hidden="true">
-        ${when(
-      Number.isInteger(this.charCounter),
-      () => __privateMethod(this, _GdsFormControlFooter_instances, renderRemainingCharsBadge_fn).call(this, this.charCounter)
-    )}
+        ${__privateMethod(this, _GdsFormControlFooter_instances, renderRemainingCharsBadge_fn).call(this)}
       </div>
     </div>`;
   }
 };
 _GdsFormControlFooter_instances = new WeakSet();
-renderRemainingCharsBadge_fn = function(remaining) {
-  let variant;
-  if (remaining < 0) {
-    variant = "negative";
-  } else if (remaining < 20) {
-    variant = "warning";
-  } else {
-    variant = "positive";
-  }
+renderRemainingCharsBadge_fn = function() {
+  if (!this.charCounter || this.charCounter[1] === false) return nothing;
+  const [remaining, variant] = this.charCounter;
   return html`<gds-badge variant="${variant}">${remaining}</gds-badge>`;
 };
 GdsFormControlFooter.styles = [FormControlFooterStyles];
 __decorateClass([
-  property({ type: Number })
+  property({ type: Array })
 ], GdsFormControlFooter.prototype, "charCounter", 2);
 __decorateClass([
   property()

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-34e8e6";
+const VER_SUFFIX = "-6ed049";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])