@sebgroup/green-core 1.79.0 → 1.80.0

package/components/dialog/dialog.component.js

@@ -22,6 +22,7 @@ import {
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsButton } from "../button/button.component.js";
 import { GdsCard } from "../card/card.component.js";
+import { GdsDiv } from "../div/div.component.js";
 import { GdsFlex } from "../flex/flex.component.js";
 import { IconCrossLarge } from "../icon/icons/cross-large.component.js";
 import { styles } from "./dialog.styles.js";
@@ -213,7 +214,7 @@ __decorateClass([
 ], GdsDialog.prototype, "_handleOpenChange", 1);
 GdsDialog = __decorateClass([
   gdsCustomElement("gds-dialog", {
-    dependsOn: [GdsButton, GdsCard, GdsFlex, IconCrossLarge]
+    dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossLarge]
   }),
   localized()
 ], GdsDialog);

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

@@ -31,6 +31,40 @@ declare class Input extends GdsFormControlElement<string> {
      * Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set.
      */
     plain: boolean;
+    /**
+     * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
+     * to `text`.
+     */
+    type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+    /** The input's minimum value. Only applies to date and number input types. */
+    min?: number | string;
+    /** The input's maximum value. Only applies to date and number input types. */
+    max?: number | string;
+    /**
+     * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+     * implied, allowing any numeric value. Only applies to date and number input types.
+     */
+    step?: number | 'any';
+    /** 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';
+    /**
+     * 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;
+    /** Indicates that the input should receive focus on page load. */
+    autofocus: boolean;
+    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /** Enables spell checking on the input. */
+    spellcheck: boolean;
+    /**
+     * 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?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     private elInputAsync;
     private elInput;
     /**

package/components/input/input.component.js

@@ -4,9 +4,10 @@ import {
   __privateGet,
   __privateMethod
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _shouldShowFooter, shouldShowFooter_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _renderNativeInput, renderNativeInput_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
+var _shouldShowFooter, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _renderNativeInput, renderNativeInput_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
 import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import { nothing } from "lit/html.js";
 import { GdsFieldBase } from "../../primitives/field-base/field-base.component.js";
@@ -15,7 +16,6 @@ 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 { forwardAttributes } from "../../utils/directives/index.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -42,8 +42,10 @@ let Input = class extends GdsFormControlElement {
     this.maxlength = Number.MAX_SAFE_INTEGER;
     this.size = "large";
     this.plain = false;
-    // Any attribute name added here will get forwarded to the native <input> element.
-    __privateAdd(this, _forwardableAttrs, (attr) => ["type", "placeholder", "required"].includes(attr.name));
+    this.type = "text";
+    this.autocapitalize = "off";
+    this.autofocus = false;
+    this.spellcheck = true;
     __privateAdd(this, _handleOnInput, (e) => {
       const element = e.target;
       this.value = element.value;
@@ -135,7 +137,6 @@ _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
   return !this.plain && (this.invalid || __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get));
 };
-_forwardableAttrs = new WeakMap();
 _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();
 _handleFieldClick = new WeakMap();
@@ -172,7 +173,18 @@ renderNativeInput_fn = function() {
         aria-invalid=${this.invalid}
         aria-label=${this.plain && this.label || nothing}
         placeholder=" "
-        ${forwardAttributes(__privateGet(this, _forwardableAttrs))}
+        type=${this.type}
+        min=${ifDefined(this.min)}
+        max=${ifDefined(this.max)}
+        step=${ifDefined(this.step)}
+        autocapitalize=${ifDefined(this.autocapitalize)}
+        autocomplete=${ifDefined(this.autocomplete)}
+        autocorrect=${ifDefined(this.autocorrect)}
+        ?autofocus=${this.autofocus}
+        spellcheck=${this.spellcheck}
+        enterkeyhint=${ifDefined(this.enterkeyhint)}
+        inputmode=${ifDefined(this.inputmode)}
+        ?required=${this.required}
       />
     `;
 };
@@ -221,6 +233,46 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], Input.prototype, "plain", 2);
+__decorateClass([
+  property({ reflect: true })
+], Input.prototype, "type", 2);
+__decorateClass([
+  property()
+], Input.prototype, "min", 2);
+__decorateClass([
+  property()
+], Input.prototype, "max", 2);
+__decorateClass([
+  property()
+], Input.prototype, "step", 2);
+__decorateClass([
+  property()
+], Input.prototype, "autocapitalize", 2);
+__decorateClass([
+  property()
+], Input.prototype, "autocorrect", 2);
+__decorateClass([
+  property()
+], Input.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Input.prototype, "autofocus", 2);
+__decorateClass([
+  property()
+], Input.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    converter: {
+      // Allow "true|false" attribute values but keep the property boolean
+      fromAttribute: (value) => !value || value === "false" ? false : true,
+      toAttribute: (value) => value ? "true" : "false"
+    }
+  })
+], Input.prototype, "spellcheck", 2);
+__decorateClass([
+  property()
+], Input.prototype, "inputmode", 2);
 __decorateClass([
   queryAsync("input")
 ], Input.prototype, "elInputAsync", 2);

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

@@ -43,6 +43,27 @@ declare class Textarea extends GdsFormControlElement<string> {
      * Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set.
      */
     plain: boolean;
+    /** 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';
+    /**
+     * 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;
+    /** Indicates that the input should receive focus on page load. */
+    autofocus: boolean;
+    /** Enables spell checking on the input. */
+    spellcheck: boolean;
+    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';
+    /**
+     * 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?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     private elTextareaAsync;
     private elTextarea;
     private fieldBase;

package/components/textarea/textarea.component.js

@@ -4,9 +4,10 @@ import {
   __privateGet,
   __privateMethod
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _shouldShowFooter, shouldShowFooter_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _renderNativeTextarea, renderNativeTextarea_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
+var _shouldShowFooter, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _renderNativeTextarea, renderNativeTextarea_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
 import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import { nothing } from "lit/html.js";
 import { GdsFieldBase } from "../../primitives/field-base/field-base.component.js";
@@ -18,7 +19,6 @@ import { tokens } from "../../tokens.style.js";
 import { watch } from "../../utils/decorators/index.js";
 import { resizeObserver } from "../../utils/decorators/resize-observer.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
-import { forwardAttributes } from "../../utils/directives/index.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -47,13 +47,14 @@ let Textarea = class extends GdsFormControlElement {
     this.maxlength = Number.MAX_SAFE_INTEGER;
     this.size = "large";
     this.plain = false;
+    this.autocapitalize = "off";
+    this.autofocus = false;
+    this.spellcheck = true;
     this._handleSlotChange = () => {
       requestAnimationFrame(() => {
         this._handleResize();
       });
     };
-    // Any attribute name added here will get forwarded to the native <input> element.
-    __privateAdd(this, _forwardableAttrs, (attr) => ["type", "placeholder", "required"].includes(attr.name));
     __privateAdd(this, _handleOnInput, (e) => {
       const element = e.target;
       this.value = element.value;
@@ -240,7 +241,6 @@ _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
   return !this.plain && (this.invalid || __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get));
 };
-_forwardableAttrs = new WeakMap();
 _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();
 _handleOnPaste = new WeakMap();
@@ -277,7 +277,15 @@ renderNativeTextarea_fn = function() {
         aria-label=${this.plain && this.label || nothing}
         aria-describedby="supporting-text extended-supporting-text sub-label message"
         placeholder=" "
-        ${forwardAttributes(__privateGet(this, _forwardableAttrs))}
+        autocapitalize=${ifDefined(this.autocapitalize)}
+        autocomplete=${ifDefined(this.autocomplete)}
+        autocorrect=${ifDefined(this.autocorrect)}
+        ?autofocus=${this.autofocus}
+        spellcheck=${this.spellcheck}
+        enterkeyhint=${ifDefined(this.enterkeyhint)}
+        inputmode=${ifDefined(this.inputmode)}
+        wrap=${ifDefined(this.wrap)}
+        ?required=${this.required}
       ></textarea>
     `;
 };
@@ -341,6 +349,37 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], Textarea.prototype, "plain", 2);
+__decorateClass([
+  property()
+], Textarea.prototype, "autocapitalize", 2);
+__decorateClass([
+  property()
+], Textarea.prototype, "autocorrect", 2);
+__decorateClass([
+  property()
+], Textarea.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Textarea.prototype, "autofocus", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    converter: {
+      // Allow "true|false" attribute values but keep the property boolean
+      fromAttribute: (value) => !value || value === "false" ? false : true,
+      toAttribute: (value) => value ? "true" : "false"
+    }
+  })
+], Textarea.prototype, "spellcheck", 2);
+__decorateClass([
+  property()
+], Textarea.prototype, "wrap", 2);
+__decorateClass([
+  property()
+], Textarea.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property()
+], Textarea.prototype, "inputmode", 2);
 __decorateClass([
   queryAsync("textarea")
 ], Textarea.prototype, "elTextareaAsync", 2);

package/generated/react/index.d.ts

@@ -48,11 +48,6 @@ export * from './filter-chip/index.js';
 export * from './formatted-account/index.js';
 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';
@@ -340,3 +335,8 @@ 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 './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';

package/generated/react/index.js

@@ -48,11 +48,6 @@ export * from "./filter-chip/index.js";
 export * from "./formatted-account/index.js";
 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";
@@ -340,3 +335,8 @@ 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 "./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";

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

@@ -23,6 +23,17 @@ 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;
+    min?: string | number | undefined;
+    max?: string | number | undefined;
+    step?: number | "any" | undefined;
+    autocapitalize?: "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+    autocorrect?: "off" | "on" | undefined;
+    autocomplete?: string | undefined;
+    autofocus?: boolean | undefined;
+    enterkeyhint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    spellcheck?: boolean | undefined;
+    inputmode?: "search" | "none" | "text" | "numeric" | "email" | "tel" | "url" | "decimal" | undefined;
     test_getClearButton?: (() => import("../../..").GdsButton | null | undefined) | undefined;
     test_getFieldElement?: (() => Element | null | undefined) | undefined;
     render?: (() => any) | undefined;
@@ -58,7 +69,6 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     readonly updateComplete?: Promise<boolean> | undefined;
     accessKey?: string | undefined;
     readonly accessKeyLabel?: string | undefined;
-    autocapitalize?: string | undefined;
     dir?: string | undefined;
     draggable?: boolean | undefined;
     hidden?: boolean | undefined;
@@ -72,7 +82,6 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     readonly offsetWidth?: number | undefined;
     outerText?: string | undefined;
     popover?: string | null | undefined;
-    spellcheck?: boolean | undefined;
     title?: string | undefined;
     translate?: boolean | undefined;
     attachInternals?: (() => ElementInternals) | undefined;
@@ -394,7 +403,6 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     onwebkitanimationstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     onwebkittransitionend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     onwheel?: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null | undefined;
-    autofocus?: boolean | undefined;
     readonly dataset?: DOMStringMap | undefined;
     nonce?: string | undefined;
     tabIndex?: number | undefined;

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

@@ -25,6 +25,14 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     maxlength?: number | undefined;
     size?: "small" | "large" | undefined;
     plain?: boolean | undefined;
+    autocapitalize?: "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+    autocorrect?: "off" | "on" | undefined;
+    autocomplete?: string | undefined;
+    autofocus?: boolean | undefined;
+    spellcheck?: boolean | undefined;
+    wrap?: "hard" | "soft" | undefined;
+    enterkeyhint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    inputmode?: "search" | "none" | "text" | "numeric" | "email" | "tel" | "url" | "decimal" | undefined;
     test_getClearButton?: (() => import("../../..").GdsButton | null | undefined) | undefined;
     test_getFieldElement?: (() => Element | null | undefined) | undefined;
     connectedCallback?: (() => void) | undefined;
@@ -59,7 +67,6 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     readonly updateComplete?: Promise<boolean> | undefined;
     accessKey?: string | undefined;
     readonly accessKeyLabel?: string | undefined;
-    autocapitalize?: string | undefined;
     dir?: string | undefined;
     draggable?: boolean | undefined;
     hidden?: boolean | undefined;
@@ -73,7 +80,6 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     readonly offsetWidth?: number | undefined;
     outerText?: string | undefined;
     popover?: string | null | undefined;
-    spellcheck?: boolean | undefined;
     title?: string | undefined;
     translate?: boolean | undefined;
     attachInternals?: (() => ElementInternals) | undefined;
@@ -395,7 +401,6 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     onwebkitanimationstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     onwebkittransitionend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     onwheel?: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null | undefined;
-    autofocus?: boolean | undefined;
     readonly dataset?: DOMStringMap | undefined;
     nonce?: string | undefined;
     tabIndex?: number | 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": "1.79.0",
+  "version": "1.80.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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

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